/* MoonView public site: the one stylesheet.

   Layout idea: an editorial page on warm paper. Serif headlines, a plain sans
   for reading, and monospace transcript lines with a page:line gutter, which
   is what the product itself looks like. One dark band (the measured results)
   and the footer; everything else is paper.

   The site commits to this one light look on purpose: it mirrors the desktop
   program's default screen, and the screenshots are all light.

   Sections, in order:
     1. Fonts and tokens          8. Tool panels (home)
     2. Base elements             9. Verdict legend
     3. Layout helpers           10. How it works, screenshot windows
     4. Header and footer        11. Results band, limits, closing call
     5. Buttons, tags, chips     12. Tool pages (hero, steps, tables, diagrams)
     6. Transcript sheet         13. How we test
     7. Hero and its animation   14. Reveal on scroll, reduced motion, print
*/

/* ---------- 1. Fonts and tokens ---------- */

/* Self-hosted, Latin subset, SIL Open Font License (licences sit beside the files). */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Shared with the demo page: keep these names. */
  --paper: oklch(0.975 0.004 85);
  --paper-raised: oklch(0.995 0.002 85);
  --ink: oklch(0.21 0.012 60);
  --ink-soft: oklch(0.43 0.012 60);
  --rule: oklch(0.89 0.008 85);
  --accent: oklch(0.42 0.11 258);
  --accent-soft: oklch(0.935 0.02 258);
  --ok: oklch(0.44 0.1 160);
  --ok-soft: oklch(0.945 0.04 160);
  --warn: oklch(0.47 0.1 65);
  --warn-soft: oklch(0.95 0.05 88);
  --bad: oklch(0.5 0.19 27);
  --bad-soft: oklch(0.945 0.03 25);
  --font-display: "Source Serif 4", Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius: 8px;

  /* Used by this stylesheet only. */
  --paper-sunk: oklch(0.948 0.006 85);
  --ink-faint: oklch(0.56 0.012 60);
  --rule-strong: oklch(0.8 0.01 85);
  --accent-strong: oklch(0.34 0.11 258);
  --mark: oklch(0.925 0.105 96);          /* highlighter on a matched line */
  --ok-line: oklch(0.72 0.12 160);
  --warn-line: oklch(0.78 0.13 75);
  --bad-line: oklch(0.68 0.17 27);
  --night: oklch(0.215 0.035 262);        /* the dark band and the footer */
  --night-raised: oklch(0.27 0.04 262);
  --night-rule: oklch(0.36 0.035 262);
  --on-night: oklch(0.96 0.006 85);
  --on-night-soft: oklch(0.78 0.02 262);
  --radius-large: 14px;
  --shadow-sheet: 0 1px 1px oklch(0.3 0.02 60 / 0.05), 0 6px 14px oklch(0.3 0.02 60 / 0.06), 0 22px 44px oklch(0.3 0.02 60 / 0.09);
  --shadow-card: 0 1px 2px oklch(0.3 0.02 60 / 0.05), 0 4px 12px oklch(0.3 0.02 60 / 0.05);
  --wrap: 1180px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
}

/* ---------- 2. Base elements ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.024em; font-weight: 560; }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.3vw, 2.85rem); letter-spacing: -0.018em; font-weight: 560; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--accent); }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure, blockquote, dl, dd { margin: 0; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
b, strong { font-weight: 600; }
table { border-collapse: collapse; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--mark); color: var(--ink); }

/* The hidden attribute wins over any display rule below. */
[hidden] { display: none !important; }

.icon { width: 1.15em; height: 1.15em; flex: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -4rem; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 0.6rem 0.9rem; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* ---------- 3. Layout helpers ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * 20px);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

.band { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.band-rule { border-block: 1px solid var(--rule); padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); }
.band-sunk { background: var(--paper-sunk); border-block: 1px solid var(--rule); }
.band-tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.section-head { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section-sub { font-size: 1.15rem; color: var(--ink-soft); max-width: 40rem; }
.section-foot { margin-top: 2rem; }

.eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
}
.eyebrow-tick { width: 0.55rem; height: 0.55rem; background: var(--accent); border-radius: 1px; flex: none; }

.lede { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); max-width: 36rem; }

.cite { font-family: var(--font-mono); font-size: 0.84em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cite-struck { text-decoration: line-through; text-decoration-color: var(--warn-line); text-decoration-thickness: 2px; }
.bates { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-faint); }

.link-arrow { font-weight: 550; text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.4em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg) translateY(-0.08em); transition: transform 0.15s ease; }
.link-arrow:hover::after { transform: translateX(0.2em) rotate(45deg) translateY(-0.08em); }

.ticks { display: grid; gap: 0.5rem; }
.ticks li { position: relative; padding-left: 1.7rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.42em; width: 0.8rem; height: 0.42rem;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg);
}

/* ---------- 4. Header and footer ---------- */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: oklch(0.975 0.004 85 / 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header-row { display: flex; align-items: center; gap: 1rem 2rem; min-height: 4rem; flex-wrap: wrap; padding-block: 0.6rem; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 1.75rem; height: 1.75rem; border-radius: 6px; }
.brand-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 620; letter-spacing: -0.015em; }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.6rem; margin-left: auto; font-size: 0.95rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; padding-block: 0.3rem; border-bottom: 2px solid transparent; font-weight: 480; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.site-header-cta { margin-left: 0.4rem; }

.site-footer { background: var(--night); color: var(--on-night-soft); font-size: 0.95rem; }
.site-footer a { color: var(--on-night); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--on-night); }
.site-footer :focus-visible { outline-color: var(--on-night); }
.site-footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding-block: 3.5rem 2.5rem; }
.site-footer-about { display: grid; gap: 1rem; align-content: start; max-width: 26rem; }
.site-footer .brand-name { color: var(--on-night); }
.site-footer-nav { display: grid; gap: 0.55rem; align-content: start; }
.site-footer-nav h2 { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--on-night-soft); margin-bottom: 0.3rem; }
.site-footer-legal { border-top: 1px solid var(--night-rule); padding-block: 1.5rem 2.5rem; display: grid; gap: 0.5rem; font-size: 0.88rem; }
.site-footer-legal p:first-child { color: var(--on-night); font-weight: 520; }

/* ---------- 5. Buttons, tags, chips ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-size: 0.95rem; font-weight: 560; line-height: 1.2;
  padding: 0.62rem 1.05rem; border-radius: var(--radius);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary { background: var(--accent); color: var(--paper-raised); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14), 0 1px 2px oklch(0.3 0.1 258 / 0.3); }
.btn-primary:hover { background: var(--accent-strong); color: var(--paper-raised); transform: translateY(-1px); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14), 0 5px 14px oklch(0.3 0.1 258 / 0.28); }
.btn-quiet { background: var(--paper-raised); color: var(--ink); border-color: var(--rule-strong); }
.btn-quiet:hover { border-color: var(--ink-soft); color: var(--ink); }
.btn-large { font-size: 1.02rem; padding: 0.85rem 1.3rem; }
.btn .icon { width: 1.1em; height: 1.1em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* The small print under a download button: the demo files and what the build is. */
.download-note { display: grid; gap: 0.35rem; max-width: 38rem; font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); padding-left: 0.9rem; border-left: 2px solid var(--rule-strong); }
.cta-box .download-note { grid-column: 1 / -1; max-width: 46rem; }
.cta-box .cta-plain { margin-top: 0.6rem; font-weight: 600; color: var(--ink); }

.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.16rem 0.5rem; border-radius: 99px; border: 1px solid var(--rule-strong); color: var(--ink-soft); background: var(--paper-raised);
  white-space: nowrap;
}
.tag-ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.tag-warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.tag-accent { color: var(--accent); border-color: oklch(0.75 0.07 258); background: var(--accent-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; line-height: 1.3; letter-spacing: 0;
  padding: 0.12rem 0.6rem; border-radius: 99px; border: 1px solid; white-space: nowrap;
}
.chip-ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.chip-warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.chip-bad { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }

/* Words the witness said that a quotation left out. */
.dropped { border-radius: 3px; transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; }
.dropped.is-shown { background: var(--bad-soft); color: var(--bad); box-shadow: 0 0 0 2px var(--bad-soft), inset 0 -2px 0 var(--bad-line); font-weight: 600; }

/* ---------- 6. Transcript sheet ---------- */

/* A page of testimony: a file tab, then numbered lines with a page:line gutter. */
.sheet {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.9rem; background: var(--paper-sunk); border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft);
}
.sheet-file { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink); }

.t-lines { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5; padding-block: 0.4rem; }
.t-line { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: baseline; transition: background-color 0.45s ease; }
.t-ref {
  text-align: right; padding: 0.24rem 0.6rem 0.24rem 0; color: var(--ink-faint); font-size: 0.72rem;
  font-variant-numeric: tabular-nums; border-right: 1px solid var(--rule); align-self: stretch;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.t-text { padding: 0.24rem 0.8rem 0.24rem 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.t-qa { font-weight: 700; color: var(--ink-soft); margin-right: 0.4em; }
.t-speech .t-text { padding-left: 2.4rem; color: var(--ink-soft); }
.t-line.is-hit { background: var(--mark); }
.t-line.is-hit .t-ref { color: var(--ink); font-weight: 700; background: oklch(0.87 0.13 96); }

/* ---------- 7. Hero and its animation ---------- */

.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) clamp(3.5rem, 2rem + 5vw, 6rem); position: relative; overflow: hidden; }
/* Faint ruled lines behind the stage, like the page the product reads. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, oklch(0.42 0.11 258 / 0.07) 31px 32px);
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at 78% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 85% at 78% 45%, #000 0%, transparent 72%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.hero-copy { display: grid; gap: 1.6rem; justify-items: start; }
.hero-facts { display: grid; gap: 0.4rem; font-size: 0.93rem; color: var(--ink-soft); }
.hero-facts li { display: flex; align-items: flex-start; gap: 0.5rem; }
.hero-facts .icon { color: var(--ok); margin-top: 0.22em; }

/* The stage is a plain column: the brief's paragraph, the transcript page,
   the verdict, the controls, the note. Nothing is placed over anything else,
   so the page header and every transcript line stay readable at any width. */
.hero-stage { position: relative; display: grid; justify-items: start; }
.hero-sheet { margin-left: 2.6rem; justify-self: stretch; }

/* The brief card and the verdict card each hold both passes in one grid cell.
   The pass not showing is hidden but still takes its space, so the stage
   keeps one height and nothing jumps when the passes swap. */
.brief-card {
  position: relative; z-index: 2; width: min(31rem, 86%); margin-bottom: 0.9rem;
  display: grid;
  background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 6px;
  padding: 1rem 1.2rem 1.1rem; box-shadow: var(--shadow-sheet);
  font-family: var(--font-display); font-size: 1.02rem; line-height: 1.45;
  transform: rotate(-1.4deg); transform-origin: 20% 50%;
}
.brief-card-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.45rem; }
.brief-card q { background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 0.7s ease; border-radius: 2px; }
.brief-card .cite { color: var(--ink-soft); }
.brief-card > p, .verdict-card > .verdict { grid-area: 2 / 1; }

.verdict-card {
  position: relative; z-index: 2; display: grid; justify-self: end; width: min(26rem, 86%); margin-top: 0.8rem;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.verdict {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.9rem 1.05rem; border-radius: 10px; border: 1px solid; box-shadow: var(--shadow-sheet);
}
.verdict-icon { width: 1.6rem; height: 1.6rem; margin-top: 0.05rem; }
.verdict-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 650; font-size: 1.02rem; }
.verdict-text { font-size: 0.92rem; line-height: 1.45; color: var(--ink); margin-top: 0.2rem; }
.verdict-ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.verdict-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.verdict-bad { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }

.hero-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 1rem 0 0 2.6rem; }
.hero-note { margin: 0.6rem 0 0 2.6rem; font-size: 0.74rem; color: var(--ink-faint); line-height: 1.35; }
.hero-toggle, .hero-pick {
  font: inherit; font-size: 0.78rem; font-weight: 520; color: var(--ink-soft); cursor: pointer;
  background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 99px; padding: 0.3rem 0.7rem; line-height: 1.3;
}
.hero-toggle { padding: 0.36rem; display: inline-grid; place-items: center; }
.hero-toggle .icon { width: 0.95rem; height: 0.95rem; }
.hero-pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hero-toggle:hover, .hero-pick:hover { border-color: var(--ink-soft); }

/* Which pass is showing. */
.hero-stage[data-pass="exact"] .hero-only-qualifier,
.hero-stage[data-pass="qualifier"] .hero-only-exact { visibility: hidden; }
.hero-stage[data-pass="exact"] span.hero-only-qualifier,
.hero-stage[data-pass="qualifier"] span.hero-only-exact { display: none; }

/* Step 0: the quotation arrives. Step 1: the page is scanned.
   Step 2: the matching lines light up. Step 3: the verdict resolves. */
.hero-stage[data-step="0"] .brief-card { animation: brief-arrives 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes brief-arrives {
  from { opacity: 0; transform: translate(-2.5rem, -1.5rem) rotate(-7deg); }
  to { opacity: 1; transform: rotate(-1.4deg); }
}

.scan-bar {
  position: absolute; left: 0; right: 0; top: 2.2rem; height: 2.4rem; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent, oklch(0.42 0.11 258 / 0.13) 70%, oklch(0.42 0.11 258 / 0.5) 100%);
  border-bottom: 2px solid var(--accent);
}
.hero-stage[data-step="1"] .scan-bar { animation: scan-down 1.1s cubic-bezier(0.45, 0, 0.3, 1) both; }
@keyframes scan-down {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--scan-distance, 11rem)); }
}
.hero-stage[data-pass="exact"] { --scan-distance: 8.4rem; }
.hero-stage[data-pass="qualifier"] { --scan-distance: 11.8rem; }
/* Where the stage is narrow beside the copy, three lines above the quotations wrap. */
@media (min-width: 901px) and (max-width: 1100px) {
  .hero-stage[data-pass="exact"] { --scan-distance: 12rem; }
  .hero-stage[data-pass="qualifier"] { --scan-distance: 15.4rem; }
}

.hero-stage[data-pass="exact"]:is([data-step="2"], [data-step="3"]) .hit-exact,
.hero-stage[data-pass="qualifier"]:is([data-step="2"], [data-step="3"]) .hit-qualifier { background: var(--mark); }
.hero-stage[data-pass="exact"]:is([data-step="2"], [data-step="3"]) .hit-exact .t-ref,
.hero-stage[data-pass="qualifier"]:is([data-step="2"], [data-step="3"]) .hit-qualifier .t-ref { color: var(--ink); font-weight: 700; background: oklch(0.87 0.13 96); }
.hero-stage[data-pass="exact"]:is([data-step="2"], [data-step="3"]) .brief-card q { background-size: 100% 100%; }
.hero-stage[data-pass="qualifier"]:is([data-step="2"], [data-step="3"]) .dropped {
  background: var(--bad-soft); color: var(--bad); font-weight: 700;
  box-shadow: 0 0 0 2px var(--bad-soft), 0 0 0 3.5px var(--bad-line);
}

.hero-stage:not([data-step="3"]) .verdict-card { opacity: 0; transform: translateY(0.8rem) scale(0.96); }

/* ---------- 8. The promise and the tool panels (home) ---------- */

.promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promise li { display: grid; gap: 0.6rem; align-content: start; padding-inline: clamp(1rem, 2.5vw, 2.5rem); border-left: 1px solid var(--rule); }
.promise li:first-child { padding-left: 0; border-left: 0; }
.promise li:last-child { padding-right: 0; }
.promise p { color: var(--ink-soft); font-size: 1rem; }
.promise-icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule-strong); background: var(--paper-raised); color: var(--accent); margin-bottom: 0.3rem; }
.promise-icon .icon { width: 1.25rem; height: 1.25rem; }

.tool { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-large); box-shadow: var(--shadow-card); }
.tool h3 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); }
.tool p { color: var(--ink-soft); }
.tool-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink) !important; font-weight: 500; }
.tool-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; font-size: 0.97rem; }

.tool-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); overflow: hidden; }
.tool-copy { display: grid; gap: 1.1rem; align-content: center; padding: clamp(1.5rem, 3vw, 2.75rem); }
.tool-visual { background: var(--paper-sunk); border-left: 1px solid var(--rule); padding: clamp(1.2rem, 2.4vw, 2.2rem); display: grid; align-content: center; }

.mini-verdicts { display: grid; gap: 0.6rem; }
.mini-verdict {
  position: relative; display: grid; gap: 0.4rem; padding: 0.8rem 1rem 0.8rem 1.4rem;
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius);
}
.mini-dot { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--radius) 0 0 var(--radius); }
.is-ok .mini-dot { background: var(--ok-line); }
.is-warn .mini-dot { background: var(--warn-line); }
.is-bad .mini-dot { background: var(--bad-line); }
.mini-quote { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.4; color: var(--ink) !important; }
.mini-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; font-size: 0.85rem; }
.mini-meta .cite { color: var(--ink-soft); margin-right: 0.2rem; }
.mini-fix { color: var(--ink-soft); }
.mini-fix b { font-family: var(--font-mono); color: var(--ink); }

.tool-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.tool-stack { display: grid; gap: 1.1rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.5rem); grid-template-rows: auto auto auto 1fr auto; }

/* Small picture of the summary boundary: four boxes joined by arrows. */
.mini-boundary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; align-self: center; padding: 1.1rem; background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: var(--radius); }
.mb-box { display: grid; gap: 0.1rem; padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--paper-raised); font-size: 0.82rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.mb-box small { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0.02em; }
.mb-model { border-style: dashed; border-color: var(--ink-faint); border-radius: 99px; padding-inline: 0.8rem; }
.mb-code { border-color: oklch(0.75 0.07 258); background: var(--accent-soft); color: var(--accent-strong); }
.mb-person { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.mb-arrow { position: relative; flex: 1 1 0.7rem; min-width: 0.7rem; max-width: 2rem; height: 1.5px; background: var(--ink-faint); }
.mb-arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-top: 1.5px solid var(--ink-faint); border-right: 1.5px solid var(--ink-faint); transform: translateY(-50%) rotate(45deg); }

/* Small picture of a chronology entry beside its page. */
.mini-entry { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 1rem; align-items: stretch; align-self: center; padding: 1.1rem; background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: var(--radius); }
.mini-entry-text { display: grid; gap: 0.3rem; align-content: start; font-size: 0.86rem; line-height: 1.4; color: var(--ink); }
.mini-entry-date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-soft); }
.mini-entry mark, .entry-card mark { background: var(--mark); color: inherit; padding: 0.05em 0.15em; border-radius: 2px; }
.mini-page { position: relative; background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0.7rem 0.6rem 1.5rem; display: grid; gap: 0.42rem; align-content: start; box-shadow: var(--shadow-card); }
.mini-page .bates { position: absolute; right: 0.4rem; bottom: 0.3rem; font-size: 0.5rem; }
.mp-head { height: 0.5rem; background: var(--ink); border-radius: 1px; margin-bottom: 0.2rem; }
.mp-line { height: 0.3rem; background: var(--rule-strong); border-radius: 1px; }
.mp-line.is-hit { background: oklch(0.82 0.14 96); box-shadow: 0 0 0 2px var(--mark); }
.w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }

.later-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem; margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius-large); color: var(--ink-soft); font-size: 0.97rem; }
.later-card p { flex: 1 1 24rem; }
.later-card b { color: var(--ink); }

/* ---------- 9. Verdict legend ---------- */

.legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.legend-col { display: grid; gap: 0.9rem; padding: 1.4rem; background: var(--paper-raised); border: 1px solid var(--rule); border-top: 4px solid; border-radius: var(--radius-large); box-shadow: var(--shadow-card); }
.legend-col > header { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.6rem; align-items: center; }
.legend-col > header .icon { width: 1.5rem; height: 1.5rem; }
.legend-col > header p { grid-column: 1 / -1; color: var(--ink-soft); font-size: 0.95rem; }
.legend-col h3 { font-size: 1.3rem; }
.legend-ok { border-top-color: var(--ok-line); } .legend-ok > header .icon, .legend-ok h3 { color: var(--ok); }
.legend-warn { border-top-color: var(--warn-line); } .legend-warn > header .icon, .legend-warn h3 { color: var(--warn); }
.legend-bad { border-top-color: var(--bad-line); } .legend-bad > header .icon, .legend-bad h3 { color: var(--bad); }
.legend-quote { display: grid; gap: 0.5rem; padding: 0.85rem 1rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--rule); }
.legend-quote > p { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.4; }
.legend-quote > p::before { content: "\201C"; } .legend-quote > p::after { content: "\201D"; }
.legend-quote footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: 0.85rem; color: var(--ink-soft); }
.legend-why { flex: 1 1 100%; }
.legend-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- 10. How it works, screenshot windows ---------- */

.how { display: grid; gap: clamp(3rem, 6vw, 5.5rem); }
.how-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.how-step-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.how-step-flip .how-copy { order: 2; }
.how-copy { display: grid; gap: 0.9rem; align-content: center; }
.how-copy p { color: var(--ink-soft); }
.how-copy h3 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); }
.how-num {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--accent);
  border: 1px solid oklch(0.75 0.07 258); background: var(--accent-soft);
}

/* A screenshot in a plain window frame, caption underneath. */
.window { display: grid; gap: 0.7rem; }
.window-bar {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem;
  background: var(--paper-sunk); border: 1px solid var(--rule-strong); border-bottom: 0; border-radius: 10px 10px 0 0;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft);
}
.window-bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--rule-strong); }
.window-bar span { margin-left: 0.5rem; }
.window img { width: 100%; border: 1px solid var(--rule-strong); border-radius: 0 0 10px 10px; box-shadow: var(--shadow-sheet); margin-top: -0.7rem; background: var(--paper-raised); }
/* Each screenshot is a link to the full-size capture, since the text in it is small. */
.shot-link { position: relative; display: block; margin-top: -0.7rem; border-radius: 0 0 10px 10px; }
.shot-link img { margin-top: 0; }
.shot-zoom { position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.25rem 0.6rem; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 0.74rem; font-weight: 550; line-height: 1.3; }
.shot-link:hover .shot-zoom, .shot-link:focus-visible .shot-zoom { background: var(--accent); }
.window figcaption { font-size: 0.88rem; color: var(--ink-soft); padding-left: 0.2rem; }
.window figcaption::before { content: ""; display: inline-block; width: 1.2rem; height: 1px; background: var(--ink-faint); vertical-align: middle; margin-right: 0.5rem; }

.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.shots-wide { grid-template-columns: minmax(0, 1fr); max-width: 60rem; }

/* ---------- 11. Results band, limits, closing call ---------- */

.band-night { background: var(--night); color: var(--on-night); position: relative; }
.band-night .eyebrow { color: var(--on-night-soft); }
.band-night .eyebrow-tick { background: var(--mark); }
.band-night .section-sub { color: var(--on-night-soft); }
.band-night a { color: var(--on-night); }
.band-night :focus-visible { outline-color: var(--mark); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--night-rule); }
.stat { display: grid; gap: 0.5rem; align-content: start; padding: 2rem clamp(1rem, 2.5vw, 2.25rem) 2.25rem; border-bottom: 1px solid var(--night-rule); border-left: 1px solid var(--night-rule); }
.stat:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.stat dt { font-size: 0.98rem; font-weight: 520; color: var(--on-night); min-height: 3.2em; }
.stat-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.6rem; font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums; line-height: 1; }
.stat-num { font-size: clamp(3.2rem, 2rem + 4.4vw, 5.4rem); font-weight: 480; letter-spacing: -0.03em; color: var(--on-night); }
.stat-of { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); color: var(--on-night-soft); font-style: italic; }
.stat-note { font-size: 0.88rem; line-height: 1.5; color: var(--on-night-soft); }

/* Footnote marker linking a number to How we test. */
.fn {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: 0.25rem;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; line-height: 1; text-decoration: none;
  border: 1px solid currentColor; border-radius: 99px; vertical-align: 0.1em; margin-left: 0.15rem;
}
.fn:hover { background: var(--mark); color: var(--ink) !important; border-color: var(--mark); }

/* On paper: the same numbers, set in ink. */

.limits-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.limits-grid .section-head { margin-bottom: 0; position: sticky; top: 6rem; }
/* What leaves the computer: one row per tool. */
.leaves { display: grid; border-top: 1px solid var(--rule-strong); }
.leaves-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0.5rem 2rem; padding-block: 1.3rem; border-bottom: 1px solid var(--rule-strong); }
.leaves-row dt { display: grid; gap: 0.5rem; justify-items: start; align-content: start; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.leaves-row dd { color: var(--ink-soft); max-width: 46rem; }
.leaves-row dd b { color: var(--ink); }

.limits { display: grid; }
.limits li { position: relative; padding: 1.15rem 0 1.15rem 2.1rem; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.limits li:last-child { border-bottom: 1px solid var(--rule); }
.limits li b { color: var(--ink); }
.limits li::before {
  content: ""; position: absolute; left: 0.15rem; top: 1.6rem; width: 0.85rem; height: 0.85rem; border-radius: 50%;
  border: 2px solid var(--warn-line); background: var(--warn-soft);
}

.band-cta { padding-top: 0; }
.cta-box {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center;
  max-width: var(--wrap); padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--accent-soft); border: 1px solid oklch(0.82 0.05 258); border-radius: var(--radius-large);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, oklch(0.42 0.11 258 / 0.06) 31px 32px);
}
.cta-box h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin-bottom: 0.6rem; }
.cta-box p { color: var(--ink-soft); max-width: 36rem; }

/* ---------- 12. Tool pages ---------- */

.page-hero { padding-block: clamp(2.5rem, 1rem + 5vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5rem); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.page-hero-copy { display: grid; gap: 1.4rem; justify-items: start; }
.page-hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.6rem); line-height: 1.05; }
.page-hero-solo { max-width: 50rem; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

/* A notice that must not be missed, such as "synthetic records only". */
.notice {
  display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1.1rem;
  background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--radius); color: var(--ink); font-size: 0.98rem;
}
.notice .icon { color: var(--warn); width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; }
.notice b { color: var(--warn); }
.notice-band { background: var(--warn-soft); border-bottom: 1px solid var(--warn-line); padding-block: 0.7rem; font-size: 0.95rem; }
.notice-band .wrap { display: flex; gap: 0.7rem; align-items: flex-start; }
.notice-band .icon { color: var(--warn); margin-top: 0.2rem; }

/* The stacked example card in a tool page's hero. */
.example { display: grid; gap: 0.9rem; }
.example .verdict { box-shadow: var(--shadow-card); }
.hero-note-static { font-size: 0.8rem; color: var(--ink-faint); line-height: 1.4; }
.example-quote { background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 1rem 1.2rem; box-shadow: var(--shadow-card); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.45; }

/* Numbered steps down a rule: a real sequence. */
.steps { display: grid; counter-reset: step; max-width: 50rem; }
.steps > li { position: relative; counter-increment: step; display: grid; gap: 0.4rem; padding: 0 0 2.2rem 4rem; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -0.2rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--accent);
  border: 1px solid oklch(0.75 0.07 258); background: var(--accent-soft); z-index: 1;
}
.steps > li::after { content: ""; position: absolute; left: 1.25rem; top: 2.5rem; bottom: 0.2rem; width: 1px; background: var(--rule-strong); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps h3 { font-size: 1.3rem; }
.steps p { color: var(--ink-soft); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.split-wide-left { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.prose { display: grid; gap: 1rem; align-content: start; }
.prose p, .prose li { color: var(--ink-soft); }
.prose h3 { margin-top: 0.6rem; }

/* Cards in a grid: what a tool refuses, what it reads, what it delivers. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: grid; gap: 0.5rem; align-content: start; padding: 1.25rem; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-large); }
.card h3 { font-size: 1.15rem; }
.card p { color: var(--ink-soft); font-size: 0.96rem; }
.card-icon { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: 0.3rem; }
.card-refuse .card-icon { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad-line); }
.card-flag .card-icon { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }
.card-keep .card-icon { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); }
.card-plain .card-icon { background: var(--accent-soft); color: var(--accent); border: 1px solid oklch(0.75 0.07 258); }
.card-example { font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.5; color: var(--ink); background: var(--paper-sunk); border-radius: 6px; padding: 0.5rem 0.65rem; margin-top: 0.2rem; }
.card-example s { color: var(--bad); text-decoration-thickness: 1.5px; }
.card-example ins { color: var(--bad); text-decoration: none; background: var(--bad-soft); font-weight: 700; padding-inline: 0.15em; border-radius: 2px; }

/* Small drawings of transcript layouts. */
.layout-art { height: 6.5rem; border-radius: 6px; background: var(--paper-sunk); border: 1px solid var(--rule); display: grid; place-items: center; margin-bottom: 0.4rem; }
.la-page { position: relative; width: 3.6rem; height: 4.7rem; background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 2px; box-shadow: var(--shadow-card);
  background-image: linear-gradient(to right, transparent 0.75rem, var(--rule) 0.75rem, var(--rule) calc(0.75rem + 1px), transparent calc(0.75rem + 1px)), repeating-linear-gradient(to bottom, transparent 0 0.3rem, var(--rule-strong) 0.3rem calc(0.3rem + 1.5px), transparent calc(0.3rem + 1.5px) 0.55rem);
  background-size: 100% 100%, calc(100% - 1.5rem) calc(100% - 0.8rem); background-position: 0 0, 1.05rem 0.3rem; background-repeat: no-repeat; }
.la-condensed { width: 5.4rem; height: 4.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.3rem; background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 2px; box-shadow: var(--shadow-card); }
.la-condensed i { border: 1px solid var(--rule-strong); background-image: repeating-linear-gradient(to bottom, transparent 0 0.22rem, var(--rule-strong) 0.22rem calc(0.22rem + 1px), transparent calc(0.22rem + 1px) 0.42rem); background-size: 70% 80%; background-position: 70% 50%; background-repeat: no-repeat; }
.la-txt { font-family: var(--font-mono); font-size: 0.5rem; line-height: 1.5; color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 0.4rem 0.5rem; box-shadow: var(--shadow-card); white-space: pre; }
.la-image { position: relative; }
.la-image::after { content: ""; position: absolute; left: -0.3rem; top: -0.3rem; bottom: -0.3rem; width: 1.3rem; border: 1.5px dashed var(--accent); border-radius: 3px; background: oklch(0.42 0.11 258 / 0.08); }

/* Tables of facts. They scroll sideways inside their own box on a phone. */
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-large); background: var(--paper-raised); }
.data-table { width: 100%; font-size: 0.95rem; min-width: 34rem; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 0.8rem 1rem; border-bottom: 1px solid var(--rule); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table thead th { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-sunk); }
.data-table td { color: var(--ink-soft); }
.data-table td:first-child { color: var(--ink); }
.data-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); font-weight: 600; }
.data-table .date { font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap; }
.row-ok td:first-child { box-shadow: inset 4px 0 0 var(--ok-line); }
.row-warn td:first-child { box-shadow: inset 4px 0 0 var(--warn-line); }
.row-bad td:first-child { box-shadow: inset 4px 0 0 var(--bad-line); }

/* The summary's boundary diagram: what the model sees and what it never sees. */
.boundary {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1.15fr) 2.6rem minmax(0, 1.25fr) 2.6rem minmax(0, 0.8fr) 2.6rem minmax(0, 1.25fr) 2.6rem minmax(0, 1.1fr);
  grid-template-areas:
    "record a1 package a2 model a3 gate a4 review"
    "record a5 sidecar long long long gate a6 rejects";
  row-gap: 1.6rem; align-items: stretch;
  padding: clamp(1.25rem, 2.5vw, 2.25rem); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-large); box-shadow: var(--shadow-card);
}
.b-node { display: grid; gap: 0.45rem; align-content: start; padding: 1rem; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--paper); font-size: 0.9rem; min-width: 0; }
.b-node h3 { font-family: var(--font-body); font-size: 0.98rem; font-weight: 650; letter-spacing: 0; display: flex; align-items: center; gap: 0.45rem; }
.b-node ul { display: grid; gap: 0.25rem; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.4; }
.b-node li { padding-left: 0.9rem; position: relative; }
.b-node li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 1px; background: var(--ink-faint); }
.b-who { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.b-record { grid-area: record; align-content: center; }
.b-package { grid-area: package; border-color: oklch(0.75 0.07 258); background: var(--accent-soft); }
.b-model { grid-area: model; border-style: dashed; border-color: var(--ink-faint); border-radius: 99px; place-content: center; text-align: center; justify-items: center; padding: 1.2rem 0.6rem; }
.b-gate { grid-area: gate; align-content: center; border-color: var(--ink); border-width: 1.5px; background: var(--paper-raised); box-shadow: var(--shadow-card); }
.b-review { grid-area: review; border-color: var(--ok-line); background: var(--ok-soft); }
.b-sidecar { grid-area: sidecar; border-style: solid; background-color: var(--paper-sunk); background-image: repeating-linear-gradient(135deg, transparent 0 7px, oklch(0.5 0.01 60 / 0.07) 7px 8px); }
.b-rejects { grid-area: rejects; border-color: var(--bad-line); background: var(--bad-soft); }
.b-rejects ul { color: var(--bad); }
.b-rejects li::before { background: var(--bad); }

/* Arrows between the boxes. Each is a thin line with a head; some carry a label. */
.b-arrow { position: relative; align-self: center; height: 1.5px; background: var(--ink-soft); margin-inline: 0.35rem; }
.b-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--ink-soft); border-right: 1.5px solid var(--ink-soft); transform: translateY(-50%) rotate(45deg); }
.b-a1 { grid-area: a1; } .b-a2 { grid-area: a2; } .b-a3 { grid-area: a3; } .b-a4 { grid-area: a4; } .b-a5 { grid-area: a5; } .b-a6 { grid-area: a6; }
.b-a6 { background: var(--bad-line); } .b-a6::after { border-color: var(--bad-line); }
.b-long { grid-area: long; align-self: center; position: relative; height: 1.5px; margin-inline: 0.35rem; background-image: linear-gradient(to right, var(--ink-soft) 60%, transparent 60%); background-size: 10px 100%; }
.b-long::after { content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--ink-soft); border-right: 1.5px solid var(--ink-soft); transform: translateY(-50%) rotate(45deg); }
.b-long span { position: absolute; left: 50%; top: 0.6rem; transform: translateX(-50%); width: max-content; max-width: 100%; text-align: center; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-soft); background: var(--paper-raised); padding-inline: 0.4rem; }
.b-long b { position: absolute; left: 50%; bottom: 0.7rem; transform: translateX(-50%); width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bad); }
/* A slow drift along the dashed line: page numbers travelling past the model, not through it. */
.b-long { animation: dash-drift 1.2s linear infinite; }
@keyframes dash-drift { to { background-position: 10px 0; } }

.boundary-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; font-size: 0.88rem; color: var(--ink-soft); }
.boundary-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.key-swatch { width: 0.9rem; height: 0.9rem; border-radius: 3px; border: 1px solid var(--rule-strong); }
.key-sent { background: var(--accent-soft); border-color: oklch(0.75 0.07 258); }
.key-kept { background-color: var(--paper-sunk); background-image: repeating-linear-gradient(135deg, transparent 0 3px, oklch(0.5 0.01 60 / 0.2) 3px 4px); }

/* Two lists side by side: what the model receives, what it never receives. */
.sees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.sees-col { padding: 1.5rem; border-radius: var(--radius-large); border: 1px solid var(--rule); background: var(--paper-raised); display: grid; gap: 0.9rem; align-content: start; }
.sees-col h3 { display: flex; align-items: center; gap: 0.55rem; font-size: 1.3rem; }
.sees-col ul { display: grid; gap: 0.55rem; }
.sees-col li { position: relative; padding-left: 1.7rem; color: var(--ink-soft); }
.sees-yes { border-top: 4px solid oklch(0.62 0.1 258); }
.sees-yes li::before { content: ""; position: absolute; left: 0.2rem; top: 0.42em; width: 0.8rem; height: 0.42rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.sees-no { border-top: 4px solid var(--bad-line); background-image: repeating-linear-gradient(135deg, transparent 0 9px, oklch(0.5 0.01 60 / 0.045) 9px 10px); }
.sees-no h3 .icon { color: var(--bad); }
.sees-no li::before, .sees-no li::after { content: ""; position: absolute; left: 0.15rem; top: 0.72em; width: 0.9rem; height: 2px; background: var(--bad); border-radius: 1px; }
.sees-no li::before { transform: rotate(45deg); } .sees-no li::after { transform: rotate(-45deg); }

/* The chronology pipeline: eight stages on one line. */
.pipeline { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.75rem; counter-reset: stage; }
.pipeline::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 2px; background: var(--rule-strong); }
/* A marker that travels the line once the strip is on screen. */
.pipeline::after { content: ""; position: absolute; left: 1.4rem; top: calc(1.4rem - 3px); width: 2.5rem; height: 8px; border-radius: 99px; background: linear-gradient(to right, transparent, var(--accent)); opacity: 0; animation: pipeline-run 7s linear infinite; }
@keyframes pipeline-run { 0% { left: 1.4rem; opacity: 0; } 5% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 4rem); opacity: 0; } }
.stage { position: relative; display: grid; gap: 0.35rem; align-content: start; counter-increment: stage; }
.stage-icon { position: relative; z-index: 1; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper-raised); border: 1.5px solid var(--ink); color: var(--ink); margin-bottom: 0.5rem; }
.stage-icon .icon { width: 1.25rem; height: 1.25rem; }
.stage h3 { font-family: var(--font-body); font-size: 0.98rem; font-weight: 650; letter-spacing: 0; line-height: 1.25; }
.stage h3::before { content: counter(stage) ". "; color: var(--ink-faint); font-weight: 500; }
.stage p { font-size: 0.84rem; line-height: 1.45; color: var(--ink-soft); }
.stage .tag { justify-self: start; margin-top: 0.15rem; }
.stage-model .stage-icon { border-style: dashed; border-color: var(--ink-soft); color: var(--ink-soft); }
.stage-person .stage-icon { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.stage-check .stage-icon { border-color: var(--accent); color: var(--paper-raised); background: var(--accent); }

/* A chronology entry beside the text of its page, drawn in HTML. */
.entry-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 1.25rem; align-items: stretch; }
.entry-card { background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 1.25rem; display: grid; gap: 0.6rem; align-content: start; box-shadow: var(--shadow-card); }
.entry-title { font-family: var(--font-body); font-size: 1.05rem; font-weight: 650; letter-spacing: 0; }
.entry-card ul { display: grid; gap: 0.35rem; border-left: 2px solid var(--rule-strong); padding-left: 0.8rem; font-size: 0.95rem; }
.entry-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.entry-date { font-family: var(--font-mono); font-size: 0.85rem; }
.record-page { background: #fff; border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0; box-shadow: var(--shadow-sheet); font-family: Georgia, "Times New Roman", serif; font-size: 0.76rem; line-height: 1.5; color: #222; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.record-page-head { background: #2b2b2b; color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 0.82rem; padding: 0.5rem 1rem; }
.record-page-body { display: grid; gap: 0.55rem; align-content: start; padding: 0.9rem 1rem 1.4rem; }
.record-page-body div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0.5rem; }
.record-page-body b { font-weight: 700; }
.record-page mark { background: var(--mark); color: inherit; }
.record-page-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.4rem 1rem 0.5rem; font-family: Arial, Helvetica, sans-serif; font-size: 0.46rem; letter-spacing: 0.03em; color: #555; }
.record-page-foot .bates { font-size: 0.55rem; color: #333; }

/* The explainer animation, embedded from the same site. */
.explainer { display: grid; gap: 0.8rem; }
.explainer-frame { display: block; width: 100%; aspect-ratio: 16 / 11.4; border: 1px solid var(--rule-strong); border-radius: var(--radius-large); background: var(--paper-raised); box-shadow: var(--shadow-sheet); }
.explainer-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- 13. How we test ---------- */

.toc { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.toc a { font-size: 0.9rem; font-weight: 520; text-decoration: none; color: var(--ink); padding: 0.35rem 0.8rem; border: 1px solid var(--rule-strong); border-radius: 99px; background: var(--paper-raised); }
.toc a:hover { border-color: var(--ink-soft); }

.test-block { display: grid; gap: 1.4rem; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.test-block > header { display: grid; gap: 0.7rem; max-width: 46rem; }
.test-block > header p { color: var(--ink-soft); }
.test-num { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; border: 1px solid var(--ink); border-radius: 99px; }
.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.gaps { display: grid; gap: 0; max-width: 52rem; }
.gaps li { position: relative; padding: 0.85rem 0 0.85rem 2rem; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.gaps li:last-child { border-bottom: 1px solid var(--rule); }
.gaps li::before { content: ""; position: absolute; left: 0.15rem; top: 1.3rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--warn-line); background: var(--warn-soft); }
.gaps b { color: var(--ink); }

.not-found { min-height: 60vh; display: grid; align-content: center; gap: 1.4rem; justify-items: start; }
.not-found .sheet { width: min(34rem, 100%); }

/* ---------- 14. Reveal on scroll, reduced motion, small screens, print ---------- */

/* site.js adds .will-reveal only to blocks that start below the screen, so
   the page is complete without script and nothing above the fold flickers. */
.will-reveal { opacity: 0; transform: translateY(18px); }
.will-reveal.is-seen { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .will-reveal { opacity: 1; transform: none; }
  .pipeline::after { display: none; }
}

@media (max-width: 1080px) {
  .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2rem; }
  .pipeline::before, .pipeline::after { display: none; }
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The boundary diagram turns on its side: the flow runs downwards, with
     what is sent to the model on the left and what is never sent on the right. */
  .boundary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0;
    grid-template-areas: "record record" "a1 a5" "package sidecar" "a2 long" "model long" "a3 long" "gate gate" "a4 a6" "review rejects";
  }
  .b-arrow { justify-self: center; width: 1.5px; height: 1.9rem; margin: 0.3rem 0; }
  .b-arrow::after, .b-long::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .b-long { height: auto; margin: 0; background: none; animation: none; display: grid; place-items: center; min-height: 9rem; }
  .b-long::before { content: ""; position: absolute; top: 0.3rem; bottom: 0.3rem; left: 50%; width: 1.5px; background-image: linear-gradient(to bottom, var(--ink-soft) 60%, transparent 60%); background-size: 100% 10px; }
  .b-long::after { bottom: 0.3rem; }
  .b-long span { display: none; }
  .b-long b { position: relative; left: auto; bottom: auto; transform: none; width: auto; max-width: 8.5rem; flex-direction: column; text-align: center; background: var(--paper-raised); padding: 0.4rem 0.3rem; line-height: 1.4; }
  .b-model { border-radius: 14px; }
  .b-node { padding: 0.85rem; }
}

/* The home page's small model diagram reads top to bottom once its card is narrow. */
@media (max-width: 72rem) {
  .mini-boundary { flex-direction: column; flex-wrap: nowrap; align-items: stretch; text-align: center; }
  .mb-box { justify-items: center; }
  .mb-model { align-self: center; }
  .mb-arrow { flex: none; align-self: center; width: 1.5px; min-width: 0; max-width: none; height: 1.1rem; }
  .mb-arrow::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
}

@media (max-width: 900px) {
  .hero-grid, .page-hero-grid, .tool-lead, .tool-pair, .how-step, .limits-grid, .split, .split-wide-left, .cta-box, .entry-demo, .sees { grid-template-columns: minmax(0, 1fr); }
  .how-step-flip .how-copy { order: 0; }
  .tool-visual { border-left: 0; border-top: 1px solid var(--rule); }
  .limits-grid .section-head { position: static; }
  .legend, .cards, .method { grid-template-columns: minmax(0, 1fr); }
  .promise { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .promise li { padding-inline: 0; border-left: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .stat:nth-child(n) { padding-left: clamp(1rem, 2.5vw, 2.25rem); border-left: 1px solid var(--night-rule); }
  .stats .stat:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .site-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer-about { grid-column: 1 / -1; }
  .shots { grid-template-columns: minmax(0, 1fr); }
}

/* Phones and narrow tablets. */
@media (max-width: 48rem) {
  /* The hero shows the check before the explanation: heading, stage, then the
     lede, buttons and facts. The copy block's children join the hero grid so
     the stage can sit between them. */
  .hero { padding-top: 1.5rem; }
  .hero-grid { gap: 1.25rem; }
  .hero-copy { display: contents; }
  .hero-copy > .eyebrow { order: 4; }
  .hero-copy > h1 { order: 2; }
  .hero-stage { order: 3; }
  .hero-copy > .lede { order: 5; }
  .hero-copy > .cta-row { order: 6; }
  .hero-copy > .hero-facts { order: 7; }
  .hero-copy > .download-note { order: 8; }
  /* Only the lines around the two quotations, so the whole check fits one screen. */
  .t-wide-only { display: none; }
  .hero-sheet, .hero-controls, .hero-note { margin-left: 0; }
  .hero-stage[data-pass="exact"] { --scan-distance: 5rem; }
  .hero-stage[data-pass="qualifier"] { --scan-distance: 8.4rem; }

  /* Tables: each row becomes a block, each cell labelled with its column heading. */
  .table-scroll { overflow: visible; }
  .data-table { min-width: 0; display: block; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data-table tbody { display: block; }
  .data-table tr { display: block; padding: 0.9rem 1rem; border-bottom: 1px solid var(--rule); }
  .data-table tr:last-child { border-bottom: 0; }
  .data-table td { display: block; padding: 0.35rem 0; border-bottom: 0; }
  .data-table td::before { content: attr(data-label); display: block; margin-bottom: 0.15rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
  .data-table td:empty { display: none; }
  /* The verdict colour runs down the side of the whole block. */
  .data-table tr[class^="row-"] td:first-child { box-shadow: none; }
  .data-table .row-ok { box-shadow: inset 4px 0 0 var(--ok-line); }
  .data-table .row-warn { box-shadow: inset 4px 0 0 var(--warn-line); }
  .data-table .row-bad { box-shadow: inset 4px 0 0 var(--bad-line); }
  .data-table .chip { white-space: normal; }
  .data-table .num, .data-table .date { white-space: normal; }

  .leaves-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* The header becomes two rows: brand and button, then the links. */
  .site-header-row { gap: 0.35rem 1rem; }
  .site-nav { order: 3; flex-basis: 100%; margin-left: 0; gap: 0.1rem 0.7rem; font-size: 0.84rem; justify-content: space-between; }
  .site-header-cta { margin-left: auto; padding: 0.5rem 0.85rem; }
  html { scroll-padding-top: 7rem; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  /* The hero's cards take the full width and sit square. */
  .brief-card, .verdict-card { width: 100%; transform: none; }
  .brief-card { font-size: 0.95rem; padding: 0.8rem 1rem 0.9rem; }
  .hero-stage[data-step="0"] .brief-card { animation-name: brief-arrives-flat; }
  .t-lines { font-size: 0.72rem; }
  .t-line { grid-template-columns: 2.7rem minmax(0, 1fr); }
  .t-ref { font-size: 0.66rem; padding-right: 0.4rem; }
  .t-text { padding-left: 0.55rem; padding-right: 0.5rem; }
  .t-speech .t-text { padding-left: 1.4rem; }
  .hero-stage[data-pass="exact"] { --scan-distance: 5.8rem; }
  .hero-stage[data-pass="qualifier"] { --scan-distance: 11rem; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats .stat:nth-child(n) { padding-left: 0; border-left: 0; }
  .stat dt { min-height: 0; }
  .pipeline { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pipeline::before { display: block; left: 1.4rem; right: auto; top: 1rem; bottom: 1rem; width: 2px; height: auto; }
  .stage { grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: 1rem; padding-bottom: 1.4rem; }
  .stage-icon { grid-row: 1 / span 3; margin-bottom: 0; }
  .stage h3, .stage p, .stage .tag { grid-column: 2; }
  .cards-4 { grid-template-columns: minmax(0, 1fr); }
  .mini-entry { grid-template-columns: minmax(0, 1fr); }
  .mini-page { display: none; }
  .site-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .site-footer-about { grid-column: auto; }
  .steps > li { padding-left: 3.3rem; }
  .explainer-frame { aspect-ratio: 16 / 21; }
  .btn-large { width: 100%; }
  .record-page-body div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@keyframes brief-arrives-flat { from { opacity: 0; transform: translateY(-1rem); } to { opacity: 1; transform: none; } }

@media print {
  .site-header, .hero-controls, .band-cta { display: none; }
  .will-reveal { opacity: 1; transform: none; }
  .band-night, .site-footer { background: none; color: var(--ink); }
}