/* =============================================================================
   Agentics — site.css  (component layer, per FRONTEND-UI-OVERHAUL-SPEC §4)
   Built on tokens.css. Assumes tokens.css is loaded first. Redefines NO token.
   One component per concept: .btn .card .code .pill .verify .nav .footer + utils.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. RESET / BASE
   --------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--t-body); line-height:var(--lh-body);
  letter-spacing:.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
::selection{ background:var(--accent-soft); color:var(--ink); }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-strong); }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:var(--tr-head); color:var(--ink); }
p{ margin:0 0 1em; }
button{ font-family:inherit; }

.mono,.hash{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.dim{ color:var(--ink-dim); } .mute{ color:var(--ink-mute); } .faint{ color:var(--ink-faint); }
.accent{ color:var(--accent); } .nowrap{ white-space:nowrap; }
.center{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------------------------------------------------------------------------
   1. GLOBAL FOCUS RING (WCAG 2.2 §9) — every interactive thing gets it
   --------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .pill:focus-visible, .nav a:focus-visible,
.code-tab:focus-visible, .table-link:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs);
}
:focus:not(:focus-visible){ outline:none; }

/* ---------------------------------------------------------------------------
   2. ATMOSPHERE (star field / aurora / grain / vignette)  — decorative, fixed
   --------------------------------------------------------------------------- */
.atmos{ position:fixed; inset:0; pointer-events:none; z-index:var(--z-atmos); }
.atmos-stars{ position:fixed; inset:0; pointer-events:none; z-index:var(--z-atmos); opacity:.35;
  background-image:
    radial-gradient(1px 1px at 24px 30px,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 140px 88px,rgba(255,255,255,.55),transparent),
    radial-gradient(1.4px 1.4px at 208px 168px,rgba(200,220,255,.7),transparent),
    radial-gradient(1px 1px at 318px 248px,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 286px 56px,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 64px 308px,rgba(255,255,255,.42),transparent),
    radial-gradient(1.2px 1.2px at 372px 132px,rgba(220,210,255,.6),transparent),
    radial-gradient(1px 1px at 96px 220px,rgba(255,255,255,.4),transparent);
  background-size:400px 400px; background-repeat:repeat; }
.atmos-aurora{ position:fixed; inset:0; pointer-events:none; z-index:var(--z-atmos);
  background:
    radial-gradient(62% 52% at 2% -4%,rgba(99,102,241,.12),transparent 60%),
    radial-gradient(58% 48% at 100% -6%,rgba(139,92,246,.10),transparent 60%),
    radial-gradient(50% 42% at 88% 8%,rgba(122,216,255,.05),transparent 62%); }
.grain{ position:fixed; inset:0; pointer-events:none; z-index:-1; mix-blend-mode:overlay; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vignette{ position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(130% 120% at 50% -10%,transparent 52%,rgba(0,0,0,.5) 100%); }
[data-theme="light"] .atmos-stars,[data-theme="light"] .vignette{ display:none; }
[data-theme="light"] .atmos-aurora{ opacity:.4; }

/* ---------------------------------------------------------------------------
   3. LAYOUT UTILITIES
   --------------------------------------------------------------------------- */
.container{ width:100%; max-width:var(--w-container); margin-inline:auto; padding-inline:max(20px,4vw); }
.section{ padding-block:var(--section-y); position:relative; }
.section-sm{ padding-block:var(--s-16); }
.measure{ max-width:var(--w-measure); }
.measure-c{ max-width:var(--w-measure); margin-inline:auto; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.wrap{ flex-wrap:wrap; }
.gap-2{ gap:var(--s-2); } .gap-3{ gap:var(--s-3); } .gap-4{ gap:var(--s-4); }
.gap-6{ gap:var(--s-6); } .gap-8{ gap:var(--s-8); } .gap-10{ gap:var(--s-10); }
.grid{ display:grid; gap:var(--s-6); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-12); align-items:center; }
@media (max-width:900px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:var(--s-8); }
  .section{ padding-block:var(--section-y-sm); }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   4. TYPE HELPERS
   --------------------------------------------------------------------------- */
.eyebrow{ font-family:var(--font-brand); font-weight:700; font-size:var(--t-eyebrow);
  letter-spacing:var(--tr-eyebrow); text-transform:uppercase; color:var(--ink-mute);
  display:inline-flex; align-items:center; gap:8px; }
.eyebrow.accent{ color:var(--accent); }
.display{ font-size:var(--t-display); line-height:var(--lh-tight); letter-spacing:var(--tr-display); font-weight:600; }
.h1{ font-size:var(--t-h1); line-height:1.06; letter-spacing:var(--tr-display); }
.h2{ font-size:var(--t-h2); line-height:1.1; letter-spacing:var(--tr-head); }
.h3{ font-size:var(--t-h3); line-height:1.2; letter-spacing:-.02em; }
.lead{ font-size:var(--t-lead); line-height:1.5; color:var(--ink-dim); letter-spacing:-.01em; font-weight:400; }
.small{ font-size:var(--t-sm); } .xs{ font-size:var(--t-xs); }
.grad-text{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }
.stat{ font-family:var(--font-brand); font-weight:700; font-size:var(--t-stat); line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------------------
   5. BRAND MARK / WORDMARK
   --------------------------------------------------------------------------- */
.brand{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; color:var(--ink); }
.brand .mark{ width:18px; height:18px; border-radius:50%; filter:blur(1.4px); flex:none;
  background:conic-gradient(from 210deg,var(--info),var(--accent),var(--warn),var(--success),var(--info)); }
.brand .mark.lg{ width:26px; height:26px; }
.brand .word{ font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.18em;
  font-size:13px; color:var(--ink); font-weight:700; }

/* ---------------------------------------------------------------------------
   6. BUTTONS (.btn) — replaces .ag-btn / .e-btn / .p-btn
   --------------------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--r-pill); padding:10px 18px;
  font:600 14px/1 var(--font-sans); letter-spacing:.005em; color:var(--ink);
  background:transparent; cursor:pointer; transition:transform var(--dur-2) var(--ease),
  box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  min-height:44px; white-space:nowrap; text-decoration:none; }
.btn svg{ width:16px; height:16px; flex:none; }
.btn-primary{ background:linear-gradient(135deg,#7458F0 0%,#4A2CD0 100%); color:#fff; font-weight:650;
  text-shadow:0 1px 2px rgba(8,4,30,.28); box-shadow:var(--sh-1); }
.btn-primary:hover{ background:linear-gradient(135deg,#835EFF 0%,#5836E6 100%);
  box-shadow:var(--glow-accent); transform:translateY(-1px); color:#fff; }
.btn-primary:active{ background:var(--accent-deep); transform:none; }
.btn-ghost{ background:transparent; border-color:var(--line-3); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--ink); background:var(--accent-soft); }
.btn-quiet{ background:transparent; color:var(--accent); padding-inline:8px; min-height:auto; }
.btn-quiet:hover{ color:var(--accent-strong); }
.btn-danger{ background:var(--danger); color:#1a0006; }
.btn-danger:hover{ box-shadow:0 0 0 1px var(--danger-glow),0 0 22px var(--danger-glow); }
.btn-sm{ padding:8px 14px; min-height:36px; font-size:13px; }
.btn-lg{ padding:14px 22px; min-height:52px; font-size:16px; }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn.is-loading{ position:relative; color:transparent !important; }
.btn.is-loading::after{ content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; }

/* killswitch red pulse (carry-over) */
.btn-killswitch{ background:var(--danger); color:#1a0006; animation:killpulse 2.4s ease-in-out infinite; }
@keyframes killpulse{ 0%,100%{ box-shadow:0 0 0 0 var(--danger-glow); } 50%{ box-shadow:0 0 0 8px transparent; } }

/* copyable command pill */
.cmd-pill{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line-3); background:var(--bg-well); font-family:var(--font-mono);
  font-size:var(--t-hash); color:var(--ink); cursor:pointer; transition:border-color var(--dur-2) var(--ease); }
.cmd-pill:hover{ border-color:var(--accent); }
.cmd-pill .prompt{ color:var(--accent); }
.cmd-pill .copy{ margin-left:4px; color:var(--ink-mute); display:inline-flex; }

/* Hero CTA row — match the primary button and the verify-command pill to ONE
   height so the row reads as a set (was 52px button vs 39px pill = mismatched). */
.cta-row{ align-items:center; }
.cta-row > .btn{ min-height:46px; }
.cta-row > .cmd-pill{ min-height:46px; padding-block:0; }

/* ---------------------------------------------------------------------------
   7. CARDS (.card)
   --------------------------------------------------------------------------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s-6); box-shadow:var(--sh-1); position:relative; }
.card-pad-lg{ padding:var(--s-8); }
.card-hov{ transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
  border-color var(--dur-2) var(--ease); }
.card-hov::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; border-radius:var(--r) var(--r) 0 0;
  background:var(--grad-accent); opacity:0; transition:opacity var(--dur-2) var(--ease); }
.card-hov:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--line-3); }
.card-hov:hover::before{ opacity:1; }
.card-well{ background:var(--bg-well); border:1px solid var(--line);
  border-top:1px solid var(--accent-soft);
  box-shadow:inset 0 1px 0 rgba(182,156,255,.06), inset 0 14px 30px -22px rgba(0,0,0,.9);
  border-radius:var(--r); }

/* per-group glow tint (module grid) */
.glow-info:hover{ box-shadow:var(--sh-2),0 0 30px -8px var(--info-glow); }
.glow-success:hover{ box-shadow:var(--sh-2),0 0 30px -8px var(--success-glow); }
.glow-accent:hover{ box-shadow:var(--sh-2),0 0 30px -8px var(--accent-glow); }

/* ---------------------------------------------------------------------------
   8. PILLS / BADGES (.pill) + the verify/anchor badge
   --------------------------------------------------------------------------- */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--r-pill);
  font:600 11px/1.4 var(--font-brand); text-transform:uppercase; letter-spacing:.06em;
  border:1px solid var(--line); color:var(--ink-dim); background:var(--elev-2); }
.pill svg{ width:12px; height:12px; }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.pill-accent{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border-color:color-mix(in srgb,var(--accent) 35%,transparent); }
.pill-info{ color:var(--info); background:color-mix(in srgb,var(--info) 14%,transparent); border-color:color-mix(in srgb,var(--info) 35%,transparent); }
.pill-success{ color:var(--success); background:color-mix(in srgb,var(--success) 14%,transparent); border-color:color-mix(in srgb,var(--success) 35%,transparent); }
.pill-warn{ color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,transparent); border-color:color-mix(in srgb,var(--warn) 35%,transparent); }
.pill-danger{ color:var(--danger); background:color-mix(in srgb,var(--danger) 14%,transparent); border-color:color-mix(in srgb,var(--danger) 35%,transparent); }
.pill-muted{ color:var(--ink-mute); background:var(--elev-2); border-color:var(--line); }

/* signature verify/anchor badge */
.pill-proof{ color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent); box-shadow:0 0 16px -6px var(--accent-glow); cursor:pointer; }
.pill-proof.is-pending{ color:var(--warn); background:color-mix(in srgb,var(--warn) 12%,transparent);
  border-color:color-mix(in srgb,var(--warn) 40%,transparent); animation:breathe 2.2s ease-in-out infinite; }
.pill-proof.is-broken{ color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent);
  border-color:color-mix(in srgb,var(--danger) 40%,transparent); }
.pill-proof.is-unverified{ color:var(--ink-mute); background:var(--elev-2); border-color:var(--line); box-shadow:none; }
@keyframes breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* ---------------------------------------------------------------------------
   9. CODE BLOCK (.code) with language tabs
   --------------------------------------------------------------------------- */
.code{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg-well);
  box-shadow:var(--sh-1); }
.code-head{ display:flex; align-items:center; gap:4px; padding:6px 8px; background:var(--elev-2);
  border-bottom:1px solid var(--line); }
.code-tabs{ display:flex; gap:2px; flex:1; min-width:0; overflow-x:auto; }
.code-tab{ border:0; background:transparent; color:var(--ink-mute); font:500 12.5px/1 var(--font-sans);
  padding:8px 12px; border-radius:var(--r-xs); cursor:pointer; white-space:nowrap; position:relative;
  transition:color var(--dur-1) var(--ease); }
.code-tab:hover{ color:var(--ink-dim); }
.code-tab[aria-selected="true"]{ color:var(--ink); }
.code-tab[aria-selected="true"]::after{ content:""; position:absolute; left:12px; right:12px; bottom:2px;
  height:2px; border-radius:2px; background:var(--accent); }
.code-copy{ flex:none; border:1px solid var(--line); background:transparent; color:var(--ink-mute);
  border-radius:var(--r-xs); padding:6px 10px; font:500 12px var(--font-sans); cursor:pointer; display:inline-flex;
  align-items:center; gap:6px; transition:.15s; }
.code-copy:hover{ color:var(--ink); border-color:var(--line-3); }
.code-copy.is-done{ color:var(--success); border-color:color-mix(in srgb,var(--success) 40%,transparent); }
.code-body{ margin:0; padding:18px; overflow-x:auto; font-family:var(--font-mono); font-size:var(--t-hash);
  line-height:1.6; color:var(--ink); tab-size:2; }
.code-pane{ display:none; }
.code-pane.is-active{ display:block; }
.code-body code{ font-family:inherit; }
/* our own syntax theme (dark always) */
.tok-kw{ color:var(--accent); } .tok-str{ color:var(--success); } .tok-num{ color:var(--warn); }
.tok-prop{ color:var(--info); } .tok-punct{ color:var(--info); } .tok-com{ color:var(--ink-mute); font-style:italic; }

/* ---------------------------------------------------------------------------
   10. TABLES (.table)
   --------------------------------------------------------------------------- */
.table{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.table th{ position:sticky; top:0; background:var(--elev-2); font-family:var(--font-brand);
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute);
  font-weight:700; text-align:left; padding:12px; border-bottom:1px solid var(--line); }
.table td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
.table tr:hover td{ background:rgba(255,255,255,.025); }
[data-theme="light"] .table tr:hover td{ background:rgba(20,21,40,.03); }
.table-link{ cursor:pointer; }
@media (max-width:768px){
  .table-stack thead{ display:none; }
  .table-stack tr{ display:block; border:1px solid var(--line); border-radius:var(--r); margin-bottom:var(--s-3); padding:8px 12px; }
  .table-stack td{ display:flex; justify-content:space-between; gap:16px; border:0; padding:6px 0; text-align:right; }
  .table-stack td::before{ content:attr(data-label); font-family:var(--font-brand); font-size:10px;
    text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); text-align:left; }
}

/* ---------------------------------------------------------------------------
   11. FORMS
   --------------------------------------------------------------------------- */
.input,.select,.textarea{ width:100%; background:var(--elev-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px 12px; color:var(--ink); font:inherit; transition:.15s; }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow); }
.textarea{ min-height:120px; font-family:var(--font-mono); }
.label{ display:block; font-family:var(--font-brand); font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-dim); margin-bottom:6px; }
.field-err .input{ border-color:var(--danger); }
.field-help{ font-size:var(--t-xs); color:var(--ink-mute); margin-top:6px; }

/* ---------------------------------------------------------------------------
   12. KPI TILE (.kpi)
   --------------------------------------------------------------------------- */
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s-6);
  position:relative; overflow:hidden; box-shadow:var(--sh-1); }
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.kpi-info::before{ background:var(--info); } .kpi-success::before{ background:var(--success); }
.kpi-warn::before{ background:var(--warn); } .kpi-danger::before{ background:var(--danger); }
.kpi .k-lbl{ font-family:var(--font-brand); font-size:10px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-mute); display:flex; align-items:center; gap:7px; }
.kpi .k-val{ font-family:var(--font-brand); font-weight:700; font-size:2rem; letter-spacing:-.02em;
  margin-top:8px; font-variant-numeric:tabular-nums; }
.kpi .k-foot{ margin-top:6px; font-size:var(--t-xs); color:var(--ink-mute); }
.delta{ font-size:var(--t-xs); font-weight:600; } .delta.up{ color:var(--success); } .delta.down{ color:var(--danger); }

/* ---------------------------------------------------------------------------
   13. THE VERIFY WIDGET (.verify) — the differentiator
   --------------------------------------------------------------------------- */
.verify{ background:var(--bg-well); border:1px solid var(--line); border-top:1px solid var(--accent-soft);
  border-radius:var(--r); padding:var(--s-6); box-shadow:inset 0 14px 30px -22px rgba(0,0,0,.9); }
.verify .v-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.verify .v-row{ display:grid; grid-template-columns:128px 1fr; gap:10px; align-items:baseline;
  padding:7px 0; border-bottom:1px solid var(--line-2); }
.verify .v-row:last-of-type{ border-bottom:0; }
.verify .v-k{ font-family:var(--font-brand); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); }
.verify .v-v{ font-family:var(--font-mono); font-size:var(--t-hash); color:var(--ink-dim); word-break:break-all; }
.verify .v-v.match{ color:var(--success); }
.verify .v-steps{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.verify .v-step{ display:flex; align-items:center; gap:10px; font-size:var(--t-sm); color:var(--ink-mute);
  opacity:.45; transition:opacity var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.verify .v-step.is-on{ opacity:1; color:var(--ink); }
.verify .v-step .v-ic{ width:18px; height:18px; flex:none; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-3); font-size:11px; }
.verify .v-step.ok .v-ic{ color:var(--success); border-color:var(--success); box-shadow:0 0 10px -2px var(--success-glow); }
.verify .v-step.bad .v-ic{ color:var(--danger); border-color:var(--danger); }
.verify .v-bar{ height:3px; border-radius:3px; background:var(--line); overflow:hidden; margin:12px 0; }
.verify .v-bar > i{ display:block; height:100%; width:0; background:var(--grad-proof); transition:width var(--dur-4) var(--ease); }
.verify.is-ok{ box-shadow:var(--glow-success); }

/* Three-party verification layers (receipt E-3): the genuine fold above is
   layer 1 ("action is genuine"); these two are HONEST display rows derived from
   receipt fields, injected by AgenticsVerify.renderPartnerLayers only when the
   fields are present. No fields ⇒ nothing renders (the single-receipt verify is
   unchanged). The leaf fold already covers partner_id + agent_certification_version
   cryptographically — these rows surface what those folded fields attest. */
.verify .v-layers{ margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--line-2); display:grid; gap:14px; }
.verify .v-layer{ display:grid; gap:8px; }
.verify .v-layer-head{ display:flex; align-items:baseline; gap:8px; }
.verify .v-layer-n{ font-family:var(--font-brand); font-size:10px; font-weight:600; letter-spacing:.06em;
  color:var(--ink-mute); border:1px solid var(--line-3); border-radius:5px; padding:1px 6px; flex:none; }
.verify .v-layer-t{ font-size:var(--t-sm); font-weight:600; color:var(--ink); }
.verify .v-layer .v-step{ opacity:1; color:var(--ink); }
.verify .v-layer .v-step.derived .v-ic{ color:var(--success); border-color:var(--success); box-shadow:0 0 10px -2px var(--success-glow); }
.verify .v-layer .v-substep{ font-size:var(--t-xs); color:var(--ink-mute); padding-left:28px; }
.verify .v-layer .v-substep .mono{ font-family:var(--font-mono); color:var(--ink-dim); }

/* ---------------------------------------------------------------------------
   14. STICKY TOP NAV (.nav) + mega-menu
   --------------------------------------------------------------------------- */
.nav{ position:sticky; top:0; z-index:var(--z-topbar); height:64px; display:flex; align-items:center;
  gap:26px; padding-inline:max(20px,4vw); border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 60%,transparent); backdrop-filter:blur(16px); transition:background var(--dur-2),box-shadow var(--dur-2); }
.nav.is-scrolled{ background:color-mix(in srgb,var(--bg) 88%,transparent); box-shadow:var(--sh-2); }
@media (prefers-reduced-transparency: reduce){ .nav{ background:var(--bg); backdrop-filter:none; } }
.nav .nav-menu{ display:flex; align-items:center; gap:4px; }
.nav .spacer{ flex:1; }
.nav-link{ display:inline-flex; align-items:center; gap:5px; padding:8px 12px; border-radius:var(--r-sm);
  color:var(--ink-dim); font-size:14px; font-weight:500; cursor:pointer; background:transparent; border:0;
  transition:color var(--dur-1),background var(--dur-1); min-height:40px; }
.nav-link:hover{ color:var(--ink); background:var(--accent-soft); }
.nav-link[aria-expanded="true"]{ color:var(--ink); }
.nav-link .caret{ width:12px; height:12px; transition:transform var(--dur-2) var(--ease); }
.nav-link[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.nav-actions{ display:flex; align-items:center; gap:10px; }

/* mega panel */
.mega{ position:absolute; left:0; right:0; top:64px; padding:max(20px,4vw); padding-block:28px;
  background:var(--elev-3); border-bottom:1px solid var(--line); box-shadow:var(--sh-3);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--dur-3) var(--ease),
  transform var(--dur-3) var(--ease), visibility var(--dur-3); }
.mega.is-open{ opacity:1; visibility:visible; transform:none; }
.mega-inner{ max-width:var(--w-container); margin-inline:auto; }
.mega-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.mega-col h4{ font-family:var(--font-brand); font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-mute); margin-bottom:10px; }
.mega-item{ display:grid; grid-template-columns:24px 1fr; gap:10px; padding:9px 10px; border-radius:var(--r-sm);
  color:var(--ink-dim); transition:background var(--dur-1),color var(--dur-1); }
.mega-item:hover{ background:var(--surface); color:var(--ink); }
.mega-item .mi-ic{ width:22px; height:22px; display:grid; place-items:center; color:var(--accent); }
.mega-item .mi-name{ display:block; font-size:14px; font-weight:600; color:var(--ink); }
.mega-item .mi-desc{ display:block; font-size:12px; color:var(--ink-mute); line-height:1.4; }
.mega-foot{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:22px; padding-top:18px;
  border-top:1px solid var(--line); font-size:13px; }

/* nav glass backdrop overlay for mega */
.nav-scrim{ position:fixed; inset:64px 0 0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden;
  transition:opacity var(--dur-2),visibility var(--dur-2); z-index:calc(var(--z-topbar) - 1); }
.nav-scrim.is-open{ opacity:1; visibility:visible; }

/* mobile */
.nav-burger{ display:none; width:40px; height:40px; border:1px solid var(--line-3); border-radius:var(--r-sm);
  background:transparent; color:var(--ink); cursor:pointer; place-items:center; }
.nav-sheet{ display:none; }  /* hidden on desktop; only an off-canvas drawer at <=900px */
@media (max-width:900px){
  .nav .nav-menu{ display:none; }
  /* Mobile: the nav CTAs collapse into the burger sheet (they live in .sheet-cta).
     Keep ONLY the primary as one tap target so the bar never crowds the burger. */
  .nav-actions > a.btn{ display:none; }
  .nav-actions > a.btn.btn-primary{ display:inline-flex; }
  .nav-actions .btn-demo-text{ display:none; }
  .nav-burger{ display:grid; }
  .nav-sheet{ display:block; position:fixed; inset:64px 0 0; background:var(--bg); z-index:var(--z-drawer);
    overflow-y:auto; padding:20px max(20px,4vw) 40px; transform:translateX(100%);
    transition:transform var(--dur-3) var(--ease); }
  .nav-sheet.is-open{ transform:none; }
  .nav-sheet details{ border-bottom:1px solid var(--line); }
  .nav-sheet summary{ padding:16px 4px; font-size:16px; font-weight:600; cursor:pointer; list-style:none; }
  .nav-sheet summary::-webkit-details-marker{ display:none; }
  .nav-sheet > a{ display:block; padding:16px 4px; font-size:16px; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
  .nav-sheet .mega-item{ grid-template-columns:1fr; }
  .nav-sheet .sheet-cta{ margin-top:24px; display:grid; gap:10px; }
}

/* ---------------------------------------------------------------------------
   15. FOOTER (.footer)
   --------------------------------------------------------------------------- */
.footer{ border-top:1px solid var(--line); background:color-mix(in srgb,var(--elev-2) 60%,transparent);
  padding-block:var(--s-16) var(--s-8); margin-top:var(--s-24); }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; }
.footer h5{ font-family:var(--font-brand); font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-mute); margin-bottom:14px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer a{ color:var(--ink-dim); font-size:13.5px; }
.footer a:hover{ color:var(--ink); }
.footer-brand p{ color:var(--ink-mute); font-size:13px; max-width:34ch; margin-top:12px; }
.footer-bottom{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:var(--s-12);
  padding-top:var(--s-6); border-top:1px solid var(--line); color:var(--ink-mute); font-size:12.5px; }
.footer-bottom .spacer{ flex:1; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   13b. VERIFY-STATE GRAMMAR — the site-wide proof vocabulary
   The single state machine every checkable claim speaks:
     UNVERIFIED  → .pill-proof.is-unverified  (dim grey-violet, no glow)   §13
     VERIFYING   → .pill-proof.is-pending     (breathe; .v-bar aurora sweep)
     VERIFIED    → host .verify.is-ok + .pill-proof (proof-violet glow, ✓)
     BROKEN      → .pill-proof.is-broken       (danger; tampered byte)
   The .pill-proof state classes live in §8; these helpers add the matching
   label dot + the "Verify" affordance so every page wires the same grammar.
   Rule: a "verified" mark is NEVER a static logo — it is a thing the buyer
   watched resolve. Reduced-motion users get the same 4 states as discrete steps.
   --------------------------------------------------------------------------- */
.pill-proof .dot{ width:6px; height:6px; border-radius:50%; background:currentColor;
  box-shadow:0 0 8px currentColor; }
.pill-proof.is-unverified .dot{ box-shadow:none; }
.pill-proof.is-pending .dot{ animation:breathe 2.2s ease-in-out infinite; }
/* proof-state legend: a tiny inline key the buyer can read once and recognise everywhere */
.proof-legend{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.proof-legend .pill-proof{ cursor:default; }

/* ---------------------------------------------------------------------------
   13c. ASSERTION vs. EVIDENCE split (.av-split) — the unanswerable centerpiece
   Promoted from the page-local `.compare` to a named, reused component.
   Left ".they/.av-they" = greyed static "you control this"; right
   ".we/.av-we" = faceted proof-violet "your auditor verifies this without us".
   Pure static HTML/CSS — zero build risk, fully crawlable.
   --------------------------------------------------------------------------- */
.av-split{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); }
@media (max-width:760px){ .av-split{ grid-template-columns:1fr; } }
.av-split > div{ padding:var(--s-8); }
.av-they{ background:var(--surface); border-right:1px solid var(--line); }
@media (max-width:760px){ .av-they{ border-right:0; border-bottom:1px solid var(--line); } }
.av-we{ background:color-mix(in srgb,var(--accent) 6%,transparent);
  border-top:1px solid var(--accent-soft); position:relative; }
.av-we::before{ content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--grad-accent); }
.av-split .av-tag{ font-family:var(--font-brand); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.av-they .av-tag{ color:var(--ink-mute); } .av-we .av-tag{ color:var(--accent); }
.av-split .av-claim{ font-size:var(--t-h4); line-height:1.25; color:var(--ink); margin:0 0 6px; letter-spacing:-.01em; }
.av-they .av-claim{ color:var(--ink-dim); }
.av-split .av-note{ font-size:13px; color:var(--ink-mute); margin:0 0 var(--s-5); }
.av-split ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.av-split li{ display:grid; grid-template-columns:18px 1fr; gap:10px; font-size:14px; color:var(--ink-dim); }
.av-split li svg{ width:16px; height:16px; flex:none; margin-top:2px; }
.av-they li svg{ color:var(--ink-faint); } .av-we li svg{ color:var(--accent); }
.av-they li .mono,.av-we li .mono{ color:var(--ink); }

/* ---------------------------------------------------------------------------
   13d. INDEPENDENCE HAND-OFF (.independence) — "verify on a ledger we don't control"
   The one-click hand-off to a public block explorer that does NOT touch Agentics.
   Chain-agnostic by construction: the copy says "a public blockchain" and the
   explorer URL is data-driven (`data-explorer-url`) so a chain reconciliation
   changes one attribute, never the component.
   --------------------------------------------------------------------------- */
.independence{ border:1px solid var(--line); border-top:1px solid var(--accent-soft);
  border-radius:var(--r-lg); background:var(--bg-well); box-shadow:var(--sh-1);
  padding:clamp(20px,3vw,32px); display:grid; grid-template-columns:1fr auto; gap:var(--s-6);
  align-items:center; }
@media (max-width:760px){ .independence{ grid-template-columns:1fr; } }
.independence .ind-k{ font-family:var(--font-brand); font-size:var(--t-eyebrow); letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:8px; }
.independence h3{ font-size:var(--t-h3); margin:10px 0 6px; letter-spacing:-.02em; }
.independence p{ color:var(--ink-dim); font-size:14.5px; margin:0; max-width:56ch; }
.independence .ind-steps{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; list-style:none; padding:0; }
.independence .ind-steps li{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:12px; color:var(--ink-mute); }
.independence .ind-steps li::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent-glow); flex:none; }
.independence .ind-cta{ display:grid; gap:8px; justify-items:start; }
@media (max-width:760px){ .independence .ind-cta{ justify-items:stretch; } }

/* ---------------------------------------------------------------------------
   13e. VERIFY STATION trim — the live verifier presented as the primary CTA.
   Layers on §13 .verify; adds the "primary action" framing and the paste field.
   --------------------------------------------------------------------------- */
.verify.is-station{ box-shadow:var(--sh-2); border-top:1px solid var(--accent-soft); }
.verify .v-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--line-2); }
.verify .v-foot .v-note{ font-size:var(--t-xs); color:var(--ink-mute); }
.verify .v-tamper{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-mute);
  background:transparent; border:1px solid var(--line-3); border-radius:var(--r-pill); padding:5px 11px;
  cursor:pointer; transition:border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease); }
.verify .v-tamper:hover{ border-color:var(--danger); color:var(--danger); }
.verify .v-tamper.is-on{ border-color:var(--danger); color:var(--danger);
  background:color-mix(in srgb,var(--danger) 10%,transparent); }

/* ---------------------------------------------------------------------------
   16. MISC: marquee, hairline divider, anchor chip, theme toggle
   --------------------------------------------------------------------------- */
.divider{ height:1px; background:var(--line); border:0; margin-block:var(--s-8); }
.marquee{ overflow:hidden; -webkit-mask:var(--grad-mask-r); mask:var(--grad-mask-r); }
.marquee-track{ display:flex; gap:56px; align-items:center; width:max-content; animation:marquee 34s linear infinite; }
.marquee-track > *{ flex:none; color:var(--ink-mute); font-family:var(--font-brand); font-size:13px;
  text-transform:uppercase; letter-spacing:.1em; opacity:.7; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.anchor-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border:1px solid var(--line);
  border-radius:var(--r-pill); background:color-mix(in srgb,var(--success) 6%,transparent); font-size:12px; color:var(--ink-dim); }
.anchor-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success-glow); }
.theme-toggle{ width:36px; height:36px; border:1px solid var(--line-3); border-radius:var(--r-sm); background:transparent;
  color:var(--ink-dim); cursor:pointer; display:grid; place-items:center; }
.theme-toggle:hover{ color:var(--ink); border-color:var(--accent); }

/* ---------------------------------------------------------------------------
   17. PLATFORM SHOWCASE (.platform-showcase) — "See the platform"
   A tabbed device-frame that shows the real console surfaces as polished
   static mockups, recreated from the shared tokens + the proof color axis
   (ember/warm/lock). ONE tab — Proof Ledger — embeds the genuinely LIVE
   `.verify` widget (window.AgenticsVerify on the committed sample receipt):
   it is never faked. The other tabs are honest "product preview" mockups.
   The proof glow is reserved for anchored/locked elements only.

   Proof axis aliases (the console uses --os-proof-*; here we map onto the
   marketing token system so the look matches without redefining a token):
     lock  (anchored / verifiable)  = --accent / --info family + glow
     warm  (settling)               = --warn family
     ember (emitted only)           = --danger family
   --------------------------------------------------------------------------- */
.platform-showcase{ --ps-lock:var(--info); --ps-lock-glow:var(--info-glow);
  --ps-warm:var(--warn); --ps-ember:var(--danger);
  border:1px solid var(--line); border-top:1px solid var(--accent-soft);
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-2);
  overflow:hidden; position:relative; }
.platform-showcase::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--grad-proof); opacity:.55; }

/* --- the app/browser chrome (our aesthetic, not a competitor's) --- */
.ps-chrome{ display:flex; align-items:center; gap:12px; padding:11px 16px;
  border-bottom:1px solid var(--line); background:var(--elev-2); }
.ps-dots{ display:flex; gap:6px; flex:none; }
.ps-dots i{ width:10px; height:10px; border-radius:50%; background:var(--line-3); display:block; }
.ps-addr{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:6px 12px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--bg-well);
  font-family:var(--font-mono); font-size:12px; color:var(--ink-mute); }
.ps-addr svg{ width:12px; height:12px; flex:none; color:var(--ps-lock); }
.ps-addr .ps-host{ color:var(--ink-dim); } .ps-addr .ps-path{ color:var(--ink); }
.ps-chrome .ps-env{ flex:none; }

/* --- tab bar --- */
.ps-tabs{ display:flex; gap:2px; padding:8px 10px 0; overflow-x:auto; background:var(--elev-2);
  border-bottom:1px solid var(--line); scrollbar-width:none; }
.ps-tabs::-webkit-scrollbar{ display:none; }
.ps-tab{ border:0; background:transparent; color:var(--ink-mute); cursor:pointer; white-space:nowrap;
  font:600 13px/1 var(--font-sans); letter-spacing:.005em; padding:11px 16px 13px;
  border-radius:var(--r-sm) var(--r-sm) 0 0; position:relative; display:inline-flex; align-items:center; gap:8px;
  transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.ps-tab:hover{ color:var(--ink-dim); background:var(--accent-soft); }
.ps-tab .ps-tic{ width:15px; height:15px; flex:none; opacity:.8; }
.ps-tab[aria-selected="true"]{ color:var(--ink); background:var(--surface); }
.ps-tab[aria-selected="true"]::after{ content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px;
  border-radius:2px 2px 0 0; background:var(--accent); box-shadow:0 0 12px -2px var(--accent-glow); }
.ps-tab .ps-livedot{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--ps-lock);
  box-shadow:0 0 8px var(--ps-lock-glow); }

/* --- stage (where the framed mockup renders) --- */
.ps-stage{ position:relative; background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent) 5%,transparent), transparent 60%),
    var(--bg); padding:clamp(16px,2.4vw,26px); min-height:520px; }
.ps-panel{ display:none; }
.ps-panel.is-active{ display:block; animation:ps-fade var(--dur-3) var(--ease); }
@keyframes ps-fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ps-panel:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--r); }

/* a mockup-only honesty chip */
.ps-mockflag{ position:absolute; top:14px; right:16px; z-index:2; }
@media (max-width:560px){ .ps-mockflag{ position:static; margin-bottom:12px; display:inline-flex; } }

/* --- shared console-surface card primitives (mockup) --- */
.ps-grid{ display:grid; gap:14px; }
.ps-card{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  box-shadow:var(--sh-1); overflow:hidden; }
.ps-card-head{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); }
.ps-card-head .ps-h-title{ font-family:var(--font-brand); font-size:10px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--ink-mute); display:inline-flex; align-items:center; gap:8px; }
.ps-card-head .ps-h-title .ps-lockdot{ width:5px; height:5px; border-radius:50%; background:var(--ps-lock);
  box-shadow:0 0 8px var(--ps-lock-glow); flex:none; }
.ps-card-head .spacer{ flex:1; }
.ps-card-body{ padding:14px; }
.ps-mini{ font-family:var(--font-brand); font-size:10px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-mute); }

/* KPI strip */
.ps-kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media (max-width:760px){ .ps-kpis{ grid-template-columns:repeat(2,1fr); } }
.ps-kpi{ border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); padding:12px 13px;
  position:relative; overflow:hidden; }
.ps-kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.ps-kpi.is-lock::before{ background:var(--ps-lock); } .ps-kpi.is-warn::before{ background:var(--ps-warm); }
.ps-kpi.is-danger::before{ background:var(--ps-ember); }
.ps-kpi .ps-k-lbl{ font-family:var(--font-brand); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-mute); }
.ps-kpi .ps-k-val{ font-family:var(--font-brand); font-weight:700; font-size:1.5rem; letter-spacing:-.02em;
  margin-top:5px; font-variant-numeric:tabular-nums; color:var(--ink); }

/* command-center two-up (heatmap + spine) */
.ps-cc-2up{ grid-template-columns:1.55fr 1fr; }
@media (max-width:880px){ .ps-cc-2up{ grid-template-columns:1fr; } }
.ps-cc-3up{ grid-template-columns:.8fr 1.1fr 1.1fr; }
@media (max-width:880px){ .ps-cc-3up{ grid-template-columns:1fr; } }

/* 7x24 heat map */
.ps-heat{ display:grid; grid-template-columns:30px 1fr; gap:8px; align-items:center; }
.ps-heat-rows{ display:grid; gap:3px; font-family:var(--font-mono); font-size:10px; color:var(--ink-mute);
  text-align:right; }
.ps-heat-grid{ display:grid; grid-template-rows:repeat(7,1fr); gap:3px; }
.ps-heat-row{ display:grid; grid-template-columns:repeat(24,1fr); gap:3px; }
.ps-cell{ aspect-ratio:1; border-radius:2px; background:color-mix(in srgb,var(--accent) 6%,transparent); }
.ps-heat-x{ grid-column:2; display:grid; grid-template-columns:repeat(8,1fr); margin-top:6px;
  font-family:var(--font-mono); font-size:9px; color:var(--ink-faint); }
.ps-heat-legend{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:10px; color:var(--ink-mute); }
.ps-heat-legend .sw{ width:12px; height:12px; border-radius:2px; }

/* ledger spine (vertical chain of receipts) */
.ps-spine{ position:relative; display:flex; flex-direction:column; gap:2px; }
.ps-spine::before{ content:""; position:absolute; left:6px; top:10px; bottom:10px; width:1px;
  background:linear-gradient(180deg,var(--ps-lock),color-mix(in srgb,var(--ps-lock) 25%,transparent)); opacity:.5; }
.ps-snode{ display:grid; grid-template-columns:14px 1fr; gap:10px; align-items:start; padding:7px 0; position:relative; }
.ps-shape{ width:13px; height:13px; flex:none; margin-top:2px; z-index:1; }
.ps-snode .ps-s-hash{ font-family:var(--font-mono); font-size:11px; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ps-snode.is-lock .ps-s-hash{ color:var(--ps-lock); }
.ps-snode.is-warm .ps-s-hash{ color:var(--ps-warm); }
.ps-snode.is-ember .ps-s-hash{ color:var(--ink-mute); }
.ps-snode .ps-s-meta{ display:flex; align-items:center; gap:6px; margin-top:2px;
  font-family:var(--font-mono); font-size:9.5px; color:var(--ink-mute); }
.ps-snode .ps-s-state{ font-weight:600; letter-spacing:.04em; }
.ps-snode.is-lock .ps-s-state{ color:var(--ps-lock); }
.ps-snode.is-warm .ps-s-state{ color:var(--ps-warm); }
.ps-snode.is-ember .ps-s-state{ color:var(--ink-mute); }

/* score ring */
.ps-ring-wrap{ display:flex; align-items:center; gap:16px; }
.ps-ring{ width:108px; height:108px; flex:none; position:relative; display:grid; place-items:center; }
.ps-ring svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.ps-ring .ps-ring-c{ text-align:center; }
.ps-ring .ps-ring-n{ font-family:var(--font-brand); font-weight:700; font-size:1.7rem; letter-spacing:-.02em;
  color:var(--ps-lock); line-height:1; font-variant-numeric:tabular-nums; }
.ps-ring .ps-ring-l{ font-family:var(--font-brand); font-size:9px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-mute); margin-top:3px; }
.ps-ring-break{ display:grid; gap:7px; flex:1; }
.ps-ring-break .rb{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; }
.ps-ring-break .rb b{ font-family:var(--font-mono); color:var(--ink); font-weight:500; }
.ps-ring-break .rb span{ color:var(--ink-mute); }

/* provider pool bars */
.ps-bars{ display:grid; gap:9px; }
.ps-bar{ display:grid; grid-template-columns:84px 1fr 38px; gap:10px; align-items:center; font-size:12px; }
.ps-bar .ps-bar-n{ color:var(--ink-dim); font-family:var(--font-mono); font-size:11.5px; }
.ps-bar .ps-bar-track{ height:8px; border-radius:var(--r-pill); background:var(--bg-well); overflow:hidden; border:1px solid var(--line-2); }
.ps-bar .ps-bar-fill{ height:100%; border-radius:var(--r-pill); background:var(--grad-accent); }
.ps-bar .ps-bar-v{ font-family:var(--font-mono); font-size:11px; color:var(--ink-mute); text-align:right; }

/* guardrail verdict rows (safety mesh) */
.ps-verdicts{ display:grid; gap:9px; }
.ps-verdict{ display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); padding:11px 13px; }
.ps-verdict .ps-vd-ic{ width:26px; height:26px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none; }
.ps-verdict .ps-vd-ic svg{ width:15px; height:15px; }
.ps-verdict.pass .ps-vd-ic{ color:var(--success); background:color-mix(in srgb,var(--success) 12%,transparent); }
.ps-verdict.flag .ps-vd-ic{ color:var(--warn); background:color-mix(in srgb,var(--warn) 12%,transparent); }
.ps-verdict.block .ps-vd-ic{ color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); }
.ps-verdict .ps-vd-name{ font-size:13.5px; color:var(--ink); font-weight:500; }
.ps-verdict .ps-vd-sub{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-mute); margin-top:2px; }
.ps-verdict .ps-vd-tag{ font-family:var(--font-brand); font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  padding:3px 9px; border-radius:var(--r-pill); border:1px solid var(--line); flex:none; }
.ps-verdict.pass .ps-vd-tag{ color:var(--success); border-color:color-mix(in srgb,var(--success) 40%,transparent);
  background:color-mix(in srgb,var(--success) 8%,transparent); }
.ps-verdict.flag .ps-vd-tag{ color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,transparent); }
.ps-verdict.block .ps-vd-tag{ color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent);
  background:color-mix(in srgb,var(--danger) 8%,transparent); }

/* gateway routing diagram */
.ps-route{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; }
@media (max-width:680px){ .ps-route{ grid-template-columns:1fr; } }
.ps-route .ps-rt-col{ display:grid; gap:8px; }
.ps-route .ps-node{ border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-well);
  padding:9px 12px; font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); display:flex;
  align-items:center; gap:8px; }
.ps-route .ps-node.hub{ border-color:var(--accent-soft); color:var(--accent); background:var(--surface);
  box-shadow:0 0 24px -10px var(--accent-glow); justify-content:center; text-align:center; padding:16px 14px; }
.ps-route .ps-node .pdot{ width:6px; height:6px; border-radius:50%; flex:none; }
.ps-route .ps-rt-arrow{ display:grid; place-items:center; color:var(--ink-faint); }
.ps-route .ps-rt-arrow svg{ width:22px; height:22px; }
@media (max-width:680px){ .ps-route .ps-rt-arrow{ transform:rotate(90deg); } }

/* bureau constellation (reputation star-map) */
.ps-bureau{ position:relative; }
.ps-bureau svg{ display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg-well); }
.ps-bureau-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:11px; font-size:11px; color:var(--ink-mute);
  align-items:center; }
.ps-bureau-legend .lg{ display:inline-flex; align-items:center; gap:7px; }
.ps-bureau-legend .lg .d{ width:7px; height:7px; border-radius:50%; }
.ps-bureau-legend .lg .d.lock{ background:var(--ps-lock); box-shadow:0 0 8px var(--ps-lock-glow); }
.ps-bureau-legend .lg .d.ember{ background:var(--ps-ember); }

/* the live Proof Ledger tab: anchored rows + the real verify widget */
.ps-ledger-2up{ grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:880px){ .ps-ledger-2up{ grid-template-columns:1fr; } }
.ps-receipts{ display:grid; gap:0; }
.ps-receipt{ display:grid; grid-template-columns:14px 1fr auto; gap:11px; align-items:center;
  padding:11px 4px; border-bottom:1px solid var(--line-2); }
.ps-receipt:last-child{ border-bottom:0; }
.ps-receipt .ps-rc-hash{ font-family:var(--font-mono); font-size:12px; color:var(--ink); }
.ps-receipt .ps-rc-meta{ font-family:var(--font-mono); font-size:10px; color:var(--ink-mute); margin-top:2px; }
.ps-live-note{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:12px; color:var(--ink-dim); }
.ps-live-note .ps-livedot{ width:7px; height:7px; border-radius:50%; background:var(--ps-lock);
  box-shadow:0 0 8px var(--ps-lock-glow); flex:none; }

/* entrance animation (gated by motion.js adding .reveal-ready on <html>) */
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
.reveal{ opacity:1; }
html.reveal-ready .reveal{ opacity:0; transform:translateY(12px); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
html.reveal-ready .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html.reveal-ready .reveal{ opacity:1; transform:none; }
  .marquee-track{ animation:none; }
}

/* Canonical nav (drift fix, 2026-06-21): hide the legacy extra top-level items
   pre-render so there is no flash before site.js collapses the nav to the v2
   flat set (Product / Solutions / Developers / Pricing / Trust). */
.nav-menu a.nav-link[href="/product/operator/"],
.nav-menu a.nav-link[href="/partners/"],
.nav-menu a.nav-link[href="/docs/"]{display:none}
.nav-menu .nav-link[data-mega] .caret{display:none}