/* Wayfold v2 — blocks.css · the components, resolved through role tokens only
 *
 * `tokens.css` is linked BEFORE this file and is the only place a colour is written down.
 * This file contains ZERO hexes, and that is checked, not hoped:
 *     grep -cE '#[0-9A-Fa-f]{3,8}' blocks.css   →  0
 * Every colour here is a role (`--ink`, `--line-done`, `--cta-fill`…), so switching to the
 * night theme is twelve reassignments in tokens.css and nothing in this file.
 *
 * Authority for every value: DESIGN.md §2–§7 and HERO.md §1–§3. Where a number appears here
 * without a token behind it, it is a geometry constant from one of those documents and the
 * comment says which.
 *
 * Structure
 *   1  page, chrome, type
 *   2  the hero band and its map panel
 *   3  the marks: lines, stations, glyphs, chips, owners, legend, dot grid
 *   4  frame 0 — what `is-rewound` rewinds, and the reduced-motion contract
 *   5  sections 2–5
 *   6  the CTA, the form and its states
 *   7  footer
 *   8  the 768px breakpoint
 */

/* ══════════════════════════════════════════════════ 1 · page, chrome, type ══════════ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: var(--lh-body);
  font-weight: 400; /* DESIGN.md §3.6: never below 400, anywhere, in either theme */
}

/* The display face is for h1, h2 and map legend numerals. Nothing else, ever — a condensed
 * face below ~24px is a legibility problem and this site cannot afford one (DESIGN.md §3.1). */
h1, h2 { font-family: var(--font-display); margin: 0; text-transform: none; }

h1 {
  font-size: var(--step-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-weight: var(--wg-h1);
}

h2 {
  font-size: var(--step-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  font-weight: var(--wg-h2);
}

h3 {
  font-family: var(--font-text); /* §3.1: h3 is Public Sans, not display */
  font-size: var(--step-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-weight: var(--wg-h3);
  margin: 0;
}

p { margin: 0; max-width: var(--measure-body); }

a { color: var(--line-done); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.skip {
  position: absolute; left: var(--space-4); top: calc(var(--space-4) * -4);
  background: var(--surface); color: var(--ink);
  padding: var(--space-3) var(--space-4);
  border: var(--bw-hairline) solid var(--rule); border-radius: var(--r-panel);
  z-index: 10; transition: top var(--dur-state) var(--ease-state);
}
.skip:focus { top: var(--space-4); }

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

/* Header: flat, transparent on cream, a 1px rule underline. Logo left, three text links,
 * NO CTA — the page has one call to action and it is in the fold (DESIGN.md §5). */
.site-head {
  border-bottom: var(--bw-hairline) solid var(--rule);
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding-block: var(--space-4);
}
.site-head__nav { display: flex; gap: var(--space-5); }
.site-head__nav a {
  color: var(--ink); text-decoration: none;
  font-size: var(--step-caption); font-weight: 600;
}
.site-head__nav a:hover { text-decoration: underline; }
.logo { display: block; height: 26px; width: auto; }

/* The lockup: mark + wordmark. Shared by the home and the guide pages so the name is in the
 * same place, at the same weight, wherever a visitor lands. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  color: var(--ink);
  text-decoration: none;
}
.brand img { display: block; height: 24px; width: auto; }

section { padding-block: var(--space-section); }

/* ═════════════════════════════════════════════════ 2 · the hero band ═══════════════ */

/* Arc's device (REFERENCES.md §4): a centred composition, one object, one sentence, one
 * action. But Arc's fold is EMPTY below the object and this one cannot be — design bar
 * rule 3 wants the product moment in the first viewport, and the 5-second test is run on a
 * screenshot of exactly that viewport.
 *
 * The first build of this band used `--space-9` above the h1 and `--space-8` before the map,
 * which is the generous reading of Arc. Captured at 1440×900 the map panel started at
 * y≈855: the fold was a headline and a button, and the hero — the whole reason this site
 * is being rebuilt — was below it. The rhythm below is what fits BOTH: at 1440×900 the
 * route, its stations, its branches and its chips are all in the fold, and the panel is cut
 * just above the legend, which is also the least load-bearing thing in it. The air Arc
 * spends on emptiness, this fold spends on word count. */
.hero { padding-top: var(--space-5); padding-bottom: var(--space-8); }

.hero__head { text-align: center; max-width: 54rem; margin-inline: auto; }

.hero__lead {
  font-size: var(--step-lead);
  line-height: var(--lh-lead);
  max-width: var(--measure-lead); /* 46ch, so the subline breaks to two lines */
  margin: var(--space-4) auto 0;
  color: var(--ink);
}

.hero__cta { margin-top: var(--space-5); display: grid; justify-items: center; gap: var(--space-2); }

/* The concept tag. DESIGN.md §11.1 + §12: after the <h1>, next to the CTA, ≤18 words, quiet.
 * There is no top disclaimer strip anywhere on this site — that band is what the design bar
 * banned, and this tag is what replaces it. */
.concept-tag {
  font-size: var(--step-caption);
  line-height: var(--lh-caption);
  color: var(--ink-2);
  /* not --measure-caption here: 44ch broke this 11-word tag onto two lines and cost the
   * fold 20px it needed for the map. It is one short line, centred under the button. */
  max-width: 46rem;
}

/* The map panel. DESIGN.md §5: --ground fill, 1px rule, 4px radius, --shadow-lift — one of
 * only two elements on the site allowed a shadow. */
.mapwrap { margin-top: var(--space-4); position: relative; }

.map-panel {
  position: relative;
  background: var(--ground);
  border: var(--bw-hairline) solid var(--rule);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-lift);
  /* HERO.md §1: the panel is clipped so the route runs off the right edge at desktop and
   * off the bottom edge at mobile. The crop is the Superhuman device — depth without a
   * scroll cue — and it is why `seg-todo` is drawn 40px outside the viewBox. */
  overflow: hidden;
}

/* NOTE the absence of `display` here. An earlier version of this file said
 * `.map-panel svg { display: block }`, which is specificity (0,1,1) and therefore BEAT
 * `.wf-map--wide { display: none }` at (0,1,0) — so the desktop map stayed in the layout on
 * a phone, at 348px wide for a 1200-unit viewBox, which put its 13px labels on screen at
 * 3.8px. measure.mjs caught it; reading the CSS would not have. The projection switch now
 * owns `display` exclusively (see §5), and nothing else is allowed to set it on these. */
.map-panel svg { width: 100%; height: auto; }

/* The pause control is an HTML <button> positioned over the SVG, not an SVG element, so it
 * gets the real focus ring and real keyboard semantics for free (HERO.md §2). */
.pause {
  position: absolute; left: var(--space-5); bottom: var(--space-5);
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 36px; padding: 0 var(--space-3);
  background: var(--ground); color: var(--ink);
  border: var(--bw-hairline) solid var(--rule); border-radius: var(--r-panel);
  font: inherit; font-size: var(--step-caption); font-weight: 600;
  cursor: pointer;
}
.pause:hover { background: var(--surface); }
/* Without JS there is nothing to pause, so the control is not shown. `boot.js` adds
 * `js-motion` only when the page can actually animate. */
html:not(.js-motion) .pause { display: none; }

/* ═══════════════════════════════════════════════════════ 3 · the marks ════════════ */

/* Route and branch strokes. `butt` caps so the three trunk segments meet without overlap —
 * a round cap would bleed `--line-now` into the done segment (HERO.md §2). */
.wf-seg, .wf-line {
  fill: none;
  stroke-width: var(--bw-route);
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.wf-branch { fill: none; stroke-width: 2; stroke-linecap: butt; }

.wf-seg--done, .wf-line--done, .wf-branch--done { stroke: var(--line-done); }
.wf-seg--now, .wf-line--now, .wf-branch--now { stroke: var(--line-now); }
.wf-seg--blocked, .wf-line--blocked, .wf-branch--blocked { stroke: var(--ink); }

/* `not started` is dashed as well as pale: the second channel, so the state survives
 * greyscale (DESIGN.md §2, "colour is never the only signal"). */
.wf-seg--todo, .wf-line--todo, .wf-branch--todo {
  stroke: var(--line-todo);
  stroke-dasharray: 6 6;
}

/* Stations. The core is painted --ground on every state so the line passing behind is
 * interrupted by it — that is what makes a station a stop ON the line, not a bead on top. */
.wf-stop-core { fill: var(--ground); }
.wf-stop-ring { fill: none; stroke-width: 8; }      /* HERO.md §2 station construction */
.wf-glyph-fill, .wf-glyph-inner { fill: none; }
.wf-glyph-bar { fill: var(--ink); }

.wf-stop--done .wf-stop-ring { stroke: var(--line-done); }
.wf-stop--done .wf-glyph-fill { fill: var(--line-done); }
.wf-stop--now .wf-stop-ring { stroke: var(--line-now); }
.wf-stop--now .wf-glyph-inner { stroke: var(--line-now); stroke-width: 3; }
.wf-stop--todo .wf-stop-ring { stroke: var(--line-todo); }
.wf-stop--blocked .wf-stop-ring { stroke: var(--ink); }

/* Scaling a station has to happen about its own centre, and an SVG group's default
 * transform origin is the viewBox origin — which would fling it across the drawing. */
.wf-st, .wf-legendglyph { transform-box: fill-box; transform-origin: center; }

/* The single pulse on the in-progress station. Held at 0 so it leaves nothing behind in the
 * final frame, and so a reduced-motion visitor never sees it at all (HERO.md §6: no ping). */
.wf-pulse { fill: none; stroke: var(--line-now); stroke-width: 2; opacity: 0; }

/* Name chips. DESIGN.md §5: --r-chip 2px, --paper-100 fill, 1px rule, --step-label, 600,
 * letter-spacing 0.04em. "A sticker on a sign." */
.wf-chip-bg { fill: var(--surface); stroke: var(--rule); stroke-width: 1; }
.wf-chip-text {
  fill: var(--ink);
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: var(--tr-label);
}
.wf-chip--now .wf-chip-bg { stroke: var(--line-now); }
.wf-chip--done .wf-chip-bg { stroke: var(--line-done); }

/* Owner square: a 2-letter role code in a --line-done ring (DESIGN.md §5). Roles only. */
.wf-ownersq-bg { fill: var(--ground); stroke: var(--line-done); stroke-width: 2; }
.wf-ownersq-code {
  fill: var(--ink);
  font-family: var(--font-text);
  font-weight: 700;
  font-variant-numeric: var(--num-tabular);
}
/* The station with no owner. Its chip is PRESENT and EMPTY — an absent chip reads as a
 * rendering bug, an empty one reads as an unanswered question, and HERO.md §2 calls that
 * gap "the argument the whole page makes". */
.wf-ownersq--none .wf-ownersq-bg { stroke: var(--line-todo); stroke-dasharray: 3 3; }
.wf-ownersq--none .wf-ownersq-code { fill: var(--ink-2); }

/* The owner ring used by the sections (spelled form, where there is room for it). */
.wf-owner-ring { fill: var(--ground); stroke: var(--line-done); stroke-width: 2; }
.wf-owner-code { fill: var(--ink); font-family: var(--font-text); font-weight: 700; }
.wf-owner-spell { fill: var(--ink-2); font-family: var(--font-text); }

/* Legend. HERO.md §2: glyph at r=7 with a 4px ring, 12px --moss-600 label. */
.wf-legendglyph .wf-stop-ring { stroke-width: 4; }
.wf-legendword {
  fill: var(--ink-2);
  font-family: var(--font-text);
  font-size: 12px;
}

/* The dot grid. --paper-200 is declared DECORATIVE in DESIGN.md §2 and measured under 3:1 on
 * purpose: it must not compete with a hairline that carries meaning. */
.wf-dot { fill: var(--rule); }
.wf-dotfield { opacity: 1; }

/* Every text fill in a figure is --ink or --ink-2 on --ground. Nothing else may carry a
 * word — specifically NOT --line-todo and NOT --line-now, which is below the AA text
 * threshold by design (DESIGN.md §2, HERO.md §7.2). */
.wf-paneltitle {
  fill: var(--ink); font-family: var(--font-text); font-size: 15px; font-weight: 650;
}
.wf-illus, .wf-stamp, .wf-changed, .wf-note, .wf-panelhead, .wf-keyword,
.wf-datewho, .wf-surflabel, .wf-todaytext {
  fill: var(--ink-2); font-family: var(--font-text); font-size: 13px;
}
.wf-datenum, .wf-stopname {
  fill: var(--ink); font-family: var(--font-text); font-size: 15px; font-weight: 600;
  font-variant-numeric: var(--num-tabular);
}
.wf-stopname--lg { font-size: 17px; }
.wf-surflabel--lg { fill: var(--ink); font-size: 15px; font-weight: 600; }
.wf-panelhead {
  fill: var(--ink); font-size: 15px; font-weight: 650; letter-spacing: var(--tr-label);
}
.wf-rownum { fill: var(--ink-2); font-family: var(--font-text); font-size: 14px; }

.wf-divide { stroke: var(--rule); stroke-width: 1; }
.wf-today { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.wf-tick { stroke: var(--rule); stroke-width: 1; }
.wf-axis { stroke-width: 2; }

/* ════════════════════════════════════ 4 · frame 0, and reduced motion ═════════════ */

/* `is-rewound` is added by boot.js BEFORE the first paint and removed by hero.js once the
 * sequence settles. These rules are the only place the map's t=0 state is described.
 *
 * The markup is the FINISHED map (HERO.md §5). So this block subtracts, and if it were
 * deleted the page would simply show the final frame — which is the safe direction to fail. */
html.is-rewound .wf-live { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.is-rewound .wf-seg--todo, html.is-rewound .wf-branch--todo {
  /* the dashed state and the draw-on dash share one property, so while the map is rewound
   * the todo segment borrows the draw dash and gets its 6 6 back from the Animation's end */
  stroke-dasharray: 1;
}
html.is-rewound .wf-st,
html.is-rewound .wf-chipgroup,
html.is-rewound .wf-legenditem { opacity: 0; }
html.is-rewound .wf-glyph-fill,
html.is-rewound .wf-glyph-inner,
html.is-rewound .wf-glyph-bar { opacity: 0; }

/* DESIGN.md §7 and HERO.md §5, the hard requirement: under reduce the result is the final
 * frame, fully drawn — not a blank map, not a frozen first frame, not a fade. boot.js never
 * adds `is-rewound` in that case, and this is the belt to that braces. */
@media (prefers-reduced-motion: reduce) {
  html.is-rewound .wf-live { stroke-dasharray: none; stroke-dashoffset: 0; }
  html.is-rewound .wf-seg--todo, html.is-rewound .wf-branch--todo { stroke-dasharray: 6 6; }
  html.is-rewound .wf-st,
  html.is-rewound .wf-chipgroup,
  html.is-rewound .wf-legenditem,
  html.is-rewound .wf-glyph-fill,
  html.is-rewound .wf-glyph-inner,
  html.is-rewound .wf-glyph-bar { opacity: 1; }
  /* nothing to pause, and an inert control is worse than no control */
  .pause { display: none; }
}

/* ═══════════════════════════════════════════════════ 5 · sections 2–5 ═════════════ */

.band { background: var(--surface); }

.sec__head { max-width: 40rem; }
.sec__body { margin-top: var(--space-4); color: var(--ink); }

/* Anthropic's device (REFERENCES.md §1): a flat coloured plate as the illustration
 * container, with a quiet caption bar under it naming what the artwork is. No gradient, no
 * shadow, no photograph — DESIGN.md §2 forbids all three. */
.plate {
  margin-top: var(--space-7);
  background: var(--ground);
  border: var(--bw-hairline) solid var(--rule);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.band .plate { background: var(--ground); }

.plate svg { width: 100%; height: auto; } /* no `display` — see the note on .map-panel svg */

figure { margin: 0; }

figcaption {
  padding: var(--space-3) var(--space-5);
  border-top: var(--bw-hairline) solid var(--rule);
  font-size: var(--step-caption);
  line-height: var(--lh-caption);
  color: var(--ink-2);
  max-width: none;
}

/* Two drawings per figure; CSS decides which one is on screen. Both are in the DOM so a
 * phone has the right drawing before any script runs, and the one that is not shown is
 * `display: none`, which is not rendered and costs nothing.
 *
 * These four selectors are the ONLY place `display` is set on a figure's <svg>. Anything
 * else that touches it — even `.plate svg` — outranks them on specificity and silently
 * leaves both drawings in the layout. That bug shipped once in this file and measure.mjs is
 * what found it; the comment is here so it does not come back. */
.wf-fig--wide, .wf-map--wide { display: block; }
.wf-fig--tall, .wf-map--tall { display: none; }

.source-note {
  margin-top: var(--space-4);
  font-size: var(--step-caption);
  color: var(--ink-2);
}
.source-note a { color: var(--line-done); }

/* ══════════════════════════════════════════ 6 · the CTA, the form, its states ═════ */

/* DESIGN.md §5: solid fill, 4px radius, Public Sans 650. NO pill — stations are the only
 * circles on this site, and a pill would compete with them. No transform, no shadow. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--space-3) var(--space-5);
  background: var(--cta-fill); color: var(--cta-ink);
  border: none; border-radius: var(--r-panel);
  font: inherit; font-weight: 650;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-state) var(--ease-state);
}
.btn:hover { background: var(--cta-fill-hover); }
.btn[disabled] { cursor: default; }

.form { margin-top: var(--space-6); max-width: 34rem; display: grid; gap: var(--space-5); }

.field { display: grid; gap: var(--space-2); }

/* Labels are ALWAYS visible above the field. No placeholder-as-label, ever (DESIGN.md §5). */
.field label { font-size: var(--step-caption); font-weight: 600; }
.field__hint { font-size: var(--step-caption); color: var(--ink-2); }

.field input, .field textarea {
  font: inherit;
  padding: var(--space-3) var(--space-4);
  background: var(--surface); color: var(--ink);
  border: var(--bw-hairline) solid var(--rule);
  border-radius: var(--r-panel);
  width: 100%;
}
.field textarea { min-height: 5rem; resize: vertical; }

/* The error sits under its field in --signal-text, with no icon and no alarm colour pair:
 * DESIGN.md §2 forbids red/green as a pass/fail pair, and UX-COPY.md forbids "Oops". */
.field__error { font-size: var(--step-caption); color: var(--signal-text); font-weight: 600; }
.field:not([data-invalid]) .field__error { display: none; }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: var(--signal-text); }

.form__status { font-size: var(--step-body); }
.form[data-state="done"] .form__fields { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════ 7 · footer ══════════ */

.site-foot {
  border-top: var(--bw-hairline) solid var(--rule);
  padding-block: var(--space-6);
  font-size: var(--step-caption);
  line-height: var(--lh-caption);
  color: var(--ink-2);
}
.site-foot p { max-width: 60rem; }
.site-foot__meta { margin-top: var(--space-3); }
/* The three descriptive guide anchors (KEYWORDS.md §5). Chips, not a list: the footer is the
 * one place on this site where the keyword-bearing anchor text can sit at full length. */
.site-foot__nav { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.site-foot__nav a {
  font-size: var(--step-label);
  font-weight: var(--wg-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: var(--bw-hairline) solid var(--rule);
  border-radius: var(--r-chip);
  padding: var(--space-2) var(--space-3);
}
.site-foot__nav a:hover { border-color: var(--line-done); color: var(--line-done); }

/* ══════════════════════════════════════════════════ 8 · the 768px breakpoint ═════ */

/* HERO.md §1/§3 put the map's breakpoint at 768px, so everything that swaps projection
 * swaps here, and nowhere else. */
@media (max-width: 767px) {
  :root { --page-margin: 1.25rem; --space-section: var(--space-8); }

  .wf-fig--wide, .wf-map--wide { display: none; }
  .wf-fig--tall, .wf-map--tall { display: block; }

  .wf-seg, .wf-line { stroke-width: var(--bw-route-sm); }
  .wf-stop-ring { stroke-width: 6; }   /* HERO.md §3 */

  .hero { padding-top: var(--space-6); }
  .hero__head { text-align: left; }
  .hero__lead { margin-inline: 0; }
  .hero__cta { justify-items: start; }

  .site-head__in { flex-wrap: wrap; gap: var(--space-3); }
  .site-head__nav { gap: var(--space-4); }

  .pause { left: var(--space-4); bottom: var(--space-4); }

  /* HERO.md §3: the legend moves OUT of the SVG to an HTML row under the panel, wrapping to
   * two lines — four glyph+word pairs do not fit across 390 units at 12px. */
  .legend-row { display: flex; }

  /* ── the 12px floor, enforced where it is actually at risk ──────────────────────────
   * DESIGN.md §3.3 sets a 12px floor and measure.mjs checks it on the REAL render, which is
   * the only place it is meaningful. A phone figure's 330-unit viewBox renders between
   * 278px (a 320px viewport) and 348px (a 390px viewport), i.e. a scale of 0.84–1.05 — so a
   * size declared at 13px lands at 10.9px in the worst case and fails.
   *
   * The bump is scoped to the tall drawings only. The desktop figures are 1200 units in a
   * ~1136px box (scale 0.95) where 13px is really 12.4px, and raising them there would make
   * the labels shout. Same classes, two compositions, two sizes — which is the whole reason
   * each figure has a separate phone drawing in the first place. */
  .wf-fig--tall .wf-illus, .wf-map--tall .wf-illus,
  .wf-fig--tall .wf-stamp, .wf-fig--tall .wf-changed, .wf-fig--tall .wf-note,
  .wf-fig--tall .wf-panelhead, .wf-fig--tall .wf-keyword, .wf-fig--tall .wf-datewho,
  .wf-fig--tall .wf-surflabel, .wf-fig--tall .wf-todaytext,
  .wf-map--tall .wf-paneltitle { font-size: 15px; }

  .wf-fig--tall .wf-rownum { font-size: 15px; }
}

/* The HTML legend exists only on the phone; above the breakpoint the SVG carries it. */
.legend-row { display: none; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }
.legend-row > li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step-caption); color: var(--ink-2); }
.legend-row { list-style: none; padding: 0; }
.legend-row svg { width: 18px; height: 18px; flex: none; }

/* ═════ v3 home (DESIGN.md v3): deadline clock, pile→route, pricing bands ═════ */
:root { --r-tier: 4px; --band-ink: var(--ink); --tier-feature-rule: var(--rule); }

.s3 { padding-block: var(--space-9); }
.s3 h2 { margin-bottom: var(--space-6); }
.eyebrow { font-size: var(--step-label); line-height: var(--lh-label); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--signal-text); margin: 0 0 var(--space-3); }
.textlink { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

.hero3 { padding-block: var(--space-7) var(--space-8); }
.hero3__in { display: grid; gap: var(--space-7); align-items: center; }
.hero3 .hero__lead { margin: var(--space-4) 0 0; }
.hero3__cta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.hero3__cta .concept-tag { flex-basis: 100%; margin: 0; text-align: left; }
@media (min-width: 960px) {
  .hero3__in { grid-template-columns: 5fr 7fr; }
  .hero3__map { margin-right: calc(var(--page-margin) * -1); }
  .hero3__map .map-panel { border-right: 0; border-radius: var(--r-panel) 0 0 var(--r-panel); }
}

.clock { margin-top: var(--space-5); background: var(--ground); border: var(--bw-hairline) solid var(--rule); border-radius: var(--r-panel); box-shadow: var(--shadow-lift); padding: var(--space-5); max-width: 34rem; }
.clock__cap { font-size: var(--step-caption); line-height: var(--lh-caption); color: var(--ink-2); margin: 0 0 var(--space-4); }
.clock__cap a { color: inherit; }
.bands { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bchip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); font: inherit; font-size: var(--step-caption); font-weight: 600; color: var(--ink); background: var(--surface); border: var(--bw-hairline) solid var(--rule); border-radius: var(--r-chip); cursor: pointer; }
.bchip .bring { width: 16px; height: 16px; flex: none; }
.bchip .bdot { display: none; }
.bchip[aria-checked="true"] { background: var(--band-ink); color: var(--ground); border-color: transparent; }
.bchip[aria-checked="true"] .bdot { display: inline; }
.clock__date { font-family: var(--font-display); font-size: var(--step-h2); line-height: 1.05; margin: var(--space-4) 0 0; color: var(--ink); }
.clock__rule { height: 2px; background: var(--line-now); margin: var(--space-3) 0; transform-origin: left; }
html.js-motion .clock__rule { animation: rdraw 400ms var(--ease-route) both; }
.clock__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--step-caption); color: var(--ink-2); }
.clock__meta b { font-weight: 650; color: var(--ink); font-size: var(--step-body); font-variant-numeric: tabular-nums; }
.clock[data-passed] .clock__rule { background: var(--line-done); }
.clock[data-passed] .clock__date { color: var(--ink-2); }
@keyframes rdraw { from { transform: scaleX(0); } }

.bchip:focus-visible, .btn:focus-visible, .pause:focus-visible, details summary:focus-visible, .textlink:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }

/* pile → route map */
.pmapwrap { overflow: hidden; }
.pmap { display: block; width: 100%; height: auto; }
.pgrid { fill: none; }
.pl { fill: none; stroke-width: 5; stroke-linecap: butt; }
.pl--done { stroke: var(--line-done); }
.pl--todo { stroke: var(--line-todo); }
.ps-core { fill: var(--ground); }
.ps-ring { fill: none; stroke-width: 4; }
.ps-ring--done { stroke: var(--line-done); }
.ps-ring--now { stroke: var(--line-now); }
.ps-ring--todo { stroke: var(--line-todo); }
.ps-fill { fill: var(--line-done); }
.ps-now { fill: none; stroke: var(--line-now); stroke-width: 3; }
.pown rect, .ro rect { fill: var(--ink); }
.pown text, .ro text { fill: var(--ground); font: 650 11px var(--font-text); }
.pname { fill: var(--ink); font: 500 12px var(--font-text); }
.pd { fill: var(--line-todo); opacity: 0; }
.pcap { position: absolute; right: var(--space-4); bottom: var(--space-3); margin: 0; font-size: var(--step-caption); color: var(--ink-2); }
.sc1 { --dx: -90px; --dy: 40px; } .sc2 { --dx: 60px; --dy: -70px; } .sc3 { --dx: 30px; --dy: 90px; } .sc4 { --dx: -50px; --dy: -80px; }
.sc5 { --dx: 100px; --dy: 30px; } .sc6 { --dx: -30px; --dy: 70px; } .sc7 { --dx: 80px; --dy: -40px; } .sc8 { --dx: -110px; --dy: -20px; }
html.js-motion .pst { animation: settle 1.2s var(--ease-route) .5s both; }
html.js-motion .pl { stroke-dasharray: 1; animation: pdraw 1.1s var(--ease-route) .9s both; }
html.js-motion .pd { animation: pfade 1.8s ease-out both; }
html.js-motion .pown { animation: pfade-in .4s ease-out 1.9s both; }
.is-paused *, .is-paused { animation-play-state: paused !important; }
@keyframes settle { from { transform: translate(var(--dx, 0), var(--dy, 0)); } }
@keyframes pdraw { from { stroke-dashoffset: 1; } }
@keyframes pfade { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pfade-in { from { opacity: 0; } }

/* how */
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); position: relative; }
.flow li { position: relative; padding-left: var(--space-8); }
.flow li::before { content: ""; position: absolute; left: 11px; top: 0; bottom: calc(var(--space-6) * -1); width: 2px; background: var(--line-done); }
.flow li:last-child::before { bottom: 0; }
.flowst { position: absolute; left: 0; top: 0; width: 24px; height: 24px; }
.flow h3, .flow p { margin: 0; } .flow p { margin-top: var(--space-1); color: var(--ink-2); }
@media (min-width: 760px) {
  .flow { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .flow li { padding: var(--space-6) 0 0; }
  .flow li::before { left: 0; right: calc(var(--space-6) * -1); top: 11px; bottom: auto; width: auto; height: 2px; }
  .flow li:last-child::before { right: 0; }
  .flowst { left: 0; }
}

/* pains */
.pains { display: grid; }
.pain { display: grid; gap: var(--space-3); padding-block: var(--space-5); border-top: var(--bw-hairline) solid var(--rule); align-items: center; }
.pain h3, .pain p { margin: 0; } .pain p { margin-top: var(--space-2); }
.painsvg { width: 240px; max-width: 100%; height: 48px; }
.pl--todo2 { fill: none; stroke: var(--line-todo); stroke-width: 5; }
.pl--bar { fill: none; stroke: var(--ink); stroke-width: 4; }
.pl--done2 { fill: none; stroke: var(--line-done); stroke-width: 5; }
@media (min-width: 760px) { .pain { grid-template-columns: 260px 1fr; gap: var(--space-6); } }

/* inside */
.inside { list-style: none; padding: 0; margin: 0; display: grid; }
.inside li { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--space-3); padding-block: var(--space-4); border-top: var(--bw-hairline) solid var(--rule); }
.inside .gl { grid-row: span 2; width: 24px; height: 24px; }
.inside h3, .inside p { margin: 0; } .inside p { color: var(--ink-2); }
@media (min-width: 760px) { .inside { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }
@media (min-width: 1040px) { .inside { grid-template-columns: repeat(3, 1fr); } }

/* before / after (the one dark band) */
.night { background: var(--night-950); color: var(--cream-050); }
.night h2 { color: var(--cream-050); }
.night__band { margin: 0 0 var(--space-4); color: var(--cream-050); font-size: var(--step-caption); }
.ba { margin: 0; }
.bsvg { display: block; width: 100%; height: auto; border: var(--bw-hairline) solid var(--night-700); border-radius: var(--r-panel); background: var(--night-900); }
.cd { fill: var(--cream-300); opacity: .75; }
.rl { stroke: var(--mint-400); stroke-width: 4; fill: none; }
.rs { fill: var(--night-900); stroke: var(--mint-400); stroke-width: 3; }
.ro rect { fill: var(--cream-050); } .ro text { fill: var(--night-950); }
.ba__labels { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.ba__labels p { margin: 0; font-weight: 600; }
.night figcaption { color: var(--cream-300); margin-top: var(--space-2); }
@media (min-width: 760px) { .ba__labels { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

/* pricing */
.tiers { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.tier { position: relative; background: var(--ground); border: var(--bw-hairline) solid var(--rule); border-radius: var(--r-tier); box-shadow: var(--shadow-lift); padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.tier[data-selected] { border: 2px solid var(--line-now); padding: calc(var(--space-5) - 1px); }
.tier h3 { margin: 0; }
.tier__you { position: absolute; top: var(--space-3); right: var(--space-3); margin: 0; padding: 2px var(--space-2); font-size: var(--step-caption); font-weight: 650; background: var(--ink); color: var(--ground); border-radius: var(--r-chip); }
.tier__price { margin: 0; font-family: var(--font-display); font-size: var(--step-h1); line-height: 1; color: var(--ink); }
.tier__price small { font-family: var(--font-text); font-size: var(--step-body); color: var(--ink-2); margin-left: 2px; }
.tier__list { list-style: none; padding: 0; margin: 0; }
.tier__list li { padding-block: var(--space-2); border-top: var(--bw-hairline) solid var(--tier-feature-rule); }
.pnote { margin: var(--space-4) 0 0; color: var(--ink-2); font-size: var(--step-caption); }
@media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

/* faq */
.faq { max-width: 46rem; }
.faq details { border-top: var(--bw-hairline) solid var(--rule); padding-block: var(--space-3); }
.faq details:last-child { border-bottom: var(--bw-hairline) solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); min-height: 32px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); transition: transform 150ms; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: var(--space-2) 0 0; color: var(--ink-2); max-width: var(--measure-body); }
#call select { font: inherit; min-height: 44px; padding: 0 var(--space-3); border: var(--bw-hairline) solid var(--rule); border-radius: var(--r-chip); background: var(--ground); color: var(--ink); }
#call .opt { color: var(--ink-2); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .faq summary::after, .clock__rule { transition: none; animation: none; } }
.hero3 h1 { font-size: clamp(2.5rem, 4.4vw, 3.75rem); }
.bands { gap: 6px; }
.bchip { padding: 0 10px; font-size: 0.8125rem; min-height: 40px; }
.pmapwrap .pause { left: auto; bottom: auto; top: var(--space-3); right: var(--space-3); }
.hero3 { padding-block: var(--space-6) var(--space-7); }
.clock { padding: var(--space-4) var(--space-5); margin-top: var(--space-4); }