/* ============================================================
   SimVLA — layout variant A ("CHORD" style)
   Dark cinematic hero, fixed nav, alternating light sections.
   ============================================================ */

:root {
  --surface-page:   #ffffff;
  --surface-subtle: #f5f7f9;
  --surface-deep:   #06090d;

  --text-primary:   #0b0f14;
  --text-secondary: #3c4653;
  --text-tertiary:  #6e7986;

  --border-subtle:  #e4e8ed;
  --border-strong:  #ccd3db;

  --accent:         #1f6feb;
  --accent-dark:    #1657c4;
  --accent-soft:    #eaf1fe;
  --accent-ink:     #ffffff;

  --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --nav-h: 62px;
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
::selection { background: rgba(31, 111, 235, .22); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

/* ---------- shared layout ---------- */

.shell { width: min(100%, var(--maxw)); margin: 0 auto; }
.shell-narrow { width: min(100%, 860px); margin: 0 auto; }
/* the two training stages sit side by side; they need ~1300px for stage 1's
   objective chips to stay on one line */
.shell-wide { width: min(100%, 1340px); margin: 0 auto; }

section.band {
  scroll-margin-top: calc(var(--nav-h) + 16px);
  padding: 92px clamp(20px, 5vw, 40px);
  background: var(--surface-page);
}
section.band.subtle {
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.band-head { text-align: center; margin-bottom: 40px; }
.band-head.left { text-align: left; }

h2.band-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  /* matched to .oc-line so every section heading and the overview line agree */
  font-size: clamp(1.7rem, 3.9vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h3.sub-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.kicker {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.band-lead {
  max-width: 880px;
  margin: 14px auto 0;
  font-size: 1.15rem;
  line-height: 1.6;
  font-weight: 450;
  color: var(--text-secondary);
  text-wrap: balance;
}
.band-head.left .band-lead { margin-left: 0; }

.body-copy { color: var(--text-secondary); font-size: 1.02rem; }
.body-copy strong { color: var(--text-primary); font-weight: 650; }

.figcap {
  margin: 12px 0 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text-tertiary);
  text-align: center;
}
.figcap b { color: var(--text-secondary); font-weight: 600; }

/* ---------- fixed nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
  border-bottom: 1px solid transparent;
}
.nav-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
  padding: 0 clamp(18px, 4vw, 40px);
}
.nav[data-solid="1"] {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border-subtle);
  box-shadow: 0 1px 12px rgba(11, 15, 20, .06);
}

.nav-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -.01em;
  color: #fff;
  transition: color .28s ease;
}
.nav[data-solid="1"] .nav-brand { color: var(--text-primary); }

.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav-links a {
  position: relative;
  font-size: .93rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  padding: 4px 1px;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav[data-solid="1"] .nav-links a { color: var(--text-secondary); }
.nav-links a:hover { color: #fff; }
.nav[data-solid="1"] .nav-links a:hover { color: var(--text-primary); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-links a.is-active { color: #fff; }
.nav[data-solid="1"] .nav-links a.is-active { color: var(--accent); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: .88rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.nav-cta:hover { background: var(--accent-dark); color: var(--accent-ink); }

@media (max-width: 980px) { .nav-links { display: none; } }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-deep);
}
.hero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 62% 46% at 50% 46%, rgba(6, 9, 13, .62) 0%, rgba(6, 9, 13, 0) 100%),
    linear-gradient(180deg,
      rgba(6, 9, 13, .70) 0%,
      rgba(6, 9, 13, .34) 38%,
      rgba(6, 9, 13, .82) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--maxw));
  margin: 0 auto;
  padding: 104px clamp(20px, 5vw, 40px) 76px;
  text-align: center;
}

/* ---- cinematic open: the clip plays alone, then the content arrives ----
   `.hero-hold` is set by an inline script before first paint, so nothing
   flashes in and out; without JS neither class exists and all is visible. */
.hero-hold .hero-inner > *,
.hero-hold .hero-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.16, 1, .3, 1);
}
.hero-open .hero-inner > *,
.hero-open .hero-scroll { opacity: 1; transform: none; }

/* the scroll cue is centred with translateX(-50%), so its hold/open transforms
   have to carry that through or it drifts off-centre */
.hero-hold .hero-scroll { transform: translate(-50%, 18px); }
.hero-open .hero-scroll { transform: translateX(-50%); }

/* staggered so the wordmark lands first and the rest follows it in */
.hero-open .hero-mark    { transition-delay: 0s; }
.hero-open .hero-title   { transition-delay: .16s; }
.hero-open .hero-authors { transition-delay: .28s; }
.hero-open .hero-affil   { transition-delay: .36s; }
.hero-open .hero-venue   { transition-delay: .44s; }
.hero-open .hero-buttons { transition-delay: .54s; }
.hero-open .hero-scroll  { transition-delay: .70s; }

/* the scrim starts light so the footage reads, then deepens under the text */
.hero-hold .hero-scrim { opacity: .4; transition: opacity 1.1s ease; }
.hero-open .hero-scrim { opacity: 1; }

/* while held, the first scroll gesture spends itself on the reveal instead of
   moving the page; the lock is dropped once the title has landed */
.hero-lock, .hero-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hero-hold .hero-inner > *,
  .hero-hold .hero-scroll { opacity: 1; transform: none; transition: none; }
  .hero-hold .hero-scrim { opacity: 1; transition: none; }
}

.hero-mark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 9.5vw, 7rem);
  line-height: .92;
  letter-spacing: -0.035em;
  color: #fff;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
/* "Sim" carries the accent the rest of the page runs on; a lighter tint than
   --accent, which goes muddy against the footage at this size */
.hero-mark i { font-style: normal; color: #7fb0ff; }
/* the task domain picks up the green the QA answers use, so the two colours on
   the hero are the two the page already speaks in */
.hero-title i { font-style: normal; color: #6fd6a0; }
.hero-title {
  margin: 18px auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.45vw, 1.95rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
  white-space: nowrap; /* one line — released below, where it no longer fits */
}
@media (max-width: 700px) {
  .hero-title { white-space: normal; max-width: 30ch; }
}
.hero-authors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 22px;
  margin-top: 22px;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.hero-authors a { color: inherit; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.hero-authors a:hover { color: #fff; border-bottom-color: #fff; }
.hero-affil {
  margin: 6px 0 0;
  font-size: .96rem;
  color: rgba(255, 255, 255, .74);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.hero-venue {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .82);
  backdrop-filter: blur(4px);
}
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.hbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  backdrop-filter: blur(4px);
  transition: background .18s ease, border-color .18s ease;
}
.hbtn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.hbtn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.hbtn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-ink); }
.hbtn svg { flex: none; }

.hero-scroll {
  position: absolute;
  left: 50%; bottom: 28px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .72);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}
.hero-scroll:hover { color: #fff; }
.hero-scroll svg { animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ---------- project-video toggle ---------- */

#project-video {
  padding: 48px clamp(20px, 5vw, 40px) 0;
  background: var(--surface-page);
  text-align: center;
}
.video-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--text-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .93rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.video-toggle:hover { background: var(--accent); transform: translateY(-1px); }
.video-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.video-toggle svg { flex: none; }

.video-panel[hidden] { display: none; }
.video-panel {
  max-width: 900px;
  margin: 20px auto 0;
}
.video-panel video {
  width: 100%;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: #000;
}

/* ---------- overview claim ---------- */

/* no container — a statement, a ledger of zeros, and the payoff, split by rules */
.oc { max-width: 1080px; margin: 0 auto; text-align: center; }
.oc-line {
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.028em;
  color: var(--text-primary);
  /* One sentence, one line — but only while it fits. At 2.85rem the line ran
     134px past its centred box at every width above 860, which reads as text
     that starts at the left edge and falls off the right. 2.5rem is the
     largest size the sentence fits the shell at; the vw term keeps it fitting
     as the shell narrows, until 860 releases the wrap. */
  white-space: nowrap;
  font-size: min(2.5rem, 3.4vw);
}
.oc-line em { font-style: normal; color: var(--accent); }
@media (max-width: 860px) {
  .oc-line { white-space: normal; max-width: 24ch; }
}
.oc-sub {
  margin: 18px auto 0;
  max-width: 60ch;
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
/* two light touches only — the headline and the zeros already carry the colour */
.oc-sub b { color: var(--text-primary); font-weight: 650; }
.oc-sub em { font-style: italic; color: var(--text-primary); }

.oc-zeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.oc-zeros > div { padding: 22px 16px 20px; border-right: 1px solid var(--border-subtle); }
.oc-zeros > div:last-child { border-right: 0; }
.oc-zeros .n {
  font-family: var(--font-display);
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
  /* the count-down runs through 4-, 3- and 1-digit values; equal-width
     figures stop the whole cell twitching as it falls */
  font-variant-numeric: tabular-nums;
}
.oc-zeros .l { margin-top: 7px; font-size: .9rem; line-height: 1.4; color: var(--text-secondary); }
@media (max-width: 680px) {
  .oc-zeros { grid-template-columns: 1fr; }
  .oc-zeros > div { border-right: 0; border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; }
  .oc-zeros > div:last-child { border-bottom: 0; }
}


/* ---------- stat strip ---------- */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 38px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}
.stat-cell { background: var(--surface-page); padding: 22px 20px; text-align: center; }
section.band.subtle .stat-cell { background: #fff; }
.stat-cell .num {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}
.stat-cell .num em { font-style: normal; color: var(--accent); }
.stat-cell .lab {
  margin-top: 6px;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--text-tertiary);
}
@media (max-width: 760px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- figures ---------- */

.figure-block { margin: 0; }
.figure-block img {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: #fff;
}
.figure-block.bare img { border: none; border-radius: 12px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
}
.split.wide-left { grid-template-columns: 1.25fr 1fr; }
.split.wide-right { grid-template-columns: 1fr 1.25fr; }
@media (max-width: 900px) {
  .split, .split.wide-left, .split.wide-right { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- media grids ---------- */

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.media-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .media-grid, .media-grid.two { grid-template-columns: 1fr; } }

.media-tile {
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}
section.band.subtle .media-tile { background: #fff; }
.media-tile video, .media-tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0f14; }
/* tiles whose image is a grid/diagram and must not be cropped */
.media-tile.natural img { aspect-ratio: auto; height: auto; object-fit: contain; background: #fff; }
.media-tile .cap {
  padding: 12px 14px 14px;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.media-tile .cap b { display: block; color: var(--text-primary); font-weight: 650; margin-bottom: 2px; }

/* ---------- task feature player (Data & Scale) ---------- */

.tp { display: grid; grid-template-columns: 1.65fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 880px) { .tp { grid-template-columns: 1fr; } }

.tp-stage {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border-subtle);
}
.tp-stage video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

.tp-cap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 13px;
}
.tp-name {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 650;
  letter-spacing: -.018em;
  color: var(--text-primary);
}
.tp-right { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.tp-skills { display: none; }
.tp-skills span {
  font-family: var(--font-mono);
  font-size: .58rem;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
}
.tp-nav { display: flex; gap: 6px; }
.tp-btn {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: #fff;
  color: var(--text-secondary);
  cursor: pointer;
}
.tp-btn:hover { border-color: var(--accent); color: var(--accent); }
.tp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tp-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
}
@media (max-width: 880px) { .tp-rail { max-height: 240px; } }

.tp-th {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  background: #0b0f14;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  padding: 0;
  transition: border-color .14s, box-shadow .14s;
}
.tp-th img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; opacity: .72; transition: opacity .16s; }
.tp-th:hover img { opacity: 1; }
.tp-th .n {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 7px 5px;
  font-family: var(--font-mono);
  font-size: .55rem;
  line-height: 1.3;
  color: #fff;
  text-align: left;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.82));
}
.tp-th.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.tp-th.is-on img { opacity: 1; }
.tp-th:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- task tabs ---------- */

.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  margin: 0 auto 26px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
}
section.band.subtle .tabbar { background: #fff; }
.tabbtn {
  appearance: none;
  border: 1.5px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: .93rem;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: .15s;
}
.tabbtn:hover { color: var(--text-primary); }
.tabbtn.is-active {
  background: #fff;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 7px rgba(11, 15, 20, .1);
}
.tabpanel[hidden] { display: none; }

/* ---------- table ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: .93rem;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}
table.data th, table.data td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
table.data th {
  background: var(--surface-subtle);
  font-weight: 650;
  font-size: .85rem;
  letter-spacing: .02em;
  color: var(--text-primary);
  white-space: nowrap;
}
table.data td:first-child, table.data th:first-child { text-align: left; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tr.ours { background: var(--accent-soft); font-weight: 650; color: var(--text-primary); }
.mark-yes { color: #1a7f5a; font-weight: 700; }
.mark-no  { color: #b4262a; font-weight: 700; }
.mark-part{ color: #b07c1a; font-weight: 700; }

/* ---------- callout ---------- */

.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.callout b { color: var(--text-primary); }

.qa-list { display: grid; gap: 14px; margin-top: 26px; }
.qa {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: #fff;
  padding: 20px 24px;
}
.qa h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 650;
  color: var(--text-primary);
}
.qa .verdict {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.qa p { margin: 8px 0 0; font-size: .97rem; line-height: 1.62; color: var(--text-secondary); }

/* ============================================================
   Interactive two-stage training diagram
   Hovering a part keeps it lit and greys the rest; a cursor-
   following tooltip carries the description.
   ============================================================ */

/* both stages sit side by side; they stack again once a column gets too narrow
   for the diagram's input row */
.stages-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.stage { max-width: 860px; margin: 30px auto 0; }
.stages-row .stage { max-width: none; margin: 26px 0 0; }
@media (max-width: 1380px) {
  .stages-row { grid-template-columns: 1fr; gap: 0; }
  .stages-row .stage + .stage { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--border-subtle); }
}

.stage-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; }
.stage-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.stage-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--text-primary);
}
.stage-head .stage-sub { margin: 0; font-family: var(--font-mono); font-size: .85rem; color: var(--text-tertiary); }
.stage-body { margin: 14px 0 0; font-size: .97rem; line-height: 1.6; color: var(--text-secondary); }
.stage-body strong { color: var(--text-primary); font-weight: 650; }

/* --- the diagram shell --- */
.stagefig {
  position: relative;
  margin-top: 16px;
  padding: 18px clamp(12px, 1.8vw, 22px) 16px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11, 15, 20, .03), 0 10px 30px -18px rgba(11, 15, 20, .18);
  overflow: hidden;
}
section.band.subtle .stagefig { background: #fff; }

.spart {
  appearance: none;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: inherit;
  cursor: help;
  border-radius: 10px;
  transition: opacity .22s ease, filter .22s ease, transform .18s ease;
}
.spart:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* dim everything that is not the hovered concept */
.stagefig[data-probing="1"] .spart:not(.is-on) { opacity: .3; filter: grayscale(1); }
.stagefig[data-probing="1"] .spart.is-on { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .spart { transition: none; }
  .stagefig[data-probing="1"] .spart.is-on { transform: none; }
}

/* --- gradient-flow banner --- */
/* the gradient marker is pinned to the panel corner so the objective chips get
   the full width — otherwise a narrow column wraps them onto two lines and the
   two stages stop lining up */
.sf-flowrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding-right: 150px;
  min-height: 30px;
}
.sf-grad {
  position: absolute;
  top: 14px;
  right: clamp(12px, 1.8vw, 22px);
}
.sf-objectives { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sf-objlabel {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-right: 2px;
}
.sf-obj {
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: help;
}
.sf-obj:hover, .sf-obj.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ============================================================
   Objective walk-through: hovering an objective chip traces the
   data into the model and animates the gradient coming back.
   ============================================================ */

/* inputs that feed the hovered objective: a dot rises through the projector
   trapezoid and up into the block — the beam runs 62px so the travel reads */
.sf-in { position: relative; }
.sf-in.is-feeding::before {
  content: "";
  position: absolute;
  left: 50%; top: -34px;
  width: 3px; height: 62px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(to top, var(--c), rgba(0, 0, 0, 0));
  opacity: .45;
}
.sf-in.is-feeding::after {
  content: "";
  position: absolute;
  left: 50%; top: -34px;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 11px 3px var(--c);
  animation: sfRise 1.5s ease-in-out infinite;
}
@keyframes sfRise {
  0%   { transform: translateY(62px) scale(.7); opacity: 0; }
  18%  { transform: translateY(51px) scale(1);  opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(0) scale(.7);    opacity: 0; }
}

/* the block that objective actually trains */
.sf-block.is-target {
  border-color: var(--accent);
  animation: sfTarget 1.5s ease-in-out infinite;
}
@keyframes sfTarget {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 111, 235, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(31, 111, 235, .2); }
}

/* gradient travelling back along the arrow */
.stagefig[data-grad] .sf-gpulse { opacity: 1; filter: drop-shadow(0 0 4px #1f6feb); }
.stagefig[data-grad="through"] .sf-gpulse { animation: sfGradThrough 1.8s linear infinite; }
.stagefig[data-grad="stopped"] .sf-gpulse { animation: sfGradStop 1.8s ease-out infinite; }
@keyframes sfGradThrough {
  0%   { transform: translateX(70px) scale(.6); opacity: 0; }
  14%  { transform: translateX(62px) scale(1);  opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateX(8px) scale(.6);  opacity: 0; }
}
/* ...and slamming into the stop-gradient marker instead of passing it */
@keyframes sfGradStop {
  0%   { transform: translateX(70px) scale(.6); opacity: 0; }
  16%  { transform: translateX(64px) scale(1);  opacity: 1; }
  58%  { transform: translateX(53px) scale(1);  opacity: 1; }
  70%  { transform: translateX(58px) scale(1.3); opacity: 1; }
  84%  { transform: translateX(58px) scale(.9); opacity: .5; }
  100% { transform: translateX(58px) scale(.7); opacity: 0; }
}
.stagefig[data-grad="stopped"] .sf-slash { animation: sfSlash 1.8s ease-out infinite; }
@keyframes sfSlash {
  0%, 52%  { stroke-width: 3.4; }
  68%      { stroke-width: 6.4; }
  100%     { stroke-width: 3.4; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-in.is-feeding::after,
  .sf-block.is-target,
  .stagefig[data-grad] .sf-gpulse,
  .stagefig[data-grad="stopped"] .sf-slash { animation: none; }
  .stagefig[data-grad="stopped"] .sf-gpulse { transform: translateX(57px); }
  .stagefig[data-grad="through"] .sf-gpulse { transform: translateX(8px); }
}
.sf-grad { display: inline-flex; align-items: center; gap: 8px; }
.sf-grad .sf-gradlabel {
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.25;
  color: var(--text-secondary);
  text-align: left;
}
.sf-grad svg { flex: none; width: 96px; height: 38px; }

/* --- backbone row --- */
.sf-backbone { display: flex; align-items: stretch; gap: 8px; }
.sf-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
  padding: 8px;
  border: 1.5px solid #2b3340;
  border-radius: 12px;
  min-height: 86px;
}
.sf-vlm { flex: 1 1 auto; }
.sf-expert { flex: 0 0 clamp(78px, 11%, 100px); }
.sf-full { flex: 1 1 auto; }

/* token strips run the full width of their block — no centred island */
.sf-tokens { display: flex; gap: 4px; }
.sf-tokens i {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: 16px;
  border-radius: 3px;
  border: 1.1px solid #4a5565;
}
.sf-tok-vlm i { background: #b6e3f5; }
.sf-tok-act i { background: #b3ecbd; }

.sf-blocklabel {
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(.82rem, 1.15vw, 1rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.28;
}
.sf-blocklabel small {
  display: block;
  margin-top: 2px;
  font-size: .74em;
  font-weight: 400;
  color: var(--text-tertiary);
}

/* --- input row --- */
/* the input row is laid out against the same columns as the backbone, so the
   tokenized-action feed rises into the VLM rather than into the action expert */
.sf-underrow { display: flex; align-items: flex-start; gap: 8px; }
.sf-underrow .sf-inputs { flex: 1 1 auto; min-width: 0; }
.sf-underspacer { flex: 0 0 clamp(78px, 11%, 100px); }

.sf-inputs {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: clamp(6px, 1vw, 14px);
  margin-top: 26px;
}
.sf-in { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; }

.sf-traps { display: flex; gap: 4px; justify-content: center; }
.sf-trap {
  display: block;
  width: clamp(26px, 3.2vw, 42px);
  height: 21px;
  background: var(--f);
  border-bottom: 1.6px solid var(--c);
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
  position: relative;
}
.sf-trap::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1.6px var(--c);
}

.sf-glyphs { display: flex; gap: 4px; align-items: flex-end; justify-content: center; }
.sf-glyphs img {
  height: 29px;
  width: auto;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}
/* the axis icon is a bare glyph, not a thumbnail — no frame, and it sits inside
   the tinted chip the other inputs use */
.sf-glyph .sf-axis { height: 21px; border: 0; border-radius: 0; display: block; }
.sf-glyph {
  display: grid;
  place-items: center;
  height: 29px;
  min-width: 29px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--f);
  border: 1.4px solid var(--c);
  color: #2b3340;
}
.sf-glyph.mono {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  white-space: nowrap;
}

.sf-cap {
  font-family: var(--font-mono);
  font-size: clamp(.58rem, .78vw, .7rem);
  line-height: 1.3;
  color: var(--text-secondary);
  text-align: center;
  max-width: 15ch;
}
.sf-cap small { display: block; color: var(--text-tertiary); }

/* --- data bar --- */
.sf-data {
  display: block;
  width: 100%;
  margin-top: 13px;
  padding: 7px 14px;
  border: 1.5px solid #2b3340;
  border-radius: 9px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* --- "try me" hint --- */
.sf-hint {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 3px 10px 3px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(11, 15, 20, .1);
  box-shadow: 0 1px 1px rgba(11, 15, 20, .04), 0 10px 22px -12px rgba(11, 15, 20, .4);
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, 116%);
  transition: opacity .3s ease, transform .3s ease;
  animation: sfHop 1.9s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.sf-hint::before {
  content: "";
  position: absolute;
  left: 50%; top: -11px;
  width: 13px; height: 13px;
  border-radius: 999px;
  border: 2px solid rgba(31, 111, 235, .5);
  transform: translateX(-50%) scale(.55);
  animation: sfPing 1.9s ease-out infinite;
}
.sf-hint__icon {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.sf-hint__icon svg { width: 13px; height: 13px; }
.sf-hint__text {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.sf-hint.gone { opacity: 0; transform: translate(-50%, 108%) scale(.92); animation: none; }
.sf-hint.gone::before { animation: none; }

@keyframes sfHop {
  0%, 62%, 100% { transform: translate(-50%, 116%); }
  76%           { transform: translate(-50%, 132%); }
}
@keyframes sfPing {
  0%   { transform: translateX(-50%) scale(.55); opacity: .9; }
  70%  { transform: translateX(-50%) scale(1.75); opacity: 0; }
  100% { transform: translateX(-50%) scale(1.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-hint, .sf-hint::before { animation: none; }
}

/* --- cursor-following tooltip --- */
.sf-tip {
  position: fixed;
  z-index: 95;
  left: 0; top: 0;
  pointer-events: none;
  opacity: 0;
  width: max-content;
  max-width: min(300px, calc(100vw - 20px));
  padding: 11px 14px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(11, 15, 20, .06);
  box-shadow: 0 1px 1px rgba(11, 15, 20, .04), 0 8px 16px -6px rgba(11, 15, 20, .16), 0 24px 40px -16px rgba(11, 15, 20, .22);
  transition: opacity .16s ease;
  will-change: transform;
}
.sf-tip .t {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.sf-tip .d { font-size: .8rem; line-height: 1.52; color: var(--text-primary); font-weight: 420; }

/* wider when it has to carry an equation */
.sf-tip.has-eq { max-width: min(480px, calc(100vw - 20px)); padding: 13px 17px 14px; }
.sf-tip .eq {
  margin: 2px 0 0;
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--surface-subtle);
  overflow-x: auto;
}
.sf-tip .eq .katex { font-size: .95rem; color: var(--text-primary); }
.sf-tip .eq .katex-display { margin: 0; }
.sf-tip .eqnote {
  margin: 7px 0 0;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.sf-tip .eqnote .katex { font-size: .8rem; color: var(--text-secondary); }
.sf-tip.has-eq .d { margin-top: 10px; }

/* --- narrow screens: let the diagram scroll rather than crush --- */
@media (max-width: 720px) {
  .stagefig { padding-left: 0; padding-right: 0; }
  .sf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 16px; }
  .sf-scroll > * { min-width: 540px; }
  /* hint that the diagram continues past the right edge */
  .stagefig::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 34px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }
}

/* ============================================================
   Experiments — sticky question index beside expanded answers
   ============================================================ */

/* the question index lives in the nav's second row; here the questions hang off a
   spine that fills as you read, and each node completes into a tick or a cross */
.qb {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 58px;
}
.qb::before,
.qb::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  width: 2px;
}
.qb::before { bottom: 12px; background: var(--border-subtle); }
.qb::after  { height: var(--fill, 0px); background: var(--accent); }

.qb-node {
  position: absolute;
  left: -58px;
  top: 26px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--border-strong);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  z-index: 1;
  transition: background .28s ease, border-color .28s ease, color .28s ease;
}
.qb-item:first-child .qb-node { top: 0; }
.qb-node .num,
.qb-node .tick { grid-area: 1 / 1; transition: opacity .22s ease; }
.qb-node .tick { font-size: .88rem; opacity: 0; }

/* verdict colour per question */
.qb-item.c-yes     { --vc: #1a7f5a; }
.qb-item.c-partly  { --vc: #b0741a; }
.qb-item.c-no      { --vc: #c2352f; }
.qb-item.c-pending { --vc: #9aa3ae; }

/* passed: the node completes */
.qb-item.is-read .qb-node {
  background: var(--vc);
  border-color: var(--vc);
  color: #fff;
}
.qb-item.is-read .qb-node .num  { opacity: 0; }
.qb-item.is-read .qb-node .tick { opacity: 1; }
.qb-item.c-pending.is-read .qb-node { background: #fff; color: var(--vc); border-style: dashed; }

/* the question being read sits forward; the rest step back a little.
   0.62 rather than a hard dim, so every question stays readable to a skimmer. */
.qb-item { transition: opacity .35s ease; }
.qb.is-tracking .qb-item { opacity: .62; }
.qb.is-tracking .qb-item.is-current,
.qb.is-tracking .qb-item:hover,
.qb.is-tracking .qb-item:focus-within { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .qb.is-tracking .qb-item { opacity: 1; }
  .qb-item, .qb-node, .qb-node .num, .qb-node .tick { transition: none; }
}
@media (max-width: 640px) {
  .qb { padding-left: 44px; }
  .qb-node { left: -44px; width: 30px; height: 30px; }
  .qb::before, .qb::after { left: 14px; }
}

.qnum {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-tertiary);
}

.qb-item {
  position: relative;              /* anchors this question's spine node */
  padding: 30px 0;
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: calc(var(--nav-h) + 58px);
}
.qb-item:first-child { padding-top: 4px; }
.qb-item:last-child { border-bottom: 0; }

.qb-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.qb-top .qnum { font-size: .78rem; }
.qb-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 650;
  letter-spacing: -.018em;
  color: var(--text-primary);
}

.verdict {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.verdict.yes     { color: #1a7f5a; }
.verdict.partly  { color: #b0741a; }
.verdict.no      { color: #c2352f; }
.verdict.pending { color: var(--text-tertiary); border-style: dashed; }

.qb-answer {
  margin: 0;
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.qb-answer b { color: var(--text-primary); font-weight: 650; }

.qb-ev {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 18px;
}
/* a live chart in the 1.3fr column renders at half scale, which puts its
   labels at 6px — where the figure IS the evidence, give it the full width
   and let the numbers sit underneath */
.qb-ev.is-wide { grid-template-columns: 1fr; gap: 18px; }
.qb-ev.is-wide > div { display: grid; grid-template-columns: 230px 1fr; gap: 6px 28px; align-items: start; }
.qb-ev.is-wide .qb-metric   { grid-column: 1; grid-row: 1; }
.qb-ev.is-wide .qb-metric-l { grid-column: 1; grid-row: 2; }
.qb-ev.is-wide .qb-prose    { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
@media (max-width: 760px) {
  .qb-ev.is-wide > div { grid-template-columns: 1fr; }
  .qb-ev.is-wide .qb-metric, .qb-ev.is-wide .qb-metric-l, .qb-ev.is-wide .qb-prose {
    grid-column: 1; grid-row: auto;
  }
}
@media (max-width: 720px) { .qb-ev { grid-template-columns: 1fr; } }

.qb-fig { margin: 0; }
.qb-fig img { width: 100%; display: block; border: 1px solid var(--border-subtle); border-radius: 10px; background: #fff; }
.qcap { margin: 9px 0 0; font-size: .8rem; line-height: 1.5; color: var(--text-tertiary); }

.qb-metric {
  font-family: var(--font-display);
  font-size: 1.95rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--accent);
}
.qb-metric-l { font-family: var(--font-mono); font-size: .66rem; line-height: 1.5; color: var(--text-tertiary); margin-top: 5px; }
.qb-prose { margin: 14px 0 0; font-size: .93rem; line-height: 1.62; color: var(--text-secondary); }
.qb-prose b { color: var(--text-primary); font-weight: 650; }

/* a question whose evidence has not landed yet */
.qb-placeholder {
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 20px 22px;
  background: var(--surface-subtle);
}
.qb-placeholder-k {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.qb-placeholder p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--text-secondary); }

/* ---------- bibtex ---------- */

.bibtex-wrap { position: relative; }
.bibtex-wrap pre {
  margin: 0;
  padding: 22px 24px;
  background: var(--surface-deep);
  color: #d7e2ee;
  border-radius: 12px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .84rem;
  line-height: 1.65;
}
.copy-btn {
  position: absolute;
  top: 12px; right: 12px;
  padding: 6px 13px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .76rem;
  cursor: pointer;
}
.copy-btn:hover { background: rgba(255, 255, 255, .2); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--surface-deep);
  color: rgba(255, 255, 255, .62);
  padding: 54px clamp(20px, 5vw, 40px);
  text-align: center;
  font-size: .9rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}
.footer-links a {
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
}
.footer-links a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.site-footer a.inline { color: #8ab4f8; }

/* ---------- reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero-scroll svg { animation: none; }
}

/* ---------- variant switcher ---------- */

.variant-bar {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 70;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(11, 15, 20, .14);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: .74rem;
}
.variant-bar a {
  padding: 6px 13px;
  border-radius: 999px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.variant-bar a.is-current { background: var(--accent); color: #fff; }
.variant-bar a:hover:not(.is-current) { background: var(--surface-subtle); color: var(--text-primary); }

/* ---------- method: data-generation stage ---------- */

.gen-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 720px) { .gen-pair { grid-template-columns: 1fr; } }
.gen-card {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 16px 18px;
  background: #fff;
}
.gen-k {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.gen-card h4 {
  margin: 7px 0 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--text-primary);
}
.gen-card p { margin: 0; font-size: .92rem; line-height: 1.58; color: var(--text-secondary); }

.gen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .gen-grid { grid-template-columns: 1fr; } }
.gen-out {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px 20px;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gen-out:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(11, 15, 20, .08); }
.gen-n {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-tertiary);
}
.gen-out h4 {
  margin: 8px 0 8px;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--text-primary);
}
.gen-out p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--text-secondary); }

/* ---------- data & scale: one task across 100 houses ---------- */

.hs-fig { margin: 0; }
.hs-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-subtle); background: #000; }
.hs-wrap video { width: 100%; display: block; }
.hs-full {
  position: absolute;
  right: 10px; bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.hs-full:hover { background: rgba(0, 0, 0, .78); }
.hs-full:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- zero-shot deployments: coverflow ---------- */
.cf { margin-top: 4px; }
.cf-head { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: 14px; }
.cf-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text-primary);
}
.cf-now {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cf-now span { color: var(--text-tertiary); }
/* under the centre clip, not off in the header — the controls belong to the
   thing they move */
.cf-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.cf-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: #fff;
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .15s, color .15s;
}
.cf-btn:hover { border-color: var(--accent); color: var(--accent); }
.cf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the stage positions each card by its ring distance from the current one, so
   there is always a neighbour peeking on both sides — no empty edge at the ends */
.cf-vp { overflow: hidden; }
.cf-stage { position: relative; height: 0; padding-bottom: 32.6%; }
@media (max-width: 860px) { .cf-stage { padding-bottom: 44%; } }

.cf-card {
  position: absolute;
  top: 0; left: 50%;
  width: 56%;
  margin-left: -28%;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0f14;
  border: 1px solid var(--border-subtle);
  transition: transform .44s cubic-bezier(.22,.7,.3,1), opacity .34s;
  will-change: transform;
}
@media (max-width: 860px) { .cf-card { width: 78%; margin-left: -39%; } }
.cf-card video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.cf-card.is-side { cursor: pointer; }
.cf-card.is-far { opacity: 0; pointer-events: none; }

.cf-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: 10px;
  padding: 26px 12px 9px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .03em;
  background: linear-gradient(transparent, rgba(6, 9, 13, .86));
  opacity: 0;
  transition: opacity .3s;
}
.cf-card.is-on .cf-cap { opacity: 1; }
.cf-cap i { font-style: normal; opacity: .66; }


/* ---------- experiments: Q2 SimVQA deep dive ---------- */
.q2-deep { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border-subtle); }
.q2-kick {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.q2-main { margin: 16px 0 0; }
.q2-main video {
  width: 100%;
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: #000;
}
.q2-tbl { margin-top: 22px; }
table.data td.grp {
  vertical-align: middle;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--text-secondary);
  border-right: 1px solid var(--border-subtle);
  background: #fff;
}

.q2-subs { display: grid; gap: 26px; margin-top: 26px; }
.q2-first { margin-top: 18px; }
.q2-glab {
  margin: 0 0 9px;
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.q2-glab span { color: var(--text-tertiary); letter-spacing: .05em; }
.q2-row { display: grid; gap: 9px; }
.q2-row.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Q5: one shared plot, two questions read off it */

/* The spine keeps questions in a 900px reading column, which is right for prose
   and too narrow for a row of clips. The deep dive is evidence, so let it out to
   the full shell — only where there is room for it. */
@media (min-width: 1280px) {
  /* right into the shell's slack, but only just past the spine rule on the left
     (it sits at .qb + 15px) — pulling the full 198px ran the line through the clips */
  .q2-deep { margin-left: -24px; margin-right: -140px; }
}

/* stacked: figure, then the probe episodes in one row, then the table with its
   explanation alongside rather than underneath */
.q2-row.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.q2-tbl { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.q2-say { padding-top: 2px; }
.q2-qcap { margin: 0; font-size: .86rem; }
@media (max-width: 900px) {
  .q2-tbl { grid-template-columns: 1fr; }
  .q2-row.is-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* four narrow columns -- the 720px floor meant for the wide results tables
   forces a scrollbar here and cuts off #Dist */
.q2-tbl table.data { min-width: 400px; }
.q2-tbl table.data th, .q2-tbl table.data td { padding: 10px 12px; }
@media (max-width: 900px) { .q2-row.is-wide { grid-template-columns: 1fr; } }
.q2-sv { margin: 0; }
.q2-sv video {
  width: 100%;
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: #000;
  object-fit: cover;
}
.q2-row.is-wide .q2-sv video { aspect-ratio: 16 / 9; }
.q2-row.is-sq   .q2-sv video { aspect-ratio: 4 / 3; }
.q2-svl {
  margin: 5px 0 0;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--text-tertiary);
}

.search-deep {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: 24px;
  align-items: start;
}
.search-copy { padding-top: 4px; }
.search-title { margin: 20px 0 0; font-size: .95rem; color: var(--text-primary); }
.search-note { margin: 16px 0 0; font-size: .82rem; line-height: 1.55; color: var(--text-secondary); }
.search-steps {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}
.search-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 11px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle);
}
.search-steps li:last-child { border-bottom: 1px solid var(--border-subtle); }
.search-steps .n {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-primary);
}
.search-steps b {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-primary);
}
.search-steps p {
  margin: 2px 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.search-video { margin-top: 0; }
@media (max-width: 700px) {
  .search-deep { grid-template-columns: 1fr; }
}


/* ---------- real world ---------- */



/* three small on top, two large beneath — size carries the argument */
.rw-asym { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.rw-asym .rw-sm { grid-column: span 2; }
.rw-asym .rw-lg { grid-column: span 3; }
@media (max-width: 820px) {
  .rw-asym { grid-template-columns: 1fr; }
  .rw-asym .rw-sm, .rw-asym .rw-lg { grid-column: auto; }
}

.rw-v { position: relative; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--border-subtle); }
.rw-v video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.rw-t {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--text-primary);
  margin: 10px 0 3px;
}
.rw-k { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.rw-d { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text-secondary); }



/* ============================================================
   Method roadmap — one rule cut into segments between three stops,
   each segment filling as the reader advances.
   ============================================================ */

.rm { position: relative; padding: 6px 0 0; max-width: 900px; margin: 0 auto; }

/* the rule lives as two segments spanning stop-to-stop, so each
   transition fills independently rather than one bar sliding across */
.rm-segs {
  position: absolute;
  left: 0; right: 0; top: 19px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 16.6%;
}
.rm-segs i {
  height: 2px;
  margin: 0 26px;
  background: var(--border-subtle);
  transition: background .35s cubic-bezier(.16, 1, .3, 1);
}
.rm-segs i.is-done { background: var(--accent); }

.rm-stops { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.rm-st {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.rm-bead {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--border-strong);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.rm-st:hover .rm-bead { border-color: var(--accent); color: var(--accent); }
.rm-st.is-done .rm-bead { border-color: var(--accent); color: var(--accent); }
.rm-st.is-on .rm-bead { background: var(--accent); border-color: var(--accent); color: #fff; }
.rm-st:focus-visible .rm-bead { outline: 2px solid var(--accent); outline-offset: 3px; }

.rm-lb {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text-tertiary);
  text-align: center;
}
.rm-st.is-on .rm-lb { color: var(--text-primary); font-weight: 700; }

/* the stage detail below the rule */
.rm-panel { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--border-subtle); }
.rm-panel .rmk {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}
/* the stage heading block is centred like every band head above it; the stage
   CONTENT below stays left, where columns and tables need it */
.rm-panel h3 {
  margin: 9px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--text-primary);
  text-align: center;
}
.rm-pane > p:first-of-type { text-align: center; margin-left: auto; margin-right: auto; }
.rm-panel p { margin: 0; font-size: 1.1rem; line-height: 1.62; color: var(--text-secondary); max-width: 74ch; }
.rm-panel p b { color: var(--text-primary); font-weight: 650; }
.rm-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; }
@media (max-width: 820px) { .rm-split { grid-template-columns: 1fr; } }
.rm-panel img { width: 100%; display: block; border: 1px solid var(--border-subtle); border-radius: 10px; }

.rm-cond { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.rm-cond span {
  font-family: var(--font-mono);
  font-size: .63rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

.rm-outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
@media (max-width: 820px) { .rm-outs { grid-template-columns: 1fr; } }
.rm-outs .o { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 15px 16px; background: #fff; }
.rm-outs .o .n { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; color: var(--text-tertiary); }
.rm-outs .o h4 {
  margin: 6px 0 6px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--text-primary);
}
.rm-outs .o p { margin: 0; font-size: .85rem; line-height: 1.55; }

@media (max-width: 640px) {
  .rm-lb { font-size: .6rem; }
  .rm-segs { padding: 0 16.6%; }
  .rm-segs i { margin: 0 16px; }
}

/* ============================================================
   METHOD STAGES — the live kitchen sheet, the object library
   and the framed 3D task viewer.
   ============================================================ */

.rm-pane[hidden] { display: none; }
.rm-pane > p { margin-bottom: 22px; }

/* stage 01 — one kitchen on a seed */
.kg-strip {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border-subtle);
}
.kg-tip {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px; border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1);
  border-left: 3px solid var(--accent);
  font-size: .72rem; color: var(--text-secondary); cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 15, 20, .12);
}
.kg-tip b { font-family: var(--font-mono); font-size: .74rem; color: var(--text-primary); }
.kg-tip-x {
  font-family: var(--font-mono); font-size: .68rem; color: var(--accent);
  border: 1px solid rgba(31, 111, 235, .3); border-radius: 4px; padding: 0 5px; line-height: 1.5;
}
.kg-seed { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.kg-seed input[type=range] { flex: 1; accent-color: var(--accent); cursor: pointer; }
.kg-step {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 700;
  padding: 6px 13px; border-radius: 8px; background: #fff;
  border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer;
}
.kg-step:hover { border-color: var(--accent); color: var(--accent); }
.kg-n { font-family: var(--font-mono); font-size: .74rem; color: var(--text-tertiary); }
.kg-n b { color: var(--text-primary); }
.kg-diff { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 26px; }
.kg-diff span {
  font-family: var(--font-mono); font-size: .63rem;
  padding: 4px 9px; border-radius: 6px;
  background: #fff; border: 1px solid var(--border-subtle); color: var(--text-tertiary);
}
.kg-diff span b { color: var(--text-secondary); font-weight: 700; }
.kg-diff span.is-hit { border-color: var(--accent); color: var(--accent); }
.kg-sw {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin: 0 4px -1px 0; border: 1px solid rgba(11, 15, 20, .16);
}
.kg-diff span.is-hit b { color: var(--accent); }
.kg-load {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .62rem; color: var(--text-tertiary);
  pointer-events: none;
}

/* stage 02 — the viewer, framed */
.kg-frame {
  position: relative; width: 100%; height: 660px;
  border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden;
  background: var(--surface-alt);
}
.kg-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.kg-note { margin: 13px 0 0; font-size: .92rem; color: var(--text-tertiary); }
.kg-note b { color: var(--text-secondary); font-family: var(--font-mono); font-size: .78rem; }
.kg-note a { color: var(--accent); text-decoration: none; font-weight: 600; }
.kg-note a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .kg-strip { aspect-ratio: 4 / 3; }
  .kg-frame { height: 560px; }
}

/* ---- stage 03: the ledger ----
   Class names are prefixed dg- on purpose: a generic `.qa` here would collide
   with the FAQ card above, which is exactly how white-on-white happened once. */
.dg-prod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dg-prod > div { border-top: 2px solid var(--text-primary); padding-top: 12px; }
.dg-let { font-family: var(--font-mono); font-size: .64rem; font-weight: 700; color: var(--accent); }
/* .rm-panel h3 (0,1,1) outranks a bare class — without matching it, the three
   product headings inherited the stage heading's size and matched "Data
   Generation" at 31px */
.rm-panel h3.dg-h { margin: 2px 0 0; font-family: var(--font-display); font-size: 1.3rem;
  font-weight: 700; letter-spacing: -.015em; text-align: left; }
.dg-p { margin: 8px 0 0; font-size: .95rem; line-height: 1.55; color: var(--text-secondary); }

/* centred under the clip it belongs to, and each factor's unit centred under
   its number rather than hanging off its baseline */
.dg-mult { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center;
  gap: 7px; margin: 16px 0 0; text-align: center; }
.dg-mult .f { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dg-mult .n {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
}
.dg-mult .u { font-size: .68rem; color: var(--text-tertiary); line-height: 1.22; }
.dg-mult .x { font-family: var(--font-mono); font-size: .8rem; color: var(--border-strong);
  align-self: flex-start; padding-top: 7px; }

.dg-qa { border-left: 2px solid var(--border-strong); padding-left: 11px; margin: 10px 0 0; }
.dg-qa .k { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .11em; text-transform: uppercase; color: var(--text-tertiary); }
.dg-qa .q { font-size: .8rem; color: var(--text-primary); margin-top: 2px; }
.dg-qa .a { font-family: var(--font-mono); font-size: .73rem; color: #1a7f5a; margin-top: 2px; }
.dg-more { font-family: var(--font-mono); font-size: .62rem; color: var(--text-tertiary); margin-top: 10px; }

.dg-envs { margin: 11px 0 0; display: grid; gap: 10px; }
.dg-env-row { display: grid; grid-template-columns: 132px 1fr; gap: 11px; align-items: center; }
.dg-env-row .dg-mv video { aspect-ratio: 4 / 3; object-fit: cover; }
.dg-envs .n { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; }
.dg-envs .c { font-family: var(--font-mono); font-size: .64rem; color: var(--text-tertiary); }

.dg-cond {
  /* the system-ID clip is a 2.7:1 real-vs-sim strip and the randomization clip
     is 4:3, so the wide one takes the wide column; the 1.3 ratio here is what
     the .dg-dr aspect-ratio below is derived from — change one, change both */
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border-subtle);
}
.dg-cond h4 { margin: 0 0 5px; font-family: var(--font-display); font-size: 1.14rem; font-weight: 700; }
.dg-cond > div > p { margin: 0 0 13px; font-size: .93rem; line-height: 1.55; color: var(--text-secondary); }
.dg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.dg-mv { position: relative; border-radius: 10px; overflow: hidden; background: #0f141a; display: block; }
.dg-mv video { width: 100%; display: block; }
.dg-ph {
  position: absolute; right: 7px; top: 7px; z-index: 2;
  font-family: var(--font-mono); font-size: .5rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; background: rgba(226, 53, 47, .9); color: #fff;
  padding: 2px 6px; border-radius: 4px;
}
.dg-cap { font-family: var(--font-mono); font-size: .58rem; color: var(--text-tertiary); margin-top: 5px; }

@media (max-width: 900px) {
  .dg-prod, .dg-cond { grid-template-columns: 1fr; }
}

/* the randomization clip, with its setup table alongside on hover */
.dg-act { margin-top: 12px; }
.dg-act video { aspect-ratio: 16 / 9; object-fit: cover; }
.dg-stack { display: grid; gap: 12px; }
.dg-dr { position: relative; }
/* Uncropped, the 4:3 clip towered over the system-ID strip beside it. Its
   column is 1/1.3 as wide, so cropping it to (1.3 / 2.675) = 2.06:1 lands both
   videos at the same rendered height at every viewport width — no max-height,
   which only matched at one width. */
.dg-dr .dg-mv video { aspect-ratio: 2.06 / 1; object-fit: cover; }
.dg-hint { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); cursor: help; }
.dg-hint::before { content: "▸"; font-size: .8em; }
.dg-tbl {
  position: absolute; top: 0; right: calc(100% + 16px); z-index: 6;
  width: min(510px, 46vw); max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 4px;
  padding: 14px 18px 16px; box-shadow: 0 14px 40px rgba(11, 15, 20, .16);
  opacity: 0; visibility: hidden; transform: translateX(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  /* KaTeX ships Computer Modern with the stylesheet the page already loads, so
     the table can be set in the paper's own face rather than the site's. */
  font-family: KaTeX_Main, 'Latin Modern Roman', 'Times New Roman', Times, serif;
}
.dg-hint:hover + .dg-tbl, .dg-tbl:hover, .dg-hint:focus + .dg-tbl, .is-open .dg-tbl {
  opacity: 1; visibility: visible; transform: none;
}
.dg-cap-t {
  font-size: .72rem; line-height: 1.4; color: var(--text-secondary);
  text-align: center; margin-bottom: 9px;
}
.dg-cap-t b { color: var(--text-primary); font-weight: 700; }
/* the caption stays put and only the rows scroll — otherwise a row slid up
   into the panel's top padding and sat above the sticky head */
.dg-tbl-s { overflow-y: auto; min-height: 0; }
.dg-tbl table { width: 100%; border-collapse: collapse; }
.dg-tbl th {
  font-size: .72rem; font-weight: 700; color: var(--text-primary);
  padding: 3px 4px 5px; text-align: left;
  border-top: 1.1px solid var(--text-primary);      /* \toprule */
  border-bottom: .7px solid var(--text-primary);    /* \midrule */
  /* KaTeX renders each formula in its own stacking context, so a scrolled row
     came through the sticky head until this sat above it */
  position: sticky; top: 0; background: #fff; z-index: 3;
}
.dg-tbl th:last-child { text-align: center; }
.dg-tbl td {
  padding: 2.5px 4px; font-size: .71rem; line-height: 1.35;
  color: var(--text-secondary); border: 0; vertical-align: baseline;
}
.dg-tbl td.v { text-align: center; white-space: nowrap; color: var(--text-primary); }
.dg-tbl tr.mid td { border-top: .7px solid var(--text-primary); padding-top: 5px; }
.dg-tbl thead + tbody tr.mid:first-child td { border-top: 0; padding-top: 4px; }
.dg-tbl tbody tr:last-child td { border-bottom: 1.1px solid var(--text-primary); } /* \bottomrule */
.dg-tbl .katex { font-size: .95em; }

@media (max-width: 900px) {
  .dg-tbl {
    position: static; width: auto; max-height: min(70vh, 520px); margin-top: 10px;
    transform: none; box-shadow: none;
    display: none; opacity: 1; visibility: visible;
  }
  .dg-dr.is-open .dg-tbl { display: flex; }
  .dg-tbl-s { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* stage 02: the 100-homes montage, under the viewer */
.kg-sub2 {
  margin: 36px 0 7px;
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--text-primary);
}
/* .rm-panel p (0,1,1) outranks a bare class, so the override must match it */
.rm-panel p.kg-sub2p { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); max-width: none; }

/* SimVQA: three example rows — frame on the left, its Q&A beside it */
.dg-vqa { position: relative; }
.dg-vqa-row {
  display: grid; grid-template-columns: 132px 1fr; gap: 11px;
  align-items: center; margin-top: 11px;
}
.dg-vqa-row img {
  width: 100%; display: block; border-radius: 8px;
  border: 1px solid var(--border-subtle);
}
.dg-vqa-row .k {
  font-family: var(--font-mono); font-size: .52rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.dg-vqa-row .q { font-size: .87rem; color: var(--text-primary); margin-top: 2px; line-height: 1.4; }
.dg-vqa-row .a { font-family: var(--font-mono); font-size: .78rem; color: #1a7f5a; margin-top: 3px; }
.dg-vqa .dg-hint { margin-top: 10px; }
/* neither side of the middle column has 560px at shell width, so the panel
   hangs from the column's left edge and runs rightward over SimDeploy */
.dg-tbl-vqa { width: min(560px, 50vw); right: auto; left: 0; }

.dg-tbl-vqa td { white-space: normal; }
.dg-tbl-vqa td.fn {
  font-family: var(--font-mono); font-size: .62rem; color: var(--text-primary); white-space: nowrap;
  padding-right: 8px;
}
.dg-tbl-vqa th:last-child, .dg-tbl-vqa td:last-child { text-align: left; }
@media (max-width: 900px) {
  .dg-tbl-vqa {
    position: static; width: auto; max-height: min(70vh, 520px); margin-top: 10px;
    transform: none; box-shadow: none; display: none; opacity: 1; visibility: visible;
  }
  .dg-vqa.is-open .dg-tbl-vqa { display: flex; }
}


/* ============================================================
   Q1 RESULTS — one figure, four views, marks that animate
   between them. Greys for the π0.5 baselines, the site accent
   for SimVLA, that accent faded for its ablation, so the
   comparison the question asks reads as one family.
   ============================================================ */
.rp {
  /* straight off the paper figure — sampled from results_envs.png */
  --b1: #a8d8ea; --b2: #aa96da; --ab: #fcbad3; --hero: #ffffd2;
  --mk-edge: #3b3f45;
  --rp-grid: #eceff3;
  position: relative;
  margin-top: 4px;
}
.rp-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-views { display: inline-flex; padding: 3px; background: var(--surface-alt); border-radius: 10px; gap: 2px; }
.rp-v {
  border: 0; background: none; cursor: pointer; border-radius: 7px; padding: 7px 14px;
  font-family: var(--font-sans); font-size: .84rem; font-weight: 600; color: var(--text-tertiary);
  transition: background .16s ease, color .16s ease;
}
.rp-v:hover { color: var(--text-primary); }
.rp-v.is-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(11,15,20,.1); }
.rp-read { margin: 0; flex: 1 1 260px; font-size: .9rem; line-height: 1.5; color: var(--text-secondary); }
.rp-read b { color: var(--text-primary); }

.rp-key { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 12px; }
.rp-key button {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none;
  padding: 3px 0; cursor: pointer; font-family: var(--font-sans); font-size: .97rem;
  font-weight: 500; color: var(--text-secondary);
}
.rp-key i { width: 22px; height: 14px; border-radius: 3px; background: var(--k);
  border: 1px solid var(--mk-edge); flex: none; }
/* The ablation series are hatched in the chart and the swatch has to match. A CSS
   gradient angle runs perpendicular to its stripes and the other way round from an
   SVG patternTransform, so the two numbers here are the SVG angles swapped. */
.rp-key button[data-hatch="45"] i {
  background-image: repeating-linear-gradient(135deg,
    transparent 0 3.1px, color-mix(in srgb, var(--mk-edge) 42%, transparent) 3.1px 5.0px);
}
.rp-key button[data-hatch="135"] i {
  background-image: repeating-linear-gradient(45deg,
    transparent 0 3.1px, color-mix(in srgb, var(--mk-edge) 42%, transparent) 3.1px 5.0px);
}
.rp-key button[aria-pressed="false"] i { background-image: none; }
.rp-key button:hover { color: var(--text-primary); }
.rp-key button[aria-pressed="false"] { color: #b6bec8; }
.rp-key button[aria-pressed="false"] i { background: #eef1f4; border-color: #d3d9e0; }

.rp-stage { position: relative; }
.rp-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.rp .hit { fill: transparent; cursor: pointer; }
.rp .mk, .rp .lbl, .rp .lnk, .rp .ax { transition: opacity .22s ease; }
.rp .is-mute { opacity: .2; }

.rp-tbl { padding: 6px 0 0; }
.rp-tbl table { width: 100%; border-collapse: collapse; }
.rp-tbl th, .rp-tbl td { padding: 13px 10px; border-bottom: 1px solid var(--border-subtle); text-align: right; }
.rp-tbl th:first-child, .rp-tbl td:first-child { text-align: left; }
.rp-tbl thead th {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary); border-bottom-color: var(--border-strong);
}
.rp-tbl td { font-size: .92rem; color: var(--text-secondary); }
.rp-tbl td.n { font-family: var(--font-mono); color: var(--text-primary); }
.rp-tbl tr.is-hero td { color: var(--text-primary); font-weight: 600; }
.rp-tbl tr.is-hero td.n { color: var(--text-primary); }
.rp-tbl .sd { color: var(--text-tertiary); font-size: .82em; }

.rp-tip {
  position: absolute; z-index: 6; pointer-events: none; white-space: nowrap;
  background: var(--surface-deep); color: #fff; border-radius: 8px; padding: 7px 11px;
  font-size: .78rem; line-height: 1.45; transform: translate(-50%, -100%);
  box-shadow: 0 8px 22px rgba(11, 15, 20, .22);
}
.rp-tip b { display: block; font-size: .84rem; font-weight: 600; }
.rp-tip .v { font-family: var(--font-mono); color: #9fc6ff; }
@media (max-width: 700px) {
  .rp-v { padding: 6px 10px; font-size: .78rem; }
}