/* Caliber coming-soon page. Values from Design System v2.0 (design/system/tokens.css; design/system-v2/, 22 Oct 2026). */

@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap; src: url("/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-weight: 400; font-display: swap; src: url("/fonts/martian-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --ink: #1A1D21;
  --ink-2: #2E3238;
  --paper: #F4F5F6;
  --surface: #FFFFFF;
  --surface-alt: #EBEDEF;
  --surface-dark: #24282D;    /* v2 dark-theme surface */
  --surface-alt-dark: #2E3238; /* v2 dark-theme surface-alt */
  --stage: #F0F0F0;           /* behind product evidence only; a true neutral (v2) */
  --text-muted: #59606A;
  --text-meta: var(--text-muted); /* v2 merges text-meta into text-muted */
  --on-dark: #F4F5F6;
  --on-dark-muted: #A3AAB3;
  --rule: #D6DADF;
  --rule-strong: #B9BFC6;
  --rule-dark: #33383F;
  --control-border: #808790;  /* inputs and outlined controls, 3:1 on every ground */
  --control-border-dark: #5C636D;

  /* The ruler's band between its gates is neutral (v2): a green band would read as a passed check. */
  --tolerance-band: var(--surface-alt);
  --tolerance-band-dark: var(--surface-alt-dark);

  /* Two-tone focus at full contrast (v2 p. 07). */
  --focus-inner: #FFFFFF;
  --focus-outer: #000000;
  --focus-ring: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-outer);

  /* Verdicts: the only chroma in the brand, always with a label and a symbol. */
  --clear: #17703F;       --clear-tint: #EAF5EE;       --clear-on-dark: #5BD08E;       --clear-tint-dark: #173323;
  --borderline: #935A05;  --borderline-tint: #FCF4E6;  --borderline-on-dark: #F2B544;  --borderline-tint-dark: #3A2C12;
  --below: #B91C1C;       --below-tint: #FBE9E9;       --below-on-dark: #F28B82;

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, monospace;

  --fs-hero: clamp(44px, 7.2vw, 88px); /* v2 display: 88 -> 44 px, 600, -0.035em */
  --fs-h2: clamp(32px, 4.6vw, 56px);
  --fs-lede: clamp(21px, 2.4vw, 32px);
  --fs-device: clamp(26px, 3.3vw, 44px);
  --ls-hero: -0.035em;
  --ls-h2: -0.035em;

  --container: 1240px;
  --gutter: 40px;
  --section-y: 128px;
  --radius: 2px;              /* controls; panes, frames and tables are square */
  --sheet-shadow: 0 1px 2px rgba(26, 29, 33, 0.08), 0 8px 24px rgba(26, 29, 33, 0.08); /* the one shadow: the email sheet */
  --duration-feedback: 100ms;
  --duration-pane: 180ms;
  --duration-modal: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1023px) { :root { --section-y: 96px; } }
@media (max-width: 767px)  { :root { --section-y: 72px; --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: var(--ink); color: var(--paper); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  padding: 12px 16px; background: var(--paper); color: var(--ink); border-radius: var(--radius);
}
.skip:focus { top: 16px; }

.container { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Type ---------- */

.mono { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; }
.eyebrow { font-size: 12px; letter-spacing: 0.14em; color: var(--text-meta); margin-bottom: 24px; }
.label { font-size: 12px; letter-spacing: 0.12em; }
.on-dark .eyebrow { color: var(--on-dark-muted); }
.caption { font-size: 14px; line-height: 1.4; color: var(--text-meta); margin-top: 12px; }
.caption.mono { font-size: 11px; letter-spacing: 0.12em; margin-top: 16px; }
.on-dark .caption { color: var(--on-dark-muted); }

.display { font-size: var(--fs-hero); font-weight: 600; letter-spacing: var(--ls-hero); line-height: 1.0; }
.headline { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--ls-h2); line-height: 1.04; max-width: 16em; }
.lede { font-size: var(--fs-lede); font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; max-width: 18em; }
.intro { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 38em; margin-top: 32px; color: var(--ink-2); }
.intro + .intro { margin-top: 20px; }
.on-dark .intro { color: var(--on-dark-muted); }

/* ---------- Chips (review states) ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 8px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
.chip-neutral { background: var(--surface-alt); color: var(--ink); }
.chip-clear   { background: var(--clear-tint); color: var(--clear); }
.chip-border  { background: var(--borderline-tint); color: var(--borderline); }
.chip-below   { background: var(--below-tint); color: var(--below); }
.chip-clear-dark  { background: var(--clear-tint-dark); color: var(--clear-on-dark); }
.chip-border-dark { background: var(--borderline-tint-dark); color: var(--borderline-on-dark); }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--radius);
  font: 600 16px/1 var(--font-sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-feedback) var(--ease-out), color var(--duration-feedback) var(--ease-out);
}
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: var(--surface); }
.button-dark { background: var(--ink); color: var(--paper); width: 100%; }
.button-dark:hover { background: var(--ink-2); }
.button[disabled] { opacity: 0.6; cursor: progress; }

.text-link { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Hero ---------- */

.on-dark { background: var(--ink); color: var(--on-dark); }

.hero { background: var(--surface); color: var(--ink); }

.topbar { display: flex; align-items: center; gap: 40px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.brand { display: inline-block; margin-right: auto; }
.brand img { height: 24px; width: auto; } /* the v2 lockup at its 24 px minimum; clear space comes from the bar's padding */
.nav { display: flex; gap: 32px; font-size: 15px; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.nav-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  background: var(--ink); color: var(--on-dark); text-decoration: none; border-radius: var(--radius);
  font: 600 15px/1 var(--font-sans); letter-spacing: -0.01em;
}
.nav-cta:hover { background: var(--ink-2); }
.on-dark .nav a { color: var(--on-dark-muted); }
.on-dark .nav a:hover { color: var(--on-dark); }
.on-dark .topbar { border-bottom-color: var(--rule-dark); }
.on-dark .nav-cta { background: transparent; color: var(--on-dark); border: 1px solid var(--rule-dark); }

.hero-head { margin-top: clamp(24px, 3.5vw, 48px); }
.hero-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
}
.hero-message { grid-column: 1 / span 7; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 28px 0 24px; max-width: 760px; }
.on-dark .rule { border-top-color: var(--rule-dark); }
.hero .lede { color: var(--ink); font-size: clamp(21px, 1.9vw, 26px); max-width: 24em; }
.hero .body { color: var(--text-muted); margin: 12px 0 24px; max-width: 30em; }
.hero-demo { display: inline-block; margin-top: 16px; }
.esp-list { margin: -12px 0 24px; font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); }
.hero .button-dark { width: auto; }


/* Product shot rising out of the ink field into paper. */
.shot-band {
  margin-top: clamp(64px, 8vw, 104px); padding: clamp(32px, 4vw, 56px) 0;
  background: var(--stage); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.product-shot { position: relative; }
.shot-frame { position: relative; overflow: visible; border: 1px solid var(--rule); }
.shot-frame img { width: 100%; background: var(--surface); }
.product-shot .caption { color: var(--text-meta); }


/* ---------- Live demo (demo.js): brief to ESP draft on a 24 s ruler ---------- */

.live-frame {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 740px;
  background: var(--surface); border: 1px solid var(--rule);
}
.live-bar { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.live-title { display: flex; align-items: baseline; gap: 12px; margin-right: auto; min-width: 0; }
.live-title b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.live-title .label { font-size: 11px; color: var(--text-meta); }

.live-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 0; }

/* The stage: the client's email at a stated fit, the one place on the page with the brand's colour and a shadow. */
.live-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 40px 16px 24px; background: var(--stage); border-right: 1px solid var(--rule); overflow: hidden;
}
.live-fit { position: absolute; top: 14px; left: 16px; font-size: 11px; color: var(--text-meta); }
.live-sheet-box {
  position: relative; flex: none;
  width: calc(600px * var(--fit, 0.4)); height: calc(var(--sheet-h, 1300px) * var(--fit, 0.4));
  background: var(--surface); box-shadow: var(--sheet-shadow);
}
.live-sheet {
  position: absolute; top: 0; left: 0; width: 600px; height: var(--sheet-h, 1300px);
  transform: scale(var(--fit, 0.4)); transform-origin: 0 0;
}
/* Before the first block lands, the empty sheet says what it is. */
.live-empty {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 88%;
  padding: 6px 8px; background: var(--surface); color: var(--text-meta); text-align: center;
  font-size: 10px; line-height: 1.6; letter-spacing: 0.1em; transition: opacity var(--duration-pane) var(--ease-out);
}
.live-sheet-box:has(.is-placed) .live-empty { opacity: 0; }
.live-probe { position: absolute; left: -10000px; top: 0; width: 600px; visibility: hidden; }
.live .hm { min-height: 100%; display: flex; flex-direction: column; background: transparent; }
.live .hm [data-block="footer"] { flex: 1; }
.live .hm [data-block].is-placed:not(.foot) { background: var(--crema); }
/* An empty slot is the brand's template waiting for its block. */
.live .hm [data-block]:not(.is-placed) { background: transparent; outline: 2px dashed var(--rule-strong); outline-offset: -8px; }
.live .hm [data-block]:not(.is-placed) > * { visibility: hidden; }

/* The caliper bracket on the block that just landed. */
.live-sel {
  position: absolute; left: calc(100% + 10px); width: 10px; opacity: 0; pointer-events: none;
  top: calc(var(--y, 0px) * var(--fit, 0.4)); height: calc(var(--h, 0px) * var(--fit, 0.4));
  border: 1.5px solid var(--ink); border-left: 0;
}
.live-sel:not(.is-on) { visibility: hidden; }
.live-sel.is-hold { opacity: 1; }
.live-sel span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 10px; letter-spacing: 0.1em; white-space: nowrap; }

/* The panel: one pane per beat, stacked in one cell so the frame never changes height. */
.live-panel { display: grid; padding: 28px 32px; min-height: 0; overflow: hidden; }
.lp { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; }
.lp.is-on { visibility: visible; opacity: 1; }
.lp-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--ink); }
.lp-head h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.lp-head .label { font-size: 11px; color: var(--text-meta); }
.live .code { display: inline-block; padding: 1px 6px; border: 1px solid var(--rule-strong); border-radius: var(--radius); font: 400 11px/1.5 var(--font-mono); letter-spacing: 0.06em; margin-right: 4px; }

.lp-kv > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule); }
.lp-kv > div:first-child { border-top: 0; }
.lp-kv dt { font-size: 11px; letter-spacing: 0.12em; color: var(--text-meta); }
.lp-kv dd { margin: 0; font-size: 16px; line-height: 1.45; }
.lp-goal { font-size: 21px !important; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3 !important; }
.lp-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 11px; letter-spacing: 0.1em; color: var(--text-meta); }

.lp-line { margin: 12px 0 14px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.lp-blocks li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule);
  color: var(--text-muted); transition: color var(--duration-pane) var(--ease-out);
}
.lp-blocks .mono { font-size: 11px; letter-spacing: 0.1em; }
.lp-blocks li.is-placed { color: var(--ink); }
.lp-tick { font-weight: 600; opacity: 0; transition: opacity var(--duration-pane) var(--ease-out); }
.lp-blocks li.is-placed .lp-tick { opacity: 1; }

.lp-note { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--text-muted); }

.lp-checks li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.lp-checks li:first-child { border-top: 0; }
.lp-checks b { font-weight: 600; }
.lp-checks .mono { font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--text-muted); }
.lp-pending.is-running .lp-run { opacity: 0.6; }
/* Brand check: a rule reads muted until it is measured, then shows its verdict. */
.lp-rules li { color: var(--text-muted); transition: color var(--duration-feedback) var(--ease-out); }
.lp-rules li.is-on { color: var(--ink); }
.lp-rules li:not(.is-on) .chip { visibility: hidden; }
.lp-held { margin-top: 8px; padding: 10px 14px; background: var(--surface-alt); border-radius: var(--radius); font-size: 15px; font-weight: 600; }
.lp-held.is-clear { font-weight: 500; }
.lp-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.lp-score, .lp-approval { padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); }
.lp-score { display: flex; align-items: center; gap: 14px; }
.lp-n { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.lp-score p { font-size: 14px; line-height: 1.4; }
.lp-score .mono { font-size: 10px; letter-spacing: 0.08em; color: var(--text-meta); }
.lp-approval b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.lp-approval p { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.lp-approval.is-approved { outline: 1px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }

.lp-big { margin: 16px 0 12px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.lp-drafts > div { opacity: 0.3; transition: opacity var(--duration-pane) var(--ease-out); }
.lp-drafts > div.is-on { opacity: 1; }

/* Controls: play/pause and the ruler, 0 to 24 s, with a playhead and one tick per beat. */
.live-controls { display: grid; grid-template-columns: 44px auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 20px 16px; border-top: 1px solid var(--rule); }
.live-toggle { margin-right: 12px; }
.live-end { padding-top: 13px; text-transform: none; font-size: 10px; letter-spacing: 0.08em; color: var(--text-meta); white-space: nowrap; }
.live-toggle {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--control-border); border-radius: var(--radius);
}
.live-toggle:hover { background: var(--surface-alt); }
.live-glyph { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.live-toggle.is-play .live-glyph { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.live-ruler { position: relative; height: 46px; }
.live-ticks { position: absolute; left: 0; top: 4px; width: 100%; height: 16px; overflow: visible; }
.live-ticks path { stroke: var(--text-muted); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.live-ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; border-top: 1px solid var(--ink); }
.live-head { position: absolute; left: -6px; top: -2px; width: 12px; height: 22px; color: var(--ink); will-change: transform; }
.live-head::before { content: ""; position: absolute; left: 5px; bottom: 0; width: 2px; height: 14px; background: currentColor; }
.live-head::after  { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 8px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.live-beats li { position: absolute; top: 22px; left: calc(var(--at, 0) * 100%); }
.live-beat {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 24px; padding: 2px 0; margin-left: -1px;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  font: 500 14px/1.4 var(--font-sans); letter-spacing: -0.01em; color: var(--text-muted);
}
.live-beat .mono { font-size: 10px; letter-spacing: 0.1em; }
.live-beat.is-done { color: var(--ink-2); }
.live-beat[aria-current] { color: var(--ink); font-weight: 600; }
.live-beat:hover .live-beat-name { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Sections ---------- */

.section { padding: var(--section-y) 0; }
.paper { background: var(--paper); }
.surface { background: var(--surface); }
.ink { background: var(--ink); }

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; align-items: center; }
.split-text { grid-column: 1 / span 5; }
.calendar-wrap { grid-column: 7 / span 6; }

/* ---------- Calendar ---------- */

.calendar {
  display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 16px 16px;
}
.cal-day, .cal-week { font-size: 11px; letter-spacing: 0.12em; color: var(--text-meta); }
.cal-day { padding: 8px 8px 12px; }
.cal-week { padding: 14px 0; border-top: 1px solid var(--rule); }
.cal-cell { min-height: 92px; padding: 10px 6px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.event {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 8px; border-radius: var(--radius); background: var(--paper);
  font-size: 13px; line-height: 1.25;
}
.event b { font-weight: 600; letter-spacing: -0.01em; }
.event .chip { font-size: 11px; padding: 2px 6px; white-space: normal; }
.event.is-focus { background: var(--surface); outline: 1.5px solid var(--ink); outline-offset: -1.5px; }

/* ---------- How it works (scroll story) ---------- */

/* Demo film: click to play, never autoplays or loops. */
.demo { margin-top: 56px; }
.demo-frame {
  position: relative; overflow: hidden;
  background: var(--ink); border: 1px solid var(--rule);
}
.demo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.demo-play {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start;
  padding: clamp(16px, 3vw, 40px); border: 0; background: transparent; cursor: pointer;
  transition: background-color var(--duration-feedback) var(--ease-out);
}
.demo-play[hidden] { display: none; }
.demo-play:focus-visible { box-shadow: none; }
.demo-play:focus-visible .demo-pill { box-shadow: var(--focus-ring); }
.demo-pill {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 20px 0 18px; border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  font: 600 16px/1 var(--font-sans); letter-spacing: -0.01em;
  transition: background-color var(--duration-feedback) var(--ease-out);
}
.demo-play:hover .demo-pill { background: var(--surface); }
.demo-icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.demo-time { font-size: 11px; letter-spacing: 0.12em; color: var(--text-meta); padding-left: 12px; border-left: 1px solid var(--rule); align-self: stretch; display: inline-flex; align-items: center; }

.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 56px; }
.steps { grid-column: 1 / span 4; }
.story-stage { grid-column: 6 / span 7; }

.step {
  min-height: 72vh; display: flex; flex-direction: column; justify-content: center;
  padding-left: 28px; border-left: 2px solid var(--rule);
  color: var(--text-muted); transition: color var(--duration-modal) var(--ease-out), border-color var(--duration-modal) var(--ease-out);
}
.step.is-active { color: var(--ink); border-left-color: var(--ink); }
.step-owner { display: flex; align-items: center; gap: 10px; color: var(--text-muted); }
.step.is-active .step-owner { color: var(--ink); }
.icon { flex: none; width: 20px; height: 20px; }
.step h3 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; margin: 16px 0 16px; }
.step p:not(.step-owner) { max-width: 26em; }
.step-shot { display: none; }

.stage-sticky { position: sticky; top: max(64px, calc(50vh - 300px)); }
.stage-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--text-meta); }
.stage-chips .chip { display: none; }
.stage-chips .chip.is-on { display: inline-flex; }
.stage-frame {
  position: relative; aspect-ratio: 2400 / 1317; overflow: hidden;
  background: var(--stage); border: 1px solid var(--rule);
}
.stage-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left;
  opacity: 0; transition: opacity var(--duration-modal) var(--ease-out);
}
.stage-frame img.contain { object-fit: contain; object-position: center; background: var(--stage); }
.stage-frame img.is-on { opacity: 1; }

/* Each step settles into the panel it describes. */
.stage-frame img { transform-origin: 50% 50%; transition: opacity var(--duration-modal) var(--ease-out), transform 700ms var(--ease-out) 150ms; }
.stage-frame img[data-state="0"].is-on { transform: scale(1.7);  transform-origin: 15% 35%; }
.stage-frame img[data-state="1"].is-on { transform: scale(1.5);  transform-origin: 100% 45%; }
.stage-frame img[data-state="3"].is-on { transform: scale(1.5);  transform-origin: 90% 45%; }
.stage-frame img[data-state="4"].is-on { transform: scale(1.6);  transform-origin: 95% 30%; }
@media (prefers-reduced-motion: reduce) { .stage-frame img { transition: none; } }

/* The sweep between screens (app.js): the leaving screen holds still under the wipe; a ruled line leads it. */
.stage-frame img.is-leaving { opacity: 1; transition: none; }
.stage-frame img.is-on { z-index: 1; }
.stage-frame img[data-state="0"].is-leaving { transform: scale(1.7); transform-origin: 15% 35%; }
.stage-frame img[data-state="1"].is-leaving { transform: scale(1.5); transform-origin: 100% 45%; }
.stage-frame img[data-state="3"].is-leaving { transform: scale(1.5); transform-origin: 90% 45%; }
.stage-frame img[data-state="4"].is-leaving { transform: scale(1.6); transform-origin: 95% 30%; }
.stage-scan { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 0; border-left: 1.5px solid var(--ink); opacity: 0; pointer-events: none; }
.stage-scan::before {
  content: attr(data-label); position: absolute; top: 0; left: -1.5px; padding: 4px 6px;
  background: var(--ink); color: var(--on-dark); font: 400 10px/1 var(--font-mono); letter-spacing: 0.1em;
}
.stage-scan::after { content: ""; position: absolute; bottom: 0; left: -6px; width: 10px; height: 1.5px; background: var(--ink); }

.stage-rail { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 20px; }
.stage-rail li {
  display: flex; flex-direction: column; gap: 4px; padding-top: 12px;
  border-top: 2px solid var(--rule); font-size: 14px; font-weight: 500; color: var(--text-muted);
  transition: color var(--duration-modal) var(--ease-out), border-color var(--duration-modal) var(--ease-out);
}
.stage-rail li span { font-size: 10px; letter-spacing: 0.12em; color: var(--text-meta); }
.stage-rail li.is-done { border-top-color: var(--ink); }
.stage-rail li.is-on { border-top-color: var(--ink); color: var(--ink); }

/* ---------- Voice review ---------- */

.voice-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; margin-top: 64px; align-items: start; }
.gauge { grid-column: 1 / span 7; background: var(--surface-dark); border: 1px solid var(--rule-dark); border-radius: var(--radius); padding: 28px 32px 24px; }
.finding-wrap { grid-column: 8 / span 5; }

.gauge-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-bottom: 12px; }
.gauge-title { white-space: nowrap; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.gauge-head .label { color: var(--on-dark-muted); font-size: 11px; }
.gauge-row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 104px; align-items: center; gap: 20px;
  padding: 14px 0; border-top: 1px solid var(--rule-dark);
}
.g-name { font-size: 17px; }
.g-track { position: relative; height: 28px; }
.g-track svg { display: block; width: 100%; height: 28px; overflow: visible; }
.gauge-row .chip { justify-self: end; }

#ruler .r-band { fill: var(--tolerance-band-dark); }
#ruler .r-base { stroke: var(--on-dark); stroke-width: 1; vector-effect: non-scaling-stroke; }
#ruler .r-tick { stroke: var(--on-dark-muted); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
#ruler .r-gate { stroke: var(--on-dark); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

/* Marker: a small jaw resting on the ruler at the assessed position. */
.g-mark {
  position: absolute; bottom: 4px; width: 12px; height: 22px; margin-left: -6px;
  color: var(--clear-on-dark);
}
.g-mark::before { content: ""; position: absolute; left: 5px; bottom: 0; width: 2px; height: 14px; background: currentColor; }
.g-mark::after  { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 8px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.is-finding .g-mark { color: var(--borderline-on-dark); }
.gauge-row:nth-child(1) .g-mark { left: 49%; }
.gauge-row:nth-child(2) .g-mark { left: 44%; }
.gauge-row:nth-child(3) .g-mark { left: 57%; }
.gauge-row:nth-child(4) .g-mark { left: 81%; }
.gauge-row:nth-child(5) .g-mark { left: 52%; }

/* Scrubbed (app.js, ViewTimeline): the marker rides a track-wide layer that travels to its value, and its colour is the
   verdict where it stands right now. */
.g-run { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.is-scrubbed .g-mark { left: 0 !important; transition: color var(--duration-feedback) linear; }
.is-scrubbed .gauge-row[data-live="in"] .g-mark { color: var(--clear-on-dark); }
.is-scrubbed .gauge-row[data-live="out"] .g-mark { color: var(--borderline-on-dark); }

.gauge-legend {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--rule-dark);
  font-size: 13px; color: var(--on-dark-muted);
}
.swatch { display: inline-block; width: 18px; height: 10px; margin-right: 8px; vertical-align: -1px; background: var(--tolerance-band-dark); outline: 1px solid var(--rule-strong); outline-offset: -1px; }
.gate { display: inline-block; width: 2px; height: 14px; margin: 0 10px 0 4px; vertical-align: -3px; background: repeating-linear-gradient(var(--on-dark) 0 3px, transparent 3px 6px); }

/* Finding card (interactive demo). */
.finding {
  background: var(--surface); color: var(--ink); border-radius: var(--radius);
  border-left: 4px solid var(--borderline); padding: 28px 28px 24px;
  transition: border-color var(--duration-modal) var(--ease-out);
}
.finding-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.1em; color: var(--text-meta); }
.finding-quote { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin: 14px 0 12px; }
.finding-why { color: var(--ink-2); }
.finding-suggest { margin-top: 16px; padding: 12px 16px; background: var(--surface-alt); border-radius: var(--radius); line-height: 1.5; }
.finding-suggest .mono { font-size: 11px; letter-spacing: 0.1em; color: var(--text-meta); margin-right: 4px; }
.finding-suggest s { color: var(--text-muted); }
.finding-new { font-weight: 600; outline-offset: 2px; }
.finding-new[contenteditable="true"] { outline: 1.5px dashed var(--ink); padding: 0 2px; }
.finding-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.fbtn {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: 500 15px/1 var(--font-sans); cursor: pointer;
}
.fbtn:hover { background: var(--surface-alt); }
.fbtn-primary { background: var(--ink); color: var(--paper); }
.fbtn-primary:hover { background: var(--ink-2); }
.finding-result { margin-top: 14px; font-size: 15px; font-weight: 500; }
.finding-result:empty { display: none; }
.finding[data-finding="accepted"] { border-left-color: var(--clear); }
.finding[data-finding="accepted"] .finding-result { color: var(--clear); }
.finding[data-finding="dismissed"] { border-left-color: var(--rule-strong); }
.finding[data-finding="dismissed"] .finding-suggest { opacity: 0.55; }

/* ---------- Checks vs judgment ---------- */

.checks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px 32px 20px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; }
.card-head h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.card-head .label { color: var(--text-meta); font-size: 11px; }

.checks li {
  display: grid; grid-template-columns: 22px 92px minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--rule);
}
.checks svg { width: 20px; height: 20px; color: var(--clear); }
.checks b { font-weight: 600; }
.checks .mono { font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--text-muted); overflow-wrap: anywhere; }

.judgment li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--rule);
  font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; letter-spacing: -0.02em;
}
.judgment li::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 1px; }
.judgment li:last-child { font-weight: 600; }
.judgment li:last-child::before { background: var(--ink); }

/* ---------- Markets ---------- */

.fanout {
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(80px, 1fr) minmax(0, 1.6fr);
  align-items: center; margin-top: 64px;
}
.fan-source {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 24px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
.fan-source .label { color: var(--text-meta); font-size: 11px; }
.fan-source strong { font-size: 30px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.fan-lines { width: 100%; align-self: stretch; height: auto; contain: size; overflow: visible; }
.fan-lines path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.fanout.is-scrubbed .fan-lines path { stroke-dasharray: 1; }
.fan-targets li {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  min-height: 84px; padding: 0 0 0 20px; border-top: 1px solid var(--rule); position: relative;
}
.fan-targets li:last-child { border-bottom: 1px solid var(--rule); }
.fan-targets li::before {
  content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--ink); border-radius: 1px;
}
.fan-targets .code { font-size: 11px; letter-spacing: 0.1em; color: var(--text-meta); }
.fan-targets .local { font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }

.markets-shot { margin-top: 72px; }
.markets-scroll { overflow-x: auto; padding: 0 var(--gutter); scrollbar-width: thin; }
.markets-scroll img { width: 100%; max-width: var(--container); margin: 0 auto; }
.markets-scroll:focus-visible { outline-offset: -2px; }

/* ---------- Who's building it ---------- */

.founder-text { max-width: 40em; }
.founder-link { margin-top: 32px; }

/* ---------- Early access ---------- */

.access-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.access-grid > div { grid-column: 1 / span 6; }
.signup-card,
.access-grid > .followup {
  grid-column: 8 / span 5;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 32px; display: grid; gap: 20px;
}
.field { display: grid; gap: 8px; }
.field label { font-size: 15px; font-weight: 500; }
.optional { color: var(--text-muted); font-weight: 400; }
.field input {
  width: 100%; min-height: 52px; padding: 0 16px;
  font: 400 17px/1.2 var(--font-sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius);
}
.field input::placeholder,
.signup-row input::placeholder { color: var(--text-muted); }
.field input:focus-visible { border-color: var(--ink); }
.field input[aria-invalid="true"],
.signup-row input[aria-invalid="true"] { border-color: var(--below); }

.check { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }

/* One-row signup: email and button side by side, stacked on small screens. */
.signup-inline { max-width: 560px; }
.signup-row { display: flex; gap: 8px; }
.signup-row input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px;
  font: 400 17px/1.2 var(--font-sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius);
}
.signup-row input:focus-visible { border-color: var(--ink); }
.signup-row .button { flex: none; width: auto; }
.signup-inline .status { margin-top: 10px; }
.on-dark .signup-row input { background: var(--surface-dark); color: var(--on-dark); border-color: var(--control-border-dark); }
.on-dark .signup-row input::placeholder { color: var(--on-dark-muted); }
.on-dark .signup-row input:focus-visible { border-color: var(--on-dark); }
.on-dark .signup-row input[aria-invalid="true"] { border-color: var(--below-on-dark); }

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

.status { min-height: 1.5em; font-size: 15px; font-weight: 500; }
.status:empty { display: none; }
.status:focus { outline: none; }
.status.is-error { color: var(--below); }
.on-dark .status.is-error { color: var(--below-on-dark); }
.fine { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.fine a { text-underline-offset: 3px; }

/* Thank-you step: replaces whichever form succeeded. */
.followup { max-width: 560px; display: grid; gap: 16px; }
.followup:focus { outline: none; }
.followup-done { font-size: 17px; font-weight: 600; }
.followup-intro { color: var(--text-muted); font-size: 15px; }
.on-dark .followup-intro { color: var(--on-dark-muted); }
.details { display: grid; gap: 16px; }
.details fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.details legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.details fieldset label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); font-size: 15px; cursor: pointer;
}
.details fieldset label:has(input:checked) { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.details input[type="radio"] { margin: 0; accent-color: var(--ink); }
.on-dark .details { color-scheme: dark; }
.on-dark .details fieldset label { border-color: var(--control-border-dark); }
.on-dark .details input[type="radio"] { accent-color: var(--on-dark); }
.followup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.followup .button { background: var(--ink); color: var(--paper); }
.followup .button:hover { background: var(--ink-2); }
.on-dark .followup .button { background: var(--paper); color: var(--ink); }
.on-dark .followup .button:hover { background: var(--surface); }
.followup-skip { background: none; border: 0; padding: 8px 0; color: inherit; font: inherit; font-size: 15px; cursor: pointer; }

/* ---------- Inline CTA band ---------- */

.cta-band { padding: 56px 0; border-top: 1px solid var(--rule); }
.cta-band-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: center; }
.cta-band-title { grid-column: 1 / span 6; font-size: clamp(26px, 2.8vw, 36px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.cta-band .signup-inline,
.cta-band .followup { grid-column: 7 / span 6; }

/* ---------- FAQ ---------- */

.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.faq-grid > div:first-child { grid-column: 1 / span 4; }
.faq { grid-column: 6 / span 7; border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0;
  font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; letter-spacing: -0.02em; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 18px; color: var(--text-meta); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 24px; max-width: 38em; color: var(--ink-2); }

/* ---------- Sticky early-access link ---------- */

.sticky-cta {
  position: fixed; z-index: 20; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  background: var(--ink); color: var(--on-dark); border: 1px solid var(--rule-dark); border-radius: var(--radius);
  font: 600 15px/1 var(--font-sans); text-decoration: none;
  visibility: hidden; opacity: 0;
}
.sticky-cta.is-shown { visibility: visible; opacity: 1; }
.sticky-cta:hover { background: var(--ink-2); }
.sticky-cta .icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta { transform: translateY(-8px); transition: opacity var(--duration-modal) var(--ease-out), transform var(--duration-modal) var(--ease-out), visibility 0s linear var(--duration-modal); }
  .sticky-cta.is-shown { transform: none; transition-delay: 0s; }
}

/* ---------- Footer ---------- */

.footer { padding: 64px 0 32px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.footer-top p { color: var(--on-dark-muted); font-size: 15px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule-dark);
  color: var(--on-dark-muted); font-size: 11px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a { text-decoration: none; overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--on-dark); text-decoration: underline; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; font-size: 15px; }
.footer-nav a { color: var(--on-dark-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--on-dark); text-decoration: underline; }

/* ---------- Simple page (no-JS outcomes) ---------- */

.simple { min-height: 100vh; display: flex; flex-direction: column; }
.simple > header, .simple main > .container { width: 100%; }
.simple .topbar { justify-content: space-between; }
.simple main { flex: 1; display: flex; align-items: center; }
.simple .intro { color: var(--on-dark-muted); }
.simple .button { margin-top: 40px; }

/* Privacy notice: long-form text on the simple layout. */
.prose { padding-top: 24px; padding-bottom: 96px; }
.prose > * { max-width: 40rem; }
.prose h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 40px 0 12px; }
.prose p, .prose li { color: var(--on-dark-muted); }
.prose p + p { margin-top: 12px; }
.prose ul { list-style: disc; padding-left: 1.25em; display: grid; gap: 6px; }
.prose strong { color: var(--on-dark); font-weight: 500; }
.prose .placeholder { color: var(--borderline-on-dark); }

/* ---------- Motion (R2: 240ms ease-out, ≤8px, once; nothing loops) ---------- */

@keyframes rise-in           { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: no-preference) {

  /* Reveal-on-scroll pieces start hidden only when JS can reveal them. */
  .js [data-reveal] .event,
  .js [data-reveal] .g-mark,
  .js [data-reveal] .fan-targets li,
  .js [data-reveal].card { opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + 80ms); }
  .js [data-reveal] .g-track svg { opacity: 0; transition: opacity 400ms ease; }
  .js [data-reveal] .g-mark { transform: translateY(-8px); transition-delay: calc(var(--i, 0) * 60ms + 400ms); }
  .js [data-reveal] .fan-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + 100ms); }
  .js [data-reveal] .fan-targets li { transform: translateX(-8px); transition-delay: calc(var(--i, 0) * 80ms + 450ms); }
  .js [data-reveal] .checks path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 320ms var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 300ms); }

  .js [data-reveal].is-in .event,
  .js [data-reveal].is-in .g-mark,
  .js [data-reveal].is-in .fan-targets li,
  .js [data-reveal].card.is-in { opacity: 1; transform: none; }
  .js [data-reveal].is-in .g-track svg { opacity: 1; }
  .js [data-reveal].is-in .fan-lines path,
  .js [data-reveal].is-in .checks path { stroke-dashoffset: 0; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  .nav { display: none; }
  .hero-message { grid-column: 1 / -1; }

  .split-text, .calendar-wrap { grid-column: 1 / -1; }

  .story { display: block; margin-top: 40px; }
  .story-stage { display: none; }
  .step { min-height: 0; padding: 32px 0 40px 24px; color: var(--ink); border-left-color: var(--ink); }
  .step-shot { display: block; margin-top: 24px; }
  .step-shot img { border: 1px solid var(--rule); }

  .live-frame { height: 700px; }
  .live-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .live-panel { padding: 24px; }

  .gauge, .finding-wrap { grid-column: 1 / -1; }
  .access-grid > div, .signup-card, .access-grid > .followup { grid-column: 1 / -1; }
  .signup-card, .access-grid > .followup { max-width: 560px; }
  .cta-band-title, .cta-band .signup-inline, .cta-band .followup { grid-column: 1 / -1; }
  .faq-grid > div:first-child, .faq { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .fanout { grid-template-columns: 1fr; gap: 24px; }
  .fan-lines { display: none; }
  .fan-source { justify-self: start; }
  .fan-targets { border-left: 2px solid var(--ink); margin-left: 12px; }
  .fan-targets li { grid-template-columns: 1fr auto; row-gap: 4px; padding: 16px 0 16px 20px; border-top: 0; }
  .fan-targets li:last-child { border-bottom: 0; }
  .fan-targets li::before { left: -5px; }
  .fan-targets .code { grid-column: 1 / -1; }
  .checks-grid { grid-template-columns: 1fr; }
  .markets-scroll img { width: 1000px; max-width: none; }
}

@media (max-width: 767px) {
  body { font-size: 17px; line-height: 26px; }
  .topbar { padding: 24px 0; gap: 16px; }
  .topbar .brand img { height: 24px; }
  .rule { margin: 24px 0 20px; }
  .signup-row { flex-direction: column; }
  .signup-row .button { width: 100%; }
  .shot-band { margin-top: 56px; }

  /* Small poster: icon and running time only, so the pill stays clear of the step list. */
  .demo-play { padding: 12px; }
  .demo-pill { min-height: 44px; padding: 0 14px; gap: 10px; }
  .demo-icon { border-width: 6px 0 6px 10px; }
  .demo-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .demo-time { padding-left: 10px; color: var(--ink); }

  /* The demo stacks: stage above, panel below, both fixed in height so nothing below them moves. */
  .shot-band .container { padding: 0; }
  .shot-band .caption { padding: 0 var(--gutter); }
  .live-frame { height: auto; grid-template-rows: auto 340px auto auto; border-left: 0; border-right: 0; }
  .live-body { display: contents; }
  .live-stage { border-right: 0; border-bottom: 1px solid var(--rule); padding: 32px 16px 16px; }
  .live-sel span { display: none; }
  .live-panel { padding: 20px var(--gutter); }
  .live-bar { flex-wrap: wrap; padding: 12px var(--gutter); gap: 8px 10px; }
  .live-title { flex-basis: 100%; }
  .live-title .label { display: none; }
  .live-title b { font-size: 15px; }
  .lp-head h3 { font-size: 21px; }
  .lp-kv > div { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 9px 0; }
  .lp-kv dd { font-size: 15px; }
  .lp-goal { font-size: 18px !important; }
  .lp-blocks li { padding: 8px 0; font-size: 15px; }
  .lp-checks li { grid-template-columns: 84px minmax(0, 1fr) auto; font-size: 14px; padding: 8px 0; }
  .lp-checks .mono { font-size: 11px; }
  .lp-split { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lp-score { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
  .lp-n { font-size: 30px; }
  .lp-approval { padding: 12px; }
  .lp-score p, .lp-approval p, .lp-note { font-size: 13px; }
  .live-controls { gap: 8px; padding: 12px var(--gutter) 14px; }
  .live-toggle { margin-right: 6px; }
  .live-beat-name { display: none; }
  .live-beat { min-width: 24px; }

  .calendar-wrap { margin: 0 calc(-1 * var(--gutter)); }
  .calendar-scroll, .calendar { overflow-x: auto; }
  .calendar { grid-template-columns: 36px repeat(5, minmax(104px, 1fr)); border-left: 0; border-right: 0; border-radius: 0; }

  .gauge { padding: 20px 16px 16px; }
  .gauge-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .g-track { grid-column: 1 / -1; grid-row: 2; }
  .finding { padding: 22px 18px 20px; }

  .card { padding: 22px 18px 14px; }
  .checks li { grid-template-columns: 22px 1fr; row-gap: 2px; }
  .checks .mono { grid-column: 2; }

  .signup-card, .access-grid > .followup { padding: 24px 20px; }
  .cta-band { padding: 48px 0; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .footer { padding-bottom: 96px; }

  /* Sticky link becomes a slim bar along the bottom edge. */
  .sticky-cta { top: auto; bottom: 0; left: 0; right: 0; justify-content: center; min-height: 52px; border-width: 1px 0 0; border-radius: 0; }
  .sticky-cta:not(.is-shown) { transform: translateY(8px); }
}

/* ---------- MCP band: a planned capability, text beside its illustration ---------- */
.mcp-band { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .mcp-band { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; } }
.mcp-band .label { color: var(--text-muted); }
.mcp-band-link { margin-top: 24px; }
.mcp-band-figure { margin: 0; max-width: 640px; }
.mcp-band-figure img { width: 100%; height: auto; background: var(--stage); border: 1px solid var(--rule); }
.mcp-band-figure figcaption { margin-top: 12px; font-size: 11px; color: var(--text-muted); }