/* =============================================================================
   STORY v2 — shared people-first components (.st-*). 2026-10-08.

   Theme: "Everything between your data and the people who need it."
   Plan: docs/story-v2-plan.md. Voice: .claude/skills/databasin-voice.

   Every rebuilt page draws from this one set so the site reads as one piece
   of work instead of forty sidecars. Rules carried over from the 0831 design
   system, which design:lint still enforces:
     - warm paper, warm ink, ONE signal colour used sparingly;
     - --human (umber) marks people only: role labels, the quote glyph;
     - no dark panels: the architecture diagram went light (1008);
     - elevation on paper is a hairline, never a soft shadow;
     - no motion here. Pages that want a reveal use the existing .reveal.
   Load order: marketing-shell.css, components.css, this file, page sidecar.
   ============================================================================= */

/* Layout tokens live on :root, not .st, because the How it's built sub-nav
   also sits on pages whose <main> keeps its old sidecar design (code review
   1008: inside a non-.st main these resolved invalid and the strip slid under
   the fixed nav). */
:root {
  --st-gutter: clamp(16px, 4vw, 40px);
  --st-max: 1120px;
  --st-sect: clamp(56px, 8vw, 104px);
  --st-nav: 68px;
}
.st {
  color: var(--ink-0);
  background: var(--paper-0);
  font-size: 17px;
  line-height: 1.6;
}

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

/* ── Type ─────────────────────────────────────────────────────────────────── */
.st h1, .st h2, .st h3 { text-wrap: balance; }
.st p { max-width: 68ch; }

/* No eyebrows (Chris, 2026-10-08): the small mono all-caps label above a
   heading is gone sitewide. What is left of .st-label (column headers, the
   "for the technical reader" line) and .st-role (who is speaking, above a
   quote) reads as plain sentence-case text, not as an eyebrow. */
.st-label {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.st-role {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--human);
}
.st-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.st-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.st-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
}
.st-lede {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.55;
  color: var(--ink-1);
  max-width: 62ch;
}
.st-lede strong { color: var(--ink-0); font-weight: 600; }
.st-body { color: var(--ink-1); }
.st-body + .st-body { margin-top: 14px; }
.st-small { font-size: 14px; color: var(--ink-2); }
.st a:not([class]) { color: var(--signal); text-underline-offset: 3px; }
.st a:not([class]):hover { color: var(--signal-deep); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.st-hero {
  padding-block: calc(var(--st-nav) + clamp(40px, 7vw, 96px)) clamp(40px, 5vw, 64px);
}
.st-hero .st-lede { margin-top: 26px; }
.st-hero .st-lede + .st-lede { margin-top: 14px; }
.st-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.st-micro {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.st-section { padding-block: var(--st-sect); border-top: 1px solid var(--rule-1); }
.st-section.st-tint { background: var(--paper-2); border-top-color: transparent; }
.st-section.st-tint + .st-section { border-top-color: transparent; }
.st-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.st-head > .st-label, .st-head > .st-role { padding-top: 14px; }
.st-head .st-lede { margin-top: 16px; }
.st-head.st-solo { grid-template-columns: minmax(0, 1fr); }

/* ── People: who is waiting, and what changes for them ───────────────────── */
.st-people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.st-people.st-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-people.st-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-person { border-top: 1px solid var(--ink-0); padding-top: 14px; display: grid; gap: 10px; align-content: start; }
.st-person q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink-0);
  quotes: "\201C" "\201D";
}
.st-person p { font-size: 15px; color: var(--ink-1); }
.st-person a { font-size: 14px; }

/* ── Split: copy beside media ─────────────────────────────────────────────── */
.st-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.st-split.st-flip > :first-child { order: 2; }
.st-split.st-top { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.st-copy > .st-h3 + .st-facts { margin-top: 12px; }
.st-split + .st-split { margin-top: clamp(48px, 7vw, 88px); }
.st-copy > * + * { margin-top: 14px; }
.st-copy .st-h3 + .st-body { margin-top: 10px; }
.st-media { display: grid; gap: 8px; }
.st-media video, .st-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
}
.st-caption { font-size: 13.5px; color: var(--ink-2); }
.st-hero-shot { margin: clamp(36px, 5vw, 56px) 0 0; }
/* A tall screenshot (a side panel) should not run the height of the section. */
.st-media img.st-portrait { max-height: 640px; width: auto; max-width: 100%; justify-self: center; }

/* ── Links row: quiet "go deeper" pointers ────────────────────────────────── */
.st-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
.st-links a { color: var(--signal); text-decoration: none; }
.st-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Fact list: label + sentence, hairlines between ───────────────────────── */
.st-facts { list-style: none; margin: 0; padding: 0; }
.st-facts li { padding: 14px 0; border-bottom: 1px solid var(--rule-1); display: grid; gap: 3px; }
.st-facts li:first-child { padding-top: 0; }
.st-facts b { font-weight: 600; color: var(--ink-0); }
.st-facts span { color: var(--ink-1); font-size: 15.5px; }

/* ── Quote ────────────────────────────────────────────────────────────────── */
.st-quote { margin: 0; max-width: 60rem; }
.st-quote p {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: none;
  color: var(--ink-0);
}
.st-quote p::before { content: "\201C"; color: var(--human); margin-right: 2px; }
.st-quote p::after { content: "\201D"; color: var(--human); }
.st-quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 15px; color: var(--ink-1); }
.st-quote cite b { color: var(--ink-0); font-weight: 600; }

/* ── Cards: doors to other pages ──────────────────────────────────────────── */
.st-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.st-cards.st-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  background: var(--paper-1);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease;
}
a.st-card:hover { border-color: var(--ink-0); }
a.st-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.st-card .st-h3 { font-size: 23px; }
.st-card p { font-size: 15px; color: var(--ink-1); }
.st-card .st-go { font-size: 14px; color: var(--signal); margin-top: 4px; }

/* ── Numbers ──────────────────────────────────────────────────────────────── */
.st-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.st-num b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.st-num span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--ink-1); }

/* ── Steps: only for a real sequence ──────────────────────────────────────── */
.st-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.st-steps li { counter-increment: st; border-top: 1px solid var(--rule-2); padding-top: 12px; }
.st-steps li::before { content: counter(st); display: block; font-family: var(--font-mono); font-size: 12px; color: var(--signal); margin-bottom: 8px; }
.st-steps b { display: block; font-weight: 600; }
.st-steps span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-1); }

/* ── Comparison table ─────────────────────────────────────────────────────── */
.st-table-wrap { overflow-x: auto; }
.st-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.st-table th, .st-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule-1); vertical-align: top; }
.st-table thead th { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; border-bottom-color: var(--rule-2); }
.st-table tbody th { font-weight: 500; color: var(--ink-0); }
.st-table td { color: var(--ink-1); }
.st-table .st-us { background: var(--signal-tint); color: var(--ink-0); }
.st-table thead .st-us { color: var(--signal); }
.st-table .yes { color: var(--signal); font-weight: 600; }

/* ── Charts (illustrative) ───────────────────────────────────────────────────
   Single series, one hue (the signal) on paper; recessive grid; text in ink
   tokens, never the series colour; native <title> tooltips on every mark plus
   a table view under "See the numbers". Every chart says it is illustrative
   when it is. ────────────────────────────────────────────────────────────── */
.st-viz { margin: 0; display: grid; gap: 10px; }
.st-viz-box { border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper-1); padding: clamp(14px, 2.4vw, 24px); overflow-x: auto; }
.st-viz svg { display: block; width: 100%; height: auto; min-width: 560px; font-family: var(--font-text); }
.st-viz svg.st-viz-compact { min-width: 300px; }
.st-viz .ax { fill: var(--ink-2); font-size: 11px; }
.st-viz .lab { fill: var(--ink-1); font-size: 12.5px; }
.st-viz .lab-b { fill: var(--ink-0); font-size: 12.5px; font-weight: 600; }
.st-viz .val { fill: var(--ink-0); font-size: 12px; font-family: var(--font-mono); }
.st-viz .grid { stroke: var(--rule-1); stroke-width: 1; }
.st-viz .base { stroke: var(--rule-2); stroke-width: 1; }
.st-viz .mark { fill: var(--signal); }
.st-viz .mark-quiet { fill: var(--ink-2); }
.st-viz .mark:hover, .st-viz .mark-quiet:hover { opacity: 0.8; }
.st-viz .ms { fill: var(--human); }
.st-viz .ms-line { stroke: var(--human); stroke-width: 1.5; stroke-dasharray: 3 3; }
.st-viz .note { fill: var(--ink-2); font-size: 11.5px; font-style: italic; }
.st-viz figcaption { font-size: 13.5px; color: var(--ink-2); }
.st-viz details { font-size: 14px; color: var(--ink-1); }
.st-viz summary { cursor: pointer; color: var(--signal); }
.st-viz table { border-collapse: collapse; margin-top: 8px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.st-viz th, .st-viz td { text-align: left; padding: 4px 14px 4px 0; border-bottom: 1px solid var(--rule-1); }

/* ── Tags ─────────────────────────────────────────────────────────────────── */
.st-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--signal-line);
  border-radius: 3px;
  color: var(--signal);
  white-space: nowrap;
  vertical-align: middle;
}

/* ── SQL block (light) ────────────────────────────────────────────────────── */
.st-sql {
  margin: 0;
  background: var(--paper-1);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  padding: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  overflow-x: auto;
  color: var(--ink-1);
}
.st-sql .k { color: var(--signal); font-weight: 500; }
.st-sql .c { color: var(--ink-2); }
.st-sql .o { color: var(--ink-0); background: var(--signal-tint); border-radius: 2px; padding: 0 2px; }

/* ── The architecture diagram ───────────────────────────────────────────────
   Light since 2026-10-08 (Chris: "the black images should go away"). A raised
   paper panel with hairline nodes; the signal marks the engine and the human
   umber marks the people column. ────────────────────────────────────────── */
.st-arch {
  background: var(--paper-1);
  color: var(--ink-0);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  padding: clamp(18px, 3vw, 36px);
  overflow-x: auto;
}
.st-arch-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 28px minmax(150px, 1fr) 28px minmax(280px, 2fr) 28px minmax(160px, 1fr);
  align-items: stretch;
  min-width: 860px;
}
.st-arch-col { display: flex; flex-direction: column; gap: 8px; }
.st-arch-step { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.st-arch-step b { color: var(--signal); font-weight: 500; }
.st-arch-step.st-people-step b { color: var(--human); }
.st-node { border: 1px solid var(--rule-1); background: var(--paper-0); border-radius: 6px; padding: 10px 12px; display: block; color: inherit; text-decoration: none; }
a.st-node:hover { border-color: var(--ink-2); }
.st-node .t { display: block; font-weight: 600; font-size: 14px; color: var(--ink-0); }
.st-node .d { display: block; font-size: 12.5px; color: var(--ink-1); line-height: 1.45; margin-top: 2px; }
.st-node .d.m { font-family: var(--font-mono); font-size: 11.5px; margin-top: 10px; }
.st-pv { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal); border: 1px solid var(--signal-line); border-radius: 3px; padding: 0 5px; margin-left: 6px; white-space: nowrap; }
.st-flow { display: flex; align-items: center; justify-content: center; color: var(--ink-2); font-family: var(--font-mono); font-size: 18px; }
.st-core { display: grid; gap: 8px; border: 1px solid var(--signal-line); border-radius: 8px; padding: 10px; background: var(--signal-tint); }
.st-core-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-engine { border-color: var(--signal); background: var(--paper-1); }
.st-engine .t { color: var(--signal); font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.st-faces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st-faces span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-1); border: 1px solid var(--rule-2); border-radius: 3px; padding: 1px 6px; background: var(--paper-0); }
.st-gov { margin-top: 14px; min-width: 860px; border: 1px dashed var(--rule-2); border-radius: 6px; padding: 9px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-1); display: flex; flex-wrap: wrap; gap: 4px 22px; }
.st-gov b { color: var(--ink-0); font-weight: 500; }

/* ── Six-to-one: the stack people pay for, and what replaces it ──────────── */
.st-collapse { display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr); gap: 28px; align-items: stretch; }
.st-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.st-old { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--rule-2); }
.st-old .n { color: var(--ink-1); text-decoration: line-through; text-decoration-color: var(--human); text-decoration-thickness: 1.5px; }
.st-old .m { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.st-tally { margin-top: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.st-tally b { color: var(--ink-0); font-weight: 500; }
.st-arrow { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 42px; color: var(--ink-2); }
.st-layers { display: flex; flex-direction: column; gap: 8px; }
.st-layer { border: 1px solid var(--rule-2); background: var(--paper-1); border-radius: 6px; padding: 14px 16px; }
.st-layer.st-core-layer { border-color: var(--signal); background: var(--signal-tint); }
.st-layer .st-h3 { font-size: 22px; }
.st-layer p { font-size: 14.5px; color: var(--ink-1); margin-top: 4px; }

/* ── Data App mock ────────────────────────────────────────────────────────── */
.st-convert { display: grid; grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.6fr); gap: 20px; align-items: center; }
.st-files { display: grid; gap: 10px; }
.st-file { display: flex; gap: 12px; align-items: center; border: 1px solid var(--rule-2); background: var(--paper-1); border-radius: 6px; padding: 12px 14px; }
.st-file .x { font-family: var(--font-mono); font-size: 11px; padding: 3px 6px; border-radius: 3px; background: var(--paper-2); color: var(--ink-1); min-width: 46px; text-align: center; }
.st-file .fn { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.st-file .fm { display: block; font-size: 12.5px; color: var(--ink-2); }
.st-file.st-next { border-style: dashed; }
.st-app { border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper-1); overflow: hidden; }
.st-app-bar { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--rule-1); font-size: 13px; }
.st-app-bar .ttl { font-family: var(--font-display); font-size: 18px; }
.st-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.st-chip { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--rule-2); border-radius: 999px; padding: 2px 9px; color: var(--ink-1); }
.st-chip.on { border-color: var(--signal); color: var(--signal); }
.st-app-body { padding: 14px; display: grid; gap: 12px; }
.st-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-kpi { border: 1px solid var(--rule-1); border-radius: 6px; padding: 10px; }
.st-kpi .kl { display: block; font-size: 11.5px; color: var(--ink-2); }
.st-kpi .kv { display: block; font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.st-kpi .kd { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--signal); }
.st-chart { border: 1px solid var(--rule-1); border-radius: 6px; padding: 10px 10px 6px; }
.st-chart .cl { display: block; font-size: 11.5px; color: var(--ink-2); margin-bottom: 6px; }
.st-chart svg { display: block; width: 100%; height: auto; }
.st-ask { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--rule-1); padding: 10px 14px; background: var(--paper-0); }
.st-ask .you { flex: 1; min-width: 0; font-size: 14px; border: 1px solid var(--rule-2); border-radius: 999px; padding: 7px 14px; background: var(--paper-1); }
.st-ask .state { font-family: var(--font-mono); font-size: 11px; color: var(--signal); white-space: nowrap; }

/* ── Tech pointer: sends the technical reader to "How it's built" ─────────── */
.st-techline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 14px;
  border-top: 1px dashed var(--rule-2);
  font-size: 15px;
  color: var(--ink-2);
}
.st .st-techline { max-width: none; }
.st-techline .st-label { display: inline; }
.st-techline a { color: var(--signal); text-decoration: none; }
.st-techline a:hover { text-decoration: underline; }

/* ── Tech area sub-nav (How it's built) ───────────────────────────────────── */
/* Sticky under the fixed main nav (Chris 1008: "keep the header floating so
   users don't just see Overview"), so every How it's built page stays one
   click away while you read. */
.st-subnav {
  border-bottom: 1px solid var(--rule-1);
  background: var(--paper-1);
  margin-top: var(--st-nav);
  position: sticky;
  top: calc(var(--st-nav) + env(safe-area-inset-top, 0px));
  z-index: 90;
}
.st-subnav ul { list-style: none; margin: 0 auto; padding: 0 var(--st-gutter); max-width: var(--st-max); display: flex; gap: 4px 22px; overflow-x: auto; scrollbar-width: none; }
.st-subnav li { flex: none; }
/* Same colours on every page: the .st body-link rule (.st a:not([class]),
   teal) is more specific than a bare .st-subnav a, so on pages built on .st the
   strip turned teal while older-layout pages kept it ink (Chris 1008). */
.st-subnav a, .st .st-subnav a { display: block; padding: 12px 0; font-size: 14px; color: var(--ink-1); text-decoration: none; border-bottom: 2px solid transparent; }
.st-subnav a:hover, .st .st-subnav a:hover { color: var(--ink-0); border-bottom-color: var(--rule-2); }
.st-subnav a[aria-current="page"], .st .st-subnav a[aria-current="page"] { color: var(--ink-0); border-bottom-color: var(--signal); }
.st-subnav + .st-hero { padding-top: clamp(40px, 6vw, 80px); }

/* ── A note from us: the founders, in their own words ─────────────────────── */
.st-note {
  max-width: 46rem;
  margin: 0 auto;
  background: var(--paper-1);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  padding: clamp(24px, 4vw, 44px);
}
.st-note p {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink-0);
  max-width: none;
}
.st-note p + p { margin-top: 14px; }
.st-sign { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule-1); }
.st-signer { display: flex; align-items: center; gap: 12px; }
.st-signer .st-initials {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--signal-tint); border: 1px solid var(--signal-line);
  font-family: var(--font-display); font-size: 17px; color: var(--signal);
}
.st-signer .st-initials { flex: none; line-height: 1; }
.st-signer b { display: block; font-size: 15px; font-weight: 600; color: var(--ink-0); }
.st-signer > span:not(.st-initials) span { display: block; font-size: 13.5px; color: var(--ink-2); }

/* ── Closing call ─────────────────────────────────────────────────────────── */
.st-close { padding-block: var(--st-sect); border-top: 1px solid var(--rule-1); }
.st-close .st-h2 { font-size: clamp(32px, 3.9vw, 48px); max-width: 20ch; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .st-head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .st-head > .st-label, .st-head > .st-role { padding-top: 0; }
  .st-people, .st-people.st-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-split, .st-collapse, .st-convert { grid-template-columns: minmax(0, 1fr); }
  .st-split.st-flip > :first-child { order: 0; }
  .st-arrow { transform: rotate(90deg); height: 34px; font-size: 34px; }
  .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-nums, .st-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The architecture stacks on narrow screens: a sideways-scrolling diagram
   showed phone readers only the first two steps. Columns become rows and the
   arrows point down. */
@media (max-width: 900px) {
  .st-arch { overflow-x: visible; }
  .st-arch-grid { grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 4px; }
  .st-flow { transform: rotate(90deg); height: 28px; }
  .st-arch-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .st-arch-col > .st-arch-step, .st-arch-col > .st-core { grid-column: 1 / -1; }
  .st-arch-col > .st-node[style] { grid-column: 1 / -1; }
  .st-gov { min-width: 0; }
}
@media (max-width: 560px) {
  .st-core-row { grid-template-columns: minmax(0, 1fr); }

  .st { font-size: 16px; }
  .st-people, .st-people.st-three, .st-people.st-two, .st-cards, .st-cards.st-two { grid-template-columns: minmax(0, 1fr); }
  .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-kpis .st-kpi:nth-child(3) { display: none; }
  .st-nums, .st-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Screenshots in the shared lightbox keep their shape (image-lightbox.js). */
.vlb-frame img.vlb-video { width: auto; max-width: 100%; max-height: 86vh; margin: 0 auto; background: var(--paper-1); }

/* Breathing room when a list follows a paragraph inside a column. */
.st-copy > .st-body + .st-facts { margin-top: 22px; }

/* Full-width screenshots stacked one under the other (dense UI needs the width). */
.st-shots { display: grid; gap: clamp(28px, 4vw, 44px); }
.st-shots .st-media { margin: 0; }

/* Anchored jumps on pages with the sticky sub-nav must clear nav + strip. */
html:has(.st-subnav) { scroll-padding-top: 136px; }

/* =============================================================================
   Question-led rows (homepage). Chris 1009 chose to keep the CURRENT site
   type everywhere ("the entire site should look and flow the same"), so these
   rows use the same serif headings, cream ground, tinted bands, buttons and
   role labels as every other .st page. Only the layout is new: who · the
   question and our answer · the receipt (evidence) in a fixed right margin.
   ============================================================================= */
.st-v3 .v3-hero {
  padding-block: calc(var(--st-nav) + clamp(40px, 7vw, 96px)) clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.st-v3 .v3-hero { align-items: start; row-gap: 0; }
/* The headline spans the hero, as on every other page; intro and sample answer sit side by side beneath it. */
.st-v3 .v3-hero > .st-h1 { grid-column: 1 / -1; margin-bottom: 26px; max-width: 30ch; }
.st-v3 .v3-hero .v3-receipt { margin-top: 6px; }
.st-v3 .v3-hero .st-lede + .st-lede { margin-top: 14px; }

.st-v3 .v3-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 20px clamp(28px, 4vw, 56px);
  padding-block: var(--st-sect);
  align-items: start;
}
.st-v3 .v3-who { padding-top: 12px; }
.st-v3 .v3-who b { display: block; font-size: 14px; font-weight: 600; color: var(--human); }
.st-v3 .v3-who span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.st-v3 .v3-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.7vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink-0);
  text-wrap: balance;
}
.st-v3 .v3-a { margin-top: 18px; display: grid; gap: 14px; justify-items: start; }
.st-v3 .v3-a p { color: var(--ink-1); max-width: 58ch; }
.st-v3 .v3-a p b { color: var(--ink-0); font-weight: 600; }
.st-v3 .v3-next { font-size: 15px; color: var(--signal); text-decoration: none; }
.st-v3 .v3-next:hover { text-decoration: underline; text-underline-offset: 3px; }

.st-v3 .v3-receipt { margin: 0; display: grid; gap: 8px; }
.st-v3 .v3-receipt > img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--paper-2); }
.st-v3 .v3-receipt figcaption { font-size: 13.5px; color: var(--ink-2); }
.st-v3 .v3-ledger { border: 1px solid var(--rule-2); border-radius: 8px; background: var(--paper-1); }
.st-v3 .v3-ledger div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--rule-1); font-size: 15px; color: var(--ink-1); }
.st-v3 .v3-ledger div:first-child { border-top: 0; }
.st-v3 .v3-ledger b { font-weight: 600; color: var(--ink-0); white-space: nowrap; font-variant-numeric: tabular-nums; }

.st-v3 .v3-wide { padding-block: var(--st-sect); }
.st-v3 .v3-wide .st-lede { margin-top: 16px; }
.st-v3 .v3-wide .st-arch { margin-top: clamp(28px, 4vw, 44px); }
.st-v3 .st-note { margin: 0; max-width: 52rem; }

/* Bands: the same tinted band (.st-tint, paper-2) other pages use, painted
   edge to edge without breaking the .st-wrap reading width. */
.st-v3 .v3-band {
  background: var(--paper-2);
  box-shadow: 0 0 0 100vmax var(--paper-2);
  clip-path: inset(0 -100vmax);
}

@media (max-width: 1100px) {
  .st-v3 .v3-row { grid-template-columns: 150px minmax(0, 1fr); }
  .st-v3 .v3-receipt { grid-column: 2; }
}
@media (max-width: 820px) {
  .st-v3 .v3-hero { grid-template-columns: minmax(0, 1fr); }
  .st-v3 .v3-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st-v3 .v3-receipt { grid-column: 1; margin-top: 10px; }
  .st-v3 .v3-who { padding-top: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .st-v3 .v3-who span { margin-top: 0; }
}

/* Older-layout pages start with a breadcrumb padded for the fixed nav; under
   the section sub-nav that padding doubles the gap. */
.st-subnav + .breadcrumb-wrap { padding-top: 24px; }

/* Phone: a soft fade on the strip's right edge says "this scrolls". */
@media (max-width: 820px) {
  .st-subnav ul { -webkit-mask-image: linear-gradient(to right, var(--ink-0) 85%, transparent); mask-image: linear-gradient(to right, var(--ink-0) 85%, transparent); padding-right: 32px; }
}