/* torkmark.com — merge candidate v2. Self-contained. Mobile-first, 390 → 1440.
   Rule that governs this file: no rule may fade page copy in. The one hide is
   the phone cross-fade, and it hides honestly — visibility, not opacity alone,
   so nothing is read out that cannot be seen. Motion off shows all of it. */

/* ---------- tokens ---------- */
:root {
  /* ground: warm near-black */
  --ink-900: #0A0908;
  --ink-800: #100E0D;
  --ink-700: #171413;
  --ink-600: #1E1A18;
  --ink-500: #262120;

  /* rules */
  --line: #2B2523;
  --line-2: #3A3230;
  --line-amber: rgba(234, 88, 12, 0.42);

  /* text */
  --text: #F4EFE9;
  --text-2: #BFB4AA;
  --text-3: #A79A91;   /* 7.04:1 on --ink-800 */
  --text-4: #948880;   /* 5.59:1 on --ink-800, 4.61:1 on --ink-500 — the old #6A605A was 3.15:1 */

  /* the one accent */
  --amber: #EA580C;
  --amber-lift: #FB8B3C;
  --amber-wash: rgba(234, 88, 12, 0.10);

  /* the state nobody backed but you */
  --gray-state: #9B8E85;   /* 6.05:1 on --ink-800, 5.38:1 on its own wash — the old #7E736C was 3.83:1 on the wash */
  --gray-wash: rgba(155, 142, 133, 0.10);

  /* used once per page, for a refusal */
  --red: #E0483C;
  --red-wash: rgba(224, 72, 60, 0.09);

  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Liberation Serif", serif;
  --mono: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  /* type scale */
  /* 14px is the floor for every word on the page, per BRIEF.md:82 — nothing that
     matters sits in the smallest size. --t-micro and --t-eyebrow differ now only in
     tracking and case, not in size. */
  --t-micro: 14px;
  --t-eyebrow: 14px;
  --t-small: 14px;
  --t-body: 16px;
  --t-lead: clamp(17px, 1.1vw + 15px, 21px);
  --t-h3: clamp(19px, 1.2vw + 16px, 24px);
  --t-h2: clamp(26px, 3.2vw + 16px, 44px);
  --t-h1: clamp(32px, 5.4vw + 12px, 68px);

  /* spacing scale */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px; --s10: 128px;

  --gut: clamp(20px, 5vw, 64px);
  --maxw: 1180px;
  --radius: 3px;
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font: 400 var(--t-body)/1.62 var(--sans);
  letter-spacing: 0.005em;
}
img { max-width: 100%; display: block; }
a { color: var(--text); text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px;
}
/* separate, not collapse: with collapsed borders a browser can compute a table
   width a fraction wider than its container, which puts a scrollbar on a table
   that fits. Row rules are drawn on the cells either way. */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
.num, .price-fig { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--amber);
  color: #120A04; padding: var(--s3) var(--s4); z-index: 90; font-weight: 700;
}
.skip:focus { left: var(--s4); top: var(--s4); }

/* ---------- type devices ---------- */
.eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  margin: 0 0 var(--s4);
}
.eyebrow--amber { color: var(--amber); }
.spec {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-transform: uppercase;
  margin: 0;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.022em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.04; }
h2 { font-size: var(--t-h2); line-height: 1.08; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.012em; }
.ser {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  color: var(--amber);
}
p { margin: 0 0 var(--s4); }
.lead { font-size: var(--t-lead); color: var(--text-2); line-height: 1.5; }
.small { font-size: var(--t-small); color: var(--text-2); }
.micro { font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }

/* the wry line that sits under a photo plate */
.art-label {
  display: block; margin-top: var(--s3);
  font-family: var(--serif); font-style: italic; font-size: var(--t-lead);
  color: var(--text-3); letter-spacing: -0.005em;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: var(--s3) var(--s5);
  border: 1px solid var(--amber); background: var(--amber); color: #140901;
  font: 700 var(--t-small)/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--radius);
}
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn:hover { background: var(--amber-lift); border-color: var(--amber-lift); }
/* the ghost must win its background back after .btn:hover, or hover paints
   amber text on --amber-lift at 1.50:1. Transparent ground keeps it at 5.59:1. */
.btn--ghost:hover { background: transparent; border-color: var(--amber); color: var(--amber); }
.btn-row { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ---------- header / footer ---------- */
.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--ink-900);
  position: relative; z-index: 40;
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 62px; flex-wrap: wrap;
}
.mark { font-weight: 800; letter-spacing: -0.03em; font-size: 18px; display: inline-flex; align-items: center; min-height: 44px; }
.mark span { color: var(--amber); }
.nav { display: flex; gap: var(--s5); font-size: var(--t-small); flex-wrap: wrap; }
.nav a { color: var(--text-2); display: inline-flex; align-items: center; min-height: 44px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--amber); }

.site-foot { border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s7); background: var(--ink-800); }
.foot-grid { display: grid; gap: var(--s6); }
.foot-grid h3 { font-size: var(--t-eyebrow); letter-spacing: 0.17em; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin-bottom: var(--s3); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); font-size: var(--t-small); }
.foot-grid a { color: var(--text-2); display: inline-flex; align-items: center; min-height: 44px; }
.foot-grid a:hover { color: var(--amber); }
.foot-legal { margin: var(--s7) 0 0; padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--text-4); font-size: var(--t-small); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- section rhythm ---------- */
section { position: relative; }
.band { padding: var(--s9) 0; border-top: 1px solid var(--line); }
.band--raised { background: var(--ink-800); }
.band__head { margin-bottom: var(--s7); }
.spine { display: grid; gap: var(--s5); }
.spine > * { min-width: 0; }
@media (min-width: 900px) {
  .spine { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: var(--s8); align-items: start; }
}

/* ---------- placeholder photo frame ---------- */
.frame {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 9px),
    var(--ink-700);
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  padding: var(--s5);
  overflow: hidden;
}
.frame--wide { aspect-ratio: 16 / 10; }
.frame--strip { aspect-ratio: 3 / 2; }
.frame__cap { text-align: center; max-width: 34ch; }
.frame__cap b {
  display: block; font-size: var(--t-eyebrow); letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; margin-bottom: var(--s2);
}
.frame__cap span { display: block; font-size: var(--t-small); color: var(--text-4); line-height: 1.4; }
.frame__corner { position: absolute; width: 9px; height: 9px; border: 1px solid var(--line-2); }
.frame__corner:nth-child(1) { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.frame__corner:nth-child(2) { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.frame__corner:nth-child(3) { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.frame__corner:nth-child(4) { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.figcap { margin: var(--s3) 0 0; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }

/* ---------- screenshot frame (app shots) ---------- */
.shot { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--ink-700); padding: var(--s2); }
.shot__inner { border: 1px solid var(--line); border-radius: 2px; background: var(--ink-900); aspect-ratio: 9 / 16; display: grid; place-items: center; padding: var(--s4); }

/* ---------- the phone ---------- */
.phone {
  width: 100%; max-width: 280px; margin-inline: auto;
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: var(--ink-700);
  padding: 9px;
}
.phone__screen {
  border-radius: 15px;
  background: var(--ink-900);
  border: 1px solid var(--line);
  padding: var(--s4) var(--s3) var(--s5);
  min-height: 380px;
  display: grid; align-content: start; gap: var(--s3);
}
.phone__bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-4);
  border-bottom: 1px solid var(--line); padding-bottom: var(--s2); margin-bottom: var(--s1);
}
.phone__bar b { color: var(--text-2); font-weight: 700; }
.phone__note { margin: 0; color: var(--text-3); font-size: 14px; line-height: 1.45; }

/* gauges */
.gauge { display: grid; gap: 5px; }
.gauge__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); font-size: 14px; flex-wrap: wrap; }
.gauge__label { color: var(--text-3); letter-spacing: 0.05em; text-transform: uppercase; font-size: 14px; }
.gauge__val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); font-size: 14px; }
.gauge__track { height: 4px; background: var(--ink-500); border-radius: 2px; overflow: hidden; }
.gauge__fill { height: 100%; background: var(--amber); width: 62%; }
.gauge__fill--b { width: 41%; }
.gauge__fill--c { width: 77%; }

/* a code row */
.code-row {
  border: 1px solid var(--line-2); border-left: 2px solid var(--amber);
  border-radius: 2px; padding: var(--s3); display: grid; gap: 3px; background: var(--ink-800);
}
.code-row__id { font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; color: var(--amber); font-weight: 700; }
.code-row__plain { font-size: 14px; color: var(--text-2); line-height: 1.45; }
.code-row__meta { font-family: var(--mono); font-size: 14px; color: var(--text-4); letter-spacing: 0.04em; }

/* a build-log entry */
.entry {
  border: 1px solid var(--line);
  border-left: 2px solid var(--gray-state);
  border-radius: 2px;
  background: var(--ink-800);
  padding: var(--s3) var(--s4);
  display: grid; gap: var(--s2);
}
.entry--truck { border-left-color: var(--amber); background: linear-gradient(90deg, var(--amber-wash), transparent 60%), var(--ink-800); }
.entry__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.entry__name { font-weight: 700; font-size: var(--t-small); letter-spacing: -0.005em; }
.entry__date { font-family: var(--mono); font-size: var(--t-micro); color: var(--text-4); font-variant-numeric: tabular-nums; }
.entry__vals { display: flex; gap: var(--s4); flex-wrap: wrap; font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.entry__vals i { font-style: normal; color: var(--text-4); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  padding: 3px 8px; border-radius: 2px; border: 1px solid currentColor;
}
.badge--truck { color: var(--amber); background: var(--amber-wash); }
.badge--typed { color: var(--gray-state); background: var(--gray-wash); }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* sample tag — wherever data is illustrative */
.tag-sample {
  display: inline-block; margin: 0; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-4); border: 1px dashed var(--line-2); padding: 3px 8px; border-radius: 2px;
  font-weight: 700; justify-self: start;
}

/* ---------- code-and-fix timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tl-row {
  display: grid; gap: var(--s2);
  padding: var(--s4) 0 var(--s5);
  border-bottom: 1px solid var(--line);
  position: relative; padding-left: var(--s5);
}
.tl-row::before {
  content: ""; position: absolute; left: 3px; top: calc(var(--s4) + 8px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--gray-state);
}
.tl-row--truck::before { background: var(--amber); }
.tl-row::after {
  content: ""; position: absolute; left: 6px; top: calc(var(--s4) + 20px); bottom: 0; width: 1px; background: var(--line);
}
.tl-row:last-child::after { display: none; }
.tl-row__head { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.tl-row__id { font-family: var(--mono); font-weight: 700; color: var(--text); letter-spacing: 0.04em; }
.tl-row__id.is-code { color: var(--amber); }
.tl-row__date { font-family: var(--mono); font-size: var(--t-micro); color: var(--text-4); font-variant-numeric: tabular-nums; }
.tl-row__body { color: var(--text-2); font-size: var(--t-small); margin: 0; max-width: 60ch; }
@media (min-width: 900px) {
  .tl-row { grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; column-gap: var(--s6); }
  .tl-row__head { flex-direction: column; gap: 4px; }
}

/* ---------- tables ---------- */
.tbl-scroll { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: var(--radius); }
/* table-layout: fixed is what actually guarantees the fit. Under auto layout the
   used width is max(specified, content-driven minimum), so a table told to be
   100% can still resolve wider than its scroll container — which is what put a
   scrollbar on the empty compatibility table at 1440 even with the width floor
   already off. Fixed layout ignores content widths and uses the specified width,
   so the table is exactly its container and cannot overflow. Columns divide the
   width evenly, which is right for both tables here.
   The 520px floor is for phone widths, where scrolling the columns is the point.
   Above 760px the floor comes off and 100% is the whole story. */
.tbl { font-size: var(--t-small); table-layout: fixed; min-width: 520px; max-width: 100%; }
@media (min-width: 760px) { .tbl { min-width: 0; } }
.tbl caption { text-align: left; padding: var(--s4); color: var(--text-3); font-size: var(--t-eyebrow); letter-spacing: 0.17em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--line); }
.tbl th, .tbl td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.tbl thead th { color: var(--text-3); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td { color: var(--text-2); }
.tbl th[scope="row"] { color: var(--text); font-weight: 700; }
/* must out-specify .tbl th[scope="row"] above, or the empty state renders bold primary */
.tbl th[scope="row"].is-empty, .tbl td.is-empty { font-weight: 400; color: var(--text-2); padding-block: var(--s5); }
/* the spanning cell is as wide as the table; its text is not. */
.is-empty__t { display: block; max-width: 68ch; }

/* ---------- empty state ---------- */
.empty {
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: var(--s5); background: var(--ink-800);
  display: grid; gap: var(--s2);
}
.empty h3 { font-size: var(--t-small); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); font-weight: 700; }
.empty p { margin: 0; color: var(--text-2); font-size: var(--t-small); max-width: 56ch; }

/* ---------- price plate ----------
   Flex, not a two-track grid: each plate has a 320px basis and may only wrap,
   never shrink below its content. This is the fix for the collapsed feature
   lists — nothing here can drive a plate down to one word per line. */
.plates { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: stretch; }
.plate {
  flex: 1 1 320px;
  min-width: min(100%, 300px);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--ink-800); padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s4);
}
.plate--lead { border-color: var(--line-amber); }
.plate > * { min-width: 0; }
.plate .eyebrow { margin: 0; }
.plate__price { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin: 0; }
.price-fig { font-size: clamp(38px, 4.4vw + 20px, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.plate--lead .price-fig { color: var(--amber); }
.plate__unit { color: var(--text-3); font-size: var(--t-small); }
.plate__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.plate__list li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-small); color: var(--text-2); }
/* the marker is a drawn 2px rule, not an em-dash glyph: the glyph rendered
   at a different weight on every row on a dark ground, and a 1px bar landing
   on a half-pixel did the same. 2px on an integer offset does not. */
.plate__list .tick { flex: 0 0 12px; height: 2px; margin-top: 9px; background: var(--amber); font-size: 0; }
.plate__list li.is-off .tick {
  background: transparent; height: auto; margin-top: 0;
  font-size: var(--t-small); line-height: 1.5; color: var(--text-4); text-align: center;
}
.plate__list li > span:last-child { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; line-height: 1.5; }
/* the price caveat is something a buyer needs, so it is 14px page copy, not a
   12px micro label; it still pins to the bottom of the plate */
.plate .micro, .plate__note { margin: auto 0 0; }
.plate__note { color: var(--text-3); }

/* ---------- open answers (FAQ, no accordion) ---------- */
.faq { display: grid; gap: var(--s6); }
.faq__item { display: grid; gap: var(--s3); }
.faq__item > * { min-width: 0; }
@media (min-width: 900px) {
  .faq__item { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: var(--s7); align-items: start; }
}
.faq__q { font-size: var(--t-small); font-weight: 800; letter-spacing: -0.005em; color: var(--text); margin: 0; }
.faq__q .k { display: block; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; font-weight: 700; }
.faq__a { color: var(--text-2); font-size: var(--t-small); margin: 0; max-width: 62ch; }

/* ---------- the one red callout ---------- */
.refusal { border: 1px solid var(--red); border-radius: var(--radius); background: var(--red-wash); padding: var(--s6); }
.refusal h3 { color: var(--red); font-size: var(--t-h3); margin-bottom: var(--s3); }
.refusal ul { margin: 0; padding-left: 1.1em; color: var(--text-2); font-size: var(--t-small); display: grid; gap: var(--s2); }

/* ---------- chapters: the still is the default layout ---------- */
.chapter { border-top: 1px solid var(--line); }
.stage { padding: var(--s9) 0; }
.stage__in { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); display: grid; gap: var(--s6); }
.stage__in > * { min-width: 0; }
.stage__head { display: grid; gap: var(--s4); align-content: start; }
.stage__sum { color: var(--text-2); font-size: var(--t-lead); max-width: 46ch; margin: 0; }
.beats { display: none; }

/* the phone rail: three phones side by side when motion is off */
.rail { display: grid; gap: var(--s5); }
.rail__item { display: grid; gap: var(--s3); align-content: start; }
.rail__cap { text-align: center; margin: 0; }
.rail__cap b { display: block; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); font-weight: 700; margin-bottom: 5px; }
.rail__cap span { font-size: var(--t-small); color: var(--text-2); }
@media (min-width: 760px) { .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
@media (min-width: 1100px) {
  .stage__in--split { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: var(--s8); }
  /* A chapter whose second column is the three-phone rail is NOT split when the
     page is still: at 1440 the 60% column leaves about 173px per phone, which is
     not a readable phone. Still = head above, three phones across the full 1052px. */
  .stage__in--rail { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s7); }
}
/* ...and it goes back to the split only where motion is actually running, where
   the rail holds one phone at a time rather than three. */
@media (min-width: 1100px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  .motion .stage__in--rail { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: var(--s8); }
}

/* interstitial */
.interstitial { border-top: 1px solid var(--line); padding: var(--s9) 0; text-align: center; }
.interstitial p { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.022em; margin: 0; line-height: 1.1; text-wrap: balance; }

/* scroll cue */
.cue { display: grid; justify-items: center; gap: var(--s3); color: var(--text-4); }
.cue__line { width: 1px; height: 46px; background: linear-gradient(var(--line-2), transparent); }

/* ---------- motion layer: only ever added by the inline script ----------
   The still page is the default and the fallback. No rule here sets opacity on
   a block of page copy: the entrance is a 10px nudge, so a still taken at frame
   zero — a screenshot, a print, a blocked script — carries every word.
   The one thing motion does hide is the two phone screens that are not the
   current one. That hide is honest: they go visibility:hidden, so they leave the
   accessibility tree with the pixels instead of being read out invisible. With
   motion off, all three sit side by side and all three are readable. */
.motion .rise { transform: translateY(10px); transition: transform 560ms cubic-bezier(.2,.7,.3,1); }
.motion .rise.in { transform: none; }

/* Everything that depends on a stage being able to pin lives inside this query.
   Below 620px of viewport height the stage cannot stick, so the beats are not
   laid out, the phones do not stack, and the page is the still page with a
   settle on it — rather than beats selecting screens on a stage that has already
   scrolled away. */
@media (min-height: 620px) {
  .motion .chapter { position: relative; }
  .motion .chapter:not(.no-pin) .beats { display: block; }
  .motion .beat { height: 100svh; }

  .motion .chapter:not(.no-pin) .stage {
    position: sticky; top: 0; min-height: 100svh;
    display: grid; padding: var(--s7) 0;
    align-content: center;
    /* content taller than the viewport — long copy, enlarged text — falls back
       to the top rather than centring the headline off the top edge */
    align-content: safe center;
  }

  /* the phones stack and cross-fade; the still layout puts them side by side */
  .motion .chapter:not(.no-pin) .rail { position: relative; grid-template-columns: 1fr; min-height: clamp(300px, 52svh, 520px); }
  .motion .chapter:not(.no-pin) .rail__item {
    position: absolute; inset: 0; margin: auto; width: 100%;
    opacity: 0; visibility: hidden;
    transform: translateY(14px) scale(0.985);
    transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.3,1), visibility 0s linear 520ms;
    pointer-events: none;
    align-content: center;
  }
  .motion .chapter:not(.no-pin)[data-state="0"] .rail__item[data-i="0"],
  .motion .chapter:not(.no-pin)[data-state="1"] .rail__item[data-i="1"],
  .motion .chapter:not(.no-pin)[data-state="2"] .rail__item[data-i="2"] {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.3,1), visibility 0s;
  }
  /* a chapter whose real content does not fit the pinned viewport keeps the still
     layout: the inline script measures it and sets .no-pin. Viewport height alone
     was never the question — the question is whether THIS chapter fits. */
  .motion .chapter.no-pin .rail { position: static; min-height: 0; }
  .motion .chapter.no-pin .rail__item {
    position: static; opacity: 1; visibility: visible; transform: none; transition: none; pointer-events: auto;
  }
  @media (min-width: 760px) { .motion .chapter.no-pin .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .motion .chapter.no-pin .stage__in--rail { grid-template-columns: minmax(0, 1fr); align-items: start; } }

  /* the photo plate settles very slightly as its chapter runs */
  .motion .chapter .frame { transition: transform 900ms cubic-bezier(.2,.7,.3,1), border-color 900ms ease; }
  .motion .chapter[data-state="1"] .frame { transform: scale(1.012); }
  .motion .chapter[data-state="2"] .frame { transform: scale(1.024); border-color: var(--line-amber); }

  /* motion on a phone: the stage tightens so one viewport holds one beat. The
     plate loses height, never its caption — the named shot, the figure line and
     the line under the plate stay on the page at every width. */
  @media (max-width: 759px) and (prefers-reduced-motion: no-preference) {
    .motion .chapter .stage { padding: var(--s6) 0; }
    .motion .chapter .stage__in { gap: var(--s4); }
    .motion .chapter .frame { aspect-ratio: auto; min-height: clamp(112px, 18svh, 190px); padding: var(--s4); }
    .motion .chapter .cue { display: none; }
    .motion .rail { min-height: 46svh; }
    .motion .phone__screen { min-height: 0; padding-bottom: var(--s4); }
    .motion .phone { max-width: 240px; }
  }
}

/* honest under reduced motion, belt and braces: hand back the still page */
@media (prefers-reduced-motion: reduce) {
  .motion .chapter .stage { position: static; min-height: 0; padding: var(--s9) 0; align-content: start; }
  .motion .chapter .beats { display: none; }
  .motion .rail { position: static; min-height: 0; }
  .motion .rail__item { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .motion .rise { transform: none; transition: none; }
  .motion .chapter .frame { transition: none; transform: none; }
  @media (min-width: 760px) { .motion .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .motion .stage__in--rail { grid-template-columns: minmax(0, 1fr); align-items: start; } }
}

/* ---------- component sheet only ---------- */
.swatches { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sw { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sw__chip { height: 62px; }
.sw__meta { padding: var(--s3); display: grid; gap: 2px; }
.sw__meta b { font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; }
.sw__meta span { font-family: var(--mono); font-size: 14px; color: var(--text-4); word-break: break-word; }
.spec-list { display: grid; gap: var(--s3); font-size: var(--t-small); }
.spec-list div { display: grid; gap: var(--s2); border-bottom: 1px solid var(--line); padding-bottom: var(--s3); }
.spec-list b { color: var(--text-3); font-family: var(--mono); font-size: 14px; letter-spacing: 0.05em; }
@media (min-width: 700px) { .spec-list div { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s4); } }
.comp-block { border-top: 1px solid var(--line); padding-top: var(--s6); margin-top: var(--s8); }
.comp-block__label { display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; margin-bottom: var(--s5); flex-wrap: wrap; }

/* A rail that never animates: the screenshot row and the component sheet. These
   items have no chapter ancestor, so the active-state rule can never rescue them —
   this override has to restore VISIBILITY as well as opacity, or adding
   visibility:hidden to the cross-fade silently blanks every static rail. */
.rail--static, .motion .rail--static { position: static; min-height: 0; }
.rail--static .rail__item, .motion .rail--static .rail__item {
  position: static; opacity: 1; visibility: visible; transform: none;
  transition: none; pointer-events: auto; align-content: start;
}
@media (min-width: 760px) {
  .rail--static, .motion .rail--static { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================================
   2026-09-07 build additions — photos, the film slot, the nine categories,
   the join-the-test block and the legal-page shell. Everything below obeys the
   file's governing rule: no rule may fade page copy in.
   ========================================================================== */

/* ---------- real photographs ---------- */
.photo {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--ink-700);
  overflow: hidden;
  position: relative;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 10; }
.photo--strip { aspect-ratio: 3 / 2; }
.photo--band { aspect-ratio: 21 / 9; }
figure { margin: 0; }

/* the honest before/after pair */
.pair { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } }
.pair figcaption { margin-top: var(--s3); font-size: var(--t-small); color: var(--text-3); }
.pair figcaption b {
  display: block; font-size: var(--t-eyebrow); letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--amber); margin-bottom: var(--s1);
}

/* ---------- the film slot (hero and the two acts) ----------
   Poster is a real <img> and is always visible. The <video> above it is
   deliberately SOURCELESS: it carries no src until the Flow export lands, so
   nothing can fade in over the poster. Adding one <source> line inside the
   element is the whole change. Under reduced motion the script never runs, so
   the poster stands in — which is also the no-JS state. */
.film { position: relative; border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.film__media { position: absolute; inset: 0; z-index: 0; background: var(--ink-900); }
.film__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.92) 0%, rgba(10,9,8,0.78) 45%, rgba(10,9,8,0.96) 100%);
}
.film__poster, .film__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.film__vid { opacity: 0; will-change: opacity; transition: opacity 700ms ease; pointer-events: none; }
.film__vid.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .film__vid { display: none; } }
.film__in { position: relative; z-index: 1; padding-block: var(--s10); text-shadow: 0 1px 3px rgba(10,9,8,0.85); }
.film__in > * { max-width: 62ch; }
.film--act .film__in { padding-block: var(--s9); text-align: center; }
.film--act .film__in > * { max-width: 34ch; margin-inline: auto; }
.film--act p {
  font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.022em;
  margin: 0; line-height: 1.1; text-wrap: balance;
}

/* ---------- the nine categories ---------- */
.cats { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cat {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-800); padding: var(--s4) var(--s5);
}
.cat b { display: block; font-size: var(--t-h3); letter-spacing: -0.012em; }
.cat span { display: block; margin-top: var(--s2); font-size: var(--t-small); color: var(--text-2); line-height: 1.45; }
.cat--gated { border-style: dashed; }
.cat--gated b { color: var(--text-2); }

/* the strip, drawn flat: the readings in their default order */
.strip {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--ink-800); overflow: hidden;
}
.strip__cell {
  flex: 1 1 130px; min-width: 0; padding: var(--s4);
  border-right: 1px solid var(--line);
}
.strip__cell:last-child { border-right: 0; }
.strip__cell i {
  display: block; font-style: normal; font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4);
}
.strip__cell b {
  display: block; margin-top: var(--s2); font-family: var(--mono);
  font-size: 20px; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700;
}
.strip__cell em {
  display: block; margin-top: var(--s1); font-style: normal;
  font-size: var(--t-micro); color: var(--amber); letter-spacing: 0.04em;
}
.strip__cell em.is-sub { color: var(--gray-state); }
.strip__cell.is-absent b { color: var(--text-4); font-size: var(--t-small); font-weight: 400; }

/* the reading bands, named as ranges */
.bands { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.bands li {
  display: flex; gap: var(--s4); align-items: baseline; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: var(--s2);
  font-size: var(--t-small);
}
.bands b {
  min-width: 11ch; font-size: var(--t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.bands span { font-family: var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- join the test ---------- */
.cta {
  border: 1px solid var(--line-amber); border-radius: var(--radius);
  background: var(--amber-wash); padding: var(--s6);
  display: grid; gap: var(--s4);
}
.cta h2, .cta h3 { margin: 0; }
.cta p { margin: 0; color: var(--text-2); max-width: 62ch; }
.cta .btn-row { margin-top: var(--s2); }
@media (min-width: 860px) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s8); }
  .cta .btn-row { grid-row: span 3; align-self: center; margin-top: 0; }
}

/* ---------- legal + about pages ---------- */
.legal-body { max-width: 74ch; }
.legal-body h2 {
  font-size: var(--t-h3); margin: var(--s8) 0 var(--s4);
  padding-top: var(--s5); border-top: 1px solid var(--line);
}
.legal-body h3 { font-size: var(--t-small); text-transform: uppercase; letter-spacing: 0.14em; color: var(--amber); margin: var(--s6) 0 var(--s3); }
.legal-body p, .legal-body li { color: var(--text-2); }
.legal-body ul, .legal-body ol { padding-left: 1.2em; display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
.legal-body a { color: var(--amber); text-decoration: underline; text-underline-offset: 0.2em; }
.legal-meta {
  font-family: var(--mono); font-size: var(--t-small); color: var(--text-4);
  letter-spacing: 0.04em; margin: 0 0 var(--s6);
}
.toc { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.toc a { color: var(--text-2); font-size: var(--t-small); display: inline-flex; align-items: center; min-height: 44px; }
.toc a:hover { color: var(--amber); }
@media (min-width: 700px) { .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); } }

/* the boxed aside inside a legal page */
.plain {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--ink-800); padding: var(--s5); margin: 0 0 var(--s5);
}
.plain b {
  display: block; font-size: var(--t-eyebrow); letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3);
}
.plain p:last-child { margin-bottom: 0; }
.legal-body li strong { display: block; color: var(--text); margin-bottom: 2px; }
.legal-body code { font-family: var(--mono); font-size: 14px; color: var(--amber); }
.legal-body section { scroll-margin-top: var(--s6); }
.legal-body dl { display: grid; gap: var(--s2); margin: 0; }
.legal-meta dl { display: grid; gap: var(--s2); margin: 0; }
.legal-meta dt { color: var(--text-3); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; }
.legal-meta dd { margin: 0 0 var(--s3); color: var(--text-2); font-family: var(--sans); letter-spacing: 0; }
.toc ol { list-style: decimal; padding-left: 1.4em; margin: 0; display: grid; gap: var(--s1); color: var(--text-4); }

/* ============================================================================
   2026-09-10 v3 additions — the before/after example, the three steps, the
   data states, the app captures, the topic links, and the film pause control.
   Same governing rule as the rest of the file: no rule may fade page copy in,
   and nothing here may put a horizontal scrollbar on a 360px phone.
   ========================================================================== */

/* ---------- the film pause control ----------
   Written into the page hidden and revealed by the inline script, so a page
   with no JavaScript never shows a button that cannot do anything. */
.film-toggle {
  position: absolute; right: var(--gut); bottom: var(--s4); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(10, 9, 8, 0.6); color: var(--text-3, var(--text-2));
  font: 600 var(--t-micro, var(--t-small))/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.75; cursor: pointer;
}
.film-toggle:hover, .film-toggle:focus-visible { opacity: 1; color: var(--amber); border-color: var(--amber); }
/* the UA rule for [hidden] loses to the display above, so restate it */
.film-toggle[hidden] { display: none; }

/* ---------- the before/after example ---------- */
.demo {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--ink-800); padding: var(--s5);
  display: grid; gap: var(--s5); justify-items: start;
}
.demo > * { min-width: 0; max-width: 100%; }
.compare { display: grid; gap: var(--s4); width: 100%; }
.compare__cell {
  border: 1px solid var(--line); border-left: 2px solid var(--line-2);
  border-radius: 2px; background: var(--ink-900); padding: var(--s4) var(--s5);
  min-width: 0;
}
.compare__cell--work { border-left-color: var(--amber); background: linear-gradient(90deg, var(--amber-wash), transparent 70%), var(--ink-900); }
.compare__k {
  margin: 0 0 var(--s2); font-size: var(--t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); font-weight: 700;
}
.compare__v {
  margin: 0 0 var(--s2); font-family: var(--mono); font-weight: 700;
  font-size: clamp(24px, 2.2vw + 16px, 34px); line-height: 1.1; color: var(--text);
  overflow-wrap: break-word;
}
.compare__v--work { font-family: var(--sans); font-size: var(--t-h3); color: var(--amber); }
.compare__m { margin: 0; font-size: var(--t-small); color: var(--text-2); line-height: 1.45; }
.compare__result { margin: 0; font-size: var(--t-lead); color: var(--text); max-width: 46ch; }
.compare__result b { color: var(--amber); font-weight: 800; }
.compare__note { margin: 0; color: var(--text-3); max-width: 62ch; }
@media (min-width: 760px) {
  .compare { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
  .demo { padding: var(--s6); }
}

/* ---------- the three steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); counter-reset: step; }
.steps li {
  counter-increment: step; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-900); padding: var(--s5);
  display: grid; gap: var(--s2); align-content: start;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em;
  color: var(--amber); font-weight: 700;
}
.steps b { font-size: var(--t-h3); letter-spacing: -0.012em; }
.steps span { font-size: var(--t-small); color: var(--text-2); line-height: 1.45; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }

/* ---------- the five data states ---------- */
.states { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.states li {
  min-width: 0; display: grid; gap: var(--s1);
  border-bottom: 1px solid var(--line); padding-bottom: var(--s3);
}
.states b { font-size: var(--t-small); letter-spacing: 0.02em; }
.states span { font-size: var(--t-small); color: var(--text-2); }
@media (min-width: 760px) {
  .states li { grid-template-columns: minmax(0, 26ch) minmax(0, 1fr); gap: var(--s5); align-items: baseline; }
}

/* ---------- the app captures ---------- */
.shots { display: grid; gap: var(--s6); }
.shots > figure { min-width: 0; display: grid; gap: var(--s4); align-content: start; }
.shots img { width: 100%; height: auto; border-radius: 2px; }
.shots figcaption { display: grid; gap: var(--s2); justify-items: start; }
.shots figcaption b {
  font-size: var(--t-eyebrow); letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--amber); font-weight: 700;
}
.shots figcaption span { font-size: var(--t-small); color: var(--text-2); line-height: 1.45; }
@media (min-width: 860px) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }

/* the third slot is drawn on the page, never a fabricated screenshot */
.shot--drawn { display: grid; gap: var(--s4); align-content: start; padding: var(--s4); }
.drawn { display: grid; gap: var(--s2); }
.drawn__k {
  margin: var(--s3) 0 0; font-size: var(--t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); font-weight: 700;
}
.drawn__k:first-child { margin-top: 0; }
.drawn__v { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 24px; color: var(--text); }
.drawn__v--work { font-family: var(--sans); font-size: var(--t-h3); color: var(--amber); }
.drawn__m { margin: 0; font-size: var(--t-small); color: var(--text-2); line-height: 1.4; }

/* ---------- a topic card that is itself the link ---------- */
.cat__go {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s3);
  color: var(--amber); font-size: var(--t-small); font-weight: 700;
  letter-spacing: 0.04em; overflow-wrap: anywhere;
}
.cat__go::after { content: " \2192"; margin-left: 6px; }
.cat__go:hover { color: var(--amber-lift); text-decoration: underline; text-underline-offset: 0.2em; }
.cat span a { color: var(--amber); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- classes for what used to be style attributes (2026-09-10) ----------
   The site's CSP is style-src 'self', which blocks every inline style attribute,
   so the 58 one-off spacing and colour rules that used to sit inline were silently
   dropped by the browser. Nothing new is expressed here: these are the same
   declarations, moved where the policy can see them. .band--first must follow
   .band, since both are one class deep and source order decides. */
.band--first { border-top: 0; padding-top: var(--s8); }
.foot-line { margin-top: var(--s3); max-width: 34ch; }
.foot-note { max-width: 34ch; }
.link-amber { color: var(--amber); }
.link-amber:hover { color: var(--amber-lift); }
.text-muted { color: var(--text-4); }
.u-mt-4 { margin-top: var(--s4); }
.u-mt-5 { margin-top: var(--s5); }
.u-mt-6 { margin-top: var(--s6); }
.u-mt-7 { margin-top: var(--s7); }
.u-mb-0 { margin-bottom: 0; }
.u-mw-66 { max-width: 66ch; }