/* assets/css/tokens.css */
/* tokens.css · the only source of colour, type, space and motion values (BV-06).
   Owner: Brand (Head of Type, Grid and Evidence Design). EX-001 page round 1, 2026-10-11.
   Sources:
   - colours and motion: regime-decoder panels-01/source/shannon-elements/elements.css (owner-signed, 2026-10-08/09),
     lifted unchanged except --sx-stone, darkened for BV-02 (7:1).
   - type: Inter only (J-11; Josh 11 Aug, meetshannon-web/apps/msfd/home/MsfdHomeV2.css:23-27).
   - scale: Bringhurst 3.1.1 classic scale, 8 sizes (BV-04, CANDIDATE).
   - grid: 12 x 76 px columns, 24 px gutters, 1,176 px frame (PLAN §4).
   Contrast, computed 2026-10-11 (WCAG relative luminance), on --sx-paper unless named:
     ink 17.48 · ink-2 10.29 · stone 7.39 (was #6B6F69 = 4.90) · rule 3.16 (non-text, 1.4.11)
     on --sx-deep: cream 17.11 · on-dark-2 9.52 · on-dark-3 5.17 (NEVER for text, A3 AM-3) · mint 11.92
     mint on paper 1.55: a mark, never information (1.4.1, 1.4.11). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-opsz-wght.woff2") format("woff2-variations"), url("../fonts/inter-latin-opsz-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* metric-matched fallback so the swap does not move the page (font CLS 0, BV-11) */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; size-adjust: 107.12%;
}

:root {
  /* ── colour: light (the page) ── */
  --sx-paper: #FBFAF6;
  --sx-white: #FFFFFF;
  --sx-ink: #121614;
  --sx-ink-2: #3A3F3B;
  --sx-stone: #50544E;
  --sx-line: #E8E4DA;        /* hairlines: decorative only */
  --sx-rule: #8A8F88;        /* chart axes and informative rules: 3.16:1 */
  --sx-hover: #F6F4EE;
  /* ── colour: dark (Shannon) ── */
  --sx-deep: #0B0F0D;
  --sx-deep-2: #141A17;
  --sx-cream: #F4F1EA;
  --sx-on-dark-2: rgba(244, 241, 234, .74);
  --sx-on-dark-3: rgba(244, 241, 234, .52);  /* rules and marks only, never text */
  --sx-border-dark: rgba(244, 241, 234, .14);
  /* ── her colours ── */
  --sx-mint: #4AE68A;        /* her period, her orbs, her one go-act */
  --sx-mint-700: #117A47;    /* focus ring on light: 5.16:1 */
  --sx-warn: #F2B544;        /* needs you, only */
  --sx-warn-ink: #7A5200;
  --sx-danger: #E5484D;

  /* ── type: one family ── */
  --font: "Inter", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;
  --fs-12: 12px; --fs-14: 14px; --fs-18: 18px; --fs-21: 21px;
  --fs-24: 24px; --fs-36: 36px; --fs-48: 48px; --fs-60: 60px; --fs-72: 72px;
  --lh-12: 16px; --lh-14: 20px; --lh-18: 28px; --lh-21: 28px;
  --lh-24: 32px; --lh-36: 40px; --lh-48: 52px; --lh-60: 64px; --lh-72: 72px;
  /* --fs-60: the hero headline (CP-HERO, owner 2026-10-17: 72 read too big). --nv-h: the header's rendered height (nav.css), so the
     hero can fill exactly one screen under it; checks/hero.mjs H2 turns RED if the two drift apart. */
  --nv-h: 65px;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 680;
  --track-caps: .08em; --track-display: -.032em; --track-head: -.02em;

  /* ── space: 4 px unit, 28 px rhythm ── */
  --s-1: 4px; --s-2: 8px; --s-3: 14px; --s-4: 28px; --s-5: 56px; --s-6: 84px; --s-7: 112px;
  --s-half: 2px; --s-6px: 6px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-40: 40px; --s-44: 44px; --s-48: 48px;

  /* ── section rhythm (ORDER-009 row 2, H-08): set from the six references' bands, read with site-v1/reference/rhythm.mjs (HB-009).
     --sec-gap: ink to ink between home sections; 1440 band 150 to 214 px (per-site medians), 168 = 6 x the 28 px rhythm.
     --sec-top: header to the first section; the headline's first ink then sits 140 px under the header (band 127 to 243, median 201;
     first hero content median 128). Phone values below. ── */
  --sec-gap: calc(6 * var(--s-4)); --sec-top: calc(var(--s-7) + var(--s-3));

  /* ── grid ── */
  --col: 76px; --gutter: 24px; --frame: 1176px; --margin-phone: 16px;
  --radius-0: 0; --radius-s: 4px; --radius-m: 10px; --radius-pill: 999px;
  --hair: 1px;

  /* ── motion: four durations, two curves (owner-signed, unchanged) ── */
  --sx-micro: 120ms; --sx-exit: 240ms; --sx-enter: 420ms; --sx-dissolve: 700ms;
  --sx-ease: cubic-bezier(.2, .7, .2, 1); --sx-spring: cubic-bezier(.34, 1.42, .64, 1);
}
/* section rhythm at phone width: 390 band 87 to 280 px (per-site medians), 112 = 4 x 28; the headline 90 px under the header (band 81 to 145) */
@media (max-width: 760px) { :root { --sec-gap: var(--s-7); --sec-top: var(--s-6); } }

/* assets/css/system.css */
/* system.css · grid, type, evidence component, certificate, figures (PLAN §4, §5).
   Owner: Brand. Consumes tokens.css ONLY: no raw hex, no raw px font size (BV-06).
   Media-query widths are the only literals (CSS cannot read custom properties there).
   Class contract for the page shell (CD) and generator (Growth):
     layout   .wrap (= .frame)  .grid  .c-1-12 .c-1-7 .c-1-6 .c-8-12 .c-9-12 .c-10-12 (.span-* aliases)
     type     .t-display .t-h2 .t-h3 .t-lede .t-body .t-small .t-label .t-figure
     evidence .ev-chip (tier 1)  .ev-note (tier 2)  -> markup from tools/brand/evidence.mjs
     picture  .cert (specimen)   -> partials/certificate.html
     figures  .fig .fig-range .fig-dots -> markup from tools/brand/figures.mjs */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sx-paper); color: var(--sx-ink);
  font-family: var(--font); font-size: var(--fs-18); line-height: var(--lh-18); font-weight: var(--w-regular);
  font-optical-sizing: auto; font-variant-numeric: proportional-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: var(--hair); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--sx-mint-700); outline-offset: 3px; border-radius: var(--radius-s); }

/* ── grid: 12 x 76, 24 gutters, 1,176 frame; one column at phone width ── */
/* .wrap is the CD's name for the frame; .frame kept as an alias */
.wrap, .frame { width: 100%; max-width: calc(var(--frame) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.c-1-12, .span-1-12 { grid-column: 1 / 13; }
.c-1-7, .span-1-7 { grid-column: 1 / 8; }
.c-1-6, .span-1-6 { grid-column: 1 / 7; }
.c-8-12, .span-8-12 { grid-column: 8 / 13; }
.c-9-12 { grid-column: 9 / 13; }
.c-10-12, .span-10-12 { grid-column: 10 / 13; }
@media (max-width: 1023px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .c-1-12, .c-1-7, .c-1-6, .c-8-12, .c-9-12, .c-10-12,
  .span-1-12, .span-1-7, .span-1-6, .span-8-12, .span-10-12 { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .wrap, .frame { padding-inline: var(--margin-phone); } }

/* ── type: 8 sizes, nothing between (BV-04) ── */
.t-display { font-size: var(--fs-72); line-height: var(--lh-72); font-weight: var(--w-bold); letter-spacing: var(--track-display); margin: 0; text-wrap: balance; }
.t-h2 { font-size: var(--fs-48); line-height: var(--lh-48); font-weight: var(--w-bold); letter-spacing: var(--track-head); margin: 0; text-wrap: balance; }
.t-h3 { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--w-semibold); letter-spacing: var(--track-head); margin: 0; }
.t-lede { font-size: var(--fs-21); line-height: var(--lh-21); color: var(--sx-ink-2); margin: 0; text-wrap: pretty; }
.t-body { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink-2); margin: 0; max-width: calc(7 * var(--col) + 6 * var(--gutter)); text-wrap: pretty; }
.t-small { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); margin: 0; }
.t-label { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: "case" 1; color: var(--sx-stone); margin: 0; }
.t-figure { font-size: var(--fs-48); line-height: var(--lh-48); font-weight: var(--w-bold); letter-spacing: var(--track-head); font-variant-numeric: tabular-nums lining-nums; margin: 0; }
.period { color: var(--sx-mint); } /* her full stop: a mark, never information */
@media (max-width: 760px) {
  .t-display { font-size: var(--fs-36); line-height: var(--lh-36); }
  .t-h2 { font-size: var(--fs-36); line-height: var(--lh-36); }
  .t-figure { font-size: var(--fs-36); line-height: var(--lh-36); }
  .t-lede { font-size: var(--fs-18); line-height: var(--lh-18); }
}

/* ── evidence, tier 1: the chip (≤ 8 words: kind · n · date), every width ── */
.ev-chip {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2);
  font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone);
  font-variant-numeric: tabular-nums lining-nums; margin: 0;
}
.ev-chip .ev-kind { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: "case" 1; color: var(--sx-ink-2); }
.ev-chip .ev-sep { color: var(--sx-rule); }

/* ── evidence, tier 2: the margin note (≥ 1024: columns 10 to 12; below: chip + <details>) ── */
.ev-note { margin: 0; padding-top: var(--s-2); border-top: var(--hair) solid var(--sx-line); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); }
.ev-note .ev-full { margin: var(--s-1) 0 0; font-variant-numeric: tabular-nums lining-nums; }
.ev-note .ev-full a { color: var(--sx-ink-2); }
.ev-note details { display: none; margin-top: var(--s-1); }
.ev-note summary { cursor: pointer; color: var(--sx-ink-2); min-height: var(--s-24); }
@media (max-width: 1023px) {
  .ev-note { border-top: 0; padding-top: 0; margin-top: var(--s-3); }
  .ev-note .ev-full { display: none; }
  .ev-note details { display: block; }
}

/* ── the specimen Certificate of Quality (her deep surface; cream and on-dark-2 text only) ── */
.cert {
  position: relative; margin: 0; background: var(--sx-deep); color: var(--sx-cream);
  border-radius: var(--radius-m); padding: var(--s-6px);
}
.cert__inner { border: var(--hair) solid var(--sx-border-dark); outline: var(--hair) solid var(--sx-border-dark); outline-offset: calc(-1 * var(--s-6px)); border-radius: var(--radius-s); padding: var(--s-4); display: grid; gap: var(--s-4); }
.cert__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.cert__title { font-size: var(--fs-21); line-height: var(--lh-21); font-weight: var(--w-semibold); letter-spacing: var(--track-head); margin: 0; color: var(--sx-cream); }
.cert__label { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: "case" 1; color: var(--sx-on-dark-2); margin: 0; }
.cert__serial { font-variant-numeric: tabular-nums lining-nums; }
.cert__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3) var(--s-24); margin: 0; }
.cert__field { grid-column: span 2; border-top: var(--hair) solid var(--sx-border-dark); padding-top: var(--s-2); }
.cert__field--wide { grid-column: 1 / -1; }
.cert__field dt { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: "case" 1; color: var(--sx-on-dark-2); margin: 0 0 var(--s-1); }
.cert__field dd { margin: 0; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-cream); font-variant-numeric: tabular-nums lining-nums; }
.cert__sign { display: flex; align-items: center; gap: var(--s-12); border-top: var(--hair) solid var(--sx-border-dark); padding-top: var(--s-3); }
.cert__mark { width: var(--s-40); height: var(--s-40); display: grid; place-items: center; flex: none; color: var(--sx-cream); }
.cert__mark svg { width: var(--s-40); height: var(--s-40); display: block; }
.cert__sign .cert__label { margin-right: var(--s-1); }
.cert__sign p { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-on-dark-2); }
.cert__sign strong { color: var(--sx-cream); font-weight: var(--w-semibold); }
.cert__link { color: var(--sx-cream); font-size: var(--fs-14); line-height: var(--lh-14); display: inline-flex; align-items: center; min-height: var(--s-24); }
.cert__link:focus-visible { outline-color: var(--sx-mint); }
.cert__stamp { position: absolute; top: var(--s-4); right: var(--s-4); }
@media (max-width: 480px) {
  /* the two short fields stay side by side at phone width (CUX-13); the wide field spans */
  .cert__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-16); }
  .cert__field { grid-column: span 1; }
  .cert__field--wide { grid-column: 1 / -1; }
  .cert__inner { padding: var(--s-16); gap: var(--s-3); }
  .cert__title { font-size: var(--fs-18); line-height: var(--lh-18); }
}

/* ── figures: HTML on a common scale, so labels stay real text at every width (BV-07, BV-08).
   Positions are inline percentages written by tools/brand/figures.mjs from the ledger; the
   lie-factor module reads the rendered boxes back and compares them with data-value. ── */
.fig { margin: 0; }
.fig figcaption { margin-top: var(--s-3); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); }
.fig-head { display: flex; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-3); }
/* range-frame (Tufte): the axis exists only from minimum to maximum; the median is a tick */
.fig-range .rf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin: 0 0 var(--s-4); }
.fig-range .rf-name { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--w-semibold); color: var(--sx-ink); margin: 0; }
.fig-range .rf-track { position: relative; height: var(--s-40); margin-inline: var(--s-12); }
.fig-range .rf-axis { position: absolute; left: 0; right: 0; top: var(--s-12); border-top: 2px solid var(--sx-rule); }
.fig-range .rf-mark { position: absolute; top: 0; width: 0; height: var(--s-24); border-left: 2px solid var(--sx-ink); }
.fig-range .rf-mark--end { top: var(--s-6px); height: var(--s-12); border-left-color: var(--sx-rule); }
.fig-range .rf-lab { position: absolute; top: var(--s-24); transform: translateX(-50%); white-space: nowrap; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); font-variant-numeric: tabular-nums lining-nums; }
.fig-range .rf-lab--med { color: var(--sx-ink); font-weight: var(--w-semibold); }
/* dot plot: one row per billing unit, common 0-to-max scale, direct labels, no legend */
.fig-dots ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.fig-dots li { display: grid; grid-template-columns: calc(3 * var(--col) + 2 * var(--gutter)) minmax(0, 1fr) var(--s-40); align-items: center; column-gap: var(--s-12); min-height: var(--s-4); }
.fig-dots .dp-lab { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); }
.fig-dots .dp-track { position: relative; height: var(--s-12); border-left: 2px solid var(--sx-rule); }
.fig-dots .dp-lead { position: absolute; left: 0; top: 50%; border-top: var(--hair) solid var(--sx-line); }
.fig-dots .dp-dot { position: absolute; top: 50%; width: var(--s-12); height: var(--s-12); margin: calc(-1 * var(--s-6px)) 0 0 calc(-1 * var(--s-6px)); border-radius: 50%; background: var(--sx-ink); }
.fig-dots .dp-val { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--w-semibold); color: var(--sx-ink); text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.fig-dots li.dp-zero .dp-lab { color: var(--sx-ink); font-weight: var(--w-semibold); }
.fig-dots li.dp-zero .dp-dot { background: transparent; border: 2px solid var(--sx-ink); }
.fig-dots .dp-her { display: inline-flex; align-items: center; gap: var(--s-6px); margin-left: var(--s-2); font-size: var(--fs-14); color: var(--sx-ink); font-weight: var(--w-semibold); white-space: nowrap; }
.fig-dots .dp-her::before { content: ""; width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--sx-mint); box-shadow: 0 0 0 var(--hair) var(--sx-ink); }
@media (max-width: 760px) {
  /* one line per row at phone width (CUX-13): label | track | value; labels may wrap to two lines */
  .fig-dots ol { gap: var(--s-1); }
  .fig-dots li { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) var(--s-24); column-gap: var(--s-2); min-height: var(--s-24); }
  .fig-dots .dp-her { display: flex; margin: var(--s-1) 0 0; }
}


/* certificate glyph colours: cream strokes, her mint period (owner rule: mint only for her) */
.cert .period, .cert .ms-period { fill: var(--sx-mint); }
/* a ledger row the page asked for and did not get: loud on purpose, so the trace gate cannot miss it */
.ev-missing { background: var(--sx-warn); color: var(--sx-deep); font-size: var(--fs-14); line-height: var(--lh-14); padding: 0 var(--s-1); }

/* ══ Page composition (home) · the CD's class names, styled on the system (lead 17:28: site.css is Brand's;
   it lives here). Tokens only. Every size is one of the eight. ══ */
.skip { position: absolute; left: var(--s-16); top: calc(-1 * var(--s-7)); z-index: 50; background: var(--sx-white); color: var(--sx-ink); padding: var(--s-2) var(--s-12); border-radius: var(--radius-s); }
.skip:focus { top: var(--s-16); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* header */
.hdr { border-bottom: var(--hair) solid var(--sx-line); background: var(--sx-paper); }
.hdr-in { display: flex; align-items: center; gap: var(--s-24); min-height: var(--s-6); }
.brand { display: inline-flex; align-items: center; gap: var(--s-12); text-decoration: none; color: var(--sx-ink); }
.brand-w { font-size: var(--fs-21); line-height: var(--lh-21); font-weight: var(--w-semibold); letter-spacing: var(--track-head); }
.nav { margin-left: auto; position: relative; }
.nav-d > summary { list-style: none; cursor: pointer; min-height: var(--s-44); display: inline-flex; align-items: center; padding: 0 var(--s-16); border: var(--hair) solid var(--sx-line); border-radius: var(--radius-pill); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--w-semibold); }
.nav-d > summary::-webkit-details-marker { display: none; }
.nav-l { list-style: none; margin: 0; padding: var(--s-2); position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 30; min-width: calc(3 * var(--col)); background: var(--sx-white); border: var(--hair) solid var(--sx-line); border-radius: var(--radius-m); }
.nav-l a { display: flex; align-items: center; min-height: var(--s-44); padding: 0 var(--s-12); text-decoration: none; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink); border-radius: var(--radius-s); }
.nav-l a:hover { background: var(--sx-hover); }
@media (min-width: 1024px) {
  .nav { margin-left: var(--s-24); }
  .nav-d > summary { display: none; }
  .nav-d::details-content { content-visibility: visible; display: contents; }
  .nav-l { position: static; display: flex; gap: var(--s-1); padding: 0; border: 0; background: none; min-width: 0; }
  .nav-l a { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--w-medium); color: var(--sx-ink-2); padding: 0 var(--s-12); }
  .btn-hdr { margin-left: auto; }
}

/* buttons and links (targets >= 44 px: WCAG 2.5.5, CUX-15) */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--s-48); padding: 0 var(--s-24); border-radius: var(--radius-pill); background: var(--sx-deep); color: var(--sx-cream); text-decoration: none; font-size: var(--fs-18); line-height: var(--lh-18); font-weight: var(--w-semibold); white-space: nowrap; }
.btn:hover { background: var(--sx-deep-2); }
.btn-hdr { min-height: var(--s-44); padding: 0 var(--s-20); font-size: var(--fs-14); line-height: var(--lh-14); }
.lnk { display: inline-flex; align-items: center; min-height: var(--s-44); color: var(--sx-ink); font-weight: var(--w-semibold); text-decoration: underline; text-underline-offset: .22em; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12) var(--s-24); margin: var(--s-4) 0 var(--s-2); }

/* hero: answers in columns 1 to 7, the certificate in 8 to 12 */
.hero { padding-block: var(--s-6) var(--s-7); }
.hero .grid { align-items: start; }
.eyebrow { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: "case" 1; color: var(--sx-stone); margin: 0 0 var(--s-3); }
.h1 { font-size: var(--fs-72); line-height: var(--lh-72); font-weight: var(--w-bold); letter-spacing: var(--track-display); margin: 0 0 var(--s-4); text-wrap: balance; }
.sub { font-size: var(--fs-21); line-height: var(--lh-21); color: var(--sx-ink-2); margin: 0 0 var(--s-3); max-width: calc(7 * var(--col) + 6 * var(--gutter)); text-wrap: pretty; } /* the 7-column text measure (gate 1: at 6 columns the new 21 px sub read 40 characters a line, BV-03) */
.offer { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink); font-weight: var(--w-medium); margin: 0; max-width: calc(6 * var(--col) + 5 * var(--gutter)); }
.under { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); margin: 0 0 var(--s-4); }
.proof { margin: 0; padding-top: var(--s-3); border-top: var(--hair) solid var(--sx-line); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-12); }
.proof-fig { font-size: var(--fs-21); line-height: var(--lh-21); font-weight: var(--w-semibold); color: var(--sx-ink); font-variant-numeric: tabular-nums lining-nums; }
.hero-b { padding-top: calc(var(--lh-12) + var(--s-3)); } /* top of the certificate = top of the H1 (eyebrow line + its gap), lead 17:42 ask 3 */
@media (max-width: 1023px) { .hero-b { margin-top: var(--s-5); padding-top: 0; } }
/* phone: the certificate keeps s-5 above it, so less of it enters the first viewport (BV-10) */
@media (max-width: 760px) {
  .hero { padding-block: var(--s-4) var(--s-5); }
  .h1 { font-size: var(--fs-36); line-height: var(--lh-36); margin-bottom: var(--s-3); }
  .sub { font-size: var(--fs-18); line-height: var(--lh-18); }
  .ctas { margin-top: var(--s-3); }
  .proof-fig { font-size: var(--fs-18); line-height: var(--lh-18); }
}

/* bands below the first screen */
.band { padding-block: var(--s-7); border-top: var(--hair) solid var(--sx-line); }
.band .wrap + .wrap { margin-top: var(--s-5); }
.kicker { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: "case" 1; color: var(--sx-stone); margin: 0 0 var(--s-3); }
.band-h { font-size: var(--fs-48); line-height: var(--lh-48); font-weight: var(--w-bold); letter-spacing: var(--track-head); margin: 0 0 var(--s-4); text-wrap: balance; }
.band-h3 { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--w-semibold); letter-spacing: var(--track-head); margin: 0 0 var(--s-3); }
.band p { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink-2); margin: 0 0 var(--s-4); }
.band .fig { margin: var(--s-4) 0; }
.band h3 { font-size: var(--fs-24); line-height: var(--lh-24); }
.step h3 { font-size: var(--fs-18); line-height: var(--lh-18); }
.obs, .lineage { color: var(--sx-ink); }
.review { margin: var(--s-4) 0 0; padding-left: var(--s-24); border-left: 2px solid var(--sx-ink); }
.review p { font-size: var(--fs-21); line-height: var(--lh-21); color: var(--sx-ink); }
.c-1-7 > .ev-note, .c-1-12 > .ev-note { max-width: calc(5 * var(--col) + 4 * var(--gutter)); margin-bottom: var(--s-4); }
@media (max-width: 760px) {
  .band { padding-block: var(--s-5); }
  .band-h { font-size: var(--fs-36); line-height: var(--lh-36); }
  .band h3, .band-h3 { font-size: var(--fs-21); line-height: var(--lh-21); }
}

/* plans */
.plans { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-24); }
.plan { border-top: 2px solid var(--sx-ink); padding-top: var(--s-3); display: grid; gap: var(--s-2); align-content: start; }
.plan h3 { margin: 0; }
.plan-who { font-size: var(--fs-14) !important; line-height: var(--lh-14) !important; color: var(--sx-stone) !important; margin: 0 !important; }
.plan-p { font-size: var(--fs-18) !important; line-height: var(--lh-18) !important; color: var(--sx-ink) !important; margin: 0 !important; font-variant-numeric: tabular-nums lining-nums; }
.vat { font-size: var(--fs-14) !important; line-height: var(--lh-14) !important; color: var(--sx-stone) !important; }
@media (max-width: 1023px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* questions */
.faq details { border-top: var(--hair) solid var(--sx-line); }
.faq details:last-child { border-bottom: var(--hair) solid var(--sx-line); }
.faq summary { cursor: pointer; min-height: var(--s-48); display: flex; align-items: center; font-size: var(--fs-18); line-height: var(--lh-18); font-weight: var(--w-semibold); color: var(--sx-ink); padding-block: var(--s-2); }
.faq details p { margin: 0 0 var(--s-3); }

/* footer */
.ftr { border-top: var(--hair) solid var(--sx-line); padding-block: var(--s-5); }
.ftr-line { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink); margin: 0 0 var(--s-2); }
.ftr-legal { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); margin: 0; }
.ftr-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-24); }
.ftr-nav a { display: inline-flex; align-items: center; min-height: var(--s-44); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); }
@media (max-width: 760px) {
  .hdr-in { gap: var(--s-2); min-height: var(--s-5); }
  .btn-hdr { padding: 0 var(--s-16); }
  .nav-d > summary { padding: 0 var(--s-12); }
}
@media (max-width: 420px) {
  .brand-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* specificity guards: band paragraph styles must not reach inside figures and notes */
.band .fig p { margin: 0; }
.band .fig .fig-head { margin: 0 0 var(--s-3); }
.band .fig .rf-name { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink); }
.band .fig .rf-read { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); margin-top: var(--s-1); }
.band .ev-note p, .ev-note p { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); margin: var(--s-1) 0 0; }
.band .ev-chip, .band p .ev-chip { font-size: var(--fs-14); line-height: var(--lh-14); }
.guar-line { margin-top: var(--s-3); }
.steps + .band-h3 { margin-top: var(--s-5); } /* lead 17:42 fix 1: the outcomes head no longer touches the steps */
.band .guar-o { font-size: var(--fs-18); line-height: var(--lh-18); } /* same weight as step body (lead 17:42 fix 1) */
.band .fig figcaption { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); }

/* how band (Motion's strip.css owns the structure). Two type-level adjustments, logged in coord/brand.md:
   1. at >= 48rem the three step columns are 373 px; at 18 px that is 34 to 38 characters a line (BV-03 band 45 to 75),
      so step text is set at 14/20 there (about 50 a line). 2. at phone width the CD's .step-k / .step-c children fell into
      the 40 px counter column (paragraphs 40 px wide, measured 17:36Z); every child goes to column 2. */
@media (min-width: 48rem) { .band .step p, .band .step-c p { font-size: var(--fs-14); line-height: var(--lh-14); } }
@media (max-width: 47.99rem) { .step > * { grid-column: 2; } .step::before { grid-column: 1; grid-row: 1 / span 3; } }

/* her full stop on the H1 (A2 §3.4: one mint point per light screen; the live site's .msfd-stop).
   Markup: <span class="vh">.</span><span class="stop" aria-hidden="true"></span> in place of the final full stop.
   The real "." stays in the text for readers and agents; the mint dot is a drawn mark, not text, so it carries
   no information and no contrast duty (1.4.1, 1.4.11). The owner's period is mint, never grown, never hazed. */
.stop { display: inline-block; width: .2em; height: .2em; margin-left: .04em; border-radius: 50%; background: var(--sx-mint); vertical-align: baseline; }
/* phone menu: anchor the open list to the header frame, not to the Menu pill, so it never leaves the screen */
@media (max-width: 1023px) {
  .hdr-in { position: relative; }
  .nav { position: static; }
  .nav-l { right: 0; left: auto; max-width: 100%; }
}

/* lead 17:44 ask (CUX-13, home length at 390): tighter band rhythm on phones. The lead asked for s-5 (56);
   measured 21:0xZ that leaves home at 8.4 screens, so bands take s-4 (28) each side: 56 px between two bands'
   content, plus the hairline, against 28 px inside a band. The rhythm stays on the 28 px grid. */
@media (max-width: 47.99rem) {
  .band { padding-block: var(--s-4); }
  .band .wrap + .wrap { margin-top: var(--s-4); }
}
/* lead 17:39: the hero proof figure is a link to /proof; quiet text, underline only on hover and focus */
a.proof-fig { color: var(--sx-ink); text-decoration: none; }
a.proof-fig:hover, a.proof-fig:focus-visible { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: .2em; }

/* CUX-13 (home <= 8 screens at 390): Brand's share, below the hero only */
@media (max-width: 47.99rem) {
  .fig-range .rf { margin-bottom: var(--s-3); }
  .review { padding-left: var(--s-16); }
  .review p { font-size: var(--fs-18); line-height: var(--lh-18); }
  .plans { gap: var(--s-3); }
  .plan { gap: var(--s-1); padding-top: var(--s-2); }
  .band .fig { margin: var(--s-3) 0; }
  .band-h { margin-bottom: var(--s-3); }
  .ev-note { margin-top: var(--s-2); }
  .faq summary { min-height: var(--s-44); padding-block: var(--s-1); }
  .fig-range .rf { margin-bottom: var(--s-2); }
  .review { margin-top: var(--s-3); }
  .c-1-7 > .ev-note, .c-1-12 > .ev-note { margin-bottom: var(--s-3); }
}
/* guards: band paragraph size must not reach the figure head label or the caption */
.band .fig .fig-head.t-label, .band .fig .fig-head.t-label span { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); color: var(--sx-stone); }
.band .fig figcaption, .band .fig figcaption p { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); }

/* ══ /pricing (page round 2) · Conversion's structure, styled on the system. Tokens only; home's rows unchanged. ══ */
.hero .wrap + .wrap { margin-top: var(--s-5); }
.plan h3 { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--w-semibold); letter-spacing: var(--track-head); color: var(--sx-ink); }
.plan .btn { justify-self: start; margin-top: var(--s-2); }
.hero .plans { margin-top: var(--s-3); }
.band .t-small, .band p.t-small { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); }

/* "never" list: the non-triggers of payment, one per hairline row */
.never { list-style: none; margin: 0 0 var(--s-4); padding: 0; border-top: var(--hair) solid var(--sx-line); }
.never li { padding: var(--s-2) 0; border-bottom: var(--hair) solid var(--sx-line); font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink); }

/* worked examples: a ledger table; the sum in words and figures, the total right-aligned in tabular figures */
.ex { width: 100%; border-collapse: collapse; margin-top: var(--s-3); font-variant-numeric: tabular-nums lining-nums; }
.ex th, .ex td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-16) var(--s-3) 0; border-top: var(--hair) solid var(--sx-line); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); font-weight: var(--w-regular); }
.ex thead th { border-top: 0; border-bottom: 2px solid var(--sx-ink); padding-block: 0 var(--s-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: "case" 1; color: var(--sx-stone); }
.ex tbody th { color: var(--sx-ink); font-weight: var(--w-semibold); width: 34%; }
.ex .ex-total, .ex thead th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.ex td.ex-total { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: var(--w-semibold); color: var(--sx-ink); }
@media (max-width: 760px) {
  .ex, .ex tbody, .ex tr, .ex th, .ex td { display: block; width: 100%; }
  .ex thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .ex tr { border-top: 2px solid var(--sx-ink); padding-block: var(--s-2) var(--s-3); }
  .ex th, .ex td { border: 0; padding: var(--s-1) 0; }
  .ex tbody th { width: 100%; }
  .ex .ex-total { text-align: left; }
}
/* the certificate keeps its own type inside any band (pricing places it in .band: .band p must not reach it; it measured 1.8:1) */
.band .cert .cert__title { font-size: var(--fs-21); line-height: var(--lh-21); color: var(--sx-cream); margin: 0; }
.band .cert .cert__label { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--sx-on-dark-2); margin: 0; }
.band .cert .cert__sign p { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-on-dark-2); margin: 0; }
@media (max-width: 480px) { .band .cert .cert__title { font-size: var(--fs-18); line-height: var(--lh-18); } }
/* pricing: if the plans sit in the hero's columns 8 to 12, they stack as a ledger so all three prices are on the first screen */
@media (min-width: 1024px) {
  .hero .c-8-12 .plans { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
  .hero .c-8-12 .plan { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-16); row-gap: 0; padding-block: var(--s-3); border-top: var(--hair) solid var(--sx-line); }
  .hero .c-8-12 .plan:first-child { border-top: 2px solid var(--sx-ink); }
  .hero .c-8-12 .plan > * { grid-column: 1; }
  .hero .c-8-12 .plan .btn { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
}
/* pricing hero: "plans at a glance" (lead 22:32). The certificate's typography on paper: caps-free plan names at 18
   semibold, fee in body ink-2, per-call figure in tabular ink, hairline rows under a 2 px ink rule. */
.ex.glance { margin-top: 0; table-layout: fixed; border-top: 2px solid var(--sx-ink); }
.ex.glance th, .ex.glance td { padding-block: var(--s-3); vertical-align: baseline; }
.ex.glance tbody tr:first-child th, .ex.glance tbody tr:first-child td { border-top: 0; }
.ex.glance tbody th { width: 26%; font-size: var(--fs-18); line-height: var(--lh-18); }
.ex.glance tbody th a { color: var(--sx-ink); text-decoration: none; }
.ex.glance tbody th a:hover, .ex.glance tbody th a:focus-visible { text-decoration: underline; }
.ex.glance td { width: 45%; font-size: var(--fs-14); line-height: var(--lh-14); }
.ex.glance td.ex-total { width: 29%; white-space: normal; font-size: var(--fs-18); line-height: var(--lh-18); }
.hero-b .ex.glance { margin-top: var(--s-2); }
@media (max-width: 1023px) { .hero-b .ex.glance { margin-top: 0; } }
@media (max-width: 760px) {
  .ex.glance tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-16); border-top: var(--hair) solid var(--sx-line); padding-block: var(--s-2); }
  .ex.glance tr:first-child { border-top: 0; }
  .ex.glance tbody th, .ex.glance td, .ex.glance td.ex-total { width: auto; padding: 0; }
  .ex.glance tbody th { grid-column: 1; grid-row: 1; }
  .ex.glance td.ex-total { grid-column: 2; grid-row: 1; text-align: right; }
  .ex.glance td:not(.ex-total) { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-1); }
}

/* ══ /proof (page round 3) · Brand. Tokens only; home and pricing unchanged. ══ */
/* .record: the at-a-glance evidence table in the hero (same family as pricing's .glance): label | value | chip */
.ex.glance.record caption { caption-side: top; text-align: left; padding-bottom: var(--s-2); }
.ex.glance.record tbody th { width: 30%; }
.ex.glance.record td { width: auto; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink); font-variant-numeric: tabular-nums lining-nums; }
.ex.glance.record td:last-child { width: 38%; text-align: right; padding-right: 0; }
.ex.glance.record td:last-child .ev-chip { justify-content: flex-end; }
@media (max-width: 760px) {
  .ex.glance.record tr { grid-template-columns: minmax(0, 1fr); }
  .ex.glance.record td, .ex.glance.record td:last-child { grid-column: 1; grid-row: auto; text-align: left; margin-top: var(--s-1); }
  .ex.glance.record td:last-child .ev-chip { justify-content: flex-start; }
}

/* .kinds: the four warrant kinds, a definition list set as ledger rows: kind (caps label) | what it carries */
.kinds { margin: 0 0 var(--s-5); border-top: 2px solid var(--sx-ink); }
.kinds > div { display: grid; grid-template-columns: calc(2 * var(--col) + var(--gutter)) minmax(0, 1fr); column-gap: var(--gutter); padding: var(--s-3) 0; border-bottom: var(--hair) solid var(--sx-line); }
.kinds dt { font-size: var(--fs-12); line-height: var(--lh-18); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: "case" 1; color: var(--sx-ink); }
.kinds dd { margin: 0; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink-2); }
@media (max-width: 760px) { .kinds > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-1); } }

/* .ledger: evidence tier 3, the full ledger table ({{ledger:table}}, Growth). Claim and value read first; the
   warrant columns are set small in tabular figures. Under 1024 px each row stacks, labelled by data-label. */
table.ledger { width: 100%; border-collapse: collapse; margin-top: var(--s-3); font-variant-numeric: tabular-nums lining-nums; }
table.ledger caption { caption-side: top; text-align: left; padding-bottom: var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); }
table.ledger th, table.ledger td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-12) var(--s-2) 0; border-top: var(--hair) solid var(--sx-line); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--sx-ink-2); font-weight: var(--w-regular); overflow-wrap: break-word; hyphens: none; }
table.ledger thead th { border-top: 0; border-bottom: 2px solid var(--sx-ink); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: "case" 1; color: var(--sx-stone); }
table.ledger tbody th, table.ledger td:nth-child(2) { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink); }
table.ledger tbody th { font-weight: var(--w-semibold); }
table.ledger tr:target th, table.ledger tr:target td { background: var(--sx-hover); }
table.ledger code { font-family: inherit; font-size: inherit; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  table.ledger { table-layout: fixed; }
  table.ledger th:nth-child(1) { width: 27%; } table.ledger :is(th, td):nth-child(2) { width: 10%; }
  table.ledger :is(th, td):nth-child(3) { width: 8%; } table.ledger :is(th, td):nth-child(4) { width: 12%; }
  table.ledger :is(th, td):nth-child(5) { width: 12%; overflow-wrap: anywhere; } table.ledger :is(th, td):nth-child(6) { width: 8%; }
  table.ledger :is(th, td):nth-child(7) { width: 8%; } table.ledger :is(th, td):nth-child(8) { width: 15%; padding-right: 0; }
}
@media (max-width: 1023px) {
  table.ledger, table.ledger tbody, table.ledger tr, table.ledger th, table.ledger td { display: block; width: 100%; }
  table.ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  table.ledger tr { border-top: var(--hair) solid var(--sx-rule); padding-block: var(--s-2); }
  table.ledger th, table.ledger td { border: 0; padding: var(--s-half) 0; }
  table.ledger td[data-label]::before { content: attr(data-label) ": "; font-weight: var(--w-semibold); color: var(--sx-stone); }
  table.ledger caption { display: block; width: 100%; }
  table.ledger td:empty { display: none; }
}
.review footer { margin-top: var(--s-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-12); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); }
/* proof's running text: numerals-heavy paragraphs set at the full 7 columns ran 76 to 77 characters a line, and the
   ledger intro in 12 columns ran 109 (BV-03, 45 to 75). Scoped to /proof/ so home and pricing stay pixel-identical. */
body[data-route="/proof/"] .band .c-1-7 > p { max-width: calc(7 * var(--col) + 6 * var(--gutter) - var(--s-40)); }
body[data-route="/proof/"] .band .c-1-12 > p { max-width: calc(7 * var(--col) + 6 * var(--gutter) - var(--s-40)); }
/* R-6a: /proof/'s first style and layout crossed 50 ms about one load in twenty (2,031 elements; 45 ledger rows are 700 of them, three
   screens down). The ledger band is skipped until it nears the viewport: first layout 16.7 ms median, 55 ms worst before, 9.9 and 20 after
   (30 loads, 1440). The text stays in the DOM and in the accessibility tree; fragment links (#claim-ID) and find-in-page still reach it; print renders it.
   The intrinsic size is only a scrollbar estimate (measured band heights: 3,165 px at 1440, 7,926 px at 390). */
body[data-route="/proof/"] #ledger { content-visibility: auto; contain-intrinsic-block-size: auto 3200px; }
@media (max-width: 640px) { body[data-route="/proof/"] #ledger { contain-intrinsic-block-size: auto 7900px; } }
@media print { body[data-route="/proof/"] #ledger { content-visibility: visible; } }

/* ══ /service/, /service/find-and-meet/, /service/sell/ (page round 4) · Builder. Tokens only; home, pricing and proof unchanged.
   Modifiers on the existing .ex table and .cert specimen, asked for by the Lead (coord/builder.md 08:10Z, 08:18Z):
     .ex.stages   column widths for the rung and phase tables: a narrow name column, the middle column takes the width,
                  the last column reads left (a sentence or a move), not right-aligned like a total
     .ex.rungs    rung name + .t-small read line | the buyer's quote (curly quotes in the markup) | what the rung asks
     .ex.read     the "call, read" card: label | value
     .ex.manager  the manager view: rep | next | stage | coaching (the last cell wraps and reads left)
     .cert.receipt the specimen receipt on Find & Meet: the Certificate's deep surface, a dashed top edge so it reads as a different document
   Stacked at 760 px and below by .ex already. A cell with data-label gets its column name back when stacked (as the ledger does).
   {{breadcrumbs}} (build.mjs) prints .crumbs, the visible twin of the BreadcrumbList JSON-LD. ══ */

/* column widths settle only on wide screens; the stacked layout below 761 px is .ex's own */
@media (min-width: 761px) {
  .ex.stages, .ex.read, .ex.manager { table-layout: fixed; }
  .ex.stages tbody th { font-size: var(--fs-18); line-height: var(--lh-18); }
  .ex.stages :is(th, td):nth-child(1) { width: 22%; }
  .ex.stages.rungs :is(th, td):nth-child(1) { width: 26%; }
  .ex.stages.rungs :is(th, td):nth-child(2) { width: 40%; }
  .ex.stages.rungs :is(th, td):nth-child(3) { width: 34%; }
  .ex.read :is(th, td):nth-child(1) { width: 22%; }
  .ex.manager :is(th, td):nth-child(1) { width: 16%; }
  .ex.manager :is(th, td):nth-child(2) { width: 34%; }
  .ex.manager :is(th, td):nth-child(3) { width: 18%; }
  .ex.manager :is(th, td):nth-child(4) { width: 32%; }
}
/* the last column is words, so it reads left and wraps; the base .ex right-aligns the last column for a total */
.ex.stages thead th:last-child, .ex.manager thead th:last-child { text-align: left; white-space: normal; padding-right: 0; }
.ex.stages td:last-child, .ex.manager td.ex-total { text-align: left; white-space: normal; padding-right: 0; }
.ex.manager td.ex-total { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--w-regular); color: var(--sx-ink-2); }
.ex.stages tbody th .t-small, .ex.stages tbody th > span { display: block; margin-top: var(--s-1); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--w-regular); color: var(--sx-stone); }
.ex.rungs td:nth-child(2) { color: var(--sx-ink-2); font-style: normal; }
.ex.rungs td strong, .ex.read td strong { color: var(--sx-ink); font-weight: var(--w-semibold); }
.ex.read tbody th { font-size: var(--fs-14); line-height: var(--lh-14); }
.ex.read td { color: var(--sx-ink); }
@media (max-width: 760px) {
  .ex.stages tbody th { font-size: var(--fs-18); line-height: var(--lh-18); }
  .ex :is(td, th)[data-label]::before { content: attr(data-label) ": "; font-weight: var(--w-semibold); color: var(--sx-stone); }
}

/* a caption on these tables is the table's label: left, small caps, like the thead (the browser default centres it) */
.ex.read caption, .ex.manager caption, .ex.stages caption:not(.vh) { caption-side: top; text-align: left; padding-bottom: var(--s-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; font-feature-settings: "case" 1; color: var(--sx-stone); }

/* the receipt: a different document from the Certificate of Quality, on the same deep surface */
.cert.receipt .cert__inner { border-top-style: dashed; border-top-color: var(--sx-on-dark-3); }
.cert.receipt .cert__field dd { font-size: var(--fs-14); line-height: var(--lh-14); }

/* breadcrumbs: one line, 14 px, link targets 44 px (WCAG 2.5.5); the current page is plain text */
.crumbs { margin: 0 0 var(--s-3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--sx-rule); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--s-44); color: var(--sx-ink-2); }
.crumbs [aria-current="page"] { color: var(--sx-ink); font-weight: var(--w-semibold); }

/* running text on the service pages: held to 45 to 75 characters a line (BV-03), as on /proof/ */
body[data-route^="/service/"] .band .c-1-7 > p, body[data-route^="/service/"] .band .c-1-12 > p, body[data-route^="/service/"] .faq p { max-width: calc(6 * var(--col) + 5 * var(--gutter) + var(--s-24)); } /* 600 px: about 71 characters of 18 px Inter; 636 ran 76 (BV-03) */

/* ══ page round 5 · Builder. Shared chrome links (R-S1) and the print baseline for /start/ (the Decision Brief). Tokens only. */

/* header: the children of Service are listed under it. In the small-screen panel they sit indented under Service;
   on a wide screen they join the row, set one step lighter than the top-level links, so Service reads as their parent. */
.nav-sub { list-style: none; margin: 0; padding: 0 0 0 var(--s-16); }
.nav-sub a { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); }
@media (min-width: 1024px) {
  .nav-l > li:has(> .nav-sub) { display: flex; align-items: center; }
  .nav-sub { display: flex; gap: var(--s-1); padding: 0; }
  .nav-l .nav-sub a { font-weight: var(--w-regular); padding: 0 var(--s-2); }
  .nav-l a { white-space: nowrap; }
}
/* eight links in a row need the tighter padding between 1024 and 1199 px; from 1200 px the standard padding fits */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav { margin-left: var(--s-16); }
  .nav-l a { padding: 0 var(--s-2); }
  /* page round 6: Podcast joins the Service children (nine links); with the gaps closed the row clears the button at 1024 (it
     overflowed by 2 px with the 4 px gaps) and keeps at least 24 px of air at every width up to 1199 */
  .nav-l, .nav-l .nav-sub { gap: 0; }
}

/* print baseline for every page: no site chrome, ink on paper. /start/'s own print rules (the one visible result, one A4
   page) are in elements/chooser.css; this block only removes what no printed page wants. */
@media print {
  .skip, .hdr, .ftr, .crumbs { display: none !important; }
  body { background: none; color: var(--sx-ink); }
}

/* ══ page round 6 · Builder. /privacy/ (legal, long-form), /company/ (registered details) and /podcast/. Tokens only. */

/* in-page anchors land clear of the top edge */
.legal [id], .facts [id] { scroll-margin-top: var(--s-5); }

/* .legal: the released policy text, set for reading. Running text is held to 45 to 75 characters a line (BV-03): seven columns.
   Headings step down from the band heading; lists and nested lists keep the body size and the 28 px rhythm. */
.legal { padding-block: var(--s-6); }
.legal > .wrap > * { max-width: calc(6 * var(--col) + 5 * var(--gutter) + var(--s-24)); } /* 600 px: about 71 characters of 18 px Inter; 676 ran 78 (BV-03) */
.legal-meta { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); margin: 0 0 var(--s-4); font-variant-numeric: tabular-nums lining-nums; }
.legal h2 { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--w-semibold); letter-spacing: var(--track-head); color: var(--sx-ink); margin: var(--s-5) 0 var(--s-3); text-wrap: balance; }
.legal h3 { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: var(--w-semibold); color: var(--sx-ink); margin: var(--s-4) 0 var(--s-2); }
.legal p, .legal li { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink-2); text-wrap: pretty; }
.legal p { margin: 0 0 var(--s-3); }
.legal ul, .legal ol { margin: 0 0 var(--s-3); padding-left: var(--s-24); }
.legal li { margin: 0 0 var(--s-2); }
.legal li > ul, .legal li > ol { margin: var(--s-2) 0 0; }
.legal strong { color: var(--sx-ink); font-weight: var(--w-semibold); }
.legal a { color: var(--sx-ink); text-decoration: underline; text-underline-offset: var(--s-half); text-decoration-thickness: var(--hair); overflow-wrap: anywhere; }
.legal a:hover { background: var(--sx-hover); }
.legal address { font-style: normal; }
/* contents: one link per section, each a 44 px target (WCAG 2.5.5) */
.legal-toc { list-style: none; margin: 0 0 var(--s-5); padding: 0; border-top: 2px solid var(--sx-ink); }
.legal-toc li { margin: 0; border-bottom: var(--hair) solid var(--sx-line); }
.legal-toc a { display: flex; align-items: center; min-height: var(--s-44); font-size: var(--fs-14); line-height: var(--lh-14); text-decoration: none; }
.legal-toc a:hover, .legal-toc a:focus-visible { text-decoration: underline; }
/* a policy table scrolls inside its own frame, so a narrow screen never scrolls the page (the frame is a focusable region) */
.legal-table { overflow-x: auto; margin: 0 0 var(--s-4); max-width: 100%; }
.legal-table:focus-visible { outline: 2px solid var(--sx-mint-700); outline-offset: var(--s-half); }
.legal-table table { width: 100%; min-width: calc(5 * var(--col)); border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-12) var(--s-2) 0; border-top: var(--hair) solid var(--sx-line); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); font-weight: var(--w-regular); }
.legal-table thead th { border-top: 0; border-bottom: 2px solid var(--sx-ink); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--sx-stone); }
.legal-table tbody th { color: var(--sx-ink); font-weight: var(--w-semibold); }

/* .facts: a definition list of registered details, label then value. Two columns from 760 px, stacked below. */
.facts { margin: var(--s-4) 0 0; padding: 0; border-top: 2px solid var(--sx-ink); font-variant-numeric: tabular-nums lining-nums; }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); padding-block: var(--s-3); border-bottom: var(--hair) solid var(--sx-line); }
.facts dt { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--sx-stone); }
.facts dd { margin: 0; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink); overflow-wrap: anywhere; }
.facts dd a { color: var(--sx-ink); text-decoration: underline; text-underline-offset: var(--s-half); }
@media (min-width: 761px) { .facts > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-24); align-items: baseline; } }

@media print { .legal-toc { display: none; } .legal-table { overflow: visible; } .legal a { text-decoration: none; } }

/* running text on /podcast/ and /company/: held to 45 to 75 characters a line (BV-03), the same 600 px as the service pages */
body[data-route="/podcast/"] .band .c-1-7 > p, body[data-route="/podcast/"] .band .c-1-12 > p, body[data-route="/podcast/"] .faq p,
body[data-route="/company/"] .band .c-1-7 > p, body[data-route="/company/"] .band .c-1-12 > p, body[data-route="/company/"] .faq p { max-width: calc(6 * var(--col) + 5 * var(--gutter) + var(--s-24)); }
body[data-route="/company/"] .facts { max-width: calc(8 * var(--col) + 7 * var(--gutter)); }
/* 14 px running text is narrower still: at 600 px it ran 76 characters a line (BV-03), at 500 px about 64 */
body[data-route="/podcast/"] .band .c-1-7 > p.t-small, body[data-route="/podcast/"] .band .c-1-12 > p.t-small,
body[data-route="/company/"] .band .c-1-7 > p.t-small, body[data-route="/company/"] .band .c-1-12 > p.t-small { max-width: calc(5 * var(--col) + 4 * var(--gutter) + var(--s-24)); }

/* ══ page round 7 · Builder: /compare/* and /for/* ══ */
/* running text held to 45 to 75 characters a line (BV-03): at 676 px the 18 px paragraphs ran 76 to 82, the 14 px notes 98 (measured 11:28Z, 1440) */
body:is([data-route^="/compare/"], [data-route^="/for/"]) .band .c-1-7 > p,
body:is([data-route^="/compare/"], [data-route^="/for/"]) .band .c-1-12 > p,
body:is([data-route^="/compare/"], [data-route^="/for/"]) .faq details p { max-width: calc(7 * var(--col) + 6 * var(--gutter) - var(--s-40)); }
body:is([data-route^="/compare/"], [data-route^="/for/"]) .band .c-1-7 > p.t-small,
body:is([data-route^="/compare/"], [data-route^="/for/"]) .band .c-1-12 > p.t-small { max-width: calc(5 * var(--col) + 4 * var(--gutter) + var(--s-24)); }
/* a long heading word must break rather than push the page sideways at 320 px under WCAG 1.4.12 spacing (BV-12) */
.t-display, .t-h2, .t-h3 { overflow-wrap: break-word; }

/* assets/css/pages.css */
/* P0-03 · page layer for site-v1 (ORDER-007): sections, the proof strip, labels, link rule. Tokens only (tokens.css). */

/* links in the body are underlined on hover and on keyboard focus only */
main a { text-decoration: none; color: var(--sx-ink); }
main a:hover, main a:focus-visible { text-decoration: underline; }
main .btn:hover, main .btn:focus-visible { text-decoration: none; }

main > section { padding-block: var(--s-5); }
main > section + section { padding-top: 0; }
main h1, main h2, main h3 { margin: 0 0 var(--s-4); }
main p { margin: 0 0 var(--s-3); }
main ul { margin: 0; padding: 0; list-style: none; }

/* the label that travels with every number (display_short from copy/claims.csv) */
.fact-label { display: block; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); font-weight: var(--w-regular); }
p > .fact-label, li > .fact-label { margin-top: var(--s-1); }

/* home: first screen. ORDER-009 row 2 (H-08): the hero no longer fills the viewport (dead space above the headline and a 242 px band
   under the price line); its top and the gaps between home sections come from the section rhythm below, so the strip, the first proof,
   now starts inside the first screen at 1440, as on four of the six references */
/* CP-HERO (site-v1/COMPONENTS.csv, 2026-10-17): the hero is one responsive screen again (RV0-01, the owner overrules H-08's strip
   inside the first 900 px). It fills the viewport under the header, its content sits in the middle, and the next section starts at
   the fold. Three type sizes only (RV0-02): the headline, the copy (18 at every width; each panel opens on a bold line), and 14 for the
   switch and the price label. The action is a primary button with the price beside it (RV0-04). */
.hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--nv-h)); }
main > .hero.sec:first-child { padding-block: var(--s-5); }
.hero h1 { margin-bottom: var(--s-4); font-size: var(--fs-60); line-height: var(--lh-60); }
.hero .t-lede { max-width: calc(8 * var(--col) + 7 * var(--gutter)); font-size: var(--fs-18); line-height: var(--lh-18); }
.hero-copy strong { color: var(--sx-ink); font-weight: var(--w-semibold); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.hero-act .btn { font-size: var(--fs-18); line-height: var(--lh-18); }
.hero-price { margin: 0; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink); font-weight: var(--w-semibold); }
.hero-price .fact-label { display: inline; margin: 0 0 0 var(--s-1); font-size: var(--fs-14); font-weight: var(--w-regular); }
/* CP-HERO H2 at the small sizes: three switch buttons on one row at 375, the price label under the button, and on short screens
   (iPhone SE, 667 px tall) tighter spacing and leading, so the whole hero still fits without scrolling. Sizes do not change. */
@media (max-width: 420px) { .hero-act { row-gap: var(--s-1); } .hero-price { font-size: var(--fs-14); line-height: var(--lh-14); } }
@media (max-height: 700px) { main > .hero.sec:first-child { padding-block: var(--s-3); } .hero h1 { margin-bottom: var(--s-2); } .hero .t-lede { line-height: 24px; } .hero-act { margin-top: var(--s-3); } }

/* S-02 shells: each number in its own shell (owner review, 2026-10-16). ORDER-010 row 3: the strip left home; the shells carry
   CP-HOME-PROOF's figures */
.shell { display: flex; flex-direction: column; gap: var(--s-1); height: 100%; padding: var(--s-4); border: var(--hair) solid var(--sx-line); border-radius: var(--radius-m); background: var(--sx-white); color: var(--sx-ink); }
main a.shell:hover, main a.shell:focus-visible { text-decoration: none; border-color: var(--sx-ink); }
/* H-09: on hover or keyboard focus a shell resolves: its border and its window and source line darken to ink. The line is never hidden
   at rest, on any device or with JS off: it is the number's label (ORDER-007), and C5 holds the 8,672 label for the owner (HB-009). */
.shell { transition: border-color var(--sx-micro) var(--sx-ease); }
.shell .fact-label { transition: color var(--sx-micro) var(--sx-ease); }
main a.shell:hover .fact-label, main a.shell:focus-visible .fact-label { color: var(--sx-ink); }
@media (prefers-reduced-motion: reduce) { .shell, .shell .fact-label { transition: none; } }
.shell-fig { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--w-semibold); letter-spacing: var(--track-head); color: var(--sx-ink); font-variant-numeric: tabular-nums lining-nums; }
/* ORDER-008 row 2: each shell figure starts with a capital ("Over 189 million cells", "Nearly two years"); the ledger values stay as they are */
.shell-fig::first-letter { text-transform: uppercase; }
.shell-what { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink-2); }
.shell .fact-label { margin-top: auto; padding-top: var(--s-2); }
.head-dot { color: var(--sx-mint); }

.answers-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2) var(--gutter); }
.answers-list a { display: inline-flex; align-items: center; min-height: var(--s-44); font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink-2); }

/* H-07 (ORDER-008 row 4, owner 2026-10-16): the button keeps "Meet Shannon" and gets room: at least --s-4 below the closing line */
.close .close-go { margin-top: var(--s-4); }

@media (max-width: 760px) {
  .hero h1 { font-size: var(--fs-36); line-height: var(--lh-36); }
  .answers-list { grid-template-columns: 1fr; gap: 0; }
}

/* page heads (pricing, results, answers): title and lede, no narration */
.page-head { padding-top: var(--s-6); }
.page-head .t-lede { max-width: calc(8 * var(--col) + 7 * var(--gutter)); }

/* P-01: three plans, one rule between them; the number leads, the unit follows */
.plan-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); border-top: var(--hair) solid var(--sx-line); padding-top: var(--s-4); }
.price-plan { display: flex; flex-direction: column; }
.price-plan h2 { margin-bottom: var(--s-2); }
.price-plan .t-body { margin-bottom: var(--s-4); }
.plan-price { margin: 0; }
.plan-price [data-claim] { font-size: var(--fs-48); line-height: var(--lh-48); font-weight: var(--w-bold); letter-spacing: var(--track-head); font-variant-numeric: tabular-nums lining-nums; color: var(--sx-ink); }
.plan-unit { display: block; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink-2); }
.plan-line { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink-2); margin-top: var(--s-3); }
.plan-go { margin-top: auto; padding-top: var(--s-4); }
.plans-note { margin-top: var(--s-4); }


/* RS-01: the story, one step a section; each figure under its own id, so the home strip lands on it */

.story-step .t-label { margin-bottom: var(--s-2); }
.story-step h2 { margin-bottom: var(--s-3); }
.story-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gutter); margin-top: var(--s-4); }
.story-figs li, .story-figs-one { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink-2); scroll-margin-top: var(--s-6); }
.story-figs-one { margin-top: var(--s-4); }
.story-fig { display: block; font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--w-semibold); color: var(--sx-ink); font-variant-numeric: tabular-nums lining-nums; }
.story-figs li:target, .story-figs-one:target { outline: var(--hair) solid var(--sx-line); outline-offset: var(--s-2); }
.story-quote { margin: var(--s-4) 0 0; max-width: calc(7 * var(--col) + 6 * var(--gutter)); }
.story-quote blockquote { margin: 0; font-size: var(--fs-21); line-height: var(--lh-21); color: var(--sx-ink); }
.story-quote figcaption { margin-top: var(--s-1); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); }

@media (max-width: 760px) {
  .plan-list { grid-template-columns: 1fr; gap: var(--s-5); }
  .story-figs { grid-template-columns: 1fr; }
}
.story-go { margin-top: var(--s-4); }

/* section rules sit inside the text measure, like the plan and strip rules */
.story-step, .guarantee { padding-top: 0; }
.story-step::before, .guarantee::before { content: ""; display: block; border-top: var(--hair) solid var(--sx-line); margin-bottom: var(--s-5); }
.page-head h1, .guarantee h2 { margin-bottom: var(--s-3); }
.price-plan .t-body { min-height: calc(2 * var(--lh-18)); }
main .t-body a { font-weight: var(--w-semibold); color: var(--sx-ink); }
@media (max-width: 760px) { .price-plan .t-body { min-height: 0; } }

/* A-01..A-16: an answer page. The direct answer first, as the lede; then how it works, the facts, what we do not do yet */
.answer-lede .t-lede { max-width: calc(8 * var(--col) + 7 * var(--gutter)); color: var(--sx-ink); }
.answer-lede .t-lede + .t-lede { margin-top: var(--s-3); }
.answer-how, .answer-facts, .answer-notyet { padding-top: 0; }
.answer-how::before, .answer-facts::before, .answer-notyet::before { content: ""; display: block; border-top: var(--hair) solid var(--sx-line); margin-bottom: var(--s-5); }
.answer-how h2, .answer-facts h2, .answer-notyet h2 { margin-bottom: var(--s-3); }
.answer-how .t-body + .t-body { margin-top: var(--s-3); }
.answer-list { max-width: calc(7 * var(--col) + 6 * var(--gutter)); }
.answer-list li { position: relative; padding-left: var(--s-3); font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink-2); }
.answer-list li + li { margin-top: var(--s-2); }
.answer-list li::before { content: ""; position: absolute; left: 0; top: calc(var(--lh-18) / 2); width: var(--s-1); border-top: var(--hair) solid var(--sx-stone); }
.answer-labels { margin-top: var(--s-3); }
.answer-labels .fact-label { display: inline; margin-right: var(--s-3); }
.page-head .t-label a { color: var(--sx-stone); }
.page-head + .answer-lede { padding-top: 0; }

/* MS-01..MS-04: an audience page. The top question answered in the head (first screen), three points, then the way on */
.aud-head .t-label { margin-bottom: var(--s-2); }
.aud-head h1 { max-width: calc(9 * var(--col) + 8 * var(--gutter)); }
.aud-price { font-size: var(--fs-21); line-height: var(--lh-21); font-weight: var(--w-semibold); color: var(--sx-ink); margin-top: var(--s-4); }
.aud-go { margin-top: var(--s-4); }
.aud-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); border-top: var(--hair) solid var(--sx-line); padding-top: var(--s-4); }
.aud-list h2 { margin-bottom: var(--s-2); }
.aud-more { padding-top: 0; }
@media (max-width: 760px) {
  .aud-price { font-size: var(--fs-18); line-height: var(--lh-18); }
  .aud-list { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* T-01: one decision. Native <details> are the hidden states (one move's reason at a time is the reader's choice); the
   two odds views are both in the markup, and the module only switches which one shows. Without JS both show. */
.decision { padding-top: 0; }
.decision::before { content: ""; display: block; border-top: var(--hair) solid var(--sx-line); margin-bottom: var(--s-5); }
.decision h2 { margin-bottom: var(--s-3); }
.decision-view { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border: var(--hair) solid var(--sx-line); border-radius: var(--radius-pill); margin: var(--s-4) 0; }
.decision-tab { min-height: var(--s-44); padding: 0 var(--s-20); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--sx-ink-2); font: inherit; font-size: var(--fs-14); line-height: var(--lh-14); cursor: pointer; }
.decision-tab[aria-pressed="true"] { background: var(--sx-deep); color: var(--sx-cream); }
.decision-moves { list-style: none; margin: 0 0 var(--s-4); padding: 0; max-width: calc(9 * var(--col) + 8 * var(--gutter)); border-top: var(--hair) solid var(--sx-line); }
.decision-moves li { border-bottom: var(--hair) solid var(--sx-line); }
.decision-moves summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name odds" "bar bar"; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; cursor: pointer; list-style: none; min-height: var(--s-44); }
.decision-moves summary::-webkit-details-marker { display: none; }
.move-name { grid-area: name; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink); font-weight: var(--w-semibold); }
.move-odds { grid-area: odds; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--sx-ink); font-variant-numeric: tabular-nums lining-nums; }
.move-odds .odds-later::before { content: " · "; color: var(--sx-stone); }
.move-bar { grid-area: bar; display: grid; gap: var(--s-1); }
.move-bar span { display: block; height: var(--s-1); width: calc(var(--w) * 1%); background: var(--sx-ink); border-radius: var(--radius-pill); }
.move-bar .bar-later { background: var(--sx-stone); }
.decision-moves details p { padding-bottom: var(--s-3); }
.decision-view { display: none; }
[data-view] .decision-view { display: inline-flex; }
.decision-legend { margin: var(--s-4) 0; color: var(--sx-ink-2); }
[data-view] .decision-legend { display: none; }
[data-view="now"] .odds-later, [data-view="now"] .bar-later, [data-view="later"] .odds-now, [data-view="later"] .bar-now { display: none; }
[data-view] .move-odds .odds-later::before { content: none; }
[data-view] .move-bar .bar-later { background: var(--sx-ink); }
.field-notes .issue + .issue { margin-top: var(--s-5); }


/* H-01 (ORDER-011 row 5): the audience switch's styles (aud-switch, aud-btn, aud-panel) are removed under CP-HERO's row; v2 has no switch */

/* ORDER-010 row 3: the obvious questions (H-06, H-09) left home; their answers stay at /answers/. Kept site-wide: */
:root { interpolate-size: allow-keywords; }


/* H-08 (ORDER-009 row 2): the home page's section rhythm, applied through classes, never per section. Every home section is .sec;
   a ruled one (.sec--ruled) carries its hairline in the middle of the same gap. The gap is ink to ink: the last child's own margin is
   taken out, so the token is the gap the reader sees. Tokens: --sec-top and --sec-gap (tokens.css). */
main > .sec { padding-block: 0; margin-block: 0; }
main > .sec:first-child { padding-top: var(--sec-top); }
main > .sec + .sec { margin-top: var(--sec-gap); }
main > .sec + .sec--ruled { margin-top: calc(var(--sec-gap) / 2); padding-top: calc(var(--sec-gap) / 2); border-top: var(--hair) solid var(--sx-line); }
main > .sec:last-child { padding-bottom: max(0px, calc(var(--sec-gap) - var(--s-6) - var(--s-5))); }   /* the footer brings --s-6 + --s-5 of its own (F-01) */
main > .sec > :last-child { margin-bottom: 0; }


/* L-01 (ORDER-009 row 5; ORDER-010 row 3: every text link on home): a text link reads as a link without an underline in body text. The nav's link treatment: ink,
   semibold, a pill that fills on hover and focus (6% ink, as .nv-top a), a 44 px target, and an arrow that says where it goes (decorative
   for assistive tech: alt text ""). The arrow steps --s-1 on hover over --sx-micro; still under prefers-reduced-motion. */
.go { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--s-44); padding: 0 var(--s-3); margin-left: calc(-1 * var(--s-3)); border-radius: var(--radius-pill); font-size: var(--fs-18); line-height: var(--lh-18); font-weight: var(--w-semibold); color: var(--sx-ink); transition: background-color var(--sx-micro) var(--sx-ease); }
.go::after { content: "\2192" / ""; transition: transform var(--sx-micro) var(--sx-ease); }
main a.go:hover, main a.go:focus-visible { text-decoration: none; background: color-mix(in srgb, var(--sx-ink) 6%, transparent); }
main a.go:hover::after, main a.go:focus-visible::after { transform: translateX(var(--s-1)); }
@media (prefers-reduced-motion: reduce) { .go, .go::after { transition: none; } }

/* ORDER-010 row 3: the home sections after the hero (site-v1/COMPONENTS.csv CP-HOME-*), one class each, on the H-08 rhythm. CP-HOME-PROOF
   is .evidence: .proof is already the system layer's figure row (system.css).
   CP-HOME-DEMO is held in a <template> between HOW and GET; a template renders nothing, so the section after it keeps the rhythm. */
main > .sec + template + .sec { margin-top: var(--sec-gap); }
main > .sec + template + .sec--ruled { margin-top: calc(var(--sec-gap) / 2); padding-top: calc(var(--sec-gap) / 2); border-top: var(--hair) solid var(--sx-line); }
.problem .t-lede, .problem-turn { max-width: calc(8 * var(--col) + 7 * var(--gutter)); }
.problem .t-h2, .how .t-h2, .get .t-h2, .evidence .t-h2 { margin-bottom: var(--s-4); }
.problem-turn { margin: var(--s-5) 0 0; font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--w-semibold); letter-spacing: var(--track-head); color: var(--sx-ink); }
.sec-go { margin: var(--s-4) 0 0; }
/* the three steps and the three cards: one row of three, each under an ink rule */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); list-style: none; margin: 0; padding: 0; }
.trio > li { display: flex; flex-direction: column; border-top: var(--hair) solid var(--sx-ink); padding-top: var(--s-3); }
.trio-t { font-size: var(--fs-21); line-height: var(--lh-21); font-weight: var(--w-semibold); color: var(--sx-ink); margin: 0 0 var(--s-2); }
.trio .t-body { margin: 0; }
.trio-go { margin: auto 0 0; padding-top: var(--s-3); }
.evidence-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.pay .t-h2 { max-width: calc(9 * var(--col) + 8 * var(--gutter)); }
@media (max-width: 760px) {
  .trio, .evidence-list { grid-template-columns: 1fr; row-gap: var(--s-4); }
  .problem-turn { font-size: var(--fs-21); line-height: var(--lh-21); }
}

/* ORDER-010 row 6: a section of an inner page built from its brief, under the same rule as .decision and .answer-how */
.part { padding-top: 0; }
.part::before { content: ""; display: block; border-top: var(--hair) solid var(--sx-line); margin-bottom: var(--s-5); }
.part h2 { margin-bottom: var(--s-3); }
.part .t-body { max-width: calc(8 * var(--col) + 7 * var(--gutter)); }
.part .t-body + .t-body { margin-top: var(--s-3); }
.tech-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); list-style: none; margin: 0; padding: 0; }
.decision .t-body + .t-body { margin-top: var(--s-3); }
.part .close-go { margin-top: var(--s-4); }
/* CP-PRICING-WORTH: the calculator (JS only) and its worked examples (always shown) */
.worth-calc { display: grid; gap: var(--s-3); max-width: calc(6 * var(--col) + 5 * var(--gutter)); margin: var(--s-4) 0; }
.worth-calc[hidden] { display: none; }
.worth-field { display: grid; gap: var(--s-1); margin: 0; }
.worth-field label { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--w-semibold); color: var(--sx-ink); }
.worth-field input { min-height: var(--s-44); padding: 0 var(--s-2); border: var(--hair) solid var(--sx-line); border-radius: var(--radius-m); background: var(--sx-white); color: var(--sx-ink); font: inherit; font-size: var(--fs-18); }
.worth-field input:focus-visible { outline: 2px solid var(--sx-mint-700); outline-offset: 2px; }
.worth-out { display: block; min-height: var(--lh-21); font-size: var(--fs-21); line-height: var(--lh-21); font-weight: var(--w-semibold); color: var(--sx-ink); }
.worth-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.worth-examples > li { border-top: var(--hair) solid var(--sx-ink); padding-top: var(--s-3); }
.worth-examples .t-body { margin: var(--s-1) 0 0; }
.example-fig { font-weight: var(--w-semibold); color: var(--sx-ink); font-variant-numeric: tabular-nums lining-nums; }
.right-list { margin: var(--s-3) 0; }
@media (max-width: 760px) { .worth-examples { grid-template-columns: 1fr; row-gap: var(--s-4); } }
.right-list { list-style: decimal; padding-left: var(--s-4); }
.right-list li { padding-left: var(--s-1); }
.right-list li::before { content: none; }
/* T-01 (ORDER-011 row 2): the "Answers" breadcrumb at least 24 x 24 px (WCAG 2.2 SC 2.5.8, the AA floor axe does not read) */
.page-head .t-label a { display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; }
/* ORDER-013 row 1: the consent bar (only built when an analytics id is set). Fixed at the foot of the screen, Accept and Reject in one style,
   equal weight, nothing pre-chosen; still, with no entrance motion */
.consent { position: fixed; left: var(--s-2); right: var(--s-2); bottom: var(--s-2); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); max-width: 880px; margin: 0 auto; padding: var(--s-3) var(--s-4); background: var(--sx-white); border: var(--hair) solid var(--sx-line); border-radius: var(--radius-m); box-shadow: 0 8px 24px color-mix(in srgb, var(--sx-ink) 12%, transparent); }
.consent[hidden] { display: none; }
.consent-text { flex: 1 1 320px; margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); }
.consent-text a { color: var(--sx-ink); font-weight: var(--w-semibold); }
.consent-act { display: flex; gap: var(--s-2); }
.consent-btn { min-height: var(--s-44); min-width: 96px; padding: 0 var(--s-20); border: var(--hair) solid var(--sx-ink); border-radius: var(--radius-pill); background: var(--sx-white); color: var(--sx-ink); font: inherit; font-size: var(--fs-14); font-weight: var(--w-semibold); cursor: pointer; }
.consent-btn:hover, .consent-btn:focus-visible { background: color-mix(in srgb, var(--sx-ink) 6%, transparent); }
.consent-btn:focus-visible { outline: 2px solid var(--sx-mint-700); outline-offset: 2px; }

/* nav/nav.css */
/* S-01 navigation. The menu collapses to the Menu button below 1001 px: between 761 and 1000 px the full row wrapped and pushed the button off screen (owner review, 2026-10-16).  Rebuilt for site-v1 after the prototype's navigation (meetshannon-web PR #403, design/meetshannon-site:
   site.css "nav" and "the service" blocks; preferred by 4 of 9 D2 judges, EX-001 JUDGE-GATE-D2.md:36). Tokens from P0-03. */
.nv { position: sticky; top: 0; z-index: 20; background: var(--sx-paper); border-bottom: 1px solid var(--sx-line); }
.nv-bar { display: flex; align-items: center; gap: var(--s-4); min-height: 64px; }
.nv-brand { font-weight: 650; font-size: 19px; letter-spacing: -0.02em; color: var(--sx-ink); text-decoration: none; }
.nv-dot { color: var(--sx-mint); }
.nv-menu { display: none; }
.nv-panel { display: flex; align-items: center; gap: var(--s-4); flex: 1; }
.nv-links { margin-left: var(--s-2); }
.nv-top, .nv-sub { list-style: none; margin: 0; padding: 0; }
.nv-top { display: flex; align-items: center; gap: 2px; }
.nv-top a, .nv-grp-btn { font: inherit; white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--sx-ink-2); text-decoration: none; background: none; border: 0; padding: 8px 12px; border-radius: var(--radius-pill); cursor: pointer; }
.nv-top a:hover, .nv-grp-btn:hover, .nv-top a[aria-current="page"] { color: var(--sx-ink); background: color-mix(in srgb, var(--sx-ink) 6%, transparent); }
.nv-grp-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.nv-grp { position: relative; }
/* sub-lists: shown on hover, on keyboard focus (no JS needed), and when the disclosure button opens them */
.nv-sub { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; display: grid; gap: 2px; padding: var(--s-2); background: var(--sx-white); border: 1px solid var(--sx-line); border-radius: var(--radius-m); box-shadow: 0 24px 48px -24px rgba(11, 15, 13, .3); visibility: hidden; opacity: 0; transition: opacity var(--sx-exit) var(--sx-ease), visibility 0s linear var(--sx-exit); }
.nv-grp:hover .nv-sub, .nv-grp:focus-within .nv-sub, .nv-grp[data-open] .nv-sub { visibility: visible; opacity: 1; transition-delay: 0s; }
.nv-sub a { display: block; border-radius: var(--radius-s); }
.nv-cta { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--sx-white); background: var(--sx-ink); text-decoration: none; padding: 9px 18px; border-radius: var(--radius-pill); white-space: nowrap; }
.nv-cta:hover { background: var(--sx-ink-2); }

@media (max-width: 1000px) {
  /* without JS the whole list shows in the header, so it scrolls away instead of covering the page */
  .nv:not([data-js]) { position: static; }
  .nv-bar { flex-wrap: wrap; gap: var(--s-2); }
  .nv-panel { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--s-2); padding-bottom: var(--s-4); }
  .nv-links { margin: 0; }
  .nv-top { flex-direction: column; align-items: stretch; }
  .nv-top a, .nv-grp-btn { display: block; width: 100%; text-align: left; font-size: 17px; padding: 10px 0; border-radius: 0; }
  .nv-grp-btn { cursor: default; color: var(--sx-ink); font-weight: 600; }
  .nv-grp-btn::after { display: none; }
  .nv-sub { position: static; visibility: visible; opacity: 1; min-width: 0; padding: 0 0 var(--s-2) var(--s-4); background: none; border: 0; box-shadow: none; transition: none; }
  .nv-cta { margin: var(--s-2) 0 0; text-align: center; padding: 12px 18px; }
  /* with JS: the bar shows the brand and the menu button; the panel opens below it */
  .nv[data-js] .nv-menu { display: inline-grid; place-items: center; margin-left: auto; min-width: 44px; min-height: 44px; padding: 0 14px; font: inherit; font-size: 15px; font-weight: 500; color: var(--sx-ink); background: var(--sx-white); border: 1px solid var(--sx-line); border-radius: var(--radius-pill); cursor: pointer; }
  .nv[data-js] .nv-panel { display: none; }
  .nv[data-js][data-open] .nv-panel { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .nv-sub { transition: none; } }
/* ORDER-010 row 6, entry ruling 4: Log in, a text link left of Meet Shannon (the pattern on 16 of 16 reference sites, research/pricing-entry-2026-10-19) */
.nv-login { margin-left: auto; margin-right: var(--s-3); font-size: 15px; font-weight: 500; color: var(--sx-ink); text-decoration: none; padding: 9px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.nv-login:hover, .nv-login:focus-visible { background: color-mix(in srgb, var(--sx-ink) 6%, transparent); }
.nv-login + .nv-cta { margin-left: 0; }
@media (max-width: 1000px) { .nv-login { margin: var(--s-2) 0 0; padding: 10px 0; font-size: 17px; border-radius: 0; } .nv-login + .nv-cta { margin-top: var(--s-2); } }

/* T-01 (ORDER-011 row 2): every header control at least 44 px tall (Command OB-05's 44; WCAG 2.2 SC 2.5.8's floor is 24), inside the 64 px band */
.nv-brand, .nv-top > li > a, .nv-grp-btn, .nv-login, .nv-cta { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
.nv-top > li > a, .nv-grp-btn { padding-block: 0; }
.nv-sub a { min-height: 44px; display: flex; align-items: center; }
@media (max-width: 1000px) { .nv-top a, .nv-grp-btn { display: flex; min-height: 44px; padding-block: 0; } .nv-menu { min-height: 44px; } }

/* footer/footer.css */
/* F-01 · the footer (ORDER-008 row 6). Tokens only (P0-03). Measured against the R0-01 reference footers: link groups by section,
   a legal and company line under them; no newsletter or social row until the owner supplies the profiles. */
.ft { margin-top: var(--s-6); border-top: var(--hair) solid var(--sx-line); background: var(--sx-paper); }
.ft-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-4) var(--gutter); padding-block: var(--s-5); }
.ft-mark { font-size: var(--fs-21); line-height: var(--lh-21); font-weight: var(--w-semibold); letter-spacing: var(--track-head); color: var(--sx-ink); text-decoration: none; align-self: start; }
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--gutter); }
.ft-h { margin: 0 0 var(--s-3); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--w-semibold); color: var(--sx-ink); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.ft a { color: var(--sx-ink-2); text-decoration: none; }
.ft ul a { display: inline-flex; align-items: center; min-height: var(--s-24); font-size: var(--fs-14); line-height: var(--lh-14); }
.ft a:hover, .ft a:focus-visible { color: var(--sx-ink); text-decoration: underline; }
.ft-legal { grid-column: 1 / -1; margin: 0; padding-top: var(--s-4); border-top: var(--hair) solid var(--sx-line); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); }
@media (max-width: 1000px) { .ft-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* T-01 (ORDER-011 row 2): footer links at 44 px tall, each its own row, so the target is the row (was 24 px with a 4 px gap) */
.ft ul { gap: 0; }
.ft ul a { min-height: var(--s-44); }
.ft-mark { display: inline-flex; align-items: center; min-height: var(--s-44); }
/* F-01 (ORDER-011 row 3): the endorsement under the wordmark, small (docs/brand §1: "Shannon, by FBED Labs" in the footer) */
.ft-brand { align-self: start; }
.ft-endorse { margin: var(--s-1) 0 0; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-stone); }

/* ORDER-013 row 1: "Cookie settings" reopens the consent bar; it looks like the footer's links */
.ft-btn { display: inline-flex; align-items: center; min-height: var(--s-44); padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--sx-ink-2); cursor: pointer; }
.ft-btn:hover, .ft-btn:focus-visible { color: var(--sx-ink); text-decoration: underline; }