/* ══ TALQO SITE — SECTIONS AND COMPONENTS. ONE COPY. ═══════════════════════════
   The premium pass, 29 Sep 2026. Every page links, in this order:
     fonts.css → tokens.css → site.css (→ disclosure.css on the three pages that render the
     subprocessor evidence) → header.css, LAST, so the bar wins its own cascade.
   No page carries an inline <style>. A page that needs something this file lacks gets it here,
   scoped by a class, so the next page can reuse it and nothing drifts in a copy.

   THE GRID. One 1,200 px column inside 24 px gutters: twelve tracks of 78 px with 24 px gaps.
   Two splits only: 5/7 for text beside a visual, 6/6 for the try-it box, the pricing list and the
   form. Divided columns share one inner padding, 32 px. THE TYPE. Inter for every word; IBM Plex
   Serif only for money, the buyer's own words and the wordmark. Tabular figures only where numbers
   stand in columns — Inter's tabular set also widens the hyphen, so body copy keeps its own.
   THE MOTION. One moving thing per screen, all of it behind prefers-reduced-motion: no-preference;
   hovers at 150 to 200 ms; nothing loops, follows the cursor, is fixed, or is driven by scroll. */

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--ground);
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* one regular serif face is vendored; no faux bold, by construction */
  font-synthesis: none;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--bar-1); color: var(--ink); }
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
strong, b { font-weight: 600; }
/* Numbers that stand in columns get tabular figures; words keep Inter's own hyphen. */
.num, .money, table, .pilot-price, .tabular { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 12px; z-index: 200; background: var(--surface-0); color: var(--ink); padding: 8px 14px; border-radius: 8px; box-shadow: var(--shadow-sheet); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Layout: one grid ─────────────────────────────────────────────────────── */
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.sec-in { padding: 100px 0; }
.sec.rule > .wrap > .sec-in { border-top: 1px solid var(--border); }
.grid, .split-57, .split-66, .try, .pilot, .close, .faq-wrap, .chapter, .chapter-words, .chapter-wide .chapter-text {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
}
.split-57 > :nth-child(1), .faq-wrap > :nth-child(1), .chapter > :nth-child(1), .chapter-wide .chapter-text > :nth-child(1) { grid-column: 1 / span 5; }
.split-57 > :nth-child(2), .faq-wrap > :nth-child(2), .chapter > :nth-child(2), .chapter-wide .chapter-text > :nth-child(2) { grid-column: 6 / span 7; }
.split-66 > :nth-child(1), .try > :nth-child(1), .pilot > :nth-child(1), .close > :nth-child(1) { grid-column: 1 / span 6; }
.split-66 > :nth-child(2), .try > :nth-child(2), .pilot > :nth-child(2), .close > :nth-child(2) { grid-column: 7 / span 6; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.display {
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
/* The two-tone statement: an ink clause, then a quieter continuation on its own line. Used three
   times on the homepage (the problem, the chapters, the close) and nowhere else, so it stays a voice
   rather than a tic. */
.statement {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.statement .soft { color: var(--text-muted); }
.statement.split .soft, .statement.split .key { display: block; }
.statement .key, .key { color: var(--blue); }
.h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.14; font-weight: 500; letter-spacing: -0.025em; color: var(--text-primary); }
.h3 { font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.012em; color: var(--text-primary); }
.lede { font-size: 19px; line-height: 1.55; color: var(--text-secondary); }
.body { font-size: 17px; line-height: 1.65; color: var(--text-secondary); max-width: 34em; }
.small { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.meta { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.label { font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.num { font-size: 13px; font-weight: 500; color: var(--blue); }
/* The serif's two jobs on a page: money, and the buyer's own words. */
.money { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.said { font-family: var(--serif); font-weight: 400; }

/* ── Links and buttons ────────────────────────────────────────────────────── */
.btn-primary, .btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn-primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--blue)); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-quiet { background: var(--surface-0); color: var(--ink); border: 1px solid var(--border-strong); }
.btn-quiet:hover { border-color: var(--ink); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-size: 15px; font-weight: 500; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .arrow { transition: transform 160ms var(--ease); }
  a:hover .arrow { transform: translateX(2px); }
}
.link-row { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 24px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { text-align: center; }
.hero .sec-in { padding: 40px 0 100px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 7px 16px; border-radius: 999px;
  background: var(--surface-0); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.4; color: var(--text-secondary); text-decoration: none;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.pill:hover { border-color: var(--border-strong); color: var(--text-primary); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.pill-sep { color: var(--border-strong); }
.hero-h1 { margin: 22px auto 0; max-width: 17em; }
.hero-catch {
  margin: 18px auto 0; max-width: 40em;
  font-size: clamp(20px, 1.65vw, 24px); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em;
  color: var(--text-primary);
}
.hero-catch .key { color: var(--blue); }
.hero-actions { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 8px 24px; flex-wrap: wrap; }
.hero-note { margin-top: 10px; font-size: 13px; color: var(--text-muted); }

/* The film: one hairline frame, one soft shadow, the full width of the grid (the 120/1320 edges at 1440), and the
   film's own 16:9 from the start, so pressing play swaps the content and never the size. Before it plays, the frame
   carries Chad's cover (29 Sep 2026): one real product moment (the approved write-back card, captured from the running
   product, at 1.1x), his three beats as a small line at the top-left (the h1 stays the only headline), and the play
   pill in the bottom-left corner, clear of the line and of the capture. */
.film { margin: 36px 0 0; text-align: left; }
.film-frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--radius); background: var(--surface-0);
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-frame);
}
.film-video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.film.is-playing .film-video { display: block; }
.film.is-playing .film-cover { display: none; }
.film-cover { position: absolute; inset: 0; padding: 26px 32px; background: var(--surface-1); text-align: left; }
.cover-line { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.cover-shot { position: absolute; left: 32px; right: 32px; top: 112px; display: flex; justify-content: center; }
.cover-shot .only-wide { width: 1113px; max-width: 100%; }
.cover-shot img { display: block; width: 100%; }
.cover-line .key { color: var(--blue); }
/* THE PLAY CONTROL IS THE OBVIOUS THING IN THE FRAME (29 Sep 2026, Chad: "the play button needs to be visible"). It sat
   as a small pill in the bottom-left corner and read as a caption. It now sits centred in the empty band under the
   product card — still touching no word of the slogan and no part of the product image (test/hero-film-cover.test.js) —
   larger, with the play disc in the brand blue. */
.film-play {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 26px 8px 8px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: #fff; font-size: 17px; font-weight: 500; line-height: 1.2;
  box-shadow: 0 18px 40px -16px rgba(26, 26, 46, 0.6), 0 0 0 6px rgba(74, 95, 232, 0.12);
}
.film-disc { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); }
.film-disc svg { margin-left: 3px; width: 14px; height: 14px; }
.film-txt { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.film-sep { color: var(--text-on-ink-muted); }
.film-len { font-weight: 400; color: var(--text-on-ink-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .film-play { transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
  .film-play:hover { transform: translate(-50%, -2px); }
}
.film-play:hover { background: color-mix(in srgb, var(--ink) 86%, var(--blue)); }
.film-cap { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; }
.film-cap p { font-size: 13px; line-height: 1.5; color: var(--text-muted); max-width: 64ch; }
.film-cap strong { color: var(--text-secondary); font-weight: 500; }
.film-lines { font-size: 13px; color: var(--text-muted); }
.film-lines > summary { cursor: pointer; color: var(--blue); font-weight: 500; list-style: none; white-space: nowrap; min-height: 24px; }
.film-lines > summary::-webkit-details-marker { display: none; }
.film-lines[open] { flex-basis: 100%; }
.film-lines ol { margin: 14px 0 0; padding: 20px 24px 20px 44px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-md); columns: 2; column-gap: 40px; }
.film-lines li { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 8px; break-inside: avoid; }

/* ── The problem: three rooms ─────────────────────────────────────────────── */
.rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; margin-top: 80px; }
.room { padding-top: 28px; border-top: 1px solid var(--text-primary); }
.room-who { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.room-when { color: var(--text-muted); font-weight: 400; }
.room-q { margin-top: 18px; font-size: 21px; line-height: 1.35; font-weight: 500; letter-spacing: -0.014em; color: var(--text-primary); text-wrap: balance; }
.room-a { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 26em; }

/* ── How it works: chapters ───────────────────────────────────────────────── */
.chapters { margin-top: 96px; display: grid; row-gap: 112px; }
.chapter { align-items: start; row-gap: 32px; }
.chapter-text { position: sticky; top: 104px; }
.chapter-title .h3 { margin-top: 12px; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; max-width: 14em; }
.chapter-copy .body { margin-top: 16px; }
.chapter-words { align-items: start; }
.chapter-words .chapter-copy .body { margin-top: 0; }
.chapter-words > .chapter-title { grid-column: 1 / span 5; }
.chapter-words > .chapter-copy { grid-column: 6 / span 7; }
.ways { margin-top: 24px; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.ways li { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.45; color: var(--text-muted); }
.ways li strong { color: var(--text-primary); font-weight: 500; }
.chapter-wide { display: block; }
.chapter-wide .chapter-text { position: static; align-items: end; }
.chapter-wide .chapter-copy .body { margin-top: 0; }
.chapter-wide .stage { margin-top: 40px; }

/* The stage: the one frame language a capture sits in. */
.stage {
  position: relative; background: var(--surface-1); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--hairline);
  padding: 48px; display: flex; align-items: center; justify-content: center;
}
.stage-wide { padding: 56px 48px; }
/* Chapter 01: the upload card's head and the line under it naming the doors that need no one, one column at the
   line's own width (366 px): the line at 1x, the card head a little above it, every line of both at 12.5 px or more.
   The chapter shows what it says, never an empty form. */
.shot-col { width: 366px; max-width: 100%; display: grid; gap: 12px; }
.shot-col img { width: 100%; }
.shot-join { gap: 0; }
.shot-join img { display: block; }
.shot-join-line { border-top: 1px solid var(--hairline); }
/* Chapter 02: the panel hugs the card it frames, rather than floating it in the column. */
.stage-fit { justify-self: start; width: fit-content; max-width: 100%; padding: 32px; }
.chapter-meta { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.chapter-meta a { color: var(--blue); text-decoration: none; }
.chapter-meta .meta { display: block; margin-top: 4px; }
/* Chapter 03: where the approved fields go, one line under the chapter's text (inside the sticky column, so it never
   slides under it). */
.crm-oneline { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.crm-oneline strong { color: var(--text-primary); font-weight: 500; }
/* Chapter 02: the exchange, cropped to the buyer's line; the rep's question above it is not shown. The
   window is the agreed tint's box (90.5-518 x 67.5-150 CSS px in wb-exchange.png) with 6 px of the card
   around it. The alt reads from the same place (data-reads-from, scripts/generate-tour-alt.js). */
.crop-host { position: relative; overflow: hidden; }
.crop-host > img { position: absolute; max-width: none; height: auto; }
.crop-quote { width: 440px; height: 95px; }
.crop-quote > img { width: 536px; left: -84px; top: -61px; }
.shot { margin: 0; }
.shot img { height: auto; }
.sheet { border-radius: var(--radius-md); overflow: hidden; background: var(--surface-0); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sheet); }
.plate { margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--text-muted); text-wrap: balance; }
.plate time { color: var(--text-secondary); white-space: nowrap; }
.only-narrow { display: none; }


/* ── The showcase: the one quiet full-bleed band ─────────────────────────── */
/* Chapter 04 keeps its band for emphasis and the chapter pattern of 01 to 03: number and heading on the left edge at
   chapter size, the body on the 5/7 split. The drawer below it at 1.25x its painted size. */
.showcase { background: var(--surface-1); padding: 112px 0 96px; }
.showcase-chapter { align-items: start; }
.showcase-chapter .chapter-copy .body { margin-top: 0; }
.showcase-shot { margin: 48px auto 0; width: 821px; max-width: 100%; }
.showcase-shot img { width: 100%; }
.showcase .plate { margin: 28px auto 0; text-align: center; }

/* ── The sentence: the buyer's words alone, in the serif, the page's one change of tempo ── */
.quote-band { padding: 128px 0; border-top: 1px solid var(--border); }
.big-quote { margin: 0 auto; max-width: 1000px; text-align: center; }
.big-quote blockquote p { font-family: var(--serif); font-size: 46px; line-height: 1.22; font-weight: 400; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.big-quote figcaption { margin-top: 28px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* ── Try it ───────────────────────────────────────────────────────────────── */
.try { align-items: start; }
.try-copy .body { margin-top: 20px; }
.try-privacy { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.6; color: var(--text-muted); max-width: 34em; }
.try-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.panel { background: var(--surface-0); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-frame); overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--ground); }
.panel-head .label { color: var(--text-secondary); }
.panel-body { padding: 24px; }
.tryit-ta {
  width: 100%; min-height: 220px; resize: vertical; display: block;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--ground);
  padding: 16px 18px; font-size: 15px; line-height: 1.6; color: var(--text-primary);
}
.tryit-ta::placeholder { color: var(--text-muted); }
.tryit-ta:focus { outline: 2px solid var(--blue); outline-offset: 1px; background: var(--surface-0); }
.tryit-row { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tryit-count { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tryit-count.over { color: var(--red); }
.tryit-out { border-top: 1px solid var(--border); padding: 24px; }
.tryit-out-h { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 14px; }
.tio-sig { padding: 16px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 20px; }
.tio-sig:first-of-type { border-top: 0; padding-top: 0; }
.tio-dim { font-size: 13px; color: var(--text-muted); }
.tio-read { font-size: 15px; color: var(--text-primary); font-weight: 500; }
.tio-said { grid-column: 2; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--text-primary); background: var(--said-tint); border-radius: 6px; padding: 8px 12px; }
.tio-none, .tio-err { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.tio-ref { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.tio-ref-h { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.tio-ref ul { margin: 8px 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
/* the call sheet's sections (29 Sep 2026: the demo matches the app) — quiet heads, the reading and the number lead */
.tio-sec { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border); }
.tio-sec:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.tio-sec > .tryit-out-h { margin-bottom: 10px; }
.tio-count { margin-left: 10px; font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tio-lede { font-size: 17px; line-height: 1.55; color: var(--text-primary); max-width: 62ch; }
.tio-body { font-size: 15px; line-height: 1.55; color: var(--text-primary); }
.tio-move { font-weight: 500; }
.tio-why { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.tio-num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.tio-num-v { font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tio-num-note { font-size: 13px; color: var(--text-muted); }
.tio-items .tio-sig:first-child { border-top: 0; padding-top: 4px; }
.tio-items .tio-sig:last-child { padding-bottom: 0; }
.tio-sig .tio-dim { padding-top: 2px; }
.tio-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; min-width: 0; overflow-wrap: anywhere; }
.tio-rtext { flex: 1 1 16ch; min-width: 0; font-weight: 400; line-height: 1.5; }
.tio-said, .tio-ask { overflow-wrap: anywhere; }
.tio-ask { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.tio-ask > span { font-weight: 500; color: var(--text-primary); margin-right: 4px; }
.tio-gap { margin-top: 14px; }
.tio-chip { flex: none; display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid transparent; font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.tio-chip.confirmed, .tio-chip.agreed { background: var(--green-light); color: var(--green); }
.tio-chip.weak, .tio-chip.not-agreed { background: var(--amber-light); color: var(--amber); }
.tio-chip.missing { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
.tio-chip.contradicted { background: var(--red-light); color: var(--red); }

/* THE RESULT AS ITS OWN WIDE PANEL (29 Sep 2026, Chad: "is this premium?"). The paste panel stays in its column; the
   answer opens under both columns at the page's width: the reading beside the buyer's number, the methodology as a grid
   of tiles (state at a glance; the buyer's sentence on a confirmed item, the question to ask on a gap), then the buyer's
   words, the next step and the recommendation side by side, and the honesty foot folded. */
.tryit-out.tio-wide {
  margin-top: 32px; padding: 32px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-0, #fff);
  box-shadow: 0 24px 48px -32px rgba(26, 26, 46, 0.35);
}
.tio-wide .tio-sec { margin-top: 0; padding-top: 0; border-top: 0; }
.tio-wide .tio-top, .tio-wide .tio-bottom { display: grid; gap: 28px 40px; align-items: start; }
.tio-wide .tio-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.tio-wide .tio-top > .tio-sec:only-child { grid-column: 1 / -1; }
.tio-wide .tio-lede { font-size: 19px; line-height: 1.5; max-width: 60ch; }
.tio-wide > .tio-sec { padding: 28px 0; border-bottom: 1px solid var(--border); }
.tio-wide .tio-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tio-wide .tio-items .tio-sig, .tio-wide .tio-items .tio-sig:first-child, .tio-wide .tio-items .tio-sig:last-child {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1, #fafaf8);
}
.tio-wide .tio-sig.confirmed { border-color: color-mix(in srgb, var(--green) 28%, var(--border)); }
.tio-wide .tio-sig.weak { border-color: color-mix(in srgb, var(--amber) 28%, var(--border)); }
.tio-wide .tio-tile-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tio-wide .tio-tile-h .tio-dim { font-size: 14px; font-weight: 500; color: var(--text-primary); padding-top: 0; }
.tio-wide .tio-rtext { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.tio-wide .tio-sig .tio-said { grid-column: auto; margin: 0; font-size: 14.5px; line-height: 1.5; padding: 10px 12px; }
.tio-wide .tio-sig .tio-ask { grid-column: auto; font-size: 13.5px; }
.tio-wide .tio-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 28px; }
.tio-wide details.tio-ref { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.tio-wide details.tio-ref summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.tio-wide details.tio-ref summary::-webkit-details-marker { display: none; }
.tio-wide details.tio-ref summary::before { content: '›'; display: inline-block; transition: transform 160ms var(--ease); }
.tio-wide details.tio-ref[open] summary::before { transform: rotate(90deg); }
.tio-wide details.tio-ref summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 1100px) { .tio-wide .tio-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .tryit-out.tio-wide { padding: 20px 16px; border-radius: 16px; }
  .tio-wide .tio-top, .tio-wide .tio-bottom, .tio-wide .tio-items { grid-template-columns: minmax(0, 1fr); }
  .tio-wide .tio-lede { font-size: 17px; }
}

/* ── Security, compact ────────────────────────────────────────────────────── */
.sec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.controls {
  margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface-0); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sheet);
}
.control { padding: 32px; }
.control + .control { border-left: 1px solid var(--border); }
.control .label { color: var(--text-primary); font-size: 15px; }
.control p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.control .meta { margin-top: 12px; display: block; }
.not-yet { margin-top: 24px; font-size: 15px; line-height: 1.6; color: var(--text-muted); max-width: 68ch; }
.not-yet strong { color: var(--text-primary); font-weight: 500; }

/* ── Start with one team ──────────────────────────────────────────────────── */
.pilot { align-items: stretch; }
.pilot-lede { margin-top: 12px; }
.pilot-terms { margin-top: 32px; border-top: 1px solid var(--border); }
.pilot-term { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.pilot-term .h3 { font-size: 17px; }
.pilot-term .meta { font-size: 13px; margin-top: 2px; }
.pilot-price { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--text-primary); letter-spacing: -0.02em; white-space: nowrap; text-align: right; }
.pilot-price small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 13px; color: var(--text-muted); letter-spacing: 0; }
.founder { margin: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; border-radius: var(--radius); background: var(--surface-0); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sheet); }
.founder p { font-size: 17px; line-height: 1.6; color: var(--text-primary); }
.founder p + p { margin-top: 14px; color: var(--text-secondary); }
.founder-sign { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-muted); }
.founder-sign strong { color: var(--text-primary); font-weight: 500; }
.founder { align-self: start; }
.founder-sign a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }

/* ── Questions, two columns ───────────────────────────────────────────────── */
.faq-wrap { align-items: start; }
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item > summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--text-primary);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg);
}
.faq-item[open] > summary::after { transform: rotate(225deg); margin-top: -2px; }
@media (prefers-reduced-motion: no-preference) { .faq-item > summary::after { transition: transform 180ms var(--ease), margin-top 180ms var(--ease); } }
.faq-item > p { padding: 0 40px 24px 0; font-size: 17px; line-height: 1.65; color: var(--text-secondary); max-width: 44em; }
.faq-item > p a { text-decoration: underline; text-underline-offset: 3px; }

/* ── The close: the page's one full-bleed ink band ────────────────────────── */
.band { background: var(--surface-ink); color: var(--text-on-ink); }
.band .sec-in { padding: 112px 0; }
.close { align-items: start; }
.band .statement { color: var(--text-on-ink); max-width: 15em; }
.band .statement .key { color: var(--blue-on-ink); }
.band .body { color: var(--text-on-ink-muted); margin-top: 24px; max-width: 30em; }
.band a { color: var(--blue-on-ink); }
.demo-form { display: grid; gap: 16px; }
.demo-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 13px; font-weight: 500; color: var(--text-on-ink-muted); }
.field input, .field textarea {
  width: 100%; min-height: 44px; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 15px; line-height: 1.4;
  background: rgba(245, 245, 243, 0.05); border: 1px solid var(--line-on-ink); color: var(--text-on-ink);
}
.field textarea { resize: vertical; min-height: 104px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-on-ink-muted); opacity: .75; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue-on-ink); outline-offset: 1px; border-color: transparent; }
.band .btn-primary { background: var(--text-on-ink); color: var(--ink); border-color: var(--text-on-ink); justify-self: start; }
.band .btn-primary:hover { background: #fff; }
.demo-form-status { font-size: 15px; line-height: 1.5; color: var(--text-on-ink); }
.demo-form-status.error { color: var(--bar-1); }
.demo-form-privacy { font-size: 13px; line-height: 1.6; color: var(--text-on-ink-muted); }
.demo-form-privacy a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Footer: an index on every page, on the same grid ────────────────────── */
.foot { background: var(--ground); border-top: 1px solid var(--border); }
.foot-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; padding: 72px 0 48px; }
.foot-brand { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 14px; }
.foot-col { display: flex; flex-direction: column; }
.foot-col:nth-of-type(1) { grid-column: 7 / span 2; }
.foot-col:nth-of-type(2) { grid-column: 9 / span 2; }
.foot-col:nth-of-type(3) { grid-column: 11 / span 2; }
.foot-mark { display: flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; width: max-content; min-height: 44px; }
.foot-mark .foot-bars { display: flex; align-items: flex-end; gap: 2.5px; height: 18px; }
.foot-mark .foot-bars i { display: block; width: 4px; border-radius: 1.5px; }
.foot-mark .foot-bars i:nth-child(1) { height: 8px; background: var(--bar-1); }
.foot-mark .foot-bars i:nth-child(2) { height: 13px; background: var(--bar-2); }
.foot-mark .foot-bars i:nth-child(3) { height: 18px; background: var(--bar-3); }
.foot-word { font-family: var(--serif); font-size: 20px; letter-spacing: -0.02em; line-height: 1; }
.foot-brand p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 24em; }
.foot-h { font-size: 13px; font-weight: 500; color: var(--text-primary); padding: 12px 0 4px; }
.foot-col a { display: flex; align-items: center; min-height: 36px; font-size: 15px; color: var(--text-secondary); text-decoration: none; transition: color 160ms var(--ease); }
.foot-col a:hover, .foot-col a[aria-current="page"] { color: var(--text-primary); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px 0 40px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }

/* ── Sub-page header and prose ────────────────────────────────────────────── */
.page-hero .sec-in { padding: 104px 0 72px; }
.page-hero .label { display: block; margin-bottom: 20px; }
.page-hero .display { max-width: 15em; }
.page-hero .lede { margin-top: 24px; max-width: 36em; }
.page-body .sec-in { padding-top: 0; }
.doc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.doc-toc { grid-column: 1 / span 3; position: sticky; top: 104px; display: flex; flex-direction: column; padding-top: 6px; }
.doc-toc a { display: flex; align-items: center; min-height: 32px; font-size: 14px; color: var(--text-muted); text-decoration: none; transition: color 160ms var(--ease); }
.doc-toc a:hover { color: var(--text-primary); }
.doc > .prose { grid-column: 4 / span 8; }
.prose { max-width: 44em; color: var(--text-secondary); font-size: 17px; line-height: 1.7; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--border); font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; color: var(--text-primary); scroll-margin-top: 96px; }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 36px; font-size: 19px; line-height: 1.35; letter-spacing: -0.012em; color: var(--text-primary); scroll-margin-top: 96px; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 10px; }
.prose li::marker { color: var(--text-muted); }
.prose code { font-family: var(--mono); font-size: 0.86em; background: var(--surface-1); padding: 1px 6px; border-radius: 5px; color: var(--text-primary); }
.prose em { font-style: italic; }
.callout { padding: 22px 26px; border-radius: var(--radius-md); background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--border); font-size: 16px; line-height: 1.65; }
.callout-quiet { background: var(--surface-1); box-shadow: none; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .split-57, .split-66, .try, .pilot, .close, .faq-wrap, .chapter, .chapter-words, .chapter-wide .chapter-text { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .split-57 > *, .split-66 > *, .try > *, .pilot > *, .close > *, .faq-wrap > *, .chapter > *, .chapter-words > *, .chapter-wide .chapter-text > * { grid-column: 1 / -1 !important; }
  .chapter-text { position: static; }
  .controls { grid-template-columns: 1fr 1fr; }
  .control:nth-child(3) { border-left: 0; }
  .control:nth-child(n+3) { border-top: 1px solid var(--border); }
  .doc-toc { display: none; }
  .doc > .prose { grid-column: 1 / -1; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col:nth-of-type(1) { grid-column: 1 / span 4; }
  .foot-col:nth-of-type(2) { grid-column: 5 / span 4; }
  .foot-col:nth-of-type(3) { grid-column: 9 / span 4; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .sec-in { padding: 88px 0; }
  .hero .sec-in { padding: 28px 0 72px; }
  .pill { font-size: 12.5px; padding: 6px 14px; }
  .hero-actions { margin-top: 24px; flex-direction: column; gap: 4px; }
  .hero-actions .btn-primary { width: 100%; }
  .film { margin-top: 32px; }
  /* The phone cover: the frame is 3:5 before and after play (the film plays letterboxed), because the product moment
     must stay legible: one card, the approved row over the buyer's line, at or near the size a phone paints them. */
  .film-frame { aspect-ratio: 3 / 5; }
  .film-cover { padding: 16px 12px; }
  .cover-line { font-size: 20px; line-height: 1.3; text-wrap: balance; }
  .cover-shot { position: static; margin: 14px -12px 0; display: block; }
  .cover-card { border-radius: 0; box-shadow: 0 1px 0 var(--hairline), 0 -1px 0 var(--hairline); }
  .cover-card img { display: block; width: 100%; }
  .cover-card .cover-card-line { padding: 8px; border-top: 1px solid var(--hairline); }
  .film-play { left: 12px; bottom: 12px; transform: none; min-height: 52px; font-size: 15.5px; padding: 6px 18px 6px 6px; gap: 12px; }
  .film-disc { width: 40px; height: 40px; }
  .film-play:hover { transform: translateY(-1px); }
  .film-cap { flex-direction: column; align-items: center; text-align: center; }
  .stage-fit { justify-self: stretch; width: auto; padding: 12px; }
  .quote-band { padding: 88px 0; }
  .big-quote blockquote p { font-size: 30px; }
  .film-lines ol { columns: 1; padding: 16px 16px 16px 36px; }
  .rooms { grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin-top: 48px; }
  .chapters { margin-top: 56px; row-gap: 72px; }
  .ways { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .stage, .stage-wide { padding: 12px; border-radius: var(--radius-md); }
  .only-wide { display: none; }
  .only-narrow { display: block; }
  .phone-stack { display: grid; gap: 12px; width: 100%; }
  /* PHONE. Each capture is the product as a phone paints it (390 CSS viewport), shown full width, so its
     smallest type stays at or above 11 px (manifest-site.json: scale_for_11px). */
  .sheet.pad { padding: 8px; }
  /* Chapter 01 on a phone: the column takes the full measure (358 px) with no stage inset, so the doors line, painted
     366 px wide, shows at 0.98x and its smallest type stays above 12 px. */
  .stage-flush { padding: 0; background: none; box-shadow: none; }
  .shot-col { width: 100%; }
  .phone-stack img { width: 100%; }
  .showcase { padding: 88px 0 72px; }
  .showcase-phone { margin-top: 32px; }
  .controls { grid-template-columns: minmax(0, 1fr); }
  .control, .control + .control { padding: 24px 20px; border-left: 0; }
  .control + .control { border-top: 1px solid var(--border); }
  .pilot-term { align-items: flex-start; }
  .pilot-price { font-size: 28px; }
  .pilot-term .meta, .try-privacy, .demo-form-privacy, .film-cap p, .room-a, .control p, .not-yet, .plate, .meta.ladder-note { font-size: 15px; }
  .founder { padding: 28px 24px; }
  .founder p { font-size: 17px; }
  .tio-sig { grid-template-columns: minmax(0, 1fr); }
  .tio-said, .tio-ask { grid-column: 1; }
  .panel-body, .tryit-out { padding: 18px; }
  .demo-form-row { grid-template-columns: minmax(0, 1fr); }
  .band .sec-in { padding: 88px 0; }
  .band .btn-primary { width: 100%; }
  .foot-top { padding: 56px 0 32px; }
  .foot-col:nth-of-type(1) { grid-column: 1 / span 6; }
  .foot-col:nth-of-type(2) { grid-column: 7 / span 6; }
  /* Company as one row under Product and Trust, never a column on its own. */
  .foot-col:nth-of-type(3) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; column-gap: 24px; }
  .foot-col:nth-of-type(3) .foot-h { flex-basis: 100%; }
  .page-hero .sec-in { padding: 64px 0 48px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 22px; margin-top: 48px; padding-top: 28px; }
}

/* ── About ────────────────────────────────────────────────────────────────── */
.letter-aside { position: sticky; top: 104px; align-self: start; }
.letter-sign { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.letter-sign strong { color: var(--text-primary); font-weight: 500; }
.letter { max-width: 36em; }
.letter p { font-size: 18px; line-height: 1.7; color: var(--text-secondary); }
.letter p + p { margin-top: 20px; }
.letter .letter-lead { font-size: 22px; line-height: 1.5; color: var(--text-primary); letter-spacing: -0.012em; }
.letter strong { color: var(--text-primary); font-weight: 500; }
.rows { margin-top: 48px; border-top: 1px solid var(--border); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 96px; }
.row dt { grid-column: 1 / span 5; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--text-primary); padding-right: 24px; }
.row dd { grid-column: 6 / span 7; font-size: 16px; line-height: 1.7; color: var(--text-secondary); max-width: 40em; }
.roles { list-style: none; display: grid; gap: 12px; }
.roles strong { display: block; color: var(--text-primary); font-weight: 500; }
.roadmap-lede { margin-top: 16px; }
.phases { display: grid; border-top: 1px solid var(--border); }
.phase { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.phase-title { grid-row: 1; grid-column: 1; font-size: 17px; font-weight: 500; color: var(--text-primary); }
.phase-tag { grid-row: 1; grid-column: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.phase-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.phase-body { grid-column: 1 / -1; font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 40em; }
@media (max-width: 1080px) {
  .letter-aside { position: static; }
  .row dt, .row dd { grid-column: 1 / -1; }
  .row dd { margin-top: 8px; }
}
@media (max-width: 760px) {
  .letter .letter-lead { font-size: 19px; }
  .letter p { font-size: 16.5px; }
  .phase { grid-template-columns: minmax(0, 1fr); }
  .phase-tag { grid-row: auto; grid-column: 1; }
}

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 32px; border-radius: var(--radius); background: var(--surface-0); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sheet); }
.plan.featured { box-shadow: 0 0 0 1.5px var(--ink), var(--shadow-frame); }
.plan-badge { min-height: 22px; font-size: 13px; font-weight: 500; color: var(--blue); }
.plan-name { margin-top: 8px; font-size: 20px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.012em; }
.plan-price { margin-top: 20px; font-family: var(--serif); font-size: 56px; line-height: 1; letter-spacing: -0.02em; color: var(--text-primary); }
.plan-price-talk { font-family: var(--sans); font-size: 36px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.plan-unit { margin-top: 10px; font-size: 14px; color: var(--text-secondary); }
.plan-annual { margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.plan-tag { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--text-primary); }
.plan-body { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.plan-you { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.plan-cta { margin-top: auto; padding-top: 28px; }
.plan-cta a { width: 100%; }
.incl-lede { margin-top: 16px; }
.incl { list-style: none; border-top: 1px solid var(--border); }
.incl li { padding: 18px 0 18px 28px; border-bottom: 1px solid var(--border); font-size: 16px; line-height: 1.6; color: var(--text-secondary); position: relative; }
.incl li::before { content: ''; position: absolute; left: 2px; top: 26px; width: 12px; height: 7px; border-left: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue); transform: rotate(-45deg); }
.incl strong { color: var(--text-primary); font-weight: 500; }
.ladder-list { list-style: none; border-top: 1px solid var(--border); }
.ladder-list li { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 17px; color: var(--text-primary); }
.ladder-list .money { font-size: 26px; }
.ladder-note { margin-top: 16px; }
.pilot-band { display: flex; align-items: center; justify-content: space-between; gap: 32px 64px; padding: 48px; border-radius: var(--radius); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); }
.pilot-band .body { margin-top: 14px; max-width: 40em; }
.cfo-lede { margin-top: 12px; }
.cfo { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.cfo-cell { padding: 32px; border-radius: var(--radius); background: var(--surface-0); box-shadow: 0 0 0 1px var(--hairline); }
.cfo-val { margin-top: 12px; font-family: var(--serif); font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cfo-val small { font-family: var(--sans); font-size: 15px; color: var(--text-muted); letter-spacing: 0; }
.cfo-cell p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.cfo-foot { margin-top: 20px; }
.cfo-foot strong { color: var(--text-primary); font-weight: 500; }
@media (max-width: 1080px) {
  .plans { grid-template-columns: minmax(0, 1fr); row-gap: 20px; max-width: 520px; }
  .pilot-band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .plan, .cfo-cell { padding: 24px; }
  .plan-price { font-size: 48px; }
  .pilot-band { padding: 28px 24px; }
  .cfo { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}

/* ── Security and legal documents ─────────────────────────────────────────── */
.notdone { margin-top: 64px; padding: 32px; border-radius: var(--radius); background: var(--surface-0); box-shadow: 0 0 0 1px var(--hairline); }
.notdone > h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.notdone > * + * { margin-top: 16px; }
.legal-hero .display { font-size: clamp(32px, 3.4vw, 48px); }
.legal-meta { margin-top: 18px; }
.legal .legal-sec { margin-top: 0; }
.legal .legal-sec > * + * { margin-top: 16px; }
.legal .legal-sec + .legal-sec { margin-top: 48px; }
.legal .legal-sec h2 { margin-top: 0; padding-top: 32px; font-size: 22px; }
.legal .callout + .legal-sec h2 { border-top: 0; padding-top: 16px; }
.qa-doc .qa + .qa { margin-top: 0; }
.qa-doc .qa > * + * { margin-top: 16px; }
.qa-doc .qa h2 { margin-top: 56px; }
.qa-doc .qa:first-child h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.dd-foot { margin-top: 56px; }
.dd-print { margin-top: 8px; }
@media print {
  .nav, .foot, .doc-toc, .skip { display: none !important; }
  body { background: #fff; }
  .doc > .prose { grid-column: 1 / -1; }
}

/* ── Accuracy ─────────────────────────────────────────────────────────────── */
.scoreboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
.sb { padding-top: 24px; border-top: 1px solid var(--text-primary); }
.sb-val { font-size: clamp(40px, 4vw, 56px); line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sb-lead .sb-val { color: var(--blue); }
.sb-lab { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); max-width: 16em; }
.acc-block { margin-top: 72px; }
.acc-date { padding-top: 4px; }
.acc-notes p { font-size: 17px; line-height: 1.7; color: var(--text-secondary); }
.acc-notes p + p { margin-top: 16px; }
.acc-notes strong { color: var(--text-primary); font-weight: 500; }
.acc-p { margin-top: 16px; }
.acc-p:first-child { margin-top: 0; }
.acc-wide { max-width: 44em; }
.acc-h3 { margin-top: 40px; }
.method { list-style: none; margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.method li { padding-top: 20px; border-top: 1px solid var(--border); font-size: 16px; line-height: 1.65; color: var(--text-secondary); padding-right: 24px; }
.method strong { display: block; margin-bottom: 6px; color: var(--text-primary); font-weight: 500; font-size: 17px; }
.cat-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cat-table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-muted); padding: 0 12px 12px 0; border-bottom: 1px solid var(--border); }
.cat-table td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
.cat-table .ct-n { text-align: right; color: var(--text-primary); white-space: nowrap; }
.cat-table .ct-total td { font-weight: 500; color: var(--text-primary); border-bottom: 0; }
.miss { margin-top: 32px; padding: 28px 32px; border-radius: var(--radius); background: var(--surface-0); box-shadow: 0 0 0 1px var(--hairline); }
.miss .h3 { margin-top: 8px; }
.miss p { margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); }
.label-strip { margin-top: 32px; padding: 20px 24px; border-radius: var(--radius-md); background: var(--surface-1); font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.label-strip strong { color: var(--text-primary); font-weight: 500; }
.xf-split { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: start; }
.xf-panel { border-radius: var(--radius); background: var(--surface-0); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sheet); overflow: hidden; }
.xf-h { padding: 14px 24px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: var(--ground); border-bottom: 1px solid var(--border); }
.transcript { padding: 20px 24px; max-height: 720px; overflow-y: auto; white-space: pre-wrap; font-family: var(--serif); font-size: 15px; line-height: 1.65; color: var(--text-primary); }
.out { padding: 8px 24px 20px; }
.out dl { display: grid; grid-template-columns: 9em minmax(0, 1fr); }
.out dt { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--text-muted); }
.out dd { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.out dl > dt:last-of-type, .out dl > dd:last-of-type { border-bottom: 0; }
.refused { font-weight: 500; color: var(--text-primary); }
.dims { width: 100%; border-collapse: collapse; }
.dims td { padding: 8px 10px 8px 0; vertical-align: top; font-size: 14px; line-height: 1.55; border-top: 1px solid var(--border); }
.dims tr:first-child td { border-top: 0; }
.dims .dim { font-weight: 500; color: var(--text-primary); text-transform: capitalize; width: 6.5em; }
.verdict { font-weight: 500; }
.v-high { color: var(--green); }
.v-medium { color: var(--amber); }
.v-low { color: var(--red); }
.v-unknown { color: var(--text-muted); }
.xf-validated { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.dims .note { color: var(--text-secondary); }
.receipt-band { text-align: left; padding: 120px 0; }
.receipt-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.receipt-copy { grid-column: 1 / span 5; }
.receipt-copy .body { margin-top: 16px; }
.receipt-grid > .ex { grid-column: 6 / span 7; }
.ex { margin: 0; padding: 28px; border-radius: var(--radius); background: var(--surface-0); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-frame); }
.ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ex-no { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.ex-date { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ex-head-claim { margin-top: 12px; }
.ex-claim { font-size: 20px; font-weight: 500; letter-spacing: -0.012em; color: var(--text-primary); }
.ex-unit { font-weight: 400; color: var(--text-secondary); font-size: 16px; }
.ex-why { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.ex-passage { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--ground); }
.ex-label { font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-bottom: 8px; }
.ex-ln { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--text-primary); }
.ex-ln + .ex-ln { margin-top: 6px; }
.ex-ln b { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text-muted); margin-right: 4px; }
.ex-hit { background: var(--said-tint); color: var(--green); padding: 1px 3px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ex-foot { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; font-size: 13px; color: var(--text-muted); }
.ex-grp { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ex-action { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; }
.ex-arrow { margin-left: 4px; }
.sep { color: var(--border-strong); padding: 0 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; }
.chip-mark { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-confirmed, .chip-agreed { color: var(--green); }
.ex-wide { padding: 24px; }
.ladder { list-style: none; border-top: 1px solid var(--border); }
.ladder-item { display: grid; grid-template-columns: 16px 9em minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--border); }
.ladder-chip { font-size: 15px; font-weight: 500; color: var(--text-primary); }
.ladder-say { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.ladder-say strong { color: var(--text-primary); font-weight: 500; }
.st-mark { width: 9px; height: 9px; display: inline-block; transform: translateY(-1px); }
.st-mark-agreed { border-radius: 50%; background: var(--green); }
.st-mark-not-agreed { border-radius: 50%; background: var(--amber); }
.st-mark-contradicted { background: var(--red); transform: rotate(45deg) translateY(-1px); }
.st-mark-not-asked { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.ladder-foot { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.ladder-foot strong { color: var(--text-primary); font-weight: 500; }
.exb { margin-top: 40px; }
.exb .label { margin-bottom: 12px; }
.rc-foot { margin-top: 20px; font-size: 15px; color: var(--text-secondary); }
@media (max-width: 1080px) {
  .scoreboard { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .xf-split { grid-template-columns: minmax(0, 1fr); }
  .receipt-copy, .receipt-grid > .ex { grid-column: 1 / -1; }
  .receipt-grid { row-gap: 32px; }
}
@media (max-width: 760px) {
  .method { grid-template-columns: minmax(0, 1fr); }
  .out dl { grid-template-columns: minmax(0, 1fr); }
  .out dt { border-bottom: 0; padding-bottom: 2px; }
  .out dd { padding-top: 0; }
  .ladder-item { grid-template-columns: 16px minmax(0, 1fr); }
  .ladder-say { grid-column: 2; }
  .cat-table { font-size: 14px; }
  .ex { padding: 20px; }
  .receipt-band { padding: 88px 0; }
  .transcript { max-height: 480px; }
}

/* ── 404 ── */
.notfound .sec-in { padding: 140px 0 160px; }
.notfound-actions { justify-content: flex-start; }
.notfound-links { list-style: none; margin-top: 48px; display: flex; flex-wrap: wrap; gap: 0 28px; }

/* The narrowest phones (under 380 px): the play label stacks (the verb over its length) rather than wrap inside the
   pill, and the hero pill drops its separator so neither line ends on a dot. */
@media (max-width: 379px) {
  .film-play { padding: 6px 18px 6px 6px; border-radius: 28px; }
  .film-txt { flex-direction: column; align-items: flex-start; gap: 1px; }
  .film-sep { display: none; }
  .pill-sep { display: none; }
}