/* ============================================================
   BUDGENT — "SIGNAL: The Authority Broadsheet"
   editorial-protocol paper + dark vault console
   ============================================================ */

:root {
  /* ---- Paper / structure (the broadsheet) ---- */
  --paper:        #0B0814;
  --paper-2:      #130E22;
  --paper-3:      #1A1330;
  --ink:          #ECE7FA;
  --ink-2:        #A99CC9;
  --hairline:     #2B2348;

  /* ---- Vault (the machine / on-chain side) ---- */
  --vault:        #0E0A1A;
  --vault-2:      #160F28;
  --vault-inset:  #0A0714;
  --vault-line:   #2C2350;
  --vault-text:   #ECE7FA;
  --vault-text-2: #8E83AE;

  /* ---- Semantic status triad + brand (violet) ---- */
  --signal:       #8B5CF6;
  --signal-soft:  #211A3D;
  --verified:     #34D399;
  --verified-soft:#16261F;
  --hold:         #E0A23B;
  --hold-soft:    #2A2114;
  --revert:       #F2685C;
  --revert-soft:  #2A1614;

  /* ---- spacing ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* ---- radii ---- */
  --r-0: 0; --r-1: 2px; --r-2: 4px;

  /* ---- shadows (letterpress, no glow) ---- */
  --press: 2px 2px 0 rgba(0,0,0,0.55);
  --press-vault: 2px 2px 0 #000;

  --maxw: 1280px;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* the `hidden` attribute must always win, even over author display:flex/grid */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 64px; overflow-x: clip; }
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 32px; width: 100%; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(1.7rem, 3.2vw, 3rem); letter-spacing: -0.02em; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 var(--sp-4); }
strong, b { font-weight: 600; }
em { font-style: italic; }
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }

.brk { color: var(--signal); font-family: var(--font-mono); font-weight: 600; }

/* numbers + technical labels in mono with tabular figures */
.kicker, .mono, code, pre, input, select, button, .ro-item, .util-inner,
.statline, .pane-kick, .lc-chip { font-feature-settings: "tnum" 1; }

.kicker {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  margin: 0 0 var(--sp-4);
}
.kicker .brk, .kicker { } /* leave bracket inline */

/* ---------- focus ---------- */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ============================================================
   UTILITY BAR + NAV
   ============================================================ */
.utilitybar {
  background: color-mix(in srgb, var(--paper-2) 80%, transparent);
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(4px);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.util-inner { display: flex; align-items: center; gap: 8px; height: 30px; flex-wrap: wrap; overflow: hidden; }
.util-mark { font-weight: 600; color: var(--ink); }
.util-mark .brk { color: var(--signal); }
.util-sep, .util-dot { color: var(--hairline); }
.util-edition { margin-left: auto; color: var(--hold); }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--ink);
}
.nav-inner { display: flex; align-items: center; gap: var(--sp-5); height: 64px; }
.logo { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--ink); letter-spacing: -0.02em; }
.logo:hover { text-decoration: none; }
.logo .brk { font-size: 1.1rem; }
.nav-links { display: flex; gap: var(--sp-5); margin-left: var(--sp-4); flex: 1; }
.nav-links a {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-2);
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-cta { margin-left: auto; }

/* ============================================================
   BUTTONS / CHIPS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; text-transform: uppercase;
  font-size: 0.75rem; letter-spacing: 0.04em;
  padding: 12px 20px; border: 1px solid var(--signal); border-radius: var(--r-1);
  background: var(--signal); color: var(--paper); cursor: pointer;
  transition: transform .08s ease-out, box-shadow .08s ease-out, background .12s ease-out;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--press); text-decoration: none; }
.btn:active { transform: translate(0, 0); box-shadow: none; }
.btn-sm { padding: 8px 14px; font-size: 0.68rem; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { box-shadow: var(--press); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* on dark */
.btn-on-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-on-dark:hover { box-shadow: var(--press-vault); }
.btn-ghost-on-dark { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn-ghost-on-dark:hover { box-shadow: var(--press-vault); }

/* vault-side buttons */
.btn-vault { background: var(--signal); color: var(--paper); border-color: var(--signal); }
.btn-vault:hover { box-shadow: var(--press-vault); }
.btn-ghost-vault {
  background: transparent; color: var(--vault-text); border: 1px solid var(--vault-line);
  font-family: var(--font-mono); font-weight: 600; text-transform: uppercase;
  font-size: 0.7rem; letter-spacing: 0.04em; padding: 10px 16px; border-radius: var(--r-1);
  cursor: pointer; transition: transform .08s ease-out, box-shadow .08s ease-out, border-color .12s;
}
.btn-ghost-vault:hover { transform: translate(-1px,-1px); box-shadow: var(--press-vault); border-color: var(--vault-text-2); }
.btn-ghost-vault:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  padding-top: var(--sp-8); padding-bottom: var(--sp-8);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5) var(--sp-7); align-items: end; }
.hero-text { min-width: 0; }
.hero .logo { display: inline-block; font-size: 1.3rem; margin-bottom: var(--sp-5); color: var(--ink); }
.hero .logo:hover { text-decoration: none; }

/* ---- Etheral Shadow background (vanilla port) — global, light, fixed ---- */
.etheral {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  --etheral-color: rgba(139, 92, 246, 0.20);
  background:
    radial-gradient(70% 60% at 18% 8%, rgba(124,77,255,0.22) 0%, rgba(124,77,255,0) 60%),
    radial-gradient(60% 55% at 88% 92%, rgba(91,60,200,0.18) 0%, rgba(91,60,200,0) 60%),
    radial-gradient(125% 125% at 50% 30%, #160F2A 0%, #0C0818 46%, #070510 100%);
}
/* every content layer sits above the fixed background */
.utilitybar, main, .footer { position: relative; z-index: 1; }
.etheral-svg { position: absolute; width: 0; height: 0; }
.etheral-distort { position: absolute; inset: -100px; filter: url(#etheral-distort) blur(4px); }
.etheral-mask {
  position: absolute; inset: 0;
  background-color: var(--etheral-color);
  -webkit-mask-image: url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png');
  mask-image: url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png');
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.etheral-noise {
  position: absolute; inset: 0;
  background-image: url('https://framerusercontent.com/images/g0QcWrxr87K0ufOxIUFBakwYA8.png');
  background-size: 220px; background-repeat: repeat;
  opacity: 0.16; mix-blend-mode: multiply;
}
.hero-h1 {
  font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 5.4rem);
  letter-spacing: -0.03em; line-height: 0.96;
  margin-bottom: var(--sp-5);
  /* grid-break #1: bleed past the right margin on wide screens */
  margin-right: -3vw;
}
.hero-plain {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem); line-height: 1.55;
  background: var(--signal-soft); color: var(--ink);
  border-left: 3px solid var(--signal);
  padding: var(--sp-4) var(--sp-5); max-width: 720px;
  margin-bottom: var(--sp-5); border-radius: var(--r-1);
}
.hero-plain strong { color: var(--ink); }
.hero-deck {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5;
  max-width: 64ch; color: var(--ink); margin-bottom: var(--sp-6);
}
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }

.dispatch {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-1);
  padding: 8px 14px; background: color-mix(in srgb, var(--paper-2) 82%, transparent); white-space: nowrap;
  backdrop-filter: blur(3px);
}
.dispatch-tag {
  background: var(--ink); color: var(--paper); padding: 2px 8px; border-radius: var(--r-1);
  font-weight: 600; letter-spacing: 0.1em; font-size: 0.625rem;
}
.dispatch-body { transition: opacity .35s ease-out; }

.statline { list-style: none; display: flex; gap: var(--sp-5); padding: 0; margin: 0; flex-wrap: wrap; }
.statline li {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-2);
}
.statline .brk { color: var(--signal); }

/* ============================================================
   SECTIONS (general)
   ============================================================ */
.section { padding-block: var(--sp-9); border-top: 1px solid var(--hairline); }
.sec-head { max-width: 880px; margin-bottom: var(--sp-7); }
.sec-head-center { max-width: 760px; margin-inline: auto; text-align: center; }
.sec-lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.5; color: var(--ink); max-width: 64ch; margin: var(--sp-4) auto 0; }
.sec-head:not(.sec-head-center) .sec-lead { margin-left: 0; }
.body { max-width: 60ch; }

/* ---------- 02 three failures ---------- */
.failgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--hairline); border-radius: var(--r-2); overflow: hidden; }
.failcard { padding: var(--sp-6); border-right: 1px solid var(--hairline); position: relative; }
.failcard:last-child { border-right: none; }
.fail-idx { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 600; color: var(--hairline); display: block; line-height: 1; margin-bottom: var(--sp-4); }
.failcard h3 { margin-bottom: var(--sp-3); }
.failcard p { font-size: 0.98rem; }
.fail-answer { font-family: var(--font-mono); font-size: 0.78rem; color: var(--signal); font-weight: 500; line-height: 1.5; margin-bottom: 0; }

/* ---------- 03 split (pillar I) ---------- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); align-items: start; }
.split-text .rulelist { list-style: none; padding: 0; margin: var(--sp-5) 0 0; }
.rulelist li { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5; padding: 10px 0; border-top: 1px solid var(--hairline); }
.rulelist li b { color: var(--ink); }

.split-panel { position: sticky; top: 88px; }
.vault-panel { background: var(--vault); border-radius: var(--r-2); border: 1px solid var(--vault-line); overflow: hidden; color: var(--vault-text); }
.vault-titlebar { background: var(--vault-2); border-bottom: 1px solid var(--vault-line); padding: 10px 14px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--vault-text-2); }
.flowdiagram { padding: var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.flow-node { width: 100%; max-width: 320px; text-align: center; border: 1px solid var(--vault-line); border-radius: var(--r-1); padding: var(--sp-4); background: var(--vault-inset); }
.flow-node .flow-role { display: block; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.06em; font-size: 0.85rem; }
.flow-node .flow-sub { display: block; font-family: var(--font-mono); font-size: 0.65rem; color: var(--vault-text-2); margin-top: 4px; }
.flow-node.vault { border-color: var(--signal); }
.flow-arrow { font-family: var(--font-mono); font-size: 0.65rem; color: var(--vault-text-2); }
.flow-split { display: flex; gap: var(--sp-5); margin-top: var(--sp-2); }
.flow-verdict { font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; padding: 6px 12px; border-radius: var(--r-1); }
.flow-verdict.allow { color: var(--paper); background: var(--verified); }
.flow-verdict.revert { color: var(--paper); background: var(--revert); }
.flow-caption { font-family: var(--font-mono); font-size: 0.65rem; color: var(--vault-text-2); line-height: 1.6; margin: var(--sp-4) 0 0; text-align: center; }

/* ---------- 04 comparison table ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-2); }
.cmp { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.8rem; min-width: 640px; }
.cmp th, .cmp td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.cmp thead th { text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-2); background: var(--paper-2); position: sticky; top: 0; }
.cmp tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.cmp tbody tr:nth-child(even) td, .cmp tbody tr:nth-child(even) th { background: var(--paper-3); }
.col-x402 { color: var(--ink-2); }
.cmp td.col-x402 { color: color-mix(in srgb, var(--revert) 70%, var(--ink)); }
.cmp .col-bdgt { color: var(--ink); }
.cmp thead .col-bdgt { color: var(--signal); }

.lifecycle-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-6) 0; justify-content: center; }
.lc-chip { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; border: 1px solid var(--hairline); border-radius: var(--r-1); padding: 6px 10px; background: var(--paper-2); }
.lc-sep { color: var(--ink-2); font-family: var(--font-mono); }

.intent-example { border: 1px solid var(--hairline); border-radius: var(--r-2); overflow: hidden; max-width: 760px; margin: 0 auto; }
.ie-head { background: var(--paper-2); border-bottom: 1px solid var(--hairline); padding: 10px 16px; font-family: var(--font-mono); font-size: 0.72rem; }
.ie-note { color: var(--ink-2); }
.ie-foot { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2); padding: 12px 16px; border-top: 1px solid var(--hairline); margin: 0; line-height: 1.5; }

/* code blocks */
.code-block { margin: 0; padding: var(--sp-4) var(--sp-5); background: var(--vault); color: var(--vault-text); overflow-x: auto; }
.code-block code { font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.65; white-space: pre; color: var(--vault-text); }

/* ---------- 05 context plates ---------- */
.ctx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.ctx-plate { border: 1px solid var(--hairline); border-radius: var(--r-2); padding: var(--sp-5); background: var(--paper); }
.plate-kick { color: var(--signal); margin-bottom: var(--sp-3); }
.plate-desc { font-size: 0.95rem; color: var(--ink-2); }
.plate-mock { border-top: 1px solid var(--hairline); padding-top: var(--sp-4); margin-top: var(--sp-3); }
.plate-mock.mono { font-family: var(--font-mono); font-size: 0.72rem; }
.mock-domcard { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.mock-domcard:last-child { border-bottom: none; }
.mc-total { font-family: var(--font-mono); font-weight: 600; color: var(--verified); grid-row: span 2; align-self: center; }
.mc-dom { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; }
.mc-meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-2); }
.mock-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hairline); align-items: center; }
.mock-line { padding: 4px 0; }
.mock-line.dim { color: var(--ink-2); }
.mock-export { margin-top: 8px; color: var(--signal); }
.tag { font-size: 0.6rem; padding: 2px 6px; border-radius: var(--r-1); font-weight: 600; letter-spacing: 0.04em; }
.tag-ok { background: var(--verified-soft); color: var(--verified); }
.tag-bad { background: var(--revert-soft); color: var(--revert); }

.memo-strip {
  display: flex; align-items: stretch; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--r-2);
  padding: var(--sp-5); margin-top: var(--sp-6);
}
.memo-col { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; }
.memo-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.memo-col code { font-family: var(--font-mono); font-size: 0.78rem; }
.memo-link { align-self: center; color: var(--ink-2); font-family: var(--font-mono); }
.hl-a { background: var(--signal-soft); padding: 1px 4px; border-radius: var(--r-1); }
.hl-b { background: var(--hold-soft); padding: 1px 4px; border-radius: var(--r-1); }

/* ============================================================
   06 — THE AUTHORITY CONSOLE
   ============================================================ */
/* hero CTA spacing in compact hero */
.hero .hero-cta { margin-top: var(--sp-5); margin-bottom: 0; }

/* ---- HOW IT WORKS steps (minera-style numbered) ---- */
.section { padding-block: var(--sp-7); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--hairline); border-radius: var(--r-2); overflow: hidden; }
.step { padding: var(--sp-5); border-right: 1px solid var(--hairline); }
.step:last-child { border-right: none; }
.step-n { font-family: var(--font-mono); font-weight: 600; font-size: 1.8rem; color: var(--hairline); display: block; margin-bottom: var(--sp-3); }
.step h3 { font-size: 1.05rem; margin-bottom: var(--sp-2); }
.step p { font-size: 0.95rem; margin: 0; color: var(--ink-2); }

/* ---- WHAT THE CHAIN ENFORCES ---- */
.enforce-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--sp-6); align-items: start; }
.enforce-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--hairline); border-radius: var(--r-2); overflow: hidden; font-family: var(--font-mono); font-size: 0.85rem; }
.enforce-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: 13px 18px; border-bottom: 1px solid var(--hairline); }
.enforce-list li:last-child { border-bottom: none; }
.enforce-list li:nth-child(even) { background: var(--paper-3); }
.enforce-list b.bad { color: var(--revert); }
.enforce-list b.hold { color: var(--hold); }
.enforce-note { border-left: 3px solid var(--signal); background: var(--signal-soft); padding: var(--sp-5); border-radius: var(--r-1); }
.enforce-note p { font-family: var(--font-body); }
.enforce-note p:last-child { margin: 0; font-size: 0.97rem; }
.enforce-note .plate-kick { color: var(--signal); }

.console-section { padding-top: var(--sp-5); padding-bottom: var(--sp-7); border-top: 1px solid var(--hairline); }

/* DARK-VIOLET CONSOLE THEME — remap the vault palette within the console + drawer */
#console {
  --vault: #120C22;        /* console base — dark violet panel */
  --vault-2: #1A1330;      /* headers / raised strips */
  --vault-inset: #0C0818;  /* recessed screens, inputs, ledger rows */
  --vault-line: #2C2350;   /* hairlines */
  --vault-text: #ECE7FA;   /* primary text */
  --vault-text-2: #8E83AE; /* muted text */
  --press-vault: 2px 2px 0 #000;
}
.console { box-shadow: 0 1px 0 var(--hairline); }
.console-intro { margin-bottom: var(--sp-5); max-width: 760px; }
.console-line { font-size: 1.05rem; line-height: 1.5; color: var(--ink); margin: 0; max-width: 64ch; }
.cl-dim { color: var(--ink-2); }

.console {
  max-width: var(--maxw); margin: 0 auto; width: calc(100% - 0px);
  background: var(--vault); color: var(--vault-text);
  border: 1px solid var(--vault-line); border-radius: var(--r-2); overflow: hidden;
}
@media (min-width: 1340px) { .console { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); border-radius: 0; border-left: none; border-right: none; } }

.console-titlebar {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--vault-2); border-bottom: 1px solid var(--vault-line);
  padding: 10px 16px; font-family: var(--font-mono); font-size: 0.72rem;
}
.ct-dots { display: flex; gap: 6px; }
.ct-dots i { width: 9px; height: 9px; border: 1px solid var(--vault-line); border-radius: 50%; display: block; }
.ct-title { color: var(--vault-text); font-weight: 500; }
.ct-sim { color: var(--hold); margin-left: auto; letter-spacing: 0.04em; }

/* mode switch (DEMO | LIVE) — compact segmented control in the titlebar */
#modeSwitch { margin-left: var(--sp-3); }
#modeSwitch button { padding: 4px 9px; font-size: 0.6rem; }

.readout {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  padding: 12px 16px; border-bottom: 1px solid var(--vault-line);
  font-family: var(--font-mono); font-size: 0.74rem; background: var(--vault-inset);
}
.ro-item { color: var(--vault-text-2); cursor: help; }
.ro-item b { color: var(--vault-text); font-weight: 600; }
.ro-mini { font-size: 0.62rem; color: var(--vault-text-2); }
#ro-delegate.is-revoked { color: var(--revert); }
.ro-flash { animation: roflash .5s ease-out; }
@keyframes roflash { 0% { color: var(--signal); } 100% {} }

.orient { font-family: var(--font-mono); font-size: 0.72rem; color: var(--vault-text-2); padding: 10px 16px; margin: 0; border-bottom: 1px solid var(--vault-line); }

/* pane tabs (mobile) */
.pane-tabs { display: none; border-bottom: 1px solid var(--vault-line); background: var(--vault-2); }
.pane-tab { flex: 1; background: none; border: none; border-right: 1px solid var(--vault-line); color: var(--vault-text-2); font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; padding: 12px; cursor: pointer; }
.pane-tab:last-child { border-right: none; }
.pane-tab.is-active { color: var(--vault-text); background: var(--vault-inset); border-bottom: 2px solid var(--signal); }

.panes { display: grid; grid-template-columns: 27% 39% 34%; }
.pane { padding: var(--sp-5); border-right: 1px solid var(--vault-line); min-height: 480px; }
.pane:last-child { border-right: none; }
.pane-kick { font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--vault-text-2); margin: 0 0 var(--sp-4); }

/* ---- fields ---- */
.field { display: block; margin-bottom: var(--sp-4); }
.field-label { display: block; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vault-text-2); margin-bottom: 6px; }
.field-help { display: block; font-family: var(--font-mono); font-size: 0.62rem; color: var(--vault-text-2); margin-top: 6px; line-height: 1.4; }
input[type="number"], input[type="text"], select, .chip-input {
  width: 100%; background: var(--vault-inset); color: var(--vault-text);
  border: 1px solid var(--vault-line); border-radius: var(--r-1);
  font-family: var(--font-mono); font-size: 0.8rem; padding: 9px 10px;
}
select { cursor: pointer; }
.field-inline { display: flex; flex-direction: column; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.68rem;
  border: 1px solid var(--vault-line); border-radius: var(--r-1);
  padding: 4px 4px 4px 8px; background: var(--vault-2); color: var(--vault-text);
}
.chip.block { border-color: color-mix(in srgb, var(--revert) 50%, var(--vault-line)); }
.chip .chip-x { background: none; border: none; color: var(--vault-text-2); cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0 2px; }
.chip .chip-x:hover { color: var(--revert); }

/* toggle */
.toggle-field { display: flex; align-items: center; gap: var(--sp-4); }
.toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 0; }
.toggle-track { width: 44px; height: 24px; background: var(--verified); border-radius: var(--r-1); position: relative; transition: background .1s steps(1); border: 1px solid color-mix(in srgb, var(--verified) 60%, #000); }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--paper); border-radius: 1px; transition: left .1s steps(2); }
.toggle[aria-checked="false"] .toggle-track { background: var(--revert); border-color: color-mix(in srgb, var(--revert) 60%, #000); }
.toggle[aria-checked="false"] .toggle-knob { left: 22px; }
.toggle-state { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--verified); }
.toggle[aria-checked="false"] .toggle-state { color: var(--revert); }

/* json preview */
.json-preview { margin-top: var(--sp-5); border: 1px solid var(--vault-line); border-radius: var(--r-1); overflow: hidden; }
.json-head, .json-foot { font-family: var(--font-mono); font-size: 0.62rem; color: var(--vault-text-2); padding: 8px 10px; background: var(--vault-2); }
.json-foot { border-top: 1px solid var(--vault-line); }
.json-body { margin: 0; padding: 10px; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.55; color: var(--vault-text); background: var(--vault-inset); white-space: pre; overflow-x: auto; }
.json-body .jk { color: var(--vault-text-2); }
.json-body .jv { color: var(--signal); }
.json-body .jn { color: var(--verified); }
.json-pulse { animation: jpulse .6s ease-out; }
@keyframes jpulse { 0% { background: color-mix(in srgb, var(--signal) 35%, var(--vault-inset)); } 100% { background: var(--vault-inset); } }

/* ---- pane 2 run ---- */
.run-controls { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.run-buttons { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.run-toggles { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--vault-line); border-radius: var(--r-1); overflow: hidden; }
.seg button { background: var(--vault-inset); color: var(--vault-text-2); border: none; border-right: 1px solid var(--vault-line); font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 7px 12px; cursor: pointer; }
.seg button:last-child { border-right: none; }
.seg button.is-active { background: var(--signal); color: var(--paper); }

.revoked-banner { background: var(--revert); color: var(--paper); font-family: var(--font-mono); font-weight: 600; font-size: 0.72rem; text-align: center; padding: 8px; border-radius: var(--r-1); margin-bottom: var(--sp-4); letter-spacing: 0.04em; }

.pipeline { border: 1px solid var(--vault-line); border-radius: var(--r-1); background: var(--vault-inset); padding: var(--sp-4); margin-bottom: var(--sp-5); min-height: 240px; }
.pipeline.is-revoked { opacity: 0.5; filter: grayscale(0.6); }
.lc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); }
.pipeline .lc-chip { background: var(--vault-2); border-color: var(--vault-line); color: var(--vault-text-2); transition: all .12s ease-out; }
.pipeline .lc-chip.active { color: var(--paper); background: var(--signal); border-color: var(--signal); }
.pipeline .lc-chip.done { color: var(--verified); border-color: color-mix(in srgb, var(--verified) 50%, var(--vault-line)); }

.ci-rows { font-family: var(--font-mono); font-size: 0.74rem; }
.ci-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--vault-text-2); }
.ci-row .ci-name { min-width: 132px; }
.ci-row .ci-dots { flex: 1; color: var(--vault-line); overflow: hidden; }
.ci-row .ci-mark { font-weight: 600; min-width: 18px; text-align: right; }
.ci-row.pass { color: var(--vault-text); }
.ci-row.pass .ci-mark { color: var(--verified); }
.ci-row.fail { color: var(--vault-text); }
.ci-row.fail .ci-mark { color: var(--revert); }
.ci-row.hold .ci-mark { color: var(--hold); }
.ci-row.running .ci-mark { color: var(--signal); }
.ci-row.skip { opacity: 0.4; }

.lc-x402 { padding: var(--sp-2) 0; }
.x402-card { border: 1px dashed var(--vault-line); border-radius: var(--r-1); padding: var(--sp-4); font-family: var(--font-mono); font-size: 0.74rem; background: var(--vault-2); }
.x402-line { padding: 3px 0; color: var(--vault-text); }
.x402-line.dim { color: var(--vault-text-2); }
.x402-line.revert { color: var(--revert); }
.x402-foot { margin-top: var(--sp-3); font-size: 0.64rem; color: var(--vault-text-2); border-top: 1px solid var(--vault-line); padding-top: var(--sp-3); }

.verdict { margin-top: var(--sp-4); border-top: 1px solid var(--vault-line); padding-top: var(--sp-4); }
.verdict-stamp { display: inline-block; font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem; padding: 4px 10px; border-radius: var(--r-1); }
.verdict-stamp.settled { background: var(--verified-soft); color: var(--verified); }
.verdict-stamp.reverted { background: var(--revert-soft); color: var(--revert); }
.verdict-stamp.held { background: var(--hold-soft); color: var(--hold); }
.verdict-stamp.denied { background: var(--revert-soft); color: var(--revert); }
.verdict-stamp.stamp-in { animation: stampin .25s cubic-bezier(.2,.8,.3,1); }
@keyframes stampin { 0% { transform: scale(1.12) rotate(-1.5deg); } 100% { transform: scale(1) rotate(0); } }
.verdict-target { font-family: var(--font-mono); font-size: 0.74rem; color: var(--vault-text-2); margin-left: 8px; }
.verdict-reason { font-family: var(--font-mono); font-size: 0.72rem; color: var(--vault-text); margin-top: 8px; }
.shudder { animation: shudder .18s ease-in-out; }
@keyframes shudder { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

/* gauge */
.gauge-wrap { text-align: center; margin-bottom: var(--sp-5); border: 1px solid var(--vault-line); border-radius: var(--r-1); padding: var(--sp-4); }
.gauge-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vault-text-2); margin: 0 0 var(--sp-2); }
.gauge { width: 180px; height: 104px; display: block; margin: 0 auto; }
.gauge-track { fill: none; stroke: var(--vault-line); stroke-width: 10; }
.gauge-fill { fill: none; stroke: var(--verified); stroke-width: 10; stroke-linecap: butt; transition: stroke-dasharray .5s ease-out, stroke .3s ease-out; }
.gauge-fill.caution { stroke: var(--hold); }
.gauge-fill.over { stroke: var(--revert); }
.gauge-readout { font-family: var(--font-mono); font-weight: 600; font-size: 0.9rem; color: var(--vault-text); margin-top: -8px; }
.gauge-caption { font-family: var(--font-mono); font-size: 0.64rem; margin: 4px 0 0; min-height: 1em; }
.gauge-caption.caution { color: var(--hold); }
.gauge-caption.over { color: var(--revert); }

/* cosign */
.cosign-head { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vault-text-2); margin: 0 0 var(--sp-3); }
.cosign-item { border: 1px solid var(--vault-line); border-left: 3px solid var(--hold); border-radius: var(--r-1); padding: 10px; margin-bottom: 8px; font-family: var(--font-mono); font-size: 0.7rem; background: var(--vault-2); }
.cosign-item .cs-line { color: var(--vault-text); margin-bottom: 8px; }
.cosign-item .cs-actions { display: flex; gap: 6px; }
.cs-approve, .cs-deny { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; border: 1px solid var(--vault-line); border-radius: var(--r-1); padding: 5px 10px; cursor: pointer; background: var(--vault-inset); color: var(--vault-text); }
.cs-approve { border-color: var(--verified); color: var(--verified); }
.cs-deny { border-color: var(--revert); color: var(--revert); }
.cs-empty { font-family: var(--font-mono); font-size: 0.68rem; color: var(--vault-text-2); }

/* ---- pane 3 ledger ---- */
.ledger-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.ledger-controls { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.export { position: relative; }
.export-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--vault-2); border: 1px solid var(--vault-line); border-radius: var(--r-1); z-index: 5; min-width: 90px; }
.export-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--vault-text); font-family: var(--font-mono); font-size: 0.72rem; padding: 8px 12px; cursor: pointer; }
.export-menu button:hover { background: var(--signal); color: var(--paper); }

.ledger-filters { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.ledger-filters label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vault-text-2); display: flex; flex-direction: column; gap: 4px; }
.ledger-filters select { padding: 6px 8px; font-size: 0.72rem; }

.ledger-body { font-family: var(--font-mono); font-size: 0.72rem; }

/* flat table */
.flat-table { width: 100%; }
.flat-head, .flat-row { display: grid; grid-template-columns: 0.7fr 0.9fr 0.8fr 1.3fr; gap: 8px; padding: 8px 4px; align-items: center; border-bottom: 1px solid var(--vault-line); }
.flat-head { color: var(--vault-text-2); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; position: sticky; top: 0; background: var(--vault); }
.flat-row { cursor: default; }
.flat-row.clickable { cursor: pointer; }
.flat-row.clickable:hover { background: var(--vault-2); }
.flat-amount { text-align: right; }
.flat-sig { color: var(--vault-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* status badge in ledger */
.sbadge { font-size: 0.6rem; font-weight: 600; padding: 2px 6px; border-radius: var(--r-1); white-space: nowrap; letter-spacing: 0.03em; }
.sbadge.settled { background: var(--verified-soft); color: var(--verified); }
.sbadge.approved { background: var(--verified-soft); color: var(--verified); }
.sbadge.reverted { background: var(--revert-soft); color: var(--revert); }
.sbadge.held { background: var(--hold-soft); color: var(--hold); }
.sbadge.denied { background: var(--revert-soft); color: var(--revert); }

/* by-context cards */
.domcard { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; border: 1px solid var(--vault-line); border-radius: var(--r-1); padding: 12px; margin-bottom: 8px; cursor: pointer; background: var(--vault-2); transition: transform .08s, box-shadow .08s; }
.domcard:hover { transform: translate(-1px,-1px); box-shadow: var(--press-vault); }
.dc-total { font-weight: 600; color: var(--verified); font-size: 0.95rem; grid-row: span 2; }
.dc-dom { font-weight: 500; color: var(--vault-text); }
.dc-meta { font-size: 0.62rem; color: var(--vault-text-2); }
.dc-drill { grid-row: span 2; color: var(--signal); font-size: 0.7rem; }
.drill-back { background: none; border: none; color: var(--signal); font-family: var(--font-mono); font-size: 0.7rem; cursor: pointer; padding: 0 0 var(--sp-3); }
.ledger-empty { font-family: var(--font-mono); font-size: 0.7rem; color: var(--vault-text-2); padding: var(--sp-5) 0; }

/* console foot */
.console-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); border-top: 1px solid var(--vault-line); background: var(--vault-2); padding: 12px 16px; flex-wrap: wrap; }
.cf-note { font-family: var(--font-mono); font-size: 0.64rem; color: var(--vault-text-2); }
.cf-actions { display: flex; gap: var(--sp-2); }

/* drawer */
.drawer-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 60%, transparent); z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.drawer { background: var(--vault); border: 1px solid var(--vault-line); border-radius: var(--r-2); max-width: 640px; width: 100%; color: var(--vault-text); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; background: var(--vault-2); border-bottom: 1px solid var(--vault-line); padding: 12px 16px; font-family: var(--font-mono); font-size: 0.72rem; }
.drawer-x { background: none; border: none; color: var(--vault-text-2); font-size: 1.2rem; cursor: pointer; }
.drawer-body { padding: var(--sp-5); font-family: var(--font-mono); font-size: 0.74rem; }
.dr-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vault-line); align-items: baseline; }
.dr-row:last-child { border-bottom: none; }
.dr-key { color: var(--vault-text-2); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; }
.dr-val { word-break: break-all; color: var(--vault-text); }
.dr-hl { background: var(--hold-soft); color: var(--ink); padding: 1px 3px; border-radius: var(--r-1); }
.drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); border-top: 1px solid var(--vault-line); padding: 12px 16px; flex-wrap: wrap; }
.drawer-note { font-family: var(--font-mono); font-size: 0.62rem; color: var(--vault-text-2); }
.drawer-link { font-family: var(--font-mono); font-size: 0.7rem; }

/* ============================================================
   07 SDK
   ============================================================ */
.sdk { border: 1px solid var(--hairline); border-radius: var(--r-2); overflow: hidden; max-width: 880px; }
.sdk-tabs { display: flex; background: var(--paper-2); border-bottom: 1px solid var(--hairline); }
.sdk-tab { background: none; border: none; border-right: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.72rem; padding: 12px 18px; cursor: pointer; color: var(--ink-2); }
.sdk-tab.is-active { background: var(--vault); color: var(--vault-text); }
.sdk-panel { position: relative; }
.sdk-panel[hidden] { display: none; }
.copy-btn { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; background: var(--vault-2); color: var(--vault-text); border: 1px solid var(--vault-line); border-radius: var(--r-1); padding: 5px 10px; cursor: pointer; }
.copy-btn:hover { border-color: var(--vault-text-2); }

/* ============================================================
   08 SPECS
   ============================================================ */
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.truth, .colophon { border: 1px solid var(--hairline); border-radius: var(--r-2); padding: var(--sp-5); }
.truthtable { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.74rem; margin-bottom: var(--sp-4); }
.truthtable td { padding: 8px 4px; border-bottom: 1px solid var(--hairline); }
.truthtable tr:last-child td { border-bottom: none; }
.tt-bad { color: var(--revert); text-align: right; font-weight: 600; }
.tt-hold { color: var(--hold); text-align: right; font-weight: 600; }
.seclist { list-style: none; padding: 0; margin: 0; }
.seclist li { font-size: 0.9rem; padding: 8px 0; border-top: 1px solid var(--hairline); color: var(--ink-2); }
.stackdl { margin: 0; }
.stackdl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.stackdl > div:last-child { border-bottom: none; }
.stackdl dt { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin: 0; }
.stackdl dd { font-family: var(--font-mono); font-size: 0.76rem; margin: 0; color: var(--ink); }

.faq { margin-top: var(--sp-7); border: 1px solid var(--hairline); border-radius: var(--r-2); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: none; }
.faq summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; padding: 16px 20px; list-style: none; text-transform: lowercase; color: var(--ink); background: var(--paper); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "▸ "; color: var(--signal); }
.faq details[open] summary { background: var(--paper-2); }
.faq details[open] summary::before { content: "▾ "; }
.faq p { padding: 0 20px 18px; margin: 0; max-width: 70ch; font-size: 1rem; }

/* ============================================================
   09 CLOSING + FOOTER
   ============================================================ */
.closing { background: var(--vault); color: var(--vault-text); padding-block: var(--sp-10); }
.closing .kicker { color: var(--vault-text-2); }
.closing-h2 {
  font-weight: 800; font-size: clamp(2.4rem, 7vw, 7rem); line-height: 0.95;
  letter-spacing: -0.03em; color: var(--vault-text); margin-bottom: var(--sp-5);
  /* grid-break #2 */
  margin-left: -2vw;
}
.closing-body { max-width: 56ch; font-size: 1.2rem; color: var(--vault-text); margin-bottom: var(--sp-6); }

.footer { background: transparent; color: var(--ink); padding-block: var(--sp-6); border-top: 1px solid var(--hairline); }
.footer-inner { display: flex; flex-direction: column; gap: var(--sp-4); }
.footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ink); }
.footer-brand .brk { color: var(--signal); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-links a { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink); }
.footer-links a:hover { color: var(--ink-2); }
.footer-meta { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-2); }
.footer-disc { max-width: 70ch; }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 6px; }
.footer-social a { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink); letter-spacing: 0.02em; }
.footer-social a:hover { color: var(--signal); }
.footer-social a .brk { color: var(--signal); }
.footer-cursor { font-family: var(--font-mono); color: var(--ink); }
.cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s ease-out, transform .5s ease-out; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .panes { grid-template-columns: 1fr; }
  .pane { border-right: none; border-bottom: 1px solid var(--vault-line); display: none; min-height: 0; }
  .pane.is-active { display: block; }
  .pane-tabs { display: flex; position: sticky; top: 64px; z-index: 4; }
  .readout { position: sticky; top: 0; z-index: 5; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .failgrid { grid-template-columns: 1fr; }
  .failcard { border-right: none; border-bottom: 1px solid var(--hairline); }
  .failcard:last-child { border-bottom: none; }
  .split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split-panel { position: static; }
  .ctx-grid { grid-template-columns: 1fr; }
  .specs-grid { grid-template-columns: 1fr; }
  .hero-h1 { margin-right: 0; }
  .closing-h2 { margin-left: 0; }
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .dispatch { white-space: normal; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--hairline); }
  .step:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .step:last-child, .step:nth-last-child(2) { border-bottom: none; }
  .enforce-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none !important; }
  .step:nth-last-child(2) { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 18px; }
  .section, .console-section { padding-block: var(--sp-7); }
  .util-inner { font-size: 0.56rem; gap: 5px; }
  .util-edition { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .cursor { opacity: 1; }
}

/* ============================================================
   BRAND v2 — violet dark theme: logo mark + wordmark, static layout
   ============================================================ */

/* logo lockups (mark image + wordmark) */
.util-mark { display: inline-flex; align-items: center; gap: 7px; }
.util-logo { height: 15px; width: auto; display: block; }
.hero .logo { display: inline-flex; align-items: center; gap: 11px; margin-bottom: var(--sp-5); }
.logo-mark { height: 34px; width: auto; display: block; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-logo { height: 26px; width: auto; display: block; }

/* the BUDGENT wordmark — heavy italic, silver→violet gradient (matches the logo header) */
.logo-word {
  font-family: var(--font-display);
  font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1;
  background: linear-gradient(180deg, #F3EFFF 0%, #B9A3FF 48%, #7C4DFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero .logo .logo-word { font-size: 1.5rem; }
.footer-brand .logo-word { font-size: 1.25rem; }

/* heavier, modern display headings to match the brand font */
h1, h2, h3 { font-weight: 800; letter-spacing: -0.015em; }
.hero-h1 { font-style: normal; }

/* STATIC LAYOUT — kill scroll-reveal motion + any entrance transforms (no "jumping") */
.reveal { opacity: 1 !important; transform: none !important; }
.dispatch-body { transition: none !important; }

/* dark scrim for the verifiable-link drawer (was a light scrim) */
.drawer-overlay { background: rgba(6, 4, 12, 0.74) !important; }

/* subtle violet glow on the hero/console plates over the dark bg */
.console { box-shadow: 0 0 0 1px var(--hairline), 0 24px 80px -40px rgba(124,77,255,0.45) !important; }

/* ============================================================
   THEME SYSTEM — light / dark split + smooth animated background
   ============================================================ */

/* dark (default) background gradient stops */
:root {
  --bg-1: #160F2A; --bg-2: #0C0818; --bg-3: #070510;
  --bg-glow-a: rgba(124, 77, 255, 0.24);
  --bg-glow-b: rgba(91, 60, 200, 0.18);
  --noise-opacity: 0.05;
}

/* LIGHT THEME */
[data-theme="light"] {
  --paper:        #F7F4FF;
  --paper-2:      #EFEAFB;
  --paper-3:      #E6DFF7;
  --ink:          #1A1430;
  --ink-2:        #5E5680;
  --hairline:     #D9D0EE;

  --signal:       #7C4DFF;
  --signal-soft:  #EAE3FF;
  --verified:     #0E9E5A;
  --verified-soft:#DBF1E6;
  --hold:         #9A6612;
  --hold-soft:    #F4E9CF;
  --revert:       #D6342A;
  --revert-soft:  #F8DCD9;

  --press: 2px 2px 0 rgba(26, 20, 48, 0.22);

  --bg-1: #FBF8FF; --bg-2: #F1ECFB; --bg-3: #E6DEF8;
  --bg-glow-a: rgba(124, 77, 255, 0.16);
  --bg-glow-b: rgba(139, 92, 246, 0.10);
  --noise-opacity: 0.03;
}
/* light console panel */
[data-theme="light"] #console {
  --vault: #FFFFFF;
  --vault-2: #F3EFFB;
  --vault-inset: #ECE6F8;
  --vault-line: #DCD3F0;
  --vault-text: #1A1430;
  --vault-text-2: #6A6190;
  --press-vault: 2px 2px 0 #1A1430;
}

/* smooth animated background (content stays static; only the glow drifts) */
.etheral {
  background:
    radial-gradient(60% 55% at 20% 12%, var(--bg-glow-a) 0%, transparent 60%),
    radial-gradient(55% 50% at 85% 88%, var(--bg-glow-b) 0%, transparent 60%),
    radial-gradient(140% 140% at 50% 30%, var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-3) 100%) !important;
  background-size: 170% 170% !important;
  background-position: 0% 0%;
  animation: bgDrift 34s ease-in-out infinite alternate;
}
.etheral-noise { opacity: var(--noise-opacity) !important; }
@keyframes bgDrift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 60%; }
  100% { background-position: 60% 100%; }
}
@media (prefers-reduced-motion: reduce) { .etheral { animation: none; } }

/* theme toggle button (utility bar) */
.theme-toggle {
  margin-left: var(--sp-3);
  background: transparent; border: 1px solid var(--hairline); color: var(--ink-2);
  font-family: var(--font-mono); font-size: 0.66rem; line-height: 1;
  padding: 3px 8px; border-radius: var(--r-1); cursor: pointer; text-transform: uppercase;
  letter-spacing: 0.06em; transition: color .12s, border-color .12s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--signal); }

/* ============================================================
   BACKGROUND v2 — clearly-visible, smooth drifting violet blobs
   ============================================================ */
:root { --blob-a: rgba(140, 92, 255, 0.42); --blob-b: rgba(96, 64, 210, 0.34); }
[data-theme="light"] {
  /* deeper, clearly-distinguishable lavender gradient */
  --bg-1: #F2EAFF; --bg-2: #E2D3FB; --bg-3: #CBB6F2;
  --blob-a: rgba(124, 77, 255, 0.30); --blob-b: rgba(160, 122, 248, 0.26);
  --noise-opacity: 0.04;
}

/* base gradient (static, distinct) + hide the old SVG-distort layer */
.etheral {
  background: radial-gradient(150% 130% at 50% 18%, var(--bg-1) 0%, var(--bg-2) 52%, var(--bg-3) 100%) !important;
  background-size: auto !important;
  animation: none !important;
}
.etheral-distort { display: none !important; }

/* two large blurred blobs that drift smoothly — the visible animation */
.etheral::before, .etheral::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; will-change: transform;
}
.etheral::before {
  width: 68vmax; height: 68vmax; left: -14vmax; top: -20vmax;
  background: radial-gradient(circle, var(--blob-a) 0%, transparent 68%);
  filter: blur(48px); animation: blobA 22s ease-in-out infinite alternate;
}
.etheral::after {
  width: 62vmax; height: 62vmax; right: -16vmax; bottom: -22vmax;
  background: radial-gradient(circle, var(--blob-b) 0%, transparent 68%);
  filter: blur(58px); animation: blobB 29s ease-in-out infinite alternate;
}
@keyframes blobA { from { transform: translate(0,0) scale(1); }   to { transform: translate(24vmax,18vmax) scale(1.32); } }
@keyframes blobB { from { transform: translate(0,0) scale(1.12); } to { transform: translate(-22vmax,-14vmax) scale(0.86); } }
@media (prefers-reduced-motion: reduce) { .etheral::before, .etheral::after { animation: none; } }