/* ============================================================
   tryvext.com — redesign system
   New brand system tokens (Geist · Geist Mono · Instrument Serif)
   applied with the 2026-06-05 editorial rules:
   hairline borders · no gradients · one amber moment / viewport ·
   light + dark first-class.
   ============================================================ */

:root {
  /* raw palette (new brand system) */
  --paper:#FAF7F2; --paper-warm:#F6F1E6; --bone:#EDEAE3; --bone-deep:#E2DDD1;
  --ink:#1A1614;
  --amber:#FFAE00; --amber-deep:#DC8C00; --amber-glow:rgba(255,174,0,.22);
  --sky:#B8D4E3; --sky-deep:#6FA0BD; --terracotta:#C97B5A; --moss:#6B8E5A;

  /* semantic — light */
  --bg:var(--paper);
  --surface:#FFFFFF;
  --surface-2:var(--paper-warm);
  --ink-1:#1A1614;
  --ink-2:rgba(26,22,20,.62);
  --ink-3:rgba(26,22,20,.40);
  --line:rgba(26,22,20,.13);
  --line-2:rgba(26,22,20,.07);
  --accent:var(--amber);
  --accent-ink:var(--amber-deep);
  --ok:var(--moss);
  --ok-soft:rgba(107,142,90,.13);
  --bad:var(--terracotta);
  --bad-soft:rgba(201,123,90,.13);
  --code-bg:var(--bone);
  --logo:url('assets/vext-labs-logo.png');

  --ff-display:'Geist','Inter',system-ui,sans-serif;
  --ff-ui:'Geist','Inter',system-ui,sans-serif;
  --ff-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  --ff-serif:'Instrument Serif','Geist',Georgia,serif;

  --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-micro:180ms; --dur-state:280ms; --dur-reveal:600ms;
  --stagger:80ms;   /* brand: gap between siblings on entry */

  /* ─── brand radius scale ─── */
  --r-xs:2px;        /* dots, bar fills */
  --r-sm:4px;        /* chips, code blocks, badges-sq */
  --r-md:6px;        /* cards, panels */
  --r-lg:8px;        /* inputs */
  --r-xl:14px;       /* sheets, focus surfaces, hero receipt */
  --r-full:999px;    /* pills, toggles, badges, avatars */
  --r:var(--r-md);   /* default surface radius */
  --r-pill:var(--r-full);

  /* ─── brand elevation scale (warm-ink shadows, never neutral) ─── */
  --shadow-1:0 1px 3px rgba(26,22,20,.06);
  --shadow-2:0 4px 10px -4px rgba(26,22,20,.05), 0 18px 36px -22px rgba(26,22,20,.22);
  --shadow-3:0 8px 18px -10px rgba(26,22,20,.08), 0 30px 60px -36px rgba(26,22,20,.30);
  --shadow-glow:0 6px 22px -10px var(--amber-glow);
}

html[data-theme="dark"] {
  /* brand dark palette — deep NEUTRAL near-black, never brown */
  --amber:#FFB42A;          /* brightened amber — the star on dark */
  --amber-deep:#FFC658;
  --amber-glow:rgba(255,180,42,.34);
  --bg:#0C0C0E;             /* the room — deep neutral near-black */
  --surface:#1C1B22;        /* raised card — rich charcoal */
  --surface-2:#131216;      /* faintly warmed raise / well */
  /* paper tones must follow the room — they back the sign-in card, the split
     chat column, and button text on ink; left light they glow in the dark */
  --paper:#16151A; --paper-warm:#1C1B22; --bone:#26242C; --bone-deep:#312E38;
  --ink-1:#F4F1EA;          /* warm off-white foreground */
  --ink-2:rgba(244,241,234,.60);
  --ink-3:rgba(244,241,234,.40);
  --line:rgba(244,241,234,.14);
  --line-2:rgba(244,241,234,.07);
  --accent:#FFB42A;
  --accent-ink:#FFC658;
  --ok:#9BC47F;
  --ok-soft:rgba(155,196,127,.16);
  --bad:#E59873;
  --bad-soft:rgba(229,152,115,.16);
  --code-bg:#100F14;        /* recessed well — darker than cards */
  --logo:url('assets/vext-labs-logo-white.png');
  /* neutral-black shadows so elevation reads on the deep charcoal */
  --shadow-1:0 1px 3px rgba(0,0,0,.5);
  --shadow-2:0 4px 14px -6px rgba(0,0,0,.55), 0 22px 44px -26px rgba(0,0,0,.75);
  --shadow-3:0 10px 26px -10px rgba(0,0,0,.6), 0 44px 80px -44px rgba(0,0,0,.9);
  --shadow-glow:0 0 26px -2px rgba(255,180,42,.40), 0 6px 22px -10px rgba(255,180,42,.34);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink-1);
  font-family:var(--ff-ui); font-feature-settings:"ss01","tnum","cv11";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .4s var(--ease), color .4s var(--ease);
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
::selection { background:var(--amber-glow); }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 40px; }
.sec { padding:104px 0; }
.sec-sm { padding:72px 0; }
.hr { border:0; border-top:1px solid var(--line); margin:0; }

/* ─── type utilities ─── */
.eyebrow { font-family:var(--ff-mono); font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.mono { font-family:var(--ff-mono); }
.serif { font-family:var(--ff-serif); font-style:italic; font-weight:400; }
h1,h2,h3,h4 { margin:0; font-family:var(--ff-display); letter-spacing:-.025em; line-height:1.04; }
.h1 { font-size:clamp(40px,5.4vw,68px); font-weight:700; }
.h2 { font-size:clamp(30px,3.8vw,46px); font-weight:700; letter-spacing:-.03em; }
.h3 { font-size:23px; font-weight:700; letter-spacing:-.02em; }
.lede { font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:var(--ink-2); }
.serif-accent { font-family:var(--ff-serif); font-style:italic; font-weight:400; letter-spacing:0; }

/* ─── buttons ─── */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-ui); font-size:15px; font-weight:600;
  letter-spacing:-.005em; padding:13px 22px; border-radius:var(--r-full); border:1px solid transparent; cursor:pointer;
  background:transparent; color:var(--ink-1); white-space:nowrap; transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .24s var(--ease); }
.btn svg { width:17px; height:17px; }
/* THE amber moment */
.btn-amber { background:var(--amber); color:#1A1100; border-color:var(--amber); box-shadow:var(--shadow-glow); }
.btn-amber:hover { transform:translateY(-1px); box-shadow:0 10px 28px -10px var(--amber-glow); }
html[data-theme="dark"] .btn-amber { color:#1A1100; }
/* quiet ghost — never amber */
.btn-ghost { border-color:var(--line); color:var(--ink-1); }
.btn-ghost:hover { border-color:var(--ink-1); }
.btn-quiet { color:var(--ink-2); padding-left:6px; padding-right:6px; }
.btn-quiet:hover { color:var(--ink-1); }
.btn-lg { padding:15px 28px; font-size:16px; }

/* ─── code chip ─── */
.chip { display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:13px; color:var(--ink-1);
  background:var(--code-bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 13px; }
.chip .pr { color:var(--ink-3); }
.chip .cp { margin-left:4px; color:var(--ink-3); display:inline-flex; cursor:pointer; }
.chip .cp svg { width:14px; height:14px; }
.chip .cp:hover { color:var(--ink-1); }

/* ─── live dot (moss = verified/live; never amber) ─── */
.dot { width:8px; height:8px; border-radius:50%; background:var(--ok); position:relative; flex-shrink:0; }
.dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; background:var(--ok); opacity:.22; }
@media (prefers-reduced-motion:no-preference){ .dot::after { animation:ping 2.4s var(--ease) infinite; } }
@keyframes ping { 0%,100%{transform:scale(.7);opacity:.26;} 50%{transform:scale(1.5);opacity:0;} }

/* ─── NAV ─── */
.nav { position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); border-bottom:1px solid transparent; transition:border-color .3s, background .3s; }
.nav.scrolled { border-bottom-color:var(--line); box-shadow:var(--shadow-1); }
.nav-in { max-width:var(--maxw); margin:0 auto; padding:15px 40px; display:flex; align-items:center; gap:36px; }
.nav-logo { width:104px; height:29px; background:var(--logo) left center/contain no-repeat; }
.nav-links { display:flex; gap:26px; margin-left:6px; }
.nav-links a { font-size:14.5px; color:var(--ink-2); font-weight:500; transition:color .15s; }
.nav-links a:hover { color:var(--ink-1); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.theme-tog { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-2); cursor:pointer; background:transparent; }
.theme-tog:hover { color:var(--ink-1); border-color:var(--ink-1); }
.theme-tog svg { width:17px; height:17px; }
.theme-tog .sun { display:none; } html[data-theme="dark"] .theme-tog .sun { display:block; }
html[data-theme="dark"] .theme-tog .moon { display:none; }
.nav-burger { display:none; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; align-items:center; justify-content:center; color:var(--ink-1); background:transparent; cursor:pointer; }
.nav-burger svg { width:18px; height:18px; }

/* ─── HERO ─── */
.hero {
  padding:60px 0 96px; position:relative; overflow:hidden;
}
.hero .wrap { position:relative; z-index:2; }
/* four living aura blobs — every brand color, drifting slowly behind the header */
.hero-aura { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.blob { position:absolute; border-radius:50%; will-change:transform; transform:translateZ(0); }
.b-sky   { width:60vw; height:72vh; top:-28vh; right:-12vw;
  background:radial-gradient(circle at center, rgba(184,212,227,.85), rgba(184,212,227,0) 64%); }
.b-moss  { width:54vw; height:64vh; bottom:-30vh; left:-14vw;
  background:radial-gradient(circle at center, rgba(107,142,90,.52), rgba(107,142,90,0) 64%); }
.b-amber { width:40vw; height:48vh; top:-16vh; left:26vw;
  background:radial-gradient(circle at center, rgba(255,174,0,.34), rgba(255,174,0,0) 64%); }
.b-terra { width:44vw; height:52vh; bottom:-24vh; right:20vw;
  background:radial-gradient(circle at center, rgba(201,123,90,.40), rgba(201,123,90,0) 64%); }
html[data-theme="dark"] .b-sky   { background:radial-gradient(circle at center, rgba(111,160,189,.32), rgba(111,160,189,0) 62%); }
html[data-theme="dark"] .b-moss  { background:radial-gradient(circle at center, rgba(107,142,90,.26), rgba(107,142,90,0) 62%); }
html[data-theme="dark"] .b-amber { background:radial-gradient(circle at center, rgba(255,180,42,.22), rgba(255,180,42,0) 62%); }
html[data-theme="dark"] .b-terra { background:radial-gradient(circle at center, rgba(229,152,115,.20), rgba(229,152,115,0) 62%); }
@media (prefers-reduced-motion:no-preference){
  .b-sky   { animation:drift1 4.5s var(--ease-inout) infinite; }
  .b-moss  { animation:drift2 5s   var(--ease-inout) infinite; }
  .b-amber { animation:drift3 3.5s var(--ease-inout) infinite; }
  .b-terra { animation:drift4 4s   var(--ease-inout) infinite; }
}
@keyframes drift1 {
  0%   { transform:translate3d(0,0,0) scale(1);            opacity:.9; }
  25%  { transform:translate3d(-11vw,9vh,0) scale(1.28);   opacity:1; }
  50%  { transform:translate3d(-16vw,-7vh,0) scale(.72);   opacity:.55; }
  75%  { transform:translate3d(6vw,-12vh,0) scale(1.1);    opacity:.95; }
  100% { transform:translate3d(0,0,0) scale(1);            opacity:.9; }
}
@keyframes drift2 {
  0%   { transform:translate3d(0,0,0) scale(1);            opacity:.85; }
  25%  { transform:translate3d(13vw,-9vh,0) scale(1.3);    opacity:1; }
  50%  { transform:translate3d(7vw,11vh,0) scale(.74);     opacity:.55; }
  75%  { transform:translate3d(-10vw,6vh,0) scale(1.14);   opacity:.92; }
  100% { transform:translate3d(0,0,0) scale(1);            opacity:.85; }
}
@keyframes drift3 {
  0%   { transform:translate3d(0,0,0) scale(1);            opacity:.85; }
  25%  { transform:translate3d(12vw,12vh,0) scale(1.4);    opacity:1; }
  50%  { transform:translate3d(-9vw,16vh,0) scale(.66);    opacity:.5; }
  75%  { transform:translate3d(-13vw,-9vh,0) scale(1.18);  opacity:.9; }
  100% { transform:translate3d(0,0,0) scale(1);            opacity:.85; }
}
@keyframes drift4 {
  0%   { transform:translate3d(0,0,0) scale(1);            opacity:.85; }
  25%  { transform:translate3d(-12vw,-10vh,0) scale(1.26); opacity:1; }
  50%  { transform:translate3d(10vw,-15vh,0) scale(.72);   opacity:.52; }
  75%  { transform:translate3d(15vw,8vh,0) scale(1.16);    opacity:.92; }
  100% { transform:translate3d(0,0,0) scale(1);            opacity:.85; }
}
.hero-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:64px; align-items:center; }
.hero-eyebrow { display:flex; align-items:center; gap:11px; margin-bottom:26px; }
.hero h1 { margin:0; line-height:1.12; }
.hero .lede { margin:30px 0 0; max-width:34ch; }
.hero-cta { display:flex; align-items:center; gap:18px; margin-top:36px; flex-wrap:wrap; }
.hero-sub-links { display:flex; align-items:center; gap:22px; margin-top:24px; flex-wrap:wrap; }
.hero-sub-links a { font-size:14.5px; color:var(--ink-2); display:inline-flex; align-items:center; gap:7px; }
.hero-sub-links a svg { width:15px; height:15px; color:var(--ink-3); }
.hero-sub-links a:hover { color:var(--ink-1); }

/* ─── RECEIPT CARD + verifier ─── */
.receipt-wrap { display:flex; flex-direction:column; gap:18px; }
.receipt { background:var(--surface); border:1px solid var(--ink-1); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-2); transition:border-color .35s var(--ease), box-shadow .35s var(--ease); }
.receipt.invalid { border-color:var(--bad); }
.r-head { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); }
.r-head .r-id { font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
/* verifier badge */
.vbadge { display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:var(--r-full); border:1px solid var(--ok);
  color:var(--ok); background:var(--ok-soft); transition:color .3s, border-color .3s, background .3s; }
.vbadge svg { width:14px; height:14px; }
.vbadge .x { display:none; }
.receipt.invalid .vbadge { color:var(--bad); border-color:var(--bad); background:var(--bad-soft); }
.receipt.invalid .vbadge .ok { display:none; }
.receipt.invalid .vbadge .x { display:block; }
.vbadge .lab-ok { display:inline; } .vbadge .lab-bad { display:none; }
.receipt.invalid .vbadge .lab-ok { display:none; } .receipt.invalid .vbadge .lab-bad { display:inline; }

.r-body { padding:6px 18px 16px; }
.r-row { display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line-2); }
.r-row:last-child { border-bottom:0; }
.r-row .rk { font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.r-row .rv { font-family:var(--ff-mono); font-size:13px; color:var(--ink-1); word-break:break-all; }
.r-row .rv .pill-agent { color:var(--accent-ink); }
/* signature row — the tamper target */
.r-sig { padding:12px 0 4px; }
.r-sig .rk { display:block; margin-bottom:7px; }
.sig-chars { font-family:var(--ff-mono); font-size:13.5px; line-height:1.7; color:var(--ink-1); word-break:break-all; cursor:text; user-select:none; }
.sig-chars .hx { padding:0 .5px; border-radius:2px; transition:color .15s, background .15s; }
.sig-chars .hx:hover { background:var(--amber-glow); }
.sig-chars .hx.tampered { color:var(--bad); background:var(--bad-soft); font-weight:600; }
.r-foot { display:flex; align-items:center; gap:9px; padding:11px 18px; border-top:1px solid var(--line); font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

.tamper-row { display:flex; align-items:center; gap:14px; }
.tamper-row .reset { font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-3); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.tamper-row .reset svg { width:13px; height:13px; }
.tamper-row .reset:hover { color:var(--ink-1); }
.tamper-row .reset.hidden { display:none; }

.proof-caption { font-size:14px; line-height:1.55; color:var(--ink-2); max-width:46ch; min-height:44px; }
.proof-caption .em { color:var(--ink-1); font-weight:500; }
.proof-caption.bad .em { color:var(--bad); }

/* ─── SOUL LINE band ─── */
.soul { text-align:center; }
.soul .line { font-family:var(--ff-display); font-weight:700; font-size:clamp(30px,4.4vw,56px); letter-spacing:-.03em; line-height:1.1; }
.soul .strike { position:relative; color:var(--ink-3); }
.soul .strike::after { content:''; position:absolute; left:-2%; right:-2%; top:54%; height:2px; background:var(--ink-3); }
/* the one amber moment in this band */
.soul .keep { position:relative; }
.soul .keep::after { content:''; position:absolute; left:0; right:0; bottom:.06em; height:.13em; background:var(--amber); border-radius:2px; }
.soul .sub { font-size:16px; color:var(--ink-2); margin-top:22px; }

/* ─── STEPS (how it works) — zero amber ─── */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1); }
.step { padding:34px 30px 38px; border-left:1px solid var(--line); transition:background .3s var(--ease); }
.step:hover { background:var(--surface-2); }
.step:first-child { border-left:0; }
.step .sn { font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:10px; }
.step .si { width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--ink-1); margin:20px 0 16px; }
.step .si svg { width:20px; height:20px; }
.step h4 { font-size:21px; font-weight:700; letter-spacing:-.02em; }
.step p { font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:9px 0 0; }
.step .meta { font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); margin-top:14px; }

/* ─── PROOF strip ─── */
.proof { border:1px solid var(--line); border-radius:var(--r); padding:40px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; background:var(--surface); box-shadow:var(--shadow-1); }
.proof .pk { font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.proof h3 { margin:14px 0 0; }
.proof p { font-size:15px; line-height:1.55; color:var(--ink-2); margin:14px 0 0; max-width:42ch; }
.proof .stranger { display:flex; flex-direction:column; gap:12px; }
.proof .stranger .sr { display:flex; align-items:center; gap:11px; font-family:var(--ff-mono); font-size:12.5px; color:var(--ink-2); padding:11px 14px; border:1px solid var(--line); border-radius:var(--r); }
.proof .stranger .sr .dot { width:7px; height:7px; }
.proof .stranger .sr .v { margin-left:auto; color:var(--ok); letter-spacing:.1em; text-transform:uppercase; font-size:10.5px; }

/* ─── PRICING teaser ─── */
.ptease { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pcard { border:1px solid var(--line); border-radius:var(--r); padding:34px 32px; background:var(--surface); display:flex; flex-direction:column; transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.pcard:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
.pcard.lead { border-color:var(--ink-1); box-shadow:var(--shadow-2); }
.pcard .pk { font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.pcard .price { font-family:var(--ff-display); font-size:46px; font-weight:700; letter-spacing:-.03em; margin:16px 0 0; }
.pcard .price span { font-family:var(--ff-ui); font-size:15px; font-weight:500; color:var(--ink-2); letter-spacing:0; }
.pcard .pd { font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:12px 0 0; }
.pcard ul { list-style:none; margin:20px 0 26px; padding:18px 0 0; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:11px; }
.pcard li { font-size:14px; color:var(--ink-2); display:flex; gap:10px; align-items:baseline; }
.pcard li svg { width:15px; height:15px; color:var(--ok); flex-shrink:0; transform:translateY(2px); }
.pcard .pcta { margin-top:auto; }

/* ─── RECEIPT ANATOMY (what's in a receipt) ─── */
.anat { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.anat-receipt { background:var(--surface); border:1px solid var(--ink-1); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-2); }
.anat-receipt .arh { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--line); }
.anat-receipt .arh .id { font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.anat-row { display:grid; grid-template-columns:92px 1fr; gap:16px; align-items:baseline; padding:15px 20px; border-bottom:1px solid var(--line-2); transition:background .2s var(--ease); }
.anat-row:last-child { border-bottom:0; }
.anat-row .rk { font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.anat-row .rv { font-family:var(--ff-mono); font-size:14px; color:var(--ink-1); word-break:break-all; }
.anat-row .rv .ok { color:var(--ok); }
.anat-row.lit { background:var(--surface-2); }
.anat-notes { display:flex; flex-direction:column; }
.anat-note { padding:15px 0; border-top:1px solid var(--line-2); cursor:default; transition:opacity .2s var(--ease); }
.anat-note:first-child { border-top:0; }
.anat-note .nk { font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:6px; }
.anat-note .nv { font-size:15px; line-height:1.5; color:var(--ink-2); }
.anat-note .nv b { color:var(--ink-1); font-weight:600; }
.anat-foot { margin-top:30px; font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.02em; color:var(--ink-3); }

/* ─── WHY NEUTRAL — everyone-else vs STOA ─── */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cmp { border:1px solid var(--line); border-radius:var(--r); padding:32px 32px 34px; background:var(--surface); display:flex; flex-direction:column; }
.cmp.lead { border-color:var(--accent); box-shadow:var(--shadow-2); }
.cmp .cmp-h { font-family:var(--ff-display); font-size:23px; font-weight:700; letter-spacing:-.02em; }
.cmp .cmp-s { font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-3); margin-top:5px; }
.cmp .cmp-box { align-self:flex-start; padding:13px 30px; border-radius:var(--r-sm); font-family:var(--ff-mono); font-size:14px; color:var(--ink-1); background:var(--surface-2); border:1px solid var(--line); margin:22px 0 20px; }
.cmp .cmp-box.amber { background:var(--amber-glow); border-color:var(--accent); }
.cmp .cmp-claim { font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink-1); margin:0; }
.cmp .cmp-sub { font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:9px 0 0; }
.cmp .cmp-sub .ok { color:var(--ok); font-weight:500; }
.compare-foot { text-align:center; margin-top:30px; font-size:17px; line-height:1.5; color:var(--ink-1); }
.compare-foot .vs { color:var(--ink-3); font-style:normal; padding:0 4px; }

/* ─── FOOTER ─── */
.foot { border-top:1px solid var(--line); padding:64px 0 44px; }
.foot-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px; }
.foot-logo { width:104px; height:29px; background:var(--logo) left center/contain no-repeat; margin-bottom:16px; }
.foot .blurb { font-size:14px; color:var(--ink-2); line-height:1.55; max-width:32ch; }
.foot .blurb .em { color:var(--ink-1); }
.foot h6 { font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; }
.foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot ul a { font-size:14px; color:var(--ink-2); }
.foot ul a:hover { color:var(--ink-1); }
.foot-bot { max-width:var(--maxw); margin:44px auto 0; padding:22px 40px 0; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* ─── reveal ─── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
.reveal.in { opacity:1; transform:none; }
/* ─── reveal — brand motion: fade + rise, springSoft (--ease-soft), --dur-reveal ─── */
.reveal { opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease-soft), transform var(--dur-reveal) var(--ease-soft); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; } html { scroll-behavior:auto; } }

/* ─── full-page motion system · brand spec · "calm physics, nothing bounces in" ───
   springSoft easing · 600ms reveal · 80ms (--stagger) between siblings · fade + scale + rise */
.reveal-stagger > * { opacity:0; transform:translateY(16px) scale(.985);
  transition:opacity var(--dur-reveal) var(--ease-soft), transform var(--dur-reveal) var(--ease-soft); }
.reveal-stagger.in > * { opacity:1; transform:none; }
.reveal-stagger > *:nth-child(1){ transition-delay:calc(var(--stagger) * 0); }
.reveal-stagger > *:nth-child(2){ transition-delay:calc(var(--stagger) * 1); }
.reveal-stagger > *:nth-child(3){ transition-delay:calc(var(--stagger) * 2); }
.reveal-stagger > *:nth-child(4){ transition-delay:calc(var(--stagger) * 3); }
.reveal-stagger > *:nth-child(5){ transition-delay:calc(var(--stagger) * 4); }
.reveal-stagger > *:nth-child(6){ transition-delay:calc(var(--stagger) * 5); }
@media (prefers-reduced-motion:reduce){ .reveal-stagger > *{ opacity:1; transform:none; transition:none; } }

/* nav + hero text settle in on load — same fade + rise, 80ms apart */
@media (prefers-reduced-motion:no-preference){
  .nav { animation:revRise var(--dur-reveal) var(--ease-soft) both; }
  .hero-intro > * { opacity:0; animation:revRise var(--dur-reveal) var(--ease-soft) both; }
  .hero-intro > *:nth-child(1){ animation-delay:calc(var(--stagger) * 1); }
  .hero-intro > *:nth-child(2){ animation-delay:calc(var(--stagger) * 2); }
  .hero-intro > *:nth-child(3){ animation-delay:calc(var(--stagger) * 3); }
  .hero-intro > *:nth-child(4){ animation-delay:calc(var(--stagger) * 4); }
  .hero-intro > *:nth-child(5){ animation-delay:calc(var(--stagger) * 5); }
}
@keyframes revRise { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ─── THERON · HIVE flow — brand agent-card vocabulary ─── */
.flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:22px; }
.flow-node { display:flex; flex-direction:column; gap:14px; }
.flow-cap { font-size:14px; line-height:1.5; color:var(--ink-2); margin:0; max-width:30ch; }
.flow-arrow { display:flex; align-items:center; justify-content:center; height:74px; color:var(--ink-3); }
.flow-arrow svg { width:26px; height:26px; }

.agentc { position:relative; display:flex; align-items:center; gap:14px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:14px 18px; box-shadow:var(--shadow-1); }
.agentc .ava { width:48px; height:48px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:700; font-size:18px; letter-spacing:.01em; }
.agentc .ava svg { width:22px; height:22px; stroke-width:2.2; }
.agentc .meta { display:flex; flex-direction:column; }
.agentc .nm { font-family:var(--ff-display); font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink-1); }
.agentc .rl { font-size:13px; color:var(--ink-2); margin-top:1px; }

/* Theron = the model, amber (its canonical brand color) */
.agentc.theron-c { border-color:color-mix(in srgb, var(--amber) 42%, var(--line)); box-shadow:var(--shadow-glow); }
.agentc.theron-c .ava { background:var(--amber-glow); color:var(--amber-deep); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--amber) 60%, transparent); }
/* Hive = the agents, moss (secure/acting) */
.agentc.hive-c .ava { background:var(--ok-soft); color:var(--ok); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent); }
/* Receipt = verified, moss check */
.agentc.rcpt-c .ava { background:var(--ok-soft); color:var(--ok); }

@keyframes hiveDrift { 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(-5px); opacity:1; } }

/* ─── HIVE swarm roster — ported from brand system §16 (marquee · floaty · pending) ─── */
.roster { margin-top:40px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1);
  background:
    radial-gradient(46% 60% at 90% 0%, var(--ok-soft), transparent 62%),
    radial-gradient(40% 60% at 5% 100%, rgba(184,212,227,.14), transparent 62%),
    var(--surface-2); }
.roster-head { display:flex; align-items:center; gap:12px; padding:15px 22px; border-bottom:1px solid var(--line); }
.roster-head .lab { font-family:var(--ff-ui); font-weight:600; font-size:14px; color:var(--ink-1); }
.roster-head .phase { font-family:var(--ff-serif); font-style:italic; font-size:15px; color:var(--ink-2); }
.roster-head .count { margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:12.5px; color:var(--ink-2); }
.roster-head .count b { color:var(--ok); font-weight:500; }
.roster-body { padding:20px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.roster-track { display:flex; gap:14px; width:max-content; will-change:transform; }
@media (prefers-reduced-motion:no-preference){ .roster-track { animation:marquee 48s linear infinite; } }
@keyframes marquee { from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

.swarm-agent { display:flex; align-items:center; gap:12px; width:214px; flex-shrink:0;
  background:color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter:blur(7px);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:9px 14px; box-shadow:var(--shadow-1);
  transition:opacity var(--dur-state) var(--ease-soft), box-shadow var(--dur-state) var(--ease-soft), background var(--dur-state) var(--ease-soft); }
.swarm-agent .sa-av { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:700; font-size:13px; letter-spacing:.01em; color:var(--ok); position:relative;
  background:radial-gradient(72% 72% at 36% 28%, color-mix(in srgb, var(--ok) 24%, #fff), var(--surface-2));
  border:1px solid color-mix(in srgb, var(--ok) 42%, transparent);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6), inset 0 -3px 6px color-mix(in srgb, var(--ok) 14%, transparent); }
.swarm-agent .sa-meta { display:flex; flex-direction:column; }
.swarm-agent .sa-nm { font-family:var(--ff-display); font-size:13.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-1); line-height:1.2; }
.swarm-agent .sa-rl { font-family:var(--ff-ui); font-size:12px; color:var(--ink-2); }
.swarm-agent.pending { opacity:.38; box-shadow:none; background:transparent; }
@media (prefers-reduced-motion:no-preference){
  .swarm-agent.floaty { animation:drift 7s var(--ease-inout) infinite; }
  .swarm-agent.floaty:nth-child(3n)   { animation-delay:-2.3s; }
  .swarm-agent.floaty:nth-child(3n+1) { animation-delay:-4.6s; }
}
@keyframes drift { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* Gate — quiet, dashed, clearly roadmap (build quietly, never pitch) */
.gate-tease { margin-top:44px; display:flex; gap:20px; align-items:baseline; flex-wrap:wrap;
  border:1px dashed var(--line); border-radius:var(--r); padding:22px 26px; background:var(--surface-2); }
.gate-tease .gk { font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.gate-tease p { font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0; flex:1; min-width:280px; max-width:72ch; }
.gate-tease b { color:var(--ink-1); font-weight:600; }
.gate-tease em { font-family:var(--ff-serif); font-style:italic; font-weight:400; color:var(--ink-1); }

/* ─── responsive ─── */
@media (max-width:1024px){
  .hero-grid { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:1080px){
  .steps { grid-template-columns:1fr 1fr; }
  .step { border-left:1px solid var(--line); border-top:1px solid var(--line); }
  .step:nth-child(odd) { border-left:0; }
  .step:nth-child(-n+2) { border-top:0; }
}
@media (max-width:920px){
  .hero-grid { grid-template-columns:1fr; gap:44px; }
  .steps { grid-template-columns:1fr; }
  .step { border-left:0; border-top:1px solid var(--line); }
  .step:first-child { border-top:0; }
  .anat { grid-template-columns:1fr; gap:36px; }
  .compare { grid-template-columns:1fr; }
  .flow { grid-template-columns:1fr; gap:8px; justify-items:start; }
  .flow-arrow { height:auto; transform:rotate(90deg); margin:4px 0 4px 24px; }
  .agentc { width:100%; max-width:420px; }
  .proof { grid-template-columns:1fr; gap:28px; padding:32px; }
  .ptease { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .nav-links { display:none; }
  .nav-burger { display:flex; }
}
@media (max-width:560px){
  .wrap { padding:0 22px; }
  .sec { padding:72px 0; }
  .nav-in { padding:13px 22px; }
  .foot-bot { padding:22px 22px 0; flex-direction:column; gap:10px; text-align:center; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .hero-cta { gap:12px; }
  .btn-lg { padding:14px 20px; }
}

/* ============================================================
   EMOTIONAL TRUST PALETTE — sky = safety · moss = secure · amber = action
   ============================================================ */
/* the trust argument sits in a calm sky halo */
#why { position:relative; overflow:hidden; }
#why::before {
  content:''; position:absolute; left:50%; top:0; width:140%; height:70%;
  transform:translateX(-50%); z-index:0; pointer-events:none;
  background:radial-gradient(60vw 46vh at 50% 0%, rgba(184,212,227,.20), transparent 70%);
}
html[data-theme="dark"] #why::before { background:radial-gradient(60vw 46vh at 50% 0%, rgba(111,160,189,.13), transparent 70%); }
#why .wrap { position:relative; z-index:1; }

/* the winning card glows SECURE-green, not amber — you're safe, not sold to */
.cmp.lead { border-color:var(--ok); box-shadow:0 4px 10px -4px rgba(107,142,90,.12), var(--shadow-2); }
.cmp .cmp-box.trust { background:var(--ok-soft); border-color:var(--ok); color:var(--ink-1); }
.compare-foot .ok { color:var(--ok); font-weight:500; }

/* anchor = safe/immutable (sky) · verify = secure/checked (moss) */
.step.s-sky .si { border-color:var(--sky-deep); color:var(--sky-deep); background:rgba(184,212,227,.16); }
.step.s-moss .si { border-color:var(--ok); color:var(--ok); background:var(--ok-soft); }
html[data-theme="dark"] .step.s-sky .si { background:rgba(111,160,189,.14); }

/* mobile menu sheet */
.msheet { position:fixed; inset:0; z-index:80; background:var(--bg); display:none; flex-direction:column; padding:22px; }
.msheet.open { display:flex; }
.msheet .mtop { display:flex; align-items:center; justify-content:space-between; }
.msheet .mtop .nav-logo { }
.msheet .mclose { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-1); background:transparent; cursor:pointer; }
.msheet .mclose svg { width:18px; height:18px; }
.msheet nav { margin-top:32px; display:flex; flex-direction:column; gap:4px; }
.msheet nav a { font-family:var(--ff-display); font-size:28px; font-weight:600; letter-spacing:-.02em; padding:12px 0; border-bottom:1px solid var(--line-2); }
.msheet .msheet-cta { margin-top:28px; }