/* ProJudge — projudge.app
   Plain CSS, no build step, no dependencies. Colour and type are the product's
   own tokens (packages/announcer/src/ui/tokens.ts and
   packages/judge/Sources/ProJudgeUI/Theme.swift) so the site and the software
   read as one system. */

/* The product's own faces: Archivo for voice, JetBrains Mono for data. */
@font-face { font-family: Archivo; src: url("assets/fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Archivo; src: url("assets/fonts/archivo-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Archivo; src: url("assets/fonts/archivo-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ground: #0b0e12;
  --panel: #12161a;
  --raised: #151b21;
  --ink: #e6eaee;
  --ink-2: #b7c1ca;
  --ink-3: #7a8894;
  --ink-4: #55606b;
  --line: rgba(230, 234, 238, .09);
  --line-2: rgba(230, 234, 238, .16);
  --accent: #5a96dc;
  --accent-lift: #7fb4e0;
  --ok: #57b876;
  --warn: #e0b96a;
  --bad: #e06a5e;
  --gold: #d9a94e;
  --sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad: clamp(20px, 5vw, 64px);
  --head-h: 62px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--pad); }

/* Mono micro-label — lifted from the product's own chrome. */
.label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent-lift); outline-offset: 3px;
}

section { padding-block: clamp(64px, 10vw, 118px); }
.rule { border-top: 1px solid var(--line); }
.sec-head { max-width: 64ch; margin-bottom: 44px; }
.sec-head .label { margin-bottom: 16px; }
.sec-head h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05; margin-bottom: 16px; }
.sec-head p { color: var(--ink-2); font-size: clamp(16px, 1.9vw, 19px); }
.sec-head strong { color: var(--ink); font-weight: 600; }

/* ---------------- top bar ---------------- */
header.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.mark { display: flex; align-items: baseline; gap: 9px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.mark .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; transform: translateY(-2px); }
.top nav { display: flex; align-items: center; gap: 28px; }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.top nav a:hover { color: var(--ink); }
@media (max-width: 760px) { .top nav .hide-sm { display: none; } }

/* Header CTA — its own garment, deliberately not the hero's. */
.btn-demo {
  border: 1px solid var(--line-2); border-radius: 7px;
  padding: 9px 16px; font-size: 14px !important;
  color: var(--ink) !important;
}
.btn-demo:hover { border-color: var(--accent-lift); }
/* Still a link — it scrolls to the closing section, which explains itself —
   but it must not promise an action that isn't wired up yet. */
.btn-demo.is-soon { color: var(--ink-3) !important; }
.btn-demo.is-soon:hover { color: var(--ink-2) !important; border-color: var(--line-2); }

/* ---------------- CTAs — each with its own identity ---------------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* The product's own primary action: a solid light plate on a dark room. */
.cta-solid {
  display: inline-flex; align-items: center;
  background: linear-gradient(180deg, #f4f7fa, #d6dee6);
  color: #0e1114; text-decoration: none;
  font-weight: 700; font-size: 15.5px;
  padding: 14px 26px; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4), inset 0 1px 0 #fff;
  transition: transform .12s ease;
}
.cta-solid:active { transform: scale(.985); }

/* The primary action while the booking inbox is still being set up. It keeps
   the plate's shape so the layout is unchanged, but it is deliberately inert
   and reads as unavailable: a dead mailto costs a first contact. */
.cta-soon {
  display: inline-flex; align-items: center;
  background: linear-gradient(180deg, rgba(244, 247, 250, .22), rgba(214, 222, 230, .14));
  color: var(--ink-2);
  font-weight: 700; font-size: 15.5px;
  padding: 14px 26px; border-radius: 10px;
  border: 1px solid var(--line-2);
  cursor: default; user-select: none;
}

.cta-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-2); border-radius: 10px;
  padding: 13px 22px; color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: 15px;
  transition: border-color .2s ease;
}
.cta-ghost:hover { border-color: var(--accent-lift); }
.cta-ghost .glyph { font-family: var(--mono); color: var(--accent-lift); }
.cta-note { font-family: var(--mono); font-size: 12px; color: var(--ink-4); letter-spacing: .06em; }

/* ---------------- shared shot frame ---------------- */
.shot {
  margin-inline: 0; margin-block: 0;
  border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden;
  background: var(--panel);
  box-shadow: 0 40px 120px -50px rgba(90, 150, 220, .3);
}
/* height:auto is load-bearing: the width/height attributes reserve layout space
   so nothing jumps on load, but without this the attribute height is taken
   literally and the screenshot stretches. */
.shot img { width: 100%; height: auto; }
.shot-cap {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-4);
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .shot { border-radius: 10px; }
  .shot-cap { padding: 9px 12px; font-size: 10px; letter-spacing: .1em; }
}
@media (max-width: 480px) { :root { --pad: 16px; } }

/* ================= THE FILM =================
   Default (no scripting, or reduced motion): the poster frame with the five
   chapters stacked under it. The pinned scrub is added by .film-on, which
   app.js only sets once the controller is actually running. */
.film { padding-block: 0; }
.film-stage { position: relative; }
.film-media { position: relative; }
.film-poster, .film-video { width: 100%; height: auto; }
.film-video { display: none; }
.film-veil { display: none; }
.film-hint { display: none; }

.film-copy { padding-block: clamp(40px, 7vw, 80px); }
.film-copy .ch + .ch { margin-top: clamp(40px, 7vw, 76px); }
.ch { max-width: 62ch; margin-inline: auto; padding-inline: var(--pad); }
.ch .label { margin-bottom: 20px; }
.ch h1 { font-size: clamp(46px, 8.4vw, 104px); line-height: .96; margin-bottom: 24px; }
.ch h2 { font-size: clamp(30px, 5vw, 58px); line-height: 1.02; margin-bottom: 18px; }
.ch p { color: var(--ink-2); font-size: clamp(16px, 2vw, 20px); max-width: 56ch; }
.ch .lede { margin-bottom: 32px; }
.ch .lede strong { color: var(--ink); font-weight: 600; }
.tagrow {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tagrow li {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-lift);
  background: rgba(90, 150, 220, .14);
  border: 1px solid rgba(90, 150, 220, .35);
  border-radius: 999px; padding: 6px 13px;
}

/* --- pinned scrub mode --- */
/* The header is sticky, so it occupies flow at the top of the page: without
   this pull-up a 100svh stage starts 62px down and its bottom sits below the
   fold, which pushed the hero's own CTAs off a phone screen. Running the film
   full-bleed under the translucent header fixes the geometry and looks better
   than a band above it. */
.film-on .film { margin-top: calc(-1 * var(--head-h)); }
.film-on .film-track { height: 480vh; }
.film-on .film-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
}
/* Keep chapter copy clear of the header band it now sits behind. */
.film-on .film-copy { padding-top: var(--head-h); }
.film-on .film-media { position: absolute; inset: 0; }
.film-on .film-poster,
.film-on .film-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.film-on .film-video { display: block; }
.film-on .film-poster { transition: opacity .45s ease; }
.film-on .film-media.is-painted .film-poster { opacity: 0; }

/* Copy sits on the left third, where the film keeps its negative space. */
.film-on .film-veil {
  display: block; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 9, 12, .93) 0%, rgba(6, 9, 12, .78) 38%, rgba(6, 9, 12, .12) 70%, transparent 100%),
    linear-gradient(0deg, rgba(6, 9, 12, .6) 0%, transparent 34%);
}
.film-on .film-copy {
  position: absolute; inset: 0; padding: 0;
  display: flex; align-items: center;
  pointer-events: none;
}
/* Chapters ride the same 1240px rail as every other section, so the film's
   left edge lines up with the copy below it. The inner cap keeps the measure
   readable without pushing text into the lit half of the frame. */
.film-on .film-copy .ch {
  position: absolute; left: 0; right: 0;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--pad);
  opacity: 0;
  pointer-events: auto;
}
.film-on .film-copy .ch > * { max-width: 640px; }
.film-on .film-copy .ch + .ch { margin-top: 0; }
/* Smaller than the static hero: this one has to fit a viewport, not a page. */
.film-on .ch h1 { font-size: clamp(40px, 6.2vw, 84px); margin-bottom: 20px; }
.film-on .ch h2 { font-size: clamp(28px, 4.2vw, 50px); }
.film-on .ch .lede { margin-bottom: 26px; }

.film-on .film-hint {
  display: block; position: absolute;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-4);
  transition: opacity .4s ease;
}
.film-on .film-hint span::after {
  content: ""; display: block; width: 1px; height: 20px; margin: 8px auto 0;
  background: linear-gradient(180deg, var(--ink-4), transparent);
}

@media (max-width: 860px) {
  .film-on .film-copy .ch { max-width: none; }
  .film-on .film-veil {
    background:
      linear-gradient(0deg, rgba(6, 9, 12, .95) 12%, rgba(6, 9, 12, .72) 48%, rgba(6, 9, 12, .3) 100%);
  }
  .film-on .film-copy { align-items: flex-end; padding-bottom: 8vh; }
}
/* A phone has to fit label, headline, lede and both CTAs inside one viewport,
   so the pinned chapter runs a size down from the desktop scale. */
@media (max-width: 620px) {
  .film-on .film-copy { padding-bottom: 2.2vh; }
  .film-on .ch h1 { font-size: clamp(34px, 10.5vw, 46px); margin-bottom: 12px; }
  .film-on .ch h2 { font-size: clamp(26px, 8vw, 36px); }
  .film-on .ch p { font-size: 15px; line-height: 1.5; }
  .film-on .ch .lede { margin-bottom: 16px; }
  .film-on .ch .label { margin-bottom: 10px; }
  .film-on .cta-solid, .film-on .cta-ghost { padding-block: 12px; }
  /* Bottom-aligned copy already reaches the fold here, so the hint would sit
     on top of the CTAs. */
  .film-on .film-hint { display: none; }
}

/* ================= S6 · RECOVERY =================
   Same posture as the film: readable and complete by default, pinned by JS. */
.rec-track { }
.rec-in { }
.rec-meter { margin-bottom: 40px; }
.rec-clock { display: flex; align-items: baseline; gap: 10px; }
.rec-num {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(48px, 10vw, 104px); line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.rec-unit { font-family: var(--mono); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.rec-bar { height: 3px; background: var(--line); border-radius: 2px; margin-top: 18px; overflow: hidden; }
.rec-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--ok)); border-radius: 2px; }
.rec-cap { display: block; margin-top: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }

.rec-steps { list-style: none; margin: 0; padding: 0; }
.rec-steps li { max-width: 60ch; }
.rec-steps li + li { margin-top: 34px; }
.rec-steps .n { font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; color: var(--accent-lift); display: block; margin-bottom: 10px; }
.rec-steps h3 { font-size: clamp(22px, 3.2vw, 34px); line-height: 1.1; margin-bottom: 10px; }
.rec-steps p { color: var(--ink-2); font-size: 16.5px; }
.mono-quote { font-family: var(--mono) !important; color: var(--ok) !important; font-size: 15px !important; letter-spacing: .02em; }

.rec-on .rec-track { height: 320vh; }
.rec-on .rec-stage {
  position: sticky; top: 62px;
  height: calc(100vh - 62px); height: calc(100svh - 62px);
  display: flex; align-items: center;
}
/* Pinned, the meter and the step it belongs to sit side by side — otherwise the
   clock strands at the top of an otherwise empty screen. */
.rec-on .rec-in { display: grid; grid-template-columns: minmax(200px, .75fr) 1.25fr; gap: clamp(28px, 6vw, 78px); align-items: center; }
.rec-on .rec-meter { margin-bottom: 0; }
.rec-on .rec-steps { position: relative; min-height: 260px; }
.rec-on .rec-steps li { position: absolute; inset: 0; opacity: 0; max-width: none; }
.rec-on .rec-steps li + li { margin-top: 0; }
@media (max-width: 820px) {
  .rec-on .rec-in { grid-template-columns: 1fr; gap: 28px; }
  .rec-on .rec-steps { min-height: 300px; }
}

.rec-shot { margin-top: clamp(40px, 7vw, 72px); }

/* ================= S7 · SEATS ================= */
.seat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.seat-tabs button {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer;
  background: transparent; border: 1px solid var(--line-2);
  border-radius: 999px; padding: 9px 18px;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.seat-tabs button:hover { color: var(--ink-2); }
/* The product's tint pattern: 14% fill, 35% border, solid text. */
.seat-tabs button[aria-selected="true"] {
  color: var(--accent-lift);
  background: rgba(90, 150, 220, .14);
  border-color: rgba(90, 150, 220, .35);
}
.seat-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.seat-panel[hidden] { display: none; }
.seat-copy .label { margin-bottom: 14px; }
.seat-copy h3 { font-size: clamp(24px, 3.2vw, 33px); line-height: 1.1; margin-bottom: 20px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ticks li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink-2); line-height: 1.45; }
.ticks li::before { content: "—"; color: var(--accent); font-family: var(--mono); flex: none; }
@media (max-width: 900px) { .seat-panel { grid-template-columns: 1fr; } }

/* ================= S8 · RAIL ================= */
.rail {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.rail li { background: var(--panel); padding: 26px 22px; }
.rail .label { margin-bottom: 16px; }
.rail-n {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em;
  margin-bottom: 12px; font-variant-numeric: tabular-nums;
}
.rail-n .u { font-size: .5em; color: var(--ink-3); letter-spacing: .06em; margin-left: 6px; }
.rail-gold { color: var(--gold); }
.rail-say { font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); }
.rail-say b { color: var(--ok); font-weight: 500; }
.rail p { color: var(--ink-3); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 1000px) { .rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rail { grid-template-columns: 1fr; } }

/* ================= S9 · ROOMS ================= */
.rooms { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(36px, 6vw, 60px); }
.room-cards { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.room-card {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 22px 20px;
}
/* Tight enough that "Room 1 · Ballroom A" stays on one line in the card. */
.room-card .label { margin-bottom: 14px; letter-spacing: .12em; font-size: 10.5px; }
.room-entry { font-family: var(--mono); font-size: clamp(24px, 3.4vw, 34px); font-weight: 500; letter-spacing: -.02em; }
.room-time { font-family: var(--mono); font-size: 13px; color: var(--warn); letter-spacing: .1em; margin-top: 6px; }
.room-link { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.room-link::before, .room-link::after { content: ""; width: 1px; height: 18px; background: var(--line-2); }
.room-dancer {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--warn); border: 1px solid rgba(224, 185, 106, .35); background: rgba(224, 185, 106, .12);
  border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
@media (max-width: 900px) { .rooms { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .room-cards { grid-template-columns: 1fr; }
  .room-link { flex-direction: row; }
  .room-link::before, .room-link::after { width: 18px; height: 1px; }
}

/* ================= S10 · FLIP ================= */
.flip-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.flip-btn {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer;
  background: transparent; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 10px 16px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.flip-btn.is-on { color: var(--ok); background: rgba(87, 184, 118, .12); border-color: rgba(87, 184, 118, .35); }
.flip-btn:not(.is-on):hover { color: var(--ink-2); }
/* One pane at a time under script; the <noscript> block shows both. */
.flip-pane { display: none; }
.flip-pane.is-on { display: block; }
.flip-note { margin-top: 20px; color: var(--ink-3); font-size: 15.5px; max-width: 62ch; }

/* ================= S11 · CHART ================= */
.chart { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: clamp(22px, 4vw, 36px); }
.chart-controls { margin-bottom: 28px; }
.chart-label { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.chart-controls input[type="range"] {
  width: 100%; max-width: 560px; accent-color: var(--accent);
  background: transparent; cursor: pointer;
}
.chart-time {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size: clamp(26px, 3.4vw, 38px); font-weight: 500;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.chart-grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.chart-cell { background: var(--raised); padding: 22px 20px; }
.chart-cell .label { margin-bottom: 14px; }
.chart-rule { color: var(--ink-2); font-size: 15px; }
.chart-mini { display: flex; gap: 16px; margin-top: 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-4); }
.chart-n { font-family: var(--mono); font-size: clamp(30px, 4.2vw, 44px); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chart-good .chart-n { color: var(--ok); }
.chart-bad .chart-n { color: var(--bad); }
.chart-vs { font-size: .5em; color: var(--ink-4); letter-spacing: .1em; }
.chart-sub { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-4); }
/* Land on 4:00 and the contradiction is the point of the section. */
.chart.is-at-four .chart-bad { background: rgba(224, 106, 94, .1); }
.chart-note { margin-top: 24px; color: var(--ink-3); font-size: 15px; max-width: 74ch; }
@media (max-width: 860px) { .chart-grid { grid-template-columns: 1fr; } }

/* ================= S12 · CARDS ================= */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; }
.card .label { margin-bottom: 14px; }
/* Marks a roadmap item as one. Status honesty is the pitch; the site does not
   get to claim what the product has not shipped. */
.soon {
  font-style: normal; margin-left: 8px; padding: 2px 8px;
  border: 1px solid rgba(224, 185, 106, .35); background: rgba(224, 185, 106, .12);
  border-radius: 999px; color: var(--warn); font-size: 9.5px; letter-spacing: .14em;
}
.card h3 { font-size: 19px; margin-bottom: 9px; }
.card p { color: var(--ink-3); font-size: 15px; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

/* ================= S13 · CONFIG ================= */
.split { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split-copy .label { margin-bottom: 14px; }
.split-copy h3 { font-size: clamp(24px, 3.2vw, 33px); line-height: 1.1; margin-bottom: 16px; }
.split-copy p { color: var(--ink-2); margin-bottom: 20px; }
.ladder .label { margin-bottom: 16px; }
.ladder ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ladder li {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid color-mix(in srgb, var(--lv) 35%, transparent);
  background: color-mix(in srgb, var(--lv) 8%, transparent);
  border-radius: 10px; padding: 12px 16px;
}
.ladder li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lv); flex: none; }
.ladder li span { font-family: var(--mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lv); }
.ladder-note { margin-top: 16px; color: var(--ink-4); font-size: 14px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ================= S14 · SPEC TABLE ================= */
.spec { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.spec th, .spec td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  width: 34%; background: var(--panel);
}
.spec td { color: var(--ink-2); font-size: 15.5px; background: var(--panel); }
@media (max-width: 700px) {
  .spec th { width: auto; display: block; border-bottom: 0; padding-bottom: 4px; }
  .spec td { display: block; padding-top: 0; }
}

/* ================= S15 · Q&A ================= */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none;
  padding: 22px 40px 22px 0; position: relative;
  font-size: clamp(17px, 2.1vw, 21px); font-weight: 600; letter-spacing: -.015em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 20px; color: var(--ink-3); line-height: 1;
}
.qa details[open] summary::after { content: "−"; color: var(--accent-lift); }
.qa details p { padding-bottom: 24px; color: var(--ink-2); max-width: 70ch; font-size: 16px; }
.esc { margin-top: 28px; max-width: 74ch; font-size: 14.5px; }

/* ================= S16 · CLOSE ================= */
.close-in {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 14px; padding: clamp(32px, 6vw, 64px);
  background: radial-gradient(120% 160% at 12% 0%, rgba(90, 150, 220, .13), transparent 62%), var(--panel);
}
.close-in h2 { font-size: clamp(28px, 4.6vw, 46px); line-height: 1.04; margin-bottom: 16px; }
.close-in p { color: var(--ink-2); max-width: 54ch; margin-bottom: 30px; font-size: clamp(16px, 2vw, 19px); }
.close-tick {
  position: absolute; right: -10px; bottom: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em;
  color: rgba(230, 234, 238, .05); white-space: nowrap;
}

footer { border-top: 1px solid var(--line); padding-block: 34px; }
.foot-in { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-4); text-transform: uppercase; }
.foot-in a { color: var(--ink-3); }

/* ================= reveal on entry =================
   Added by JS only, so nothing is ever hidden without something to unhide it. */
.rise {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
.rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cta-solid { transition: none; }
  html { scroll-behavior: auto; }
}