/* ============================================================
   vext.css — legacy runtime token vocabulary (v2 · FACET, 2026-07-09)
   Loaded 2nd in os.html (AFTER juwel-ds.css), consumed by the OS
   sheets that follow. Its job is TOKENS: every custom-property name
   the downstream sheets reference is kept, but every value now
   resolves to FACET (cut stone, not candy) — matching juwel-ds.css
   exactly. Canonical spec: docs/brand/BRAND_SYSTEM.md.
   One law of color: ink = you act; amber = JUWEL acts / it's on the
   record. Background is STILL. No italics. No purple. No emoji.
   ============================================================ */

:root {
  /* ── ink + paper — LIGHT (alabaster) ── */
  --paper:#F2F1EE; --bg:#F2F1EE;
  --surface:#FFFFFF; --surface-2:#EAE9E5; --surface-3:#E2E1DC;
  /* legacy raw-paper names → FACET surfaces */
  --paper-warm:var(--surface-2); --bone:var(--surface-2); --bone-deep:var(--surface-3);
  --code-bg:var(--surface-2);
  --ink:#1A1915; --ink-1:#1A1915;
  --ink-2:rgba(26,25,21,.64); --ink-3:rgba(26,25,21,.42); --ink-4:rgba(26,25,21,.20);
  --line:rgba(26,25,21,.10); --line-2:rgba(26,25,21,.06);
  --edge:rgba(255,255,255,.75);
  --receipt-bg:#171613; --receipt-ink:#F2F0EB;
  --wash:linear-gradient(0deg,transparent,transparent);   /* candy wash is dead */

  /* ── gem accents (semantic only) ── */
  --topaz:#FF9A00; --topaz-2:#FFB42A; --topaz-deep:#E68A00; --topaz-soft:#FBEEDA;
  --topaz-ink:#7A4D00;
  --jade:#3E9B4F; --jade-2:#5DBB6E; --jade-deep:#2F7C3D; --jade-soft:#E2F0E4;
  --garnet:#C93A52; --garnet-2:#E06377; --garnet-deep:#A62B41; --garnet-soft:#F7E3E7;
  --sapphire:#2E86C9; --sapphire-2:#5FAEE3; --sapphire-deep:#1F6AA5; --sapphire-soft:#E1EEF8;
  --amethyst:var(--topaz); --amethyst-2:var(--topaz-2); --amethyst-deep:var(--topaz-deep); --amethyst-soft:var(--topaz-soft);
  /* semantic */
  --accent:var(--topaz); --accent-2:var(--topaz-2); --accent-deep:var(--topaz-deep);
  --accent-soft:var(--topaz-soft); --accent-ink:#201200; --accent-contrast:#201200; --amber-ink:#8A5200;
  --ok:#3E9B4F; --ok-ink:#2F7C3D; --ok-soft:var(--jade-soft);
  --bad:#C93A52; --bad-soft:var(--garnet-soft);

  /* legacy vext.css color vocabulary → FACET */
  --amber:var(--topaz); --amber-deep:var(--topaz-deep); --amber-glow:rgba(255,154,0,.18);
  --sky:var(--sapphire); --sky-deep:var(--sapphire-deep); --terracotta:#B4633A; --moss:#4E8A57;
  --c-amber:var(--topaz); --c-burn:var(--topaz-deep); --c-coral:var(--topaz);
  --c-sky:var(--sapphire); --c-lime:var(--jade);
  --c-plum:#57544E; --c-grape:#3B3934;           /* stone grays; purple stays dead */
  --gloss-sheen:transparent;                      /* kills every legacy sheen */
  --logo:url('assets/vext-labs-logo.png');

  /* ── type ── */
  --ff:'Plus Jakarta Sans',system-ui,sans-serif;
  --ff-display:var(--ff); --ff-ui:var(--ff);
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace; --ff-mono:var(--mono);
  --serif:var(--ff); --ff-serif:var(--ff);        /* no serif in the system */
  --fs-display:clamp(34px,5vw,54px);
  --fs-h1:clamp(26px,3.4vw,38px); --fs-h2:clamp(21px,2.4vw,28px); --fs-h3:17px;
  --fs-lede:16px; --fs-body:15px; --fs-small:12.5px; --fs-label:11px;
  --maxw:1120px;

  /* ── space · radius (FACET scale — 24-34px candy radii retired) ── */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:18px; --r-full:999px;
  --r:var(--r-md); --r-pill:var(--r-full);        /* default surface · pill */

  /* ── motion (Emil/Apple doctrine: ease-out, no bounce, <300ms) ── */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease:var(--ease-out); --ease-soft:var(--ease-out); --ease-inout:var(--ease-in-out);
  --bounce:var(--ease-out);                        /* legacy bounce silenced */
  --dur:.18s; --dur-1:.12s; --dur-2:.18s; --dur-3:.24s;
  --dur-micro:.15s; --dur-state:.22s; --dur-reveal:.4s; --stagger:44ms;

  /* ── elevation ── */
  --shadow-1:0 1px 2px rgba(20,18,12,.05),0 8px 24px -18px rgba(20,18,12,.25);
  --shadow-2:0 10px 30px -18px rgba(20,18,12,.35);
  --shadow-3:0 24px 60px -30px rgba(20,18,12,.42);
  --shadow:var(--shadow-2); --shadow-lg:var(--shadow-3);
  --shadow-glow:0 0 0 3px var(--amber-glow); --glow-amber:0 0 0 3px var(--amber-glow);

  /* chrome glass (menubar / dock / palette / control center ONLY) */
  --glass-bg:color-mix(in srgb,var(--surface) 78%,transparent);
  --glass-border:var(--line);
  --glass-shadow:inset 0 1px 0 var(--edge),0 12px 40px -20px rgba(20,18,12,.40);
  --glass-blur:blur(20px) saturate(1.35);
}

html[data-theme="dark"] {
  /* ── ink + paper — DARK (obsidian) ── */
  --paper:#121110; --bg:#121110;
  --surface:#1B1A18; --surface-2:#242320; --surface-3:#2C2B27;
  --ink:#F2F0EB; --ink-1:#F2F0EB;
  --ink-2:rgba(242,240,235,.66); --ink-3:rgba(242,240,235,.42); --ink-4:rgba(242,240,235,.20);
  --line:rgba(242,240,235,.10); --line-2:rgba(242,240,235,.06);
  --edge:rgba(255,255,255,.06);
  --receipt-bg:#0F0E0C; --receipt-ink:#F2F0EB;
  --topaz:#FFB42A; --topaz-2:#FFC65C; --topaz-deep:#FF9A00; --topaz-soft:#33260F;
  --topaz-ink:#FFC65C;
  --jade:#5DBB6E; --jade-2:#7ACB88; --jade-deep:#3E9B4F; --jade-soft:#182B1B;
  --garnet:#E06377; --garnet-2:#EA8496; --garnet-deep:#C93A52; --garnet-soft:#33181D;
  --sapphire:#5FAEE3; --sapphire-2:#83C1EB; --sapphire-deep:#2E86C9; --sapphire-soft:#14242F;
  --accent-ink:#201200; --accent-contrast:#201200;
  --ok:#5DBB6E; --ok-ink:#7ACB88; --bad:#E06377;
  --c-plum:#8B877E; --c-grape:#6B6860;
  --amber-glow:rgba(255,180,42,.22);
  --logo:url('assets/vext-labs-logo-white.png');
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 8px 24px -18px rgba(0,0,0,.5);
  --shadow-2:0 10px 30px -18px rgba(0,0,0,.6);
  --shadow-3:0 24px 60px -30px rgba(0,0,0,.7);
  --glass-bg:color-mix(in srgb,var(--surface) 74%,transparent);
  --glass-shadow:inset 0 1px 0 var(--edge),0 12px 40px -20px rgba(0,0,0,.6);
}

* { 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; font-style:normal;
  transition:background .24s var(--ease), color .24s var(--ease);
}
em,i,cite,dfn,address { font-style:normal; }   /* italics are banned — hard rule */
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
svg { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
::selection { background:color-mix(in srgb, var(--topaz) 28%, transparent); }

.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:.16em; text-transform:uppercase; color:var(--ink-3); }
.mono { font-family:var(--ff-mono); }
.serif { font-family:var(--ff-serif); font-style:normal; font-weight:600; }
h1,h2,h3,h4 { margin:0; font-family:var(--ff-display); letter-spacing:-.025em; line-height:1.05; }
.h1 { font-size:clamp(34px,5vw,54px); font-weight:700; }
.h2 { font-size:clamp(26px,3.4vw,38px); font-weight:700; letter-spacing:-.028em; }
.h3 { font-size:22px; font-weight:650; letter-spacing:-.018em; }
.lede { font-size:clamp(16px,1.6vw,19px); line-height:1.5; color:var(--ink-2); }
.serif-accent { font-family:var(--ff-serif); font-style:normal; font-weight:700; letter-spacing:0; }

/* ─── buttons — ink = you act; amber = JUWEL acts / the record (spec §6) ─── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ff-ui); font-size:13.5px; font-weight:600;
  letter-spacing:-.01em; padding:9px 16px; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer;
  background:var(--ink-1); color:var(--paper); white-space:nowrap;
  transition:transform var(--dur-1) var(--ease-out), background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.btn svg { width:16px; height:16px; }
.btn:active { transform:scale(.98); }
@media (hover:hover) and (pointer:fine){ .btn:hover { background:color-mix(in srgb, var(--ink-1) 88%, var(--paper)); } }
/* THE amber moment — the only amber fill */
.btn-amber { background:var(--amber); color:var(--accent-ink); border-color:transparent; box-shadow:none; }
@media (hover:hover) and (pointer:fine){ .btn-amber:hover { background:var(--amber-deep); } }
html[data-theme="dark"] .btn-amber { color:var(--accent-ink); }
/* quiet ghost — hairline, never amber */
.btn-ghost { background:transparent; border-color:var(--line); color:var(--ink-1); box-shadow:none; }
@media (hover:hover) and (pointer:fine){ .btn-ghost:hover { background:var(--surface-2); } }
.btn-quiet { background:transparent; color:var(--ink-2); padding-left:6px; padding-right:6px; }
@media (hover:hover) and (pointer:fine){ .btn-quiet:hover { color:var(--ink-1); } }
.btn-lg { padding:12px 20px; font-size:14.5px; }

/* ─── 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; }
@media (hover:hover) and (pointer:fine){ .chip .cp:hover { color:var(--ink-1); } }

/* ─── live dot (jade = verified/live; never amber) — still, no ambient ping ─── */
.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:.18; }

/* ─── NAV (chrome glass — the one translucent material) ─── */
.nav { position:sticky; top:0; z-index:60; background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border-bottom:1px solid transparent; transition:border-color .18s var(--ease), background .18s var(--ease); }
.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 var(--ease); }
@media (hover:hover) and (pointer:fine){ .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; transition:color .15s var(--ease), border-color .15s var(--ease); }
@media (hover:hover) and (pointer:fine){ .theme-tog:hover { color:var(--ink-1); border-color:var(--ink-3); } }
.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; }
/* wallpaper: STILL, always — one faint amber refraction, no drifting blobs */
.hero-aura { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.blob { position:absolute; border-radius:50%; }
.b-sky   { width:60vw; height:72vh; top:-28vh; right:-12vw; background:none; }
.b-moss  { width:54vw; height:64vh; bottom:-30vh; left:-14vw; background:none; }
.b-amber { width:40vw; height:48vh; top:-16vh; left:26vw;
  background:radial-gradient(circle at center, rgba(255,154,0,.05), rgba(255,154,0,0) 64%); }
.b-terra { width:44vw; height:52vh; bottom:-24vh; right:20vw; background:none; }

.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.1; }
.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); }
@media (hover:hover) and (pointer:fine){ .hero-sub-links a:hover { color:var(--ink-1); } }

/* ─── RECEIPT CARD + verifier (the cohesion anchor) ─── */
.receipt-wrap { display:flex; flex-direction:column; gap:18px; }
.receipt { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:inset 0 1px 0 var(--edge), var(--shadow-2); transition:border-color .18s var(--ease), box-shadow .18s 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:.14em; 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:.1em; text-transform:uppercase; padding:6px 12px; border-radius:var(--r-full); border:1px solid transparent;
  color:var(--ok-ink); background:var(--ok-soft); transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.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:.13em; 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 var(--ease), background .15s var(--ease); }
@media (hover:hover) and (pointer:fine){ .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:.11em; 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; }
@media (hover:hover) and (pointer:fine){ .tamper-row .reset:hover { color:var(--ink-1); } }
.tamper-row .reset.hidden { display:none; }

.proof-caption { font-size:14px; line-height:1.5; 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,52px); letter-spacing:-.028em; 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 — emphasis on the record */
.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 .18s var(--ease); }
@media (hover:hover) and (pointer:fine){ .step:hover { background:var(--surface-2); } }
.step:first-child { border-left:0; }
.step .sn { font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; 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-md); 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:20px; font-weight:650; letter-spacing:-.018em; }
.step p { font-size:14.5px; line-height:1.5; 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:inset 0 1px 0 var(--edge), var(--shadow-1); }
.proof .pk { font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.proof h3 { margin:14px 0 0; }
.proof p { font-size:15px; line-height:1.5; 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-ink); 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 .18s var(--ease), transform .18s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .pcard:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); } }
.pcard.lead { border-color:var(--ink-1); box-shadow:inset 0 1px 0 var(--edge), var(--shadow-2); }
.pcard .pk { font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.pcard .price { font-family:var(--ff-display); font-size:44px; font-weight:700; letter-spacing:-.028em; 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.5; 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(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:inset 0 1px 0 var(--edge), 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:.14em; 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 .15s var(--ease); }
.anat-row:last-child { border-bottom:0; }
.anat-row .rk { font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.13em; 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-ink); }
.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 .15s var(--ease); }
.anat-note:first-child { border-top:0; }
.anat-note .nk { font-family:var(--ff-mono); font-size:11px; letter-spacing:.11em; 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:inset 0 1px 0 var(--edge), var(--shadow-2); }
.cmp .cmp-h { font-family:var(--ff-display); font-size:22px; font-weight:650; letter-spacing:-.018em; }
.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.5; color:var(--ink-2); margin:9px 0 0; }
.cmp .cmp-sub .ok { color:var(--ok-ink); 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.5; max-width:32ch; }
.foot .blurb .em { color:var(--ink-1); }
.foot h6 { font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; 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); }
@media (hover:hover) and (pointer:fine){ .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:.08em; text-transform:uppercase; color:var(--ink-3); }

/* ─── reveal — FACET entry: fade + rise, ease-out, ≤ 400ms ─── */
.reveal { opacity:0; transform:translateY(12px);
  transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; } html { scroll-behavior:auto; } }

/* ─── staggered entry · fade + slight scale + rise (never scale(0)) ─── */
.reveal-stagger > * { opacity:0; transform:translateY(12px) scale(.99);
  transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.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, staggered */
@media (prefers-reduced-motion:no-preference){
  .nav { animation:revRise var(--dur-reveal) var(--ease-out) both; }
  .hero-intro > * { opacity:0; animation:revRise var(--dur-reveal) var(--ease-out) 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(12px); } to{ opacity:1; transform:none; } }

/* ─── THERON · HIVE flow — 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);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 18px; box-shadow:inset 0 1px 0 var(--edge), 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; }
.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 (she acts / the record) */
.agentc.theron-c { border-color:color-mix(in srgb, var(--amber) 38%, var(--line)); box-shadow:var(--shadow-glow); }
.agentc.theron-c .ava { background:var(--topaz-soft); color:var(--topaz-ink); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
/* Hive = the agents, jade (secure/acting) */
.agentc.hive-c .ava { background:var(--ok-soft); color:var(--ok-ink); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
/* Receipt = verified, jade check */
.agentc.rcpt-c .ava { background:var(--ok-soft); color:var(--ok-ink); }

/* ─── HIVE swarm roster — still (marquee/floaty motion retired) ─── */
.roster { margin-top:40px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1);
  background: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:normal; font-weight:600; 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-ink); 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; }

.swarm-agent { display:flex; align-items:center; gap:12px; width:214px; flex-shrink:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:9px 14px; box-shadow:inset 0 1px 0 var(--edge), var(--shadow-1);
  transition:opacity var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease), background var(--dur-state) var(--ease); }
.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-ink); position:relative;
  background:var(--surface-2); border:1px solid color-mix(in srgb, var(--ok) 40%, 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; }

/* 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:.14em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.gate-tease p { font-size:14.5px; line-height:1.5; 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:normal; font-weight:700; 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:12px 18px; }
}

/* ============================================================
   TRUST PALETTE — sapphire = info/anchor · jade = secure · amber = the record
   (backgrounds are STILL; semantic status color only)
   ============================================================ */
#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%, color-mix(in srgb, var(--sapphire) 8%, transparent), transparent 70%);
}
#why .wrap { position:relative; z-index:1; }

/* the winning card reads SECURE (jade), not amber — you're safe, not sold to */
.cmp.lead { border-color:var(--ok); box-shadow:inset 0 1px 0 var(--edge), 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-ink); font-weight:500; }

/* anchor = immutable (sapphire) · verify = secure/checked (jade) */
.step.s-sky .si { border-color:var(--sky-deep); color:var(--sky-deep); background:var(--sapphire-soft); }
.step.s-moss .si { border-color:var(--ok); color:var(--ok-ink); background:var(--ok-soft); }

/* 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; }