/* ------------------------------------------------------------------
   Process King — /tattoo/ page styles. Layered on home.css tokens.
------------------------------------------------------------------- */
body.tattoo { background: var(--ink); color: #F1EFE9; }
.tattoo .section--paper { background: var(--paper); color: var(--text); }
.tattoo .section--paper .lede { color: var(--muted); }
.tattoo .section--dark + .section--dark { border-top: 1px solid var(--line-dark); }

/* Hero: single column, darker wash than the homepage */
.hero--tattoo::after { background: linear-gradient(180deg, rgba(15,26,42,.62) 0%, rgba(15,26,42,.35) 40%, rgba(15,26,42,.86) 78%, var(--ink) 100%); }
.hero__inner--single { grid-template-columns: minmax(0, 1fr); }
.hero--tattoo .hero__copy { max-width: 820px; }
.hero--tattoo:not(:has(.hero__media)) { min-height: 78svh; background:
  radial-gradient(60% 50% at 80% 20%, rgba(217,164,65,.14), transparent 60%),
  radial-gradient(40% 40% at 10% 90%, rgba(37,99,235,.18), transparent 60%), var(--ink); }

/* Feature grid */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat { border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: clamp(20px, 2.6vw, 28px); display: grid; gap: 12px; align-content: start; background: rgba(255,255,255,.025); transition: border-color .3s, transform .4s var(--ease-out); }
.feat:hover { border-color: rgba(217,164,65,.55); transform: translateY(-3px); }
.feat__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(217,164,65,.12); color: var(--brass-2); }
.feat__icon svg { width: 24px; height: 24px; }
.feat h3 { font-size: 1.2rem; }
.feat p { color: rgba(241,239,233,.72); text-wrap: pretty; }

/* Session flow timeline */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--brass) 12%, var(--brass) 88%, transparent); opacity: .5; }
.flow__step { display: grid; gap: 10px; align-content: start; }
.flow__n { font-family: var(--mono); font-size: 1rem; color: var(--ink); background: var(--brass); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; position: relative; z-index: 1; box-shadow: 0 0 0 8px var(--ink); }
.flow__step h3 { font-size: 1.35rem; margin-top: 6px; }
.flow__step p { color: rgba(241,239,233,.72); text-wrap: pretty; }
.flow__tool { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }

/* Tiers */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 10px; align-content: start; }
.tier__name { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tier__price { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.tier__price .num { font-family: inherit; }
.tier__rates { font-family: var(--mono); font-size: .86rem; color: var(--ink); line-height: 1.5; }
.tier__for { color: var(--muted); font-size: .95rem; text-wrap: pretty; }
.tier--yours { background: var(--ink); color: #F1EFE9; border: 2px solid var(--brass); box-shadow: var(--shadow-lg); }
.tier--yours .tier__name { color: var(--brass-2); }
.tier--yours .tier__price, .tier--yours .tier__rates { color: #fff; }
.tier--yours .tier__for { color: rgba(241,239,233,.78); }
.tier--yours .btn { margin-top: 8px; }
.fineprint--paper { color: var(--muted); }

/* Equipment: two cards */
.hw-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.section--equip { padding-top: 0; }

/* Why us */
.tattoo .note { color: var(--text); }
.why { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; color: rgba(241,239,233,.8); }
.why__item strong { color: #fff; display: block; margin-bottom: 2px; }
.why__intro { display: grid; gap: 12px; margin-top: 16px; color: rgba(241,239,233,.78); max-width: 58ch; text-wrap: pretty; }
.why__link { margin-top: 20px; color: rgba(241,239,233,.7); }
.why__link a { color: var(--brass-2); }

/* FAQ: shared rules live in inner.css; dark-page overrides only */
.tattoo .faq__item { background: rgba(255,255,255,.025); border-color: var(--line-dark); }
.tattoo .faq__a { color: rgba(241,239,233,.75); }
.tattoo .faq__a a { color: var(--brass-2); }

/* Nav: keep the phone visible on phones (no menu on this page) */
@media (max-width: 860px) {
  .tattoo .nav__phone { display: inline-block; }
  .tattoo .nav .btn { display: none; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow::before { display: none; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .tier--yours { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .feat-grid, .flow, .tiers, .hw-grid--two { grid-template-columns: 1fr; }
  .flow__n { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .feat, .faq__item summary::after { transition: none; }
}