/* Hallmark · genre: editorial (loud register) · macrostructure: Narrative Workflow · redesign v2 of same page
 * theme: custom · vibe: "night call, electric chartreuse, heavy stamp" · paper: oklch(95% 0.015 100) · dark: oklch(20% 0.03 170) · accent: oklch(87% 0.19 125)
 * display: Bricolage Grotesque 800 · body: Geist · outlier: JetBrains Mono (operational data register)
 * axes: light-with-dark-bands / display-heavy / chromatic-lime (~125°) — differs from v1 on display style + accent register
 * nav: N7 brutal slab (prev N9 — rotated) · footer: Ft1 mast-headed (bug-marked, crawl moment)
 * enrichment: Tier-B hand-built SVG bug mark + Tier-A dispatch slip · studied: no
 * motion (v3, user-requested): hero enter · slip play-out + stamp slap · scroll reveals (one-shot) · counters · flow arrow draw · bug crawl · hover lift — all reduced-motion safe, no-JS safe (html.js gate)
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30, single hand-built SVG mark) · mobile: pass (34, 49, 50–57)
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 */

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

img, svg { max-width: 100%; }
figure { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; }
a { color: var(--color-green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }

.bug-mark { display: inline-block; flex: none; }

/* ---------- nav · N7 brutal slab ---------- */
.nav-slab { border-bottom: var(--rule-slab) solid var(--color-ink); background: var(--color-paper); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
  text-decoration: none;
}
.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.nav__cta { white-space: nowrap; }

/* ---------- buttons ---------- */
.cta-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.78rem 1.4rem;
  min-height: 44px;
  background: var(--color-lime);
  border: var(--rule-slab) solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-slab);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.cta-solid:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--color-ink); }
.cta-solid:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--color-ink); }

.cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.72rem 1.25rem;
  min-height: 44px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.cta-outline:hover { background: var(--color-ink); color: var(--color-paper); }
.cta-outline:active { transform: translateY(1px); }

.cta-link {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-lime-deep);
  text-underline-offset: 4px;
  white-space: nowrap;
}
.cta-link:hover { text-decoration-thickness: 3px; }

/* ---------- hero — dark band, split diptych ---------- */
.hero-band {
  background: var(--color-dark);
  color: var(--color-dark-ink);
  border-bottom: var(--rule-slab) solid var(--color-ink);
}
.hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-2xl) var(--space-3xl);
}
.hero__headline { font-size: var(--text-display-s); max-width: 19ch; color: var(--color-dark-ink); }
.hero__headline .hl-quiet { display: block; }
.hero__headline .hl-money { display: block; color: var(--color-lime); }
.hero__lede {
  margin-top: var(--space-lg);
  font-size: var(--text-md);
  max-width: 52ch;
  color: var(--color-dark-muted);
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}
.hero__reassure { font-size: var(--text-sm); color: var(--color-dark-muted); max-width: 30ch; }
.hero__trust {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-dark-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-dark-muted);
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.hero__trust li + li::before { content: "·"; margin-right: var(--space-md); color: var(--color-dark-rule); }

/* dark-band buttons keep readable slab shadows */
.hero-band .cta-solid { box-shadow: var(--shadow-slab-dark); border-color: var(--color-lime); }
.hero-band .cta-solid:hover { box-shadow: 7px 7px 0 var(--color-lime); }
.hero-band .cta-solid:active { box-shadow: 2px 2px 0 var(--color-lime); }

/* ---------- dispatch slip — paper card on dark ---------- */
.slip {
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-slab) solid var(--color-ink);
  border-radius: var(--radius-slip);
  box-shadow: var(--shadow-slab-dark);
  padding: var(--space-lg);
  position: relative;
  max-width: 26rem;
  justify-self: end;
  width: 100%;
  transform: rotate(1.2deg);
}
.slip::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 0;
  border-top: 2px dashed var(--color-rule);
}
.slip__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-ink);
  margin-bottom: var(--space-sm);
}
.slip__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.slip__no { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.slip__rows { display: grid; gap: var(--space-sm); margin: 0; }
.slip__row {
  display: grid;
  grid-template-columns: 5.2em 1fr;
  gap: var(--space-sm);
  align-items: baseline;
}
.slip__time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
}
.slip__event { font-size: var(--text-sm); color: var(--color-ink); }
.slip__event em { font-style: normal; color: var(--color-green); font-weight: 600; }
.slip__stamp {
  position: absolute;
  right: var(--space-lg);
  bottom: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
  border: 3px solid var(--color-green);
  border-radius: var(--radius-slip);
  padding: 0.3em 0.7em;
  transform: rotate(-4deg);
}
.slip__foot {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 2px dashed var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-muted);
  max-width: 24ch;
}

/* ---------- section rhythm ---------- */
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--slab { border-top: var(--rule-slab) solid var(--color-ink); }
.section__head { max-width: 50rem; }
.section__title { font-size: var(--text-3xl); max-width: 20ch; }
.section__sub { margin-top: var(--space-md); font-size: var(--text-md); color: var(--color-ink-2); max-width: 58ch; }

/* ---------- timeline · F4 step sequence ---------- */
.stages { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; gap: 0; }
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  padding-block: var(--space-xl);
  border-top: 2px solid var(--color-ink);
  max-width: 48rem;
}
.stage__meta { display: flex; align-items: center; gap: var(--space-md); }
.stage__no {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-ink);
  background: var(--color-lime);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-slip);
  padding: 0.18em 0.4em;
}
.stage__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.06em; }
.stage__title { font-size: var(--text-xl); }
.stage__body { color: var(--color-ink-2); max-width: 58ch; }

/* ---------- ledger · F3 tabular spec sheet ---------- */
.ledger-wrap { overflow-x: auto; margin-top: var(--space-2xl); }
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: var(--space-sm);
}
.ledger th, .ledger td {
  text-align: left;
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
}
.ledger thead th {
  border-top: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-block: var(--space-sm);
}
.ledger th[scope="row"] { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--color-ink); }
.ledger td { color: var(--color-ink-2); }
.ledger .num {
  font-family: var(--font-mono);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  color: var(--color-ink);
  padding-right: 0;
}
.ledger .num--red { color: var(--color-red); }
.ledger tfoot th, .ledger tfoot td { border-top: var(--rule-slab) solid var(--color-ink); font-weight: 700; color: var(--color-ink); }
.ledger tfoot .total-row th, .ledger tfoot .total-row td { background: var(--color-red); color: var(--color-paper); border-top: var(--rule-slab) solid var(--color-ink); }
.ledger tfoot .total-row th { padding-left: var(--space-sm); }
.ledger tfoot .total-row td.num { padding-right: var(--space-sm); color: var(--color-paper); }

/* ---------- the math — pow panel ---------- */
.pow {
  margin-top: var(--space-2xl);
  background: var(--color-dark);
  color: var(--color-dark-ink);
  border: var(--rule-slab) solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-slab);
  padding: var(--space-xl);
  max-width: 52rem;
}
.pow__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-dark-muted);
}
.pow__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: 2px solid var(--color-dark-rule);
}
.pow__row--back { border-bottom: 0; border-top: 4px double var(--color-lime); margin-top: -2px; }
.pow__desc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-dark-ink);
}
.pow__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw + 0.6rem, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pow__num--red { color: var(--color-red-bright); }
.pow__num--lime { color: var(--color-lime); }
.pow__per { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-dark-muted); }
.pow__note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-dark-muted); max-width: 52ch; }
.pow__cta { margin-top: var(--space-lg); }
.pow .cta-solid { box-shadow: var(--shadow-slab-dark); border-color: var(--color-lime); }
.pow .cta-solid:hover { box-shadow: 7px 7px 0 var(--color-lime); }
.pow .cta-solid:active { box-shadow: 2px 2px 0 var(--color-lime); }

/* ---------- outcomes list ---------- */
.outcomes {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: var(--space-3xl);
  row-gap: 0;
}
.outcome { padding-block: var(--space-xl); border-top: 2px solid var(--color-ink); }
.outcome__name { font-size: var(--text-xl); }
.outcome__aka {
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.outcome__body { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 46ch; }
.outcome__result { margin-top: var(--space-sm); font-weight: 600; color: var(--color-ink); max-width: 46ch; }

/* ---------- keep-your-tools band — dark, with flow diagram ---------- */
.band {
  background: var(--color-dark);
  color: var(--color-dark-ink);
  border-block: var(--rule-slab) solid var(--color-ink);
}
.band__inner {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-3xl);
}
.band__title { font-size: var(--text-2xl); max-width: 26ch; color: var(--color-dark-ink); }
.band__title .hl-lime { color: var(--color-lime); }
.band__body { color: var(--color-dark-muted); max-width: 50ch; }

.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
}
.flow__node {
  border: 2px solid var(--color-dark-rule);
  background: var(--color-dark-2);
  border-radius: var(--radius-card);
  padding: var(--space-lg) var(--space-md);
  display: grid;
  gap: var(--space-2xs);
  justify-items: center;
  text-align: center;
  color: var(--color-dark-ink);
  min-height: 7.5rem;
  align-content: center;
}
.flow__node--hub {
  background: var(--color-lime);
  border: var(--rule-slab) solid var(--color-ink);
  color: var(--color-ink);
}
.flow__label { font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); line-height: 1.15; }
.flow__small { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-dark-muted); }
.flow__node--hub .flow__small { color: var(--color-ink); }
.flow__arrow {
  width: 46px;
  height: 24px;
  flex: none;
}
.flow__line {
  stroke: var(--color-lime);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- pricing ---------- */
.tiers {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: stretch;
}
.tier {
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-card);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-paper);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tier:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-slab); }
}
.tier--founding { border: var(--rule-slab) solid var(--color-ink); box-shadow: var(--shadow-slab); background: var(--color-paper); }
.tier__badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-lime);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-slip);
  padding: 0.3em 0.65em;
}
.tier__name { font-size: var(--text-xl); }
.tier__price { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1; }
.tier__price .per { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); letter-spacing: 0; }
.tier__strike { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--color-green); color: var(--color-muted); font-size: var(--text-xl); margin-right: 0.25em; }
.tier__setup { font-size: var(--text-sm); color: var(--color-muted); margin-top: calc(-1 * var(--space-xs)); }
.tier__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.tier__list li { padding-left: 1.2em; position: relative; }
.tier__list li::before { content: "→"; position: absolute; left: 0; color: var(--color-green); }
.tier__foot { margin-top: auto; padding-top: var(--space-md); }

.private {
  margin-top: var(--space-2xl);
  border: var(--rule-slab) solid var(--color-ink);
  border-radius: var(--radius-card);
  background: var(--color-dark);
  color: var(--color-dark-ink);
  box-shadow: var(--shadow-slab);
  padding: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}
.private__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-lime);
}
.private__title { color: var(--color-dark-ink); font-size: var(--text-2xl); margin-top: var(--space-xs); max-width: 24ch; }
.private__body { margin-top: var(--space-sm); color: var(--color-dark-muted); max-width: 56ch; }
.private__aside { justify-self: end; text-align: right; display: grid; gap: var(--space-md); justify-items: end; }
.private__price { font-family: var(--font-mono); color: var(--color-dark-ink); font-size: var(--text-md); }
.private .cta-solid { box-shadow: var(--shadow-slab-dark); border-color: var(--color-lime); }
.private .cta-solid:hover { box-shadow: 7px 7px 0 var(--color-lime); }
.private .cta-solid:active { box-shadow: 2px 2px 0 var(--color-lime); }

.pricing__note { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); max-width: 62ch; }

/* ---------- guarantee ---------- */
.guarantee {
  max-width: 48rem;
  border: var(--rule-slab) solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-slab);
  padding: var(--space-xl);
  margin-top: var(--space-2xl);
  background: var(--color-paper-2);
}
.guarantee__quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  line-height: 1.2;
}
.guarantee__quote .hl-lime-band {
  background: linear-gradient(180deg, transparent 42%, var(--color-lime) 42%, var(--color-lime) 92%, transparent 92%);
}
.guarantee__body { margin-top: var(--space-md); color: var(--color-ink-2); }

/* ---------- FAQ ---------- */
.faq { margin-top: var(--space-2xl); max-width: 48rem; }
.faq details { border-top: 2px solid var(--color-ink); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: var(--text-lg); color: var(--color-green); flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq .faq__a { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 58ch; }

/* ---------- final CTA — dark band ---------- */
.book-band { background: var(--color-dark); color: var(--color-dark-ink); border-top: var(--rule-slab) solid var(--color-ink); }
.book { padding-block: var(--space-3xl) var(--space-4xl); }
.book__title { font-size: var(--text-display-s); max-width: 16ch; color: var(--color-dark-ink); }
.book__title .hl-money { color: var(--color-lime); }
.book__body { margin-top: var(--space-lg); max-width: 54ch; color: var(--color-dark-muted); }
.book__strong { margin-top: var(--space-md); max-width: 54ch; font-weight: 600; color: var(--color-dark-ink); }
.book__actions { margin-top: var(--space-xl); display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.book__alt { font-size: var(--text-sm); color: var(--color-dark-muted); max-width: 40ch; }
.book-band .cta-solid { box-shadow: var(--shadow-slab-dark); border-color: var(--color-lime); }
.book-band .cta-solid:hover { box-shadow: 7px 7px 0 var(--color-lime); }
.book-band .cta-solid:active { box-shadow: 2px 2px 0 var(--color-lime); }

/* ---------- footer · Ft1 mast-headed + crawl track ---------- */
.foot-track { position: relative; border-top: var(--rule-slab) solid var(--color-lime); }
.foot { padding-block: var(--space-2xl); display: grid; gap: var(--space-sm); }
.foot__brand { display: flex; align-items: center; gap: var(--space-sm); }
.foot__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.foot__tagline { color: var(--color-ink-2); max-width: 44ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-sm); }
.foot__links a { color: var(--color-muted); white-space: nowrap; }
.foot__legal { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-md); }

/* the crawl — one bug walks the footer rule, once */
.crawler {
  position: absolute;
  top: -31px;
  left: -32px;
  width: 28px;
  height: 28px;
  color: var(--color-paper);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .crawler.is-crawling { animation: crawl 7s steps(90) forwards; }
  @keyframes crawl {
    from { transform: translateX(0) rotate(90deg); }
    to   { transform: translateX(min(88vw, 62rem)) rotate(90deg); }
  }
  .crawler:not(.is-crawling) { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crawler { transform: translateX(min(80vw, 56rem)) rotate(90deg); }
}

/* ---------- motion: load entrances, slip play-out, scroll reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .enter { opacity: 0; transform: translateY(12px); animation: enter var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms); }
  @keyframes enter { to { opacity: 1; transform: none; } }

  /* the call record plays out like it happened — row by row, then the stamp */
  .slip__row { opacity: 0; transform: translateY(6px); animation: row-in 320ms var(--ease-out) forwards; animation-delay: calc(850ms + var(--r, 0) * 430ms); }
  @keyframes row-in { to { opacity: 1; transform: none; } }
  .slip__foot { opacity: 0; animation: row-in 320ms var(--ease-out) forwards; animation-delay: 3250ms; }
  .slip__stamp { opacity: 0; animation: stamp-in 360ms var(--ease-out) forwards; animation-delay: 2950ms; }
  @keyframes stamp-in {
    from { opacity: 0; transform: rotate(-14deg) scale(1.7); }
    to   { opacity: 1; transform: rotate(-4deg) scale(1); }
  }

  /* scroll reveals — one-shot, gated on .js so no-JS visitors see everything */
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }

  /* flow arrows draw in after the diagram reveals */
  html.js .flow .flow__line { stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset 650ms var(--ease-out) 350ms; }
  html.js .flow.is-in .flow__line { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .hero { grid-template-columns: 1fr; gap: var(--space-2xl); padding-block: var(--space-2xl); }
  .slip { justify-self: start; transform: rotate(0.6deg); }
  .outcomes { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .private { grid-template-columns: 1fr; }
  .private__aside { justify-self: start; text-align: left; justify-items: start; }
  .flow { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .flow__arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 40rem) {
  .section { padding-block: var(--space-2xl); }
  .nav { flex-wrap: wrap; row-gap: var(--space-sm); }
  .hero__headline { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .section__title { font-size: var(--text-2xl); }
  .book__title { font-size: var(--text-2xl); }
  .stage__meta { flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
  .cta-solid, .cta-outline { min-height: 48px; }
  .foot__wordmark { font-size: var(--text-xl); }
}