/* ==========================================================================
   Smart Helping Plan — public site
   Deep green-black ink, a paper sheet in blue ballpoint for the sums,
   gold hand-annotations, emerald only for things you can act on.
   ========================================================================== */

/* — Tokens — */
:root {
  /* Ink: the app's green-black scale, hex for older Android WebViews */
  --ink-950: #030906;
  --bg: #06100b;          /* oklch(0.16 0.018 165) */
  --surface: #0d1914;     /* oklch(0.20 0.020 165) */
  --surface-2: #16231d;
  --surface-3: #1f2c26;   /* oklch(0.28 0.022 165) */
  --rule: #1f2c26;
  --rule-strong: #33413a;

  --text: #f4f1e6;        /* warm off-white */
  --text-2: #c9cfc4;
  --muted: #9aa9a0;       /* 7.4:1 on --bg */

  /* Roles */
  --accent: #34d399;      /* emerald-400: action */
  --accent-hi: #6ee7b7;
  --accent-ink: #03140c;
  --gold: #e9c46a;        /* handwriting / annotation */
  --gold-soft: rgba(233, 196, 106, .14);
  --orange: #fb923c;      /* payment due */
  --orange-soft: rgba(251, 146, 60, .14);
  --rose: #fb7185;        /* on hold */
  --rose-soft: rgba(251, 113, 133, .14);

  /* Paper */
  --paper: #efe7d4;
  --paper-rule: rgba(64, 104, 170, .26);
  --paper-margin: rgba(196, 72, 72, .45);
  --pen: #24378c;         /* blue ballpoint */
  --pen-red: #b3352f;
  --paper-text: #1d2621;

  /* Type */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-hand: "Kalam", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Spacing scale: 4 8 12 16 24 32 48 64 96 128 192 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 192px;

  --gutter: 16px;
  --max: 1320px;
  --section: clamp(96px, 12vw, 176px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* — Base — */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
q { quotes: "\201C" "\201D"; }
strong, b { font-weight: 600; color: var(--text); }
em { font-style: italic; }
::selection { background: var(--gold); color: var(--ink-950); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--gold); color: var(--ink-950); padding: var(--s3) var(--s4);
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s3); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.i { width: 18px; height: 18px; flex: none; }
.t-muted { color: var(--muted); }
.t-rose { color: var(--rose); }

/* — Type — */
.display {
  font-size: clamp(2.875rem, 9.4vw, 8.5rem);
  line-height: .92;
  letter-spacing: -0.045em;
  font-weight: 600;
}
.display .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.display .line > span { display: inline-block; }
.display .line-2 { color: var(--gold); }
.display-md { font-size: clamp(2.5rem, 7.2vw, 6.25rem); line-height: .95; letter-spacing: -0.04em; }
.display-md span { color: var(--gold); }

.h2 {
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  letter-spacing: -0.035em;
  line-height: 1;
}
.lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--text-2); max-width: 58ch; line-height: 1.55; }

.label {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
}
.label::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .7; }
.label-gold { color: var(--gold); }
.label-orange { color: var(--orange); }

.eyebrow { font-size: .8125rem; color: var(--muted); letter-spacing: .02em; margin-bottom: var(--s5); }

.hand { font-family: var(--font-hand); font-weight: 400; }
.hand-gold { color: var(--gold); }

/* A hand-circled numeral, like the circled ①②③ in the notebook */
.hand-num {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.375rem; line-height: 1;
  color: var(--gold);
  border: 1.5px solid currentColor;
  border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%;
  transform: rotate(-4deg);
  padding-top: 3px;
}
.hand-num.sm { width: 28px; height: 28px; font-size: .9375rem; border-width: 1.25px; }

/* — Buttons & links — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out), color .18s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hi); transform: translateY(-1px); }
.btn-ghost { border-color: var(--rule-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); background: var(--surface-2); }
.btn-ghost:hover .i { transform: translateY(2px); }
.btn .i { transition: transform .2s var(--ease-out); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; }

.text-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; font-weight: 600; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.text-link:hover { color: var(--accent-hi); }
.text-link:hover .i { transform: translateX(3px); }
.text-link .i { transition: transform .2s var(--ease-out); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

.risk-mini {
  display: flex; gap: var(--s3); align-items: flex-start;
  font-size: .9375rem; color: var(--text-2); max-width: 56ch; line-height: 1.5;
}
.risk-mini .i { color: var(--gold); margin-top: 2px; }
.risk-mini a { color: var(--gold); text-underline-offset: 3px; }
.risk-mini a:hover { color: var(--text); }

/* — Header — */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 16, 11, .94);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.header-inner { display: flex; align-items: center; gap: var(--s4); min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; min-height: 44px; margin-right: auto; }
.brand-tile {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 10px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .35);
  color: var(--accent);
}
.brand-tile svg { width: 22px; height: 22px; }
.brand-tile.xs { width: 24px; height: 24px; border-radius: 7px; }
.brand-tile.xs svg { width: 14px; height: 14px; }
.brand-name { font-weight: 600; letter-spacing: -0.01em; font-size: 1rem; white-space: nowrap; }

.nav-list { display: flex; align-items: center; gap: var(--s1); }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3);
  color: var(--text-2); text-decoration: none; font-size: .9375rem; font-weight: 500;
  border-radius: 999px;
  transition: color .15s var(--ease-out), background-color .15s var(--ease-out);
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }

.header-actions { display: flex; align-items: center; gap: var(--s2); }
.menu-btn {
  display: none; width: 44px; height: 44px; place-items: center;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 999px; cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn path { transition: transform .25s var(--ease-move); transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .m-top { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .m-bot { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 899px) {
  .js .menu-btn { display: grid; }
  .js .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    padding: var(--s2) var(--gutter) var(--s5);
    display: none;
  }
  .js .nav.is-open { display: block; }
  .js .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav-link { min-height: 52px; font-size: 1.0625rem; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 0 var(--s1); }
  .js .nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); padding-left: var(--s4); }
  /* Without JS, the nav wraps under the logo instead */
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: var(--s2); }
  html:not(.js) .nav { order: 3; width: 100%; }
  html:not(.js) .nav-list { flex-wrap: wrap; }
}
@media (max-width: 380px) { .brand-name { font-size: .9375rem; } }

/* — Sections: shared — */
section { position: relative; }
.section-head { display: grid; gap: var(--s4); margin-bottom: clamp(var(--s7), 6vw, var(--s9)); max-width: 820px; }
@media (min-width: 1000px) {
  .section-head-split { max-width: none; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); align-items: end; }
  .section-head-split .label { grid-column: 1 / -1; }
  .section-head-split .h2 { grid-column: 1 / 8; }
  .section-head-split .lede { grid-column: 9 / 13; }
}

/* — Hero — */
.hero {
  padding-block: clamp(var(--s7), 8vw, var(--s10)) clamp(var(--s8), 10vw, var(--s10));
  overflow: hidden;
}
/* faint ruled lines, like an exercise book at night */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(154, 169, 160, .06) 39px 40px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
          mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.hero-grid { position: relative; display: grid; gap: var(--s8); }
.hero-copy { display: grid; gap: var(--s5); align-content: start; }
.hero-copy .eyebrow { margin-bottom: 0; }
.hero-copy .display { margin-block: var(--s1) var(--s2); }
.hero-copy .cta-row { margin-top: var(--s2); }

@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); align-items: start; }
  .hero-copy { grid-column: 1 / 8; padding-top: var(--s6); }
  .hero-sheet { grid-column: 8 / 13; margin-right: calc(var(--gutter) * -0.5); margin-top: var(--s9); }
}

/* Headline line reveal on load */
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.display .line > span { animation: rise .9s var(--ease-out) both; }
.display .line-2 > span { animation-delay: .12s; }

/* — The paper sheet — */
.hero-sheet { margin: 0; justify-self: center; width: 100%; max-width: 480px; }
.sheet {
  --lh: 28px;
  position: relative;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent 38px, var(--paper-margin) 38px 39px, transparent 39px),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--paper-rule) calc(var(--lh) - 1px) var(--lh));
  background-position: 0 14px;
  color: var(--pen);
  padding: calc(var(--lh) * .5 + 2px) var(--s4) var(--lh) 50px;
  border-radius: 3px 3px 6px 4px;
  transform: rotate(-1.6deg);
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 30px 60px -30px rgba(0,0,0,.8);
  font-family: var(--font-hand);
  line-height: var(--lh);
}
/* punched holes */
.sheet::before {
  content: ""; position: absolute; left: 4px; top: 40px; bottom: 40px; width: 12px;
  background: radial-gradient(circle at 6px 6px, var(--bg) 5px, transparent 5.5px) 0 0 / 12px 112px repeat-y;
  opacity: .9;
}
.sheet-title { font-size: 1.125rem; font-weight: 700; text-align: center; height: var(--lh); }
.sheet-board { width: 100%; height: calc(var(--lh) * 6); margin-block: 0; }
.sheet-board .ink { stroke: var(--pen); stroke-width: 1.3; }
.sheet-board .seats circle { fill: none; stroke: var(--pen); stroke-width: 1.3; }
.sheet-board .hand { font-family: var(--font-hand); fill: var(--pen); }
.sheet-board .out { fill: var(--pen-red); font-weight: 700; }
.sheet-board .out-line { stroke: var(--pen-red); stroke-width: 1.3; }
.sums { display: grid; font-size: clamp(.9375rem, 3.9vw, 1.0625rem); }
.sums li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35em; min-height: var(--lh); }
.sums .n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: -30px; margin-right: 8px;
  border: 1.2px solid currentColor; border-radius: 50%; font-size: .8125rem; font-weight: 700; transform: translateY(-1px);
}
.sums em { font-style: normal; color: var(--pen-red); font-weight: 700; }
.sums u { text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--pen-red); }

.note {
  position: relative; display: flex; gap: var(--s3); align-items: flex-start;
  margin-top: var(--s5); padding-left: var(--s2);
  font-family: var(--font-hand); font-size: 1.0625rem; line-height: 1.35; color: var(--gold);
  max-width: 36ch;
}
.note-arrow { width: 44px; height: 30px; flex: none; transform: scaleY(-1) rotate(8deg); margin-top: -6px; }

/* Sheet draws itself once, on load */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wipe { from { clip-path: inset(-4px 100% -4px -40px); } to { clip-path: inset(-4px -4px -4px -40px); } }
@keyframes pop { from { opacity: 0; } to { opacity: 1; } }
.sheet .draw { stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 1.4s var(--ease-move) var(--d, 0s) forwards; }
.sheet .seats circle { animation: pop .5s var(--ease-out) .5s both; }
.sheet .hand text { animation: pop .6s var(--ease-out) 1.1s both; }
.sheet .sums li { animation: wipe 1s var(--ease-move) var(--d, 0s) both; }

/* — Facts band — */
.facts { background: var(--surface); border-block: 1px solid var(--rule); padding-block: clamp(var(--s8), 8vw, var(--s9)); }
.facts .label { margin-bottom: var(--s7); }
.facts-list { display: grid; gap: var(--s7); }
.fact { display: grid; gap: var(--s3); align-content: start; }
.fact .hand-num { margin-bottom: var(--s2); }
.fact h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -0.025em; line-height: 1.05; }
.fact p { color: var(--text-2); max-width: 40ch; }
@media (min-width: 800px) {
  .facts-list { grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); }
  .fact:nth-child(1) { grid-column: 1 / 6; }
  .fact:nth-child(2) { grid-column: 6 / 10; padding-top: var(--s7); }
  .fact:nth-child(3) { grid-column: 10 / 13; padding-top: var(--s9); }
  .fact:nth-child(1) h3 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
}

/* — Explainer — */
.how { padding-block: var(--section); }
.explainer { display: grid; gap: var(--s6); }
@media (min-width: 1000px) {
  .explainer { grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); align-items: start; }
  .explainer-stage { grid-column: 1 / 8; position: sticky; top: 92px; }
  .steps { grid-column: 8 / 13; }
}
.stage-frame {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(var(--s3), 3vw, var(--s6));
  overflow: hidden;
}
.stage-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(154,169,160,.09) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.board-svg { position: relative; width: 100%; height: auto; aspect-ratio: 360 / 330; overflow: visible; }
.noscript-note { color: var(--muted); padding: var(--s5); }

/* SVG parts (built by site.js) */
.bd-line { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: opacity .6s var(--ease-out), stroke .5s; }
.bd-seat circle { fill: var(--surface-2); stroke: var(--rule-strong); stroke-width: 1.5; stroke-dasharray: 3 3; transition: fill .45s var(--ease-out), stroke .45s var(--ease-out); }
.bd-seat .glyph { fill: var(--muted); opacity: 0; transition: opacity .3s; }
.bd-seat.is-filled circle { fill: rgba(52, 211, 153, .16); stroke: var(--accent); stroke-dasharray: none; }
.bd-seat.is-filled .glyph { fill: var(--accent-hi); opacity: .9; }
.bd-seat.is-top.is-filled circle { fill: rgba(233, 196, 106, .18); stroke: var(--gold); }
.bd-seat.is-top.is-filled .glyph { fill: var(--gold); }
.bd-seat.is-new circle { fill: transparent; stroke: var(--muted); stroke-dasharray: 2 2.4; }
.bd-text { font-family: var(--font-hand); font-size: 13px; fill: var(--gold); transition: opacity .45s var(--ease-out); }
.bd-text.sm { font-size: 11px; }
.bd-text.muted { fill: var(--muted); font-family: var(--font-sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.bd-text.kept { fill: var(--accent-hi); }
.bd-coin { fill: var(--gold); stroke: var(--ink-950); stroke-width: 1.5; }
.bd-kept-coin { fill: var(--accent); stroke: var(--ink-950); stroke-width: 1.2; transition: opacity .4s; }
.bd-branch, .bd-topgroup { transition: transform .9s var(--ease-move), opacity .6s var(--ease-out); }
.bd-fade { transition: opacity .5s var(--ease-out); }
.bd-divider { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 3 5; transition: opacity .6s var(--ease-out) .5s; }
.is-hidden { opacity: 0; }

.stage-controls { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.stage-controls[hidden] { display: none; }
.ctl {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 999px; background: transparent; border: 1px solid var(--rule-strong);
  cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s var(--ease-out);
}
.ctl svg { width: 20px; height: 20px; }
.ctl:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-2); }
.ctl:active:not(:disabled) { transform: scale(.94); }
.ctl:disabled { opacity: .35; cursor: not-allowed; }
.ctl-count { font-size: .875rem; color: var(--muted); min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; }
.ctl-count span { color: var(--text); font-weight: 600; }
.ctl-play { width: auto; padding: 0 var(--s4) 0 var(--s3); gap: var(--s2); display: inline-flex; margin-left: auto; font-weight: 600; font-size: .9375rem; }
.ctl-play svg { width: 16px; height: 16px; }
.ctl-play .ico-pause { display: none; }
.ctl-play[aria-pressed="true"] .ico-pause { display: block; }
.ctl-play[aria-pressed="true"] .ico-play { display: none; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); font-size: .8125rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: var(--s2); }
.sw { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid; }
.sw-paid { background: rgba(52, 211, 153, .2); border-color: var(--accent); }
.sw-empty { border-color: var(--rule-strong); border-style: dashed; background: var(--surface-2); }
.sw-coin { background: var(--gold); border-color: var(--gold); width: 10px; height: 10px; }

.steps { counter-reset: step; border-top: 1px solid var(--rule); }
.step { border-bottom: 1px solid var(--rule); }
.step-btn {
  display: flex; align-items: center; gap: var(--s4); width: 100%; min-height: 64px;
  padding: var(--s3) 0; background: none; border: 0; text-align: left; cursor: pointer;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); font-weight: 600; letter-spacing: -0.015em;
  color: var(--text-2); transition: color .2s;
}
.step-btn:hover { color: var(--text); }
.step-n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.0625rem; padding-top: 2px;
  border: 1.4px solid var(--rule-strong); border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%;
  color: var(--muted);
  transition: background-color .3s var(--ease-out), color .3s, border-color .3s;
}
.step.is-active .step-btn { color: var(--text); }
.step.is-active .step-n { background: var(--gold); border-color: var(--gold); color: var(--ink-950); }
.step-body { padding: 0 0 var(--s5) 50px; display: grid; gap: var(--s4); color: var(--text-2); max-width: 60ch; }
.step-body .honest { padding: var(--s4); background: var(--gold-soft); border-left: 2px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text); font-size: .9688rem; }
.js .explainer.is-ready .step:not(.is-active) .step-body { display: none; }
.js .explainer.is-ready .step.is-active .step-body { animation: stepIn .45s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.paper-note {
  background: var(--paper); color: var(--pen); font-family: var(--font-hand);
  padding: var(--s3) var(--s4); border-radius: 3px; transform: rotate(-.8deg);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--paper-rule) 31px 32px);
  background-position: 0 6px;
  font-size: 1.0625rem; line-height: 32px;
}
.paper-note p { display: flex; justify-content: space-between; gap: var(--s4); }
.paper-note p span:last-child { font-weight: 700; white-space: nowrap; }
.paper-note .total { border-top: 1.5px solid var(--pen); color: var(--pen-red); }

/* — Journey ledger — */
.journey { padding-block: 0 var(--section); }
.ledger { border-top: 1px solid var(--rule-strong); }
.ledger-row {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s3) var(--s4);
  padding-block: var(--s6); border-bottom: 1px solid var(--rule);
}
.ledger-main { display: grid; gap: var(--s2); }
.ledger-main h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -0.03em; }
.ledger-main p { color: var(--text-2); max-width: 62ch; }
.ledger-row .chip { grid-column: 2; justify-self: start; }
@media (min-width: 900px) {
  .ledger-row { grid-template-columns: 96px minmax(0, 1fr) 220px; align-items: start; padding-block: var(--s7); }
  .ledger-row .hand-num { width: 56px; height: 56px; font-size: 1.75rem; }
  .ledger-row .chip { grid-column: 3; justify-self: end; margin-top: var(--s2); }
  .ledger-main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s5); }
}

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 36px; padding: 0 var(--s4);
  border-radius: 12px; font-size: .875rem; font-weight: 600;
  background: var(--surface-2); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.chip-emerald { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.chip-orange { background: rgba(251, 146, 60, .14); color: #fdba74; box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .4); }

/* — 24-hour clock — */
.clock { background: var(--ink-950); padding-block: var(--section); border-block: 1px solid var(--rule); }
.clock-grid { display: grid; gap: var(--s8); }
.clock-copy { display: grid; gap: var(--s5); align-content: start; }
.clock-copy p:not(.label) { color: var(--text-2); max-width: 56ch; }
@media (min-width: 1000px) {
  .clock-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); align-items: center; }
  .clock-copy { grid-column: 1 / 7; }
  .clock-demo { grid-column: 8 / 13; }
}
.clock-demo { width: 100%; max-width: 440px; justify-self: center; display: grid; gap: var(--s4); }
.clock-card { background: var(--surface); border: 1px solid rgba(251, 146, 60, .25); border-radius: var(--r-lg); padding: var(--s5); transition: border-color .4s; }
.clock-demo[data-state="ok"] .clock-card { border-color: rgba(52, 211, 153, .4); }
.clock-demo[data-state="late"] .clock-card { border-color: rgba(251, 113, 133, .45); }
.clock-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); }
.mini-label { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fdba74; }
.clock-amt { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.status-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  background: var(--orange-soft); color: #fdba74; box-shadow: inset 0 0 0 1px rgba(251,146,60,.35);
}
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.clock-demo[data-state="ok"] .status-chip { background: rgba(52,211,153,.14); color: var(--accent-hi); box-shadow: inset 0 0 0 1px rgba(52,211,153,.35); }
.clock-demo[data-state="late"] .status-chip { background: var(--rose-soft); color: #fda4af; box-shadow: inset 0 0 0 1px rgba(251,113,133,.4); }
.ring-wrap { position: relative; width: min(220px, 70%); margin: var(--s5) auto var(--s4); }
.ring { width: 100%; height: auto; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 8; }
.ring-bar { fill: none; stroke: var(--orange); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 0; transition: stroke .4s; }
.clock-demo[data-state="ok"] .ring-bar { stroke: var(--accent); }
.clock-demo[data-state="late"] .ring-bar { stroke: var(--rose); }
.ring-read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-time { font-family: var(--font-mono); font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ring-sub { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.clock-demo[data-state="late"] .ring-sub { color: #fda4af; }
.clock-caption { text-align: center; font-size: .9375rem; color: var(--text-2); min-height: 3em; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.seg-btn {
  min-height: 48px; padding: var(--s2) var(--s3); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--rule-strong); cursor: pointer;
  font-size: .9063rem; font-weight: 600; line-height: 1.25;
  transition: border-color .15s, background-color .15s, transform .15s var(--ease-out);
}
.seg-btn:hover { border-color: var(--text-2); }
.seg-btn:active { transform: scale(.98); }
.seg-btn[data-scenario="ok"][aria-pressed="true"] { border-color: var(--accent); background: rgba(52,211,153,.1); }
.seg-btn[data-scenario="late"][aria-pressed="true"] { border-color: var(--rose); background: var(--rose-soft); }
.demo-note { font-size: .8125rem; color: var(--muted); text-align: center; }

/* — Level income — */
.levels { padding-block: var(--section); }
.levels-grid { display: grid; gap: var(--s7); }
.levels-head { display: grid; gap: var(--s5); align-content: start; }
.levels-head p:not(.label) { color: var(--text-2); max-width: 54ch; }
.stairs { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--rule-strong); }
.stair {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "lvl amt" "who amt";
  align-items: center; column-gap: var(--s5);
  padding: var(--s5) 0; border-bottom: 1px solid var(--rule);
}
.stair-lvl { grid-area: lvl; align-self: end; font-family: var(--font-hand); font-size: 1.25rem; color: var(--gold); font-weight: 700; }
.stair-who { grid-area: who; align-self: start; font-size: .9375rem; color: var(--muted); }
.stair-amt { grid-area: amt; justify-self: end; font-size: clamp(2.75rem, 9vw, 5.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.levels-notes { display: grid; gap: var(--s5); }
.levels-notes p { color: var(--text-2); max-width: 44ch; font-size: .9688rem; }
.levels-notes strong { display: block; margin-bottom: var(--s1); }
@media (min-width: 1000px) {
  .levels-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); }
  .levels-head { grid-column: 1 / 6; }
  .stairs { grid-column: 7 / 13; grid-row: 1 / 3; }
  .stair { padding-left: calc(var(--i) * 72px); }
  .levels-notes { grid-column: 1 / 6; align-self: end; }
}

/* — Do / don't — */
.dodont { padding-block: var(--section); background: var(--surface); border-block: 1px solid var(--rule); }
.dodont-grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .dodont-grid { grid-template-columns: 7fr 5fr; gap: 0; align-items: start; } }
.col-do, .col-dont { padding: var(--s6) var(--s5); border-radius: var(--r-lg); }
.col-do { background: var(--bg); border: 1px solid var(--rule-strong); }
.col-dont { border: 1px dashed var(--rule-strong); }
@media (min-width: 900px) {
  .col-do { padding: var(--s7); border-radius: var(--r-lg) 0 0 var(--r-lg); }
  .col-dont { padding: var(--s7); border-left: 0; border-radius: 0 var(--r-lg) var(--r-lg) 0; margin-top: var(--s8); }
}
.col-title { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; margin-bottom: var(--s5); }
.checklist li, .crosslist li { position: relative; padding: var(--s3) 0 var(--s3) 36px; border-top: 1px solid var(--rule); color: var(--text-2); }
.checklist li::before, .crosslist li::before {
  content: ""; position: absolute; left: 0; top: 15px; width: 22px; height: 22px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}
.checklist li::before { background-color: rgba(52, 211, 153, .15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2334d399' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E"); }
.crosslist li::before { background-color: rgba(251, 113, 133, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fb7185' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E"); }
.col-dont .col-title { color: var(--text-2); }

/* — Multiple IDs — */
.ids { padding-block: var(--section); }
.ids-grid { display: grid; gap: var(--s7); }
.ids-copy { display: grid; gap: var(--s5); align-content: start; }
.ids-copy p:not(.label) { color: var(--text-2); max-width: 56ch; }
.ids-copy .t-muted { color: var(--muted); }
.ids-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.mini-board { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s4) var(--s3) var(--s3); display: grid; gap: var(--s3); }
.mini-board svg { width: 100%; height: auto; }
.mini-board .mb-lines { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.mini-board circle { fill: var(--surface-3); stroke: var(--rule-strong); stroke-width: 1; }
.mini-board circle.mine { fill: var(--gold); stroke: var(--gold); }
.mini-board span { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 560px) { .ids-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .ids-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); align-items: center; }
  .ids-copy { grid-column: 1 / 6; }
  .ids-boards { grid-column: 7 / 13; }
  .ids-boards { row-gap: var(--s5); }
  .mini-board:nth-child(3n+2) { transform: translateY(var(--s6)); }
}

/* — Dashboard preview — */
.preview { padding-block: var(--section); background: linear-gradient(to bottom, var(--bg), var(--surface) 60%, var(--bg)); border-top: 1px solid var(--rule); }
.preview-grid { display: grid; gap: var(--s8); }
.preview-head { display: grid; gap: var(--s5); align-content: start; }
.preview-head > p:not(.label) { color: var(--text-2); max-width: 52ch; }
.callouts { display: grid; gap: 0; margin-top: var(--s3); border-top: 1px solid var(--rule); }
.callouts li { display: flex; gap: var(--s4); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); color: var(--text-2); font-size: .9688rem; }
@media (min-width: 1000px) {
  .preview-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); }
  .preview-head { grid-column: 1 / 6; position: sticky; top: 110px; align-self: start; }
  .phone-fig { grid-column: 7 / 13; }
}
.phone-fig { margin: 0; display: grid; justify-items: center; gap: var(--s5); }
.phone-fig .note { max-width: 40ch; }
.phone {
  width: 100%; max-width: 360px;
  background: var(--ink-950);
  border: 1px solid var(--rule-strong);
  border-radius: 44px; padding: 14px;
  box-shadow: 0 0 0 6px var(--surface), 0 0 0 7px var(--rule-strong), 0 50px 80px -40px rgba(0,0,0,.9);
}
.phone-notch { width: 96px; height: 22px; margin: 2px auto 10px; background: #000; border-radius: 999px; }
.app { display: grid; gap: 10px; font-size: 13px; line-height: 1.45; color: #cfd6cf; }
.app-bar { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; }
.app-id { font-size: 11px; color: var(--muted); background: var(--surface); padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.app-card { position: relative; background: var(--surface); border-radius: 18px; padding: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.app-status { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, rgba(251,146,60,.16), transparent 70%), var(--surface); }
.app-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: rgba(255,255,255,.06); color: #fdba74; box-shadow: inset 0 0 0 1px rgba(251,146,60,.35); }
.app-ico svg { width: 20px; height: 20px; }
.app-h { font-size: 14px; font-weight: 600; color: #fff; }
.app-p { font-size: 12px; color: var(--muted); }
.app-p b { color: #fff; font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: 11px; }
.app-pay { box-shadow: inset 0 0 0 1px rgba(251,146,60,.25); }
.app-pay-top { display: flex; justify-content: space-between; gap: 10px; }
.app-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fdba74; }
.app-amt { font-size: 26px; font-weight: 600; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.app-ring {
  --pct: 80;
  display: grid; place-items: center; width: 68px; height: 68px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--orange) calc(var(--pct) * 1%), rgba(255,255,255,.08) 0);
}
.app-ring > span { display: grid; place-items: center; align-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--surface); text-align: center; }
.app-ring b { font-family: var(--font-mono); font-size: 12px; color: #fff; font-variant-numeric: tabular-nums; }
.app-ring i { font-style: normal; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.app-upi { margin-top: 12px; text-align: center; padding: 8px; border-radius: 12px; background: rgba(3,9,6,.6); color: var(--accent-hi); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); font-size: 12px; }
.app-btn { margin-top: 8px; text-align: center; padding: 10px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 13px; }
.app-btn-ghost { background: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.app-btn.sm { margin: 0; padding: 6px 10px; font-size: 11px; border-radius: 9px; }
.app-input { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(3,9,6,.5); color: #5f6d66; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.app-row-head { display: flex; justify-content: space-between; align-items: baseline; }
.app-big { margin-top: 6px; font-size: 24px; font-weight: 600; color: #fff; letter-spacing: -0.02em; }
.app-big span { color: var(--muted); }
.app-big small { font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.app-prog { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 8px; }
.app-prog span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(to right, #38bdf8, var(--accent)); }
.app-tree { margin-top: 12px; padding: 12px 8px; border-radius: 12px; background: rgba(3,9,6,.4); display: grid; gap: 8px; }
.seat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.seat-row .s { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.seat-row.sm .s { width: 21px; height: 21px; }
.seat-row .s.paid { background: rgba(52,211,153,.12); box-shadow: inset 0 0 0 1px rgba(52,211,153,.35); }
.seat-row .s.mine { background: rgba(251,146,60,.2); box-shadow: inset 0 0 0 2px rgba(253,186,116,.6); }
.seat-row .s em { font-style: normal; font-size: 7px; font-weight: 700; color: #fed7aa; }
.app-in { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.app-name { color: #fff; font-weight: 600; font-size: 13px; }
.app-in-r { display: flex; align-items: center; gap: 8px; }
.app-in-r b { color: #fff; font-size: 13px; }
[class^="tag-"] {
  position: absolute; top: -10px; right: -10px; z-index: 2;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%;
  background: var(--gold); color: var(--ink-950);
  font-family: var(--font-hand); font-weight: 700; font-size: 15px; padding-top: 2px;
  transform: rotate(-6deg);
}
.tag-b { top: 112px; right: auto; left: -13px; }

/* — Risk — */
.risk { padding-block: var(--section); }
.risk-sheet {
  max-width: 960px; margin-inline: auto;
  border-top: 6px solid var(--gold);
  background: var(--surface);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: clamp(var(--s6), 6vw, var(--s9)) clamp(var(--s5), 6vw, var(--s9));
  display: grid; gap: var(--s5);
}
.risk-list { counter-reset: r; display: grid; gap: 0; margin-block: var(--s3); }
.risk-list li {
  counter-increment: r; position: relative;
  padding: var(--s4) 0 var(--s4) 48px; border-top: 1px solid var(--rule-strong);
  color: var(--text-2); max-width: 70ch;
}
.risk-list li::before {
  content: counter(r); position: absolute; left: 0; top: 12px;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.375rem; color: var(--gold);
}
.risk-list strong { color: var(--text); }

/* — FAQ / accordion — */
.faq-teaser { padding-block: 0 var(--section); }
.faqt-grid { display: grid; gap: var(--s6); }
.faqt-grid header { display: grid; gap: var(--s4); align-content: start; }
@media (min-width: 1000px) {
  .faqt-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); }
  .faqt-grid header { grid-column: 1 / 5; }
  .faqt-grid .accordion { grid-column: 5 / 13; }
}
.accordion { border-top: 1px solid var(--rule-strong); }
.accordion details { border-bottom: 1px solid var(--rule); }
.accordion summary {
  position: relative; display: flex; align-items: center; min-height: 64px;
  padding: var(--s4) 48px var(--s4) 0; cursor: pointer; list-style: none;
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.3;
  transition: color .15s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before, .accordion summary::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 1.8px; background: var(--gold);
  transition: transform .3s var(--ease-move);
}
.accordion summary::after { transform: rotate(90deg); }
.accordion details[open] > summary::after { transform: rotate(0); }
.accordion summary:hover { color: var(--gold); }
.accordion .answer { padding: 0 48px var(--s5) 0; display: grid; gap: var(--s3); color: var(--text-2); max-width: 68ch; }
.accordion .answer ol { list-style: decimal; padding-left: 1.25em; display: grid; gap: var(--s1); }
.accordion .answer ul { list-style: disc; padding-left: 1.25em; display: grid; gap: var(--s1); }
.accordion details[open] .answer { animation: stepIn .35s var(--ease-out); }

/* — Final CTA — */
.final { padding-block: var(--section); background: var(--surface); border-top: 1px solid var(--rule); overflow: hidden; }
.final-inner { display: grid; gap: var(--s5); }
.final-hand { font-size: clamp(1.25rem, 2.4vw, 1.625rem); transform: rotate(-2deg); transform-origin: left; }
.final .display-md { max-width: 14ch; }
.risk-mini-final { display: block; max-width: 70ch; font-size: .9375rem; color: var(--muted); padding-left: var(--s4); border-left: 2px solid var(--gold); }
.final .cta-row { margin-top: var(--s3); }
.contact-inline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.contact-inline a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }
.final-help { font-size: .9375rem; }

/* — Footer — */
.site-footer { background: var(--ink-950); border-top: 1px solid var(--rule); padding-block: var(--s8) var(--s6); font-size: .9375rem; }
.footer-grid { display: grid; gap: var(--s6); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 5fr 2fr 2fr 3fr; column-gap: var(--s5); } }
.footer-note { color: var(--muted); max-width: 40ch; margin-top: var(--s3); }
.footer-help .footer-note { margin-top: 0; }
.site-footer .label { color: var(--muted); margin-bottom: var(--s2); }
.site-footer .label::before { display: none; }
.footer-nav a, .contact-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
.footer-nav a:hover, .contact-list a:hover { color: var(--gold); }
.footer-risk { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule); color: var(--muted); max-width: 110ch; font-size: .875rem; }
.footer-risk strong { color: var(--text-2); }
.footer-risk a { color: var(--gold); text-underline-offset: 3px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); margin-top: var(--s5); color: var(--muted); font-size: .8125rem; }

/* — Inner pages (FAQ, Rules) — */
.page-hero { padding-block: clamp(var(--s7), 8vw, var(--s10)) clamp(var(--s6), 6vw, var(--s8)); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(154, 169, 160, .06) 39px 40px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
}
.page-hero .wrap { position: relative; display: grid; gap: var(--s5); }
.page-hero .display-md { max-width: 16ch; }
.page-hero .lede { max-width: 60ch; }
.page-hand { font-family: var(--font-hand); color: var(--gold); font-size: 1.1875rem; transform: rotate(-1.5deg); transform-origin: left; }

.page-body { padding-block: clamp(var(--s7), 7vw, var(--s9)) var(--section); }
.page-grid { display: grid; gap: var(--s7); }
@media (min-width: 1000px) {
  .page-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); }
  .toc { grid-column: 1 / 4; position: sticky; top: 100px; align-self: start; }
  .page-main { grid-column: 4 / 12; }
}
.toc .label { margin-bottom: var(--s3); }
.toc ol { display: grid; border-top: 1px solid var(--rule); }
.toc a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); color: var(--text-2); text-decoration: none; font-size: .9375rem; }
.toc a:hover { color: var(--gold); }
@media (max-width: 999px) {
  .toc ol { grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
}
.faq-group { margin-bottom: var(--s8); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group > h2 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); letter-spacing: -0.03em; margin-bottom: var(--s5); display: flex; align-items: center; gap: var(--s4); }

.rule-block { padding-block: var(--s6); border-top: 1px solid var(--rule-strong); display: grid; gap: var(--s4); }
.rule-block:first-child { border-top: 0; padding-top: 0; }
.rule-block > h2 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); letter-spacing: -0.03em; display: flex; align-items: center; gap: var(--s4); }
.rule-block p, .rule-block li { color: var(--text-2); max-width: 68ch; }
.rule-list { display: grid; gap: var(--s3); }
.rule-list li { position: relative; padding-left: 28px; }
.rule-list li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 10px; height: 1.5px; background: var(--gold); }
.rule-block .paper-note { max-width: 480px; }

.notice-full {
  margin-top: var(--s8);
  border-top: 6px solid var(--gold); background: var(--surface);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: clamp(var(--s6), 5vw, var(--s8)) clamp(var(--s5), 5vw, var(--s8));
  display: grid; gap: var(--s5);
}
.notice-full .risk-list li { max-width: 72ch; }
.notice-full p.small { font-size: .875rem; color: var(--muted); max-width: 72ch; }

.help-box { margin-top: var(--s8); padding: var(--s6); border: 1px dashed var(--rule-strong); border-radius: var(--r-lg); display: grid; gap: var(--s3); }
.help-box p { color: var(--text-2); max-width: 60ch; }

/* — Scroll reveal (only once JS is running) — */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (min-width: 1000px) { .js .mini-board[data-reveal].is-in:nth-child(3n+2) { transform: translateY(var(--s6)); } }

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .display .line > span { animation: none; }
  .sheet .draw { stroke-dashoffset: 0; animation: none; }
  .sheet .sums li, .sheet .seats circle, .sheet .hand text { animation: none; }
  .js [data-reveal] { transform: none !important; transition: opacity .3s linear; transition-delay: 0s; }
  .bd-branch, .bd-topgroup { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* seat pulse needs its own box */
.bd-seat circle { transform-box: fill-box; transform-origin: center; }

/* inline links inside prose */
.lede a, .help-box p a, .answer a { color: var(--accent); text-underline-offset: 3px; }
.lede a:hover, .help-box p a:hover, .answer a:hover { color: var(--accent-hi); }
/* paper keeps its own ink colour inside prose blocks */
.rule-block .paper-note p { color: var(--pen); max-width: none; }
.rule-block .paper-note .total { color: var(--pen-red); }