/* ===========================================================
   APEX MOTION — DESIGN SYSTEM
   Grounded in the Athlete Performance Blueprint PDF brand:
   warm near-black, single orange accent, bold condensed caps,
   mono utility type for data/category codes.
   (Cloudflare auto-deploy pipeline test — no visual/behavioral change.)
   =========================================================== */

:root {
  /* Color */
  --bg-primary: #130E0B;      /* warm charcoal-black, softer than pure black */
  --bg-secondary: #1C1611;    /* lifted panel */
  --bg-tertiary: #241C16;     /* card hover / deeper panel */
  --bg-void: #0B0805;         /* deepest surface — behind media, deeper than bg-primary */
  --line: #33291F;
  --line-soft: #241C16;

  --accent: #E2531B;          /* primary orange, from the Blueprint PDF */
  --accent-soft: #F2764A;
  --accent-dim: #7A3116;

  --data: #6FA39C;            /* muted sage-teal — validation/data credibility accent, used sparingly */

  --text-primary: #F5EFE6;
  --text-secondary: #C9BFB2;
  --text-muted: #8C8073;

  /* Type */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --radius: 3px;
}

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

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; color: var(--text-secondary); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  display: inline-block;
  border-radius: 1px;
}

.lede {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 60ch;
}

/* ---------- Header / Nav ---------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(19, 14, 11, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.brand-mark {
  width: 30px;
  height: 30px;
  background: var(--accent);
  color: #17110D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  border-radius: 2px;
}

nav.links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
nav.links a:hover { color: var(--text-primary); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--accent);
  color: #17110D;
}
.btn-primary:hover { background: var(--accent-soft); }

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text-primary);
}
.btn-ghost:hover { border-color: var(--accent); }

.btn-sm { padding: 9px 16px; font-size: 0.85rem; }

/* ---------- Sections ---------- */

section { padding: 96px 0; }
section.tight { padding: 64px 0; }
.section-alt { background: var(--bg-secondary); }

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}
/* The lede's offset from the heading above it — previously inlined per page.
   Every other .lede in the site carries its own inline margin-top, which still
   wins, so this only supplies the default where none was set. */
h1 + .lede, h2 + .lede { margin-top: 14px; }

/* ===========================================================
   ASSET-LED SECTIONS
   Real photography / product imagery is the primary visual
   layer. Technical overlay stays supporting and minimal.
   =========================================================== */

/* ---------- Hero ---------- */

.hero-photo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 660px;
  overflow: hidden;
  background: var(--bg-primary);
  /* cancels the global `section { padding: 96px 0 }` — this section
     carries its own padding on .hero-photo-inner instead */
  padding: 0;
}
.hero-photo-media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 58%;
  z-index: 0;
}
.hero-photo-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* bottom-anchored: crops the bright sky, keeps cap-to-cleats in frame */
  object-position: 50% 92%;
}
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* horizontal: dissolves the photo's left edge into the page ground */
.hero-scrim::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--bg-primary) 0%,
    var(--bg-primary) 33%,
    rgba(19,14,11,0.93) 43%,
    rgba(19,14,11,0.48) 55%,
    rgba(19,14,11,0.12) 70%,
    rgba(19,14,11,0) 85%);
}
/* vertical: tames the blown-out daytime sky up top, seats the frame at the bottom */
.hero-scrim::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(19,14,11,0.62) 0%, rgba(19,14,11,0) 30%),
    linear-gradient(180deg, rgba(19,14,11,0) 68%, rgba(19,14,11,0.75) 90%, var(--bg-primary) 100%);
}
.hero-arc { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-arc path {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.45;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: hero-arc-draw 1.7s cubic-bezier(.4,0,.2,1) .35s forwards;
}
@keyframes hero-arc-draw { to { stroke-dashoffset: 0; } }

.hero-photo-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1160px;
  margin: 0 auto; padding: 88px 24px;
}
/* 600px keeps the copy clear of the pitcher's torso (which starts ~x=678
   at 1280w); only his extended front leg falls under the scrim. */
.hero-photo-copy { max-width: 600px; }
.hero-photo-copy h1 {
  text-transform: none;
  letter-spacing: -0.015em;
  /* capped at 3.4rem so "Find what's limiting" stays on one line and the
     authored <br> holds — larger and it wraps to three ragged lines */
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  line-height: 1.04;
  text-wrap: balance;
}
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero-stats-strip {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.hero-stats-strip .sep { color: var(--line); }

/* Who We Are play control — lives inside the hero visual, not a separate card */
.who-play {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 32px; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; color: var(--text-primary); text-align: left;
}
.who-play .disc {
  flex-shrink: 0;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(245,239,230,0.28);
  background: rgba(11,8,5,0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.who-play:hover .disc, .who-play:focus-visible .disc {
  background: var(--accent); border-color: var(--accent);
  color: #17110D; transform: scale(1.06);
}
.who-play .who-label { display: block; font-size: 0.92rem; font-weight: 600; }
.who-play .who-sub {
  display: block; font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 4px;
}

@media (max-width: 900px) {
  .hero-photo { min-height: 0; }
  .hero-photo-media { width: 100%; bottom: auto; height: 320px; }
  .hero-photo-media img { object-position: 50% 30%; }
  .hero-scrim::before { background: none; }
  .hero-scrim::after {
    background:
      linear-gradient(180deg, rgba(19,14,11,0.34) 0%, rgba(19,14,11,0) 26%),
      linear-gradient(180deg, rgba(19,14,11,0) 34%, rgba(19,14,11,0.88) 62%, var(--bg-primary) 78%);
  }
  .hero-photo-inner { padding: 252px 22px 60px; }
  .hero-photo-copy h1 { font-size: 2.45rem; }
  .hero-photo-copy .lede { font-size: 1rem; }
  .hero-photo-copy .eyebrow { font-size: 0.7rem; letter-spacing: 0.1em; }
  .hero-cta { margin-top: 26px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-arc { display: none; }
}

/* ---------- Video modal (Who We Are) ---------- */
.video-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(8,5,3,0.9);
  padding: 24px;
}
.video-modal.open { display: flex; }
.video-modal-inner { width: 100%; max-width: 980px; position: relative; }
.video-modal .video-frame { aspect-ratio: 16/9; }
.video-modal-close {
  position: absolute; top: -46px; right: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary); padding: 8px;
}
.video-modal-close:hover { color: var(--text-primary); }
.video-fallback {
  padding: 40px 24px; text-align: center;
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- How It Works — staged storytelling ---------- */

.process-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.process-visual {
  position: sticky; top: 96px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--line);
}
.process-visual figure {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .55s ease;
}
.process-visual figure.active { opacity: 1; }
.process-visual img { width: 100%; height: 100%; object-fit: cover; }
.process-visual figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 20px 16px;
  background: linear-gradient(180deg, transparent, rgba(11,8,5,0.92));
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--data);
}
.process-steps { display: flex; flex-direction: column; }
.process-step {
  padding: 32px 0;
  border-top: 1px solid var(--line-soft);
  opacity: 0.4;
  transition: opacity .4s ease;
}
.process-step:first-child { border-top: none; padding-top: 0; }
.process-step.active { opacity: 1; }
.process-step .step-num {
  font-family: var(--font-mono); color: var(--accent-soft);
  font-size: 0.8rem; letter-spacing: 0.08em;
}
.process-step h3 { margin: 10px 0 10px; font-size: 1.18rem; }
.process-step p { margin: 0; font-size: 0.94rem; }
.process-step-media { display: none; }

@media (max-width: 900px) {
  .process-layout { grid-template-columns: 1fr; gap: 0; }
  .process-visual { display: none; }
  .process-step { opacity: 1; padding: 28px 0 36px; }
  .process-step-media {
    display: block;
    margin: 18px 0 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 4 / 3;
  }
  .process-step-media img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Flow strip (replaces the 4-card "logic" grid) ---------- */
.flow-strip { display: flex; flex-wrap: wrap; gap: 28px 0; margin-top: 8px; }
.flow-node {
  flex: 1 1 210px;
  padding: 0 28px;
  border-left: 1px solid var(--line);
}
.flow-node:first-child { padding-left: 0; border-left: none; }
.flow-node .flow-label {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-soft); display: block; margin-bottom: 10px;
}
.flow-node.terminal .flow-label { color: var(--data); }
.flow-node p { font-size: 0.9rem; margin: 0; }
@media (max-width: 760px) {
  .flow-node { flex: 1 1 100%; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
  .flow-node:first-child { padding-left: 18px; border-left: 2px solid var(--accent); }
}

/* ---------- App showcase — layered depth carousel ---------- */

.app-showcase { overflow: hidden; }
.app-stage {
  position: relative;
  height: 640px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 8px;
}
.app-screen {
  position: absolute;
  width: 274px;
  aspect-ratio: 1290 / 2520;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-void);
  box-shadow: 0 26px 64px rgba(0,0,0,0.55);
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease, filter .6s ease;
  cursor: pointer;
  padding: 0; margin: 0;
}
.app-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-screen.is-active { cursor: default; }
.app-screen:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.app-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; margin-top: 36px;
}
.app-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.app-arrow:hover { border-color: var(--accent); color: var(--text-primary); }
.app-dots { display: flex; gap: 0; }
.app-dot {
  width: 40px; height: 40px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.app-dot::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  transition: background .2s ease, transform .2s ease;
}
.app-dot.is-active::before { background: var(--accent); transform: scale(1.3); }
.app-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.app-caption {
  text-align: center; margin-top: 26px;
  min-height: 62px;
}
.app-caption .app-caption-name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.05rem; display: block; margin-bottom: 6px;
}
.app-caption .app-caption-desc {
  font-size: 0.88rem; color: var(--text-muted);
  max-width: 46ch; margin: 0 auto;
}
@media (max-width: 700px) {
  .app-stage { height: 520px; }
  .app-screen { width: 208px; }
}

/* ---------- Report preview — editorial ---------- */

.report-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 72px;
  align-items: center;
}
.report-stack { position: relative; padding: 26px 52px 34px 0; }
.report-stack .sheet {
  position: absolute; top: 0; left: 0; width: 100%;
  display: block; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.report-stack .back2 { transform: translate(50px, 30px) scale(0.945); opacity: 0.32; filter: brightness(0.55); }
.report-stack .back1 { transform: translate(26px, 15px) scale(0.973); opacity: 0.58; filter: brightness(0.75); }
.report-stack .front {
  position: relative; width: 100%; display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 34px 74px rgba(0,0,0,0.6);
}
@media (max-width: 900px) {
  .report-stack { padding: 18px 34px 24px 0; }
}
.report-excerpt {
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
}
.report-excerpt:first-of-type { border-top: none; padding-top: 0; }
.report-excerpt .rx-label {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--data); display: block; margin-bottom: 8px;
}
.report-excerpt h3 { font-size: 1.05rem; margin: 0 0 8px; }
.report-excerpt p { font-size: 0.9rem; margin: 0; }
@media (max-width: 900px) {
  .report-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Athlete credibility — full-bleed split ---------- */

.credibility {
  position: relative;
  /* full-bleed split — inner padding lives on .credibility-body */
  padding: 0;
}
.credibility-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 620px;
  align-items: stretch;
}
.credibility-media { position: relative; overflow: hidden; background: var(--bg-secondary); }
.credibility-media img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 26%; }
.credibility-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 60px 32px 24px;
  background: linear-gradient(180deg, transparent, rgba(11,8,5,0.94));
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary);
}
.credibility-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 88px clamp(24px, 5vw, 72px);
}
@media (max-width: 900px) {
  .credibility-layout { grid-template-columns: 1fr; min-height: 0; }
  .credibility-media { aspect-ratio: 4 / 3; }
  .credibility-body { padding: 56px 22px 64px; }
}

/* ---------- Shared media primitives ---------- */

.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-frame video, .video-frame iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hero-arc path { animation: none; stroke-dashoffset: 0; }
  .app-screen { transition: none; }
  .process-visual figure { transition: none; }
}


/* ---------- 8-Category Dashboard (signature element) ---------- */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.dash-cell {
  background: var(--bg-secondary);
  padding: 22px 18px;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.2s ease;
}
.dash-cell:hover { background: var(--bg-tertiary); }
.dash-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
.dash-name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  text-transform: uppercase;
  margin: 10px 0 12px;
  line-height: 1.15;
}
.dash-tag {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  color: var(--text-muted);
  border: 1px solid var(--line);
}
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Cards / Grids ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.card {
  background: var(--bg-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
}

.step-card {
  border-left: 2px solid var(--accent);
  padding-left: 22px;
}
.step-num {
  font-family: var(--font-mono);
  color: var(--accent-soft);
  font-size: 0.85rem;
}

/* ---------- Pricing ---------- */

/* Five plan cards read better at 3 columns than at 4 — this was a page-level
   <style> override in pricing.html; pricing.html is the only consumer of
   .pricing-grid, so the 3-column value belongs here as the default. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.plan {
  background: var(--bg-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(226,83,27,0.08), var(--bg-secondary) 40%);
}
/* Accent border without the featured card's background wash — for a card that
   is called out (e.g. "Most Popular") but isn't the page's primary offer. */
.plan.is-highlighted { border-color: var(--accent); }
.plan-badge {
  position: absolute;
  top: -12px;
  left: 26px;
  background: var(--accent);
  color: #17110D;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}
.plan-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.plan-price {
  font-family: var(--font-mono);
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.plan-price small {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 400;
}
.plan-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  min-height: 32px;
}
.plan-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
  flex-grow: 1;
}
.plan .btn { width: 100%; margin-top: auto; }
.plan-fine {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 14px;
  line-height: 1.5;
}

/* "Includes / Does not include" scope block. Sits between the description and
   the CTA; .plan-desc's flex-grow keeps the CTA pinned to the card floor so
   every card's button lands on the same line. */
.plan-includes {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.plan-includes strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Billing-terms note inside a plan card — a quieter, tighter .callout. */
.plan-terms {
  margin-top: 16px;
  padding: 14px 16px;
  font-size: 0.74rem;
  line-height: 1.6;
}
.plan-terms p { margin: 0; font-size: inherit; line-height: inherit; }
.plan-terms p + p { margin-top: 8px; }
.plan-terms strong { color: var(--text-secondary); font-weight: 600; }

/* Second CTA in a plan card (e.g. an alternate billing option). .plan .btn
   carries margin-top:auto, which would otherwise push these apart. */
.plan .btn + .btn { margin-top: 10px; }

/* Continuing-service pair, sitting below the main plan row. Two cards in a
   three-column grid read as an unfinished row, so they get their own centred
   block instead. The ratio resolves the right-hand column to 357px — the same
   width as a card in the row above — while the Development Plan takes the
   surplus for its second CTA and billing-terms block. */
.pricing-pair {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
  /* Not stretched: the Development Plan is far taller (second CTA + terms
     block), and matching the Add-On to it would strand its button at the
     bottom of a mostly empty card. Each card ends at its own content. */
  align-items: start;
  max-width: 860px;
  margin: 20px auto 0;
}
/* The wider card's terms block would otherwise run to an uncomfortable
   measure; hold it to roughly the same line length as the narrow card. */
.pricing-pair .plan-terms { max-width: 60ch; }

@media (max-width: 980px) {
  .pricing-pair { grid-template-columns: 1fr 1fr; max-width: none; }
}

@media (max-width: 980px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
  .pricing-pair { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .plan { padding: 26px 22px; }
  .plan-price { font-size: 1.8rem; }
  .plan-sub { min-height: 0; margin-bottom: 16px; }
}

/* ---------- Checklist / Prep ---------- */

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-secondary);
}
.check-list li:last-child { border-bottom: none; }
.check-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-top: 2px;
}

.angle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.angle-card {
  background: var(--bg-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.angle-card .icon {
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.angle-card h4 { font-size: 0.85rem; margin-bottom: 6px; }
.angle-card p { font-size: 0.78rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .angle-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Data strip ---------- */

.data-strip {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
  flex-wrap: wrap;
  gap: 24px;
}
.data-item {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  flex: 1 1 220px;
  max-width: 260px;
  padding-left: 16px;
  border-left: 2px solid var(--line);
}
.data-item:first-child { padding-left: 0; border-left: none; }
.data-item strong {
  color: var(--text-primary);
  display: block;
  font-size: 0.98rem;
  margin-bottom: 6px;
  font-weight: 700;
}
@media (max-width: 700px) {
  .data-item { border-left: none; padding-left: 0; }
}

/* ---------- Footer ---------- */

footer.site {
  border-top: 1px solid var(--line-soft);
  padding: 56px 0 32px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.footer-col a { display: block; color: var(--text-muted); margin-bottom: 8px; font-size: 0.85rem; }
.footer-col a:hover { color: var(--accent-soft); }
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Utility ---------- */

.center { text-align: center; margin-left: auto; margin-right: auto; }
.mt-lg { margin-top: 64px; }
.text-muted { color: var(--text-muted); }
.divider { border: none; border-top: 1px solid var(--line-soft); margin: 64px 0; }

/* Shared page/section type scale. These clamp values were previously inlined
   on individual pages; they live here so the scale stays in one place. */
.page-title { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.section-title-sm { font-size: clamp(1.8rem, 4vw, 2.4rem); }

/* Inline text link inside body copy — distinct from .btn affordances. */
.link-inline { color: var(--accent-soft); text-decoration: underline; }
.link-inline:hover { color: var(--accent); }

/* Width-constrained content columns. */
.narrow { max-width: 640px; }
.narrow-wide { max-width: 760px; }

/* Trailing CTA under a section-head / centered block. */
.section-cta { margin-top: 28px; }
.section-note { margin-top: 14px; font-size: 0.78rem; }

/* Section that sits directly beneath another section's head, with no
   repeated top padding. */
.section-continues { padding-top: 0; }

.callout {
  background: var(--bg-secondary);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 22px 26px;
  border-radius: var(--radius);
}
.callout h3 { margin-bottom: 10px; }

/* Horizontal centering without centering the text inside. */
.center-block { margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  nav.links { display: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.testimonial-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.testimonial-intro { position: sticky; top: 100px; }
.testimonial-stack { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) {
  .testimonial-layout { grid-template-columns: 1fr; }
  .testimonial-intro { position: static; }
}
.testimonial-card {
  background: var(--bg-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.testimonial-stars { color: var(--accent-soft); font-size: 0.95rem; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-quote { font-size: 0.98rem; color: var(--text-primary); line-height: 1.65; flex-grow: 1; }
.testimonial-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.testimonial-name { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); }
.testimonial-tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 900px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}
.brand-lockup { display: flex; flex-direction: column; line-height: 1; }
.brand-lockup .sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
}

/* ===========================================================
   REFINEMENT PASS
   =========================================================== */

/* ---------- Mobile navigation (injected by assets/nav.js) ---------- */

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
}
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle .bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle .bars i {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: var(--text-primary);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle .bars i:nth-child(1) { top: 0; }
.nav-toggle .bars i:nth-child(2) { top: 5px; }
.nav-toggle .bars i:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  pointer-events: none;
}
.nav-drawer.open { visibility: visible; pointer-events: auto; }
.nav-drawer-veil {
  position: absolute; inset: 0;
  background: rgba(8,5,3,0.72);
  opacity: 0;
  transition: opacity .28s ease;
}
.nav-drawer.open .nav-drawer-veil { opacity: 1; }
.nav-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--bg-secondary);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column;
  padding: 20px 22px 28px;
  overflow-y: auto;
}
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.nav-drawer-close {
  width: 44px; height: 44px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.nav-drawer-close:hover { color: var(--text-primary); }
.nav-drawer-links { display: flex; flex-direction: column; margin-top: 8px; }
.nav-drawer-links a {
  display: block;
  padding: 15px 0;
  font-size: 1.02rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--line-soft);
}
.nav-drawer-links a:hover, .nav-drawer-links a:focus-visible { color: var(--text-primary); }
.nav-drawer-links a[aria-current="page"] { color: var(--accent-soft); }
.nav-drawer .drawer-cta { margin-top: 24px; width: 100%; }
.nav-drawer-meta {
  margin-top: auto; padding-top: 24px;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  header.site .nav-row > .btn-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-drawer-panel, .nav-drawer-veil, .nav-toggle .bars i { transition: none; }
}

/* ---------- Hero eyebrow: readable over photography ---------- */

.hero-photo-copy .eyebrow {
  color: var(--text-secondary);
  background: rgba(11,8,5,0.62);
  border: 1px solid rgba(245,239,230,0.10);
  border-radius: var(--radius);
  padding: 7px 12px 7px 11px;
  margin-bottom: 18px;
  letter-spacing: 0.1em;
}

/* ---------- Who We Are thumbnail ---------- */

.who-thumb {
  display: flex; align-items: center; gap: 16px;
  margin-top: 34px; padding: 0;
  background: none; border: none; cursor: pointer;
  text-align: left; font-family: inherit; color: var(--text-primary);
}
.who-thumb-media {
  position: relative; flex-shrink: 0;
  width: 138px; aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-void);
}
.who-thumb-media img { width: 100%; height: 100%; object-fit: cover; }
.who-thumb-media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(11,8,5,0.34);
  transition: background .2s ease;
}
.who-thumb-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(11,8,5,0.6);
  border: 1px solid rgba(245,239,230,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; color: var(--text-primary);
  z-index: 1;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.who-thumb:hover .who-thumb-media::after,
.who-thumb:focus-visible .who-thumb-media::after { background: rgba(11,8,5,0.12); }
.who-thumb:hover .who-thumb-play,
.who-thumb:focus-visible .who-thumb-play {
  background: var(--accent); border-color: var(--accent);
  color: #17110D; transform: translate(-50%,-50%) scale(1.08);
}
.who-thumb-label { display: block; font-size: 0.95rem; font-weight: 600; }
.who-thumb-sub {
  display: block; font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 5px;
}
@media (max-width: 900px) {
  .who-thumb { margin-top: 28px; gap: 13px; }
  .who-thumb-media { width: 116px; }
}

/* TEMPORARY — the current placeholder who-we-are.mp4 is stored sideways
   (512x910, rotation matrix 0). This rights it for review. DELETE this rule
   and the .rotate-90ccw class once a correctly-oriented video is dropped in. */
.video-frame.rotate-90ccw video {
  position: absolute; top: 50%; left: 50%;
  width: 56.25%; height: 177.78%;
  transform: translate(-50%, -50%) rotate(-90deg);
  object-fit: cover;
}

/* ---------- Proof section (replaces the plain data strip) ---------- */

.proof-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.proof-lead h2 { font-size: clamp(1.7rem, 2.9vw, 2.3rem); }
.proof-lead p { margin-top: 16px; }
.proof-items { display: flex; flex-direction: column; }
.proof-item {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
}
.proof-item:first-child { border-top: none; padding-top: 0; }
.proof-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--data);
  padding-top: 4px;
}
.proof-item h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0;
  text-transform: none; line-height: 1.35;
  margin: 0 0 8px;
}
.proof-item p { font-size: 0.9rem; margin: 0; }
@media (max-width: 900px) {
  .proof-layout { grid-template-columns: 1fr; gap: 36px; }
  .proof-item { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .proof-tag { padding-top: 0; }
}

/* ---------- Report carousel ---------- */

.report-viewer { position: relative; }
.report-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-void);
  box-shadow: 0 30px 66px rgba(0,0,0,0.55);
  aspect-ratio: 1224 / 1584;
}
.report-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease;
}
.report-frame img.is-active { opacity: 1; }
.report-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 20px;
}
.report-pager {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: baseline; gap: 10px;
  min-width: 0;
}
.report-pager .pg-name { color: var(--text-secondary); }
.report-pager .pg-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.report-nav { display: flex; gap: 10px; flex-shrink: 0; }
.report-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.report-arrow:hover { border-color: var(--accent); color: var(--text-primary); }
.report-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .report-frame img { transition: none; }
}

/* ---------- Process: intentional placeholder for missing footage ---------- */

.media-pending {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-void);
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  text-align: center; padding: 24px; line-height: 1.8;
}
.process-step-media .media-pending { position: static; height: 100%; }

/* ---------- Process: layered detail on the Understand step ---------- */

.figure-stack { position: absolute; inset: 0; }
.figure-stack .fs-main { width: 100%; height: 100%; object-fit: cover; }
.figure-stack .fs-main { object-position: 50% 38%; }
/* reads as a second page of the same report, not a random crop.
   height:auto is required — .process-visual img sets height:100%. */
.figure-stack .fs-detail {
  position: absolute;
  right: 5%; bottom: 8%;
  width: 34%;
  height: auto;
  aspect-ratio: 1224 / 1584;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px rgba(0,0,0,0.65);
  object-fit: cover;
  object-position: 50% 0%;
}

/* ---------- Credibility caption ---------- */

.credibility-media figcaption strong {
  display: block;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  margin-bottom: 3px;
}

/* ---------- Validation page ---------- */

.val-hero { border-bottom: 1px solid var(--line); }
.val-steps { display: flex; flex-direction: column; margin-top: 8px; }
.val-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid var(--line-soft);
}
.val-step:first-child { border-top: none; }
.val-step .vs-num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent-soft);
  padding-top: 3px;
}
.val-step h3 { font-size: 1.1rem; margin: 0 0 10px; }
.val-step p { margin: 0; font-size: 0.94rem; }
.val-pending {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  background: var(--bg-secondary);
}
.val-pending .vp-label {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--data); display: block; margin-bottom: 12px;
}
.val-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 26px; }
.val-slot { background: var(--bg-primary); padding: 20px 18px; }
.val-slot .vslot-name { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); display: block; margin-bottom: 8px; }
.val-slot p { font-size: 0.82rem; margin: 0; color: var(--text-muted); }
@media (max-width: 700px) {
  .val-step { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
}

/* ---------- Mobility demo clip inside an upload card ----------
   Shared by intake.html and reassessment.html, which render the same five
   mobility upload cards and must stay identical.

   Each clip sizes its own container from its intrinsic ratio, supplied per card
   as --demo-ar (see assets/mobility-demo-reference.js). The five approved clips
   are 16:9, ~3:4, 1:1, 1:1 and ~5:7, so one fixed ratio would crop or letterbox
   most of them. object-fit: contain guarantees the full frame is always visible;
   max-height keeps a tall portrait clip from dominating a narrow card, and
   contain letterboxes against the black backdrop in that case, never crops. */
.demo-video-wrap {
  position: relative; border-radius: 3px; overflow: hidden; background: #000;
  aspect-ratio: var(--demo-ar, 16/9); max-height: 340px;
  max-width: 100%;
  display: flex; align-items: center; justify-content: center;
  /* max-height resolves the width from the clip's own ratio, so a portrait clip
     is narrower than the card — centre it rather than leaving it stranded
     against the left edge. */
  margin: 0 auto 12px;
}
.demo-video-wrap video {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.demo-fallback {
  display: none; align-items: center; justify-content: center; height: 100%;
  color: var(--text-muted); font-size: 0.78rem; text-align: center; padding: 16px;
  font-family: var(--font-mono);
}
.demo-video-wrap.fallback .demo-fallback { display: flex; }
.demo-video-wrap.fallback video { display: none; }
/* Affordance line under a demo clip — the clips no longer autoplay, so say so. */
.vc-hint {
  margin: -4px 0 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--text-muted); text-align: center;
}
.demo-video-wrap.fallback + .vc-hint { display: none; }

/* ---------- Demo picker (camera angles / mobility tests) ---------- */

.demo-picker { margin-top: 8px; }
/* The stage takes its ratio from the selected clip (--demo-ar, set per tab),
   because the mobility demos are 16:9, ~3:4, 1:1, 1:1 and ~5:7. object-fit:
   contain guarantees the whole frame is visible; max-height stops a tall
   portrait clip from pushing the tabs off-screen, and contain letterboxes
   against the stage backdrop in that case rather than cropping. */
.demo-stage {
  position: relative;
  aspect-ratio: var(--demo-ar, 16 / 9);
  max-height: 520px;
  max-width: 100%;
  /* max-height resolves the width from the clip's own ratio, so a portrait
     clip is narrower than the column — centre it under the readout. */
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-void);
}
.demo-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Text panel is the fallback: hidden while a clip plays, shown if one fails to
   load. Scoped to .demo-stage so index.html's process-visual placeholder, which
   shares the .media-pending class, is unaffected. */
.demo-stage .media-pending { font-size: 0.72rem; display: none; }
.demo-stage.is-empty .media-pending { display: flex; }
.demo-stage.is-empty video { display: none; }
@media (max-width: 620px) {
  .demo-stage { max-height: 68vh; }
}

/* Affordance line for the mobility picker — mirrors the angle picker's
   "Tap each view…" line, which lives in its own .angle-ref-head. */
.demo-picker-hint {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--text-muted); text-align: center;
}

.demo-readout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 24px;
  align-items: start;
  padding: 22px 0 4px;
  border-bottom: 1px solid var(--line-soft);
}
.demo-readout h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.08rem; text-transform: none; letter-spacing: 0;
  margin: 0 0 8px;
}
.demo-readout p { margin: 0; font-size: 0.92rem; }
.demo-readout .demo-idx {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; color: var(--text-muted);
  white-space: nowrap; padding-top: 4px;
}

.demo-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
.demo-tab {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.demo-tab:hover { border-color: var(--accent-dim); color: var(--text-primary); }
.demo-tab[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--text-primary);
  background: rgba(226,83,27,0.08);
}
.demo-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 620px) {
  .demo-tab { flex: 1 1 calc(50% - 4px); }
}

/* ---------- Scannable guidance rows ---------- */

.guide-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
@media (max-width: 860px) { .guide-cols { grid-template-columns: 1fr; gap: 40px; } }

.guide-head {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 6px;
}
.guide-head.is-do { color: var(--data); }
.guide-head.is-avoid { color: var(--accent-soft); }

.guide-list { list-style: none; padding: 0; margin: 14px 0 0; }
.guide-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
}
.guide-row:first-child { border-top: none; }
.guide-mark {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem; margin-top: 2px; flex-shrink: 0;
}
.guide-mark.ok { border: 1px solid var(--data); color: var(--data); }
.guide-mark.no { border: 1px solid var(--accent-dim); color: var(--accent-soft); }
.guide-row b {
  display: block; font-size: 0.94rem; font-weight: 600;
  color: var(--text-primary); line-height: 1.4;
}
.guide-row span {
  display: block; font-size: 0.84rem; color: var(--text-muted);
  margin-top: 3px; line-height: 1.55;
}

/* final pre-upload check — compact, scannable */
.qc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 18px;
}
.qc-item {
  background: var(--bg-primary);
  padding: 15px 17px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start;
}
.qc-item i {
  font-style: normal; color: var(--data); font-size: 0.76rem; margin-top: 2px;
}

/* ===========================================================
   REFINEMENT PASS 3 — hierarchy, rhythm, proof
   =========================================================== */

/* ---------- Hero: eyebrow legibility ---------- */
.hero-photo-copy .eyebrow {
  color: var(--text-primary);
  background: rgba(11,8,5,0.78);
  border: 1px solid rgba(245,239,230,0.16);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  padding: 8px 13px 8px 12px;
  line-height: 1.5;
}

/* ---------- Hero: proof strip ---------- */
.hero-proof {
  list-style: none;
  margin: 30px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(245,239,230,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.hero-proof li {
  position: relative;
  padding-left: 15px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.hero-proof li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 1px;
  background: var(--accent);
}

/* ---------- Hero: Who We Are as a feature module ---------- */
.who-thumb.is-feature {
  display: grid;
  grid-template-columns: 216px 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 34px;
  padding: 14px;
  width: 100%;
  max-width: 470px;
  background: rgba(11,8,5,0.55);
  border: 1px solid rgba(245,239,230,0.13);
  border-radius: var(--radius);
  transition: border-color .2s ease, background .2s ease;
}
.who-thumb.is-feature:hover,
.who-thumb.is-feature:focus-visible {
  border-color: rgba(226,83,27,0.6);
  background: rgba(11,8,5,0.72);
}
.who-thumb.is-feature .who-thumb-media { width: 100%; }
.who-thumb.is-feature .who-thumb-play { width: 44px; height: 44px; font-size: 0.8rem; }
.who-thumb.is-feature .who-thumb-label { font-size: 1.06rem; }
.who-thumb-badge {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(11,8,5,0.8); color: var(--text-secondary);
  padding: 3px 7px; border-radius: 2px;
}
@media (max-width: 900px) {
  .who-thumb.is-feature {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: none;
    margin-top: 26px;
  }
  .who-thumb.is-feature .who-thumb-text { padding: 0 2px 4px; }
}

/* ---------- Proof section: 2x2 principle grid ---------- */
.proof-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.proof-item {
  display: block;
  background: var(--bg-secondary);
  padding: 26px 26px 28px;
  border: none;
}
.proof-item:first-child { padding-top: 26px; }
.proof-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--data);
  padding: 0 0 12px;
}
.proof-item h3 { font-size: 1.06rem; margin: 0 0 9px; }
.proof-item p { font-size: 0.87rem; line-height: 1.6; }
@media (max-width: 900px) {
  .proof-items { grid-template-columns: 1fr; }
  .proof-item { padding: 22px 20px 24px; }
}

/* ---------- Validation proof metrics ---------- */
.validation-summary { background: var(--bg-secondary); }
.proof-metrics {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.proof-metrics li {
  background: var(--bg-primary);
  padding: 26px 22px 24px;
  display: flex; flex-direction: column;
}
.pm-figure {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--accent-soft);
  letter-spacing: -0.01em;
}
.pm-of { font-size: 1.05rem; color: var(--text-muted); }
.pm-label {
  font-size: 0.9rem; font-weight: 600;
  color: var(--text-primary); margin-top: 12px;
}
.pm-note {
  font-size: 0.78rem; color: var(--text-muted);
  margin-top: 7px; line-height: 1.55;
}
.proof-metrics-caption {
  font-size: 0.78rem; color: var(--text-muted);
  margin: 18px 0 0; max-width: 74ch; line-height: 1.6;
}
.validation-cta {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap; margin-top: 34px;
}
.validation-cta-note {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--data);
}
@media (max-width: 900px) {
  .proof-metrics { grid-template-columns: 1fr 1fr; }
  .pm-figure { font-size: 1.75rem; }
  .proof-metrics li { padding: 20px 16px 18px; }
}
@media (max-width: 460px) {
  .proof-metrics { grid-template-columns: 1fr; }
}

/* ---------- Eight-category explorer ---------- */
.cat-explorer {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: start;
}
.cat-readout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 30px 30px 32px;
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  min-height: 210px;
}
.cat-readout-code {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--accent-soft);
  line-height: 1;
}
.cat-readout h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.2rem; text-transform: none; letter-spacing: 0;
  margin: 0 0 8px;
}
.cat-readout-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--data);
  border: 1px solid var(--line);
  border-radius: 2px; padding: 3px 7px; margin-bottom: 13px;
}
.cat-readout p { margin: 0; font-size: 0.92rem; line-height: 1.65; }

.cat-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cat-tab {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.cat-tab:hover { border-color: var(--accent-dim); }
.cat-tab.is-active { border-color: var(--accent); background: rgba(226,83,27,0.08); }
.cat-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat-code {
  font-family: var(--font-mono); font-size: 0.76rem;
  color: var(--accent-soft); flex-shrink: 0; min-width: 30px;
}
.cat-tab.is-active .cat-code { color: var(--accent-soft); }
.cat-short {
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.3;
}
.cat-tab.is-active .cat-short { color: var(--text-primary); }
@media (max-width: 900px) {
  .cat-explorer { grid-template-columns: 1fr; gap: 24px; }
  .cat-readout { min-height: 0; padding: 24px 22px 26px; }
  .cat-tabs { gap: 7px; }
  .cat-short { font-size: 0.76rem; }
}

/* ---------- App showcase: mobile swipe cue ---------- */
.swipe-cue {
  display: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 14px 0 0;
  transition: opacity .3s ease;
}
.swipe-cue.is-hidden { opacity: 0; }
@media (max-width: 900px) { .swipe-cue { display: block; } }

/* ---------- Visual rhythm: alternate surfaces, softer transitions ---------- */
.app-showcase { background: var(--bg-void); }
.app-showcase + section { border-top: 1px solid var(--line-soft); }
.validation-summary { border-top: 1px solid var(--line-soft); }

/* ---------- Mobile vertical rhythm ---------- */
@media (max-width: 900px) {
  section { padding: 64px 0; }
  section.tight { padding: 48px 0; }
  .section-head { margin-bottom: 30px; }
  .app-stage { height: 470px; }
  .process-step { padding: 24px 0 30px; }
  .report-controls { margin-top: 16px; }
  h2 { font-size: clamp(1.6rem, 6.4vw, 2rem); }
  .lede { font-size: 1rem; }
}

/* ---------- Validation page: cohort buckets ---------- */
.cohort-buckets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.bucket { background: var(--bg-primary); padding: 22px 18px 24px; display: flex; flex-direction: column; }
.bk-n { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--accent-soft); }
.bk-l { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); margin-top: 11px; }
.bk-d { font-size: 0.76rem; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
@media (max-width: 900px) { .cohort-buckets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .cohort-buckets { grid-template-columns: 1fr; } }

/* ---------- Validation page: claim / human-review columns ---------- */
.split-claims { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.claim-col { background: var(--bg-primary); padding: 26px 24px 28px; }
.claim-head {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.11em; text-transform: uppercase;
  margin: 0 0 16px;
}
.claim-col.is-yes .claim-head { color: var(--data); }
.claim-col.is-no .claim-head { color: var(--accent-soft); }
.claim-list { list-style: none; margin: 0; padding: 0; }
.claim-list li {
  position: relative; padding: 11px 0 11px 24px;
  font-size: 0.87rem; color: var(--text-secondary);
  line-height: 1.6; border-top: 1px solid var(--line-soft);
}
.claim-list li:first-child { border-top: none; }
.claim-list li::before {
  position: absolute; left: 0; top: 11px;
  font-family: var(--font-mono); font-size: 0.78rem;
}
.claim-col.is-yes .claim-list li::before { content: "\2713"; color: var(--data); }
.claim-col.is-no .claim-list li::before { content: "\2715"; color: var(--accent-soft); }
@media (max-width: 860px) { .split-claims { grid-template-columns: 1fr; } }

/* ---------- Validation page: programme status ---------- */
.status-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.status-row {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px;
  padding: 24px 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-secondary);
}
.status-row.is-done { border-left: 3px solid var(--data); }
.status-row.is-progress { border-left: 3px solid var(--accent); }
.status-mark {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; margin-top: 1px;
}
.status-row.is-done .status-mark { border: 1px solid var(--data); color: var(--data); }
.status-row.is-progress .status-mark { border: 1px solid var(--accent); color: var(--accent-soft); }
.status-row h3 { font-size: 1.04rem; margin: 0 0 8px; }
.status-row p { margin: 0; font-size: 0.88rem; line-height: 1.6; }
@media (max-width: 860px) { .status-split { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Validation page: method steps as a visual process ---------- */
.val-steps { counter-reset: vstep; }
.val-step { position: relative; }
.val-step .vs-num {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  color: var(--accent-soft);
  padding-top: 0;
}
@media (min-width: 901px) {
  .val-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .val-step { display: block; background: var(--bg-primary); padding: 26px 22px 28px; border-top: none; }
  .val-step .vs-num { margin-bottom: 16px; }
  .val-step h3 { font-size: 1.02rem; }
  .val-step p { font-size: 0.86rem; }
}

/* ===========================================================
   VALIDATION — approved package implementation
   Components for the Layer A homepage proof block and the
   Layer B validation page. Figures and qualifiers come from the
   APEX-WEBSITE-VALIDATION package; these rules only style them.
   =========================================================== */

/* ---------- Proof metric: long figures + arrow ---------- */
.pm-arrow { color: var(--text-muted); font-size: 0.8em; padding: 0 0.12em; }
.pm-figure.is-long { font-size: 1.28rem; line-height: 1.25; }
@media (max-width: 900px) { .pm-figure.is-long { font-size: 1.15rem; } }

/* ---------- Figures (chart assets from the package) ---------- */
.val-figure {
  margin: 28px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  overflow: hidden;
}
.val-figure img { width: 100%; height: auto; display: block; }
.val-figure figcaption {
  font-size: 0.78rem; color: var(--text-muted);
  padding: 13px 18px 15px; line-height: 1.55;
  border-top: 1px solid var(--line-soft);
}
.val-figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.val-figure-pair .val-figure { margin-top: 28px; }
@media (max-width: 900px) { .val-figure-pair { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Method: five steps ---------- */
@media (min-width: 901px) {
  .val-steps.is-five { grid-template-columns: repeat(5, 1fr); }
  .val-steps.is-five .val-step { padding: 24px 18px 26px; }
  .val-steps.is-five .val-step h3 { font-size: 0.95rem; }
  .val-steps.is-five .val-step p { font-size: 0.82rem; }
}
.vs-plain {
  color: var(--accent-soft); font-style: italic;
  margin-top: 10px !important; font-size: 0.8rem !important;
}

/* ---------- Kicker / pull statement ---------- */
.val-kicker {
  margin-top: 30px; padding: 20px 24px;
  border-left: 3px solid var(--accent);
  background: var(--bg-secondary);
  border-radius: var(--radius);
}
.val-kicker p { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); line-height: 1.55; }
.val-kicker.is-quiet { border-left-color: var(--data); }
.val-kicker.is-quiet p { font-weight: 400; font-size: 0.94rem; color: var(--text-secondary); }
.val-kicker.is-amber { border-left-color: var(--accent-dim); }
.val-kicker.is-amber p { font-weight: 400; font-size: 0.9rem; color: var(--text-secondary); }

/* ---------- "How close did Apex get" — five beats ---------- */
.beats { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.beat {
  background: var(--bg-primary);
  display: grid; grid-template-columns: 44px 1fr 230px;
  gap: 20px; align-items: start; padding: 24px 24px 26px;
}
.beat-n {
  font-family: var(--font-mono); font-size: 0.8rem;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--accent-dim); color: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.beat-body h3 { font-size: 1.05rem; margin: 0 0 9px; }
.beat-body p { margin: 0; font-size: 0.88rem; line-height: 1.62; color: var(--text-secondary); }
.beat-read { margin-top: 10px !important; font-size: 0.8rem !important; color: var(--text-muted) !important; font-style: italic; }
.beat-stat { border-left: 1px solid var(--line); padding-left: 20px; }
.beat-figure { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--accent-soft); display: block; }
.beat-label { display: block; font-size: 0.74rem; color: var(--text-muted); margin-top: 9px; line-height: 1.5; }
@media (max-width: 900px) {
  .beat { grid-template-columns: 34px 1fr; gap: 14px; }
  .beat-stat { grid-column: 2; border-left: none; padding-left: 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }
  .beat-figure { font-size: 1.5rem; }
}

/* ---------- Disclosure: publishable percentages ---------- */
.val-details { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-secondary); }
.val-details summary {
  cursor: pointer; padding: 16px 22px;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--data);
}
.val-details[open] summary { border-bottom: 1px solid var(--line); }
.pct-intro, .pct-note { font-size: 0.82rem; color: var(--text-muted); line-height: 1.62; margin: 18px 22px; }
.pct-table-wrap, .cat-scope-table-wrap, .trace-table-wrap { overflow-x: auto; margin: 0 22px; }
.pct-table, .cat-scope-table, .trace-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 620px; }
.pct-table th, .cat-scope-table th, .trace-table th {
  text-align: left; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted);
  padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 500;
}
.pct-table td, .cat-scope-table td, .trace-table td {
  padding: 12px; border-bottom: 1px solid var(--line-soft);
  color: var(--text-secondary); line-height: 1.55; vertical-align: top;
}
.pct-v { font-family: var(--font-display); color: var(--accent-soft); white-space: nowrap; }
.pct-scope { color: var(--text-muted); font-size: 0.78rem; }
.cat-scope-table-wrap, .trace-table-wrap { margin: 28px 0 0; }
.cat-code { font-family: var(--font-mono); color: var(--data); }
.cat-scope-table tr.is-scored td { color: var(--text-primary); }
.cat-scope-table tr.is-unscored td { color: var(--text-muted); }

/* ---------- Before / After ---------- */
.ba-head { display: grid; grid-template-columns: 190px 1fr 34px 1fr; gap: 18px; margin-bottom: 12px; }
.ba-head-l, .ba-head-r { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ba-head-l { grid-column: 2; color: var(--accent-soft); }
.ba-head-r { grid-column: 4; color: var(--data); }
.ba-grid { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ba-row { background: var(--bg-primary); display: grid; grid-template-columns: 190px 1fr 34px 1fr; gap: 18px; align-items: center; padding: 22px 24px 24px; }
.ba-theme { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.ba-cell { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-secondary); }
.ba-figure { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; display: block; }
.ba-cell.is-before .ba-figure { color: var(--accent-soft); }
.ba-cell.is-after .ba-figure { color: var(--data); }
.ba-scope { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 7px; }
.ba-cell p { margin: 11px 0 0; font-size: 0.83rem; line-height: 1.58; color: var(--text-secondary); }
.ba-arrow { text-align: center; color: var(--text-muted); font-size: 1.1rem; }
@media (max-width: 980px) {
  .ba-head { display: none; }
  .ba-row { grid-template-columns: 1fr; gap: 12px; }
  .ba-arrow { display: none; }
  .ba-cell.is-before::before, .ba-cell.is-after::before {
    display: block; font-family: var(--font-mono); font-size: 0.62rem;
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px;
  }
  .ba-cell.is-before::before { content: "Before"; color: var(--accent-soft); }
  .ba-cell.is-after::before { content: "After"; color: var(--data); }
}

/* ---------- Governance ---------- */
.gov-headline {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 26px 28px; border: 1px solid var(--line);
  border-left: 3px solid var(--data);
  border-radius: var(--radius); background: var(--bg-secondary);
}
.gov-figure { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; color: var(--data); }
.gov-plain { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.gov-qual { margin: 7px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.gov-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 28px; }
.gov-col { background: var(--bg-primary); padding: 24px 22px 26px; }
.claim-head.is-ok { color: var(--data); }
.claim-head.is-warn { color: var(--accent-soft); }
.gov-list { list-style: none; margin: 0; padding: 0; }
.gov-list li { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.gov-list li:first-child { border-top: none; }
.gov-list strong { display: block; font-size: 0.88rem; color: var(--text-primary); }
.gov-list span { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 5px; line-height: 1.55; }
@media (max-width: 860px) { .gov-split { grid-template-columns: 1fr; } }

/* ---------- Confirmation protocol ---------- */
.proto-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.proto-step { background: var(--bg-primary); padding: 24px 20px 26px; }
.proto-n {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--accent-dim); color: var(--accent-soft);
  font-family: var(--font-mono); font-size: 0.78rem; margin-bottom: 14px;
}
.proto-step h3 { font-size: 0.96rem; margin: 0 0 8px; }
.proto-step p { margin: 0; font-size: 0.83rem; line-height: 1.58; color: var(--text-secondary); }
@media (max-width: 900px) { .proto-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .proto-steps { grid-template-columns: 1fr; } }
.conf-result {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 28px; padding: 24px 28px;
  border: 1px solid var(--line); border-left: 3px solid var(--data);
  border-radius: var(--radius); background: var(--bg-secondary);
}
.conf-figure { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--data); }
.conf-label { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.conf-qual { margin: 7px 0 0; font-size: 0.8rem; color: var(--accent-soft); font-style: italic; }

/* ---------- Held-out ---------- */
.held-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.held-col { padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-primary); }
.held-col.is-flag { border-left: 3px solid var(--accent); background: var(--bg-secondary); }
.held-col h3 { font-size: 1.02rem; margin: 0 0 10px; }
.held-col p { margin: 0; font-size: 0.88rem; line-height: 1.62; color: var(--text-secondary); }
@media (max-width: 860px) { .held-split { grid-template-columns: 1fr; } }

/* ---------- Misses ---------- */
.proof-tag.is-warn { color: var(--accent-soft); border-color: var(--accent-dim); }

/* ---------- Limitations ---------- */
.lim-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lim-list li { background: var(--bg-primary); padding: 20px 22px 22px; }
.lim-list strong { display: block; font-size: 0.9rem; color: var(--text-primary); }
.lim-list span { display: block; font-size: 0.83rem; color: var(--text-muted); margin-top: 7px; line-height: 1.58; }
@media (max-width: 860px) { .lim-list { grid-template-columns: 1fr; } }

/* ---------- Motion-capture wording frame ---------- */
.mocap-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 24px; }
.mocap-col { background: var(--bg-primary); padding: 22px 22px 24px; }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.58; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.mini-list li:first-child { border-top: none; }
@media (max-width: 860px) { .mocap-frame { grid-template-columns: 1fr; } }

/* ---------- Validation: mobile refinements ---------- */

/* Charts stay legible on small screens: pan horizontally rather than shrink
   dense axis labels into illegibility. */
@media (max-width: 720px) {
  .val-figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .val-figure img { min-width: 620px; }
  .val-figure figcaption { min-width: 0; position: sticky; left: 0; }
  .val-figure::after {
    content: "Swipe to see the full chart \2192";
    display: block; position: sticky; left: 0;
    font-family: var(--font-mono); font-size: 0.62rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); padding: 0 18px 12px;
  }
}

/* Tables stack into labelled rows on small screens instead of clipping. */
@media (max-width: 720px) {
  .pct-table-wrap, .cat-scope-table-wrap, .trace-table-wrap { overflow-x: visible; }
  .pct-table, .cat-scope-table, .trace-table { min-width: 0; display: block; }
  .pct-table thead, .cat-scope-table thead, .trace-table thead { display: none; }
  .pct-table tbody, .cat-scope-table tbody, .trace-table tbody,
  .pct-table tr, .cat-scope-table tr, .trace-table tr { display: block; }
  .pct-table tr, .cat-scope-table tr, .trace-table tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 6px 14px 10px; margin-bottom: 10px; background: var(--bg-primary);
  }
  .pct-table td, .cat-scope-table td, .trace-table td {
    display: block; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  }
  .pct-table tr td:last-child, .cat-scope-table tr td:last-child,
  .trace-table tr td:last-child { border-bottom: none; }
  .pct-table td::before, .cat-scope-table td::before, .trace-table td::before {
    content: attr(data-label); display: block;
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 4px;
  }
  .pct-table-wrap, .cat-scope-table-wrap { margin-left: 0; margin-right: 0; }
}

/* An odd number of limitations must not leave an empty grid cell. */
.lim-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }


/* ===========================================================
   VALIDATION v2 — EDITORIAL / EVIDENCE SYSTEM
   Presentation layer for validation.html. Numbers, scopes and
   qualifiers still come from the APEX-WEBSITE-VALIDATION
   package — these rules only decide how they are staged.

   Design intent: thin rules and negative space instead of
   repeated bordered cards; one oversized evidence moment per
   section; every scope qualifier physically attached to the
   figure it qualifies.
   =========================================================== */

.vpage { --vx-hair: var(--line); --vx-ink: var(--bg-primary); }
.vpage section { padding: clamp(76px, 8.5vw, 132px) 0; }
.vpage section.section-alt { --vx-ink: var(--bg-secondary); }
/* The two sticky bars stack: the site header, then this page's anchor nav.
   assets/validation.js measures the real header height and writes it to
   --vx-stick-top (and the combined height to --vx-anchor-offset), because the
   header grows and shrinks with the button and webfont metrics. The literal
   fallbacks below are what applies before the script runs, or without it. */
.vpage section[id] { scroll-margin-top: var(--vx-anchor-offset, 128px); }

/* ---------- In-page validation nav ---------- */
.vx-nav {
  position: sticky; top: var(--vx-stick-top, 75px); z-index: 40;
  background: rgba(19, 14, 11, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.vx-nav-inner {
  display: flex; align-items: center; gap: 26px;
  overflow-x: auto; scrollbar-width: none;
  padding: 11px 24px; max-width: 1160px; margin: 0 auto;
}
.vx-nav-inner::-webkit-scrollbar { display: none; }
.vx-nav a {
  font-family: var(--font-mono); font-size: 0.73rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
  padding: 5px 0; border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.vx-nav a:hover { color: var(--text-secondary); }
.vx-nav a.is-here { color: var(--accent-soft); border-bottom-color: var(--accent); }
@media (max-width: 900px) {
  /* Padding moves from the bar onto the links, so the tap target clears 40px
     without making the bar itself any taller. */
  .vx-nav-inner { gap: 20px; padding: 3px 18px; }
  .vx-nav a { font-size: 0.7rem; letter-spacing: 0.1em; padding: 12px 0; }
}

/* ---------- Editorial section head (asymmetric) ---------- */
.vx-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px); align-items: end;
  margin-bottom: clamp(38px, 5vw, 64px);
}
.vx-head > :last-child { padding-bottom: 4px; }
.vx-head h2 { font-size: clamp(1.85rem, 3.5vw, 2.9rem); letter-spacing: -0.005em; }
.vx-head p { margin: 0; font-size: clamp(0.95rem, 1.15vw, 1.05rem); color: var(--text-secondary); line-height: 1.66; }
.vx-head.is-solo { grid-template-columns: 1fr; max-width: 800px; }
@media (max-width: 860px) {
  .vx-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .vx-head > :last-child { padding-bottom: 0; }
}

/* Hairline label — replaces box headers */
.vx-rule {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 0.73rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 22px;
}
.vx-rule::after { content: ""; flex: 1; height: 1px; background: var(--vx-hair); }
.vx-rule.is-accent { color: var(--accent-soft); }
.vx-rule.is-data { color: var(--data); }

/* ---------- Hero ---------- */
.vx-hero { padding-top: clamp(52px, 6vw, 92px) !important; padding-bottom: clamp(48px, 5.5vw, 80px) !important; }
.vx-hero h1 {
  font-size: clamp(2.15rem, 5.4vw, 4.05rem);
  text-transform: none; letter-spacing: -0.022em; line-height: 1.03;
  max-width: 17ch;
}
.vx-hero h1 em { font-style: normal; color: var(--accent-soft); }
.vx-hero-lede { margin: 26px 0 0; max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.62; color: var(--text-secondary); }
.vx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); align-items: end; }
.vx-hero-aside { border-left: 1px solid var(--vx-hair); padding-left: clamp(20px, 3vw, 34px); }
.vx-hero-aside p { margin: 0; font-size: 0.9rem; line-height: 1.68; color: var(--text-muted); }
.vx-hero-aside p + p { margin-top: 14px; }
.vx-hero-aside strong { color: var(--text-primary); font-weight: 600; }
@media (max-width: 860px) {
  .vx-hero-grid { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .vx-hero-aside { border-left: none; border-top: 1px solid var(--vx-hair); padding-left: 0; padding-top: 22px; }
  .vx-hero h1 { max-width: none; }
}

/* ---------- Featured quote ---------- */
.vx-quote {
  margin: clamp(44px, 6vw, 76px) 0 0;
  border-top: 1px solid var(--vx-hair);
  padding-top: clamp(26px, 3vw, 38px);
  max-width: 920px;
}
.vx-quote blockquote {
  margin: 0; font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem); line-height: 1.2;
  letter-spacing: 0.005em; color: var(--text-primary);
}
.vx-quote blockquote span { color: var(--accent-soft); }
.vx-quote cite {
  display: block; font-style: normal; margin-top: 14px;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}

/* ---------- Connected sequence (protocol / process) ---------- */
.vx-seq { --vx-n: 5; --vx-node: 13px; --vx-gap: 26px; display: grid; gap: var(--vx-gap); }
.vx-seq.is-4 { --vx-n: 4; }
.vx-seq-item { position: relative; min-width: 0; }
.vx-seq-item::before, .vx-seq-item::after { content: ""; position: absolute; }
.vx-seq-item::before { background: var(--vx-hair); }
.vx-seq-item::after {
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.vx-seq-item:last-child::before, .vx-seq-item:last-child::after { display: none; }
.vx-seq.is-live .vx-seq-item::after { transform: scaleX(1); }
.vx-seq-item:nth-child(2)::after { transition-delay: 0.18s; }
.vx-seq-item:nth-child(3)::after { transition-delay: 0.36s; }
.vx-seq-item:nth-child(4)::after { transition-delay: 0.54s; }
.vx-seq-item:nth-child(5)::after { transition-delay: 0.72s; }

.vx-seq-node {
  position: relative; z-index: 1; display: block;
  width: var(--vx-node); height: var(--vx-node);
  border: 1px solid var(--accent-dim); background: var(--vx-ink);
  transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.vx-seq.is-live .vx-seq-node { border-color: var(--accent); background: var(--accent); }
.vx-seq.is-live .vx-seq-item:nth-child(2) .vx-seq-node { transition-delay: 0.18s; }
.vx-seq.is-live .vx-seq-item:nth-child(3) .vx-seq-node { transition-delay: 0.36s; }
.vx-seq.is-live .vx-seq-item:nth-child(4) .vx-seq-node { transition-delay: 0.54s; }
.vx-seq.is-live .vx-seq-item:nth-child(5) .vx-seq-node { transition-delay: 0.72s; }
.vx-seq-item.is-key .vx-seq-node { border-radius: 50%; }
.vx-seq.is-live .vx-seq-item.is-key .vx-seq-node { box-shadow: 0 0 0 4px rgba(226, 83, 27, 0.16); }

.vx-seq-step {
  display: block; margin-top: 18px;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.vx-seq-item h3 { font-size: clamp(0.98rem, 1.2vw, 1.08rem); margin: 9px 0 10px; text-transform: none; letter-spacing: -0.005em; line-height: 1.24; }
.vx-seq-item p { margin: 0; font-size: 0.86rem; line-height: 1.62; color: var(--text-muted); }
.vx-seq-plain {
  display: block; margin-top: 12px;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.05em; color: var(--accent-soft);
}
.vx-seq-item.is-key .vx-seq-plain { color: var(--data); }

@media (min-width: 861px) {
  .vx-seq { grid-template-columns: repeat(var(--vx-n), minmax(0, 1fr)); }
  .vx-seq-item::before, .vx-seq-item::after {
    top: calc(var(--vx-node) / 2); height: 1px;
    left: calc(var(--vx-node) + 8px); right: calc(-1 * (var(--vx-gap) + 8px));
  }
}
@media (max-width: 860px) {
  .vx-seq { grid-template-columns: 1fr; gap: 0; }
  .vx-seq-item { padding-left: 30px; padding-bottom: 30px; }
  .vx-seq-item:last-child { padding-bottom: 0; }
  .vx-seq-item::before, .vx-seq-item::after {
    left: calc(var(--vx-node) / 2 - 0.5px); width: 1px;
    top: calc(var(--vx-node) + 8px); bottom: 8px; height: auto;
  }
  .vx-seq-item::after { transform: scaleY(0); transform-origin: top; }
  .vx-seq.is-live .vx-seq-item::after { transform: scaleY(1); }
  .vx-seq-node { position: absolute; left: 0; top: 4px; }
  .vx-seq-step { margin-top: 0; }
}

/* Sequence variant carrying a small diagram above each label */
.vx-seq-art {
  display: block; width: 100%; height: auto; max-width: 190px;
  margin-bottom: 20px; overflow: visible;
}
.vx-seq-art .st-line { fill: none; stroke: var(--line); stroke-width: 1; }
.vx-seq-art .st-ink { fill: none; stroke: var(--text-muted); stroke-width: 1.25; }
.vx-seq-art .st-hi { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.vx-seq-art .st-data { fill: none; stroke: var(--data); stroke-width: 1.25; }
.vx-seq-art .sf-hi { fill: var(--accent); }
.vx-seq-art .sf-data { fill: var(--data); }
.vx-seq-art .sf-mute { fill: var(--text-muted); }
@media (max-width: 860px) { .vx-seq-art { max-width: 150px; margin-bottom: 16px; } }

/* ---------- Oversized evidence moment ---------- */
.vx-stat-fig {
  display: block; font-family: var(--font-display);
  font-size: clamp(3.2rem, 11vw, 8rem); line-height: 0.86;
  letter-spacing: -0.035em; color: var(--accent-soft);
}
.vx-stat-fig.is-data { color: var(--data); }
.vx-stat-fig .vx-sm { font-size: 0.4em; letter-spacing: -0.01em; color: var(--text-muted); }
.vx-stat-label {
  display: block; margin-top: 20px;
  font-size: clamp(1rem, 1.5vw, 1.22rem); font-weight: 600;
  color: var(--text-primary); line-height: 1.32; max-width: 26ch;
}

/* Scope chip — never detaches from its figure */
.vx-scope {
  display: block; margin-top: 16px; padding: 10px 14px;
  border: 1px solid var(--vx-hair); border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.76rem;
  letter-spacing: 0.04em; line-height: 1.72; color: var(--text-secondary);
  max-width: 52ch;
}
.vx-scope.is-data { border-left-color: var(--data); }
.vx-scope b { color: var(--text-primary); font-weight: 500; }

/* Status chips */
.vx-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 11px; border: 1px solid var(--vx-hair); border-radius: 999px;
  color: var(--text-muted);
}
.vx-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.vx-chip.is-pass { color: var(--data); border-color: rgba(111, 163, 156, 0.42); }
.vx-chip.is-miss { color: var(--accent-soft); border-color: var(--accent-dim); }
.vx-chip.is-withheld { color: var(--text-secondary); }
.vx-chip.is-retired {
  color: var(--text-muted);
  background: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(140, 128, 115, 0.1) 5px 10px);
}

/* ---------- "So we hid that information" — redaction moment ---------- */
.vx-redact { margin-top: clamp(48px, 6vw, 84px); }
.vx-redact-line {
  position: relative; display: inline-block;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.5rem, 4.4vw, 3.3rem); line-height: 1.05;
  letter-spacing: -0.012em; color: var(--text-primary);
}
.vx-redact-line::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: 8%; bottom: 8%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}
.vx-redact.is-live .vx-redact-line::after { transform: scaleX(1); transform-origin: right; animation: vxWipe 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes vxWipe {
  0%   { transform: scaleX(0); transform-origin: left; }
  48%  { transform: scaleX(1); transform-origin: left; }
  52%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
.vx-redact-after {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px); margin-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--vx-hair); padding-top: 28px;
}
.vx-redact-after p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); }
.vx-redact-after p b { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 10px; font-weight: 400; }
@media (max-width: 760px) { .vx-redact-after { grid-template-columns: 1fr; gap: 22px; } }

.vx-question {
  margin-top: clamp(38px, 5vw, 60px);
  border-left: 2px solid var(--data); padding-left: clamp(18px, 2.5vw, 28px);
  max-width: 68ch;
}
.vx-question p {
  margin: 0; font-size: clamp(1.02rem, 1.7vw, 1.35rem);
  line-height: 1.48; color: var(--text-primary); font-weight: 600;
}

/* ---------- Progression track ("How close did Apex get") ---------- */
.vx-track { display: flex; flex-direction: column; }
.vx-beat {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(30px, 3.6vw, 46px) 0;
  border-top: 1px solid var(--vx-hair);
  align-items: start;
}
.vx-beat:first-child { border-top: none; padding-top: 0; }
.vx-beat-idx {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  padding-top: 6px;
}
.vx-beat-idx span { display: block; color: var(--accent-soft); font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
.vx-beat h3 { font-size: clamp(1.1rem, 1.9vw, 1.5rem); margin: 0 0 14px; letter-spacing: -0.005em; }
.vx-beat p { margin: 0; font-size: 0.93rem; line-height: 1.68; color: var(--text-secondary); }
.vx-beat p + p { margin-top: 12px; }
.vx-beat-read { font-size: 0.86rem !important; color: var(--text-muted) !important; }
.vx-beat-side { padding-top: 4px; }
.vx-beat-fig {
  display: block; font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 0.94;
  letter-spacing: -0.028em; color: var(--accent-soft);
}
.vx-beat-fig .vx-sm { font-size: 0.42em; color: var(--text-muted); letter-spacing: 0; }
.vx-beat-sub { display: block; margin-top: 12px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }
.vx-beat-side .vx-chip { margin-bottom: 14px; }
.vx-beat-fails { list-style: none; margin: 16px 0 0; padding: 0; }
.vx-beat-fails li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--line-soft); font-size: 0.89rem; color: var(--text-secondary); line-height: 1.6; }
.vx-beat-fails li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 1px; background: var(--accent); }
.vx-beat-fails b { color: var(--text-primary); font-weight: 600; }

/* The frozen-baseline beat breaks out of the track */
.vx-beat.is-feature { grid-template-columns: 78px minmax(0, 1fr); }
.vx-beat.is-feature .vx-beat-side { grid-column: 2; padding-top: 26px; }
.vx-beat.is-feature .vx-beat-zero {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 64px);
  border-top: 1px solid var(--vx-hair); padding-top: 26px;
}
.vx-beat-zero > div { min-width: 120px; }
.vx-beat-zero .vx-z {
  display: block; font-family: var(--font-display);
  font-size: clamp(3rem, 8.5vw, 5.6rem); line-height: 0.84;
  letter-spacing: -0.04em; color: var(--data);
}
.vx-beat-zero .vx-zl { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 860px) {
  .vx-beat, .vx-beat.is-feature { grid-template-columns: 1fr; gap: 16px; }
  .vx-beat-idx { padding-top: 0; display: flex; align-items: baseline; gap: 12px; }
  .vx-beat-idx span { margin-bottom: 0; }
  .vx-beat.is-feature .vx-beat-side { grid-column: 1; }
  .vx-beat-side { border-top: 1px solid var(--line-soft); padding-top: 20px; }
  .vx-beat.is-feature .vx-beat-side { border-top: none; padding-top: 6px; }
}

/* ---------- Apex call vs benchmark comparison ---------- */
.vx-cmp { display: flex; flex-direction: column; }
.vx-cmp-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 190px;
  gap: clamp(14px, 2vw, 26px); padding-bottom: 12px;
  border-bottom: 1px solid var(--vx-hair);
}
.vx-cmp-head span { font-family: var(--font-mono); font-size: 0.71rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.vx-cmp-head span:first-child { color: var(--accent-soft); }
.vx-cmp-head span:nth-child(3) { color: var(--data); }
.vx-cmp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 190px;
  gap: clamp(14px, 2vw, 26px); align-items: center;
  padding: clamp(22px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--vx-hair);
}
.vx-cmp-row p { margin: 0; font-size: 0.92rem; line-height: 1.62; color: var(--text-secondary); }
.vx-cmp-row .vx-cmp-apex { border-left: 2px solid var(--accent-dim); padding-left: 16px; }
.vx-cmp-row .vx-cmp-bench { border-left: 2px solid rgba(111, 163, 156, 0.4); padding-left: 16px; }
.vx-cmp-arrow { text-align: center; color: var(--text-muted); font-size: 1rem; }
.vx-cmp-res .vx-chip { margin-bottom: 9px; }
.vx-cmp-res small { display: block; font-size: 0.79rem; color: var(--text-muted); line-height: 1.58; }
@media (max-width: 900px) {
  .vx-cmp-head { display: none; }
  .vx-cmp-row { grid-template-columns: 1fr; gap: 14px; padding: 24px 0 26px; }
  .vx-cmp-arrow { display: none; }
  .vx-cmp-row .vx-cmp-apex::before, .vx-cmp-row .vx-cmp-bench::before {
    display: block; font-family: var(--font-mono); font-size: 0.68rem;
    letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px;
  }
  .vx-cmp-row .vx-cmp-apex::before { content: "Apex call"; color: var(--accent-soft); }
  .vx-cmp-row .vx-cmp-bench::before { content: "Benchmark finding"; color: var(--data); }
}

/* ---------- 13 athletes / 58 runs — one figure ---------- */
.vx-runs { border-top: 1px solid var(--vx-hair); padding-top: clamp(26px, 3vw, 38px); }
.vx-runs-band + .vx-runs-band { margin-top: clamp(28px, 3.4vw, 44px); }
.vx-runs-k {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.vx-runs-k b { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: -0.02em; color: var(--text-primary); font-weight: 400; }
.vx-athletes { display: flex; flex-wrap: wrap; gap: 7px; }
.vx-athletes i { display: block; width: 15px; height: 34px; background: var(--bg-tertiary); border-top: 3px solid var(--text-secondary); }
.vx-runs-join {
  display: flex; align-items: center; gap: 14px; margin: 22px 0;
  font-family: var(--font-mono); font-size: 0.71rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.vx-runs-join::before, .vx-runs-join::after { content: ""; height: 1px; background: var(--vx-hair); }
.vx-runs-join::before { width: 26px; }
.vx-runs-join::after { flex: 1; }
.vx-dots { display: flex; flex-wrap: wrap; gap: 6px; max-width: 720px; }
.vx-dots i {
  display: block; width: 15px; height: 15px; border-radius: 2px;
  background: transparent; border: 1px solid var(--accent-dim);
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.vx-dots.is-live i { opacity: 1; transform: scale(1); }
.vx-dots i.is-first { background: var(--accent); border-color: var(--accent); }
.vx-dots i.is-retest { background: transparent; border-color: rgba(111, 163, 156, 0.65); }
.vx-legend { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 20px; }
.vx-legend span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.8rem; color: var(--text-muted); }
.vx-legend i { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--accent-dim); flex: none; }
.vx-legend i.is-first { background: var(--accent); border-color: var(--accent); }
.vx-legend i.is-retest { border-color: rgba(111, 163, 156, 0.65); }
.vx-runs-note { margin: clamp(24px, 3vw, 34px) 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--text-primary); font-weight: 600; max-width: 56ch; }
@media (max-width: 520px) {
  .vx-athletes i { width: 13px; height: 30px; }
  .vx-dots i { width: 14px; height: 14px; }
}

/* ---------- Governance collapse ---------- */
.vx-collapse { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: clamp(10px, 2vw, 20px); }
.vx-collapse-ends {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-bottom: 6px;
}
.vx-collapse-ends > div:last-child { text-align: right; }
.vx-collapse-fig { display: block; font-family: var(--font-display); font-size: clamp(2.1rem, 6vw, 4rem); line-height: 0.9; letter-spacing: -0.03em; }
.vx-collapse-ends > div:first-child .vx-collapse-fig { color: var(--accent-soft); }
.vx-collapse-ends > div:last-child .vx-collapse-fig { color: var(--data); }
.vx-collapse-lab { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); }
.vx-collapse svg { width: 100%; height: auto; display: block; overflow: visible; }
.vx-collapse .vc-strand {
  fill: none; stroke: url(#vcGrad); stroke-width: 1.4;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  transition: stroke-dashoffset 1.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.vx-collapse.is-live .vc-strand { stroke-dashoffset: 0; }
.vx-collapse .vc-strand:nth-of-type(2) { transition-delay: 0.09s; }
.vx-collapse .vc-strand:nth-of-type(3) { transition-delay: 0.18s; }
.vx-collapse .vc-strand:nth-of-type(4) { transition-delay: 0.27s; }
.vx-collapse .vc-strand:nth-of-type(5) { transition-delay: 0.36s; }
.vx-collapse .vc-strand:nth-of-type(6) { transition-delay: 0.45s; }
.vx-collapse .vc-src { fill: var(--accent); }
.vx-collapse .vc-dst { fill: none; stroke: var(--data); stroke-width: 1.5; opacity: 0; transition: opacity 0.5s ease 0.9s; }
.vx-collapse.is-live .vc-dst { opacity: 1; }
.vx-collapse .vc-base { stroke: var(--line); stroke-width: 1; }
.vx-collapse-caption { margin: 20px 0 0; font-size: 0.86rem; color: var(--text-muted); line-height: 1.62; max-width: 70ch; }

.vx-blocked { list-style: none; margin: clamp(34px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.vx-blocked li { padding: 16px 0; border-top: 1px solid var(--vx-hair); }
.vx-blocked b { display: block; font-size: 0.94rem; color: var(--text-primary); }
.vx-blocked span { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 760px) { .vx-blocked { grid-template-columns: 1fr; } }

/* ---------- Confirmation case strip ---------- */
.vx-cases { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px); margin-top: clamp(30px, 3.6vw, 44px); border-top: 1px solid var(--vx-hair); padding-top: 26px; }
.vx-case-grp { min-width: 150px; }
.vx-case-grp b { display: block; font-size: 0.86rem; color: var(--text-primary); margin-bottom: 4px; }
.vx-case-grp small { display: block; font-size: 0.76rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 11px; }
.vx-case-ticks { display: flex; gap: 6px; }
.vx-case-ticks i {
  display: block; width: 22px; height: 5px; border-radius: 1px;
  background: var(--data); opacity: 0; transform: scaleX(0); transform-origin: left;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.vx-cases.is-live .vx-case-ticks i { opacity: 1; transform: scaleX(1); }

/* ---------- 8-category evidence matrix ---------- */
.vx-matrix { border-top: 1px solid var(--vx-hair); }
.vx-matrix-row {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 168px 168px;
  gap: clamp(12px, 2vw, 24px); align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--vx-hair);
  transition: background 0.2s ease;
}
.vx-matrix-row.is-head { padding: 11px 0; border-bottom-color: var(--line-soft); }
.vx-matrix-row.is-head span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); }
.vx-matrix-code { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--text-muted); }
.vx-matrix-row.is-scored .vx-matrix-code { color: var(--accent-soft); }
.vx-matrix-name { font-size: 0.98rem; color: var(--text-muted); }
.vx-matrix-row.is-scored .vx-matrix-name { color: var(--text-primary); font-weight: 600; }
.vx-cell { display: flex; align-items: center; gap: 10px; font-size: 0.79rem; color: var(--text-muted); }
.vx-cell i { display: block; width: 13px; height: 13px; border-radius: 2px; flex: none; border: 1px solid var(--line); background: transparent; }
.vx-cell.is-yes i { background: var(--accent); border-color: var(--accent); }
.vx-cell.is-yes { color: var(--text-primary); }
.vx-cell.is-part i { background: repeating-linear-gradient(-45deg, rgba(111, 163, 156, 0.85) 0 2px, transparent 2px 4px); border-color: rgba(111, 163, 156, 0.55); }
.vx-cell.is-no i { background: transparent; border-color: var(--line); }
@media (hover: hover) { .vx-matrix-row:not(.is-head):hover { background: rgba(226, 83, 27, 0.035); } }
/* Each cell states its own status in real text, so the matrix still reads
   correctly once the column headers are dropped on narrow screens — and to a
   screen reader, which cannot be relied on to announce generated content. */
@media (max-width: 800px) {
  .vx-matrix-row.is-head { display: none; }
  .vx-matrix-row { grid-template-columns: 58px minmax(0, 1fr); gap: 8px 14px; padding: 18px 0; }
  .vx-cell { grid-column: 2; }
}

/* ---------- Two-column thin-rule lists ---------- */
.vx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
.vx-two h3 {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 6px;
}
.vx-two .is-yes h3 { color: var(--data); }
.vx-two .is-no h3 { color: var(--accent-soft); }
.vx-two ul { list-style: none; margin: 14px 0 0; padding: 0; }
.vx-two li { padding: 14px 0 14px 26px; border-top: 1px solid var(--vx-hair); position: relative; font-size: 0.91rem; line-height: 1.62; color: var(--text-secondary); }
.vx-two li b { color: var(--text-primary); font-weight: 600; }
.vx-two li::before { position: absolute; left: 0; top: 14px; font-family: var(--font-mono); font-size: 0.82rem; }
.vx-two .is-yes li::before { content: "\2713"; color: var(--data); }
.vx-two .is-no li::before { content: "\2014"; color: var(--accent-soft); }
.vx-two-note { margin: 18px 0 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.62; }
@media (max-width: 860px) { .vx-two { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- Failure / fix stories ---------- */
.vx-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.vx-story { border-top: 1px solid var(--vx-hair); padding-top: 24px; }
.vx-story h3 { font-size: 1.02rem; margin: 14px 0 14px; text-transform: none; letter-spacing: -0.005em; line-height: 1.28; }
.vx-story-arc { list-style: none; margin: 0; padding: 0; }
.vx-story-arc li { position: relative; padding: 0 0 16px 24px; font-size: 0.87rem; line-height: 1.58; color: var(--text-secondary); }
.vx-story-arc li:last-child { padding-bottom: 0; }
.vx-story-arc li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dim);
}
.vx-story-arc li:last-child::before { background: var(--data); }
.vx-story-arc li::after { content: ""; position: absolute; left: 6px; top: 15px; bottom: 3px; width: 1px; background: var(--line-soft); }
.vx-story-arc li:last-child::after { display: none; }
.vx-story-arc b { color: var(--text-primary); font-weight: 600; }
@media (max-width: 900px) { .vx-stories { grid-template-columns: 1fr; gap: 0; } .vx-story { margin-top: 30px; } .vx-story:first-child { margin-top: 0; } }

/* ---------- Traceability ---------- */
.vx-trace-line {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.6rem, 4.6vw, 3.4rem); line-height: 1.05;
  letter-spacing: -0.015em; color: var(--text-primary); margin: 0;
}
.vx-trace-line span { color: var(--accent-soft); }

/* ---------- Technical appendix ---------- */
.vx-appendix { border-top: 1px solid var(--vx-hair); }
.vx-appendix > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 0; font-family: var(--font-mono); font-size: 0.76rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-soft);
  border-bottom: 1px solid var(--vx-hair);
}
.vx-appendix > summary::-webkit-details-marker { display: none; }
.vx-appendix > summary::after { content: "\2193"; font-size: 0.95rem; transition: transform 0.25s ease; }
.vx-appendix[open] > summary::after { transform: rotate(180deg); }
.vx-appendix > summary:hover { color: var(--text-primary); }
.vx-app-body { padding-top: clamp(30px, 4vw, 48px); }
.vx-app-block { margin-top: clamp(38px, 4.5vw, 58px); }
.vx-app-block:first-child { margin-top: 0; }
.vx-app-block > h3 {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--data);
  margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--vx-hair);
}
.vx-app-block > p { margin: 16px 0 0; font-size: 0.86rem; color: var(--text-muted); line-height: 1.66; max-width: 78ch; }
.vx-app-block .val-figure { background: var(--bg-primary); }

/* Sub-accordion inside the appendix */
.vx-sub { border: 1px solid var(--vx-hair); border-radius: var(--radius); margin-top: 22px; }
.vx-sub > summary {
  cursor: pointer; list-style: none; padding: 15px 18px;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-secondary);
}
.vx-sub > summary::-webkit-details-marker { display: none; }
.vx-sub > summary::before { content: "+ "; color: var(--accent-soft); }
.vx-sub[open] > summary::before { content: "\2212 "; }
.vx-sub[open] > summary { border-bottom: 1px solid var(--vx-hair); }
.vx-sub-body { padding: 6px 18px 22px; }
.vx-sub-body .val-figure:first-child { margin-top: 22px; }

/* Phase timeline (appendix) */
.vx-phase { list-style: none; margin: 22px 0 0; padding: 0; }
.vx-phase li { position: relative; padding: 0 0 22px 28px; }
.vx-phase li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; border: 1px solid var(--accent-dim); background: var(--vx-ink); }
.vx-phase li:last-child::before { background: var(--data); border-color: var(--data); }
.vx-phase li::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1px; background: var(--line-soft); }
.vx-phase li:last-child::after { display: none; }
.vx-phase-when { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.vx-phase-what { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text-primary); margin-top: 5px; }
.vx-phase p { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--text-muted); }

/* Appendix limitation list — plain rules, no boxes */
.vx-limits { list-style: none; margin: 22px 0 0; padding: 0; }
.vx-limits li { padding: 15px 0; border-top: 1px solid var(--line-soft); }
.vx-limits li:first-child { border-top: none; }
.vx-limits b { display: block; font-size: 0.9rem; color: var(--text-primary); }
.vx-limits span { display: block; margin-top: 6px; font-size: 0.84rem; color: var(--text-muted); line-height: 1.62; }

/* ---------- Scroll reveal (validation page) ---------- */
/* Gated on .vx-js, set by an inline script in the page head: if scripting is
   unavailable nothing is ever hidden in the first place. */
.vx-js .vx-r { opacity: 0; transform: translateY(18px); transition: opacity 0.75s ease, transform 0.75s ease; }
.vx-js .vx-r.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  /* Must match the .vx-js specificity above, or the hidden state wins. */
  .vx-js .vx-r { opacity: 1; transform: none; transition: none; }
  .vx-seq-item::after, .vx-seq-node, .vx-dots i, .vx-case-ticks i,
  .vx-collapse .vc-strand, .vx-collapse .vc-dst, .vx-redact-line::after { transition: none !important; }
  .vx-seq-item::after { transform: scaleX(1); }
  .vx-dots i, .vx-case-ticks i { opacity: 1; transform: none; }
  .vx-collapse .vc-strand { stroke-dashoffset: 0; }
  .vx-collapse .vc-dst { opacity: 1; }
  .vx-redact.is-live .vx-redact-line::after { animation: none; transform: scaleX(0); }
}

/* ---------- Proof numbers band (thin rules, no boxes) ---------- */
.vx-proof {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 46px);
}
.vx-proof li { border-top: 2px solid var(--accent); padding-top: 20px; }
.vx-proof li.is-data { border-top-color: var(--data); }
.vx-proof-fig {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height: 0.92;
  letter-spacing: -0.03em; color: var(--accent-soft);
}
.vx-proof li.is-data .vx-proof-fig { color: var(--data); }
.vx-proof-fig.is-long { font-size: clamp(1.12rem, 1.9vw, 1.55rem); line-height: 1.24; letter-spacing: -0.008em; }
.vx-proof-label { display: block; margin-top: 16px; font-size: 0.92rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.vx-proof-note { display: block; margin-top: 8px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.58; }
@media (max-width: 900px) { .vx-proof { grid-template-columns: 1fr 1fr; gap: 28px 24px; } }
@media (max-width: 460px) { .vx-proof { grid-template-columns: 1fr; } }

/* ---------- Confirmation result block ---------- */
.vx-conf {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 72px); align-items: start;
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--vx-hair); padding-top: clamp(34px, 4vw, 54px);
}
.vx-conf .vx-cases {
  border-top: none; padding-top: 0; margin-top: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 34px);
}
@media (max-width: 860px) { .vx-conf { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 480px) { .vx-conf .vx-cases { grid-template-columns: 1fr; } }

/* ---------- Evidence matrix legend ---------- */
.vx-matrix-key { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 24px; }
.vx-matrix-key .vx-cell { font-size: 0.78rem; }

/* ---------- Diagram stroke tuning ---------- */
.vx-seq-art .st-line { stroke: rgba(140, 128, 115, 0.5); }

/* ---------- Corrections to the collapse strands ---------- */
.vx-collapse .vc-strand { stroke-dasharray: 900; stroke-dashoffset: 900; }
.vx-collapse.is-live .vc-strand { stroke-dashoffset: 0; }

/* ---------- Validation: foundation / evolution ---------- */
.vx-two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vx-panel {
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
}
.vx-panel.is-accent { border-left: 3px solid var(--accent); }
.vx-panel-tag {
  display: block; font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--data); margin-bottom: 14px;
}
.vx-panel.is-accent .vx-panel-tag { color: var(--accent-soft); }
.vx-panel h3 { font-size: 1.12rem; margin: 0 0 12px; }
.vx-panel p { font-size: 0.92rem; line-height: 1.68; margin: 0 0 12px; }
.vx-panel-note {
  font-size: 0.85rem !important; color: var(--text-muted);
  border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 16px !important;
}
.vx-panel-list { list-style: none; margin: 4px 0 0; padding: 0; }
.vx-panel-list li {
  position: relative; padding: 9px 0 9px 18px;
  font-size: 0.89rem; line-height: 1.6; color: var(--text-secondary);
  border-top: 1px solid var(--line-soft);
}
.vx-panel-list li:first-child { border-top: none; }
.vx-panel-list li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--accent);
}
.vx-panel-list b { color: var(--text-primary); }

.vx-evo { margin-top: 40px; }
.vx-evo-label {
  display: block; font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 16px;
}
.vx-evo-track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.vx-evo-track li {
  background: var(--bg-primary); padding: 20px 18px 22px;
  display: flex; flex-direction: column;
}
.vx-evo-n {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--accent-soft); margin-bottom: 10px;
}
.vx-evo-track b { font-size: 0.92rem; color: var(--text-primary); margin-bottom: 6px; }
.vx-evo-track span:last-child { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; }
@media (max-width: 900px) {
  .vx-two-up { grid-template-columns: 1fr; gap: 16px; }
  .vx-evo-track { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .vx-evo-track { grid-template-columns: 1fr; } }

/* ---------- Validation: retired-figure marking ---------- */
.pct-retired {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bg-primary); background: var(--text-muted);
  padding: 2px 6px; border-radius: 2px;
  margin-right: 8px; vertical-align: middle;
}
tr.is-retired-row { opacity: 0.72; }
tr.is-retired-row .pct-v { color: var(--text-muted); }
.vx-retired-banner {
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  padding: 14px 16px;
  font-size: 0.84rem; line-height: 1.6; color: var(--text-secondary);
  margin: 0 0 18px;
}
.vx-retired-banner b { color: var(--text-primary); }

/* ---------- Homepage: intervention decision chain ---------- */
.decision-chain {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  counter-reset: dc;
}
.decision-chain li {
  background: var(--bg-primary); padding: 22px 18px 24px;
  display: flex; flex-direction: column; position: relative;
}
.decision-chain li.is-terminal { background: var(--bg-tertiary); }
.dc-step {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 12px; display: block;
}
.decision-chain li.is-terminal .dc-step { color: var(--data); }
.decision-chain p { margin: 0; font-size: 0.82rem; line-height: 1.58; color: var(--text-muted); }
@media (max-width: 1100px) { .decision-chain { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .decision-chain { grid-template-columns: 1fr; } }

/* ---------- Homepage: intervention library summary ---------- */
.lib-summary {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 22px; margin-top: 22px;
}
.lib-figure, .lib-families {
  background: var(--bg-primary); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px 30px;
}
.lib-figure { border-left: 3px solid var(--accent); }
.lib-n { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--accent-soft); display: block; }
.lib-n-label { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-top: 10px; }
.lib-n-note { font-size: 0.85rem; color: var(--text-muted); line-height: 1.62; margin: 14px 0 0; }
.lib-fam-label {
  display: block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--data); margin-bottom: 14px;
}
.lib-families ul { list-style: none; margin: 0; padding: 0; }
.lib-families li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--line-soft);
  font-size: 0.9rem; color: var(--text-secondary);
}
.lib-families li:first-child { border-top: none; }
.lib-families li b { color: var(--text-primary); font-weight: 600; }
.lib-families li span { font-family: var(--font-mono); font-size: 0.86rem; color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.lib-fam-note { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }
@media (max-width: 860px) { .lib-summary { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Why Apex ---------- */
.wa-hero { border-bottom: 1px solid var(--line); }
.wa-problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wa-problem { background: var(--bg-primary); padding: 26px 24px 28px; }
.wa-p-tag { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 13px; }
.wa-problem h3 { font-size: 1.06rem; margin: 0 0 9px; }
.wa-problem p { font-size: 0.88rem; line-height: 1.62; margin: 0; }
@media (max-width: 860px) { .wa-problems { grid-template-columns: 1fr; } }

.wa-slot, .wa-media-slot {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-secondary);
}
.wa-slot { padding: 30px 28px 32px; }
.wa-slot-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft);
  border: 1px solid var(--accent-dim); border-radius: 2px;
  padding: 4px 9px; margin-bottom: 16px;
}
.wa-slot p { font-size: 0.92rem; line-height: 1.66; margin: 0 0 10px; max-width: 66ch; }
.wa-slot-note { font-size: 0.82rem !important; color: var(--text-muted); }
.wa-media-slot {
  margin-top: 16px; aspect-ratio: 16 / 7;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  text-align: center; padding: 20px;
}

.wa-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wa-chain li { background: var(--bg-primary); padding: 22px 20px 24px; display: flex; flex-direction: column; }
.wa-c-n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-soft); margin-bottom: 11px; }
.wa-chain b { font-size: 0.96rem; color: var(--text-primary); margin-bottom: 7px; }
.wa-chain span:last-child { font-size: 0.83rem; color: var(--text-muted); line-height: 1.58; }
@media (max-width: 900px) { .wa-chain { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .wa-chain { grid-template-columns: 1fr; } }

.wa-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wa-proof-card { background: var(--bg-primary); padding: 24px 22px 26px; display: flex; flex-direction: column; transition: background .18s ease; }
.wa-proof-card:hover { background: var(--bg-tertiary); }
.wa-pc-tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--data); margin-bottom: 12px; }
.wa-proof-card h3 { font-size: 1rem; margin: 0 0 9px; }
.wa-proof-card p { font-size: 0.84rem; line-height: 1.58; color: var(--text-muted); margin: 0 0 16px; flex-grow: 1; }
.wa-pc-go { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--accent-soft); }
@media (max-width: 1000px) { .wa-proof { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .wa-proof { grid-template-columns: 1fr; } }

/* ---------- Why Apex: two-library architecture ---------- */
.lib-arch { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lib-arch-col {
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
}
.lib-arch-col.is-accent { border-left: 3px solid var(--data); }
.lib-arch-col:not(.is-accent) { border-left: 3px solid var(--accent); }
.lib-arch-tag {
  display: block; font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 14px;
}
.lib-arch-col.is-accent .lib-arch-tag { color: var(--data); }
.lib-arch-n {
  font-family: var(--font-display); font-size: 2.5rem; line-height: 1;
  color: var(--text-primary); display: block; margin-bottom: 12px;
}
.lib-arch-col h3 { font-size: 1.08rem; margin: 0 0 10px; }
.lib-arch-col > p { font-size: 0.89rem; line-height: 1.64; margin: 0 0 16px; }
.lib-arch-list { list-style: none; margin: 0; padding: 0; }
.lib-arch-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--line-soft);
  font-size: 0.87rem; color: var(--text-secondary);
}
.lib-arch-list li:first-child { border-top: none; }
.lib-arch-list b { color: var(--text-primary); font-weight: 600; }
.lib-arch-list span {
  font-family: var(--font-mono); font-size: 0.84rem;
  color: var(--accent-soft); font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.lib-arch-col.is-accent .lib-arch-list span { color: var(--data); }
.lib-arch-list.is-compact li { padding: 7px 0; font-size: 0.83rem; }
.lib-arch-note {
  font-size: 0.82rem; color: var(--text-muted); line-height: 1.6;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft);
}

.lib-arch-total {
  display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center;
  margin-top: 22px; padding: 28px 30px;
  background: var(--bg-secondary);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.lat-n {
  font-family: var(--font-display); font-size: 3.1rem; line-height: 1;
  color: var(--accent-soft); display: block;
}
.lat-l {
  display: block; font-size: 0.86rem; color: var(--text-primary);
  margin-top: 9px; max-width: 22ch;
}
.lib-arch-total p { margin: 0; font-size: 0.87rem; line-height: 1.66; color: var(--text-muted); }
@media (max-width: 900px) {
  .lib-arch { grid-template-columns: 1fr; gap: 16px; }
  .lib-arch-total { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; }
}

/* ---------- Why Apex: supplemental family disclosure ---------- */
.lib-arch-details {
  margin-top: 18px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}
.lib-arch-details > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--data);
  padding: 6px 0;
  display: flex; align-items: center; gap: 9px;
}
.lib-arch-details > summary::-webkit-details-marker { display: none; }
.lib-arch-details > summary::before {
  content: "+"; font-size: 0.9rem; line-height: 1;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 2px;
}
.lib-arch-details[open] > summary::before { content: "\2212"; }
.lib-arch-details > summary:hover { color: var(--text-primary); }
.lib-arch-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lib-arch-details-body { padding-top: 10px; }

/* ---------- Get Ready: pitching-angle reference ---------- */
.angle-ref { margin-top: 8px; }
.angle-ref-head { margin-bottom: 18px; }
.angle-ref-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.2vw, 1.35rem);
  text-transform: uppercase; letter-spacing: 0.01em;
  margin: 0 0 7px;
}
.angle-ref-head p { margin: 0; font-size: 0.92rem; color: var(--text-muted); }

.angle-stage {
  position: relative;
  aspect-ratio: 4 / 3;              /* matches the 1600x1200 sources exactly */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-void);
}
.angle-stage img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
  transition: opacity .2s ease;
}
.angle-stage img.is-swapping { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .angle-stage img { transition: none; }
  .angle-stage img.is-swapping { opacity: 1; }
}

.angle-inimage, .angle-progress {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(11,8,5,0.72);
  border: 1px solid rgba(245,239,230,0.14);
  border-radius: 2px;
  padding: 5px 9px;
  pointer-events: none;
}
.angle-inimage { left: 12px; bottom: 12px; color: var(--text-primary); }
.angle-progress { right: 12px; top: 12px; color: var(--data); }

.angle-instruction {
  margin: 16px 0 0;
  font-size: 0.95rem; line-height: 1.62;
  color: var(--text-secondary);
  max-width: 66ch;
  min-height: 3.2em;                /* keeps tab row from jumping between views */
}

.angle-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.angle-tab {
  display: flex; align-items: center; gap: 9px;
  min-height: 50px;
  padding: 10px 13px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.angle-tab:hover { border-color: var(--accent-dim); }
.angle-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.angle-tab.is-active {
  border-color: var(--accent);
  background: rgba(226,83,27,0.12);
}
.angle-tab-n {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.72rem;
  border: 1px solid var(--line);
  color: var(--text-muted);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.angle-tab.is-active .angle-tab-n {
  background: var(--accent); border-color: var(--accent); color: #17110D;
}
.angle-tab-l {
  font-size: 0.86rem; line-height: 1.25;
  color: var(--text-secondary);
}
.angle-tab.is-active .angle-tab-l { color: var(--text-primary); font-weight: 600; }

/* 2x2 on phones so no angle is ever hidden off-screen */
@media (max-width: 700px) {
  .angle-tabs { grid-template-columns: 1fr 1fr; }
  .angle-instruction { min-height: 4.6em; font-size: 0.9rem; }
}
@media (max-width: 380px) {
  .angle-tab { padding: 9px 10px; gap: 7px; }
  .angle-tab-l { font-size: 0.8rem; }
}

/* ---------- Upload flow: per-angle reference photo ----------
   Display-only companion to the Get Ready viewer above. Shown inside each
   pitching upload card in intake.html / reassessment.html so the athlete sees
   the camera position for the exact angle they are uploading. Shares the
   .angle-stage visual language (4:3 frame, mono overlay chips) deliberately.
   Touches no upload control, no form state, no intake identifier. */
.upload-ref { margin: 0 0 14px; }
.upload-ref-stage {
  position: relative;
  aspect-ratio: 4 / 3;              /* matches the 1600x1200 sources exactly */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-void);
}
.upload-ref-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
}
/* Disclaimer chip only. The angle name is NOT repeated here — the card title
   above the photo is the single human-facing name for the upload. */
.upload-ref-badge {
  position: absolute;
  right: 10px; top: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--data);
  background: rgba(11,8,5,0.72);
  border: 1px solid rgba(245,239,230,0.14);
  border-radius: 2px;
  padding: 4px 8px;
  pointer-events: none;
}

/* Above the phone breakpoint the card is wide enough that a full-width 4:3
   photo would tower over the upload button, so cap the reference there. Phones
   are deliberately excluded — see the full-bleed rule below. */
@media (min-width: 561px) {
  .upload-ref-stage { max-width: 420px; }
}

.upload-ref-instruction {
  margin: 10px 0 0;
  font-size: 0.85rem; line-height: 1.55;
  color: var(--text-secondary);
  max-width: 62ch;
}

/* Phones: the photo bleeds to the card's edges so it's near-full-width and
   actually readable, while the instruction text stays aligned with the rest of
   the card and the upload button stays immediately below. The bleed must match
   .video-card's horizontal padding (declared per page in intake.html /
   reassessment.html); override --upload-ref-bleed there if that padding changes. */
.upload-ref { --upload-ref-bleed: 18px; }
@media (max-width: 560px) {
  .upload-ref-stage {
    margin-left: calc(var(--upload-ref-bleed) * -1);
    margin-right: calc(var(--upload-ref-bleed) * -1);
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
  }
  .upload-ref-instruction { font-size: 0.82rem; }
  .upload-ref-badge { font-size: 0.58rem; padding: 3px 7px; }
}