/* ═══════════════════════════════════════════════════════════════
   SKOPEIN — landing page
   Built on SKOPEIN Brand System v2.1 (graphite + one signal,
   stroke 2px, radius 0, 24px grid, sans = human / mono = machine).
   Type: ABC Camera TRIAL embedded via fonts.css — swap in licensed
   files before public launch.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* graphite ramp */
  --g-50:#F4F6F7;--g-100:#E8EBED;--g-200:#D3D8DC;--g-300:#B0B8BF;--g-400:#8D97A1;
  --g-500:#6A7581;--g-600:#4D5761;--g-700:#353D46;--g-800:#232930;--g-900:#171C21;--g-950:#0F1317;
  /* signal — rationed: alerts, live, detections, primary action */
  --signal-300:#FF9633;--signal-500:#FF7A00;--signal-600:#E06900;--signal-800:#9E4A00;
  /* status */
  --ok-300:#4CC97B;--warn-300:#FFB020;--crit-300:#FF6B5E;
  /* semantic (dark theme — the control room, locked for this page) */
  --bg:var(--g-950);--surface:var(--g-900);--raised:var(--g-800);
  --line:var(--g-700);--line-strong:var(--g-600);
  --text:var(--g-100);--muted:var(--g-400);
  --accent:var(--signal-500);--accent-hover:var(--signal-300);
  --on-accent:var(--g-950);--wash:rgba(255,122,0,.10);
  --tick:rgba(232,235,237,.13);
  --ok:var(--ok-300);--crit:var(--crit-300);
  /* type */
  --sk-display:"SK Display","ABC Camera",Archivo,"Helvetica Neue",Arial,sans-serif;
  --sk-sans:"SK Sans","ABC Camera Plain",Archivo,"Helvetica Neue",Arial,sans-serif;
  --sk-mono:"SK Mono","ABC Camera Plain Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  /* shape + motion */
  --stroke:2px;--grid:24px;--radius:0px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:68px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sk-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--on-accent)}
*:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* thin instrument scrollbar */
html{scrollbar-width:thin;scrollbar-color:var(--g-700) var(--g-950)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--g-950)}
::-webkit-scrollbar-thumb{background:var(--g-700);border:2px solid var(--g-950)}

/* ── layers ─────────────────────────────────────────────────── */
#space{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%}
/* fade grid — 48px graticule that dissolves toward the edges */
#grat{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.12;
  background-image:
    linear-gradient(var(--g-700) 1px,transparent 1px),
    linear-gradient(90deg,var(--g-700) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 0%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 0%,transparent 78%);
}
main,header.nav,footer{position:relative;z-index:2}

/* contained canvas: the classic centred measure */
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(20px,5vw,64px)}

/* type voices */
.mono{font-family:var(--sk-mono);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.label{
  font-family:var(--sk-mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.display{font-family:var(--sk-display);font-weight:700;letter-spacing:-.02em;line-height:1.05}

/* ── loader ─────────────────────────────────────────────────── */
#loader{
  position:fixed;inset:0;z-index:100;background:var(--g-950);
  display:flex;align-items:center;justify-content:center;
  /* no-JS / slow-JS safety: self-dismisses */
  animation:loader-auto .5s var(--ease) 2.8s forwards;
}
#loader.done{display:none}
@keyframes loader-auto{to{opacity:0;visibility:hidden}}
#loader .mark{width:min(600px,72vw);height:auto}
#loader .readout{
  position:absolute;left:28px;bottom:24px;
  display:flex;gap:18px;align-items:baseline;
}
#loader .readout .pct{color:var(--text)}

/* ── nav ────────────────────────────────────────────────────── */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
header.nav.solid{background:rgba(15,19,23,.82);border-bottom-color:var(--raised)}
@supports (backdrop-filter:blur(1px)){
  header.nav.solid{background:rgba(15,19,23,.82);backdrop-filter:blur(14px)}
}
.nav-in{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand .lockup{height:30px;width:auto}
@media (max-width:860px){.brand .lockup{height:26px}}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{
  font-family:var(--sk-sans);font-size:13.5px;color:var(--muted);
  text-decoration:none;transition:color .2s var(--ease);
}
.nav-links a:hover{color:var(--text)}

/* buttons are HUMAN speech — SK Sans, sentence case (brand voice rule) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sk-sans);font-size:13.5px;font-weight:700;
  text-decoration:none;padding:12px 20px;border:0;border-radius:var(--radius);
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .12s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--accent);color:var(--on-accent)}
.btn-solid:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);padding:11px 19px}
.btn-ghost:hover{background:var(--surface);border-color:var(--g-400)}
.btn-sm{padding:10px 17px;font-size:13px}
.btn-ghost.btn-sm{padding:9px 16px}

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

.menu-btn{display:none;width:44px;height:44px;position:relative}
.menu-btn i{
  position:absolute;left:11px;right:11px;height:2px;background:var(--text);
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.menu-btn i:first-child{top:17px}
.menu-btn i:last-child{top:25px}
body.menu-open .menu-btn i:first-child{top:21px;transform:rotate(45deg)}
body.menu-open .menu-btn i:last-child{top:21px;transform:rotate(-45deg)}

#menu{
  position:fixed;inset:0;z-index:40;background:rgba(15,19,23,.97);
  display:none;align-items:center;overflow-y:auto;
}
body.menu-open #menu{display:flex}
/* margin-block auto centers when it fits and allows scroll when it doesn't */
#menu .menu-in{
  display:flex;flex-direction:column;gap:6px;width:100%;
  margin-block:auto;padding-block:calc(var(--nav-h) + 24px) 48px;
}
#menu a.mlink{
  font-family:var(--sk-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(32px,9vw,52px);line-height:1.15;color:var(--text);
  text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line);
}
#menu a.mlink:hover{color:var(--g-50)}
#menu .btn{margin-top:28px;align-self:flex-start}

/* ── hero (reference look, transplanted verbatim) ───────────── */
#hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px 0 60px;
}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.hero-eyebrow .label{letter-spacing:.18em}
.hero-eyebrow .dot{width:7px;height:7px;background:var(--accent);border-radius:50%;flex:none}
@media (prefers-reduced-motion:no-preference){
  .hero-eyebrow .dot{animation:heroPulse 2.4s ease-in-out infinite}
  @keyframes heroPulse{0%,100%{opacity:1}50%{opacity:.25}}
}
.hero-h{
  font-family:var(--sk-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(44px,9vw,124px);line-height:.98;text-wrap:balance;
}
.hero-h .l2{display:block;color:var(--muted)}
/* the detection frame around the second line: four corners snap in */
.frame{position:relative;display:inline-block}
.frame::before,.frame::after,.frame > .br::before,.frame > .br::after{
  content:"";position:absolute;width:16px;height:16px;
  border:2px solid var(--accent);opacity:0;
}
.frame::before{top:-10px;left:-12px;border-right:0;border-bottom:0}
.frame::after{top:-10px;right:-12px;border-left:0;border-bottom:0}
.frame > .br::before{bottom:-10px;left:-12px;border-right:0;border-top:0}
.frame > .br::after{bottom:-10px;right:-12px;border-left:0;border-top:0}
.frame.lock::before,.frame.lock::after,
.frame.lock > .br::before,.frame.lock > .br::after{
  opacity:1;animation:frameSnap .38s var(--ease) both;
}
.frame.lock::after{animation-delay:.05s}
.frame.lock > .br::before{animation-delay:.1s}
.frame.lock > .br::after{animation-delay:.15s}
@keyframes frameSnap{from{transform:scale(1.9);opacity:0}to{transform:scale(1);opacity:1}}
.hero-sub{margin-top:30px;max-width:54ch;font-size:clamp(16px,1.75vw,20px);color:var(--muted)}
.hero-cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* dotted scan rule with the travelling amber sweep */
.hero-scan{
  margin-top:64px;height:1px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 8px);
}
.hero-scan i{position:absolute;top:-1px;left:0;height:3px;width:120px;background:var(--accent);display:none}
@media (prefers-reduced-motion:no-preference){
  .hero-scan i{display:block;animation:heroSweep 5.5s linear infinite}
  @keyframes heroSweep{from{transform:translateX(-140px)}to{transform:translateX(100vw)}}
}
.hero-stats{margin-top:26px;display:flex;gap:44px;flex-wrap:wrap}
.hero-stats b{
  font-family:var(--sk-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px,2.4vw,30px);line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.hero-stats span.label{display:block;margin-top:6px;letter-spacing:.16em}

/* ── sections shared ────────────────────────────────────────── */
section.block{padding:150px 0;position:relative}
section.block + section.block{border-top:1px solid var(--line)}
.kick{display:flex;align-items:baseline;gap:16px;margin-bottom:38px}
.kick .rule-line{flex:none;width:26px;height:2px;background:var(--line-strong);align-self:center;transform-origin:left}
.h2{
  font-family:var(--sk-display);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(32px,5.4vw,68px);margin-bottom:28px;max-width:18ch;text-wrap:balance;
}
.lead{color:var(--muted);max-width:60ch;font-size:clamp(16px,1.7vw,20px)}
.lead em{font-style:italic;color:var(--g-300)}
/* the lead steps right of the headline's left edge — off-axis rhythm */
.offset-lead{margin-left:clamp(0px,10vw,170px)}

/* runtime line masks (split by JS): hidden while revealing, freed after */
.sl-line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.sl-line > .sl-inner{display:inline-block;will-change:transform}
.h2.sl-done .sl-line{overflow:visible}

/* scan-line divider — M-05: attention moving through time (2/6 dash) */
.scanline{position:relative;height:2px;margin:0;overflow:visible;
  background-image:linear-gradient(90deg,var(--tick) 0 2px,transparent 2px 8px);
  background-size:8px 2px;background-repeat:repeat-x;
}
.scanline .seg{position:absolute;top:0;left:0;height:2px;width:120px;background:var(--accent)}
.scanline .now{position:absolute;top:-5px;right:-1px;width:2px;height:12px;background:var(--accent)}

/* ── 01 · the gap ───────────────────────────────────────────── */
#gap .panels{
  margin-top:90px;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.panel{padding:38px 40px 8px 0;border-top:0}
.panel + .panel{padding-left:40px;border-left:1px solid var(--line)}
.panel .term{
  display:block;margin-bottom:16px;
  font-family:var(--sk-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(26px,2.9vw,38px);line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.panel p{color:var(--muted);font-size:15px;max-width:34ch}

/* ── 02 · how it works ──────────────────────────────────────── */
#how .how-grid{display:grid;grid-template-columns:5fr 7fr;gap:80px}
#how .how-left{position:sticky;top:calc(var(--nav-h) + 48px);align-self:start}
.step-index{margin-top:44px;border-top:1px solid var(--line)}
.step-index li{
  list-style:none;display:flex;gap:18px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--line);
  color:var(--muted);transition:color .3s var(--ease);
}
.step-index li .si-n{font-family:var(--sk-mono);font-size:11px;letter-spacing:.1em}
.step-index li .si-t{font-size:15px;font-weight:500}
.step-index li .si-mark{
  width:14px;height:2px;background:var(--accent);margin-left:auto;flex:none;
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.step-index li.active{color:var(--text)}
.step-index li.active .si-mark{transform:scaleX(1)}

.step{padding:54px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:6px}
.step .s-tag{margin-bottom:18px}
.step h3{
  font-family:var(--sk-sans);font-weight:700;letter-spacing:-.015em;
  font-size:25px;line-height:1.2;margin-bottom:14px;
}
.step p{color:var(--muted);max-width:52ch}
.step .stage{
  margin-top:30px;border:1px solid var(--line);background:var(--surface);
  height:190px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.step .stage svg{width:100%;height:100%}
.stage .typed-rule{
  position:absolute;inset:0;display:flex;align-items:center;padding:0 36px;
  font-size:17px;color:var(--text);
}
.stage .typed-rule .tr-box{
  width:100%;border:1px solid var(--line-strong);padding:16px 18px;
  display:flex;align-items:center;min-height:56px;background:var(--g-950);
}
.stage .typed-rule .caret{
  display:inline-block;width:2px;height:1.15em;background:var(--accent);
  margin-left:2px;vertical-align:text-bottom;animation:caret 1.05s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}

/* ── 03 · console ───────────────────────────────────────────── */
/* the head sits off-axis to the right; the console answers beneath it */
#demo .console-head{max-width:720px;margin-left:auto;margin-bottom:60px}
.console{
  border:1px solid var(--line-strong);background:var(--surface);
  max-width:1040px;margin:0 auto;
}
.console-chrome{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--line);
}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
.live .dot{width:7px;height:7px;background:var(--accent);border-radius:50%}
@media (prefers-reduced-motion:no-preference){
  .live .dot{animation:live 2.2s var(--ease) infinite}
  @keyframes live{0%,100%{opacity:1}50%{opacity:.35}}
}
.feed{position:relative;background:var(--g-950);border-bottom:1px solid var(--line)}
.feed::before{content:"";display:block;padding-top:52%}
.feed > svg{position:absolute;inset:0;width:100%;height:100%}
.feed .feed-meta{
  position:absolute;left:16px;bottom:12px;color:var(--g-400);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.feed .feed-time{
  position:absolute;right:16px;top:12px;color:var(--g-400);
  font-size:10.5px;letter-spacing:.14em;
}
.console-body{padding:26px 24px 30px}
.field-label{margin-bottom:10px}
.rulefield{
  border:1px solid var(--line-strong);background:var(--g-950);
  min-height:58px;display:flex;align-items:center;gap:2px;
  padding:16px 18px;font-size:17.5px;color:var(--text);margin-bottom:18px;
}
.rulefield .caret{
  display:inline-block;width:2px;height:1.2em;background:var(--accent);flex:none;
  animation:caret 1.05s steps(1) infinite;
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;align-items:center}
/* chips carry human-written watch-rules — sans, sentence case */
.chip{
  font-family:var(--sk-sans);font-size:13.5px;font-weight:500;
  letter-spacing:0;color:var(--muted);
  border:1px solid var(--line-strong);padding:10px 16px;border-radius:var(--radius);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.chip:hover{color:var(--text);border-color:var(--g-400)}
.chip[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--wash)}
.demo-toggle{
  margin-left:auto;font-family:var(--sk-sans);font-size:13px;font-weight:500;
  color:var(--muted);border:1px solid transparent;padding:10px 12px;
  text-decoration:underline;text-underline-offset:3px;
  transition:color .25s var(--ease);
}
.demo-toggle:hover{color:var(--text)}
.demo-toggle[hidden]{display:none}
.verdict{
  border-top:1px solid var(--line);padding-top:20px;
  display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:start;
  min-height:74px;
}
.verdict .v-status{
  font-family:var(--sk-mono);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;gap:5px;
}
.verdict .v-status .v-word{transition:color .2s var(--ease)}
.verdict.detected .v-word{color:var(--accent)}
.verdict.clear .v-word{color:var(--ok)}
.verdict.scanning .v-word{color:var(--muted)}
.verdict .v-reason{color:var(--muted);font-size:15px;max-width:56ch}
.verdict .v-reason .r-tag{display:block;margin-bottom:6px}

/* feed svg internals (styled here so gsap only animates transforms/opacity) */
.feed-art .scene{stroke:var(--g-600);fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.feed-art .scene-dim{stroke:var(--g-700);fill:none;stroke-width:1.5}
.feed-art .scene-fill{fill:var(--g-800);stroke:none}
.feed-art .actor{stroke:var(--g-300);fill:none;stroke-width:2.5}
.feed-art .actor-fill{fill:var(--g-300);stroke:none}
.feed-art .zone{stroke:var(--g-500);stroke-dasharray:3 6;fill:none;stroke-width:1.5}
.feed-art .df-br{stroke:var(--signal-500);fill:none;stroke-width:2.5;opacity:0}
.feed-art .df-rect{stroke:var(--signal-500);fill:none;stroke-width:2.5;opacity:0}
.feed-art .df-tag rect{fill:var(--signal-500)}
.feed-art .df-tag text{
  fill:var(--g-950);font-family:var(--sk-mono);font-size:13px;font-weight:700;letter-spacing:.1em;
}
.feed-art .sweep{stroke:rgba(232,235,237,.24);stroke-width:1.5;opacity:0}
.feed-art .exittxt{
  fill:var(--g-400);font-family:var(--sk-mono);font-size:11px;letter-spacing:.18em;
}

/* ── 04 · watch grid ────────────────────────────────────────── */
#watches .h2{margin-bottom:60px}
.watch-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.wcell{
  position:relative;padding:38px 40px 42px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:64px 1fr;gap:28px;align-items:start;
}
.wcell:nth-child(odd){border-right:1px solid var(--line);padding-right:48px}
.wcell:nth-child(even){padding-left:48px;padding-right:0}
.wcell .glyph{width:56px;height:56px;color:var(--g-400);margin-top:4px}
.wcell .glyph .am{stroke:var(--accent)}
.wcell .glyph .amf{fill:var(--accent)}
.wcell h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:6px 0 8px}
.wcell p{color:var(--muted);font-size:14.5px;max-width:44ch}
.wcell .corner-paint{
  content:"";position:absolute;inset:14px 10px;pointer-events:none;opacity:0;
  transition:opacity .3s var(--ease);
  background:
    linear-gradient(var(--accent),var(--accent)) top left/22px 2px,
    linear-gradient(var(--accent),var(--accent)) top left/2px 22px,
    linear-gradient(var(--accent),var(--accent)) top right/22px 2px,
    linear-gradient(var(--accent),var(--accent)) top right/2px 22px,
    linear-gradient(var(--accent),var(--accent)) bottom left/22px 2px,
    linear-gradient(var(--accent),var(--accent)) bottom left/2px 22px,
    linear-gradient(var(--accent),var(--accent)) bottom right/22px 2px,
    linear-gradient(var(--accent),var(--accent)) bottom right/2px 22px;
  background-repeat:no-repeat;
}
.wcell:hover .corner-paint,.wcell:focus-within .corner-paint{opacity:.55}
/* one framed element at a time: mouse hover on another cell wins over focus */
.watch-grid:hover .wcell:focus-within:not(:hover) .corner-paint{opacity:0}

/* ── 05 · evidence ──────────────────────────────────────────── */
#evidence .evi-grid{display:grid;grid-template-columns:5.5fr 6.5fr;gap:80px;align-items:center}
.alert-card{
  border:1px solid var(--line-strong);background:var(--surface);
  max-width:520px;justify-self:end;width:100%;
}
.alert-clip{position:relative;background:var(--g-950);border-bottom:1px solid var(--line)}
.alert-clip::before{content:"";display:block;padding-top:52%}
.alert-clip svg{position:absolute;inset:0;width:100%;height:100%}
.alert-rows{padding:22px 24px}
.alert-title{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;letter-spacing:-.01em}
.alert-title .adot{width:8px;height:8px;background:var(--accent);flex:none;border-radius:50%}
.alert-meta{margin-top:10px;color:var(--muted);font-size:12px;letter-spacing:.1em}
.alert-actions{display:flex;gap:12px;margin-top:20px}

/* ── 06 · honesty ───────────────────────────────────────────── */
#honesty .honesty-head{max-width:700px;margin-left:clamp(0px,12vw,220px);margin-bottom:76px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:56px 72px}
.fact{border-top:1px solid var(--line);padding-top:26px}
.fact .f-key{margin-bottom:16px}
.fact h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.fact p{color:var(--muted);font-size:15px;max-width:52ch}

/* ── 07 · pricing ───────────────────────────────────────────── */
#pricing .h2{margin-bottom:60px}
.plans{display:grid;grid-template-columns:1fr 1.22fr 1fr;gap:0;align-items:stretch}
.plan{
  border:1px solid var(--line);padding:36px 34px 40px;
  display:flex;flex-direction:column;
}
.plan + .plan{margin-left:-1px}
.plan .p-name{margin-bottom:26px}
.plan .p-price{
  font-family:var(--sk-display);font-weight:700;letter-spacing:-.02em;line-height:1;
  font-size:clamp(34px,3.4vw,46px);font-variant-numeric:tabular-nums;
}
.plan .p-unit{margin-top:8px}
.plan .p-desc{color:var(--muted);font-size:15px;margin:22px 0 26px;min-height:3.2em}
.plan ul{list-style:none;margin-top:auto;border-top:1px solid var(--line)}
.plan ul li{
  padding:11px 0;color:var(--g-300);font-size:14px;
  border-bottom:1px solid var(--line);
}
.plan.featured{
  position:relative;background:var(--surface);border-color:var(--line-strong);
  padding-top:44px;padding-bottom:48px;margin-top:-14px;margin-bottom:-14px;z-index:1;
}
.plan.featured .corner-paint{
  position:absolute;inset:10px;pointer-events:none;opacity:.55;
  background:
    linear-gradient(var(--accent),var(--accent)) top left/26px 2px,
    linear-gradient(var(--accent),var(--accent)) top left/2px 26px,
    linear-gradient(var(--accent),var(--accent)) top right/26px 2px,
    linear-gradient(var(--accent),var(--accent)) top right/2px 26px,
    linear-gradient(var(--accent),var(--accent)) bottom left/26px 2px,
    linear-gradient(var(--accent),var(--accent)) bottom left/2px 26px,
    linear-gradient(var(--accent),var(--accent)) bottom right/26px 2px,
    linear-gradient(var(--accent),var(--accent)) bottom right/2px 26px;
  background-repeat:no-repeat;
}

/* ── closing cta ────────────────────────────────────────────── */
#close{
  min-height:88svh;display:flex;flex-direction:column;justify-content:center;
  padding:160px 0;text-align:center;
}
#close .h2{margin-inline:auto;max-width:22ch;font-size:clamp(36px,5.2vw,70px)}
#close .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:48px}

/* ── footer ─────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:38px 0 46px}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-in .word{height:13px;width:auto;opacity:.9}
/* colophon is machine record (mono); the tagline is human voice (sans) */
.foot-line{color:var(--muted);font-size:12.5px;font-family:var(--sk-sans)}
.foot-line .mono{font-size:11.5px;letter-spacing:.06em}

/* ── reveal defaults (JS enhances; content visible without it) ─ */
.rv{will-change:transform,opacity}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1024px){
  .offset-lead{margin-left:0}
  #demo .console-head{margin-left:0}
  #honesty .honesty-head{margin-left:0}
  #how .how-grid{grid-template-columns:1fr;gap:24px}
  #how .how-left{position:static}
  .step-index{display:none}
  #evidence .evi-grid{grid-template-columns:1fr;gap:48px}
  .alert-card{justify-self:start}
  .plans{grid-template-columns:1fr;max-width:560px}
  .plan.featured{margin:0}
  .plan + .plan{margin-left:0;margin-top:-1px}
}
@media (max-width:860px){
  .nav-links{display:none}
  .menu-btn{display:block}
  section.block{padding:96px 0}
  #gap .panels{grid-template-columns:1fr;margin-top:56px}
  .panel{padding:28px 0 12px}
  .panel + .panel{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .facts{grid-template-columns:1fr;gap:40px}
  .watch-grid{grid-template-columns:1fr}
  .wcell:nth-child(odd){border-right:0;padding-right:0}
  .wcell:nth-child(even){padding-left:0}
  .verdict{grid-template-columns:1fr;gap:12px}
}
@media (max-width:560px){
  .wrap{padding-inline:20px}
  .hero-sub{font-size:16px}
  .hero-stats{gap:28px}
  .wcell{grid-template-columns:1fr;gap:16px}
  .console-body{padding:20px 16px 24px}
  .rulefield{font-size:15.5px}
  #close{padding:120px 0;min-height:72svh}
  #loader .readout{left:20px}
}

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #loader{display:none}
  .rulefield .caret,.stage .typed-rule .caret{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}