/* ============================================================================
   BlackByrne — app.css
   Design system: "Ink & Command Amber." 70 field / 25 type / 5 amber.
   Amber is the human decision — a light source, never a field, never decoration.
   WHAT it achieves, never HOW. Say it plainly; let the restraint read as power.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────*/
:root {
  color-scheme: dark;

  /* Field (ground, ~70%) */
  --void:#070908;          /* page base */
  --ink:#0B0E0C;           /* sections */
  --surface:#12160F14;     /* (unused placeholder guard) */
  --panel:#111510;         /* raised card */
  --panel-2:#171C16;       /* elevated / hover */
  --gunmetal:#252A28;      /* strongest raised surface */
  --graphite:#3C4240;      /* rules, dividers */

  /* Type (text, ~25%) */
  --bone:#ECE9E1;          /* primary text / logo on dark */
  --fog:#C9CEC9;           /* secondary text */
  --steel:#8A938E;         /* muted labels / meta */
  --steel-dim:#5c6360;     /* faint, non-load-bearing */

  /* Amber (accent, ~5% — the human decision / live / authorization) */
  --amber:#C8892B;
  --amber-hot:#E3A848;     /* focus glow / hottest highlight */
  --amber-deep:#8A5A14;    /* pressed / deep */
  --on-amber:#0B0E0C;

  /* Status — mapped to meaning, never colour alone */
  --ok:#6E8F6A;
  --warn:#C8892B;
  --crit:#C4443A;
  --live:#C8892B;

  /* Lines */
  --line:rgba(236,233,225,.10);
  --line-2:rgba(236,233,225,.16);
  --line-strong:rgba(236,233,225,.26);
  --amber-line:rgba(200,137,43,.42);

  /* Role tokens */
  --bg:var(--void);
  --text:var(--bone);
  --text-muted:var(--fog);
  --text-subtle:var(--steel);
  --accent:var(--amber);
  --focus:var(--amber-hot);

  /* Type families */
  --f-display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --f-head:'Plex Cond','Arial Narrow',system-ui,sans-serif;
  --f-mono:'Plex Mono',ui-monospace,'SFMono-Regular','Cascadia Mono',Consolas,monospace;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Fluid type scale */
  --t--2:clamp(.70rem,.67rem+.14vw,.78rem);
  --t--1:clamp(.80rem,.76rem+.2vw,.9rem);
  --t-0:clamp(1rem,.96rem+.2vw,1.1rem);
  --t-1:clamp(1.12rem,1.05rem+.33vw,1.3rem);
  --t-2:clamp(1.3rem,1.18rem+.6vw,1.6rem);
  --t-3:clamp(1.55rem,1.33rem+1.05vw,2.1rem);
  --t-4:clamp(1.95rem,1.55rem+1.9vw,3.1rem);
  --t-5:clamp(2.4rem,1.7rem+3.3vw,4.6rem);
  --t-6:clamp(2.9rem,1.9rem+4.8vw,6.4rem);

  /* Spacing */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:9rem;

  --radius:4px; --radius-lg:10px; --pill:999px;
  --measure:64ch;
  --container:76rem;
  --container-wide:88rem;
  --gutter:clamp(1.15rem,.6rem+2.6vw,2.6rem);
  --nav-h:4.25rem;

  --shadow-1:0 1px 2px rgba(0,0,0,.6),0 2px 10px -4px rgba(0,0,0,.5);
  --shadow-2:0 10px 40px -14px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.5);
  --glow-amber:0 0 0 1px rgba(200,137,43,.35),0 0 30px -8px rgba(227,168,72,.5);

  --dur-1:140ms; --dur-2:280ms; --dur-3:600ms;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-1:.01ms; --dur-2:.01ms; --dur-3:.01ms; }
  *{ scroll-behavior:auto !important; }
}

/* ── Reset ────────────────────────────────────────────────────────────────*/
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 1rem) }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:var(--t-0); font-weight:400;
  line-height:1.62; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg,canvas{ display:block; max-width:100% }
img,video{ height:auto }
a{ color:inherit; text-decoration:none }
button,input,textarea,select{ font:inherit; color:inherit }
button{ background:none; border:none; cursor:pointer }
ul,ol{ list-style:none }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px }
::selection{ background:rgba(200,137,43,.3); color:var(--bone) }
hr{ border:none; border-top:1px solid var(--line) }

/* page grain + vignette (whisper; never touches legibility) */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0%,transparent 55%,rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Layout ───────────────────────────────────────────────────────────────*/
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }
.wrap-wide{ max-width:var(--container-wide) }
.section{ position:relative; z-index:2; padding-block:clamp(3.5rem,2rem+7vw,7.5rem) }
.section--tight{ padding-block:clamp(2.5rem,1.5rem+4vw,4.5rem) }
.section--ink{ background:var(--ink) }
.section--panel{ background:linear-gradient(180deg,var(--ink),#0a0d0a) }
.divider{ border-top:1px solid var(--line) }
.stack>*+*{ margin-top:var(--s4) }
.grid{ display:grid; gap:var(--s5) }

/* ── Type ─────────────────────────────────────────────────────────────────*/
h1,h2,h3,h4{ font-family:var(--f-head); font-weight:600; line-height:1.04; letter-spacing:-.01em; color:var(--bone) }
.display{ font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; line-height:.98 }
h1{ font-size:var(--t-5) }
h2{ font-size:var(--t-4) }
h3{ font-size:var(--t-2) }
h4{ font-size:var(--t-1) }
p{ max-width:var(--measure) }
.lede{ font-size:var(--t-1); line-height:1.55; color:var(--fog); max-width:56ch }
.muted{ color:var(--text-muted) } .subtle{ color:var(--text-subtle) }
.amber{ color:var(--amber) }
strong,b{ color:var(--bone); font-weight:600 }
.balance{ text-wrap:balance } .pretty{ text-wrap:pretty }

/* kicker / eyebrow — mono label with amber diamond end-mark (inline so it wraps on narrow screens) */
.kicker{
  display:inline; font-family:var(--f-mono); font-weight:500; font-size:var(--t--2);
  letter-spacing:.2em; text-transform:uppercase; color:var(--steel); overflow-wrap:anywhere;
}
.kicker::before{
  content:""; display:inline-block; vertical-align:middle; width:.42em; height:.42em; margin-right:.6em;
  transform:rotate(45deg); background:var(--amber); box-shadow:0 0 10px -1px rgba(227,168,72,.7);
}
.kicker--plain::before{ display:none }
.dia{ color:var(--amber) } /* ♦ inline mark */
.mono{ font-family:var(--f-mono); letter-spacing:.02em }
.eyebrow-rule{ height:1px; background:linear-gradient(90deg,var(--amber-line),transparent); border:0; margin-top:var(--s3) }

/* ── Buttons ──────────────────────────────────────────────────────────────*/
.btn{
  --bg:transparent;
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  font-family:var(--f-mono); font-weight:500; font-size:var(--t--1);
  letter-spacing:.08em; text-transform:uppercase;
  padding:.85em 1.4em; min-height:44px; border:1px solid var(--line-strong);
  color:var(--bone); background:var(--bg); border-radius:var(--radius);
  transition:transform var(--dur-1) var(--ease),border-color var(--dur-2),background var(--dur-2),color var(--dur-2),box-shadow var(--dur-2);
  will-change:transform;
}
.btn .arrow{ transition:transform var(--dur-2) var(--ease) }
.btn:hover{ border-color:var(--line-strong); transform:translateY(-1px) }
.btn:hover .arrow{ transform:translateX(3px) }
.btn:active{ transform:translateY(0) }
.btn--amber{
  background:var(--amber); color:var(--on-amber); border-color:var(--amber);
  box-shadow:0 0 0 0 rgba(227,168,72,0);
}
.btn--amber:hover{ background:var(--amber-hot); border-color:var(--amber-hot); box-shadow:var(--glow-amber) }
.btn--ghost{ background:transparent }
.btn--ghost:hover{ border-color:var(--bone); background:rgba(236,233,225,.04) }
.btn--sm{ padding:.6em 1em; min-height:38px }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center }

/* ── Chips / tags ─────────────────────────────────────────────────────────*/
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.08em; text-transform:uppercase;
  color:var(--fog); padding:.42em .8em; border:1px solid var(--line-2); border-radius:var(--pill);
  background:rgba(255,255,255,.015);
}
.chip--amber{ color:var(--amber); border-color:var(--amber-line) }
.chip-row{ display:flex; flex-wrap:wrap; gap:var(--s2) }
.dot{ width:.5em; height:.5em; border-radius:50%; background:var(--amber); flex:none }
.dot--live{ animation:pulse 2.4s var(--ease-io) infinite }
@keyframes pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(200,137,43,.5) } 50%{ opacity:.55; box-shadow:0 0 0 5px rgba(200,137,43,0) } }

/* ── Panels / HUD corner ticks ────────────────────────────────────────────*/
.panel{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.3rem,1rem+1.5vw,2rem);
  transition:border-color var(--dur-2),background var(--dur-2),transform var(--dur-2) var(--ease);
}
.panel:hover{ border-color:var(--line-2) }
.panel--hover:hover{ transform:translateY(-3px); border-color:var(--amber-line); background:var(--panel-2) }
.tick::before,.tick::after{
  content:""; position:absolute; width:12px; height:12px; pointer-events:none;
  border:1px solid var(--amber-line);
}
.tick::before{ top:-1px; left:-1px; border-right:0; border-bottom:0 }
.tick::after{ bottom:-1px; right:-1px; border-left:0; border-top:0 }

/* ── Classification bars ──────────────────────────────────────────────────*/
.classbar{
  font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); text-align:center; padding:.5rem var(--gutter);
  border-bottom:1px solid var(--line); background:#060706; position:relative; z-index:60;
}
.classbar .amber{ color:var(--amber) }

/* ── Nav ──────────────────────────────────────────────────────────────────*/
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; gap:var(--s5);
  padding-inline:var(--gutter);
  border-bottom:1px solid transparent; transition:background var(--dur-2),border-color var(--dur-2),backdrop-filter var(--dur-2);
}
.nav.is-stuck{ background:rgba(7,9,8,.82); backdrop-filter:blur(14px) saturate(1.2); border-color:var(--line) }
.brand{ display:inline-flex; align-items:center; gap:.65rem; flex:none }
.brand svg{ width:22px; height:29px; color:var(--bone) }
.brand .wm{ font-family:var(--f-display); font-weight:800; font-size:1.12rem; letter-spacing:.02em; color:var(--bone) }
.nav-links{ display:flex; gap:var(--s5); margin-left:auto; align-items:center }
.nav-links a{
  font-family:var(--f-mono); font-size:var(--t--1); letter-spacing:.04em; color:var(--fog);
  padding:.4em 0; position:relative; transition:color var(--dur-2);
}
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--amber); transition:right var(--dur-2) var(--ease) }
.nav-links a:hover{ color:var(--bone) } .nav-links a:hover::after{ right:0 }
.nav-cta{ margin-left:var(--s4) }
.nav-toggle{ display:none; margin-left:auto; width:44px; height:44px; align-items:center; justify-content:center; color:var(--bone) }
.nav-toggle svg{ width:22px; height:22px }

@media (max-width:920px){
  .nav-links{ position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(7,9,8,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--line);
    padding:var(--gutter); transform:translateY(-120%); transition:transform var(--dur-2) var(--ease); margin:0 }
  .nav-links.open{ transform:translateY(0) }
  .nav-links a{ width:100%; padding:.9rem 0; border-bottom:1px solid var(--line); font-size:var(--t-0) }
  .nav-links .nav-cta{ margin:var(--s4) 0 0 }
  .nav-toggle{ display:inline-flex }
}

.skip{ position:absolute; left:-999px; top:0; z-index:100; background:var(--amber); color:var(--on-amber); padding:.6rem 1rem; font-family:var(--f-mono) }
.skip:focus{ left:var(--gutter); top:.5rem }

/* ── Hero ─────────────────────────────────────────────────────────────────*/
.hero{ position:relative; overflow:hidden; padding-block:clamp(3rem,2rem+6vw,6rem) clamp(3rem,2rem+5vw,5.5rem) }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none }
.hero-grid{ position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(44px,6vw,76px) clamp(44px,6vw,76px);
  mask-image:radial-gradient(120% 90% at 50% 20%,#000 20%,transparent 80%); opacity:.5;
}
.hero-watermark{ position:absolute; right:-6%; top:50%; transform:translateY(-50%); height:120%; width:auto; color:rgba(236,233,225,.022); z-index:0 }
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,1rem+3vw,4rem); align-items:center }
.hero h1{ font-size:var(--t-6); margin-top:var(--s4); max-width:15ch }
.hero .lede{ margin-top:var(--s5); font-size:var(--t-1) }
.hero .btn-row{ margin-top:var(--s6) }
.hero-brandline{ margin-top:var(--s5); font-family:var(--f-head); font-weight:700; font-size:var(--t-2); color:var(--bone) }
.hero-brandline .amber{ color:var(--amber) }
@media (max-width:860px){ .hero-inner{ grid-template-columns:1fr } .hero-media{ order:-1 } .hero-watermark{ opacity:.5 } }

/* media frame (device / HUD screen) */
.screen{ position:relative; border:1px solid var(--line-2); border-radius:var(--radius-lg); overflow:hidden; background:#05060a; box-shadow:var(--shadow-2) }
.screen video,.screen img{ width:100%; display:block }
.screen::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 90px rgba(0,0,0,.55); border-radius:inherit }
.screen-tag{ position:absolute; top:.6rem; left:.6rem; z-index:3; display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.1em; text-transform:uppercase; color:var(--bone);
  background:rgba(7,9,8,.7); border:1px solid var(--line-2); padding:.3em .6em; border-radius:var(--radius); backdrop-filter:blur(6px) }
.screen-cap{ font-family:var(--f-mono); font-size:var(--t--2); color:var(--steel); margin-top:.7rem; letter-spacing:.03em }
.screen-brackets span{ position:absolute; width:16px; height:16px; z-index:3; border:1.5px solid var(--amber-line) }
.screen-brackets span:nth-child(1){ top:8px; left:8px; border-right:0; border-bottom:0 }
.screen-brackets span:nth-child(2){ top:8px; right:8px; border-left:0; border-bottom:0 }
.screen-brackets span:nth-child(3){ bottom:8px; left:8px; border-right:0; border-top:0 }
.screen-brackets span:nth-child(4){ bottom:8px; right:8px; border-left:0; border-top:0 }

/* status strip */
.statusstrip{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line) }
.statusstrip div{ font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.06em; color:var(--steel) }
.statusstrip b{ color:var(--bone); font-weight:500 }

/* ── Section header ───────────────────────────────────────────────────────*/
.shead{ max-width:52ch }
.shead h2{ margin-top:var(--s3) }
.shead .lede{ margin-top:var(--s4) }
.shead--center{ margin-inline:auto; text-align:center }
.shead--center .kicker{ justify-content:center }
.shead--center .lede{ margin-inline:auto }

/* ── Stat band ────────────────────────────────────────────────────────────*/
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden }
.stat{ background:var(--ink); padding:clamp(1.2rem,1rem+1.4vw,2rem); min-height:140px; display:flex; flex-direction:column; justify-content:space-between; position:relative }
.stat .num{ font-family:var(--f-display); font-weight:800; font-size:var(--t-4); color:var(--bone); line-height:1; letter-spacing:-.02em }
.stat .num .u{ font-size:.5em; color:var(--amber); margin-left:.1em }
.stat.is-amber .num{ color:var(--amber) }
.stat .lab{ font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin-top:var(--s4) }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr) } }

/* ── Pipeline (Sense → Decide → Effect) ───────────────────────────────────*/
.pipe{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); counter-reset:p }
.pipe-step{ position:relative; padding:var(--s5); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); overflow:hidden }
.pipe-step::before{ counter-increment:p; content:"0" counter(p); position:absolute; top:var(--s4); right:var(--s4);
  font-family:var(--f-mono); font-size:var(--t--1); color:var(--steel-dim); letter-spacing:.1em }
.pipe-step h3{ font-family:var(--f-head); font-size:var(--t-2); margin-bottom:var(--s3) }
.pipe-step .tagline{ font-family:var(--f-head); font-weight:600; color:var(--fog); font-size:var(--t-0); margin-bottom:var(--s3) }
.pipe-status{ display:inline-flex; gap:.5em; align-items:center; margin-top:var(--s4);
  font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.08em; text-transform:uppercase; color:var(--amber) }
.pipe-arrow{ font-family:var(--f-mono); color:var(--amber); text-align:center; font-size:var(--t-2); align-self:center }
@media (max-width:820px){ .pipe{ grid-template-columns:1fr } }

/* ── Domains grid ─────────────────────────────────────────────────────────*/
.domains{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden }
.domain{ background:var(--ink); padding:var(--s5); min-height:150px; display:flex; flex-direction:column; transition:background var(--dur-2); position:relative }
.domain:hover{ background:var(--panel-2) }
.domain .ix{ font-family:var(--f-mono); font-size:var(--t--2); color:var(--amber); letter-spacing:.1em }
.domain h3{ font-family:var(--f-head); font-size:var(--t-1); margin-top:var(--s3) }
.domain p{ font-size:var(--t--1); color:var(--steel); margin-top:var(--s2); line-height:1.5 }
.domain .posture{ margin-top:auto; padding-top:var(--s3); font-family:var(--f-mono); font-size:var(--t--2); color:var(--fog); letter-spacing:.04em }

/* ── Cards / feature grid ─────────────────────────────────────────────────*/
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s4) }
.card h3{ font-size:var(--t-1); margin-bottom:var(--s3) }
.card p{ color:var(--text-muted); font-size:var(--t-0) }
.card .meta{ font-family:var(--f-mono); font-size:var(--t--2); color:var(--steel); letter-spacing:.06em; margin-top:var(--s3) }

/* list with amber tick */
.ticks{ display:grid; gap:var(--s3) }
.ticks li{ display:grid; grid-template-columns:auto 1fr; gap:.7em; align-items:start; color:var(--text-muted) }
.ticks li::before{ content:""; width:.5em; height:.5em; margin-top:.55em; transform:rotate(45deg); background:var(--amber); flex:none }

/* ── Human Gate (interactive) ─────────────────────────────────────────────*/
.gate{ display:grid; grid-template-columns:1fr auto; gap:clamp(1.5rem,1rem+3vw,4rem); align-items:center }
@media (max-width:760px){ .gate{ grid-template-columns:1fr } }
.gate-ring{ position:relative; width:min(78vw,320px); aspect-ratio:1; display:grid; place-items:center; margin-inline:auto }
.gate-ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
.gate-ring .track{ fill:none; stroke:var(--line-2); stroke-width:3 }
.gate-ring .prog{ fill:none; stroke:var(--amber); stroke-width:4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 60ms linear; filter:drop-shadow(0 0 6px rgba(227,168,72,.6)) }
.gate-btn{ position:relative; z-index:2; width:62%; aspect-ratio:1; border-radius:50%; border:1px solid var(--line-strong);
  background:radial-gradient(circle at 50% 40%,var(--panel-2),var(--ink)); color:var(--bone);
  display:flex; flex-direction:column; gap:.3em; align-items:center; justify-content:center; text-align:center;
  font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.14em; text-transform:uppercase;
  transition:border-color var(--dur-2),box-shadow var(--dur-2); touch-action:none; user-select:none; -webkit-user-select:none;
}
.gate-btn:hover{ border-color:var(--amber-line) }
.gate-btn .big{ font-family:var(--f-head); font-size:var(--t-1); letter-spacing:.02em; text-transform:none }
.gate-btn.armed{ border-color:var(--amber); box-shadow:var(--glow-amber) }
.gate-btn.committed{ background:var(--amber); color:var(--on-amber); border-color:var(--amber) }
.gate-state{ margin-top:var(--s4); font-family:var(--f-mono); font-size:var(--t--1); letter-spacing:.08em; text-transform:uppercase; color:var(--steel); text-align:center }
.gate-state.ok{ color:var(--amber) }

/* ── Evidence ledger (interactive SHA-256 chain) ──────────────────────────*/
.ledger{ display:grid; gap:var(--s3) }
.block{ border:1px solid var(--line-2); border-radius:var(--radius); background:var(--panel); padding:var(--s4);
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s4); align-items:center; transition:border-color var(--dur-2),background var(--dur-2) }
.block .bix{ font-family:var(--f-mono); font-size:var(--t--2); color:var(--amber); letter-spacing:.1em }
.block .bname{ font-family:var(--f-head); font-size:var(--t-0); color:var(--bone) }
.block .bhash{ font-family:var(--f-mono); font-size:var(--t--2); color:var(--steel); word-break:break-all; margin-top:.2em }
.block .bfield{ width:100%; background:#0a0c08; border:1px solid var(--line-2); color:var(--fog); font-family:var(--f-mono); font-size:var(--t--1); padding:.5em .7em; border-radius:var(--radius); margin-top:.4em }
.block .seal{ font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.08em; text-transform:uppercase; color:var(--ok); white-space:nowrap }
@media (max-width:540px){ .block{ grid-template-columns:1fr; gap:var(--s2) } .block .seal{ justify-self:start } }
.block.broken{ border-color:var(--crit); background:rgba(196,68,58,.06) }
.block.broken .seal{ color:var(--crit) }
.block.broken .bix{ color:var(--crit) }

/* verify-this-page widget */
.verify{ border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:var(--s5); background:var(--panel) }
.verify .out{ font-family:var(--f-mono); font-size:var(--t--2); color:var(--steel); word-break:break-all; margin-top:var(--s3); min-height:1.2em }
.verify .match{ color:var(--amber) }

/* ── Voice simulator ──────────────────────────────────────────────────────*/
.voice{ border:1px solid var(--line-2); border-radius:var(--radius-lg); background:var(--panel); overflow:hidden }
.voice-head{ display:flex; align-items:center; gap:.6em; padding:var(--s4); border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.1em; text-transform:uppercase; color:var(--steel) }
.voice-body{ padding:var(--s5); min-height:220px; display:grid; gap:var(--s3); align-content:start }
.vline{ display:flex; gap:.7em; opacity:0; transform:translateY(6px); transition:opacity var(--dur-2),transform var(--dur-2) }
.vline.show{ opacity:1; transform:none }
.vline .who{ font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.08em; color:var(--amber); flex:none; width:5.5em; text-transform:uppercase }
.vline.sys .who{ color:var(--steel) }
.vline .msg{ color:var(--fog); font-size:var(--t-0) }
.vline.cmd .msg{ color:var(--bone); font-family:var(--f-head); font-size:var(--t-1) }

/* ── Standards matrix ─────────────────────────────────────────────────────*/
.matrix{ width:100%; border-collapse:collapse; font-size:var(--t--1) }
.matrix caption{ text-align:left; font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.1em; text-transform:uppercase; color:var(--steel); padding-bottom:var(--s3) }
.matrix th,.matrix td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:top }
.matrix thead th{ font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.08em; text-transform:uppercase; color:var(--steel); font-weight:500 }
.matrix td:first-child{ font-family:var(--f-mono); color:var(--bone); white-space:nowrap }
.matrix td:nth-child(2){ color:var(--steel); white-space:nowrap }
.matrix td:last-child{ color:var(--text-muted) }
.matrix tr:hover td{ background:rgba(236,233,225,.015) }
@media (max-width:720px){ .matrix thead{ display:none } .matrix td{ display:block; border:0; padding:.2rem 0 }
  .matrix tr{ display:block; padding:var(--s4) 0; border-bottom:1px solid var(--line) }
  .matrix td:first-child{ color:var(--amber); font-size:var(--t-0) } }

/* ── Team ─────────────────────────────────────────────────────────────────*/
.team{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5) }
.member{ display:flex; gap:var(--s5); align-items:flex-start }
.member picture{ flex:0 0 auto; display:block; width:128px; height:128px }
.member img{ width:128px; height:128px; border-radius:var(--radius-lg); object-fit:cover; border:1px solid var(--line-2); display:block; filter:grayscale(.12) contrast(1.03) }
.member h3{ font-size:var(--t-1) }
.member .role{ font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.06em; color:var(--amber); text-transform:uppercase; margin-top:.3em }
.member p{ color:var(--text-muted); font-size:var(--t--1); margin-top:var(--s3) }
@media (max-width:720px){ .team{ grid-template-columns:1fr } }

/* ── Accordion (FAQ) ──────────────────────────────────────────────────────*/
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; padding:var(--s5) 2.5rem var(--s5) 0; position:relative;
  font-family:var(--f-head); font-weight:600; font-size:var(--t-1); color:var(--bone); transition:color var(--dur-2) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--amber) }
.faq summary::after{ content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%); font-family:var(--f-mono); color:var(--amber); font-size:var(--t-2); transition:transform var(--dur-2) }
.faq details[open] summary::after{ content:"–" }
.faq .ans{ padding:0 0 var(--s5); color:var(--text-muted); max-width:72ch }
.faq .ans a{ color:var(--amber); border-bottom:1px solid var(--amber-line) }

/* ── Field gallery ────────────────────────────────────────────────────────*/
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s4) }
.shot{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-2); background:var(--ink) }
.shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform var(--dur-3) var(--ease) }
.shot:hover img{ transform:scale(1.04) }
.shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(7,9,8,.92)); font-family:var(--f-mono); font-size:var(--t--2); color:var(--fog); letter-spacing:.04em }

/* ── CTA band ─────────────────────────────────────────────────────────────*/
.cta{ text-align:center; position:relative; overflow:hidden }
.cta h2{ max-width:20ch; margin-inline:auto }
.cta .lede{ margin:var(--s4) auto var(--s6) }
.cta .btn-row{ justify-content:center }

/* ── Footer ───────────────────────────────────────────────────────────────*/
.footer{ position:relative; z-index:2; border-top:1px solid var(--line); background:#060706; padding-block:var(--s8) var(--s6) }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s6) }
.footer h4{ font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.14em; text-transform:uppercase; color:var(--steel); font-weight:500; margin-bottom:var(--s4) }
.footer a{ display:block; color:var(--fog); font-size:var(--t--1); padding:.3rem 0; transition:color var(--dur-2) }
.footer a:hover{ color:var(--amber) }
.footer .brand .wm{ font-size:1.3rem }
.footer .entity{ font-family:var(--f-mono); font-size:var(--t--2); color:var(--steel); line-height:1.9; margin-top:var(--s4) }
.footer .entity b{ color:var(--fog); font-weight:400 }
.footer-base{ display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; align-items:center;
  margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:var(--t--2); color:var(--steel); letter-spacing:.04em }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr } }

/* ── Reveal on scroll ─────────────────────────────────────────────────────*/
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease),transform .7s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s } .reveal[data-d="3"]{ transition-delay:.24s }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* ── Utilities ────────────────────────────────────────────────────────────*/
/* ── Overflow guards (prevent grid/flex blowout + long-token overflow on mobile) ── */
html,body{ max-width:100%; overflow-x:clip }
p,li,h1,h2,h3,h4,.lede,.pullquote,.display,dd,dt,.bhash,.out{ overflow-wrap:break-word }
.hero-inner>*,.two-col>*,.gate>*,.grid>*,.stats>*,.stat,.pipe>*,.versus>*,.vs,.cards>*,.domains>*,
.footer-grid>*,.statusstrip>*,.chip-row>*,.btn-row>*,.team>*,.member>*,.block>*,.article-list>*{ min-width:0 }
.statusstrip div{ overflow-wrap:break-word }
.member picture{ min-width:128px }
@media (max-width:420px){ .member{ gap:var(--s4) } .member picture,.member img{ width:104px;height:104px } .member picture{ min-width:104px } }

.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.center{ text-align:center } .mt0{ margin-top:0 }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,1rem+3vw,4rem); align-items:center }
.two-col--media .two-col-media{ order:1 }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr } .two-col--rev .two-col-media{ order:-1 } }
.pullquote{ font-family:var(--f-head); font-weight:600; font-size:var(--t-3); line-height:1.15; color:var(--bone); max-width:20ch }
.pullquote .amber{ color:var(--amber) }

/* ── Forms ────────────────────────────────────────────────────────────────*/
.form{ display:grid; gap:var(--s4) }
.field{ display:grid; gap:.4rem }
.field label{ font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.08em; text-transform:uppercase; color:var(--steel) }
.field input,.field select,.field textarea{
  width:100%; background:#0a0c08; border:1px solid var(--line-2); color:var(--bone);
  padding:.8em 1em; border-radius:var(--radius); font-size:var(--t-0); font-family:var(--f-body);
  transition:border-color var(--dur-2),box-shadow var(--dur-2);
}
.field textarea{ min-height:120px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 1px var(--amber-line) }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) }
@media (max-width:620px){ .field-row{ grid-template-columns:1fr } }
.form-note{ font-family:var(--f-mono); font-size:var(--t--2); color:var(--amber); margin-top:var(--s2) }

/* ── Comparison strip (us vs the category) ────────────────────────────────*/
.versus{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
.vs{ border:1px solid var(--line-2); border-radius:var(--radius-lg); overflow:hidden; background:var(--panel) }
.vs-them,.vs-us{ padding:var(--s5) }
.vs-them{ border-bottom:1px solid var(--line); color:var(--steel) }
.vs-them .tag,.vs-us .tag{ font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:var(--s2) }
.vs-them .tag{ color:var(--steel-dim) }
.vs-us .tag{ color:var(--amber) }
.vs-us{ background:linear-gradient(180deg,rgba(200,137,43,.05),transparent) }
.vs-us strong{ color:var(--bone); font-family:var(--f-head); font-weight:600; font-size:var(--t-1) }
.vs-them s{ text-decoration-color:var(--amber-line) }
@media (max-width:820px){ .versus{ grid-template-columns:1fr } }

/* ── Article / prose ──────────────────────────────────────────────────────*/
.prose{ max-width:72ch }
.prose>*+*{ margin-top:var(--s4) }
.prose h2{ font-size:var(--t-3); margin-top:var(--s7) }
.prose h3{ font-size:var(--t-1); margin-top:var(--s5) }
.prose p,.prose li{ color:var(--text-muted) }
.prose ul{ display:grid; gap:var(--s2); padding-left:0 }
.prose ul li{ display:grid; grid-template-columns:auto 1fr; gap:.7em }
.prose ul li::before{ content:""; width:.5em; height:.5em; margin-top:.55em; transform:rotate(45deg); background:var(--amber); flex:none }
.prose .answer{ border-left:2px solid var(--amber); padding:var(--s4) 0 var(--s4) var(--s5); background:linear-gradient(90deg,rgba(200,137,43,.05),transparent) }
.prose .answer p{ color:var(--bone); font-size:var(--t-1) }
.prose a{ color:var(--amber); border-bottom:1px solid var(--amber-line) }
.prose .src{ font-size:var(--t--1); color:var(--steel) }
.dateline{ font-family:var(--f-mono); font-size:var(--t--2); letter-spacing:.06em; color:var(--steel) }
.article-list{ display:grid; gap:var(--s4) }
.article-list a{ display:block }
.article-card{ padding:var(--s5); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); transition:border-color var(--dur-2),transform var(--dur-2) var(--ease) }
.article-card:hover{ border-color:var(--amber-line); transform:translateY(-2px) }
.article-card h3{ font-size:var(--t-2); color:var(--bone) }
.article-card p{ color:var(--text-muted); margin-top:var(--s2) }

/* ── Glossary ─────────────────────────────────────────────────────────────*/
.terms{ display:grid; gap:var(--s4) }
.term{ border-bottom:1px solid var(--line); padding-bottom:var(--s4) }
.term dt{ font-family:var(--f-head); font-weight:600; font-size:var(--t-1); color:var(--bone) }
.term dt .abbr{ font-family:var(--f-mono); color:var(--amber); font-size:var(--t--1); margin-left:.5em }
.term dd{ color:var(--text-muted); margin-top:var(--s2); max-width:70ch }