/* ============================================================================
   APERTURE — "The Instrument"
   A scientific-instrument aesthetic: a warm-black void, first-light gold,
   a precise crimson alarm, editorial serif + instrument monospace, weighted motion.
   ========================================================================== */

:root {
  --void:      #070608;
  --void-2:    #0c0a0e;
  --panel:     rgba(247,240,226,0.022);
  --ink:       #efe6d4;
  --ink-dim:   rgba(239,230,212,0.56);
  --ink-faint: rgba(239,230,212,0.30);
  --ink-ghost: rgba(239,230,212,0.13);
  --rule:      rgba(239,230,212,0.11);
  --rule-soft: rgba(239,230,212,0.06);

  --light:     #ffd089;   /* first light — the knowing glow */
  --light-hi:  #fff4dc;
  --grounded:  #e7c98a;
  --alarm:     #ff4640;   /* fabrication — the confident lie */
  --alarm-dim: rgba(255,70,64,0.5);
  --offmap:    #8a93b8;   /* off the map — lost in the dark */
  --uncertain: #e3a857;   /* hedging — the model unsure of itself */
  --uncertain-dim: rgba(227,168,87,0.5);

  --serif: "Iowan Old Style","Hoefler Text","Charter","Sorts Mill Goudy",Georgia,"Times New Roman",serif;
  --mono:  ui-monospace,"SF Mono","JetBrains Mono","IBM Plex Mono",Menlo,monospace;

  --acc: var(--light);    /* per-state accent, set by JS */
  --gut: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
}

/* film grain + vignette ---------------------------------------------------- */
.grain {
  position: fixed; inset: -50%; z-index: 9; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(5) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-2%)} 60%{transform:translate(-2%,4%)} 80%{transform:translate(4%,1%)} 100%{transform:translate(0,0)} }
.vignette {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 32%, transparent 38%, rgba(0,0,0,0.55) 100%);
}

/* ───────────── masthead ───────────── */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gut);
  mix-blend-mode: difference;
}
.wordmark {
  font-family: var(--serif); font-size: 19px; letter-spacing: 0.42em;
  font-weight: 400; color: #fff; padding-left: 0.42em;
}
.wordmark .wm-a { color: #fff; }
.masthead-read {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #fff; display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.masthead-read .sl-text {
  border-bottom: 1px dotted rgba(255,255,255,0.45); padding-bottom: 2px; transition: border-color .3s;
}
.masthead-read:hover .sl-text { border-bottom-color: #fff; }
.sl-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
  box-shadow: 0 0 8px currentColor;
}
.sl-dot.live { background: var(--light); color: var(--light); animation: pulse 2.4s ease-in-out infinite; }
.sl-dot.mock { background: var(--offmap); color: var(--offmap); }
@keyframes pulse { 0%,100%{opacity:.45} 50%{opacity:1} }

/* ───────────── setup / model-agnostic modal ───────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(5,4,6,0.82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 24px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.modal-backdrop.show { opacity: 1; visibility: visible; }
.modal {
  position: relative; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, #100c12, #0a070c); border: 1px solid var(--rule);
  border-radius: 6px; padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transform: translateY(12px) scale(.985); transition: transform .42s cubic-bezier(.2,.8,.2,1);
}
.modal-backdrop.show .modal { transform: translateY(0) scale(1); }
.modal-x {
  position: absolute; top: 12px; right: 15px; background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); font-size: 23px; line-height: 1; padding: 4px 8px; transition: color .3s;
}
.modal-x:hover { color: var(--light); }
.modal-eyebrow {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--light); opacity: 0.85; margin-bottom: 10px;
}
.modal-title {
  font-family: var(--serif); font-size: clamp(20px, 2.6vw, 27px); font-weight: 400; color: var(--ink);
  line-height: 1.2; margin: 0 0 16px;
}
.modal-title #setupModel { font-style: italic; color: var(--light-hi); }
.modal p {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.62; color: var(--ink-dim); margin: 0 0 14px;
}
.modal p b { color: var(--ink); font-weight: 600; }
.modal p i { color: var(--ink); font-style: italic; }
.modal-rule { height: 1px; background: var(--rule); margin: 22px 0; }
.modal-fine { font-size: 12.5px !important; color: var(--ink-faint) !important; }
.modal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.modal-chips span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 13px;
}

/* ───────────── the instrument ───────────── */
.instrument {
  min-height: 100svh;
  padding: clamp(86px, 12vh, 132px) var(--gut) 56px;
  display: flex; flex-direction: column; align-items: center;
}
.overline {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 26px;
  opacity: 0; transform: translateY(6px); animation: rise .9s .15s forwards;
}

/* specimen ----------------------------------------------------------------- */
.specimen {
  display: flex; align-items: baseline; gap: 16px;
  max-width: 760px; width: 100%; justify-content: center; text-align: center;
  padding: 0 0 6px; margin-bottom: clamp(20px, 4vh, 40px);
  border-bottom: 1px solid var(--rule-soft);
  opacity: 0; animation: rise .9s .3s forwards;
}
.specimen-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-faint); flex: 0 0 auto;
}
.specimen-q {
  font-family: var(--serif); font-size: clamp(18px, 2.5vw, 27px); font-style: italic;
  color: var(--ink); line-height: 1.3;
}

/* WITHOUT ↔ WITH Aperture — a toggle that flips the reading on demand */
.lens-toggle {
  display: inline-flex; align-self: center; margin: -10px 0 18px;
  border: 1px solid var(--rule); border-radius: 999px; overflow: hidden;
}
.lt-opt {
  background: transparent; border: 0; cursor: pointer; color: var(--ink-faint);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 20px; transition: color .4s, background .4s; white-space: nowrap;
}
.lt-opt + .lt-opt { border-left: 1px solid var(--rule); }
.lt-opt:hover { color: var(--ink-dim); }
.lt-opt.on { color: #1a1206; background: var(--light); text-shadow: none; }
.lt-opt[data-mode="bare"].on { color: var(--ink); background: rgba(239,230,212,0.12); }

/* stage: VOICE · EYE · MIND ------------------------------------------------ */
.stage {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(18px, 3.4vw, 52px); width: 100%; max-width: 1180px;
}

.panel { min-width: 0; }
.panel-cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-faint); padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

/* what it SAYS */
.voice { text-align: right; }
.voice .panel-cap { text-align: right; }
.voice-body {
  font-family: var(--serif); font-size: clamp(16px, 1.55vw, 21px); line-height: 1.55;
  color: var(--ink-dim); min-height: 4.6em; max-height: 30em; overflow-y: auto; padding-left: 6px;
}
.voice-body::-webkit-scrollbar { width: 6px; }
.voice-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.voice-body .cursor { color: var(--ink-faint); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.voice-verdict {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  margin-top: 14px; height: 1.2em; opacity: 0; transition: opacity .5s;
}
.voice-verdict.show { opacity: 1; }
.voice-verdict.fabricated { color: var(--alarm); }
.voice-verdict.correct { color: var(--grounded); }
.voice-verdict.confident { color: var(--light); }
.voice-verdict.uncertain { color: var(--uncertain); }

/* rendered markdown + KaTeX answer (math / reasoning specimens) */
.voice-body.rich {
  text-align: left; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.5;
  max-height: 19em; overflow-y: auto; padding-right: 6px;
}
.voice-body.rich :is(h1,h2,h3,h4,h5) {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); margin: 13px 0 5px; font-weight: 600;
}
.voice-body.rich p { margin: 0 0 9px; }
.voice-body.rich :is(ul,ol) { margin: 0 0 9px; padding-left: 1.25em; }
.voice-body.rich li { margin: 3px 0; }
.voice-body.rich strong { color: var(--ink); font-weight: 600; }
.voice-body.rich code {
  font-family: var(--mono); font-size: .86em; background: rgba(255,255,255,.05);
  padding: 1px 5px; border-radius: 3px; color: var(--light-hi);
}
.voice-body.rich pre {
  background: rgba(255,255,255,.04); border: 1px solid var(--rule); border-radius: 6px;
  padding: 10px 12px; overflow-x: auto; margin: 0 0 9px;
}
.voice-body.rich pre code { background: none; padding: 0; }
.voice-body.rich .katex { color: var(--ink); }
.voice-body.rich .katex-display { margin: 11px 0; overflow-x: auto; overflow-y: hidden; }
.voice-body.rich::-webkit-scrollbar { width: 6px; }
.voice-body.rich::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

/* the EYE */
.eye-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.eye {
  width: clamp(182px, 24vw, 274px); height: clamp(182px, 24vw, 274px);   /* 30% smaller — more room for copy */
  /* --fam (0..1) pupil light, --off (0..1) focus; set by JS */
  --fam: 0; --off: 0;
  filter: saturate(calc(1 - var(--off) * 0.5));
}
.field circle { fill: var(--ink-ghost); }
.calib line { stroke: var(--rule); stroke-width: 1; }
.blade {
  fill: #161220; stroke: rgba(255,214,150,0.08); stroke-width: 0.8;
  transform-box: view-box;                     /* origin resolves in viewBox units */
  /* transform-origin (each blade's pivot on the ring) + transform set inline by JS */
  transition: transform 1.15s cubic-bezier(.34,.72,.16,1);
  transition-delay: calc(var(--ai, 0) * 0.02s);
}
.blade.snap { transition: transform .42s cubic-bezier(.5,0,.5,1); }   /* shutter focus-pull */
.pupil-glow {
  opacity: calc(0.06 + var(--fam) * 0.94);
  transform-box: view-box; transform-origin: 220px 220px;
  transform: scale(calc(0.62 + var(--fam) * 0.66));
  transition: opacity 1.2s cubic-bezier(.3,.7,.2,1), transform 1.2s cubic-bezier(.3,.7,.2,1);
}
.pupil-core {
  opacity: calc(0.12 + var(--fam) * 0.88);
  transform-box: view-box; transform-origin: 220px 220px;
  transform: scale(calc(0.5 + var(--fam) * 0.7));
  transition: opacity 1.2s, transform 1.2s;
}
.eye-state {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-faint); transition: color .5s;
}
.eye-state.seeing { color: var(--grounded); }
.eye-state.blind  { color: var(--alarm); }
.eye-state.offmap { color: var(--offmap); }

/* idle breathing on the pupil */
.eye:not(.read) .pupil-glow { animation: breathe 5.5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{opacity:.07} 50%{opacity:.16} }

/* ── per-verdict aperture behaviour (each sample animates in its OWN way) ───── */
/* GROUNDED — it KNOWS: dilate wide, hold open, a slow living breath; light floods + stays */
.eye.st-grounded .blade { animation: g-open .85s cubic-bezier(.2,.85,.2,1) both, g-breathe 6s .85s ease-in-out infinite; }
@keyframes g-open    { from { transform: rotate(28deg); } to { transform: rotate(0deg); } }
@keyframes g-breathe { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(2.1deg); } }
.eye.st-grounded .pupil-glow { animation: pg-on 5.5s ease-in-out infinite; }
@keyframes pg-on { 0%,100% { opacity: .86; } 50% { opacity: 1; } }

/* LIKELY FABRICATION — bluffing: open but RESTLESS (hunting), a false light that GUTTERS */
.eye.st-low .blade { animation: l-open .8s cubic-bezier(.2,.85,.2,1) both, l-hunt 3.1s .8s ease-in-out infinite; }
@keyframes l-open { from { transform: rotate(28deg); } to { transform: rotate(8deg); } }
@keyframes l-hunt { 0% { transform: rotate(8deg); } 34% { transform: rotate(13deg); } 68% { transform: rotate(6deg); } 100% { transform: rotate(8deg); } }
.eye.st-low .pupil-glow, .eye.st-low .pupil-core { animation: pg-gutter 3.4s ease-in-out infinite; }
@keyframes pg-gutter {
  0%{opacity:.02} 13%{opacity:.16} 26%{opacity:.03} 50%{opacity:.02} 62%{opacity:.12} 74%{opacity:.03} 100%{opacity:.02}
}

/* OFF THE MAP — can't acquire: the iris SEARCHES slowly and never locks; dark; the field drifts */
.eye.st-off .blade { animation: o-open .7s ease-out both, o-search 5s ease-in-out .7s infinite; }
@keyframes o-open   { from { transform: rotate(28deg); } to { transform: rotate(15deg); } }
@keyframes o-search { 0% { transform: rotate(15deg); } 50% { transform: rotate(24deg); } 100% { transform: rotate(15deg); } }
.eye.st-off .pupil-glow, .eye.st-off .pupil-core { animation: o-dim 4.5s ease-in-out infinite; }
@keyframes o-dim { 0%,100% { opacity: .012; } 50% { opacity: .05; } }
.eye.st-off .field { animation: o-drift 6s ease-in-out infinite; }
@keyframes o-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(2px,-2px); } }

/* what it KNOWS */
.readout { margin-bottom: 30px; }
.readout:last-child { margin-bottom: 0; }
.ro-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ro-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }
.ro-val {
  font-family: var(--mono); font-size: clamp(30px, 4vw, 46px); font-weight: 500;
  color: var(--ink); line-height: 1; letter-spacing: -0.01em; transition: color .6s;
  font-variant-numeric: tabular-nums;
}
.ro-val.bad  { color: var(--alarm); text-shadow: 0 0 18px var(--alarm-dim); }
.ro-val.good { color: var(--grounded); }
.ro-val.warn { color: var(--offmap); }
.ro-val.amber { color: var(--uncertain); }
.ro-track {
  height: 2px; background: var(--rule); margin: 13px 0 9px; position: relative; overflow: hidden;
}
.ro-fill {
  position: absolute; top: 0; bottom: 0; left: 0; right: 100%; background: var(--grounded);
  box-shadow: 0 0 10px var(--grounded);
  transition: right 1.1s cubic-bezier(.2,.7,.2,1), background .6s;
}
.ro-fill.bad  { background: var(--alarm); box-shadow: 0 0 12px var(--alarm); }
.ro-fill.warn { background: var(--offmap); box-shadow: 0 0 10px var(--offmap); }
.ro-fill.amber { background: var(--uncertain); box-shadow: 0 0 10px var(--uncertain); }
.ro-hint { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-faint); }

/* ── the WITHOUT → WITH Aperture reveal: the mind stays dark until the lens engages ── */
.mind { transition: opacity .7s ease; }
.instrument[data-phase="bare"] .mind { opacity: .08; }
.instrument[data-phase="lens"] .mind { opacity: 1; }

/* verdict ------------------------------------------------------------------ */
.verdict {
  display: flex; align-items: center; gap: 22px;
  margin: clamp(34px, 6vh, 64px) auto 0; padding: 22px 34px;
  border: 1px solid var(--rule); border-radius: 2px;
  max-width: 720px; width: 100%; justify-content: center;
  background: linear-gradient(180deg, rgba(247,240,226,0.018), transparent);
  position: relative;
}
.verdict[data-state="idle"] { opacity: .5; }
.verdict::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--acc);
  opacity: 0; transition: opacity .5s;
}
.verdict.stamped::before { opacity: .9; }
.verdict-seal {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--acc); position: relative; opacity: .85;
}
.verdict-seal::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: var(--acc); opacity: calc(0.2 + var(--fam, 0) * 0.7);
}
.verdict-body { text-align: left; }
.verdict-label {
  font-family: var(--serif); font-size: clamp(20px, 2.6vw, 30px); letter-spacing: 0.01em;
  color: var(--acc); line-height: 1.1;
}
.verdict-advice {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-dim);
  margin-top: 6px; line-height: 1.5;
}
.verdict.stamp-in { animation: stamp .55s cubic-bezier(.2,1.3,.3,1); }
@keyframes stamp { 0%{transform:scale(1.12);opacity:0} 55%{transform:scale(.985)} 100%{transform:scale(1);opacity:1} }

/* console (now up top, above the stage) ------------------------------------ */
.console { width: 100%; max-width: 720px; margin: 2px auto clamp(22px, 4vh, 40px);
  opacity: 0; animation: rise .9s .22s forwards; }
.console-in { margin-bottom: 14px; }
.in-row {
  display: grid; grid-template-columns: 1fr 0.6fr auto; gap: 0;
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden;
  transition: border-color .3s;
}
.in-row:focus-within { border-color: var(--ink-faint); }
.in-q, .in-e {
  background: transparent; border: 0; color: var(--ink); padding: 15px 18px;
  font-family: var(--serif); font-size: 16px; font-style: italic; outline: none; min-width: 0;
}
.in-e { font-style: normal; font-family: var(--mono); font-size: 12px; border-left: 1px solid var(--rule); letter-spacing: .04em; }
.in-q::placeholder { color: var(--ink-faint); }
.in-e::placeholder { color: var(--ink-faint); }
.in-go {
  background: transparent; border: 0; border-left: 1px solid var(--rule); cursor: pointer;
  color: var(--ink); padding: 0 22px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; transition: background .3s, color .3s;
}
.in-go:hover { background: var(--light); color: #1a1206; }
.in-go.busy { color: var(--ink-faint); pointer-events: none; }

/* single shuffle button (replaces the specimen chip row) */
.console-aux { display: flex; justify-content: center; margin-top: 2px; }
.shuffle-btn {
  background: transparent; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
  color: var(--ink-faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 9px 24px; transition: color .3s, border-color .3s;
}
.shuffle-btn:hover { color: var(--light); border-color: var(--ink-faint); }
.shuffle-btn:active { transform: translateY(1px); }

/* ───────────── field notes ───────────── */
.notes { padding: clamp(60px, 14vh, 150px) var(--gut) 0; border-top: 1px solid var(--rule-soft); }
.phenomenon { max-width: 900px; margin: 0 auto clamp(60px,12vh,128px); text-align: center; }
.ph-line { font-family: var(--serif); font-size: clamp(24px, 4.2vw, 50px); line-height: 1.22; letter-spacing: -0.01em; }
.ph-line.dim { color: var(--ink-faint); }
.ph-em { color: var(--light); font-style: italic; }

.spec-sheet {
  max-width: 980px; margin: 0 auto clamp(60px,12vh,128px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--rule); border-radius: 2px;
}
.spec { padding: 28px 26px; border-right: 1px solid var(--rule); }
.spec:last-child { border-right: 0; }
.spec-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--light); margin-bottom: 14px; }
.spec-v { font-family: var(--serif); font-size: 15.5px; line-height: 1.62; color: var(--ink-dim); }
.spec-v b { color: var(--ink); font-weight: 600; }
.spec-v em { color: var(--ink); font-style: italic; }
.t { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 2px; white-space: nowrap; }
.t-g { color: var(--grounded); border: 1px solid rgba(231,201,138,.35); }
.t-c { color: var(--light); border: 1px solid rgba(255,208,137,.40); }
.t-u { color: var(--alarm); border: 1px solid var(--alarm-dim); }
.t-h { color: var(--uncertain); border: 1px solid var(--uncertain-dim); }
.t-o { color: var(--offmap); border: 1px solid rgba(138,147,184,.35); }

.evidence {
  max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 68px); align-items: center; padding-bottom: clamp(60px,12vh,120px);
}
.ev-plate { text-align: center; border: 1px solid var(--rule); border-radius: 2px; padding: 30px 36px; }
.ev-num { font-family: var(--mono); font-size: clamp(54px, 8vw, 92px); font-weight: 500; color: var(--light); line-height: .92; letter-spacing: -0.02em; text-shadow: 0 0 40px rgba(255,208,137,.25); font-variant-numeric: tabular-nums; }
.ev-unit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.5em; color: var(--ink-faint); margin-top: 14px; }
.ev-copy h2 { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; font-weight: 400; margin-bottom: 16px; }
.ev-copy p { font-family: var(--serif); font-size: 16.5px; line-height: 1.62; color: var(--ink-dim); margin-bottom: 12px; max-width: 56ch; }
.ev-copy .num { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.ev-copy .fine { font-size: 13.5px; color: var(--ink-faint); }

/* ───────────── benchmarks: unique + needed ───────────── */
.benchmarks { max-width: 1000px; margin: 0 auto; padding-bottom: clamp(60px, 12vh, 120px); }
.bm-head { text-align: center; margin-bottom: clamp(34px, 5vh, 58px); }
.bm-head h3 {
  font-family: var(--serif); font-size: clamp(20px, 2.7vw, 31px); font-weight: 400;
  line-height: 1.25; color: var(--ink); max-width: 30ch; margin: 16px auto 0;
}
.bm-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px);
  margin-bottom: clamp(30px, 5vh, 50px);
}
.bm-card { border: 1px solid var(--rule); border-radius: 3px; padding: 26px 24px; background: rgba(255,255,255,0.012); }
.bm-num {
  font-family: var(--mono); font-size: clamp(36px, 4.8vw, 52px); font-weight: 500; color: var(--light);
  line-height: 1; letter-spacing: -0.02em; text-shadow: 0 0 30px rgba(255,208,137,.18);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.bm-vs { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-faint); text-shadow: none; }
.bm-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); margin: 17px 0 11px;
}
.bm-d { font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); }
.bm-d b { color: var(--ink); font-weight: 600; }
.bm-compare { border: 1px solid var(--rule-soft); border-radius: 3px; padding: clamp(22px, 3vw, 34px); margin-bottom: 26px; }
.bm-compare-head { font-family: var(--serif); font-size: clamp(17px, 2vw, 22px); font-style: italic; color: var(--ink); margin-bottom: 16px; }
.bm-rows { list-style: none; display: flex; flex-direction: column; }
.bm-rows li {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 18px; padding: 13px 0;
  border-top: 1px solid var(--rule-soft); align-items: baseline;
}
.bm-rows li:first-child { border-top: 0; }
.bm-m { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink-dim); text-transform: uppercase; }
.bm-f { font-family: var(--serif); font-size: 14.5px; color: var(--ink-faint); line-height: 1.5; }
.bm-rows li.bm-ours { border-top-color: rgba(255,208,137,.25); }
.bm-rows li.bm-ours .bm-m { color: var(--light); }
.bm-rows li.bm-ours .bm-f { color: var(--ink-dim); }
.bm-fine {
  font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--ink-faint);
  letter-spacing: 0.02em; text-align: center; max-width: 80ch; margin: 6px auto 0;
}
@media (max-width: 760px) {
  .bm-grid { grid-template-columns: 1fr; }
  .bm-rows li { grid-template-columns: 1fr; gap: 3px; }
  .bm-f { font-size: 13.5px; }
}
.ev-copy b { color: var(--ink); }

.foot {
  max-width: 980px; margin: 0 auto; padding: 30px 0 56px; border-top: 1px solid var(--rule-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.foot-wm { font-family: var(--serif); font-size: 15px; letter-spacing: 0.3em; }
.foot-tag { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-faint); }
.foot-mode { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }

/* boot + motion ------------------------------------------------------------ */
@keyframes rise { to { opacity: 1; transform: none; } }

/* responsive --------------------------------------------------------------- */
@media (max-width: 880px) {
  .stage { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
  .voice { text-align: center; order: 3; max-width: 460px; }
  .voice .panel-cap { text-align: center; }
  .eye-wrap { order: 1; }
  .mind { order: 2; width: 100%; max-width: 380px; }
  .panel-cap { text-align: center; }
  .evidence { grid-template-columns: 1fr; text-align: center; }
  .ev-copy p { margin-left: auto; margin-right: auto; }
  .spec-sheet { grid-template-columns: 1fr; }
  .spec { border-right: 0; border-bottom: 1px solid var(--rule); }
  .spec:last-child { border-bottom: 0; }
  .in-row { grid-template-columns: 1fr; }
  .in-q, .in-e, .in-go { border-left: 0; border-bottom: 1px solid var(--rule); }
  .in-go { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .1s !important; }
}