/* ============================================================
   MERIDIAN — TELEMETRY HUD
   classified-hardware spec sheet. one accent, hairline rules,
   zero radius, fluid rem.
   ============================================================ */

:root {
  --orange: #FC4F00;
  --black: #050505;
  --white: #DDD;
  --muted: #758696;
  --faint: rgba(221, 221, 221, .20);
  --faint-2: rgba(221, 221, 221, .07);
  --faint-3: rgba(221, 221, 221, .30);

  --accent-bg: rgba(252, 79, 0, .04);
  --accent-br: rgba(252, 79, 0, .16);
  --accent-soft: rgba(252, 79, 0, .38);
  --glow: rgba(252, 79, 0, .10);

  --s1: .28rem;
  --s2: .56rem;
  --s3: .83rem;
  --s4: 1.11rem;
  --s5: 1.67rem;
  --s6: 2.22rem;
  --s7: 3.33rem;
  --s8: 5rem;
  --s9: 6.67rem;
  --s10: 8rem;

  --gutter: 1.11rem;
  --max: 97.78rem;
  --bar: 2.78rem;

  --display: "Inter Display", "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, monospace;
  --body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { font-size: 1rem; scroll-behavior: auto; }
@media (min-width: 768px) and (min-width: 992px) { html { font-size: clamp(13px, 1vw, 19.2px); } }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: .97rem;
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
canvas { display: block; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--orange); color: var(--black); }

:focus-visible { outline: .125rem solid var(--orange); outline-offset: .14rem; }

.mono {
  font-family: var(--mono);
  font-size: .694rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.4;
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ── framing overlay ── */
.brackets { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.br { position: absolute; width: 1.25rem; height: 1.25rem; }
.br::before, .br::after { content: ""; position: absolute; background: var(--faint); }
.br::before { width: 100%; height: 1px; }
.br::after { width: 1px; height: 100%; }
.br.tl { top: .42rem; left: .42rem; }
.br.tr { top: .42rem; right: .42rem; }
.br.tr::before { right: 0; } .br.tr::after { right: 0; }
.br.bl { bottom: .42rem; left: .42rem; }
.br.bl::before { bottom: 0; } .br.bl::after { bottom: 0; }
.br.brr { bottom: .42rem; right: .42rem; }
.br.brr::before { bottom: 0; right: 0; } .br.brr::after { bottom: 0; right: 0; }

/* ── custom cursor ── */
.cursor {
  position: fixed; top: 0; left: 0; width: 1.46rem; height: 1.46rem;
  z-index: 900; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  border: 1px solid var(--white);
  display: grid; place-items: center;
}
.cursor svg { width: .83rem; height: .83rem; fill: var(--white); }
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor .cursor { opacity: 1; }
html.has-cursor .cursor.is-down { width: 1.11rem; height: 1.11rem; }

/* ── grain + vignette (hero + footer only) ── */
.grain {
  position: absolute; inset: -25%; pointer-events: none; opacity: .04; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.1s steps(3) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2.2%, 1.4%); }
  66% { transform: translate(1.6%, -1.9%); }
  100% { transform: translate(0, 0); }
}
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(120% 90% at 50% 45%, rgba(5, 5, 5, 0) 40%, rgba(5, 5, 5, .78) 100%);
}

/* ── preloader ── */
.preloader {
  position: fixed; inset: 0; z-index: 800; background: var(--black);
  display: grid; place-items: center; overflow: hidden;
}
.preloader .pl-center { display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.pl-mark { width: 2.22rem; height: 2.22rem; color: var(--white); }
.pl-word { font-family: var(--display); font-weight: 500; font-size: 2.22rem; letter-spacing: -.044rem; line-height: .88; }
.pl-sep { display: inline-block; width: .28rem; height: .28rem; background: var(--orange); margin: 0 .28rem; vertical-align: middle; }
.pl-loading { color: var(--muted); margin-top: var(--s2); }
.pl-pct {
  display: block; margin-top: var(--s5);
  font-family: var(--display); font-weight: 500; font-size: 5rem; line-height: .88;
  letter-spacing: -.17rem; font-variant-numeric: tabular-nums;
}
.pl-pct b { font-weight: 500; }
.pl-pct-u { font-style: normal; font-size: 1.67rem; letter-spacing: 0; color: var(--muted); margin-left: .14rem; }
.pl-bar { display: block; width: 18rem; max-width: 62vw; height: .56rem; border: 1px solid var(--faint); position: relative; }
.pl-bar i {
  position: absolute; inset: 0 auto 0 0; width: 0; display: block;
  background: repeating-linear-gradient(135deg, var(--orange) 0 1px, rgba(252, 79, 0, .22) 1px 4px);
}
.pl-status { color: var(--muted); text-align: center; }
.pl-br { position: absolute; width: 1.67rem; height: 1.67rem; }
.pl-br::before, .pl-br::after { content: ""; position: absolute; background: var(--faint); }
.pl-br::before { width: 100%; height: 1px; }
.pl-br::after { width: 1px; height: 100%; }
.pl-br.a { top: var(--s4); left: var(--s4); }
.pl-br.b { top: var(--s4); right: var(--s4); }
.pl-br.b::before { right: 0; } .pl-br.b::after { right: 0; }
.pl-br.c { bottom: var(--s4); left: var(--s4); }
.pl-br.c::before { bottom: 0; } .pl-br.c::after { bottom: 0; }
.pl-br.d { bottom: var(--s4); right: var(--s4); }
.pl-br.d::before { bottom: 0; right: 0; } .pl-br.d::after { bottom: 0; right: 0; }
html:not(.js) .preloader { display: none; }
html.is-loaded .preloader { opacity: 0; visibility: hidden; transition: opacity .5s ease .1s, visibility 0s linear .6s; }

/* ── header ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--bar); display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--gutter);
  background: linear-gradient(180deg, var(--black) 0%, rgba(5, 5, 5, .92) 58%, rgba(5, 5, 5, 0) 100%);
}
.topbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--bar) + 1.67rem);
  background: linear-gradient(180deg, rgba(5, 5, 5, .92), rgba(5, 5, 5, 0)); z-index: -1; pointer-events: none;
}
.tb-logo { display: flex; align-items: center; gap: .56rem; color: var(--white); }
.tb-logo svg { width: 1.11rem; height: 1.11rem; }
.tb-logo span { font-family: var(--display); font-weight: 500; font-size: .97rem; letter-spacing: .16em; }
.tb-telemetry { display: flex; align-items: baseline; gap: var(--s3); color: var(--muted); white-space: nowrap; }
.tb-site { color: var(--muted); }
.tb-time { display: flex; align-items: baseline; gap: .42rem; }
.tb-time b { color: var(--white); font-weight: 400; }
.tb-time i { font-style: normal; color: var(--muted); }
.tb-nav { display: flex; align-items: center; gap: var(--s4); margin-left: var(--s4); }
.tb-nav a { color: var(--muted); padding: .42rem 0; }
.tb-nav a:hover { color: var(--white); animation: flicker .45s linear; }
.tb-progress { flex: 1; height: .56rem; position: relative; border: 1px solid var(--faint-2); min-width: 4rem; }
.tb-progress i {
  position: absolute; inset: 0 auto 0 0; width: 0; display: block;
  background: repeating-linear-gradient(135deg, var(--orange) 0 1px, rgba(252, 79, 0, .22) 1px 4px);
}
.tb-right { display: flex; align-items: center; gap: var(--s3); }
.tb-std { display: flex; border: 1px solid var(--faint-2); }
.tb-std button { padding: .42rem .56rem; color: var(--muted); font-size: .5556rem; }
.tb-std button.is-on { color: var(--orange); background: var(--accent-bg); }
.tb-std button:not(.is-on):hover { color: var(--white); }

/* ── corner-tick button ── */
.tickbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: var(--bar); padding: 0 var(--s4); white-space: nowrap;
  background: var(--accent-bg); border: 1px solid var(--accent-br);
  color: var(--white); transition: color .18s ease;
}
.tickbtn .mono { font-size: .694rem; }
.tickbtn .tk { position: absolute; width: .28rem; height: .28rem; background: var(--orange); }
.tk.tl { top: 0; left: 0; } .tk.tr { top: 0; right: 0; }
.tk.bl { bottom: 0; left: 0; } .tk.br { bottom: 0; right: 0; }
.tickbtn:hover { color: var(--orange); }
.tickbtn-ghost { background: rgba(221, 221, 221, .02); border-color: rgba(221, 221, 221, .16); }
.tickbtn-ghost .tk { background: var(--white); }
.tickbtn-lg { height: 3.33rem; padding: 0 var(--s5); }

/* ── section header ── */
.sechead { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) 0; }
.threats .sechead, .sequence .sechead { padding-right: 3.6rem; }
.sechead-box {
  border-bottom: 1px solid var(--faint-3); padding: .2rem .28rem; color: var(--white);
  font-size: .5556rem; letter-spacing: .1em;
}
.sechead-rule { flex: 1; height: 1px; background: var(--faint); min-width: var(--s4); }
.sechead-value { color: var(--muted); font-family: var(--mono); font-size: .5556rem; text-transform: uppercase; letter-spacing: .02em; }

/* ── HUD comment block ── */
.hudblock { display: grid; gap: .28rem; }
.hud-line { font-size: .5556rem; color: var(--muted); letter-spacing: .04em; }
.hud-focus { color: var(--white); }
.hud-ind { padding-left: 1.11rem; }
.hud-alt { color: var(--muted); }
.hud-alt b, .hud-focus b { color: var(--orange); font-weight: 400; }
.hudblock .hud-line:first-child { color: var(--faint-3); }

/* ── hero ── */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; isolation: isolate;
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-inner {
  position: relative; z-index: 4; display: grid; grid-template-rows: auto 1fr;
  min-height: 100vh; min-height: 100svh; padding-top: calc(var(--bar) + var(--s3)); padding-bottom: 5.2rem;
}
.hero-top { display: grid; gap: var(--s4); align-content: start; }
.hero-lead { align-self: end; }
.hero-h1 {
  font-family: var(--display); font-weight: 500; font-size: 5rem; line-height: .88;
  letter-spacing: -.25rem; margin: var(--s5) 0 var(--s4);
}
.hero-h1 .line { display: block; }
.hero-sub { max-width: 34rem; color: var(--white); margin-bottom: var(--s5); }
.hero-sub .num { color: var(--white); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero-corner { position: absolute; z-index: 4; display: grid; gap: .28rem; color: var(--white); font-size: .5556rem; }
.hero-corner-sub { color: var(--muted); }
.hero-corner-tr { top: calc(var(--bar) + 4.6rem); right: var(--gutter); text-align: right; }
.hero-corner-dr { right: var(--gutter); bottom: var(--s4); text-align: right; }
.hero-corner-dl { left: var(--gutter); bottom: var(--s4); }
.scroll-arrow { font-style: normal; color: var(--orange); }
.hero-corner-dl b { font-weight: 400; color: var(--white); }

/* ── pinned sections ── */
.pin { position: relative; min-height: 100vh; min-height: 100svh; }
.threats, .sequence { position: relative; }
.stage { position: relative; min-height: 100vh; min-height: 100svh; padding-top: var(--bar); display: flex; flex-direction: column; }
.card-stack { position: relative; flex: 1; min-height: 0; }
.icard {
  position: absolute; inset: 0; overflow: hidden;
  border: 1px solid var(--faint-3);
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: end;
  will-change: transform, opacity;
}
.icard-plate { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.icard-frame { position: absolute; inset: var(--s3); border: 1px solid rgba(221, 221, 221, .16); z-index: 2; pointer-events: none; }
.icard-body { position: relative; z-index: 3; padding: var(--s6) var(--s5); max-width: 34rem; }
.icard-n { display: block; color: var(--orange); margin-bottom: var(--s3); font-size: .694rem; }
.icard-body h3 { font-family: var(--display); font-weight: 500; font-size: 2.22rem; line-height: .88; letter-spacing: -.044rem; margin-bottom: var(--s4); }
.icard-body p { color: var(--white); }
.icard-hud { position: relative; z-index: 3; padding: var(--s5); justify-self: end; align-self: start; text-align: left; }
.threats-rail { position: absolute; right: var(--gutter); top: var(--bar); bottom: var(--s4); display: grid; justify-items: center; align-content: start; gap: var(--s2); }
.threats-rail .mono { font-size: .5556rem; color: var(--muted); }
.rail { position: relative; width: 1px; height: 34vh; background: var(--faint-2); display: block; }
.rail b { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--orange); display: block; }

/* ── sequence ── */
.seq-stage { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
#seq-canvas, #seq-still { position: absolute; inset: 0; width: 100%; height: 100%; }
#seq-still { display: none; }
html.no-seq #seq-canvas { display: none; }
html.no-seq #seq-still { display: block; }
.seq-inner { position: relative; z-index: 4; min-height: 100vh; min-height: 100svh; padding-top: var(--bar); display: flex; flex-direction: column; }
.seq-h2 {
  font-family: var(--display); font-weight: 500; font-size: 3.33rem; line-height: .90;
  letter-spacing: -.133rem; margin: var(--s5) 0 var(--s4); max-width: 22ch;
}
.seq-sub { max-width: 32rem; color: var(--white); }
.seq-labels { list-style: none; margin-top: var(--s6); display: grid; gap: .42rem; color: var(--muted); font-size: .5556rem; }
.seq-labels li { display: flex; gap: var(--s2); }
.seq-labels li::before { content: "—"; color: var(--faint-3); }
.seq-line { position: absolute; right: var(--gutter); top: var(--bar); bottom: var(--s4); width: 1px; background: var(--faint-2); z-index: 4; }
.seq-line b { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--orange); display: block; }

/* ── effectiveness ── */
.stats { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.stats-inner { position: relative; z-index: 3; width: 100%; }
.columns { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); pointer-events: none; z-index: 1; }
.columns i { display: block; height: 0; background: rgba(221, 221, 221, .018); border-right: 1px solid var(--faint-2); transform-origin: 50% 100%; }
.columns i:last-child { border-right: 0; }
.stat-list { margin-top: var(--s5); }
.stat { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s4); align-items: end; border-top: 1px solid var(--faint); padding: var(--s5) 0 var(--s6); }
.stat:first-child { border-top: 0; }
.stat dt { color: var(--muted); font-size: .5556rem; letter-spacing: .1em; }
.stat-value {
  grid-column: 2; grid-row: 1 / span 2; font-family: var(--display); font-weight: 500;
  font-size: 5rem; line-height: .88; letter-spacing: -.17rem; justify-self: start;
}
.stat-unit { grid-column: 1; color: var(--muted); font-size: .5556rem; margin-top: var(--s2); }
.stats-note { margin-top: var(--s6); color: var(--muted); font-size: .5556rem; }
.stats-note i { font-style: normal; color: var(--faint-3); margin: 0 .42rem; }

.odometer { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; }
.odometer .dcol { display: block; overflow: hidden; height: 1em; width: .58em; }
.odometer .dtrack { display: block; transform: translateY(0); }
.odometer .dtrack span { display: block; height: 1em; }
.odometer .dsep { display: block; width: .28em; }

/* ── system ── */
.system { min-height: 100vh; min-height: 100svh; padding-bottom: var(--s8); }
.statement { position: relative; padding: var(--s7) 0 var(--s8); }
.fly { position: absolute; color: var(--muted); font-size: .5556rem; }
.fly-l { left: 0; top: var(--s7); }
.fly-r { right: 0; top: var(--s7); text-align: right; }
.fly-2 { top: calc(var(--s7) + 1.11rem); }
.statement-lines { font-family: var(--display); font-weight: 500; font-size: 3.33rem; line-height: .90; letter-spacing: -.133rem; text-align: center; }
.statement-lines .sline { display: block; }
.specgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
.spec { display: grid; grid-template-columns: 14rem 1fr; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--faint-2); align-items: baseline; }
.spec-k { color: var(--muted); font-size: .5556rem; letter-spacing: .08em; }
.spec-v { color: var(--white); }
.spec-v.num { font-family: var(--mono); font-size: .83rem; }

/* ── scheme ── */
.scheme { min-height: 100vh; min-height: 100svh; padding-bottom: var(--s6); }
.scheme-frame { border: 1px solid var(--faint); padding: var(--s3); background: rgba(221, 221, 221, .012); }
.dg { width: 100%; height: auto; }
.dg-node rect { fill: rgba(221, 221, 221, .02); stroke: var(--faint-3); stroke-width: 1; }
.dg-node.is-accent rect { stroke: var(--accent-soft); fill: var(--accent-bg); }
.dg-node .dg-tick { fill: var(--white); stroke: none; }
.dg-node.is-accent .dg-tick { fill: var(--orange); }
.dg-i { font-family: var(--mono); font-size: 12px; fill: var(--muted); }
.dg-t { font-family: var(--display); font-size: 19px; fill: var(--white); }
.dg-s { font-family: var(--mono); font-size: 11px; fill: var(--muted); letter-spacing: .04em; }
.dg-edge { fill: none; stroke: var(--faint); stroke-width: 1; }
.dg-edge.is-accent { stroke: var(--accent-soft); }
.dg-head { fill: var(--faint-3); }
.dg-lg { font-family: var(--mono); font-size: 11px; fill: var(--muted); letter-spacing: .06em; }
.dg-lg-bg { fill: var(--black); }
.dg-note { font-family: var(--mono); font-size: 11px; fill: var(--muted); letter-spacing: .08em; }
.scheme-cap { margin-top: var(--s3); color: var(--muted); font-size: .5556rem; }
.scheme-pan { position: relative; }
.scheme-pan::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3.89rem;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: linear-gradient(90deg, rgba(5, 5, 5, 0), rgba(5, 5, 5, .94));
}
.scheme-swipe { display: none; align-items: center; gap: .42rem; margin-top: var(--s2); color: var(--muted); }

/* ── index list ── */
.index { padding-bottom: var(--s8); }
.idx { list-style: none; }
.idx-row { border-top: 1px solid var(--faint); }
.idx-head { display: grid; grid-template-columns: 3.33rem 1fr 2.22rem; align-items: center; gap: var(--s3); height: 4.44rem; }
.idx-n { color: var(--muted); font-size: .5556rem; }
.idx-name { font-family: var(--display); font-weight: 500; font-size: 2.22rem; line-height: .88; letter-spacing: -.044rem; }
.idx-ico { opacity: 0; transition: opacity .2s ease; justify-self: end; }
.idx-ico svg { width: 1.11rem; height: 1.11rem; fill: none; stroke: var(--orange); stroke-width: 1.4; }
.idx-row:hover .idx-ico, .idx-row:focus-within .idx-ico { opacity: 1; }
.idx-row:hover .idx-name { animation: flicker .45s linear; }
.idx-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.25, 1, .5, 1); }
.idx-row:hover .idx-panel, .idx-row:focus-within .idx-panel { grid-template-rows: 1fr; }
.idx-panel-in { overflow: hidden; min-height: 0; }
.idx-row:hover .idx-panel-in, .idx-row:focus-within .idx-panel-in { min-height: 10.21rem; }
.idx-panel p { max-width: 46rem; padding: 0 0 var(--s3) 3.33rem; color: var(--white); }
.idx-meta { display: block; padding: 0 0 var(--s4) 3.33rem; color: var(--muted); font-size: .5556rem; }

/* ── footer ── */
.foot { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
#foot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .5; }
.foot-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(42% 34% at 22% 44%, var(--glow), rgba(5, 5, 5, 0) 72%), radial-gradient(60% 40% at 50% 104%, rgba(252, 79, 0, .05), rgba(5, 5, 5, 0) 70%); }
.foot-inner { position: relative; z-index: 4; width: 100%; padding-top: var(--bar); }
.foot-cta { display: grid; gap: var(--s5); justify-items: start; padding: var(--s7) 0 var(--s8); }
.foot-cta h2 { font-family: var(--display); font-weight: 500; font-size: 5rem; line-height: .88; letter-spacing: -.25rem; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); border-top: 1px solid var(--faint); padding-top: var(--s5); }
.foot-col { display: grid; align-content: start; gap: .42rem; }
.foot-head { color: var(--white); font-size: .5556rem; letter-spacing: .1em; margin-bottom: var(--s2); }
.foot-link { color: var(--muted); font-size: .5556rem; padding: .14rem 0; }
.foot-link:hover { color: var(--white); animation: flicker .45s linear; }
.foot-link.is-live { color: var(--white); }
.foot-hud { display: grid; gap: .28rem; margin-top: var(--s7); color: var(--muted); font-size: .5556rem; }
.foot-hud b { color: var(--white); font-weight: 400; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: baseline; border-top: 1px solid var(--faint); margin-top: var(--s5); padding-top: var(--s4); color: var(--muted); }
.foot-bottom .mono { font-size: .5556rem; }
.foot-live b { color: var(--white); font-weight: 400; }
.foot-live i { font-style: normal; }
.foot-word { color: var(--white); letter-spacing: .28em; }
.foot-risk { margin-top: var(--s4); color: rgba(117, 134, 150, .8); font-size: .5556rem; max-width: 60rem; }

/* ── motion primitives ── */
@keyframes flicker {
  0% { opacity: 1; } 10% { opacity: 0; } 20% { opacity: 1; } 32% { opacity: .2; }
  44% { opacity: 1; } 58% { opacity: .4; } 72% { opacity: 1; } 86% { opacity: .1; } 100% { opacity: 1; }
}
@keyframes text-fade-in {
  0% { opacity: 1; color: rgba(252, 79, 0, 0); }
  4% { color: rgba(252, 79, 0, 1); } 5% { color: rgba(252, 79, 0, 0); }
  8% { opacity: .2; } 11% { opacity: .9; } 14% { color: rgba(252, 79, 0, 1); }
  18% { opacity: 1; } 26% { color: rgba(252, 79, 0, .9); } 32% { opacity: 1; }
  55% { color: rgba(252, 79, 0, .5); opacity: .7; }
  70% { color: inherit; opacity: .7; } 100% { opacity: 1; color: inherit; }
}
.js .split .wd { display: inline-block; white-space: nowrap; }
.js .split .ch { display: inline-block; }
.js .fade-ready .ch { opacity: 0; }
.js .fade-run .ch { animation: text-fade-in .32s cubic-bezier(.25, 1, .5, 1) both; }
.js .scrub { opacity: 0; }
.js .scrub .scr { font-style: normal; color: var(--orange); }
.js .scrub.is-resolved { opacity: 1; }
.js .icard { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.has-cursor, html.has-cursor * { cursor: auto !important; }
  .cursor { display: none; }
  .grain { animation: none; }
  .js .icard { opacity: 1; }
  .js .scrub { opacity: 1; }
  .js .fade-ready .ch { opacity: 1; }
  .js .fade-run .ch { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── tablet / phone ── */
@media (max-width: 991px) {
  .tb-nav, .tb-telemetry .tb-site { display: none; }
  .tb-telemetry { margin-left: auto; }
  .topbar { padding-right: .56rem; }
  .topbar .tickbtn { padding: 0 .83rem; }
  .topbar .tickbtn .mono { font-size: .625rem; }
  /* the progress rail keeps its place: a hairline hatch along the bottom of the bar */
  .tb-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px; min-width: 0;
    border: 0; border-top: 1px solid var(--faint-2);
  }

  .hero-corner-tr { display: none; }
  .hero-h1 { font-size: 3.33rem; letter-spacing: -.14rem; }
  .hero-sub { margin-bottom: var(--s4); }

  /* cards stop being a pinned stack and become a plain list of instruments */
  .stage, .pin, .seq-inner { min-height: 0; }
  .stage { padding-top: calc(var(--bar) + var(--s4)); }
  .card-stack { display: grid; gap: var(--s3); padding-bottom: var(--s7); }
  .icard {
    position: relative; inset: auto; min-height: 0; opacity: 1;
    display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(11rem, 42svh) auto auto;
  }
  .icard-plate { opacity: .8; }
  .icard-frame { inset: .56rem; }
  .icard-body {
    grid-row: 3; padding: var(--s4) var(--s4) var(--s5);
    background: linear-gradient(180deg, rgba(5, 5, 5, .6), rgba(5, 5, 5, .95) 34%);
  }
  .icard-body h3 { font-size: 2.22rem; margin-bottom: var(--s3); }
  .icard-hud {
    grid-row: 2; justify-self: start; width: 100%;
    padding: var(--s4); background: rgba(5, 5, 5, .95);
    border-top: 1px solid var(--faint-2);
  }
  .threats-rail, .seq-line { display: none; }

  .seq-inner { min-height: 100svh; padding-bottom: var(--s5); }
  .seq-h2 { font-size: 2.22rem; letter-spacing: -.08rem; }
  .seq-labels { margin-top: var(--s5); }
  .seq-stage { position: absolute; }

  /* sections size to their content; the hero and the film keep the viewport */
  .stats, .system, .scheme, .index { min-height: 0; }
  .stats { padding: var(--s7) 0; }
  .system { padding-bottom: var(--s7); }
  .statement { padding: var(--s6) 0 var(--s7); }
  .statement-lines { font-size: 2.22rem; letter-spacing: -.08rem; text-align: left; }
  .fly { display: none; }
  .stat { grid-template-columns: 1fr; }
  .stat-value { grid-column: 1; grid-row: auto; margin-top: var(--s3); }
  .stat-unit { margin-top: var(--s2); }

  .specgrid { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 8.33rem 1fr; gap: var(--s3); padding: var(--s3) 0; }

  /* the scheme is a wide plate: pan it rather than shrink it to dust */
  .scheme-frame { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: var(--s2); }
  .scheme-pan::after { opacity: 1; }
  .scheme-frame .dg:not(.dg-compact) { min-width: 62rem; }
  .scheme-swipe { display: flex; }
  html.scheme-compact .scheme-swipe { display: none; }
  html.scheme-compact .scheme-pan::after { opacity: 0; }
  html.scheme-compact .scheme-frame { overflow-x: visible; }

  .idx-head { grid-template-columns: 2.22rem 1fr 1.67rem; height: 3.61rem; }
  .idx-name { font-size: 1.67rem; letter-spacing: -.03rem; }
  .idx-ico { opacity: .6; }
  .idx-panel p { padding-left: 2.22rem; }
  .idx-meta { padding-left: 2.22rem; }

  .foot-cols { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
  .foot-cta { padding: var(--s6) 0; }
  .foot-cta h2 { font-size: 3.33rem; letter-spacing: -.14rem; }
  .foot-link { padding: .28rem 0; }
  .foot-glow { height: 50%; }

  /* touch: no hover exists, so the index reads as a plain spec list */
  @media (hover: none) {
    .idx-panel { grid-template-rows: 1fr; }
    .idx-panel-in { min-height: 0; }
    .idx-panel p { padding-bottom: var(--s2); }
    .idx-meta { padding-bottom: var(--s4); }
    .foot-link { color: #9AA8B4; }
  }
}

@media (max-width: 767px) {
  /* micro labels are the language of this page; at 8.9px they are decoration.
     Ten pixels is the ceiling the design allows, so hold the floor there. */
  .mono, .sechead-box, .sechead-value, .hud-line, .hero-corner, .seq-labels,
  .stats-note, .spec-k, .idx-n, .idx-meta, .foot-head, .foot-link, .foot-hud,
  .foot-bottom .mono, .foot-risk, .scheme-cap, .pl-status, .pl-loading, .fly,
  .icard-n, .pl-foot .mono { font-size: .625rem; }
  .spec-v.num { font-size: .83rem; }
  .stat-value { font-size: 4.44rem; letter-spacing: -.12rem; }
  .foot-word { letter-spacing: .2em; }
}

@media (max-width: 478px) {
  .tb-std { display: none; }
  .tb-logo span { display: none; }
  .hero-corner-dl .hero-corner-sub { display: none; }
  .hero-h1 { font-size: 2.78rem; letter-spacing: -.11rem; }
  .icard-hud { padding: var(--s3) var(--s4) var(--s4); }
  .idx-head { grid-template-columns: 1.67rem 1fr 1.39rem; }
  .foot-cols { grid-template-columns: 1fr; }
  .foot-cta h2 { font-size: 2.78rem; letter-spacing: -.11rem; }
  .scheme-cap { max-width: 100%; }
}
html.ua-inapp .hero, html.ua-inapp .pin, html.ua-inapp .stats, html.ua-inapp .system { min-height: calc(100svh - 2rem); }
html.ua-inapp .foot { min-height: calc(100svh - 3rem); }