/* =====================================================================
   Asapi redesign: proposed stylesheet (drop-in replacement for mockup.css)
   Two paths: body.trials (paper, ink, moss) and body.labs (ink, blue).
   Existing class names are kept. Classes marked NEW need the markup
   described in audit.md, section 5.
   ===================================================================== */

/* ---------- Line art (unchanged from mockup.css) ---------- */
.art svg { display: block; width: 100%; height: auto; }
.a-paper { fill: #fbfaf5; stroke: #315c38; stroke-width: 1.6; stroke-linejoin: round; }
.a-paper2 { fill: #f1efe6; stroke: #315c38; stroke-width: 1.6; stroke-linejoin: round; }
.a-stroke { fill: none; stroke: #315c38; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a-thin { fill: none; stroke: #315c38; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.a-line { fill: none; stroke: rgba(49, 92, 56, 0.42); stroke-width: 2.4; stroke-linecap: round; }
.a-head { fill: none; stroke: #315c38; stroke-width: 3; stroke-linecap: round; }
.a-accent { fill: none; stroke: #4f7c56; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.a-accent-f { fill: #4f7c56; }
.a-soft { fill: rgba(79, 124, 86, 0.16); stroke: none; }
.a-soft-s { fill: rgba(79, 124, 86, 0.16); stroke: #315c38; stroke-width: 1.6; stroke-linejoin: round; }
.a-dash { fill: none; stroke: rgba(49, 92, 56, 0.45); stroke-width: 1.4; stroke-dasharray: 3 4; stroke-linecap: round; }
.a-ground { fill: none; stroke: rgba(49, 92, 56, 0.28); stroke-width: 1.4; stroke-linecap: round; }
.a-gold { fill: #e9b765; stroke: #a8771f; stroke-width: 1.4; }
.a-gold-s { fill: none; stroke: #c48a2a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.a-gold-t { fill: #6b4a10; font: 800 13px/1 Inter, ui-sans-serif, system-ui, sans-serif; text-anchor: middle; }
.a-txt { fill: #315c38; font: 700 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; }
.a-big { fill: #315c38; font: 800 22px/1 Inter, ui-sans-serif, system-ui, sans-serif; text-anchor: middle; }
.a-mid { fill: #315c38; font: 800 15px/1 Inter, ui-sans-serif, system-ui, sans-serif; text-anchor: middle; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
body.labs .a-paper { fill: #16202a; stroke: #8fcbe6; }
body.labs .a-paper2 { fill: #1b2733; stroke: #8fcbe6; }
body.labs .a-stroke, body.labs .a-thin, body.labs .a-head { stroke: #8fcbe6; }
body.labs .a-line { stroke: rgba(143, 203, 230, 0.42); }
body.labs .a-accent { stroke: #5fb0d4; }
body.labs .a-soft, body.labs .a-soft-s { fill: rgba(95, 176, 212, 0.18); }
body.labs .a-soft-s { stroke: #8fcbe6; }
body.labs .a-ground, body.labs .a-dash { stroke: rgba(143, 203, 230, 0.3); }
body.labs .a-txt, body.labs .a-big, body.labs .a-mid { fill: #8fcbe6; }

/* ---------- Tokens ---------- */
:root {
  /* spacing: 4px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(80px, 9vw, 128px);     /* between sections */
  --head-gap: clamp(32px, 3.4vw, 48px);   /* section heading to its content */
  --gutter: clamp(20px, 4vw, 48px);       /* page side margin */
  --shell: 1160px;
  --measure: 680px;                       /* prose */
  --radius: 16px;
  --radius-s: 10px;

  /* type */
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-h1: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem);          /* 36 -> 52px */
  --fs-h1-detail: clamp(2rem, 1.3rem + 2vw, 3rem);           /* 32 -> 48px */
  --fs-h2: clamp(1.5rem, 1.1rem + 1.1vw, 1.875rem);          /* 24 -> 30px */
  --fs-h3: 1.125rem;                                         /* 18px */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);      /* 17 -> 19px */
  --fs-body: 1.0625rem;                                      /* 17px */
  --fs-ui: 0.9375rem;                                        /* 15px: tables, lists, nav */
  --fs-small: 0.875rem;                                      /* 14px */
  --fs-label: 0.72rem;                                       /* 11.5px mono */
  --fs-figure: clamp(2rem, 1.5rem + 1.2vw, 2.5rem);          /* 32 -> 40px */

  /* colour: The AI Agent Trials (light) */
  --paper: #f8f7f0;
  --paper-top: #fbfaf5;
  --paper-end: #efeee6;
  --card: #fcfcf9;
  --wash: #f1efe6;
  --ink: #101216;
  --text: #2a3036;
  --muted: #5d6570;
  --line: rgba(16, 18, 22, 0.12);
  --line-soft: rgba(16, 18, 22, 0.07);
  --accent: #4f7c56;
  --deep: #315c38;
  --accent-soft: rgba(79, 124, 86, 0.10);
  --grid: rgba(16, 18, 22, 0.028);
  --shadow: 0 18px 48px rgba(24, 26, 28, 0.08);
  --btn-bg: #101216;
  --btn-fg: #f8f7f0;
  --btn-hover: #315c38;
  --heat-0: #efeee6;
  --heat-1: #e4e8de;
  --heat-2: #ced8ca;
  --heat-3: #a3baa3;
  --heat-4: #4f7c56;
  --heat-fg: #ffffff;
}

body.labs {
  /* colour: For AI labs (dark) */
  --paper: #0d1217;
  --paper-top: #111820;
  --paper-end: #0a0e12;
  --card: #131a21;
  --wash: #111820;
  --ink: #eef2f4;
  --text: #c3ccd3;
  --muted: #8f9ba6;
  --line: rgba(232, 237, 240, 0.14);
  --line-soft: rgba(232, 237, 240, 0.08);
  --accent: #5fb0d4;
  --deep: #8fcbe6;
  --accent-soft: rgba(95, 176, 212, 0.12);
  --grid: rgba(232, 237, 240, 0.025);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  --btn-bg: #5fb0d4;
  --btn-fg: #0b1015;
  --btn-hover: #8fcbe6;
  --heat-0: #121a22;
  --heat-1: #172630;
  --heat-2: #1f3b4a;
  --heat-3: #326277;
  --heat-4: #5fb0d4;
  --heat-fg: #0b1015;
}

/* aliases still used by inline styles in build_mockup.py */
body { --soft: var(--text); --faint: var(--line-soft); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--paper-top) 0%, var(--paper) 40%, var(--paper-end) 100%);
  background-size: 40px 40px, 40px 40px, auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ol, ul, dl, dd, figure { margin: 0; }
p { color: var(--muted); text-wrap: pretty; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
b, strong { font-weight: 600; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout ---------- */
.shell { width: min(var(--shell), 100% - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
main { display: block; padding-bottom: var(--section); }
main > section { padding: 0; }
main > section + section,
main > .stats + section { margin-top: var(--section); }

/* ---------- Header and the path switch ---------- */
header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.brand img { width: 34px; height: 34px; }
body.labs .brand img { filter: invert(1) brightness(1.1); }
/* legacy path label; the new header drops it for .paths */
.brand .path { margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--line); font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); }

header nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
header nav a { font-size: var(--fs-ui); font-weight: 500; color: var(--text); transition: color 0.15s; }
header nav a:hover { color: var(--ink); }

/* NEW: two-path switch, same place and shape on every page */
header nav.paths { gap: 2px; margin-left: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.paths a { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text); white-space: nowrap; transition: background-color 0.16s, color 0.16s; }
.paths a::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.paths a.trials::before { background: #4f7c56; }
.paths a.labs::before { background: #5fb0d4; }
.paths a[aria-current] { background: var(--btn-bg); color: var(--btn-fg); }
body.trials .paths a.trials[aria-current]::before { background: #8fbf96; }
body.labs .paths a.labs[aria-current]::before { background: #0b1015; }
/* hovering the other path previews its colours */
.paths a.labs:not([aria-current]):hover { background: #0d1217; color: #8fcbe6; }
.paths a.trials:not([aria-current]):hover { background: #f8f7f0; color: #315c38; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--sans); font-size: var(--fs-ui); font-weight: 600; line-height: 1; letter-spacing: -0.005em; white-space: nowrap; transition: background-color 0.16s, border-color 0.16s, color 0.16s; }
.btn:hover { border-color: var(--ink); }
.btn.fill { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn.fill:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
header .btn { height: 38px; padding: 0 16px; }
/* legacy cross-path pills (replaced by .paths): quiet them down */
.btn.dark, .btn.light { background: transparent; border-color: var(--line); color: var(--text); }
/* NEW: arrow link, e.g. "See all 41 tasks" */
.go { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); }
.go:hover { color: var(--ink); }

/* ---------- Labels and breadcrumb ---------- */
.mono { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; line-height: 1.4; letter-spacing: 0.13em; text-transform: uppercase; color: var(--deep); }
section > .mono:first-child { display: block; }
.crumb { padding-top: 8px; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.crumb a { font-weight: 500; color: var(--deep); }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 5vw, 72px); align-items: start; padding-top: clamp(40px, 5.5vw, 80px); }
.crumb + .hero { padding-top: clamp(32px, 4vw, 56px); }
.hero > div:only-child { grid-column: 1 / -1; max-width: 760px; }
.hero > div:only-child .sub, .hero > div:only-child .small { max-width: var(--measure); }
.hero .mono:first-child { display: inline-flex; align-items: center; gap: 12px; }
.hero .mono:first-child::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.7; }
h1 { margin-top: 16px; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; }
.hero h1:first-child { margin-top: 0; }
.crumb + .hero h1 { font-size: var(--fs-h1-detail); }
.sub { margin-top: 20px; max-width: 36rem; font-size: var(--fs-lead); line-height: 1.5; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }
.small { margin-top: 16px; max-width: 36rem; font-size: 1rem; line-height: 1.6; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Imagery ---------- */
.art { overflow: hidden; border-radius: var(--radius); background: radial-gradient(circle at 50% 58%, var(--accent-soft), transparent 65%), var(--wash); }
.hero > .art { border: 1px solid var(--line-soft); }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #101216 center / cover; box-shadow: var(--shadow); }
.video span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(248, 247, 240, 0.94); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); transform: translate(-50%, -50%); transition: transform 0.16s; }
.video span::after { content: ""; margin-left: 5px; border-left: 18px solid #101216; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.video:hover span { transform: translate(-50%, -50%) scale(1.06); }
.cap { margin-top: 14px; font-size: var(--fs-small); font-weight: 500; color: var(--text); }

/* ---------- Section headings ---------- */
h2 { margin-top: 12px; max-width: 760px; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.025em; font-weight: 750; }
section > h2 + * { margin-top: var(--head-gap); }
h3 { font-size: var(--fs-h3); line-height: 1.35; letter-spacing: -0.01em; font-weight: 650; }

/* ---------- Cards: art on top, text inside the card ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--card); transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s; }
.card > :not(.art) { margin-left: 24px; margin-right: 24px; }
.card .art { margin-bottom: 12px; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
.card .meta { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.11em; text-transform: uppercase; color: var(--deep); }
.card p { font-size: var(--fs-small); line-height: 1.55; }
a.card:hover { transform: translateY(-2px); border-color: var(--line); box-shadow: var(--shadow); }
a.card:hover h3 { color: var(--deep); }
.card.off { opacity: 0.55; }

/* NEW: ninth cell of the landing grid, the way into all tasks */
.card.more { justify-content: center; gap: 14px; padding: 32px 0; background: var(--wash); }
.card.more .search { align-self: stretch; width: auto; max-width: none; margin-top: 6px; margin-bottom: 0; }

/* Benchmark page: the five tasks as rows (art left, text right) */
.cards.five { grid-template-columns: 1fr; gap: 16px; }
.five .card { display: grid; grid-template-columns: 216px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 8px; align-items: start; padding: 16px 28px 16px 16px; }
.five .card > :not(.art) { margin: 0; }
.five .card h3, .five .card p { grid-column: 2; }
.five .card .art { grid-row: 1 / 3; margin: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-s); }
.five .card h3 { margin-top: 10px; font-size: 1.1875rem; }
.five .card p { max-width: 640px; font-size: 1rem; color: var(--text); }
.five .card .meta { grid-column: 3; grid-row: 1 / 3; align-self: center; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.five .card .meta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e9b765; }

/* ---------- Task search and list ---------- */
.search { display: block; width: 100%; max-width: 440px; height: 48px; margin-bottom: 32px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: var(--fs-ui); outline: none; }
.search::placeholder { color: var(--muted); }
.search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.toc { columns: 3; column-gap: 48px; }
.toc a, .toc span { display: block; break-inside: avoid; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-ui); font-weight: 400; line-height: 1.4; color: var(--text); }
.toc a { color: var(--deep); font-weight: 500; }
.toc a:hover { color: var(--ink); }

/* ---------- Findings (numbered points) ---------- */
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; padding: 0; list-style: none; counter-reset: n; }
.points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.55; font-weight: 400; color: var(--text); }
.points li::before { counter-increment: n; content: counter(n, decimal-leading-zero); padding-top: 3px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; color: var(--accent); }

/* ---------- Stat strips ---------- */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
main > .hero + .stats { margin-top: clamp(40px, 5vw, 64px); }
.stats > div { padding: 24px 28px 26px; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats b { display: block; font-size: var(--fs-figure); line-height: 1; letter-spacing: -0.03em; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink); }
.stats span { display: block; margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }

.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.four > div { padding: 28px 28px 32px; }
.four > div + div { border-left: 1px solid var(--line); }
.four .mono { display: block; }
.four b { display: block; margin: 18px 0 12px; font-size: var(--fs-figure); line-height: 1; letter-spacing: -0.03em; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink); }
.four p { font-size: var(--fs-small); line-height: 1.55; }

/* ---------- Score rows (task page) ---------- */
.scores { display: grid; }
.score { display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr) 200px 96px; align-items: center; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.score > span:first-child { line-height: 1.3; }
.score b { font-size: var(--fs-ui); font-weight: 600; }
.score small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
.bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--line-soft); }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.score .v { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-ui); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.score .v small { display: inline; margin: 0; font-weight: 400; }
.score .c { text-align: right; font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--muted); }
/* NEW: column header row */
.score.head { padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.score.head span { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: 1.4; font-variant-numeric: tabular-nums; }
th { padding: 0 16px 12px; border-bottom: 1px solid var(--line); vertical-align: bottom; text-align: left; font-family: var(--mono); font-size: 0.66rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--text); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
td.n, th.n { text-align: right; }
td b { font-weight: 600; color: var(--ink); }
td small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
td a b { color: var(--deep); }
td a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.note { margin-top: 16px; max-width: var(--measure); font-size: var(--fs-small); line-height: 1.55; }

/* Heatmap: equal score columns, five clear steps, solid colour only for 100% */
table.grid { table-layout: fixed; width: calc(100% + 8px); margin-left: -4px; margin-right: -4px; border-collapse: separate; border-spacing: 4px; }
.grid th { padding: 0 6px 8px; border-bottom: 0; text-align: center; }
.grid th:first-child { width: 26%; padding-left: 4px; text-align: left; }
.grid:not(.arms) th:last-child { width: 10%; text-align: right; }
.grid td { border-bottom: 0; }
.grid td:first-child { padding: 6px 4px; }
.grid td:last-child { padding-right: 6px; font-weight: 600; }
.grid td.cell { height: 52px; padding: 0 6px; border: 0; border-radius: 8px; text-align: center; font-weight: 600; color: var(--ink); }
.grid td.cell.heat-0 { background: var(--heat-0); color: var(--muted); }   /* under 50% */
.grid td.cell.heat-1 { background: var(--heat-1); }                       /* 50-69%  */
.grid td.cell.heat-2 { background: var(--heat-2); }                       /* 70-84%  */
.grid td.cell.heat-3 { background: var(--heat-3); }                       /* 85-99%  */
.grid td.cell.heat-4 { background: var(--heat-4); color: var(--heat-fg); } /* 100%, a pass */
table.grid.arms { width: min(888px, 100% + 8px); }                        /* NEW: environment results */

/* ---------- Spec sheet (labs heroes) ---------- */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.spec > div { display: flex; flex-direction: column; gap: 6px; padding: 16px 0 18px; border-bottom: 1px solid var(--line-soft); }
.spec > div:nth-child(-n + 2) { border-top: 1px solid var(--line); }
.spec dt { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.spec dd { font-size: 1rem; font-weight: 550; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--ink); }
/* NEW modifier: big figures, number above label */
.spec.figures > div { flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 24px 0 22px; }
.spec.figures dt { font-family: var(--sans); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; text-transform: none; }
.spec.figures dd { font-size: var(--fs-figure); font-weight: 750; line-height: 1; letter-spacing: -0.03em; }

/* ---------- Capability list (labs) ---------- */
.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.caps > :nth-child(-n + 2) { border-top: 1px solid var(--line); }
.caps > a, .caps > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: baseline; gap: 8px 16px; padding: 24px 0 28px; border-bottom: 1px solid var(--line-soft); }
.caps h3 { font-size: 1.0625rem; }
.caps .n { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--deep); }
.caps p { grid-column: 1 / -1; max-width: 34rem; font-size: var(--fs-small); line-height: 1.55; }
.caps > a h3::after { content: " \2192"; color: var(--deep); opacity: 0; transition: opacity 0.16s; }
.caps > a:hover h3 { color: var(--deep); }
.caps > a:hover h3::after { opacity: 1; }

/* ---------- Tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.tags a:hover { border-color: var(--accent); color: var(--deep); }

/* ---------- Key-value sheet (environment page) ---------- */
.kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); max-width: 920px; border-top: 1px solid var(--line); }
.kv dt, .kv dd { padding: 18px 0; border-bottom: 1px solid var(--line-soft); line-height: 1.6; }
.kv dt { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.kv dd { padding-left: 24px; font-size: 1rem; color: var(--text); }
code { padding: 1px 5px; border-radius: 5px; background: var(--accent-soft); font-family: var(--mono); font-size: 0.84em; color: var(--ink); }

/* ---------- Call-to-action band ---------- */
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 48px 56px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(120deg, var(--accent-soft), transparent 55%), var(--card); }
.band .mono { display: block; }
.band h2 { margin: 12px 0 0; max-width: 640px; font-size: 1.5rem; line-height: 1.25; }

/* ---------- Footer ---------- */
footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; padding: 32px 0 48px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
footer a:hover { color: var(--ink); }
footer p { font-size: var(--fs-small); }
/* NEW: both paths, side by side, on every page */
.foot-paths { display: grid; flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
.foot-paths a { display: grid; gap: 4px; padding: 20px 24px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card); }
.foot-paths a b { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-ui); }
.foot-paths a b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.foot-paths a.trials b::before { background: #4f7c56; }
.foot-paths a.labs b::before { background: #5fb0d4; }
.foot-paths a:hover { border-color: var(--line); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points { grid-template-columns: 1fr; }
  .toc { columns: 2; }
  .caps { grid-template-columns: 1fr; }
  .caps > :nth-child(2) { border-top: 0; }
  .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .four > div:nth-child(3) { border-left: 0; }
  .four > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .score { grid-template-columns: minmax(0, 1fr) 190px 64px; row-gap: 10px; }
  .score .bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  header nav.paths { order: -1; flex-basis: 100%; margin: 0; }
  .paths a { flex: 1; justify-content: center; padding: 0 10px; font-size: 0.6rem; }
  header nav:not(.paths) { flex-wrap: wrap; gap: 20px; }
  .five .card { grid-template-columns: 1fr; grid-template-rows: none; padding: 0 0 20px; }
  .five .card > :not(.art) { margin: 0 20px; }
  .five .card h3, .five .card p, .five .card .meta { grid-column: 1; grid-row: auto; }
  .five .card .meta { justify-self: start; }
  .five .card .art { grid-row: auto; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .five .card .art svg { width: auto; max-width: 100%; height: 170px; margin: 0 auto; }
  .stats { grid-auto-flow: row; }
  .stats > div + div { border-left: 0; border-top: 1px solid var(--line); }
  table { display: block; overflow-x: auto; }
  .spec { grid-template-columns: 1fr; }
  .spec > div:nth-child(2) { border-top: 0; }
  .spec.figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec.figures > div:nth-child(2) { border-top: 1px solid var(--line); }
  .kv { grid-template-columns: 1fr; }
  .kv dt { padding-bottom: 0; border-bottom: 0; }
  .kv dd { padding-left: 0; padding-top: 6px; }
  .band { padding: 32px 24px; }
  .foot-paths { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  header nav:not(.paths) { flex-basis: 100%; margin-left: 0; }
  .cards { grid-template-columns: 1fr; }
  .toc { columns: 1; }
  .four { grid-template-columns: 1fr; }
  .four > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .score { grid-template-columns: minmax(0, 1fr) auto; }
  .score .c { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .video span, .paths a, .btn { transition: none; }
  a.card:hover { transform: none; }
}

/* ---------- Second audit (verified on the built pages) ---------- */
.sub { font-weight: 500; }
.four b { font-size: clamp(1.75rem, 1.3rem + 0.9vw, 2.25rem); white-space: nowrap; }
.caps > a, .caps > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.caps .n { order: -1; }
.hero > .spec:not(.figures) { grid-template-columns: 1fr; }
.hero > .spec:not(.figures) > div { flex-direction: row; align-items: baseline; gap: 16px; padding: 12px 0; }
.hero > .spec:not(.figures) > div:nth-child(2) { border-top: 0; }
.hero > .spec:not(.figures) dt { flex: 0 0 148px; }
.hero > .spec:not(.figures) dd { text-wrap: balance; }
.cards + .note { margin-top: 40px; }
.five .card .meta { color: var(--deep); }

/* =====================================================================
   Direction 2, "show the run": pictures of what the AIs did, not boxes of text.
   Append this file to the end of mockup-style.css. It adds components and
   overrides only the trials hero. Markup: index.html and benchmark.html here.
   ===================================================================== */

:root { --thumb-r: 14px; }

/* ---------- The picture frame: the only rectangle a card keeps ---------- */
.thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--thumb-r);
  background-color: #f4f3ec;
  background-image:
    linear-gradient(rgba(16, 18, 22, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 18, 22, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #fbfaf5, #efeee6);
  background-size: 12px 12px, 12px 12px, auto;
}
.thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(16, 18, 22, 0.07); pointer-events: none; }
.thumb > img, .thumb > svg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.thumb > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* a muted loop over its own still */
a:hover .thumb > img, a:hover .thumb > svg { transform: scale(1.025); }
.thumb.photo { background: #101216; box-shadow: var(--shadow); }
.thumb.photo::after { display: none; }

/* play button: centred on the episode, small and bottom-right on a task's still */
.play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(248, 247, 240, 0.94); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); transition: transform 0.16s; }
.play::after { content: ""; position: absolute; left: 27px; top: 23px; border-left: 18px solid #101216; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
a:hover .play { transform: scale(1.06); }
.play.sm { left: auto; top: auto; right: 14px; bottom: 14px; width: 44px; height: 44px; margin: 0; background: #101216; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.play.sm::after { left: 17px; top: 13px; border-left: 13px solid #f8f7f0; border-top-width: 9px; border-bottom-width: 9px; }

/* ---------- Landing hero: the latest episode leads, at half the page ---------- */
.hero.lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px clamp(40px, 5vw, 72px); }
.hero.lead .sub { max-width: 34rem; }
.hero.lead .btns { margin-top: 32px; }
.ep-feature { display: block; color: inherit; }
.ep-feature .thumb { border-radius: 18px; }
.ep-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; font-size: var(--fs-ui); font-weight: 500; line-height: 1.45; color: var(--ink); }
.ep-line .mono { color: var(--deep); }
.ep-line .mono:first-child::before { display: none; }
a.ep-feature:hover .ep-line { color: var(--deep); }

/* ---------- Benchmark grid: picture, then text on the paper, no card box ---------- */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 32px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 32px; margin-top: 72px; }
.tile { display: flex; flex-direction: column; color: inherit; }
.tile .thumb { margin-bottom: 20px; }
.tile .kick, .ep-row .kick { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; line-height: 1.4; letter-spacing: 0.13em; text-transform: uppercase; color: var(--deep); }
.tile h3 { margin-top: 8px; font-size: 1.25rem; line-height: 1.3; font-weight: 650; letter-spacing: -0.015em; }
.tile.big h3 { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); line-height: 1.25; }
.tile p { margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--text); }
.tile.big p { font-size: 1.0625rem; }
a.tile:hover h3 { color: var(--deep); }

/* the data mark: one dot per task, filled when at least one AI met every requirement */
.done { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; padding-top: 14px; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.done i { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--accent); }
.done i.on { background: var(--accent); }
.done span { margin-left: 7px; }

/* one quiet line instead of a search box in a box */
.find { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 88px; padding-top: 32px; border-top: 1px solid var(--line); }
.find b { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
.find .search { flex: 1 1 260px; max-width: 420px; margin: 0; }
.find + .note { margin-top: 24px; }

/* ---------- Benchmark page: the headline, then the picture that proves it ---------- */
.bhero { padding-top: clamp(32px, 4vw, 56px); }
.bhero > * { max-width: 820px; }
.bhero .mono { display: inline-flex; align-items: center; gap: 12px; }
.bhero .mono::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.7; }
.bhero h1 { font-size: var(--fs-h1-detail); }
.bhero .sub { max-width: 40rem; }
.watch { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.watch::before { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #101216 no-repeat center / 12px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Cpath d='M1 0.5 L12 6.5 L1 12.5 Z' fill='%23f8f7f0'/%3E%3C/svg%3E"); background-position: 12px center; }
.watch:hover { color: var(--deep); }

/* the board: every AI's score on every task, and the line none of them reached */
main > .board-wrap { margin-top: clamp(48px, 5vw, 72px); }
.board { margin: 0; --name: 200px; }
.board .axis { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); padding-bottom: 10px; }
.board .axis div { position: relative; height: 18px; }
.board .axis div span { position: absolute; left: var(--x); transform: translateX(-50%); font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.board .axis div span:first-child { transform: none; }
.board .axis div span.fin { transform: translateX(-100%); color: var(--ink); }
.board .row { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); align-items: center; border-top: 1px solid var(--line-soft); }
.board .row:last-of-type { border-bottom: 1px solid var(--line-soft); }
.board .name { display: flex; flex-direction: column; gap: 2px; padding-right: 16px; font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; color: var(--ink); }
.board .name a:hover { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
.board .name small { font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.board .track { position: relative; height: 92px; --axis: 56px; }
.board .track::before { content: ""; position: absolute; left: 0; right: 0; top: var(--axis); height: 1px; background: var(--line); }
.board .track::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; margin-right: -1px; background: var(--ink); opacity: 0.85; }
.board .track i { position: absolute; left: var(--x); top: calc(var(--axis) + var(--y, 0px)); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); }
.board .track i.top { background: var(--ink); }
.board .track b { position: absolute; right: calc(100% - var(--x) - 6px); top: 10px; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--ink); }
.board .track b::after { content: ""; position: absolute; right: 6px; top: 22px; width: 1px; height: 14px; background: var(--ink); opacity: 0.35; }
.board figcaption { margin-top: 16px; max-width: var(--measure); font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }

/* the tasks, as an episode list: picture left, text right, no boxes */
.eps { display: grid; gap: 64px; margin: var(--head-gap) 0 0; padding: 0; list-style: none; }
.ep-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: center; color: inherit; }
.ep-row .body { display: block; }
.ep-row h3 { margin-top: 8px; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.625rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.ep-row p { margin-top: 10px; max-width: 36rem; font-size: 1.0625rem; line-height: 1.55; color: var(--text); }
.ep-row .meta { display: block; margin-top: 14px; font-size: var(--fs-small); color: var(--muted); }
a.ep-row:hover h3 { color: var(--deep); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero.lead { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .features { grid-template-columns: 1fr; gap: 48px; }
  .tiles { margin-top: 48px; gap: 48px 24px; }
  .ep-row { grid-template-columns: 1fr; gap: 20px; }
  .eps { gap: 48px; }
  .board { --name: 1fr; }
  .board .axis { grid-template-columns: 1fr; }
  .board .axis > span { display: none; }
  .board .axis div span:nth-child(2) { display: none; }
  .board .row { grid-template-columns: 1fr; padding-top: 14px; }
  .board .track { height: 104px; --axis: 60px; }
  .board .track i { top: calc(var(--axis) + var(--ym, 0px)); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; box-shadow: 0 0 0 1.5px var(--paper); }
  .board .track b { top: 6px; }
}
@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
  .play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .play::after { left: 22px; top: 18px; border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
  .find { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .thumb > video { display: none; }
  .thumb > img, .thumb > svg, .play { transition: none; }
  a:hover .thumb > img, a:hover .thumb > svg, a:hover .play { transform: none; }
}

/* ---------- Mockup additions on top of direction 2 ---------- */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll > table { min-width: 640px; }
figure figcaption { margin-top: 14px; max-width: var(--measure); font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
.hero.run { align-items: center; }
.hero.run figure .thumb { border-radius: 16px; }
.hero .watch { margin-top: 24px; }
.bhero .small { max-width: 40rem; }
figure.wide .thumb { aspect-ratio: auto; background: none; }
figure.wide .thumb > img { height: auto; object-fit: contain; }
body.labs .board .track::after { background: var(--accent); }

/* ---------- Round 3: designer review 2 and the cold reads ---------- */
/* the trials heatmap: only 100% is moss, so nothing short of it reads as a pass; below it a neutral ramp */
body.trials { --heat-1: #e8e7df; --heat-2: #dcdbd2; --heat-3: #cbcac0; }
.thumb > picture, .thumb > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
a:hover .thumb > picture > img { transform: scale(1.025); }
.done span { flex-basis: 100%; margin: 6px 0 0; }
.board .track b.end { right: 12px; }
.board .track b.end::after { display: none; }
section > h2 + .board { margin-top: var(--head-gap); }
p.small a { color: var(--deep); }
.scroll :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.stats { border-width: 1px 0; border-radius: 0; background: none; }
.stats > div:first-child { padding-left: 0; }
.four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .score.head span:nth-child(2) { display: none; }
  .hero.lead .btns { display: none; }
}
@media (max-width: 760px) {
  figure.wide .thumb { overflow-x: auto; }
  figure.wide .thumb::after { display: none; }
  figure.wide .thumb > img { width: 820px; max-width: none; }
  .stats > div { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; }
  .stats span { margin: 0; }
}
@media (max-width: 620px) {
  .envs :is(th, td):is(:nth-child(2), :nth-child(4)) { display: none; }
  .envs td:nth-child(3) { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .thumb > picture > img { transition: none; }
  a:hover .thumb > picture > img { transform: none; }
}
/* ---------- Landing benchmarks: contents (append to mockup-style.css; markup in section-b.html) ----------
   A numbered list, like a magazine's contents page. The headline is the main visual;
   the picture sits to its right, bigger for the two lead stories. Hairline rules, no boxes. */
.entries { margin-top: var(--head-gap); border-top: 1px solid var(--ink); }
.entry { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 380px); grid-template-areas: "num txt pic"; align-items: start; gap: 0 clamp(28px, 4vw, 56px); padding: 40px 0 44px; border-bottom: 1px solid var(--line); }
.entry.lead { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 480px); padding: 48px 0 56px; }
.entry > .num { grid-area: num; padding-top: 1px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.06em; color: var(--deep); }
.entry > .txt { grid-area: txt; }
.entry > .thumb { grid-area: pic; }
.entry .kick { display: block; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; line-height: 1.4; letter-spacing: 0.13em; text-transform: uppercase; color: var(--deep); }
.entry h3 { margin-top: 14px; font-size: clamp(1.5rem, 1.1rem + 1.05vw, 2.125rem); line-height: 1.12; font-weight: 750; letter-spacing: -0.03em; }
.entry.lead h3 { font-size: clamp(1.875rem, 1.25rem + 1.6vw, 2.75rem); line-height: 1.06; letter-spacing: -0.035em; }
.entry p { margin-top: 16px; max-width: 36rem; font-size: var(--fs-body); line-height: 1.6; color: var(--text); }
.entry .done { margin-top: 18px; padding-top: 0; }
.entry .done span { flex-basis: auto; margin: 0 0 0 8px; }
.entry .nobr { white-space: nowrap; }

/* the list's last rule is the divider before the task search */
.entries + .find { margin-top: 0; padding-top: 40px; border-top: 0; }

/* the one story with a page: the whole entry is its link */
.entry h3 a::after { content: ""; position: absolute; inset: 0; }
.entry.link:hover h3 { color: var(--deep); }
.entry.link:hover .thumb > img, .entry.link:hover .thumb > svg, .entry.link:hover .thumb > picture { transform: scale(1.025); }

@media (max-width: 760px) {
  .entry .done span { flex-basis: 100%; margin: 6px 0 0; }
  .entry, .entry.lead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "head" "pic" "para" "dots"; padding: 32px 0 36px; }
  .entry > .num { display: none; }
  .entry > .txt { display: contents; }
  .entry .kick { grid-area: kick; }
  .entry h3 { grid-area: head; margin-top: 10px; }
  .entry > .thumb { grid-area: pic; margin-top: 20px; }
  .entry p { grid-area: para; }
  .entry .done { grid-area: dots; }
}
/* =====================================================================
   Landing, round 7: back to the live site's scale (design-audit-3). The contents list (round 5) with short titles, the
   result as one plain line, and a drawn scene of each job's moment (mockup_scenes.py). Round 6's huge type is gone.
   ===================================================================== */
.hero.lead h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.035em; }   /* the live h1 */
.hero.lead .sub { max-width: 30rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; font-weight: 500; }

/* every row the same: number, label and picture share one top edge; titles sit under the 30px section heading */
.entry { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 440px); padding: 44px 0 48px; }
.entry > .num { padding-top: 0; font-size: var(--fs-label); line-height: 1.4; }
.entry h3 { margin-top: 10px; font-size: clamp(1.375rem, 1.15rem + 0.45vw, 1.625rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.entry p.stat { margin-top: 12px; font-size: var(--fs-body); font-weight: 500; line-height: 1.5; color: var(--ink); }
.entry p.stat b { margin-right: 0.25em; font-size: 1.125rem; font-weight: 750; letter-spacing: -0.01em; }
.entry p.stat + p { margin-top: 8px; color: var(--muted); }
.entry .more { display: inline-block; margin-top: 16px; }
.entry.link:hover .more { color: var(--ink); }

/* drawings sit in the live site's soft panel, not on graph paper */
.thumb:not(.photo) { background: radial-gradient(circle at 50% 56%, rgba(79, 124, 86, 0.15), transparent 64%), #f3f1e8; }
.thumb:not(.photo)::after { box-shadow: inset 0 0 0 1px rgba(16, 18, 22, 0.08); }
.entry > .thumb, .bhero > .thumb { border-radius: 14px; }

@media (max-width: 760px) {
  header nav.paths { order: 3; flex-basis: 100%; margin: 4px 0 0; }
  .entry { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pic" "kick" "head" "stat" "para" "more"; padding: 32px 0 36px; }
  .entry > .thumb { margin: 0 0 20px; }
  .entry p.stat { grid-area: stat; }
  .entry > .txt > p:not(.stat) { grid-area: para; }
  .entry .more { grid-area: more; justify-self: start; }
}
@media (max-width: 620px) {
  header nav:not(.paths) { flex-basis: auto; margin-left: auto; gap: 16px; }
}

/* the benchmark page: the scene the reader clicked, beside the headline; the result a size under the headline */
.bhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: 40px clamp(40px, 5vw, 72px); }
.bhero .fig { margin: 20px 0 0; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem); line-height: 1.4; font-weight: 500; color: var(--ink); }
.bhero .fig .n { margin-right: 0.3em; font-size: clamp(1.75rem, 1.4rem + 0.9vw, 2.25rem); line-height: 1; font-weight: 750; letter-spacing: -0.03em; white-space: nowrap; }
.bhero .fig .n .of { padding: 0 0.1em; font-size: 0.55em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.bhero .fig + .sub { margin-top: 20px; }
@media (max-width: 860px) {
  .bhero { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Prototype 5, revision 2 (build_proto.py): the public path built from the vision. Same paper, moss and line art as the
   live site.
   ===================================================================== */
main > section.shell + section.shell { margin-top: clamp(80px, 9vw, 128px); }
.lede { margin-top: 16px; max-width: 40rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--text); }
.after { margin-top: 28px; max-width: 46rem; font-size: var(--fs-body); line-height: 1.6; color: var(--text); }
.after a, .after .go { font-weight: 600; color: var(--deep); }
.after .go { margin-left: 6px; white-space: nowrap; }
.tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 2px; color: var(--deep); }
p.body { margin-top: 18px; max-width: 42rem; font-size: var(--fs-body); line-height: 1.65; color: var(--text); }
section > h2 + p.body { margin-top: var(--head-gap); }

/* ---------- Landing hero: the words, and the jobs running into one agent ---------- */
.hero.home { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.hero.home .mono { display: block; }
.hero.home h1 { margin-top: 18px; max-width: 15em; }
.hero.home .sub { max-width: 32rem; }
.hero.home .small { max-width: 32rem; font-size: var(--fs-ui); color: var(--text); }
.hero.home .btns + .small { margin-top: 22px; }
.hub svg { display: block; width: 100%; height: auto; }

/* ---------- How a trial works: four steps, and lessons: three numbered columns ---------- */
.steps, .lessons { margin: var(--head-gap) 0 0; padding: 0; list-style: none; counter-reset: l; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 48px); }
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 40px); }
.steps li, .lessons li { counter-increment: l; padding-top: 20px; border-top: 1px solid var(--ink); }
.steps li::before, .lessons li::before { content: counter(l, decimal-leading-zero); font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; color: var(--deep); }
.steps b, .lessons b { display: block; margin-top: 10px; font-size: 1.125rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.steps p, .lessons p { margin-top: 10px; font-size: var(--fs-ui); line-height: 1.6; color: var(--muted); }
.steps p { color: var(--text); }

/* ---------- Four things to know (landing) ---------- */
.know { margin: var(--head-gap) 0 0; padding: 0; list-style: none; counter-reset: k; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.know li { counter-increment: k; padding: 22px 0 32px; border-top: 1px solid var(--line); }
.know li > .mono { display: block; }
.hero .sub.answer, .bhero .sub.answer { margin-top: 14px; }
.know h3 { margin-top: 10px; max-width: 30rem; font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem); line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
.know p { margin-top: 10px; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }
.know p.do, .finding .tip, .entry p.take { color: var(--ink); }
.know p.do b, .finding .tip b, .entry p.take b { font-weight: 650; color: var(--deep); }

/* ---------- The six kinds of work (round-7 entries, now with the situation, the best, the shortfall, the takeaway) ---------- */
.entry p.what { margin-top: 10px; }
.entry p.best { margin-top: 14px; font-weight: 500; color: var(--ink); }
.entry p.short { margin-top: 8px; color: var(--text); }
.entry p.take { margin-top: 14px; font-size: var(--fs-ui); }
.entry p.story { margin-top: 14px; color: var(--text); }
.entry .more { display: inline-block; margin-top: 16px; }

/* ---------- How the AIs compare ---------- */
table.ais td:first-child { width: 46%; }
.scroll table.ais :is(th, td):first-child { position: static; background: none; }   /* fits on a phone; no sticky band */
.scroll > table.ais { min-width: 0; }
table.ais td.n, table.ais th.n { width: 18%; }
.compare .scroll, section > .lede + .scroll { margin-top: 32px; }

/* ---------- Follow the trials ---------- */
.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; gap: 28px 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.signup h2 { margin-top: 12px; }
.signup p { margin-top: 12px; max-width: 34rem; font-size: var(--fs-body); line-height: 1.55; color: var(--text); }
.signup form { display: flex; gap: 10px; }
.signup .search { flex: 1; margin: 0; }

/* ---------- Kind-of-work and job pages ---------- */
.bhero.solo { display: block; }
.bhero.solo > div { max-width: 52rem; }
.bhero.solo .search { margin-top: 28px; }
.verdict { margin-top: 18px; max-width: 38rem; font-size: var(--fs-body); line-height: 1.55; font-weight: 500; color: var(--ink); }
.verdict b { font-weight: 750; }

.jrows { margin: var(--head-gap) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.jrow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 0 clamp(28px, 4vw, 56px); align-items: start; padding: 36px 0 40px; border-bottom: 1px solid var(--line); }
.jrow .art { overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 50% 56%, rgba(79, 124, 86, 0.15), transparent 64%), #f3f1e8; box-shadow: inset 0 0 0 1px rgba(16, 18, 22, 0.08); }
.jrow .art svg { display: block; width: 100%; height: auto; }
.jrow .kick { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--deep); }
.jrow h3 { margin-top: 8px; font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.jrow h3 a::after { content: ""; position: absolute; inset: 0; }
.jrow.link:hover h3 { color: var(--deep); }
.jrow p { margin-top: 10px; max-width: 40rem; font-size: var(--fs-body); line-height: 1.6; color: var(--text); }
.jrow p.best { margin-top: 14px; font-weight: 500; color: var(--ink); }
.jrow p.short { margin-top: 6px; }
.jrow .more { display: inline-block; margin-top: 14px; }

.curious-sec .grid-h { margin-top: 56px; font-size: 1.125rem; font-weight: 700; }
.curious-sec .grid-h + .scroll { margin-top: 20px; }
.jobs-grid { min-width: 860px; }
.jobs-grid th:first-child { width: 20%; }
.jobs-grid th { font-size: 0.6rem; letter-spacing: 0.06em; }
.grid td.cell.none { background: transparent; color: var(--muted); }

.curious { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); margin: var(--head-gap) 0 0; }
.curious > div { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.curious dt { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); }
.curious dd { margin: 8px 0 0; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }
section > h2 + .body + .curious, p.body + .curious { margin-top: 36px; }
.bestof dt { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }

/* the job page */
.needs, .moments { margin: var(--head-gap) 0 0; padding: 0; list-style: none; counter-reset: n; }
.needs li, .moments li { counter-increment: n; display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 18px 0 20px; border-top: 1px solid var(--line); }
.needs li::before, .moments li::before { content: counter(n, decimal-leading-zero); font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; line-height: 1.9; color: var(--deep); }
.needs b { grid-column: 2; font-size: 1.0625rem; font-weight: 650; color: var(--ink); }
.needs p, .moments p { grid-column: 2; margin-top: 6px; max-width: 44rem; font-size: var(--fs-ui); line-height: 1.6; color: var(--muted); }
.moments h3 { grid-column: 2; font-size: 1.1875rem; line-height: 1.35; font-weight: 700; }

.airows { margin-top: var(--head-gap); border-top: 1px solid var(--ink); }
.airow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 44px; gap: 8px 20px; align-items: center; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.airow .who b { display: block; font-size: var(--fs-ui); font-weight: 650; color: var(--ink); }
.airow .who small { font-size: 0.8125rem; color: var(--muted); }
.airow .bar { height: 8px; border-radius: 4px; background: var(--heat-0); }
.airow .bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.airow .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.airow .g { grid-column: 1 / -1; }
.gate { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: #8a5a14; }
.gate::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e9b765; box-shadow: 0 0 0 1.5px #c48a2a inset; }
.gate.ok { color: var(--deep); }
.gate.ok::before { background: var(--accent); box-shadow: none; }
.airow p { grid-column: 1 / -1; max-width: 48rem; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }

.stats b { white-space: nowrap; }

/* what we've learned */
.findings { border-top: 1px solid var(--ink); }
.finding { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: clamp(24px, 4vw, 48px); padding: 40px 0 44px; border-bottom: 1px solid var(--line); }
.finding.pic { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 320px); }
.finding.pic > .thumb { align-self: start; margin-top: 2px; border-radius: 12px; }
.finding .num { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; line-height: 1.6; color: var(--deep); }
.finding .kick { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--deep); }
.finding .kick::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.finding h3 { margin-top: 10px; max-width: 40rem; font-size: clamp(1.375rem, 1.15rem + 0.5vw, 1.625rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.finding .lede { margin-top: 12px; font-size: var(--fs-body); }
.finding .ev { margin: 14px 0 0; padding-left: 18px; max-width: 44rem; }
.finding .ev li { margin-top: 8px; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }
.finding .ev a { color: var(--deep); font-weight: 500; }
.finding .tip { margin-top: 16px; max-width: 44rem; font-size: var(--fs-ui); line-height: 1.6; }

/* all jobs */
.jgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(32px, 5vw, 72px); align-items: start; }
.jgroup h3 { padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 1.125rem; }
.jgroup h3 small { margin-left: 8px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.jgroup h3 a { color: var(--deep); }
.jgroup ul { margin: 0; padding: 0; list-style: none; }
.jgroup li { display: grid; gap: 4px; padding: 14px 0 15px; border-bottom: 1px solid var(--line-soft); }
.jgroup li .t { font-size: var(--fs-ui); line-height: 1.4; font-weight: 600; color: var(--ink); }
.jgroup li .t a { color: var(--deep); }
.jgroup li .one { font-size: var(--fs-small); line-height: 1.5; color: var(--text); }
.jgroup li .v { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.jgroup li .v.ok { color: var(--deep); font-weight: 600; }

/* how we test */
.method { grid-template-columns: minmax(0, 1fr); max-width: 60rem; }
.method > div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 8px 40px; padding: 20px 0 22px; }
.method dt { padding-top: 3px; }
.method dd { margin: 0; font-size: var(--fs-body); }

@media (max-width: 980px) {
  .hero.home { grid-template-columns: minmax(0, 1fr); }
  .lessons { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 40px); }
  .finding.pic { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 240px); }
}

/* condensed leaderboards: how each AI did, beside each benchmark on the landing and beside each job on a benchmark page (the owner,
   6 November 2026). The job pages' miniboard in small: one hue, a 6px bar from one baseline, the score in ink, a native tooltip per row. */
.bboard { position: relative; z-index: 1; padding: 16px 18px 14px; border-radius: 12px; background: var(--wash); box-shadow: inset 0 0 0 1px rgba(16, 18, 22, 0.07); }
.entry > .bboard { grid-area: pic; }
.bboard .bt { margin: 0; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; line-height: 1.4; letter-spacing: 0.13em; text-transform: uppercase; color: var(--deep); }
.bboard ol { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.bboard li { display: grid; grid-template-columns: minmax(0, 8.75rem) minmax(32px, 1fr) 1.75rem 2.25rem 1.5rem; align-items: center; gap: 0 9px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.bboard.nor li { grid-template-columns: minmax(0, 8.75rem) minmax(32px, 1fr) 1.75rem 2.25rem; }
.bboard.jb li { grid-template-columns: minmax(0, 7.75rem) minmax(32px, 1fr) 1.75rem; }
.bboard .who { overflow: hidden; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.bboard .bar { height: 6px; border-radius: 3px; background: var(--heat-0); box-shadow: inset 0 0 0 1px var(--line-soft); }
.bboard .bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.bboard .v { text-align: right; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.bboard .j, .bboard .r { text-align: right; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.bboard .r { font-weight: 650; color: var(--deep); }
.bboard li.bh { padding: 6px 0 3px; }
.bboard li.bh span { font-family: var(--mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bboard .bfew { margin: 12px 0 0; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.bboard ol.few { margin-top: 4px; }
.bboard ol.few .who, .bboard ol.few .v { color: var(--muted); }
.bboard ol.few .bar i { background: #a9b9aa; }
.bboard .bnote { margin: 8px 0 0; max-width: none; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
.jrow .bboard { margin-top: 2px; }
@media (max-width: 860px) {
  .curious, .jgroups, .signup, .know { grid-template-columns: minmax(0, 1fr); }
  .method > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* one column, picture first; flex so every paragraph keeps its own row */
  .entry, .entry.lead { display: flex; flex-direction: column; align-items: stretch; }
  .entry > .txt { display: block; }
  .entry > .thumb { order: -1; margin: 0 0 20px; }
  table.ais { display: table; }
  table.ais th { letter-spacing: 0.04em; }
  table.ais td:first-child { width: auto; }
  table.ais :is(th, td) { padding-left: 8px; padding-right: 8px; }
  .jrow { grid-template-columns: minmax(0, 1fr); }
  .jrow .art { margin-bottom: 18px; }
  .jrow .bboard, .entry > .bboard { margin-top: 22px; }
  .airow { grid-template-columns: minmax(0, 1fr) 44px; }
  .airow .bar { grid-column: 1 / -1; grid-row: 2; }
  .finding, .finding.pic { grid-template-columns: minmax(0, 1fr); }
  .finding .num { display: none; }
  .finding.pic > .thumb { order: -1; margin: 0 0 20px; }
  .signup form { flex-direction: column; }
  .signup .search { flex: none; height: 48px; }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .hub .lbl { display: none; }   /* too small to read at phone width; the pictures carry it */
}

/* a heat grid is 8px wider than its column, with -4px margins, so the cells' outer edges line up with the text. Inside a
   scroller that spare 4px became a sideways scroll; the scroller now takes the gutters and the table fills it. */
.scroll:has(> table.grid) { margin-left: -4px; margin-right: -4px; }
.scroll > table.grid { width: 100%; margin-left: 0; margin-right: 0; }
.scroll > table.grid.arms { width: min(888px, 100%); }

/* the team on the public landing (owner, 2026-10-30): the labs block, with the logos as dark marks on paper */
body.trials .logos img { filter: brightness(0); opacity: 0.5; }
body.trials .person .role { color: var(--deep); }

/* job pages: an AI without its own paragraph gets a compact row; the rest are summed up under the bars */
.airow.bare { padding: 12px 0 14px; }
.airow .g:empty { display: none; }
.airows + p.rest { margin-top: 22px; max-width: 48rem; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }

/* a job page's summary: five labelled lines in the hero, the answer before the details */
.bhero dl.glance { margin: 22px 0 0; max-width: 38rem; }
.glance > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0 18px; padding: 11px 0; border-top: 1px solid var(--line); }
.glance > div:last-child { border-bottom: 1px solid var(--line); }
.glance dt { padding-top: 3px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep); }
.glance dd { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
@media (max-width: 640px) { .glance > div { grid-template-columns: minmax(0, 1fr); gap: 4px 0; } }

/* a job told as one story */
.thumb.jobmap { background: none; }
.sub-h { margin-top: 40px; font-size: 1.1875rem; line-height: 1.35; font-weight: 700; color: var(--ink); }
.sub-h + .needs { margin-top: 14px; }
.partgrid { margin-top: 24px; }
table.parts { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: var(--fs-ui); }
.parts th { padding: 6px 4px; font-size: 0.8125rem; line-height: 1.3; font-weight: 600; color: var(--text); text-align: center; vertical-align: bottom; }
.parts th small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); }
.parts th.grp { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep); border-bottom: 1px solid var(--line); }
.parts th.ai { text-align: left; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; }
.parts td.who { padding: 6px 12px 6px 0; white-space: nowrap; }
.parts td.who b { display: block; font-weight: 650; color: var(--ink); }
.parts td.who small { font-size: 0.8125rem; color: var(--muted); }
.parts td.c { min-width: 56px; padding: 8px 4px; border-radius: 4px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.parts td.c small { font-size: 0.72em; font-weight: 500; color: inherit; opacity: 0.8; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; }
.gridnote { margin-top: 8px; }
.moments.story { margin-top: 32px; }
.moments.story figure { grid-column: 2; margin: 14px 0 4px; }
.clash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 44rem; }
.clash > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.clash .mono { display: block; }
.clash p { margin-top: 6px !important; color: var(--ink) !important; }
.clash figcaption { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 640px) { .clash { grid-template-columns: minmax(0, 1fr); } }


/* a job's full story: what the AI walked into (tale.py). Everything clickable opens a native popover. */
.tale-ch { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); }
.t-chead { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: -8px 0 0; padding: 8px 0 8px; background: rgba(248, 247, 240, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.t-chead .mono { flex: none; min-width: 6.4em; letter-spacing: 0.1em; }
.t-chead h4 { flex: 1 1 16rem; margin: 0; font-size: 1.1875rem; line-height: 1.3; font-weight: 700; color: var(--ink); }
.t-back { flex: none; font-size: 0.8125rem; font-weight: 600; color: var(--deep); text-decoration: none; }
.t-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.tale figure { margin: 20px 0 0; }
.tale-ch > .prose { margin-top: 6px; }
.tale-ch > .prose.t-after { margin-top: 20px; }
.tale-ch > .prose.t-lead { margin-top: 36px; }
.tale-ch > .t-lead + figure { margin-top: 16px; }
.tale figcaption { margin-top: 10px; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
:where(.tale button) { font: inherit; color: inherit; cursor: pointer; text-align: left; }
.tale button:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.tale-ico { display: block; flex: none; width: 34px; height: auto; overflow: visible; }
.plus { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--deep); font-size: 14px; line-height: 1; font-style: normal; font-weight: 500; color: #fbfaf5; transition: transform 0.15s; }
.tale button:hover .plus, .tale button:focus-visible .plus { transform: scale(1.2); }
@media (min-width: 1101px) {
  .tale-ch.spread { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); column-gap: 48px; grid-template-rows: auto auto 1fr; align-items: start; }
  .tale-ch.spread > .t-chead { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tale-ch.spread .t-back { display: none; }
  .tale-ch.spread > .t-chead, .tale-ch.spread > .prose { grid-column: 1; display: block; }
  .tale-ch.spread > .prose p { margin: 0 0 12px; }
  .tale-ch.spread > .prose p:last-child { margin-bottom: 0; }
  .tale-ch.spread > figure { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

.pop { width: min(30rem, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-top); color: var(--ink); box-shadow: 0 24px 70px rgba(16, 18, 22, 0.22); }
.pop::backdrop { background: rgba(16, 18, 22, 0.25); }
.pop .mono { display: block; margin-bottom: 8px; padding-right: 28px; }
.pop h5 { margin: 0; padding-right: 28px; font-size: 1.0625rem; line-height: 1.3; font-weight: 700; }
.pop p { margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--text); }
.pop-x { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(16, 18, 22, 0.06); font-size: 1.125rem; line-height: 1; color: var(--ink); cursor: pointer; }
.pop-x:hover { background: rgba(16, 18, 22, 0.12); }

/* the timeline: thin bars on true dates, the label under each, month lines through every lane */
.tl-row { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--line); }
.tl-head { padding-bottom: 8px; border-top: 0; }
.tl-months, .tl-track { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.tl-months span { padding-left: 4px; border-left: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep); }
.tl-track { position: relative; grid-auto-rows: min-content; row-gap: 5px; padding: 12px 0 14px; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / var(--n)) 100%; }
.tl-name { padding-top: 14px; }
.tl.lined .tl-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--at); width: 2px; background: #101216; }
.tl-ev { position: relative; display: block; min-height: 30px; padding: 10px 0 0; border: 0; background: none; white-space: nowrap; font-size: 0.8125rem; line-height: 1.3; font-weight: 600; }
.tl-ev::before { content: ""; position: absolute; top: 0; left: 0; right: calc(2px + var(--cut, 0%)); height: 7px; border-radius: 4px; background: #4f7c56; }
.tl-ev.ghost::before { background: repeating-linear-gradient(to right, #4f7c56 0 7px, transparent 7px 12px); }
.paper-lane .tl-ev::before { background: #a9aeb5; }
.paper-lane .tl-name { color: var(--muted); }
.tl-ev .lab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; background: var(--paper); }
.tl-ev:hover .lab > span { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
.tl-ev small { display: none; }
.tl-ev.late .lab { position: absolute; right: 0; top: 10px; padding-left: 6px; }
.tl-ev.now { min-height: 34px; }
.paper-lane .tl-ev.now::before { display: none; }
.paper-lane .tl-ev.now .lab { top: 0; padding: 7px 8px 7px 12px; border-radius: 8px; background: #101216; color: #fbfaf5; }
.paper-lane .tl-ev.now:hover .lab > span { color: #fbfaf5; }
.paper-lane .tl-ev.now .plus { background: #fbfaf5; color: #101216; }
@media (max-width: 760px) {
  .tl-head { display: none; }
  .tl-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0 8px; }
  .tl-name { padding-top: 0; }
  .tl-track { display: flex; flex-direction: column; row-gap: 0; margin-left: 5px; padding: 4px 0 4px 18px; background: none; border-left: 2px solid rgba(49, 92, 56, 0.35); }
  .tl.lined .tl-track::after { display: none; }
  .tl-ev { display: block; min-height: 0; padding: 9px 0; white-space: normal; }
  .tl-ev::before { top: 50%; left: -25px; right: auto; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--deep); }
  .tl-ev.ghost::before { box-sizing: border-box; background: var(--paper); border: 2px solid var(--deep); }
  .paper-lane .tl-ev::before { background: #a9aeb5; }
  .tl-ev .lab, .tl-ev.late .lab { position: static; display: flex; justify-content: space-between; gap: 12px; padding-left: 0; background: none; }
  .tl-ev small { display: block; margin-bottom: 1px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep); }
  .paper-lane .tl-ev small { color: var(--muted); }
  .paper-lane .tl-ev.now::before { display: block; background: #101216; }
  .paper-lane .tl-ev.now .lab { padding: 8px 10px 8px 12px; }
  .paper-lane .tl-ev.now small { color: #fbfaf5; }
}

/* who's who: columns narrowing from many to few, joined by the hero map's dashed lines */
.whos { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 64px; align-items: stretch; }
.whos > figcaption { grid-column: 1 / -1; }
.whos-col { display: flex; flex-direction: column; min-width: 0; }
.whos-col > h5 { margin: 0; padding-bottom: 12px; }
.whos-list { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 981px) { .whos.tight .whos-col { justify-content: center; } .whos.tight .whos-list { flex: none; } }   /* the heading stays with its names */
.chip { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 2px; border: 0; border-top: 1px solid var(--line); background: none; font-size: 0.875rem; line-height: 1.25; font-weight: 600; }
.chip:last-of-type { border-bottom: 1px solid var(--line); }
.chip > span:not(.aichip) { flex: 1 1 auto; min-width: 0; }
.chip:hover > span:not(.aichip) { color: var(--deep); }
.chip .tale-ico { width: 28px; }
.whos-col + .whos-col .chip { padding-left: 12px; box-shadow: -2px 0 0 var(--deep); }
.funnel { position: absolute; left: 100%; top: 0; width: 64px; height: 100%; overflow: visible; pointer-events: none; }
.funnel path { fill: none; stroke: rgba(49, 92, 56, 0.55); stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.funnel-tip { position: absolute; left: calc(100% + 53px); top: 50%; width: 0; height: 0; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--deep); }
.aichip { display: flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: #101216; font: 800 11px/1 Inter, ui-sans-serif, system-ui, sans-serif; color: #f8f7f0; }
.chip.isai { font-weight: 700; }
@media (max-width: 1100px) { .whos { column-gap: 48px; } .funnel { width: 48px; } .funnel-tip { left: calc(100% + 37px); } }
@media (max-width: 980px) {
  .whos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .funnel, .funnel-tip { display: none; }
  .whos-list { justify-content: flex-start; }
  .whos-col + .whos-col .chip { padding-left: 2px; box-shadow: none; }
}
@media (max-width: 620px) { .whos { grid-template-columns: minmax(0, 1fr); } .chip { min-height: 48px; } }

/* a bill passing through steps: a waterfall */
.bsteps-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 28px; }
.bplot { position: relative; height: 220px; margin-bottom: 14px; border-bottom: 1.5px solid #101216; }
.bplot i { position: absolute; left: 0; right: 0; bottom: calc(var(--a) * 1%); height: calc((var(--b) - var(--a)) * 1%); }
.bplot .all { background: rgba(79, 124, 86, 0.3); }
.bplot .gone { background: repeating-linear-gradient(135deg, rgba(49, 92, 56, 0.28) 0 1px, transparent 1px 7px); border: 1px dashed rgba(49, 92, 56, 0.45); border-bottom: 0; }
.bplot .kept { background: rgba(79, 124, 86, 0.55); }
.bplot .you { background: var(--deep); }
.bplot .lvl { left: 100%; right: -28px; height: 0; border-top: 1px dashed rgba(16, 18, 22, 0.3); }
.bstep b { display: block; font-size: 1.5rem; line-height: 1.1; font-weight: 750; color: var(--ink); }
.bstep:last-child b { color: var(--deep); }
.bstep span { display: block; margin-top: 8px; font-size: 0.8125rem; line-height: 1.4; color: var(--text); }
@media (min-width: 1101px) { .tale-ch.spread .bplot { height: 190px; } }
@media (max-width: 760px) {
  .bsteps-row { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .bstep { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .bplot { grid-column: 1 / -1; height: 22px; margin: 0 0 6px; border-bottom: 0; border-left: 1.5px solid #101216; }
  .bplot i { top: 0; bottom: 0; left: calc(var(--a) * 1%); right: auto; width: calc((var(--b) - var(--a)) * 1%); height: auto; }
  .bplot .gone { border: 1px dashed rgba(49, 92, 56, 0.45); border-left: 0; }
  .bplot .lvl { display: none; }
  .bstep b { font-size: 1.375rem; }
  .bstep span { margin-top: 3px; }
}

/* bars against one line */
.gauge-mark { padding: 0 10px 8px 0; border-right: 2px solid #101216; text-align: right; }
.gauge { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 12px; align-items: center; font-size: 0.875rem; line-height: 1.3; color: var(--ink); }
.gauge-bar { display: flex; align-items: center; align-self: stretch; min-height: 46px; border-right: 2px solid #101216; background: linear-gradient(rgba(16, 18, 22, 0.05), rgba(16, 18, 22, 0.05)) center / 100% 26px no-repeat; }
.gauge-bar i { display: block; height: 26px; background: rgba(79, 124, 86, 0.45); }
.gauge.full .gauge-bar i { background: var(--deep); }
.gauge.full { font-weight: 650; }
@media (max-width: 620px) { .gauge { grid-template-columns: minmax(0, 1fr); gap: 0; } .gauge > span { padding-top: 8px; } .gauge-bar { min-height: 32px; } }

/* what the AI had: objects on a shelf */
.shelf { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 16px; }
.shelf > figcaption { grid-column: 1 / -1; margin-top: 6px; }
.shelf-item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 8px; border: 0; background: none; }
.shelf-item::before { content: ""; position: absolute; left: 0; right: 0; top: 70px; height: 1.5px; background: #101216; }
.shelf-item .tale-ico { width: 62px; height: 58px; margin-bottom: 18px; }
.shelf-item > .plus { position: absolute; top: 0; left: 70px; }
.shelf-item b { font-size: 1.5rem; line-height: 1.1; font-weight: 750; color: var(--ink); }
.shelf-item:hover b { color: var(--deep); }
.shelf-item span { font-size: 0.8125rem; line-height: 1.35; font-weight: 600; color: var(--text); }
@media (max-width: 1200px) { .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; } }
@media (max-width: 760px) { .shelf-item::before { top: 54px; } .shelf-item .tale-ico { width: 48px; height: 44px; margin-bottom: 16px; } .shelf-item > .plus { left: 56px; } }
@media (min-width: 621px) { .shelf.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
@media (max-width: 620px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shelf.c3 > .shelf-item:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; } }

/* notes people wrote */
.notes-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.note-card { padding: 16px 18px; border: 1px solid #e6dcae; border-radius: 4px; background: #fbf6dc; box-shadow: 0 6px 18px rgba(16, 18, 22, 0.05); }
.note-card:first-child { transform: rotate(-0.5deg); }
.note-card:last-child { transform: rotate(0.4deg); }
.note-card .mono { display: block; color: #6b5a14; }
.note-card p { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.45; color: #2f2a12; }
@media (min-width: 981px) { .notes-row.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 621px) and (max-width: 980px) { .notes-row.c3 > .note-card:nth-child(3):last-child { grid-column: 1 / -1; } }
/* notes on white paper (tone="sheet"): records beside a chat, so they don't read as the client's yellow bubbles; stacked below 981px */
.notes-row.sheet .note-card { background: var(--paper-top); border-color: var(--line); transform: none; }
.notes-row.sheet .note-card .mono { color: var(--deep); }
.notes-row.sheet .note-card p { color: var(--text); }
@media (min-width: 621px) and (max-width: 980px) { .notes-row.c3.sheet { grid-template-columns: minmax(0, 1fr); } }
/* no single word stranded on a second line in a ledger cell or a paper's line */
.t-what, .t-truth, .paper li { text-wrap: pretty; }
@media (max-width: 620px) { .notes-row { grid-template-columns: minmax(0, 1fr); } }

/* what it hands in: sheets of paper */
.papers { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.papers > figcaption { grid-column: 1 / -1; margin-top: 0; }
.paper { position: relative; padding: 24px 22px 22px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper-top); box-shadow: 0 8px 22px rgba(16, 18, 22, 0.05); }
.paper::after { content: ""; position: absolute; top: -1px; right: -1px; width: 22px; height: 22px; background: linear-gradient(225deg, var(--paper) 50%, #e3e2da 50%, #e9e8e0 100%); }
.paper .tale-ico { width: 46px; }
.paper h5 { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.3; font-weight: 700; color: var(--ink); }
.paper ul { margin: 8px 0 0; padding: 0; list-style: none; }
.paper li { padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 0.875rem; line-height: 1.35; color: var(--text); }
@media (max-width: 1100px) { .papers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .papers { grid-template-columns: minmax(0, 1fr); } }

/* the whole job, in one story: a contents list, then the figures that tell what the AI is told, what's wrong and what's due. Every class starts t- */
.tale-ch { scroll-margin-top: 28px; }
.tale-toc { margin: 0; padding: 0; }
.tale-toc ol { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 40px; counter-reset: toc; }
.tale-toc li { counter-increment: toc; break-inside: avoid; padding: 4px 0; font-size: var(--fs-small); line-height: 1.35; }
.tale-toc li::before { content: counter(toc); display: inline-block; width: 1.6rem; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; color: var(--deep); }
.tale-toc li a, .tale-skip { color: var(--ink); text-decoration: none; }
.tale-toc li a:hover, .tale-skip:hover { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
.tale-skip { display: inline-block; margin-top: 12px; font-size: var(--fs-small); font-weight: 600; color: var(--deep); }
@media (max-width: 860px) { .tale-toc ol { columns: 2; } }
@media (max-width: 520px) { .tale-toc ol { columns: 1; } }
.tale button:hover .t-what > span:last-child, .t-mrow:hover .t-mlabel, .t-frow:hover .t-fname, .t-key:hover > span, .t-cev:hover > span, .t-more:hover > span { color: var(--deep); }
.t-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* running counts on true dates: thin lines against one black line, labelled where they run */
.t-climb-box { position: relative; padding-bottom: 30px; }
.t-plot { position: relative; height: 460px; margin-left: 3.5rem; border-bottom: 1.5px solid #101216; }
.t-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.t-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-soft); }
.t-y { position: absolute; right: 100%; margin-right: 10px; transform: translateY(50%); font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; white-space: nowrap; color: var(--muted); }
.t-ceil { position: absolute; left: 0; right: 0; border-top: 2px solid #101216; }
.t-ceil span { position: absolute; left: 10px; top: 6px; font-style: normal; font-size: 0.875rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.t-now { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(16, 18, 22, 0.55); }
.t-now span { position: absolute; left: -6px; bottom: 6px; transform: translateX(-100%); font-style: normal; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; color: var(--muted); }
.t-dot { position: absolute; width: 14px; height: 14px; margin: 0 0 -7px -7px; border: 2.5px solid #101216; border-radius: 50%; background: #e9b765; }
.t-line { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.t-line.real { stroke: var(--deep); stroke-width: 3; }
.t-line.over { stroke: var(--deep); stroke-width: 2; stroke-dasharray: 5 4; }
.t-line.med { stroke: #7b828c; stroke-width: 2; }
.t-line.rx { stroke: #7b828c; stroke-width: 2; stroke-dasharray: 2 3; }
.t-keys { position: absolute; inset: 0 0 30px 3.5rem; pointer-events: none; }
.t-key { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 3px 4px; border: 0; border-radius: 4px; background: var(--paper); pointer-events: auto; font-size: 0.8125rem; line-height: 1.25; font-weight: 600; white-space: nowrap; }
.t-sw { flex: none; display: block; }
.t-key .t-sw { width: 22px; height: 0; border-top: 2px solid #7b828c; }
.t-key .t-sw.real { border-top: 3px solid var(--deep); }
.t-key .t-sw.over { border-top: 2px dashed var(--deep); }
.t-key .t-sw.rx { border-top: 2px dotted #7b828c; }
.t-key .t-sw.dot { width: 11px; height: 11px; border: 2.5px solid #101216; border-radius: 50%; background: #e9b765; }
.t-months { position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; }
.t-months span { position: absolute; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep); }
@media (max-width: 1100px) { .t-plot { height: 420px; } }
@media (max-width: 900px) {
  .t-climb-box { padding-bottom: 0; }
  .t-keys { position: static; display: flex; flex-direction: column; margin-top: 36px; pointer-events: auto; }
  .t-key { position: static; display: flex; width: 100%; padding: 9px 0; border-top: 1px solid var(--line); border-radius: 0; background: none; white-space: normal; }
  .t-key > span { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  .t-plot { height: 320px; margin-left: 2.9rem; }
  .t-months span { font-size: 0.6rem; letter-spacing: 0; }
  .t-now span { display: none; }
  .t-y { font-size: 0.6rem; margin-right: 6px; }
  .t-ceil span { font-size: 0.8125rem; }
}

/* a whole split into parts, to scale */
.t-bar-track { display: flex; gap: 2px; height: 36px; }
.t-bar-track i { display: block; flex-basis: 0; min-width: 4px; }
.t-bar-track .you, .t-sw.you { background: var(--deep); }
.t-bar-track .kept, .t-sw.kept { background: rgba(79, 124, 86, 0.38); }
.t-bar-track .rest, .t-sw.rest { background: rgba(16, 18, 22, 0.1); }
.t-bar-track .gone, .t-sw.gone { background: repeating-linear-gradient(135deg, rgba(49, 92, 56, 0.45) 0 1px, transparent 1px 6px); box-shadow: inset 0 0 0 1px rgba(49, 92, 56, 0.4); }
.t-bar-keys { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px 32px; margin-top: 16px; }
.t-bar-key { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.t-bar-key .t-sw { width: 14px; height: 14px; align-self: center; }
.t-bar-key b { font-size: 1.375rem; line-height: 1.15; font-weight: 750; color: var(--ink); }
.t-bar-key span { grid-column: 2; margin-top: 3px; font-size: 0.875rem; line-height: 1.35; color: var(--text); }
@media (max-width: 620px) { .t-bar-keys { grid-template-columns: minmax(0, 1fr); } }

/* the folder, row by row, each with a bar to scale */
.t-frow { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 20px; align-items: center; column-gap: 16px; width: 100%; min-height: 42px; padding: 6px 0; border: 0; border-top: 1px solid var(--line); background: none; font-size: 0.875rem; line-height: 1.25; font-weight: 600; }
.t-frow:last-of-type { border-bottom: 1px solid var(--line); }
.t-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.t-fbar i { display: block; flex: none; width: calc(var(--k) * 8px); max-width: calc(100% - 28px); height: 16px; background: repeating-linear-gradient(to right, rgba(79, 124, 86, 0.75) 0 5px, transparent 5px 8px); }
.t-fbar b { font-size: 0.875rem; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink); }
.t-folders figcaption { margin-top: 12px; }
@media (max-width: 620px) { .t-frow { grid-template-columns: minmax(0, 1fr) 20px; row-gap: 6px; padding: 10px 0; } .t-fname { grid-column: 1; } .t-frow .plus { grid-column: 2; grid-row: 1 / span 2; } .t-fbar { grid-column: 1; } }

/* a sheet of paper for anything drawn in our words */
.t-sheet { position: relative; padding: 18px 20px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper-top); box-shadow: 0 8px 22px rgba(16, 18, 22, 0.05); }
.t-sheet > h5 { margin: 0 0 10px; }
.t-lines { margin: 0; padding: 0; list-style: none; }
.t-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 8px; border-top: 1px solid var(--line-soft); font-size: 0.875rem; line-height: 1.3; color: var(--text); }
.t-lines li:first-child { border-top: 0; }
.t-lines li b { font-weight: 650; color: var(--ink); white-space: nowrap; }
.t-lines li.hi { border-radius: 3px; background: rgba(79, 124, 86, 0.16); }
.t-flag { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid #e9b765; background: rgba(233, 183, 101, 0.16); font-size: 0.875rem; line-height: 1.45; color: var(--ink); }

/* one thing in two places */
.t-twin { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
.t-twin.top { align-items: start; }
.t-twin.top .t-twin-arrow { margin-top: 64px; }
.t-twin > figcaption { grid-column: 1 / -1; }
.t-twin-arrow { position: relative; display: block; height: 2px; margin: 0 8px; background: var(--deep); }
.t-twin-arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--deep); }
@media (max-width: 760px) {
  .t-twin { grid-template-columns: minmax(0, 1fr); }
  .t-twin-arrow, .t-twin.top .t-twin-arrow { width: 2px; height: 28px; margin: 6px auto 12px; }
  .t-twin-arrow::after { right: -5px; top: auto; bottom: -1px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--deep); border-bottom: 0; }
}

/* what a person would say if asked */
.t-chat-box { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; }
.t-turn { max-width: 80%; padding: 10px 14px; border-radius: 12px; }
.t-turn .mono { display: block; margin-bottom: 3px; }
.t-turn p { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--ink); }
.t-turn.ai { align-self: flex-end; background: #101216; }
.t-turn.ai .mono, .t-turn.ai p { color: #fbfaf5; }
.t-turn.them { align-self: flex-start; background: #fbf6dc; }
.t-turn.them .mono { color: #6b5a14; }

/* instructions that each point to the next */
.t-chain { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 30px; align-items: start; }
.t-chain > figcaption { grid-column: 1 / -1; }
.t-link p { margin: 0 0 8px; font-size: 0.875rem; line-height: 1.45; color: var(--text); }
.t-link p:last-child { margin-bottom: 0; }
.t-link ol { margin: 0 0 8px; padding: 0; list-style: none; counter-reset: st; }
.t-link ol li { counter-increment: st; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: 0.8125rem; line-height: 1.4; color: var(--text); }
.t-link ol li::before { content: counter(st); font-weight: 750; color: var(--deep); }
.t-link ol li.hi { margin: 0 -8px; padding: 6px 8px; border-top: 0; border-radius: 3px; background: rgba(79, 124, 86, 0.18); font-weight: 650; color: var(--ink); }
.t-link .t-after { font-size: 0.8125rem; color: var(--muted); }
.t-link + .t-link::before { content: ""; position: absolute; left: -26px; top: 34px; width: 16px; height: 2px; background: var(--deep); }
.t-link + .t-link::after { content: ""; position: absolute; left: -12px; top: 29px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--deep); }
@media (max-width: 1100px) {
  .t-chain { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .t-link:nth-of-type(2) { margin-left: 5%; }
  .t-link:nth-of-type(3) { margin-left: 10%; }
  .t-link:nth-of-type(4) { margin-left: 15%; }
  .t-link p { max-width: 42rem; }
  .t-chain > figcaption { margin-top: -18px; }
  .t-link + .t-link::before { left: 28px; top: -24px; width: 2px; height: 16px; }
  .t-link + .t-link::after { left: 23px; top: -11px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--deep); border-bottom: 0; }
}

/* a habit across past cases: a row is a habit, a dot is a case that shows it */
.t-mhead, .t-mrow { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--c), 3.25rem) 20px; align-items: center; column-gap: 0; }
.t-mhead { padding-bottom: 8px; }
.t-mhead > i { display: block; }
.t-mcol { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; }
.t-mcol span { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep); }
.t-mrow { width: 100%; min-height: 42px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; font-size: 0.875rem; line-height: 1.3; font-weight: 600; color: var(--ink); }
.t-mrow:last-of-type { border-bottom: 1px solid var(--line); }
.t-mlabel { padding-right: 16px; }
.t-mrow > i:not(.plus) { justify-self: center; display: block; width: 14px; height: 14px; border-radius: 50%; }
.t-mrow > i.on { background: var(--deep); }
.t-mrow > i.off { box-shadow: inset 0 0 0 1.5px rgba(16, 18, 22, 0.2); }
.t-mtally { border-bottom: 0 !important; font-size: 0.875rem; color: var(--muted); }
.t-mtally b { justify-self: center; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 620px) {
  .t-mhead, .t-mrow { grid-template-columns: minmax(0, 1fr) repeat(var(--c), 2rem) 20px; }
  .t-mhead .mono { font-size: 0.6rem; }
  .t-mcol span { font-size: 0.6rem; letter-spacing: 0; }
  .t-mrow { font-size: 0.875rem; }
  .t-mlabel { padding-right: 8px; }
  .t-mrow > i.on { width: 12px; height: 12px; }
  .t-mcol .plus { width: 18px; height: 18px; font-size: 12px; }
  /* many columns: the name gets its own line and the dots sit under it */
  .t-matrix.wide .t-mhead, .t-matrix.wide .t-mrow { grid-template-columns: repeat(var(--c), minmax(0, 1fr)) 20px; row-gap: 6px; }
  .t-matrix.wide .t-mhead > .mono, .t-matrix.wide .t-mlabel { grid-column: 1 / -1; padding-right: 0; }
  .t-matrix.wide .t-mcol span { font-size: 0.6rem; }
}

/* a made-up letter with its habits marked */
.t-spec { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px 40px; align-items: start; }
.t-spec > figcaption { grid-column: 1 / -1; }
.t-spec-sheet p { margin: 10px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--text); }
.t-spec-sheet p.t-spec-top { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.t-spec-sheet mark { padding: 1px 3px; border-radius: 3px; background: rgba(79, 124, 86, 0.2); color: var(--ink); }
.t-spec-sheet sup { margin-right: 3px; font-size: 0.6875rem; font-weight: 800; color: var(--deep); vertical-align: 0.35em; line-height: 0; }
.t-spec-notes { margin: 0; padding: 0; list-style: none; counter-reset: h; }
.t-spec-notes li { counter-increment: h; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.875rem; line-height: 1.45; color: var(--ink); }
.t-spec-notes li::before { content: counter(h); font-weight: 800; color: var(--deep); }
@media (max-width: 860px) { .t-spec { grid-template-columns: minmax(0, 1fr); } }

/* everything in the pile, group by group */
.t-legend { position: sticky; top: 40px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 18px; padding: 6px 0; background: rgba(248, 247, 240, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.8125rem; line-height: 1.3; color: var(--text); }
.t-legend span { display: inline-flex; align-items: center; gap: 7px; }
.m { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.m.nobody { background: var(--deep); }
.m.raised { box-sizing: border-box; border: 2px solid var(--deep); }
.m.only { border-radius: 2px; background: #101216; transform: rotate(45deg) scale(0.85); }
/* a second set of marks, square and cross, so two ledgers on one page never share shapes */
.m.yes { border-radius: 2px; background: var(--deep); }
.m.part { box-sizing: border-box; border: 2px solid var(--deep); border-radius: 2px; }
.m.no { border-radius: 0; background: linear-gradient(45deg, transparent 41%, #101216 41% 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #101216 41% 59%, transparent 59%); }
.t-lgroup { margin-top: 28px; }
.t-lgroup:first-of-type { margin-top: 0; }
.t-lhead, .t-lrow { display: grid; grid-template-columns: minmax(0, 1.1fr) 5.5rem minmax(0, 1.5fr) 20px; column-gap: 16px; align-items: center; }
.t-lhead { padding-bottom: 8px; border-bottom: 1.5px solid #101216; }
.t-lhead h5 { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 750; color: var(--ink); }
.t-lhead h5 small { margin-left: 10px; font-size: 0.875rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--deep); }
.t-lhead .mono:nth-of-type(1) { text-align: right; }
.t-lrow { width: 100%; min-height: 44px; padding: 7px 0; border: 0; border-bottom: 1px solid var(--line); background: none; font-size: 0.875rem; line-height: 1.3; color: var(--text); }
.t-what { position: relative; padding-left: 20px; font-weight: 600; color: var(--ink); }
.t-what > .m { position: absolute; left: 1px; top: 0.3em; }
.t-amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.t-lgroup.pay .t-truth { font-weight: 600; color: var(--deep); }
.t-lgroup.looks .t-what { padding-left: 0; }
@media (max-width: 680px) {
  .t-lhead, .t-lrow { grid-template-columns: minmax(0, 1fr) auto 20px; column-gap: 10px; }
  .t-lhead .mono:nth-of-type(2) { display: none; }
  .t-lhead .mono:nth-of-type(1):empty { display: none; }
  .t-lrow { padding: 10px 0; row-gap: 3px; }
  .t-what { grid-column: 1; }
  .t-amt { grid-column: 2; grid-row: 1; }
  .t-truth { grid-column: 1 / span 2; grid-row: 2; padding-left: 20px; }
  .t-lgroup.looks .t-truth { padding-left: 0; }
  .t-lrow .plus { grid-column: 3; grid-row: 1 / span 2; }
}

/* a calendar: what falls on which day */
.t-cal-head, .t-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.t-cal-head span { padding: 0 0 8px 8px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep); }
.t-cal-grid { border-top: 1.5px solid #101216; border-left: 1px solid var(--line); }
.t-day { display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 8px 6px 10px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.t-date { font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.t-date small { display: none; }
.t-mon { display: none; }
.t-mon.on { display: inline; }
.t-day.has .t-date { color: var(--ink); }
.t-cev { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; width: 100%; padding: 5px 5px 6px 7px; border: 0; border-left: 3px solid var(--deep); border-radius: 0 3px 3px 0; background: rgba(79, 124, 86, 0.12); font-size: 0.75rem; line-height: 1.25; font-weight: 600; color: var(--ink); }
.t-cev .plus { width: 16px; height: 16px; font-size: 11px; }
.t-cev.cut { border-left-color: #c9892a; background: rgba(233, 183, 101, 0.24); }
.t-cev.first { border-left-color: #a8771f; background: #e9b765; font-weight: 750; }
.t-cev.send { border-left-color: #315c38; background: repeating-linear-gradient(135deg, rgba(49, 92, 56, 0.2) 0 1px, transparent 1px 6px), rgba(79, 124, 86, 0.1); }
.t-cev.due { border-left-color: #101216; background: #fbfaf5; box-shadow: inset 0 0 0 1.5px #101216; font-weight: 800; }
.t-cev.now { border-left-color: #101216; background: #101216; color: #fbfaf5; font-weight: 700; }
.t-cev.now:hover > span { color: #fbfaf5; }
.t-cev.now .plus { background: #fbfaf5; color: #101216; }
.t-cev.soft { border-left-color: #a9aeb5; background: rgba(16, 18, 22, 0.04); color: var(--muted); }
.t-cal-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 0.8125rem; line-height: 1.3; color: var(--text); }
.t-cal-key span { display: inline-flex; align-items: center; gap: 8px; }
.t-cal-key .t-cev { display: block; width: 22px; height: 14px; padding: 0; }
.t-later { margin-top: 26px; }
.t-later > h5 { margin: 0 0 8px; }
.t-later ul { margin: 0; padding: 0; list-style: none; }
.t-later li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.875rem; line-height: 1.4; color: var(--text); }
.t-later li b { font-weight: 700; color: var(--ink); }
@media (max-width: 860px) {
  .t-cal-head { display: none; }
  .t-cal-grid { display: flex; flex-direction: column; border-left: 0; }
  .t-day { display: none; }
  .t-day.has { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 6px 12px; min-height: 0; padding: 12px 0; border-right: 0; }
  .t-day.has .t-date { grid-row: 1 / span 2; font-size: 0.875rem; }
  .t-mon { display: inline; }
  .t-day.has .t-date small { display: block; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep); }
  .t-cev { grid-column: 2; align-items: center; padding: 8px 8px 8px 10px; font-size: 0.875rem; }
  .t-cev .plus { width: 20px; height: 20px; font-size: 14px; }
}
@media (max-width: 520px) { .t-later li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* a pop-up on a sheet of paper */
.t-more { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin-top: 4px; padding: 9px 0 0; border: 0; border-top: 1px solid var(--line); background: none; font-size: 0.875rem; line-height: 1.3; font-weight: 650; color: var(--deep); }

/* a lighter +: the data leads, the + fills in when you point at it */
.tale .plus { background: none; box-shadow: inset 0 0 0 1.5px var(--deep); color: var(--deep); }
.tale button:hover .plus, .tale button:focus-visible .plus { background: var(--deep); color: var(--paper-top); }
.tale .tl-ev.now .plus, .tale .t-cev.now .plus { background: #fbfaf5; box-shadow: none; color: #101216; }

/* the phrase that points onward */
.t-link mark { padding: 0 2px; border-radius: 2px; background: rgba(79, 124, 86, 0.2); color: var(--ink); font-weight: 600; }

/* the three parts of the story, each opening like a section of the homepage */
.t-part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 32px; align-items: center; margin-top: 64px; padding-top: 20px; border-top: 2px solid #101216; }
.t-part .sub-h { margin-top: 6px; font-size: 1.375rem; line-height: 1.25; font-weight: 750; }
.t-part-p { margin: 4px 0 0; font-size: 1rem; line-height: 1.5; color: var(--text); }
.t-part-art { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 0; padding: 14px; min-height: 0; }
.t-part-art .tale-ico { width: 44px; }
.t-part + .tale-ch { margin-top: 28px; }
@media (max-width: 680px) { .t-part { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 72px; } .t-part-art { display: none; } }

/* contents, one column a part */
.tale-toc-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 36px; }
.tale-toc-parts h5 { margin: 0 0 6px; }
.tale-toc-parts ol { columns: 1; counter-reset: none; }
.tale-toc-parts li { counter-increment: none; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); }
.tale-toc-parts li::before { content: none; }
.tale-toc-parts li .mono { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0; line-height: 1.6; }
@media (max-width: 760px) { .tale-toc-parts { grid-template-columns: minmax(0, 1fr); } }

/* what a hand-in holds, to scale */
.t-scale { display: flex; flex-wrap: wrap; gap: 3px; min-height: 30px; align-content: flex-start; }
.t-scale.line i { display: block; width: 26px; height: 3px; background: rgba(79, 124, 86, 0.6); }
.t-scale.env i { display: block; width: 18px; height: 13px; border: 1.25px solid var(--deep); border-radius: 1.5px; background: linear-gradient(to top right, transparent calc(50% - 0.6px), rgba(49, 92, 56, 0.45) calc(50% - 0.6px), rgba(49, 92, 56, 0.45) calc(50% + 0.6px), transparent calc(50% + 0.6px)); }
.t-scale.page i { display: block; width: 22px; height: 28px; border: 1.25px solid var(--deep); border-radius: 1.5px; background: repeating-linear-gradient(to bottom, transparent 0 5px, rgba(49, 92, 56, 0.28) 5px 6px); }
.t-count { margin: 10px 0 0; font-size: 0.875rem; line-height: 1.3; color: var(--text); }
.t-count b { font-size: 1.375rem; font-weight: 750; color: var(--ink); }
.paper .t-count + h5 { margin-top: 8px; }

/* a finger needs a bigger target */
@media (pointer: coarse) {
  .tl-ev, .t-cev, .t-key, .t-more, .t-lrow, .t-mrow, .t-frow { min-height: 44px; }
  .pop-x { width: 44px; height: 44px; top: 8px; right: 8px; }
}
@media (max-width: 899px) { .t-legend { position: static; } }
@media (max-width: 620px) {
  .t-back { order: 2; margin-left: auto; }
  .t-chead .mono { order: 1; }
  .t-chead h4 { order: 3; flex: 1 1 100%; font-size: 1.125rem; }
}

/* the story folds away: its title, reading time and a clear way in */
.tale { margin-top: 36px; }
.tale > summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); gap: 32px; align-items: center; padding: 20px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-top); cursor: pointer; list-style: none; }
.tale > summary::-webkit-details-marker { display: none; }
.tale > summary:hover { border-color: rgba(49, 92, 56, 0.55); }
.tale > summary:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.t-fold { display: block; min-width: 0; }
.t-fold-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.t-fold-head .sub-h, .jobpage .t-fold-head .sub-h { margin: 0; font-size: 1.375rem; line-height: 1.25; font-weight: 750; }
.t-read { font-size: 0.9375rem; font-weight: 500; color: var(--muted); }
.t-fold-lede { display: block; margin-top: 6px; font-size: 0.9375rem; line-height: 1.45; color: var(--text); }
.t-cue { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: #101216; font-size: 0.8125rem; line-height: 1.2; font-weight: 650; color: #fbfaf5; }
.t-cue::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); }
.tale[open] .t-cue::after { margin-top: 3px; transform: rotate(-135deg); }
.t-cue .when-open { display: none; }
.tale[open] .t-cue .when-open { display: inline; }
.tale[open] .t-cue .when-closed { display: none; }
.tale > summary .thumb { display: block; margin: 0; }
.tale-body { margin-top: 28px; }
@media (max-width: 640px) { .tale > summary { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; } .tale > summary .thumb { display: none; } }

/* running text fills the column: a line or two stays one block, anything longer sits in columns of whole sentences on a wide screen */
.prose p { margin: 0 0 12px; font-size: 1rem; line-height: 1.5; color: var(--text); }
.prose p:last-child { margin-bottom: 0; }
@media (min-width: 821px) {
  .prose.n2, .prose.lots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; }
  .prose.n2 p, .prose.lots p { margin: 0; }
}
@media (min-width: 1000px) {
  .prose.n3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .prose.n3 p { margin: 0; }
}
.prose + .scroll { margin-top: 20px; }
.t-beside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: start; margin-top: 28px; }
.t-beside > figure { margin: 0; }
.t-beside .prose { display: block; }
.t-beside .prose p { margin: 0 0 12px; }
.t-beside .prose p:last-child { margin-bottom: 0; }
.t-beside .t-turn { max-width: 90%; }
@media (max-width: 820px) { .t-beside { grid-template-columns: minmax(0, 1fr); } }

/* ---------- One text system for every job page: running text 16/1.5, small text 14/1.45, captions 13/1.4, and tight gaps under headings ---------- */
.jobpage { --head-gap: 20px; }
.jobpage main > section.shell + section.shell { margin-top: clamp(64px, 7vw, 96px); }
.jobpage section > h2 { margin-top: 6px; font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); line-height: 1.2; }
.jobpage .sub-h { margin-top: 32px; font-size: 1.125rem; line-height: 1.3; font-weight: 700; }
.jobpage .note { margin-top: 12px; max-width: none; font-size: 0.8125rem; line-height: 1.4; }
.jobpage figure figcaption { max-width: none; }

/* the opening */
.jobpage .bhero { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 20px clamp(32px, 4vw, 56px); padding-top: clamp(20px, 2.6vw, 36px); align-items: center; }
.jobpage .bhero > * { max-width: none; }
.jobpage .bhero-foot { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); }
.jobpage .bhero h1 { margin-top: 12px; font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.625rem); }
.jobpage .bhero .sub { margin-top: 14px; max-width: none; font-size: 1.0625rem; line-height: 1.5; font-weight: 400; color: var(--ink); }
.jobpage .bhero .sub.answer { margin-top: 10px; }
.jobpage .bhero .verdict { margin-top: 0; max-width: none; font-size: 1rem; line-height: 1.5; font-weight: 400; color: var(--text); }
.jobpage .bhero .verdict b { font-weight: 650; color: var(--ink); }
@media (min-width: 861px) { .jobpage .bhero .verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 40px; } }
.jobpage .bhero .small { margin-top: 6px; max-width: none; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }

/* what a good reviewer would have done: side by side, not one long list */
.jobpage .sub-h + .needs { margin-top: 10px; }
.jobpage .needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.jobpage .needs.n3, .jobpage .needs.n5, .jobpage .needs.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jobpage .needs li { display: block; padding: 12px 0 14px; }
.jobpage .needs li::before { display: block; margin-bottom: 4px; line-height: 1.4; }
.jobpage .needs b { display: block; font-size: 1rem; line-height: 1.3; font-weight: 650; }
.jobpage .needs p { margin-top: 4px; max-width: none; font-size: 0.875rem; line-height: 1.45; color: var(--text); }
@media (min-width: 1101px) { .jobpage .needs.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .jobpage .needs.n3, .jobpage .needs.n5, .jobpage .needs.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .jobpage .needs, .jobpage .needs.n3, .jobpage .needs.n5, .jobpage .needs.n6 { grid-template-columns: minmax(0, 1fr); } }

/* the results grid's headings read as words, not labels */
.jobpage .parts th:not(.grp):not(.ai) { font-family: var(--sans); font-size: 0.8125rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.jobpage .parts th small { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

/* what happened, part by part: the heading to the left, its text beside it */
.jobpage .moments.story { margin-top: 24px; }
.jobpage .moments.story li { grid-template-columns: 2.25rem minmax(16rem, 1fr) minmax(0, 46rem); column-gap: 16px; padding: 16px 0; }
.jobpage .moments.story li::before { grid-column: 1; grid-row: 1; }
.jobpage .moments.story h3 { grid-column: 2; grid-row: 1 / span 9; font-size: 1.0625rem; line-height: 1.3; }
.jobpage .moments.story p { grid-column: 3; margin: 0 0 10px; max-width: none; font-size: 1rem; line-height: 1.5; color: var(--text); }
.jobpage .moments.story li > p:last-child { margin-bottom: 0; }
.jobpage .moments.story figure { grid-column: 3; margin: 2px 0 12px; }
.jobpage .clash { max-width: none; }
.jobpage .clash > div { padding: 12px 14px; }
.jobpage .clash p { margin: 4px 0 0 !important; font-size: 0.875rem !important; line-height: 1.45 !important; }
.jobpage .clash figcaption { grid-column: 1 / -1; margin-top: 0; max-width: none; font-size: 0.8125rem; line-height: 1.4; }
@media (max-width: 860px) {
  .jobpage .moments.story li { grid-template-columns: 2rem minmax(0, 1fr); }
  .jobpage .moments.story h3 { grid-row: auto; margin-bottom: 6px; }
  .jobpage .moments.story p, .jobpage .moments.story figure { grid-column: 2; }
}

/* what it teaches */
.jobpage .lessons b { margin-top: 0; font-size: 1rem; line-height: 1.3; }
.jobpage .lessons p { margin-top: 4px; font-size: 0.875rem; line-height: 1.45; color: var(--text); }
.jobpage .lessons li { padding: 12px 0 14px; }
.jobpage .lessons li::before { display: block; margin-bottom: 4px; line-height: 1.4; }

/* each AI on one line: who, what it did, how far it got */
.jobpage .airow { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr) minmax(0, 12rem) 2.25rem; gap: 2px 20px; padding: 10px 0; }
.jobpage .airow .who b { font-size: 0.9375rem; line-height: 1.3; }
.jobpage .airow .who small { display: block; font-size: 0.75rem; line-height: 1.3; }
.jobpage .airow .who { grid-column: 1; grid-row: 1; }
.jobpage .airow p { grid-column: 2; grid-row: 1; max-width: none; font-size: 0.875rem; line-height: 1.4; }
.jobpage .airow .bar { grid-column: 3; grid-row: 1; }
.jobpage .airow .v { grid-column: 4; grid-row: 1; font-size: 1rem; line-height: 1.3; }
.jobpage .airow.bare .bar { grid-column: 2 / span 2; }
.jobpage .airows + .note { margin-top: 12px; }
@media (max-width: 860px) {
  .jobpage .airow { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 2.25rem; gap: 4px 14px; }
  .jobpage .airow .bar { grid-column: 2; }
  .jobpage .airow .v { grid-column: 3; }
  .jobpage .airow p { grid-column: 1 / -1; grid-row: 3; }
  .jobpage .airow.bare .bar { grid-column: 2; }
}

/* for the curious */
.jobpage .curious > div { padding: 10px 0 12px; }
.jobpage .curious dd { margin-top: 4px; font-size: 0.875rem; line-height: 1.45; }
@media (max-width: 860px) { .jobpage .bhero { grid-template-columns: minmax(0, 1fr); } }

/* the scores at a glance, under the summary: each AI and its score, in order (the owner, 5 November 2026) */
.jobpage .bhero-foot .mbtitle { margin-top: 44px; }
.jobpage .mbtitle + .miniboard { margin-top: 12px; }
.jobpage .miniboard { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); }
@media (min-width: 761px) { .jobpage .miniboard:not(.two) { max-width: calc(50% - 24px); } }   /* one to three AIs: the width of one column */
.jobpage .miniboard.two { grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.jobpage .miniboard li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 2.25rem; align-items: center; gap: 0 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.jobpage .miniboard .who { font-size: 0.875rem; line-height: 1.3; }
.jobpage .miniboard .who b { font-weight: 650; color: var(--ink); }
.jobpage .miniboard .who small { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.jobpage .miniboard .bar { height: 6px; border-radius: 3px; background: var(--heat-0); }
.jobpage .miniboard .bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.jobpage .miniboard .v { text-align: right; font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.jobpage .mbnote { margin-top: 8px; max-width: none; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 760px) {
  .jobpage .miniboard.two { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
  .jobpage .miniboard li { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 2.25rem; gap: 0 12px; }
}

/* =====================================================================
   Lighter text (the owner, 7 November 2026: "Right now the text looks too heavy"), after a designer's audit. The old homepage
   put its bold headings over short paragraphs in small grey type; these pages have long paragraphs, nearly as dark as the
   headings, and the longest were medium weight. Now the headings are a step lighter, a hero's paragraphs share one grey, and
   each job row's result line stays in ink. The job pages share the headings and keep their reading text. rendercheck.py
   fails a paragraph of 20 words or more set above weight 400, or squeezed into a column narrower than 240px.
   ===================================================================== */
/* prose a clear step below ink: 12.4:1 to 7.5:1 on the paper (6.9:1 at the page's foot, 7.0:1 in the score boxes) */
body.trials:not(.jobpage) { --text: #4a5159; }

/* headings one step lighter; the h1's tracking nearer Inter's own */
body.trials :is(.hero, .bhero) h1 { font-weight: 750; letter-spacing: -0.03em; }
body.trials h2 { font-weight: 700; letter-spacing: -0.022em; }
body.trials :is(.entry, .jrow, .know, .finding) h3,
body.trials :is(.steps, .lessons) b { font-weight: 650; }

/* leads at regular weight: the context in grey, the answer in ink */
body.trials:not(.jobpage) :is(.hero, .bhero) .sub { font-size: var(--fs-lead); line-height: 1.55; font-weight: 400; letter-spacing: 0; color: var(--text); }
body.trials:not(.jobpage) .verdict { font-weight: 400; color: var(--text); }   /* one grey per hero (the owner asked why three paragraphs had three colours); its bold opening stays ink */
body.trials:not(.jobpage) .bhero .small { color: var(--text); }
body.trials:not(.jobpage) .verdict b { font-weight: 600; }

/* a row's text at 16px with more air; child selectors leave the score box's paragraphs alone */
body.trials .entry > .txt > p, body.trials .jrow > .jtxt > p { font-size: 1rem; line-height: 1.65; }
body.trials .jrow > .jtxt > p { max-width: 36rem; }                         /* about 70 characters a line */
body.trials .jrow > .jtxt > p.best { font-weight: 400; color: var(--ink); } /* emphasis by ink, not weight */
body.trials .jrow > .jtxt > p.short { margin-top: 10px; }                   /* at 6px it fused with the line above */
body.trials .entry > .txt > p.story { margin-top: 16px; }

/* the 15px blocks: from 78 characters a line to about 67 */
body.trials .know p, body.trials .curious dd { max-width: 30rem; }

/* the score boxes: names regular, scores semibold */
body.trials .bboard .who { font-weight: 500; }
body.trials .bboard li:not(.bh) .v { font-weight: 600; }

/* fewer moss labels: the row numbers, the findings' repeated categories and the boxes' repeated titles go grey */
body.trials .entry > .num, body.trials .know li > .mono, body.trials .bboard .bt { color: var(--muted); }

/* tabular figures spread the fallback font's non-breaking hyphen: "GPT - 6 Astra", "Mid - sized" */
body.trials :is(table.ais, table.grid) td:not(.n):not(.cell) { font-variant-numeric: normal; }

/* between 761 and 1180px the score box's 440px column filled first: 149px of text at 768, 364px at 1024 */
@media (min-width: 761px) and (max-width: 1180px) {
  body.trials .entry { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-areas: "txt pic"; }
  body.trials .entry > .num { display: none; }                              /* hidden below 761px already */
}
@media (min-width: 761px) and (max-width: 900px) {
  body.trials .entry { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "pic"; row-gap: 24px; }
  body.trials .entry > .bboard { max-width: 440px; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  body.trials:not(.jobpage) .bhero { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}
/* the four steps of a trial: 212px columns at 1024, so two columns until there's room for four */
@media (min-width: 621px) and (max-width: 1180px) {
  body.trials .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 40px); }
}

/* =====================================================================
   One size smaller (the owner, 7 November 2026: "the text may be too big (also taking too much of the screen space)").
   Inter sets about 7% larger than the system font the old homepage used, and these pages carry far more text than it did,
   so the overview pages come down a step: leads 19 to 17px, a row's text 16 to 15px, headings a step down, and the job
   pages' section spacing. The job pages keep their own scale.
   ===================================================================== */
body.trials:not(.jobpage) {
  --fs-body: 1rem;                                          /* 16px, was 17 */
  --fs-lead: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);       /* 16 to 17px, was 17 to 19 */
  --fs-h2: clamp(1.375rem, 1rem + 0.8vw, 1.625rem);         /* 22 to 26px, was 24 to 30 */
  --fs-h1-detail: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);   /* 28 to 40px, was 32 to 48 */
  --head-gap: clamp(24px, 2.6vw, 36px);                     /* was 32 to 48 */
}
body.trials:not(.jobpage) main > section.shell + section.shell { margin-top: clamp(64px, 7vw, 96px); }   /* as on the job pages */
body.trials:not(.jobpage) .hero.lead h1 { font-size: clamp(1.875rem, 3.1vw, 2.75rem); }                 /* 30 to 44px, was 32 to 48 */
body.trials:not(.jobpage) .entry h3 { font-size: clamp(1.1875rem, 1rem + 0.4vw, 1.375rem); }             /* 19 to 22px, was 22 to 26 */
body.trials:not(.jobpage) .jrow h3 { font-size: clamp(1.125rem, 0.95rem + 0.4vw, 1.3125rem); }           /* 18 to 21px, was 20 to 24 */
body.trials:not(.jobpage) .know h3 { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); }             /* 17 to 19px, was 19 to 22 */
body.trials:not(.jobpage) :is(.steps b, .lessons b, .find b) { font-size: 1.0625rem; }                   /* 17px, was 18 */
body.trials:not(.jobpage) :is(.entry > .txt, .jrow > .jtxt) > p { font-size: 0.9375rem; }                /* 15px, was 16 */
body.trials:not(.jobpage) .jrow { padding: 30px 0 34px; }                                                /* was 36 and 40 */
@media (min-width: 761px) { body.trials:not(.jobpage) .entry { padding: 36px 0 40px; } }                 /* was 44 and 48 */
/* the landing's score boxes fold the AIs tested on fewer than half the jobs under a line that opens them (the owner, 7 November
   2026): the boxes, up to 15 rows, took more of the screen than the text beside them */
.bboard details.bmore > summary { display: flex; align-items: flex-start; gap: 7px; width: fit-content; line-height: 1.45; text-wrap: balance; cursor: pointer; list-style: none; color: var(--deep); }
.bboard details.bmore > summary::-webkit-details-marker { display: none; }
.bboard details.bmore > summary::before { content: ""; flex: none; margin-top: 0.38em; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
.bboard details.bmore[open] > summary::before { transform: rotate(90deg); }
.bboard details.bmore > summary:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .bboard details.bmore > summary::before { transition: none; } }

/* =====================================================================
   The landing, mockup C "start from a job" (the owner chose it on 7 November 2026 and approved it to go live). Under the live
   hero, one 12-column grid with 32px gutters; every section opens with the kicker, the title and at most a short lede, then shows
   one thing on the grid's lines; one card on the page (the job you picked); selection in ink, green only for a 100 and for links;
   nothing moves as you click (the script gives the card its tallest height). Classes are lp-, so no other page changes.
   ===================================================================== */
body.landing { --lp-col: 32px; --lp-ink: #101216; --lp-text: #4a5159; --lp-muted: #5d6570; --lp-line: rgba(16, 18, 22, 0.1); --lp-rule: rgba(16, 18, 22, 0.14); --lp-green: #315c38; }
body.landing main > section.shell + section.shell { margin-top: clamp(64px, 6.5vw, 96px); }
body.landing main > .lp-band + section.shell { margin-top: clamp(48px, 5vw, 72px); }     /* the band's edge already parts them */
body.landing main h2 { font-weight: 650; }
body.landing main > section > .lede { margin-top: 12px; max-width: none; font-size: 17px; line-height: 1.55; }     /* the full width */
body.landing button:focus-visible, body.landing a:focus-visible { outline: 2px solid var(--lp-green); outline-offset: 2px; }
.lp-g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lp-col); }
.lp-more, .lp-after a { font-size: 15px; font-weight: 600; color: var(--lp-green); text-decoration: none; white-space: nowrap; }
.lp-more:hover, .lp-after a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-after { margin-top: 32px; }
/* the jobs: six benchmark tabs, a benchmark's jobs on the left (4 columns), one card on the right (8) */
.lp-tabs { display: flex; gap: 0 32px; margin-top: 40px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--lp-line); }
.lp-tabs::-webkit-scrollbar { display: none; }
.lp-tab { flex: none; display: inline-flex; align-items: baseline; gap: 7px; margin: 0 0 -1px; padding: 0 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 500; color: #69717a; white-space: nowrap; }
.lp-tab small { font-size: 13px; font-weight: 500; color: #8d949b; }
.lp-tab:hover { color: var(--lp-ink); }
.lp-tab[aria-selected="true"] { border-bottom-color: var(--lp-ink); color: var(--lp-ink); font-weight: 600; }
.lp-bline { margin: 24px 0 0; max-width: none; font-size: 15px; line-height: 1.6; color: var(--lp-text); }     /* the full width: fewer lines */
.lp-bline b { font-weight: 600; color: var(--lp-ink); }     /* the three best AIs, set apart from the description */
.lp-bline[hidden], .lp-jl[hidden], .lp-t[hidden], .lp-all[hidden] { display: none; }
.lp-x { margin-top: 32px; align-items: start; }
.lp-jl { grid-column: span 4; display: grid; gap: 2px; align-content: start; margin-left: -14px; }
.lp-jb { display: block; width: 100%; padding: 10px 14px; border: 0; border-radius: 0; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 15px; line-height: 1.4; color: var(--lp-text); text-decoration: none; }
.lp-jb:hover { color: var(--lp-ink); }
.lp-jb[aria-current="true"] { box-shadow: inset 2px 0 0 var(--lp-ink); color: var(--lp-ink); font-weight: 600; }
.lp-card { grid-column: span 8; container-type: inline-size; display: flex; flex-direction: column; padding: 32px; border-radius: 16px; background: #fcfcf9; box-shadow: 0 0 0 1px var(--lp-line); scroll-margin-top: 20px; }
.lp-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; }
.lp-job { align-items: center; }
.lp-art { aspect-ratio: 360 / 220; padding: 10px 16px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #f3f1e9; }
.lp-art svg { display: block; width: 100%; height: 100%; }
.lp-art svg *, .lp-fart svg * { vector-effect: non-scaling-stroke; }
.lp-card h3 { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: var(--lp-ink); }
/* a job title that links to its page: a light underline, ink on hover (no arrow: the owner, 8 November 2026) */
.lp-card h3 a, .bp-title a { color: inherit; text-decoration: underline; text-decoration-color: var(--lp-rule); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lp-card h3 a:hover, .bp-title a:hover { text-decoration-color: currentColor; }
.lp-one { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--lp-text); }
.lp-res { flex: 1; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--lp-line); }
.lp-res > div { display: flex; flex-direction: column; align-items: flex-start; }
.lp-out { display: grid; gap: 4px; margin: 0; }
.lp-num { font-size: 26px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--lp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-num small { margin-left: 6px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--lp-muted); }
.lp-out > span:not(.lp-num) { font-size: 14px; line-height: 1.4; color: var(--lp-muted); }
.lp-marks { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.lp-marks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--lp-ink); text-wrap: pretty; }
.lp-marks li::before { content: "\2713"; font-weight: 600; color: #4f7c56; }
.lp-marks li.x::before { content: "\2715"; color: #b9822a; }
.lp-res .lp-more, .lp-all { margin-top: auto; padding-top: 18px; font-size: 15px; line-height: 1.6; }
.lp-bar { display: block; height: 6px; border-radius: 3px; background: #e5e3d9; }
.lp-bar i { display: block; height: 100%; border-radius: 3px; background: #949d95; }
.lp-bar i.full { background: #4f7c56; }
.lp-bars { align-self: stretch; }
.lp-t { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 2rem; gap: 12px; align-items: center; padding: 5px 0; font-size: 13px; line-height: 1.3; }
.lp-who { font-weight: 400; color: var(--lp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-t b { font-weight: 500; color: var(--lp-ink); text-align: right; font-variant-numeric: tabular-nums; }
.lp-all { padding-left: 0; padding-right: 0; padding-bottom: 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-weight: 600; color: var(--lp-green); }
/* what AIs do well, and where they fall short: a band; each group's label on the left, then one finding per row */
.lp-band { margin-top: clamp(48px, 5vw, 72px); padding: clamp(48px, 5vw, 72px) 0; background: #f1efe6; }
.lp-fgroup { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--lp-rule); }
.lp-fgroup + .lp-fgroup { margin-top: 28px; }
.lp-fhead { grid-column: span 3; display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--lp-ink); }
.lp-fhead::before { content: "\2713"; font-weight: 600; color: #4f7c56; }
.lp-fhead.x::before { content: "\2715"; color: #b9822a; }
.lp-flist { grid-column: span 9; }
.lp-fi { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--lp-col); align-items: start; }
.lp-fi + .lp-fi { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--lp-line); }
.lp-fart { grid-column: span 3; height: 132px; padding: 12px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #f8f7f0; }
.lp-fart svg { display: block; width: auto; max-width: 100%; height: 100%; }
.lp-ftext { grid-column: span 6; }
.lp-fi h3 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--lp-ink); }
.lp-fi p { margin: 6px 0 0; max-width: 36rem; font-size: 15px; line-height: 1.6; color: var(--lp-text); }
.lp-fi .lp-more { display: inline-block; margin-top: 10px; }
/* which AIs did best: the five most-tested as columns, darker for larger, grouped large / mid-sized / small; beside them, where each of
   the top three did best (owner, 8 November 2026: the rows looked "a bit boring") */
body.landing { --lp-large: #315c38; --lp-mid: #6c9672; --lp-small: #a9c0ac; }
.lp-aig { margin-top: 40px; align-items: start; row-gap: 40px; }
.lp-chart { grid-column: span 7; }
.lp-plot, .lp-cnames, .lp-csizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; }
.lp-plot { height: 240px; align-items: end; border-bottom: 1px solid var(--lp-rule); }
.lp-c { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.lp-cv { margin-bottom: 8px; font-size: 22px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.lp-cb { display: block; width: 62%; max-width: 76px; border-radius: 8px 8px 0 0; background: var(--lp-large); }
.lp-c-m .lp-cb { background: var(--lp-mid); }
.lp-c-s .lp-cb { background: var(--lp-small); }
.lp-cnames { margin-top: 12px; text-align: center; }
.lp-cn b { display: block; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--lp-ink); }
.lp-cn small { display: block; font-size: 13px; line-height: 1.4; color: var(--lp-muted); }
.lp-csizes { margin-top: 16px; }
.lp-cs { padding-top: 8px; border-top: 3px solid var(--lp-large); text-align: center; font-size: 13px; font-weight: 600; color: var(--lp-ink); }
.lp-cs.lp-c-m { border-top-color: var(--lp-mid); }
.lp-cs.lp-c-s { border-top-color: var(--lp-small); }
.lp-take { grid-column: 9 / span 4; }
.lp-take h3 { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--lp-ink); }
.lp-bestl { display: grid; gap: 10px; margin: 12px 0 0; padding: 0 0 20px; list-style: none; border-bottom: 1px solid var(--lp-line); }
.lp-bestl li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--lp-text); }
.lp-bestl li::before { content: ""; width: 10px; height: 10px; margin-top: 7px; border-radius: 2px; background: var(--lp-large); }
.lp-bestl li.lp-c-m::before { background: var(--lp-mid); }
.lp-bestl b { font-weight: 600; color: var(--lp-ink); }
.lp-sznote { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: var(--lp-ink); }
.lp-rnote { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--lp-muted); }
.lp-take .lp-after { margin-top: 20px; }
/* the team, on the same grid, the logos at one optical size */
body.landing .people { gap: 32px var(--lp-col); margin-top: 40px; }
body.landing .affil { margin-top: 48px; padding-top: 24px; }
body.landing .affil > .mono { color: var(--lp-green); }
body.landing .logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 28px var(--lp-col); margin-top: 20px; }
body.landing .logos img { height: 26px; max-width: 100%; width: auto; object-fit: contain; object-position: left center; }
body.landing .logos img[src$="logo-ucl.png"] { height: 21px; }
body.landing .logos img[src$="logo-turing.png"] { height: 18px; }
body.landing .logos img[src$="logo-meta.png"] { height: 21px; }
body.landing .logos img[src$="logo-google.png"] { height: 24px; }
body.landing .logos img[src$="logo-edinburgh.png"] { height: 28px; }
body.landing .logos img[src$="logo-oxford.png"] { height: 30px; }
body.landing .logos img[src$="logo-uoft.png"] { height: 32px; }
body.landing .logos img[src$="cmu.png"] { height: 36px; }
@container (max-width: 520px) { .lp-row { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
/* eight benchmarks (8 November 2026): above 1000px the tabs sit in four columns on the grid's lines, two rows, each with its own
   rule; below, the one row scrolls sideways under its fade, as before */
@media (min-width: 1001px) {
  .lp-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--lp-col); overflow: visible; border-bottom: 0; }
  .lp-tab { margin: 0; padding: 13px 0 12px; border-bottom: 1px solid var(--lp-line); }
  .lp-tab[aria-selected="true"] { padding-bottom: 11px; border-bottom: 2px solid var(--lp-ink); }
}
@media (max-width: 1000px) {
  .lp-tabs { gap: 0 24px; padding-right: 48px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .lp-x { row-gap: 28px; }
  .lp-jl, .lp-card { grid-column: 1 / -1; }
  .lp-jl { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .lp-fhead, .lp-flist { grid-column: 1 / -1; }
  .lp-fhead { margin-bottom: 20px; }
  .lp-fi { grid-template-columns: 220px minmax(0, 1fr); }
  .lp-fart, .lp-ftext { grid-column: auto; }
  .lp-chart, .lp-take { grid-column: 1 / -1; }
}
@media (max-width: 900px) { body.landing .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .lp-card { order: -1; padding: 24px 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--lp-line); }
  .lp-art { aspect-ratio: auto; height: 150px; }
  .lp-fi { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .lp-fart { height: 120px; }
  .lp-plot, .lp-cnames, .lp-csizes { column-gap: 8px; }
  .lp-plot { height: 200px; }
  .lp-cv { font-size: 18px; }
  .lp-cn b { font-size: 13px; }
  .lp-cn small, .lp-cs { font-size: 12px; }
  body.landing .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =====================================================================
   Benchmark pages, mockup C "strips" (the owner chose it on 8 November 2026, then: "I see a bit of minor design issues with it. Fix
   the design issues"; a designer's eleven are folded in). The landing's system (body.landing) plus: every job on one line, on the
   12-column grid, with every AI a dot from 0 to 100 (ties for the best in ink, a 100 in green, near-ties a row apart); a line opens
   the job's card, the open one marked by a rule in ink; who did best as size-shaded columns in ranking order (a row chart on
   phones); the lessons in the landing's band; the notes and the score grid.
   ===================================================================== */
body.bench .crumb { margin-top: 8px; }
body.landing.bench .hero.lead.bp-hero { padding-top: clamp(24px, 3vw, 40px); }
.bp-facts { margin: 22px 0 0; max-width: 30rem; font-size: 15px; line-height: 1.6; color: var(--lp-text); }
.bp-facts b { font-weight: 600; color: var(--lp-ink); }
.bp-res h4, .bp-side h4 { display: block; margin: 0; font: 700 var(--fs-label, 11.5px)/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.13em; text-transform: uppercase; color: var(--lp-muted); }
.bp-side h4 { margin-bottom: 8px; }
/* the strips */
.bp-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 24px; font-size: 13px; color: var(--lp-muted); }
.bp-key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: #949d95; vertical-align: -1px; }
.bp-key i.top { background: var(--lp-ink); }
.bp-key i.full { background: #4f7c56; }
.bp-strips { margin-top: 12px; border-top: 1px solid var(--lp-rule); }
.bp-axisrow, .bp-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lp-col); align-items: center; }
.bp-axisrow > :first-child, .bp-st { grid-column: span 4; }
.bp-scale, .bp-track { grid-column: span 7; }
.bp-axisrow > :last-child, .bp-best { grid-column: span 1; }
.bp-axisrow { padding: 10px 0; border-bottom: 1px solid var(--lp-line); font-size: 12px; color: var(--lp-muted); }
.bp-axisrow > :last-child { padding-right: 23px; text-align: right; }
.bp-scale { position: relative; height: 16px; }
.bp-scale span { position: absolute; transform: translateX(-50%); }
.bp-job { position: relative; border-bottom: 1px solid var(--lp-line); }
.bp-job.open::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 2px; background: var(--lp-ink); }
.bp-strip { position: relative; z-index: 0; width: 100%; min-height: 62px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.bp-strip::before { content: ""; position: absolute; z-index: -1; inset: 4px -12px; border-radius: 10px; background: transparent; transition: background 0.12s; }
.bp-strip:hover::before { background: rgba(16, 18, 22, 0.04); }
.bp-strip:hover .bp-best::after, .bp-job.open .bp-best::after { border-color: var(--lp-ink); }
.bp-st { font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--lp-ink); }
.bp-track { position: relative; height: 36px; background: linear-gradient(var(--lp-line), var(--lp-line)) 0 50% / 100% 1px no-repeat,
  linear-gradient(var(--lp-rule), var(--lp-rule)) 0 50% / 1px 12px no-repeat, linear-gradient(var(--lp-rule), var(--lp-rule)) 50% 50% / 1px 12px no-repeat,
  linear-gradient(var(--lp-rule), var(--lp-rule)) 100% 50% / 1px 12px no-repeat; }
.bp-dot { position: absolute; top: calc(50% + var(--dy, 0px)); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #949d95; box-shadow: 0 0 0 2px #f8f7f0; }
.bp-strip:hover .bp-dot { box-shadow: 0 0 0 2px #f2f1ea; }
.bp-dot.top { z-index: 2; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: var(--lp-ink); }
.bp-dot.full { background: #4f7c56; }
.bp-best { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-right: 6px; font-size: 17px; font-weight: 600; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.bp-best::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--lp-muted); border-bottom: 1.5px solid var(--lp-muted); transform: translateY(-3px) rotate(45deg); }
.bp-job.open .bp-best::after { transform: translateY(2px) rotate(-135deg); }
.bp-detail { align-items: start; padding: 8px 0 32px; }
.bp-detail[hidden] { display: none; }
.bp-detail > .bp-txt { grid-column: span 7; }
.bp-detail > .bp-side { grid-column: span 5; }
.bp-detail .bp-one { max-width: 40rem; }
.bp-title { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: var(--lp-ink); }
.bp-title span { font-weight: 400; color: var(--lp-muted); white-space: nowrap; }
.bp-one { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--lp-text); }
.bp-res { margin-top: 20px; }
.bp-res .lp-marks { margin-top: 10px; }
.bp-tries { margin: 16px 0 0; max-width: 36rem; font-size: 14px; line-height: 1.55; color: var(--lp-muted); }
/* who did best: columns in ranking order, shaded by size; with more than seven AIs the chart takes the whole width */
@media (min-width: 1001px) { body.bench .lp-chart { grid-column: span 8; } }
body.bench .lp-plot, body.bench .lp-cnames { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
body.bench .lp-cb { height: var(--v); }
.lp-aig.bp-wide > .lp-chart, .lp-aig.bp-wide > .lp-take { grid-column: 1 / -1; }
.lp-aig.bp-wide > .lp-take { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--lp-col); align-items: start; }
.lp-aig.bp-wide > .lp-take .lp-rnote { margin-top: 0; }
.lp-aig.bp-wide .lp-cn b { font-size: 13px; overflow-wrap: anywhere; }
.lp-c-u .lp-cb { background: #c8cfc9; }
.bp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 13px; color: var(--lp-muted); }
.bp-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--lp-large); vertical-align: -1px; }
.bp-legend i.m { background: var(--lp-mid); }
.bp-legend i.s { background: var(--lp-small); }
.bp-who { margin: 0; font-size: 15px; line-height: 1.6; color: var(--lp-text); }
/* what the jobs showed */
.bp-li h3 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--lp-ink); }
.bp-li p { margin: 6px 0 0; max-width: 36rem; font-size: 15px; line-height: 1.6; color: var(--lp-text); }
.bp-li + .bp-li { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--lp-line); }
.lp-flist.bp-plain { grid-column: 1 / span 9; }
/* for the curious: the notes, then the score grid */
.bp-notes { margin: 40px 0 0; row-gap: 24px; }
.bp-notes > div { grid-column: span 6; }
.bp-notes dt { font-size: 15px; font-weight: 600; color: var(--lp-ink); }
.bp-notes dd { margin: 4px 0 0; max-width: 34rem; font-size: 14px; line-height: 1.6; color: var(--lp-text); }
.bp-gridh { margin: 48px 0 0; font-size: 17px; font-weight: 600; color: var(--lp-ink); }
.bp-gridh + .scroll { margin-top: 20px; }
body.bench .scroll + .note { max-width: 36rem; }
body.bench .grid.jobs-grid:not(.arms) th:last-child { width: auto; text-align: center; }
body.bench .jobs-grid :is(th, td):first-child { padding-left: 0; }
body.bench .jobs-grid td.cell.heat-0 { background: transparent; box-shadow: inset 0 0 0 1px var(--lp-rule); }
@media (min-width: 901px) { body.bench .scroll > table.jobs-grid :is(th, td):first-child { position: static; background: none; } }
@media (max-width: 900px) { body.bench .scroll > table.jobs-grid :is(th, td):first-child { background: #f1f0e9; box-shadow: 1px 0 0 var(--lp-line); } }
@media (max-width: 1180px) {
  body.bench .lp-aig:not(.bp-wide) .lp-plot, body.bench .lp-aig:not(.bp-wide) .lp-cnames { column-gap: 8px; }
  body.bench .lp-aig:not(.bp-wide) .lp-cn b { font-size: 14px; white-space: nowrap; }
}
@media (max-width: 1000px) {
  .bp-detail > .bp-txt, .bp-detail > .bp-side, .bp-notes > div { grid-column: 1 / -1; }
  .bp-detail > .bp-txt, body.bench .lp-take { max-width: 38rem; }
  .bp-detail { row-gap: 18px; }
  .bp-axisrow, .bp-strip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 4.5rem; column-gap: 14px; }
  .bp-axisrow > :first-child, .bp-axisrow > :last-child, .bp-axisrow > .bp-scale, .bp-st, .bp-track, .bp-best { grid-column: auto; }
  .lp-flist.bp-plain { grid-column: 1 / -1; }
  .lp-aig.bp-wide > .lp-take { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
}
@media (max-width: 760px) { body.bench .scroll > table.jobs-grid { display: table; min-width: 720px; } }
@media (max-width: 640px) {
  .lp-g12 { column-gap: 0; }       /* eleven 32px gaps are wider than a phone's column */
  .bp-axisrow { grid-template-columns: minmax(0, 1fr); padding: 8px 0 6px; }
  .bp-axisrow > :not(.bp-scale) { display: none; }
  .bp-scale span:first-child { transform: none; }
  .bp-scale span:last-child { transform: translateX(-100%); }
  .bp-strip { grid-template-columns: minmax(0, 1fr) 4.5rem; column-gap: 14px; row-gap: 6px; padding: 12px 0; }
  .bp-strip .bp-track { grid-column: 1 / -1; grid-row: 2; }
  .bp-strip::before { inset: 2px -10px; }
  .bp-job.open::before { left: -12px; }
  body.bench .lp-chart { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 12px; }
  body.bench .lp-cnames, body.bench .lp-plot { grid-row: 1; grid-template-columns: none; grid-auto-rows: 44px; row-gap: 0; }
  body.bench .lp-cnames { grid-column: 1; margin-top: 0; text-align: left; align-items: center; }
  body.bench .lp-plot { grid-column: 2; height: auto; border-bottom: 0; border-left: 1px solid var(--lp-rule); }
  body.bench .lp-c { flex-direction: row; justify-content: flex-start; align-items: center; height: auto; padding-right: 36px; }
  body.bench .lp-cb { width: var(--v); max-width: none; height: 12px; border-radius: 0 4px 4px 0; }
  body.bench .lp-cv { order: 2; margin: 0 0 0 8px; font-size: 15px; }
  body.bench .lp-cn b { font-size: 14px; white-space: nowrap; }
  body.bench .bp-legend { grid-column: 1 / -1; }
}
/* a score grid of more than 12 jobs (the app builder's 13, 8 November 2026): a narrower name column and tighter headings, so it
   fits at 1024px */
table.grid.many th:first-child { width: 20%; }
table.grid.many th { padding-left: 3px; padding-right: 3px; }

/* =====================================================================
   For AI labs (build_labs.py): ink and blue, the live site's system. The landing is the skim layer (numbers, short
   labels, pictures); the catalogue, capability page, datasheet and Methods hold the detail. One rule per component;
   each component's phone rules sit in the media blocks at the end, after every desktop rule.
   ===================================================================== */
body.labs main > section.shell + section.shell { margin-top: clamp(72px, 8vw, 112px); }
body.labs .lede { max-width: 44rem; }
body.labs .lede a, body.labs .note a { color: var(--deep); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(143, 203, 230, 0.4); }
body.labs h1 { letter-spacing: -0.03em; }
.mono-note { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--muted); }
section > h2 + .limits, section > h2 + .fails { margin-top: var(--head-gap); }
body.labs .grid-h { margin-top: 48px; }

/* page heads; the landing's carries the line art */
.lhero { padding-top: clamp(40px, 5.5vw, 80px); }
.lhero h1 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.08; max-width: 18em; }
.lhero .sub { max-width: 46rem; font-weight: 500; }
.lhero .btns { margin-top: 28px; }
.lhero > .mono, .lhero > div > .mono:first-child { display: inline-flex; align-items: center; gap: 12px; }
.lhero > .mono::before, .lhero > div > .mono:first-child::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.7; }
.lhero.art { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(40px, 5vw, 72px); align-items: center;
             overflow: visible; border-radius: 0; background: none; }   /* not the public .art panel */
.lhero.art h1 { font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.25rem); }
.lhero.art .sub { max-width: 34rem; }
body.labs .hub svg { color: var(--text); }

/* the figures band: four numbers, each with a short label */
section > .lede + .figs { margin-top: 32px; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.figs > div { padding: 24px 24px 26px 0; }
.figs > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.figs b { display: block; font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); line-height: 1.05; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.figs span { display: block; margin-top: 10px; max-width: 18rem; font-size: var(--fs-small); line-height: 1.5; color: var(--text); text-wrap: balance; }
.figs-sec .note.key { margin-top: 14px; max-width: 52rem; color: var(--muted); }
.figs-sec .note.key b { color: var(--text); font-weight: 600; }
.cruns + .note { margin-top: 14px; color: var(--muted); }
section > .lede + .fm { margin-top: 32px; }
div.cr-row:hover { background: none; }

/* short items in a grid: what you can buy, how the reward stays honest */
.offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 48px); margin-top: var(--head-gap); }
.offer > div { padding: 20px 0 26px; border-top: 1px solid var(--line); }
.offer h3 { font-size: 1.0625rem; font-weight: 650; color: var(--ink); }
.offer p { margin-top: 8px; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }
section > .lede + .offer { margin-top: 32px; }

/* the capability index: one row per capability, one dot per run (request as given), the median as a line */
.cruns { margin-top: 32px; }
.cr-head, .cr-row { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 4.5rem 7.5rem; gap: 0 28px; align-items: center; }
.cr-head { padding-bottom: 10px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cr-head .n, .cr-row .n { text-align: right; font-variant-numeric: tabular-nums; }
.cr-axis { position: relative; height: 1.2em; }
.cr-axis i { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; letter-spacing: 0; }
.cr-axis i:first-child { transform: none; }
.cr-axis i:last-child { transform: translateX(-100%); }
.cr-row { min-height: 4.5rem; padding: 12px 0; border-bottom: 1px solid var(--line-soft); color: var(--text); text-decoration: none; }
.cr-row:hover { background: rgba(232, 237, 240, 0.03); }
.cr-name b { display: block; font-size: 0.9375rem; line-height: 1.35; font-weight: 650; color: var(--ink); text-wrap: balance; }
.cr-row:hover .cr-name b { color: var(--deep); }
.cr-name small { display: block; margin-top: 3px; font-size: var(--fs-small); color: var(--muted); }
.cr-strip { position: relative; height: 40px; border-right: 1px dashed var(--muted);
            background: linear-gradient(to right, var(--line) 0 1px, transparent 1px) 0 0 / 25% 100% repeat-x; }
.cr-strip i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #3987e5; opacity: 0.45; transform: translate(-50%, -50%); }
.cr-strip i.f { z-index: 1; width: 7px; height: 7px; background: var(--deep); opacity: 1; }   /* every check met */
.cr-strip i.med { z-index: 2; top: 1px; bottom: 1px; width: 2px; height: auto; border-radius: 1px; background: var(--ink); opacity: 1; transform: translateX(-50%); }
.cr-row .n { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }

/* failure modes: one number per capability */
.fm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 40px); margin: var(--head-gap) 0 0; padding: 0; list-style: none; }
.fm li { padding-top: 18px; border-top: 1px solid var(--accent); }
.fm .mono { display: block; font-size: var(--fs-label); color: var(--deep); }
.fm b { display: block; margin-top: 12px; font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.fm p { margin-top: 10px; font-size: var(--fs-ui); line-height: 1.55; color: var(--text); text-wrap: pretty; }

/* the reward's safeguards: title-left hairline rows */
.srows { margin: 32px 0 0; max-width: 60rem; border-top: 1px solid var(--line); }
.srows > div { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4px 32px; padding: 14px 0 15px; border-bottom: 1px solid var(--line-soft); }
.srows dt { font-size: var(--fs-ui); font-weight: 650; color: var(--ink); }
.srows dd { margin: 0; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); text-wrap: pretty; }

/* the first training run: two bars on a 0-100 scale */
.tbars { margin-top: 28px; max-width: 46rem; }
.tbar { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 3rem; gap: 18px; align-items: center; padding: 8px 0; }
.tbar span { font-size: var(--fs-ui); color: var(--text); }
.tbar i { position: relative; height: 12px; border-radius: 6px; background: var(--line-soft); }
.tbar i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--v); border-radius: 6px; background: #3987e5; }
.tbar + .tbar i::after { background: var(--deep); }
.tbar b { font-size: 1.5rem; line-height: 1; font-weight: 750; letter-spacing: -0.02em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

/* the team, from the live site: two people, then the affiliations as light marks */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin-top: 32px; }
.person { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: start; }
.person img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.person .role { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep); }
.person h3 { margin-top: 6px; font-size: 1.125rem; font-weight: 650; color: var(--ink); }
.person ul { margin: 8px 0 0; padding: 0; list-style: none; }
.person li { font-size: var(--fs-small); line-height: 1.65; color: var(--text); }
.affil { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.affil > .mono { font-size: var(--fs-label); color: var(--muted); }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; margin-top: 18px; }
.logos img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: 0.6; }

/* steps across (work with us) */
.flow { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); margin: var(--head-gap) 0 0; padding: 0; list-style: none; }
.flow li { position: relative; padding: 18px 22px 22px 0; border-top: 1px solid var(--accent); }
.flow li + li { padding-left: 22px; }
.flow li + li::before { content: "\2192"; position: absolute; left: -7px; top: -13px; padding: 0 2px; font-size: 15px; color: var(--accent); }
.flow .k { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); }
.flow b { display: block; margin-top: 10px; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.flow p { margin-top: 8px; font-size: var(--fs-small); line-height: 1.55; color: var(--text); }

/* limitations and failure lists as hairline rows */
.limits { margin: 16px 0 0; padding: 0; list-style: none; max-width: 52rem; border-top: 1px solid var(--line); }
.limits li { margin: 0; padding: 12px 0 13px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }
.fails { margin: var(--head-gap) 0 0; padding: 0; list-style: none; counter-reset: f; border-top: 1px solid var(--line); }
.fails li { counter-increment: f; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0 18px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }
.fails li::before { content: counter(f, decimal-leading-zero); font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; color: var(--deep); line-height: 2; }
.fails li p { grid-column: 2; margin: 0; max-width: 50rem; }
.fails li b { color: var(--ink); font-weight: 650; }

/* the closing band */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 36px 0; border-top: 1px solid var(--line); }
.cta h2 { margin: 0; max-width: 34rem; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); }
.cta p { margin-top: 10px; max-width: 36rem; font-size: var(--fs-ui); color: var(--text); }


/* the catalogue: filters right above the table, a legend below it */
body.labs main > section.shell.cat-sec { margin-top: 40px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.filters button { height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: 500 var(--fs-small)/1 var(--sans); cursor: pointer; }
.filters button:hover { border-color: var(--muted); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
table.cat { min-width: 1100px; table-layout: fixed; }
table.cat :is(th, td) { padding-left: 10px; padding-right: 10px; }
table.cat :is(th, td):first-child { padding-left: 0; }
table.cat :is(th, td):last-child { padding-right: 0; }
.scroll table.cat :is(th, td):first-child, .scroll table.capt :is(th, td):first-child,
.scroll table.res :is(th, td):first-child { position: static; background: none; }   /* sticky only where the table scrolls */
table.cat th:nth-child(1) { width: 19%; }
table.cat th:nth-child(2) { width: 8%; }
table.cat th:nth-child(3) { width: 7.5%; }
table.cat th:nth-child(4) { width: 9%; }
table.cat th:nth-child(5) { width: 7.5%; }   /* room for a range such as 290–415 */
table.cat th:nth-child(6) { width: 7%; }     /* "Attempts" and "Minutes", one word each, can't wrap */
table.cat th:nth-child(12) { width: 6.5%; }
table.cat th, table.capt th { font-size: var(--fs-label); }
table.cat th { white-space: normal; line-height: 1.35; vertical-align: bottom; }
table.cat td { vertical-align: top; }
table.cat td:first-child b { display: block; color: var(--ink); font-weight: 600; }
table.cat td:first-child small { display: block; margin-top: 4px; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
table.cat td.n, table.cat th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.cat td.n { white-space: nowrap; }
table.cat td.n.words { white-space: normal; }   /* "Cost model" in the checks column */
table.cat tr[hidden] { display: none; }
table.cat a { color: var(--deep); }
table.cat td:first-child a, table.capt td:first-child a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 12px 40px; margin: 32px 0 0; }
.legend dt { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep); }
.legend dd { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }

/* the capability page's table */
table.capt { min-width: 980px; table-layout: fixed; }
table.capt :is(th, td) { padding-left: 10px; padding-right: 10px; }
table.capt :is(th, td):first-child { padding-left: 0; }
table.capt :is(th, td):last-child { padding-right: 0; }
table.capt th:nth-child(1) { width: 26%; }
table.capt th:nth-child(2) { width: 11%; }
table.capt th:nth-child(3) { width: 33%; }
table.capt td { vertical-align: top; }
table.capt td:first-child b { display: block; color: var(--ink); font-weight: 600; }
table.capt td:first-child small { display: block; margin-top: 4px; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
table.capt td.n, table.capt th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.capt td.n { white-space: nowrap; }
table.capt td.n.words { white-space: normal; }   /* "Cost model" */
table.capt a { color: var(--deep); }

/* the datasheet: header with the scene over the key facts, spec rows, results as heat cells */
.dhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 32px clamp(40px, 5vw, 72px); align-items: start; padding-top: clamp(32px, 4vw, 56px); }
.dhead h1 { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.625rem); line-height: 1.1; }
.dhead .sub { max-width: 40rem; font-weight: 500; }
.dhead .mono-note { margin-top: 12px; }
.dhead .side .thumb { margin-bottom: 20px; }
.tagline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.tagline a, .tagline span { padding: 3px 9px; border: 1px solid var(--line); border-radius: 4px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.05em; color: var(--deep); }
.keyfacts { margin: 0; border-top: 1px solid var(--line); }
.keyfacts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.keyfacts dt { font-size: var(--fs-small); color: var(--muted); }
.keyfacts dd { margin: 0; font-size: var(--fs-small); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.dspec { margin: var(--head-gap) 0 0; border-top: 1px solid var(--line); }
.dspec > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 6px 32px; padding: 16px 0 18px; border-bottom: 1px solid var(--line-soft); }
.dspec dt { padding-top: 2px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep); }
.dspec dd { margin: 0; max-width: 48rem; font-size: var(--fs-ui); line-height: 1.65; color: var(--text); }
.dspec dd a { color: var(--deep); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(143, 203, 230, 0.4); }
.res-wrap { margin-top: 48px; }
.res-wrap + .note { margin-top: 20px; }
table.res td.n, table.res th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.res td.full { color: var(--deep); font-weight: 650; }
table.grid.arms.res { width: min(720px, 100% + 8px); }
.scroll > table.grid.arms.res { width: min(720px, 100%); }
table.grid.res th { text-align: center; font-size: var(--fs-label); }
table.grid.res th:first-child, table.grid.res td:first-child { text-align: left; width: 34%; }
table.grid.res td:first-child small { display: block; font-size: 0.8125rem; color: var(--muted); }

/* drawings sit in a dark panel on the labs path (the public panel is paper) */
body.labs .thumb:not(.photo) { background: radial-gradient(circle at 50% 56%, rgba(95, 176, 212, 0.14), transparent 64%), #131a21; }
body.labs .thumb:not(.photo)::after { box-shadow: inset 0 0 0 1px rgba(232, 237, 240, 0.10); }

/* ---------------------------------------------------------------- narrower screens */
/* mid widths: the labs header stays on one row down to about 1000px; the catalogue drops columns in tiers so it always
   fits (13 columns, then 9 from 1220px, 6 from 900px, 3 on a phone); the capability table drops its users column */
@media (max-width: 1220px) and (min-width: 621px) {
  body.labs header { column-gap: 20px; }
  body.labs header nav:not(.paths) { gap: 16px; }
  body.labs header nav:not(.paths) a:not(.btn) { font-size: 14px; }
  body.labs header .btn { padding: 0 14px; font-size: 14px; }
  body.labs .paths a { padding: 0 11px; letter-spacing: 0.07em; }
}
@media (max-width: 1220px) {
  table.cat { min-width: 0; }
  table.cat :is(th, td):is(:nth-child(2), :nth-child(9), :nth-child(12), :nth-child(13)) { display: none; }
  table.cat th:nth-child(1) { width: 26%; }
  table.cat th:nth-child(3) { width: 9%; }
  table.cat th:nth-child(4) { width: 12%; }
  table.cat th:nth-child(5) { width: 9%; }
  table.cat th:nth-child(6) { width: 9%; }
}
@media (max-width: 1100px) {
  table.capt { min-width: 0; }
  table.capt :is(th, td):nth-child(2) { display: none; }
  table.capt th:nth-child(1) { width: 28%; }
  table.capt th:nth-child(3) { width: 36%; }
}
@media (max-width: 900px) {
  table.cat :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(6)) { display: none; }
  table.capt :is(th, td):nth-child(5) { display: none; }   /* models: the dot rows above give each count */
  table.cat th:nth-child(1) { width: 34%; }
  table.cat th:nth-child(5) { width: 14%; }
  /* the dot rows: name and numbers on one line, the dots full width below */
  .cr-head, .cr-row { grid-template-columns: minmax(0, 1fr) 3.5rem 5.5rem; gap: 10px 12px; }
  .cr-head .cr-name { visibility: hidden; }
  .cr-head { position: sticky; top: 0; z-index: 3; padding-top: 10px; background: var(--paper); align-items: end; }   /* the scale stays in view */
  .cr-axis, .cr-strip { grid-column: 1 / -1; grid-row: 2; }
  .cr-row { min-height: 0; }
}
@media (max-width: 980px) {
  .lhero.art { grid-template-columns: minmax(0, 1fr); }
  .offer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(24px, 3vw, 40px); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li, .flow li + li { padding: 16px 0 18px 20px; border-top: 0; border-left: 1px solid var(--accent); }
  .flow li + li::before { content: "\2193"; left: -6px; top: -12px; }
  .dhead { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .figs { grid-template-columns: minmax(0, 1fr); }
  .figs > div, .figs > div + div { padding-left: 0; border-left: 0; }
  .figs > div + div { border-top: 1px solid var(--line); }
  .offer, .fm { grid-template-columns: minmax(0, 1fr); }
  .fm { gap: 32px; }
  .srows > div { grid-template-columns: minmax(0, 1fr); }
  .people { grid-template-columns: minmax(0, 1fr); }
  .tbar { grid-template-columns: 7.5rem minmax(0, 1fr) 2.5rem; gap: 12px; }
  .logos { gap: 18px 28px; }
  .logos img { height: 22px; }
  .dspec > div { grid-template-columns: minmax(0, 1fr); }
  .cr-strip i { width: 4px; height: 4px; }
  .cr-strip i.f { width: 6px; height: 6px; }
}
@media (max-width: 620px) {
  body.labs header .btn { display: none; }
  body.labs header nav:not(.paths) { flex-wrap: nowrap; overflow-x: auto; gap: 14px; -webkit-overflow-scrolling: touch; }
  body.labs header nav:not(.paths) a { white-space: nowrap; font-size: 14px; }
  body.labs .lhero .hub .lbl { display: inline; font-size: 15px !important; }   /* the hero's labels, readable at phone width */
  .cat-sec .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .cat-sec .filters button { flex: none; }
  /* the catalogue on a phone: name, best and full reward */
  table.cat { min-width: 0; table-layout: auto; }
  table.cat :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7),
    :nth-child(9), :nth-child(11), :nth-child(12), :nth-child(13)) { display: none; }
  table.cat th:nth-child(1) { width: auto; }
  table.cat td:first-child small { display: none; }
  table.capt { min-width: 0; table-layout: auto; }
  table.capt :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) { display: none; }
  table.capt th:nth-child(1) { width: auto; }
  table.capt td:first-child small { display: none; }
  table.grid.arms.res { min-width: 0; }
}

/* ---------------------------------------------------------------- landing, revision 3 (2026-10-29) */
/* the hero's three example jobs: what an environment is, before any number */
.lhero .ex { margin: 20px 0 0; padding: 0; list-style: none; max-width: 34rem; }
.lhero .ex li { position: relative; padding: 9px 0 9px 24px; font-size: var(--fs-ui); line-height: 1.45; color: var(--text);
                border-top: 1px solid var(--line); }
.lhero .ex li:last-child { border-bottom: 1px solid var(--line); }
.lhero .ex li::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: var(--deep); }
/* failures: one per skill, five across */
.fm.ten { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 40px; }
@media (max-width: 1100px) { .fm.ten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fm.ten { grid-template-columns: minmax(0, 1fr); } }
/* the skill grid: each model's median reward on each skill */
section > .lede + .scroll > table.heat { margin-top: 32px; }
table.heat { width: 100%; border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; }
table.heat thead th { padding: 0 12px 10px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
                      letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: right;
                      white-space: nowrap; vertical-align: bottom; }
table.heat thead th:first-child { padding-left: 0; text-align: left; }
table.heat thead th { border-bottom: 0; }
table.heat tbody th { padding: 0 18px 0 0; border-bottom: 0; vertical-align: middle; font-family: inherit;
                      font-size: 0.9375rem; font-weight: 650; line-height: 1.3; letter-spacing: normal; text-transform: none;
                      color: var(--ink); text-align: left; white-space: nowrap; }
table.heat tbody th a { color: inherit; text-decoration: none; }
table.heat tbody th a:hover { color: var(--deep); }
table.heat td { padding: 11px 12px; border-radius: 4px; font-size: var(--fs-ui); font-weight: 600; color: var(--ink);
                text-align: right; white-space: nowrap; }
table.heat td.none { background: transparent; color: var(--muted); font-weight: 400; }
table.heat td small { display: block; margin-top: 2px; font-size: var(--fs-label); font-weight: 500;
                       color: var(--text); opacity: 0.85; }
table.heat tbody th small { display: block; margin-top: 2px; font-size: var(--fs-label); font-weight: 400;
                            color: var(--muted); }

/* ---------------------------------------------------------------- the samples (revision 4, 2026-10-29) */
/* work with us: three sample environments to download, each a card with its facts and its download; then the commands */
.samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 48px); margin-top: 32px; }
.sample { display: flex; flex-direction: column; padding-top: 20px; border-top: 1px solid var(--accent); }
.sample h3 { font-size: 1.125rem; font-weight: 650; line-height: 1.3; color: var(--ink); }
.sample > p { margin-top: 8px; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }
.sample dl { margin: 18px 0 22px; border-top: 1px solid var(--line-soft); }
.sample dl > div { padding: 10px 0 11px; border-bottom: 1px solid var(--line-soft); }
.sample dt { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep); }
.sample dd { margin: 5px 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--text); }
.sample dd a { color: var(--deep); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(143, 203, 230, 0.4); }
.sample .btn { margin-top: auto; align-self: flex-start; }
.run { margin-top: 48px; max-width: 52rem; }
.run h3 { font-size: 1.0625rem; font-weight: 650; color: var(--ink); }
.run pre { margin: 12px 0 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px;
           background: #131a21; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.75; color: var(--ink); }
.run pre code { padding: 0; border-radius: 0; background: none; font-family: inherit; font-size: inherit; white-space: pre; }
.run .note { margin-top: 12px; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.run pre + .note { margin-top: 16px; }
/* the datasheet's download, under its capability tags */
.dhead .btns { margin-top: 24px; }
.dhead .dl-note { margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 980px) { .samples { grid-template-columns: minmax(0, 1fr); max-width: 40rem; } }
/* the catalogue's caveat under an environment's name: a known weakness, linked to Methods' limitations */
table.cat td:first-child small.cav { margin-top: 6px; color: var(--text); }
table.cat td:first-child small.cav a { color: var(--deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(143, 203, 230, 0.4); }

/* ---------------------------------------------------------------- the sample request (revision 5, 2026-10-29) */
/* a lab asks for the samples with its work email; the cards' buttons tick their sample in the form */
.sample .size { margin-top: auto; font-size: var(--fs-label); color: var(--muted); }
.samples + .after-cards { margin-top: 28px; }
.reqform { display: grid; gap: 18px; max-width: 44rem; margin-top: 32px; }
.reqform[hidden], .req .done[hidden] { display: none; }   /* sent: the form gives way to the thanks */
.reqform .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.reqform .field { display: grid; gap: 7px; }
.reqform .field > span { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.reqform .field i { font-style: normal; font-weight: 400; color: var(--muted); }
.reqform input[type=text], .reqform input[type=email], .reqform textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: #131a21;
  font: inherit; font-size: var(--fs-ui); color: var(--ink); }
.reqform textarea { resize: vertical; min-height: 5.5rem; }
.reqform input:focus, .reqform textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.reqform input::placeholder { color: var(--muted); opacity: 0.8; }
.reqform fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.reqform legend { margin-bottom: 8px; padding: 0; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.reqform .check { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px;
                  font-size: var(--fs-ui); color: var(--text); cursor: pointer; }
.reqform .check:has(input:checked) { border-color: var(--accent); background: rgba(57, 135, 229, 0.08); color: var(--ink); }
.reqform .check input { width: 16px; height: 16px; accent-color: var(--accent); }
.reqform .check small { margin-left: auto; font-size: var(--fs-label); color: var(--muted); }
.reqform .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reqform .consent { font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
.reqform .err { padding: 10px 14px; border-left: 2px solid #e5484d; background: rgba(229, 72, 77, 0.08); font-size: var(--fs-small); color: var(--ink); }
.reqform button { justify-self: start; }
.reqform button:disabled { opacity: 0.6; cursor: progress; }
.req .done { max-width: 44rem; margin-top: 32px; padding: 18px 20px; border: 1px solid var(--accent); border-radius: 8px;
             font-size: var(--fs-ui); color: var(--ink); }
@media (max-width: 620px) { .reqform .row2 { grid-template-columns: minmax(0, 1fr); } }
.req .done .diag { display: block; margin-top: 10px; font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); }
.req .done .dl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.req .done > p { color: var(--ink); font-size: var(--fs-ui); }