/* ============================================================================
   OmniTrace — public site stylesheet.  "The Scope."

   INTENT: this page is an INSTRUMENT, not a landing page. Hairlines instead of
   drop shadows, a reticle field instead of gradient blobs, a measured time rail
   instead of a feature timeline, and monospace wherever the page states a
   quantity. The radar-sweep motif ("Omni" is the omnidirectional antenna wave,
   NOT an all-seeing eye) is the one ornament, and it appears as the real brand
   mark rather than as decoration invented for the web.

   Tokens descend from the mini-app (app/frontend/styles.css) so the site and the
   product read as one company. Two deliberate divergences, both argued in
   DESIGN.md: (1) a text tier for each risk hue, because the app's chart-tier hues
   fail 4.5:1 as small type on --surface; (2) squarer radii, because uniformly
   rounded cards are the tell of a template.

   CSP: this file is the ONLY styling on the page. No inline <style>, no style="",
   no external asset from another origin. SVG colour and stroke width are applied
   here through classes, never through presentation attributes carrying var().
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Surfaces — warm carbon. Never blue-black. */
  --bg: #14110E;
  --bg-well: #100E0B;
  --surface: #1C1915;
  --surface-2: #231F19;
  --surface-3: #2A2620;

  /* Hairlines. The page is built out of these, not out of shadows. */
  --line: #302B22;
  --line-strong: #413A2E;
  --line-bright: #554C3D;

  /* Ink — warm paper. --ink-3 is lightened from the app's #7C7361 (4.04:1 on
     --bg, which fails) to 4.86:1; the original survives as --rule, used only for
     instrument marks that are not text. */
  --ink: #F1EBDE;
  --ink-2: #B5AB95;
  --ink-3: #8A806C;
  --rule: #7C7361;

  /* Copper — wordmark, seal, single call to action. NEVER data.
     #C4603A under near-black text is 4.55:1, too tight for a primary button, so
     interactive copper is one step lighter and lands at 5.9:1. */
  --brass: #C4603A;
  --brass-deep: #9E4A2C;
  --brass-lift: #D8764F;
  --brass-hot: #E4885F;
  --brass-ink: #DE7B50;
  --on-brass: #17130F;

  /* Risk, in two tiers. The -hue tier is the app's exact value and paints rules,
     dots and fills. The -ink tier paints type, and exists only because the hue
     tier is not readable at 13px on --surface. */
  --clear: #6FA86F;
  --review: #D79A3E;
  --flag: #CB5B4C;
  --entity: #5F7D8C;
  --clear-ink: #84BC84;
  --review-ink: #E3AC55;
  --flag-ink: #E0776A;
  --entity-ink: #7E9FAF;
  --clear-wash: rgba(111, 168, 111, .10);
  --review-wash: rgba(215, 154, 62, .10);
  --flag-wash: rgba(203, 91, 76, .11);
  --entity-wash: rgba(95, 125, 140, .10);

  /* Type */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t-mega: clamp(32px, 8.2vw, 60px);
  --t-h2: clamp(22px, 5.4vw, 33px);
  --t-h3: clamp(16px, 3.6vw, 18px);
  --t-body: clamp(15px, 3.8vw, 17px);
  --t-sm: 14px;
  --t-xs: 13px;
  --t-micro: 11px;

  /* Space — a 4px grid. There are no off-grid values anywhere in this file. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Shape — an instrument has corners. */
  --r-lg: 6px;
  --r-md: 4px;
  --r-sm: 3px;

  --wrap: 1120px;
  --gutter: 20px;
  --tap: 48px;                 /* every interactive target clears 44px */
}

/* ── 2. Reset & base ───────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The field the instrument sits on: a reticle grid, masked away as it descends,
   plus the mini-app's single static warm glow. No animation, no blobs. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, rgba(124, 115, 97, .05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(124, 115, 97, .05) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(120% 88% at 50% 0%, #000 0%, rgba(0, 0, 0, .3) 55%, transparent 84%);
  mask-image: radial-gradient(120% 88% at 50% 0%, #000 0%, rgba(0, 0, 0, .3) 55%, transparent 84%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(130% 60% at 50% -14%, rgba(196, 96, 58, .07), transparent 62%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.018em;
}

p { text-wrap: pretty; }
a { color: inherit; }
strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; color: var(--ink); }

/* A base58 or hex string must never widen the page. */
.v-addr, .link-row .a, .feed-addr, #addr { overflow-wrap: anywhere; word-break: break-word; }

/* ── 3. Focus & utilities ──────────────────────────────────────────────── */

:where(a, button, input, video, [tabindex]):focus-visible {
  outline: 2px solid var(--brass-hot);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 60;
  padding: var(--s3) var(--s4);
  background: var(--brass-lift); color: var(--on-brass);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  text-decoration: none; border-radius: var(--r-md);
  transition: top .12s ease-out;
}
.skip:focus { top: var(--s4); }

/* ── 4. THE MARK ───────────────────────────────────────────────────────
   Corinthian helmet at the centre of an omnidirectional radar. Geometry is
   imported verbatim from src/omni/ChannelLogo.tsx (the source of out/logos/*.png
   and of the Telegram avatars), so the site, the channels and the films are one
   family. Colour follows the "bot" variant: accent = ink, the one flagged contact
   = copper. Copper is never given to a second element.

   Strokes use `vector-effect: non-scaling-stroke`, so a width set here is in CSS
   pixels no matter how large the mark is drawn. Without it the 9-unit rim of the
   1024px avatar renders at half a pixel in a 38px header. */

.mk { display: block; width: 100%; height: 100%; overflow: visible; }

.mk-rim,
.mk-grat,
.mk-wave,
.mk-arm,
.mk-blip,
.mk-blip-ring,
.mk-helm,
.mk-eye,
.mk-nasal { vector-effect: non-scaling-stroke; }

.mk-rim   { fill: none; stroke: var(--ink); stroke-width: 1.7px; }
.mk-grat  { fill: none; stroke: var(--line-bright); stroke-width: 1px; opacity: .7; }
.mk-wave  { fill: none; stroke: var(--ink); stroke-width: 1px; opacity: 0; }
.mk-arm   { stroke: var(--ink); stroke-width: 1px; opacity: .9; }
.mk-wedge { fill: url(#mkSweepA); }
.mk-wedge-b { fill: url(#mkSweepB); }
.mk-sw-0  { stop-color: var(--ink); stop-opacity: 0; }
.mk-sw-1  { stop-color: var(--ink); stop-opacity: .34; }

.mk-blip      { fill: var(--bg); stroke: var(--ink); stroke-width: 1px; opacity: .45; }
.mk-blip-ring { fill: var(--bg); stroke: var(--brass); stroke-width: 2px; }
.mk-blip-hot  { fill: var(--brass); }

.mk-crest   { fill: url(#mkCrestA); }
.mk-crest-b { fill: url(#mkCrestB); }
.mk-cr-0    { stop-color: var(--ink); }
.mk-cr-1    { stop-color: var(--ink-2); }

.mk-helm  { fill: var(--surface); stroke: var(--ink); stroke-width: 1.7px; stroke-linejoin: round; }
.mk-eye   { fill: var(--bg); stroke: var(--ink); stroke-width: .8px; stroke-linejoin: round; }
.mk-iris  { fill: var(--ink); opacity: .9; }
.mk-nasal { fill: var(--surface); stroke: var(--ink); stroke-width: 1.2px; stroke-linejoin: round; }

/* The sweep rests at the approved static pose (38deg) and the animation adds to
   it, so a reduced-motion visitor sees exactly the signed-off logo. */
.mk-sweep {
  transform-box: view-box;
  transform-origin: 120px 150px;
  rotate: 38deg;
}
.mk-wave {
  transform-box: view-box;
  transform-origin: 120px 150px;
}

/* ── 5. Nav ────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 60px;
  padding: var(--s2) var(--gutter);
  background: rgba(20, 17, 14, .90);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none; min-height: 44px;
}

.brand-mark { width: 38px; height: 38px; flex: none; }

/* At 38px five quiet contacts are sub-pixel noise. The flagged one survives as a
   thick-stroked ring on a tiny radius, which renders as a solid copper dot — the
   only contact that carries meaning is the only one that stays. */
.brand-mark .mk-blip-quiet,
.brand-mark .mk-blip-hot { display: none; }
.brand-mark .mk-blip-ring { stroke-width: 4px; }
.brand-mark .mk-grat { opacity: .4; }

.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: .005em; color: var(--ink);
}
.brand-sub {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em;
  color: var(--rule); margin-top: 4px; text-transform: uppercase;
}

.nav-cta {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--s4);
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
  text-decoration: none; color: var(--ink); white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .14s, color .14s, background .14s;
}
.nav-cta:hover { border-color: var(--brass); color: var(--brass-ink); background: var(--surface-2); }

/* ── 6. Layout ─────────────────────────────────────────────────────────── */

main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--s7) 0; border-top: 1px solid var(--line); }

/* A section header is a channel label on an instrument: index, rule, name. */
.section-head { margin-bottom: var(--s5); }

.sec-idx {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s3);
}
.sec-idx::after {
  content: ''; display: block; width: 40px; height: 1px; background: var(--line-strong);
}

.section-head h2 { font-size: var(--t-h2); max-width: 22ch; }
.section-head > p:not(.sec-idx) {
  margin-top: var(--s3); color: var(--ink-2); max-width: 62ch; font-size: var(--t-sm);
}

/* ── 7. Hero ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: var(--s7) 0 var(--s6);
  overflow: hidden;
  isolation: isolate;
}

/* The mark again, watermarked and bleeding off the edge. A radar you can see all
   of is a diagram; one you are standing inside is an instrument. */
.scope {
  position: absolute; z-index: -1; pointer-events: none;
  top: -96px; right: -190px;
  width: 420px; height: 420px;
  opacity: .09;
}

.hero-body { position: relative; max-width: 42rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  padding: var(--s1) var(--s3) var(--s1) var(--s2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface);
  margin-bottom: var(--s4);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--clear); box-shadow: 0 0 0 3px var(--clear-wash);
}

.hero h1 { font-size: var(--t-mega); letter-spacing: -.03em; line-height: 1.04; }
.hero h1 .hl { color: var(--brass-ink); display: block; }

.sub { margin-top: var(--s4); max-width: 56ch; color: var(--ink-2); font-size: var(--t-body); }

/* ── 8. The scanner. This box is the pitch. ────────────────────────────── */

.scanbox {
  position: relative;
  margin-top: var(--s6);
  padding: var(--s3);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-bright);
  border-radius: var(--r-lg);
}

/* Reticle corners — the frame reads as a targeted field, not as a card. */
.scanbox::before, .scanbox::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: var(--brass); border-style: solid; border-width: 0;
}
.scanbox::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; border-radius: var(--r-lg) 0 0 0; }
.scanbox::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; border-radius: 0 0 var(--r-lg) 0; }

.scan-label {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 var(--s1) var(--s2);
}
.scan-led { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--brass); }

.scan-row { display: flex; flex-direction: column; gap: var(--s2); }

#addr {
  width: 100%; min-width: 0; min-height: var(--tap);
  padding: var(--s3) var(--s4);
  background: var(--bg-well);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-mono); font-size: 15px; line-height: 1.35;
  transition: border-color .14s, background .14s;
}
#addr::placeholder { color: var(--ink-3); font-family: var(--font-body); }
#addr:hover { border-color: var(--line-bright); }
#addr:focus {
  outline: 2px solid var(--brass-hot); outline-offset: 2px;
  border-color: var(--brass); background: #0C0A08;
}

#scanBtn {
  width: 100%; min-height: var(--tap);
  padding: 0 var(--s6);
  background: var(--brass-lift); color: var(--on-brass);
  border: none; border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  cursor: pointer;
  transition: background .14s, transform .06s;
}
#scanBtn:hover:not(:disabled) { background: var(--brass-hot); }
#scanBtn:active:not(:disabled) { transform: translateY(1px); }
#scanBtn:disabled { background: var(--surface-3); color: var(--ink-3); cursor: progress; }

.hint {
  margin-top: var(--s3); font-size: var(--t-xs); color: var(--ink-3);
  display: flex; gap: var(--s2); align-items: flex-start;
}
.hint::before { content: '//'; font-family: var(--font-mono); color: var(--rule); flex: none; }

/* ── 9. Scan result — every class below is emitted at runtime by site.js ─ */

.result { margin-top: var(--s5); }
.result[hidden] { display: none; }

.verdict {
  position: relative;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--line-bright);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s5) var(--s4);
  overflow: hidden;
}
/* The wash is short and top-anchored so the nested .locked panel stays legible. */
.verdict::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 140px; pointer-events: none;
  background: linear-gradient(180deg, var(--wash, transparent), transparent);
}
.verdict.CLEAN        { border-left-color: var(--clear);  --wash: var(--clear-wash); }
.verdict.CAUTION      { border-left-color: var(--review); --wash: var(--review-wash); }
.verdict.HIGH_RISK    { border-left-color: var(--flag);   --wash: var(--flag-wash); }
.verdict.KNOWN_ENTITY { border-left-color: var(--entity); --wash: var(--entity-wash); }

.v-band {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 5vw, 26px); letter-spacing: -.02em;
  text-transform: uppercase; color: var(--ink);
}
.verdict.CLEAN .v-band        { color: var(--clear-ink); }
.verdict.CAUTION .v-band      { color: var(--review-ink); }
.verdict.HIGH_RISK .v-band    { color: var(--flag-ink); }
.verdict.KNOWN_ENTITY .v-band { color: var(--entity-ink); }

.v-reason { position: relative; margin-top: var(--s2); color: var(--ink); font-size: var(--t-sm); max-width: 60ch; }
.v-note   { position: relative; margin-top: var(--s3); color: var(--ink-3); font-size: var(--t-xs); max-width: 62ch; }

.v-addr {
  position: relative;
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
}

/* Measurement block — hairline-separated cells, like a meter readout. */
.stats {
  position: relative;
  display: grid; gap: 1px; margin-top: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stat { background: var(--surface-2); padding: var(--s3); }
.stat-k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.stat-v {
  font-family: var(--font-mono); font-size: 16px; font-weight: 500;
  margin-top: var(--s1); color: var(--ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.stat-v.bad { color: var(--flag-ink); }

.links { position: relative; margin-top: var(--s5); }
.links h4 {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--line);
}
.link-row {
  display: grid; gap: var(--s1);
  grid-template-columns: 1fr;
  padding: var(--s3);
  margin-bottom: var(--s2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--flag);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
}
.link-row .a { font-family: var(--font-mono); color: var(--ink-2); font-size: 12px; }
.link-row .l { color: var(--flag-ink); font-weight: 600; }

/* The conversion panel. Recessed rather than raised — it is a door, not a card. */
.locked {
  position: relative;
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--bg-well);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background-image: repeating-linear-gradient(135deg, rgba(196, 96, 58, .05) 0 1px, transparent 1px 9px);
}
.locked h4 { font-family: var(--font-display); font-size: var(--t-h3); color: var(--ink); margin-bottom: var(--s2); }
.locked p { font-size: var(--t-sm); color: var(--ink-2); max-width: 58ch; }
.locked .btn-primary { margin-top: var(--s4); }

.err {
  padding: var(--s4);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--review);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm);
}

.loading {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-2); font-size: var(--t-sm);
}
.spinner {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brass-lift);
  animation: spin .9s linear infinite;
}

/* ── 10. Live freeze feed ──────────────────────────────────────────────── */

.feed {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.feed-empty {
  background: var(--surface);
  color: var(--ink-3); font-size: var(--t-sm);
  padding: var(--s5) var(--s4);
  font-family: var(--font-mono);
}

.feed-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-areas:
    "dot addr addr"
    ".   net  when";
  align-items: center;
  column-gap: var(--s3); row-gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  font-size: var(--t-xs);
  transition: background .14s;
}
.feed-row:hover { background: var(--surface-2); }

.feed-dot {
  grid-area: dot; align-self: center;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--flag);
  box-shadow: 0 0 0 3px var(--flag-wash);
}

.feed-addr {
  grid-area: addr;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
}

.feed-net {
  grid-area: net; justify-self: start;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px var(--s2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-3);
  white-space: nowrap;
}

.feed-when {
  grid-area: when; justify-self: end;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── 11. The time rail — the differentiator, drawn as a measurement ────── */

.rail-step {
  display: grid;
  grid-template-columns: 66px 16px minmax(0, 1fr);
  column-gap: var(--s3);
  padding-bottom: var(--s6);
}
.rail-step:last-child { padding-bottom: 0; }

.rail-t {
  grid-column: 1; text-align: right;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  padding-top: 1px; line-height: 1.3;
}
.rail-t b { display: block; font-weight: 500; color: var(--ink); }
.rail-t span {
  display: block; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rule); margin-top: 3px;
}

/* The track colour IS the argument: dashed amber for as long as the money can
   still move, then nothing. */
.rail-track { grid-column: 2; position: relative; }
.rail-track::before {
  content: ''; position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 18px; bottom: -32px; width: 2px;
  background: var(--line-strong);
}
.rail-step:last-child .rail-track::before { display: none; }
.rail-step.is-window .rail-track::before {
  background: repeating-linear-gradient(to bottom, var(--review) 0 5px, transparent 5px 10px);
  opacity: .85;
}

.rail-dot {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--rule);
}
.rail-dot.review { border-color: var(--review); background: var(--review); box-shadow: 0 0 0 4px var(--review-wash); }
.rail-dot.flag   { border-color: var(--flag);   background: var(--flag);   box-shadow: 0 0 0 4px var(--flag-wash); }
.rail-dot.ink    { border-color: var(--line-bright); background: var(--surface-2); }

.rail-body { grid-column: 3; }
.rail-body h3 { font-size: var(--t-h3); color: var(--ink); }
.rail-body p { margin-top: var(--s2); color: var(--ink-2); font-size: var(--t-sm); max-width: 54ch; }

.tl-tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: var(--s1) var(--s2);
  border-radius: var(--r-sm);
  color: var(--brass-ink);
  background: rgba(196, 96, 58, .10);
  border: 1px solid rgba(196, 96, 58, .34);
}
.tl-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.tl-tag.muted { color: var(--ink-3); background: var(--surface-2); border-color: var(--line-strong); }

/* ── 12. Film ──────────────────────────────────────────────────────────
   Both films are 9:16 because they were made for phones, and they are presented
   as phones rather than letterboxed into a widescreen frame that lies about the
   format. Sizing is width-driven so `aspect-ratio` can resolve height without a
   second constraint fighting it. */

.watch { display: grid; gap: var(--s6); }

.vid { display: grid; gap: var(--s3); justify-items: center; }

.vid-frame {
  display: flex; justify-content: center;
  width: fit-content; max-width: 100%;
  padding: var(--s2);
  background: var(--bg-well);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
}

.vid-el {
  width: min(100%, 252px);
  aspect-ratio: 9 / 16;
  height: auto;
  display: block;
  border-radius: var(--r-md);
  background: #0C0A08;
}

.vid figcaption { text-align: center; max-width: 34ch; }
.vid-k {
  display: block;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.vid-v { display: block; margin-top: var(--s2); font-size: var(--t-xs); color: var(--ink-2); }

/* ── 13. Capability spec sheet ─────────────────────────────────────────── */

.cards {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.card { background: var(--surface); padding: var(--s5) var(--s4); transition: background .14s; }
.card:hover { background: var(--surface-2); }
.card h3 { font-size: var(--t-h3); display: flex; align-items: baseline; gap: var(--s3); }
.card h3::before {
  content: attr(data-idx);
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .1em; color: var(--brass); flex: none;
}
.card p { margin-top: var(--s2); color: var(--ink-2); font-size: var(--t-sm); }

/* ── 14. What we will not tell you ─────────────────────────────────────── */

.honest { list-style: none; display: grid; gap: var(--s3); }
.honest li {
  position: relative;
  padding: var(--s4) var(--s4) var(--s4) var(--s6);
  font-size: var(--t-sm); color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.honest li::before {
  content: ''; position: absolute;
  left: var(--s4); top: calc(var(--s4) + .62em);
  width: 12px; height: 2px; background: var(--brass); border-radius: 1px;
}
.honest strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* ── 15. CTA console ───────────────────────────────────────────────────── */

.cta {
  position: relative; overflow: hidden;
  margin: var(--s7) 0;
  padding: var(--s6) var(--s5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(196, 96, 58, .10), transparent 60%),
    var(--surface);
}
.cta::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent 70%);
}
.cta h2 { font-size: var(--t-h2); max-width: 18ch; }
.cta p { margin-top: var(--s3); color: var(--ink-2); max-width: 52ch; font-size: var(--t-sm); }
.cta-note { margin-top: var(--s3); font-size: var(--t-xs); color: var(--ink-3); }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  margin-top: var(--s5);
  padding: 0 var(--s6);
  background: var(--brass-lift); color: var(--on-brass);
  text-decoration: none; border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  transition: background .14s, transform .06s;
}
.btn-primary:hover { background: var(--brass-hot); }
.btn-primary:active { transform: translateY(1px); }

/* ── 16. Footer ────────────────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--line); background: var(--bg-well); }
.footer-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s6) var(--gutter) var(--s8);
  font-size: var(--t-xs); color: var(--ink-3);
}
.footer p + p { margin-top: var(--s2); }
.footer .fine { max-width: 72ch; color: var(--rule); }
.footer-mark {
  display: block; margin-bottom: var(--s3);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rule);
}

/* ── 17. Motion ────────────────────────────────────────────────────────── */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes mkSweep { to { transform: rotate(360deg); } }
@keyframes mkWave {
  0%   { transform: scale(.5); opacity: 0; }
  25%  { opacity: .3; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes led { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* One revolution every 9 s, three waves per revolution — the same cadence as
     the Telegram avatar loop, so the site and the channel avatar move alike. */
  .mk-sweep { animation: mkSweep 9s linear infinite; }
  .mk-wave  { animation: mkWave 9s ease-out infinite; }
  .mk-wave-2 { animation-delay: -3s; }
  .mk-wave-3 { animation-delay: -6s; }
  .scan-led { animation: led 2.4s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* The spinner still has to read as "working", so it degrades to a static ring
     with a visible copper arc rather than to nothing at all. */
  .spinner { border-top-color: var(--brass-hot); border-width: 3px; }
  /* The mark holds its signed-off pose; the waves are simply absent. */
  .mk-wave { display: none; }
}

/* ── 18. Wider viewports. The phone layout above is the design; this adapts. */

@media (min-width: 600px) {
  :root { --gutter: 28px; }

  .scan-row { flex-direction: row; align-items: stretch; }
  #addr { flex: 1 1 auto; }
  #scanBtn { width: auto; flex: 0 0 auto; }

  .link-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s4); }
  .link-row .l { justify-self: end; text-align: right; }

  .feed-row {
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    grid-template-areas: "dot addr net when";
    row-gap: 0; column-gap: var(--s4);
  }

  .rail-step { grid-template-columns: 92px 18px minmax(0, 1fr); column-gap: var(--s4); }
  .rail-t { font-size: 13px; }

  .cards { grid-template-columns: 1fr 1fr; }
  .watch { grid-template-columns: 1fr 1fr; align-items: start; }
  .vid-el { width: min(100%, 280px); }

  .verdict { padding: var(--s6) var(--s5); }
  .scope { top: -130px; right: -170px; width: 540px; height: 540px; }
}

@media (min-width: 960px) {
  :root { --gutter: 40px; }

  .hero { padding: var(--s9) 0 var(--s8); }
  .hero-body { max-width: 40rem; }
  .hero h1 .hl { display: inline; }
  .scope { top: -150px; right: -110px; width: 680px; height: 680px; opacity: .11; }

  .section { padding: var(--s8) 0; }

  .section-head {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s7);
    align-items: end;
  }
  .sec-idx { grid-column: 1 / -1; margin-bottom: 0; }
  .section-head > p:not(.sec-idx) { margin-top: 0; }

  .cards { grid-template-columns: repeat(3, 1fr); }
  .honest { grid-template-columns: 1fr 1fr; }
  .vid-el { width: min(100%, 300px); }

  .cta { padding: var(--s8) var(--s7); }
  .cta h2 { font-size: clamp(28px, 3.4vw, 40px); }
}

@media (min-width: 1180px) {
  /* Only past this width is there room for the scope to sit clear of the copy. */
  .scope { right: -30px; top: -140px; }
}