/* JFDS marketing site — dark-only.
   Token values mirror ui/theme/tokens.ts themes.dark (manual mirror; spec §10),
   with deliberate spec-approved deviations (spec §4): --bg/--bg-alt/--surface are
   darker than the app theme, and --teal-deep is the light theme's brandDeep
   (#15807A) because it strokes the ✓ on the LIGHT chip (--chip), not on a dark bg.

   Layout: mobile-first single column; from 1000px the body beats switch to an
   editorial two-column grid (label rail + prose) and the hero goes text-left /
   ring-right, so desktop uses the width instead of stranding a 640px column. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/figtree-var.woff2') format('woff2');
}

:root {
  --bg: #0B0F0E;
  --bg-alt: #0E1413;
  --surface: #121A18;
  --ink: #ECF2F1;
  --body: #9FB0AD;
  --muted: #7F9491;
  --dim: #71837F; /* AA 4.8:1 on --bg (was #5C6B68 @ 3.45:1) */
  --hairline: #223029;
  --hairline-soft: #18211F;
  --teal: #2FC4BB;
  --teal-deep: #15807A;
  --wash: #102A27;
  --lap: #5FD3CB;
  --chip: #EAF6F4;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --pp: #F4B845;        /* push/pull accent (marketing graphic only) */
  --pp-rgb: 244, 184, 69;
  --pp-deep: #D98A1F;
  --ex-cell-off: #16201d;
  --ex-brick-label: #06302B;

  /* layout */
  --page: 1120px;   /* outer content width on desktop */
  --rail: 200px;    /* editorial label column */
  --measure: 600px; /* readable prose column */
  --gutter: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* NB: no global `scroll-behavior: smooth` — nothing on the page needs smooth anchor scrolling,
   and the explainer driver reads scroll position every frame; keep the scroll native and honest.
   (The scroll is never hijacked anywhere: the old mandatory-snap layer was removed 2026-07-03
   after wheel measurements showed it rubber-banding ticks and eating slow scrolling.) */

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- layout primitives ---------- */

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

.beat { padding: 60px 0; border-bottom: 1px solid var(--hairline-soft); }
.beat-body > * + * { margin-top: 16px; }

/* Editorial grid: label above prose (mobile) → label rail beside prose (desktop) */
.beat-grid { display: grid; }
.beat-grid .overline { margin-bottom: 14px; }

/* ---------- type ---------- */

h1 {
  font-family: var(--font-display); font-weight: 800;
  /* 11.5vw ceiling keeps the longest word ("SOMETHING.") inside the column at
     every phone width even in the font-display:swap fallback (system-ui caps
     run ~0.70em/char vs Bricolage's ~0.46). */
  font-size: clamp(34px, 11.5vw, 84px); line-height: 0.95;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--teal);
}
h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 7vw, 34px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--ink);
}
h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
strong { color: var(--ink); font-weight: 600; }
em { color: var(--teal); font-style: normal; }
a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--lap); }

.lede {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 5vw, 27px); line-height: 1.22;
  letter-spacing: -0.01em; color: var(--ink);
}
.lede em { color: var(--teal); }

.label {
  font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.overline {
  display: block; font-weight: 600; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal);
  /* pinned: the global h2 rule would otherwise leak font-display + 1.1 line-height into h2.overline */
  font-family: var(--font-body); line-height: 1.6;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- topbar ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; }
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  color: var(--teal); letter-spacing: 0.02em; text-decoration: none;
}
.topbar-link { color: var(--muted); text-decoration: none; transition: color .2s ease; }
.topbar-link:hover { color: var(--teal); }
.topbar-links { display: flex; align-items: center; gap: 20px; }
/* three links + wordmark need ~361px at full tracking: tighten on the narrowest
   phones (Galaxy-class 360px) so no topbar label ever wraps to two lines */
@media (max-width: 399px) {
  .topbar-links { gap: 12px; }
  .topbar-links .label { letter-spacing: 0.12em; }
}

/* ---------- hero ---------- */
.hero { text-align: center; border-bottom: 1px solid var(--hairline-soft); padding-bottom: 52px; }
.hero-grid { display: flex; flex-direction: column; align-items: center; margin-top: 44px; }
/* "almost equal" balance (2026-07-06 hero round, Peter's pick): the kicker is
   the same shout as the headline at ~65% scale, stepped down in muted grey so
   the crescendo still lands on DO SOMETHING. */
.kicker {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(23px, 7.5vw, 55px); line-height: 1.02;
  letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.hero-action {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 5.5vw, 26px); letter-spacing: -0.01em;
  color: var(--ink); margin-top: 16px;
}
.hero-sub { font-size: 15px; color: var(--body); margin-top: 8px; max-width: 30ch; }

.ring { position: relative; width: 180px; margin: 32px auto 28px; }
.ring svg { display: block; width: 100%; height: auto; }
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.ring-center .num {
  font-family: var(--font-display); font-weight: 700; font-size: 46px;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1;
}

.strip {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 3.8vw, 15px);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 12px 0; margin-top: 4px;
}
.strip .dot { color: var(--dim); }
.strip .rule { white-space: nowrap; }
.scroll-cue { display: block; margin-top: 26px; }

.protocol-link { margin-top: 24px; font-size: 14px; }

/* ---------- footer ---------- */
footer { padding: 40px 0 56px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
footer .links { color: var(--dim); font-size: 14px; }
footer .links a { color: var(--muted); }

/* ---------- protocol reference page ---------- */
.doc { max-width: 760px; }
.doc h2 { margin-top: 56px; }
.doc h2 + p, .doc blockquote + p { margin-top: 16px; }
.doc h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 7vw, 34px); line-height: 1.1;
  letter-spacing: -0.02em; text-transform: none; color: var(--ink);
}
.doc h1 + p { margin-top: 16px; }
.doc p + p { margin-top: 14px; }
.doc ul { margin: 16px 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.table-scroll { overflow-x: auto; margin-top: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border: 1px solid var(--hairline); padding: 10px 12px; text-align: left; vertical-align: top; }
th { font-family: var(--font-display); color: var(--ink); font-weight: 700; background: var(--surface); white-space: nowrap; }
blockquote {
  margin-top: 24px; border-left: 3px solid var(--teal); padding: 4px 0 4px 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--ink); line-height: 1.3;
}

/* ---------- protocol page: hero, contents, chapters ----------
   Quote-mapped structure (2026-07-11): the whole-system quote is the page monument
   and Part I's four chapter h2s are its clauses verbatim (test-enforced). One page,
   one scroll; the contents rail is a reading aid, never a pager. */
.p-hero { padding-top: 44px; }
.p-monument {
  margin-top: 26px; padding: 18px 0 18px 20px; border-left: 3px solid var(--teal);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(21px, 5.2vw, 27px); line-height: 1.35; color: var(--ink);
  letter-spacing: -0.01em;
}
.p-callout {
  margin-top: 16px; background: var(--wash); border: 1px solid rgba(47, 196, 187, .28);
  border-radius: 12px; padding: 13px 16px; color: var(--ink);
}

.p-toc {
  margin-top: 40px; background: var(--bg-alt); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 20px 22px 22px;
}
.p-part { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); font-weight: 600; }
.p-part + ol { margin-top: 10px; }
.p-toc ol { list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.p-toc ol:last-child { margin-bottom: 0; }
.p-toc a { display: flex; gap: 11px; align-items: baseline;
  color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.35; }
.p-toc a b { font-family: var(--font-display); font-weight: 700; font-size: 12px;
  color: var(--dim); min-width: 20px; }
.p-toc a:hover span { color: var(--teal); }
.p-toc a.is-here span { color: var(--ink); }
.p-toc a.is-here b { color: var(--teal); }

.chap { margin-top: 56px; }
.chap + .chap { padding-top: 48px; border-top: 1px solid var(--hairline-soft); }
.chap-kick { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); font-weight: 600; margin-bottom: 10px; }
.chap-kick b { color: var(--teal); font-weight: 700; }
.chap h2 { margin-top: 0; }
.chap h2 + p { margin-top: 16px; }
.chap h3 { margin-top: 30px; }
.chap h3 + p { margin-top: 10px; }

/* hold conversions (chapter 03) */
.p-holds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.p-hold { display: flex; flex-direction: column; align-items: center; min-width: 68px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 11px 14px 9px; }
.p-hold b { font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--ink); }
.p-hold i { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.p-hold.is-key { background: var(--wash); border-color: rgba(47, 196, 187, .35); }
.p-hold.is-key b { color: var(--teal); }

/* ---------- movement menu: pattern cards + interactive rails ----------
   Each pattern card keeps the v2.1 spectrum language (accent glyph + name, amber
   push/pull, teal lower/core). The static .rail-src list (name + one-line
   description per rung) is the source of truth and the no-JS/print fallback; the
   inline driver enhances it into a rail: stops on an easier→harder gradient line,
   the everyday anchor as the large filled stop, and a stepper card that walks the
   ladder. Selection is a reading aid, never state. */
.p-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px 12px;
  margin-top: 18px; font-size: 13px; color: var(--muted); line-height: 1.5;
}
.p-legend .legend-chip {
  font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bg); background: var(--teal);
  border-radius: 999px; padding: 4px 11px;
}
.p-legend em { color: var(--teal); font-style: normal; font-weight: 600; white-space: nowrap; }

.patterns { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }

.pattern {
  --accent: var(--teal); --accent-rgb: 47, 196, 187;
  position: relative; overflow: hidden;
  background: var(--bg-alt); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 18px 18px 16px;
}
.pattern.is-pp { --accent: var(--pp); --accent-rgb: var(--pp-rgb); }
/* a whisper of accent ramping left→right echoes the easier→harder reading */
.pattern::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, transparent 38%, rgba(var(--accent-rgb), .05));
}
.pattern > * { position: relative; z-index: 1; }

.pat-head { display: flex; align-items: center; gap: 11px; }
.pat-glyph { width: 26px; height: 26px; flex: none; color: var(--accent); }
.pat-glyph line, .pat-glyph path { fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
.pat-glyph circle.dot { fill: currentColor; stroke: none; }
.pat-name { font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; color: var(--accent); margin: 0; }
.pat-job { margin-left: auto; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); text-align: right; }

.pat-sublab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-top: 18px; font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink); }
.pat-flag { font-family: var(--font-body); font-weight: 600; font-size: 10.5px;
  letter-spacing: .03em; color: var(--accent); }

.pat-note { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pat-note strong { color: var(--body); }

/* the static fallback list (also the print + no-JS rendering) */
.rail-src { list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; }
.rail-src li b { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.rail-src li span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.rail-src li.anchor b { color: var(--accent); }
.rail-src li.anchor b::after { content: " · anchor"; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; }
/* the driver adds .is-enhanced per list, only after its rail is built — a JS
   failure can never hide unreplaced content */
.rail-src.is-enhanced { display: none; }

/* the enhanced rail */
.rail { margin-top: 16px; }
.rl-axis { position: relative; display: flex; justify-content: space-between;
  padding-bottom: 11px; }
.rl-cap { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); }
.rl-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .22), var(--accent)); }
.rl-stops { display: flex; justify-content: space-between; align-items: center;
  margin-top: -8px; height: 18px; }
.rl-stopc { position: relative; display: flex; justify-content: center; width: 14px; }
.rl-stop { position: relative; width: 11px; height: 11px; flex: none; padding: 0;
  border-radius: 50%; background: var(--ex-cell-off); border: 1.5px solid var(--muted);
  cursor: pointer; transition: transform .15s var(--ease); }
.rl-stop::before { content: ""; position: absolute; inset: -9px; } /* tap target */
.rl-stop:hover { transform: scale(1.25); }
.rl-stop:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.rl-stop.is-anchor { width: 17px; height: 17px; background: var(--accent);
  border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }
.rl-stop.is-on { background: var(--chip); border-color: var(--chip); }
.rl-stop.is-anchor.is-on { background: var(--accent); border-color: var(--chip); }
.rl-lbl { display: none; }

.rl-card { display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 13px 14px; margin-top: 16px; }
.rl-step { width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid var(--hairline); background: none; color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s; }
.rl-step:hover { color: var(--teal); border-color: var(--teal); }
.rl-step:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rl-mid { flex: 1; min-width: 0; }
.rl-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.rl-tag { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); border-radius: 999px;
  padding: 2px 8px; margin-left: 8px; vertical-align: 2px; }
.rl-desc { font-size: 13px; line-height: 1.5; color: var(--body); margin-top: 3px;
  min-height: 2.9em; }
.rl-pos { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-top: 7px; }

/* sessions (chapter 06) */
.p-sessions li { line-height: 1.55; }

/* desktop: contents becomes a sticky reading rail; rail stops grow their labels */
@media (min-width: 1000px) {
  .proto { max-width: 960px; }
  .p-hero { max-width: 720px; }
  .p-body { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: 56px; align-items: start; }
  .p-toc { position: sticky; top: 36px; margin-top: 64px;
    background: none; border: none; padding: 0; }
  .p-chapters { min-width: 0; }

  .rail { margin-top: 20px; }
  .rl-axis { padding-bottom: 30px; }   /* room for the upper label row */
  .rl-stops { height: 20px; }
  .rl-lbl { display: block; position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 10px; line-height: 1.2; color: var(--dim); white-space: nowrap; }
  .rl-stopc:nth-child(odd) .rl-lbl { bottom: 17px; }   /* alternate above/below the line */
  .rl-stopc:nth-child(even) .rl-lbl { top: 17px; }
  .rl-lbl.anch { color: var(--accent); font-weight: 700; }
  .rl-lbl.on { color: var(--ink); font-weight: 600; }
  .rl-stopc:first-child .rl-lbl { left: 0; transform: none; }
  .rl-stopc:last-child .rl-lbl { left: auto; right: 0; transform: none; }
  .rl-card { margin-top: 32px; }        /* clear the lower label row */
  .rl-desc { min-height: 2em; }
}

/* print: the protocol page is a keepable artifact — flat light rendering, rails
   as lists. Scoped to body.proto-page so the shared stylesheet never re-themes
   the landing page's print output. */
@media print {
  body.proto-page { background: #fff;
    --bg: #fff; --bg-alt: #fff; --surface: #fff; --ink: #000; --body: #222;
    --muted: #444; --dim: #555; --hairline: #bbb; --hairline-soft: #ddd;
    --teal: #0d6f69; --wash: #f1f6f5; --pp: #7a5200; --chip: #fff; }
  .proto-page .topbar, .proto-page .p-toc, .proto-page footer,
  .proto-page .rail, .proto-page .rl-card { display: none; }
  .proto-page .rail-src.is-enhanced { display: flex; }
  .proto-page .pattern::after { display: none; }
  .proto-page .chap { break-inside: avoid-page; }
}

/* ---------- explainer (scrollytelling: scroll-triggered autoplay) ---------- */

/* Progressive enhancement: the <head> adds .js when requestAnimationFrame exists. */

.explainer { position: relative; border-bottom: 1px solid var(--hairline-soft); }

/* Desktop-only scrolly: the graphic pins in a sticky pane while the 5 caption steps flow past.
   Scrolling stays native here too. Phones show the .ex-flow sections instead. */
.scrolly { position: relative; }
.scrolly-graphic { position: sticky; top: 0; height: 48vh; z-index: 2; background: var(--bg);
  display: flex; align-items: center; justify-content: center; }
.scrolly-steps { position: relative; z-index: 1; }
.step { min-height: 88vh; display: flex; align-items: center; padding: 0 var(--gutter); }
.step-cap { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 6vw, 26px);
  line-height: 1.3; color: var(--ink); max-width: 18ch; opacity: .3; transition: opacity .4s ease; }
.step.is-active .step-cap { opacity: 1; }
.step-cap em { color: var(--teal); font-style: normal; }
.step-cap b.pp { color: var(--pp); font-weight: 700; }
.step-sub { font-size: 17px; color: var(--muted); }
.step-sub, .step-ovl { opacity: .3; transition: opacity .4s ease; }
.step.is-active .step-sub, .step.is-active .step-ovl { opacity: 1; }
.step-sub em { color: var(--teal); font-style: normal; }

/* numbered chapter overlines: the beat boundary + "where am I" marker, both presentations.
   Never given an armed (is-armed) pre-state: the boundary must be visible while a beat
   approaches — the guard test scans rule selectors for the pairing. */
.ex-sec-ovl, .step-ovl { font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.ex-sec-ovl b, .step-ovl b { color: var(--teal); font-weight: 800; }

/* the persistent graphic */
.ex-vis { position: relative; width: 100%; max-width: 360px; margin: 0 auto; text-align: center; }

/* progress rail, anchored to the graphic pane */
.ex-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 4; }
.ex-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline); transition: background .3s ease; }
.ex-dots span.on { background: var(--teal); }

/* Desktop + JS + motion: two columns, graphic LEFT in a sticky pane, captions flow RIGHT.
   Scrolling is native at every width; the driver only reads position, never steers it. */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  html.js .ex-flow { display: none; }
  html.js .ex-exit { display: block; height: 10vh; }
  html.js .scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
    column-gap: 64px; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
  .scrolly-graphic { grid-column: 1; height: 100vh; background: transparent; }
  /* padding-bottom is runway inside the steps column so the sticky graphic stays pinned through the
     last (shorter) beat instead of lifting as the container's end nears. */
  .scrolly-steps { grid-column: 2; padding-bottom: 24vh; }
  .step { min-height: 85vh; padding: 0; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 14px; }
  .step:last-child { min-height: 70vh; }
  .step-cap { font-size: clamp(24px, 2.4vw, 32px); max-width: 20ch; }
}

/* rep counter */
.ex-counter { font-family: var(--font-display); font-weight: 800; line-height: 1; }
.ex-num { font-size: clamp(38px, 11vw, 54px); color: var(--teal); letter-spacing: -0.02em; }
.ex-of  { font-size: clamp(16px, 4.4vw, 21px); color: var(--dim); }
.ex-unit { display: block; font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* dose meter */
.dose-wrap { width: min(300px, 84vw); margin: 14px auto 0; }
.dose-labels { position: relative; height: 15px; font-family: var(--font-body); font-weight: 700;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.dose-lab { position: absolute; color: var(--dim); white-space: nowrap; transition: color .35s ease; }
.dose-lab.floor { left: 50%; transform: translateX(-50%); }
.dose-lab.std { right: 0; }
.dose-lab.reached { color: var(--teal); }
.dose-lab .tick { opacity: 0; transition: opacity .35s ease; }
.dose-lab.reached .tick { opacity: 1; }
.dose-meter { position: relative; height: 9px; border-radius: 999px; background: var(--ex-cell-off);
  border: 1px solid var(--hairline); overflow: hidden; margin-top: 4px; }
.dose-fill { height: 100%; background: linear-gradient(90deg, var(--teal-deep), var(--teal)); width: 0; transition: width .14s linear; }
.dose-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--bg); }

/* the blocks */
.blocks-area { position: relative; margin: 30px auto 0; padding-bottom: 44px; min-height: 300px;
  width: min(300px, 84vw); display: flex; align-items: center; justify-content: center; }
.ex-stack { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.ex-block { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px;
  width: min(300px, 84vw); padding: 7px; border-radius: 9px; background: var(--bg-alt); border: 1px solid var(--hairline); }
.ex-block[data-block="2"] { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.ex-block[data-block="2"].show { opacity: 1; transform: none; }
.cell { aspect-ratio: 1; border-radius: 2px; background: var(--ex-cell-off); transition: background .16s ease, box-shadow .16s ease; }
.cell.on { background: linear-gradient(180deg, var(--teal), var(--teal-deep)); }
.cell.pp.on { background: linear-gradient(180deg, var(--pp), var(--pp-deep)); }
.ex-block.ppflash .cell.pp.on { box-shadow: 0 0 0 2px rgba(var(--pp-rgb), .45); }

.ex-chip { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--chip); display: flex; align-items: center; justify-content: center; pointer-events: none;
  opacity: 0; transform: scale(.5); transition: opacity .25s ease, transform .25s ease; }
.ex-chip svg { width: 14px; height: 14px; }
.ex-chip.show { opacity: 1; transform: scale(1); }

.ex-ppline { position: absolute; left: 0; right: 0; bottom: -30px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.ex-ppline.show { opacity: 1; }
.ex-ppbar { width: 100%; height: 7px; border-bottom: 2px solid var(--pp); border-left: 2px solid var(--pp); border-right: 2px solid var(--pp); }
.ex-pptext { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.03em; color: var(--pp); }

/* movement glyph grid (what counts): 2x2 geometric glyphs */
.ex-menu { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.ex-menu.show { opacity: 1;
  background: radial-gradient(ellipse 96% 92% at 50% 50%, rgba(11, 15, 14, .86), rgba(11, 15, 14, .15)); }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(280px, 82vw); }
.mcell { display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg-alt); border: 1px solid var(--hairline); border-radius: 12px; padding: 13px 8px; }
.mglyph { width: 46px; height: 46px; color: var(--teal); }
.mcell.pp .mglyph { color: var(--pp); }
.mglyph path, .mglyph line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mglyph circle.dot { fill: currentColor; stroke: none; }
.mlab { text-align: center; }
.mlab b { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--teal); }
.mcell.pp .mlab b { color: var(--pp); }
.mlab span { display: block; font-size: 10.5px; color: var(--body); margin-top: 1px; }
.mscale { font-size: 11px; color: var(--muted); letter-spacing: .02em; max-width: min(300px, 84vw); text-align: center; }
.ex-menu-holds { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ex-menu-holds .timer, .ex-menu-holds .timer svg { width: 64px; height: 64px; }
.ex-menu-holds .timer-num { font-size: 16px; }

/* beats 4+5 each take the stage solo; the today-instruments (counter, meter, blocks)
   fade out beneath the week strip, then the close ring */
.ex-vis > .ex-counter, .ex-vis .dose-wrap, .ex-vis .ex-stack { transition: opacity .45s ease; }
.ex-vis.ring-active > .ex-counter, .ex-vis.week-active > .ex-counter,
.ex-vis.ring-active .dose-wrap,   .ex-vis.week-active .dose-wrap,
.ex-vis.ring-active .ex-stack,    .ex-vis.week-active .ex-stack { opacity: 0; }

/* the Standard beat: the week strip stands in for the second-block stack */
.ex-vis .ex-week { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.ex-vis .ex-week.show { opacity: 1; }
.ex-vis .ex-week .wk-col { transform: scaleY(0); transition: transform .5s var(--ease); }
.ex-vis .ex-week.show .wk-col { transform: scaleY(1); }
.ex-vis .ex-week.show .wk-col:nth-child(2) { transition-delay: .05s; }
.ex-vis .ex-week.show .wk-col:nth-child(3) { transition-delay: .1s; }
.ex-vis .ex-week.show .wk-col:nth-child(4) { transition-delay: .15s; }
.ex-vis .ex-week.show .wk-col:nth-child(5) { transition-delay: .2s; }
.ex-vis .ex-week.show .wk-col:nth-child(6) { transition-delay: .25s; }
.ex-vis .ex-week.show .wk-col:nth-child(7) { transition-delay: .3s; }
.ex-vis .ex-week .wk-chip { opacity: 0; transition: opacity .3s ease .5s; }
.ex-vis .ex-week.show .wk-chip { opacity: 1; }

/* close beat: the hero ring returns and fills to 50 (Floor = complete), bookending the page open */
.ex-ring { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.ex-ring.show { opacity: 1; }
.ex-ring svg { width: 168px; height: 168px; }
.ex-ring-fg { transition: none; }
.ex-ring-chip, .ex-ring-tick { opacity: 0; transition: opacity .3s ease .15s; }
.ex-ring.done .ex-ring-chip, .ex-ring.done .ex-ring-tick { opacity: 1; }
.ex-ring-center { position: absolute; display: flex; flex-direction: column; align-items: center; }
.ex-ring-num { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1;
  color: var(--teal); letter-spacing: -0.02em; }
.ex-ring-lab { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.timer { position: relative; width: 108px; height: 108px; display: flex; align-items: center; justify-content: center; }
.timer svg { width: 108px; height: 108px; }
.timer-bg { fill: none; stroke: var(--hairline); stroke-width: 3.5; }
.timer-fg { fill: none; stroke: var(--teal); stroke-width: 3.5; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center; stroke-dasharray: 126; stroke-dashoffset: 126; }
.timer-num { position: absolute; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); }
.holds-cap { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--teal); }

/* ---------- explainer flow: five in-flow self-contained sections ----------
   The mobile presentation AND the universal no-JS / reduced-motion fallback. Final state is
   the default state: everything below is styled finished; the .is-armed pre-states (Task 3)
   only exist when JS will animate a section in. Nothing here depends on scroll position. */
.scrolly, .ex-exit { display: none; }   /* re-enabled desktop-only (JS + motion) in the desktop block */
.ex-flow { max-width: 520px; margin: 0 auto; padding: 16px var(--gutter) 8px; }
.ex-sec { position: relative; padding: 68px 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 26px; }
/* quiet rule between adjacent beats: absolutely positioned so it adds zero layout height
   (no scroll-anchoring surface) */
.ex-sec + .ex-sec::before { content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 64px; height: 1px; background: var(--hairline); }
/* svh, NOT dvh: dvh re-resolves while the mobile URL bar animates, shifting every beat below
   S1 under the finger mid-scroll (the "snap" feel). svh is stable for the whole scroll. */
.ex-cinema { min-height: 78vh; min-height: 85svh; justify-content: center; padding: 40px 0; }
.ex-sec-cap { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 6.4vw, 30px); line-height: 1.28; color: var(--ink); max-width: 20ch; }
.ex-sec-cap em { color: var(--teal); font-style: normal; }
.ex-sec-cap b.pp { color: var(--pp); }
.ex-sec-vis { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ex-sec-count { font-family: var(--font-display); font-weight: 800; line-height: 1; }
.ex-sec-num { font-size: clamp(40px, 11vw, 54px); color: var(--teal); letter-spacing: -0.02em; }
.ex-sec-unit { display: block; font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.ex-sec .ex-block { width: min(320px, 86vw); }
/* the chips/bracket are tableau components whose BASE state is hidden (JS reveals them with
   .show); in the flow the finished state is the default, so force them visible here. Task 3's
   .is-armed rules out-specify these to create the pre-state. */
.ex-flow .ex-chip { opacity: 1; transform: scale(1); }
.ex-flow .ex-ppline { opacity: 1; }
.ex-flow .ex-ring-chip, .ex-flow .ex-ring-tick { opacity: 1; }   /* the close ring ships ✓'d */
.ex-flow .timer-fg { stroke-dashoffset: 0; }                     /* the holds timer ships swept */
.ex-sec .ex-ppline { bottom: -28px; }
.ex-sec[data-sec="3"] .ex-block { margin-bottom: 26px; }  /* room for the ppline bracket below */
.ex-sec-tag { font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
/* ---------- beat 4: the week strip (W1 quantized columns, design round 2026-07-06) ----------
   Seven varied complete days; each column is value/10 segments so the blocks-of-50
   quantization carries into time. The Floor line is the floor the week never drops below;
   the Standard line is the dashed aim. The right gutter is reserved for the line labels
   so they never sit on a column. Shared by BOTH presentations (mobile section + desktop
   shared graphic). */
.ex-week { width: min(354px, 92vw); }
.wk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0 9px; padding-right: 74px; }
.wk-nums span { font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: center;
  font-variant-numeric: tabular-nums; }
.wk-plot { position: relative; margin-top: 5px; }
.wk-cols { align-items: end; height: 122px; }
.wk-col { display: flex; flex-direction: column-reverse; gap: 2px; transform-origin: bottom; }
.wk-seg { height: 8px; border-radius: 2px; background: linear-gradient(180deg, var(--teal), var(--teal-deep)); }
.wk-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--hairline); pointer-events: none; }
.wk-line.floor { bottom: 48px; }   /* 5 segments: 5×8px + 4×2px gaps */
.wk-line.std { bottom: 98px; border-top-style: dashed; }
.wk-line em { position: absolute; right: 0; top: 0; transform: translateY(-50%); font-style: normal;
  font-family: var(--font-body); font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); }
.wk-line.floor em { color: var(--muted); }
.wk-base { border-top: 1px solid var(--hairline); }
.wk-chips { padding-top: 9px; }
.wk-chip { width: 15px; height: 15px; border-radius: 50%; background: var(--chip);
  display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.wk-chip svg { width: 9px; height: 9px; display: block; }
.wk-days span { padding-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: .1em;
  color: var(--dim); text-align: center; }
.ex-sec-holds { display: flex; align-items: center; gap: 16px; }
.ex-sec-holds .timer, .ex-sec-holds .timer svg { width: 84px; height: 84px; }
.ex-sec-holds .timer-num { font-size: 20px; }
.ex-sec-holdcap { font-family: var(--font-display); font-weight: 700; font-size: 17px;
  line-height: 1.35; color: var(--ink); text-align: left; max-width: 16ch; }
.ex-sec-holdcap em { color: var(--teal); font-style: normal; }
.ex-sec-sub { font-size: 14px; letter-spacing: 0.02em; color: var(--muted); }
.ex-sec-ring { position: relative; width: 190px; }
.ex-sec-ring svg { display: block; width: 100%; height: auto; }
.ex-sec-ring .ex-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }

/* ---- play-once entrances: .is-armed is the pre-state; removing it animates to the default
   (finished) styles above. Armed states only ever exist when JS is present and motion is on. ---- */
.ex-sec .mcell { transition: opacity .32s var(--ease), transform .32s var(--ease); }
.ex-sec .mcell:nth-child(2) { transition-delay: .07s; }
.ex-sec .mcell:nth-child(3) { transition-delay: .14s; }
.ex-sec .mcell:nth-child(4) { transition-delay: .21s; }
.ex-sec .mscale, .ex-sec .ex-sec-holdcap { transition: opacity .32s var(--ease) .26s; }
/* S3's amber turn must actually animate: gradients don't interpolate, so this one block's
   pp cells use solid colours (teal while armed → amber on fire) */
.ex-sec[data-sec="3"] .cell.pp.on { background-image: none; background-color: var(--pp);
  transition: background-color .5s ease; }
.ex-sec[data-sec="3"] .ex-chip { transition-delay: .4s; }
.ex-sec[data-sec="3"] .ex-ppline { transition: opacity .35s ease .15s; }
.ex-sec-tag { transition: opacity .4s ease .55s; }
/* S4's week columns rise staggered left→right; the ✓ row lands after them */
.ex-flow .wk-col { transition: transform .55s var(--ease); }
.ex-flow .wk-col:nth-child(2) { transition-delay: .06s; }
.ex-flow .wk-col:nth-child(3) { transition-delay: .12s; }
.ex-flow .wk-col:nth-child(4) { transition-delay: .18s; }
.ex-flow .wk-col:nth-child(5) { transition-delay: .24s; }
.ex-flow .wk-col:nth-child(6) { transition-delay: .3s; }
.ex-flow .wk-col:nth-child(7) { transition-delay: .36s; }
.ex-flow .wk-chip { transition: opacity .3s ease .55s, transform .3s ease .55s; }
.ex-sec-ring .ex-ring-chip, .ex-sec-ring .ex-ring-tick { transition: opacity .3s ease .65s; }

html.js .ex-sec.is-armed .mcell { opacity: 0; transform: translateY(12px); }
html.js .ex-sec.is-armed .mscale, html.js .ex-sec.is-armed .ex-sec-holdcap { opacity: 0; }
/* S3 ONLY: the pp cells hold teal until the beat fires (S4's block 1 keeps its amber minimum) */
html.js .ex-sec[data-sec="3"].is-armed .cell.pp.on { background-color: var(--teal); }
html.js .ex-sec[data-sec="3"].is-armed .ex-chip { opacity: 0; transform: scale(.5); }
html.js .ex-sec.is-armed .ex-ppline { opacity: 0; }
html.js .ex-sec.is-armed .ex-sec-tag { opacity: 0; }
/* S4's week strip pre-state: columns down, ✓ row hidden (fires as pure CSS, like S3) */
html.js .ex-sec.is-armed .wk-col { transform: scaleY(0); }
html.js .ex-sec.is-armed .wk-chip { opacity: 0; transform: scale(.5); }
html.js .ex-sec.is-armed .ex-ring-chip, html.js .ex-sec.is-armed .ex-ring-tick { opacity: 0; }

/* ---------- outro: proof + start — designed statement bands, continuous with the explainer ----------
   Hook -> How (explainer) -> Proof (the real streak) -> Start (one action). No second pinned deck;
   normal scroll, but big measured type + teal accents so it never drops to flat centred prose. */
.proof, .start { text-align: center; }
.proof { padding: clamp(56px, 13vh, 110px) 0; }
.proof .overline { margin-bottom: 16px; }
.proof-figure { display: flex; flex-direction: column; align-items: center; margin-bottom: 26px; }
.proof-num { font-family: var(--font-display); font-weight: 800; line-height: 0.88;
  font-size: clamp(76px, 27vw, 200px); letter-spacing: -0.04em; color: var(--teal); }
.proof-cap { margin-top: 10px; font-weight: 600; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); }
.proof-body { max-width: 40ch; margin: 0 auto; }
.proof-body > * + * { margin-top: 14px; }
.proof-body p { color: var(--body); }
.proof-body .lede { color: var(--ink); }
.proof-reset strong { color: var(--ink); }

.start { padding: clamp(56px, 13vh, 110px) 0; border-bottom: none; }
.start .overline { margin-bottom: 14px; }
.start h2 { font-size: clamp(34px, 11vw, 60px); }
/* the recipe IS the conversion moment: it gets the visual weight (card on the ring wash);
   the protocol link is the quiet secondary. Do the thing first, read about it second. */
.start-recipe { max-width: 30ch; margin: 26px auto 0; padding: 20px 26px;
  background: var(--wash); border: 1px solid var(--hairline); border-radius: 14px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 5vw, 23px); line-height: 1.35; color: var(--ink); }
.start-recipe strong { color: var(--teal); }
.start-note { margin-top: 14px; font-size: 13px; letter-spacing: 0.02em; color: var(--muted); }
.start-note em { color: var(--teal); font-style: normal; }
.start-cta { margin-top: 26px; }
.start-cta a { font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--teal); text-decoration: underline; text-underline-offset: 4px;
  transition: color .2s ease; }
.start-cta a:hover { color: var(--lap); }

/* reduced motion (works with or without JS): base display rules already show the flow section;
   this just kills the scroll story + transitions */
@media (prefers-reduced-motion: reduce) {
  .explainer .cell, .explainer .ex-chip, .explainer .ex-menu,
  .explainer .ex-block[data-block="2"], .explainer .step-cap { transition: none !important; }
  .explainer .ex-sec, .explainer .ex-sec * { transition: none !important; }
}

/* ---------- faq page: objections, answered ----------
   Plain document, zero JS: objection sections (chap-kick number + the
   objection as an h2 in the skeptic's words + a two-paragraph answer), then a
   closing band reusing the start-cta/start-note treatment. The FAQPage JSON-LD
   mirrors the visible copy verbatim (test-enforced parity). */
.faq-page .faq-hero { padding-top: 44px; }
.faq-page .faq-q { margin-top: 56px; }
.faq-page .faq-q + .faq-q { padding-top: 48px; border-top: 1px solid var(--hairline-soft); }
.faq-page .faq-q h2 { margin-top: 0; font-size: clamp(22px, 6vw, 28px); }
.faq-page .faq-q h2 + p { margin-top: 14px; }
.faq-page .faq-out { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--hairline); text-align: center; }
.faq-page .faq-still {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 5.5vw, 26px); line-height: 1.3; color: var(--ink);
}
.faq-page .faq-out .start-cta { margin-top: 18px; }
.faq-page .faq-out .start-note { margin-top: 12px; }

/* print: same flat light rendering as the protocol page, scoped so the shared
   stylesheet never re-themes the other pages */
@media print {
  body.faq-page { background: #fff;
    --bg: #fff; --ink: #000; --body: #222; --muted: #444; --dim: #555;
    --hairline: #bbb; --hairline-soft: #ddd; --teal: #0d6f69; }
  .faq-page .topbar, .faq-page footer, .faq-page .faq-out { display: none; }
  .faq-page .faq-q { break-inside: avoid-page; }
}

/* ---------- desktop: editorial two-column + side-by-side hero ---------- */
@media (min-width: 1000px) {
  .beat { padding: 92px 0; }

  .beat-grid {
    grid-template-columns: var(--rail) minmax(0, var(--measure));
    column-gap: 64px; justify-content: center; align-items: start;
  }
  .beat-grid .overline { margin: 6px 0 0; }

  .hero { text-align: left; padding-bottom: 84px; }
  .hero-grid {
    display: grid; align-items: center; column-gap: 72px; margin-top: 56px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "kicker ring"
      "title  ring"
      "action ring"
      "sub    ring"
      "strip  ring";
  }
  .hero .kicker { grid-area: kicker; }
  .hero h1 { grid-area: title; }
  .hero .hero-action { grid-area: action; }
  .hero .hero-sub { grid-area: sub; max-width: 36ch; }
  .hero .ring { grid-area: ring; align-self: center; width: clamp(220px, 24vw, 300px); margin: 0; }
  .hero .strip { grid-area: strip; justify-self: start; margin-top: 18px; }
  .scroll-cue { text-align: left; }
}