/* GENERATED by scripts/assemble.py */
/* ============================================================
   AROKO — base layer (tokens, reset, type, primitives)
   Plaid-structure remix on the postal aesthetic: lavender paper
   canvas, ink-navy type, engraved duotone plates, sealed-envelope
   motifs. Section CSS lives in css/sections/*.css and may ONLY use
   these tokens + primitives (no new colors, radii, easings).
   ============================================================ */
@import url("../shared/fonts.css");

:root {
  /* canvas + ink */
  --paper:#F6F5FC; --paper-2:#EEEBFA; --paper-3:#E4DFF8; --card:#FFFFFF;
  --ink:#0B1030; --ink-2:#2A2F55; --ink-3:#545A80; --ink-4:#8A8FAE;
  --line: rgba(11,16,48,.10); --line-strong: rgba(11,16,48,.18);

  /* the deep surfaces (hero card, name card, footer) */
  --navy:#0B1030; --navy-2:#141A4A; --indigo:#2B2A8C;
  --on-dark:#F4F3FF; --on-dark-2:#C9C6EE; --on-dark-3:#9A97C8; --line-dark: rgba(255,255,255,.12);

  /* chroma — violet is the brand, mint is "delivered/verified", red is "exposed" */
  --violet:#7C5CFF; --violet-ink:#5338D6; --violet-soft:#EDE8FF;
  --lilac:#A78BFA; --pink:#E79BFF;
  --mint:#5EEAD4; --mint-ink:#0F766E; --mint-soft:#DDF8F2;
  --exposed:#D33A4C; --exposed-soft:#FCE8EB;

  --grad-hero: linear-gradient(118deg, #0B1030 0%, #1E1F7A 38%, #6A4BF5 72%, #5EEAD4 118%);
  --grad-card: linear-gradient(150deg, #8B7CFF 0%, #B79BFF 45%, #E79BFF 100%);
  --grad-text: linear-gradient(92deg, #B8F3E9 0%, #5EEAD4 30%, #A78BFA 100%);
  --grad-ring: conic-gradient(from 180deg, #5EEAD4, #A78BFA, #E79BFF, #FFD6A5, #5EEAD4);
  --grad-num: linear-gradient(180deg, #7C5CFF, #5338D6);

  --font-display: "Aro Display", "Inter Tight", system-ui, sans-serif;
  --font-body: "Aro Text", "Inter Tight", system-ui, sans-serif;
  --font-mono: "Aro Mono", "JetBrains Mono", ui-monospace, monospace;

  /* type — two weights only: 400 + 600 */
  --fs-hero: clamp(40px, 6.2vw, 88px);
  --fs-h2: clamp(32px, 4.4vw, 60px);
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-lead: clamp(17px, 1.45vw, 21px);
  --fs-body: 16.5px;
  --fs-small: 14px;
  --fs-eyebrow: 12.5px;

  --maxw: 1280px; --gutter: clamp(16px, 4.5vw, 64px); --sec-pad: clamp(80px, 10vw, 144px);
  --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(11,16,48,.06), 0 6px 18px -10px rgba(11,16,48,.18);
  --shadow-2: 0 2px 4px rgba(11,16,48,.04), 0 24px 48px -24px rgba(43,42,140,.30);
  --shadow-3: 0 40px 90px -40px rgba(43,42,140,.45);
  --glass: rgba(255,255,255,.62); --glass-line: rgba(255,255,255,.75);

  --ease: cubic-bezier(.16,1,.3,1);           /* the ONE house easing */
  --dur-fast: .2s; --dur: .45s; --dur-slow: .8s;
  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--violet);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink-2);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--violet-soft); color: var(--ink); }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus); border-radius: 8px; } /* transparent outline survives forced-colors */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r-pill); }
.skip:focus { top: 16px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--sec-pad); position: relative; }
/* paper section after paper section: don't stack two full pads into a 288px dead band */
main > section:not(.hero) + section { padding-top: calc(var(--sec-pad) * .55); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-hero); line-height: .98; letter-spacing: -0.04em; }
h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 38ch; }
.eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .lead { margin-inline: auto; }
.sec-head h2 + .lead { margin-top: 20px; }

/* ---------- buttons (Plaid pill, gradient ring = the seal) ---------- */
.btn { --h: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px; border-radius: var(--r-pill); font-weight: 600; font-size: 16px; letter-spacing: -0.005em;
  border: 0; cursor: pointer; white-space: nowrap; isolation: isolate;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.btn svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--grad-ring); z-index: -1; }
.btn-primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); z-index: -1; }
.btn-primary:hover::after { background: var(--navy-2); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--grad-ring); z-index: -1; }
.btn-light::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; z-index: -1; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-ghost:hover { background: rgba(11,16,48,.05); }
.on-dark .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.on-dark .btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-sm { --h: 44px; padding: 0 18px; font-size: 15px; }

/* ---------- chips + pills ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.chip.ok { background: var(--mint-soft); color: var(--mint-ink); box-shadow: none; }
.chip.ok .dot { background: var(--mint-ink); }
.chip.sealed { background: var(--violet-soft); color: var(--violet-ink); box-shadow: none; }
.chip.sealed .dot { background: var(--violet-ink); }
.chip.exposed { background: var(--exposed-soft); color: var(--exposed); box-shadow: none; }
/* glass rail pill — Plaid's ACH/Wire/FedNow lozenge */
.rail-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 168px; height: 56px; padding: 0 22px;
  border-radius: var(--r-pill); font-family: var(--font-mono); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: linear-gradient(100deg, rgba(237,232,255,.95), rgba(221,248,242,.95));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), 0 10px 30px -12px rgba(124,92,255,.35); }
.rail-pill.is-active { background: linear-gradient(100deg, #E3D9FF, #F6D9FF 55%, #D4F7F0);
  box-shadow: inset 0 0 0 2px var(--lilac), 0 0 0 6px rgba(167,139,250,.18), 0 16px 40px -14px rgba(124,92,255,.55); }

/* ---------- surfaces ---------- */
.card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.glass { background: var(--glass); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--glass-line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.plate { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--grad-card); }
.deep { background: var(--navy); color: var(--on-dark-2); border-radius: var(--r-xl); overflow: hidden; position: relative; }
.deep h2, .deep h3 { color: var(--on-dark); }
.on-dark { color: var(--on-dark-2); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark .eyebrow { color: var(--on-dark); }

/* guilloche line field — a shared decorative layer (SVG data-URI waves), Plaid's wavy contour lines */
.guilloche { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath d='M0 20 C40 8 80 32 120 20 S200 8 240 20' fill='none' stroke='%237C5CFF' stroke-opacity='.18' stroke-width='.8'/%3E%3C/svg%3E");
  background-size: 240px 9px; mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%); }

/* ---------- reveal (one house motion: rise + clip) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* no-JS safety: reveals never hide content without the engine */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ============ 00 NAV — floating glass pill + right drawer ============ */
.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav-bar {
  pointer-events: auto; position: relative; margin-inline: auto; height: 64px;
  /* brand sits on the .wrap content edge: 1px border + 20px padding inside the bar */
  width: min(calc(100% - 32px), calc(min(100%, var(--maxw)) - 2 * var(--gutter) + 42px));
  display: flex; align-items: center; gap: 12px; padding: 0 11px 0 20px;
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav.is-solid .nav-bar { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-2); }

/* brand */
.nav-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); border-radius: var(--r-pill); padding-right: 4px; }
.nav-mark { width: 24px; height: 24px; flex: none; transition: transform var(--dur) var(--ease); }
.nav-brand:hover .nav-mark { transform: rotate(-8deg) scale(1.06); }
.nav-word { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.03em; line-height: 1; }

/* links */
.nav-links { list-style: none; display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 15px;
  border-radius: var(--r-pill); font-size: 15px; letter-spacing: -0.005em; color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav-link:hover { color: var(--ink); background: rgba(11,16,48,.05); }
.nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: 7px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--violet); transform: scale(0); transition: transform var(--dur) var(--ease);
}
.nav-link[aria-current="true"] { color: var(--ink); }
.nav-link[aria-current="true"]::after { transform: scale(1); }

/* actions */
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-links + .nav-actions { margin-left: 0; }
.nav-burger {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(11,16,48,.06); color: var(--ink); align-items: center; justify-content: center;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-burger:hover { background: rgba(11,16,48,.1); }
.nav-burger:active { transform: scale(.94); }
.nav-burger-lines { position: relative; display: block; width: 18px; height: 10px; }
.nav-burger-lines span { position: absolute; left: 0; right: 0; height: 1.75px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur) var(--ease); }
.nav-burger-lines span:first-child { top: 0; }
.nav-burger-lines span:last-child { bottom: 0; left: 6px; }
.nav-burger:hover .nav-burger-lines span:last-child { transform: translateX(-6px); }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-links + .nav-actions { margin-left: auto; }
}
@media (max-width: 480px) {
  .nav { top: 12px; }
  .nav-bar { width: calc(100% - 24px); height: 58px; padding: 0 7px 0 16px; }
  .nav-cta { display: none; }
}

/* ---------- drawer (slides from the right; never a centered modal) ---------- */
.nav-scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(11,16,48,.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(420px, calc(100% - 32px));
  display: flex; flex-direction: column; padding: 12px 20px 24px 24px;
  background: var(--paper); border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: var(--shadow-3);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(104%); visibility: hidden;
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}
html.nav-open, html.nav-open body { overflow: hidden; }
html.nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); }
html.nav-open .nav-drawer { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease); }

.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.nav-close {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(11,16,48,.06); color: var(--ink); transition: background-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.nav-close:hover { background: rgba(11,16,48,.1); transform: rotate(90deg); }

.nav-drawer-links { list-style: none; margin-top: 28px; border-top: 1px solid var(--line); }
.nav-drawer-links li { border-bottom: 1px solid var(--line); }
.nav-drawer-links a {
  display: flex; align-items: baseline; gap: 16px; min-height: 64px; padding: 16px 4px;
  font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -0.035em; color: var(--ink);
  transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.nav-drawer-links a:hover { color: var(--violet-ink); transform: translateX(4px); }
.nav-idx { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); transform: translateY(-3px); }

/* staggered entrance on open */
.nav-drawer-links li, .nav-drawer-foot { opacity: 0; transform: translateX(20px);
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease); }
html.nav-open .nav-drawer-links li, html.nav-open .nav-drawer-foot { opacity: 1; transform: none; }
html.nav-open .nav-drawer-links li:nth-child(1) { transition-delay: .06s; }
html.nav-open .nav-drawer-links li:nth-child(2) { transition-delay: .1s; }
html.nav-open .nav-drawer-links li:nth-child(3) { transition-delay: .14s; }
html.nav-open .nav-drawer-links li:nth-child(4) { transition-delay: .18s; }
html.nav-open .nav-drawer-links li:nth-child(5) { transition-delay: .22s; }
html.nav-open .nav-drawer-foot { transition-delay: .28s; }

.nav-drawer-foot { margin-top: auto; padding-top: 36px; }
.nav-drawer-cta { width: 100%; }
.nav-drawer-gloss { margin-top: 18px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); }

@media (min-width: 1001px) { .nav-scrim, .nav-drawer { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer-links li, .nav-drawer-foot { transform: none; }
}

/* drawer links move focus to their target section; a programmatic landmark focus needs no ring */
main > section[tabindex="-1"]:focus { box-shadow: none; }

/* ============ 01 HERO — full-bleed gradient card, engraved postmaster, seal sweep ============ */
.hero { padding: 12px 12px 0; }
.hero-card {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(660px, 92svh);
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); background: var(--navy);
}

/* ---- plate ---- */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-picture { display: block; width: 100%; height: 100%; }
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 74% 28%;
  animation: hero-settle 2.4s var(--ease) both;
}
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }

/* left scrim keeps the lead >= 4.5:1 wherever the plate's violet climbs */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,16,48,.8) 0%, rgba(11,16,48,.62) 32%, rgba(11,16,48,.22) 50%, rgba(11,16,48,0) 64%),
    radial-gradient(ellipse 62% 34% at 18% 100%, rgba(11,16,48,.72) 0%, rgba(11,16,48,.35) 55%, rgba(11,16,48,0) 100%),
    linear-gradient(0deg, rgba(11,16,48,.6) 0%, rgba(11,16,48,.3) 22%, rgba(11,16,48,0) 42%);
}

/* ---- seal sweep: Plaid's pink scan bar, a slow light passing over the lower plate ---- */
.hero-sweep {
  position: absolute; left: 46%; right: 0; top: 76%; height: 96px; margin-top: -48px; pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 28%, black 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 28%, black 86%, transparent 100%);
}
.hero-sweep::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; margin-top: -20px;
  background: linear-gradient(90deg, rgba(231,155,255,.2), rgba(231,155,255,.85) 58%, rgba(94,234,212,.55));
  filter: blur(18px); animation: hero-breathe 7s var(--ease) infinite alternate;
}
.hero-sweep::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, rgba(231,155,255,.2), rgba(231,155,255,.75) 60%, rgba(94,234,212,.6));
}
.hero-sweep-core {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent) no-repeat;
  background-size: 26% 100%; background-position: -40% 0;
  box-shadow: 0 0 0 0 transparent; filter: drop-shadow(0 0 6px rgba(231,155,255,.9));
  animation: hero-sweep 6.5s var(--ease) infinite;
}
@keyframes hero-sweep { 0% { background-position: -40% 0; } 70%, 100% { background-position: 140% 0; } }
@keyframes hero-breathe { from { opacity: .7; } to { opacity: 1; } }

/* ---- floating .nota receipt over the figure (desktop) ---- */
.hero-receipt {
  position: absolute; left: 51%; top: 60%; z-index: 2;
  display: grid; gap: 4px; padding: 12px 16px 12px 14px;
  border-radius: var(--r-md); background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-3);
  translate: var(--hx, 0px) var(--hy, 0px);
  transition: translate var(--dur-slow) var(--ease);
  animation: hero-float 6s var(--ease) infinite alternate, hero-in var(--dur-slow) var(--ease) .9s both;
}
.hero-receipt-no { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--ink-3); }
.hero-receipt-row { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.hero-receipt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
@keyframes hero-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes hero-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- copy ---- */
.hero-body {
  position: relative; z-index: 3; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 36px;
  padding: clamp(104px, 12.5vh, 160px) var(--hero-x) clamp(24px, 3vw, 40px);
  /* copy edge = .wrap content edge. 100% is the card (viewport - 24px), so the 12px inset cancels out;
     below --maxw it falls back to the bare gutter minus the inset. */
  --hero-x: max(calc(var(--gutter) - 12px), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.hero-copy { max-width: 640px; }

.hero-chip {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 15px 0 13px; margin-bottom: 28px;
  border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: hero-in var(--dur-slow) var(--ease) .05s both;
}
.hero-chip-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.hero-chip-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint);
  animation: hero-ping 2.4s var(--ease) infinite;
}
@keyframes hero-ping { from { transform: scale(1); opacity: .6; } 70%, to { transform: scale(2.8); opacity: 0; } }

.hero-title { color: var(--on-dark); margin-bottom: 26px; }
.hero-line { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.hero-line > span { display: inline-block; animation: hero-rise 1.1s var(--ease) both; }
.hero-line:nth-child(2) > span { animation-delay: .1s; }
@keyframes hero-rise { from { transform: translateY(105%); } to { transform: none; } }

.hero-lead {
  font-size: var(--fs-lead); line-height: 1.55; color: var(--on-dark-2); max-width: 36ch; text-wrap: balance;
  animation: hero-up var(--dur-slow) var(--ease) .28s both;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; animation: hero-up var(--dur-slow) var(--ease) .38s both; }
@keyframes hero-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero-ctas .btn-light { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); }
.hero-ctas .btn-light:hover { box-shadow: 0 0 0 6px rgba(167,139,250,.22), 0 18px 40px -12px rgba(124,92,255,.7); }
/* ghost gets its gradient ring on hover — the seal closing */
.hero-ghost::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad-ring);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.hero-ghost:hover::before, .hero-ghost:focus-visible::before { opacity: 1; }

/* ---- foot: promo card + stack strip ---- */
.hero-foot { display: flex; align-items: flex-end; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; animation: hero-up var(--dur-slow) var(--ease) .5s both; }
.hero-promo {
  display: flex; align-items: center; gap: 14px; padding: 9px 22px 9px 9px; min-height: 44px;
  border-radius: var(--r-md); background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--glass-line); color: var(--ink);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-promo:hover { transform: translateY(-3px); background: var(--card); box-shadow: var(--shadow-3); }
.hero-seal {
  position: relative; flex: none; width: 58px; height: 58px; border-radius: var(--r-sm);
  background: var(--grad-card); display: grid; place-items: center; overflow: hidden;
}
.hero-seal::before {
  content: ""; position: absolute; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--lilac), var(--violet) 52%, var(--violet-ink) 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.16), inset 0 -4px 8px rgba(11,16,48,.35), 0 4px 10px -2px rgba(83,56,214,.6);
  transition: transform var(--dur-slow) var(--ease);
}
.hero-seal svg { position: relative; width: 16px; height: 16px; color: var(--card); transition: transform var(--dur-slow) var(--ease); }
.hero-promo:hover .hero-seal::before, .hero-promo:hover .hero-seal svg { transform: rotate(-14deg); }
.hero-promo-text { display: grid; gap: 2px; line-height: 1.3; }
.hero-promo-title { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; color: var(--ink); }
.hero-promo-sub { font-size: 14px; color: var(--ink-3); }
.hero-promo-arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.hero-promo:hover .hero-promo-arrow { transform: translateX(4px); }

.hero-stack { margin-top: clamp(28px, 4vh, 48px); padding-top: 16px; border-top: 1px solid var(--line-dark); max-width: min(560px, 40vw); animation: hero-up var(--dur-slow) var(--ease) .5s both; }
.hero-stack-label { width: fit-content; font-size: 13px; color: var(--on-dark-2); margin-bottom: 10px; }
.hero-stack-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--on-dark-2); }

/* ---- short desktop viewports (1280x720, 1024x768): keep the promo card above the fold ---- */
@media (min-width: 961px) and (max-height: 820px) {
  .hero-card { min-height: calc(100svh - 12px); }
  .hero-body { gap: 20px; padding-top: 96px; padding-bottom: 24px; }
  .hero-chip { margin-bottom: 18px; }
  .hero-title { font-size: clamp(40px, min(6.2vw, 9.2svh), 88px); margin-bottom: 18px; }
  .hero-lead { font-size: 17px; }
  .hero-ctas { margin-top: 24px; }
  .hero-stack { margin-top: 20px; padding-top: 12px; }
}

/* ---- tablet + mobile: plate on top, copy beneath on navy ---- */
@media (max-width: 960px) {
  .hero-card { display: block; min-height: 0; }
  .hero-media { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .hero-img { object-position: 78% 30%; }
  .hero-scrim { background: linear-gradient(180deg, rgba(11,16,48,0) 38%, rgba(11,16,48,.7) 72%, var(--navy) 99%); }
  .hero-receipt { display: none; }
  .hero-stack { max-width: 560px; }
  .hero-sweep { left: 18%; top: 62%; }
  .hero-body { margin-top: clamp(-200px, -22vw, -96px); padding: 0 clamp(20px, 5vw, 48px) clamp(20px, 5vw, 40px); gap: 40px; }
}
@media (max-width: 760px) {
  .hero { padding: 8px 8px 0; }
  .hero-card { border-radius: var(--r-lg); }
  .hero-media { aspect-ratio: 4 / 5; }
  .hero-img { object-position: 50% 20%; }
  .hero-scrim { background: linear-gradient(180deg, rgba(11,16,48,0) 46%, rgba(11,16,48,.72) 76%, var(--navy) 99%); }
  .hero-sweep { left: 0; top: 56%; }
  .hero-body { margin-top: -34vw; }
  .hero-chip { margin-bottom: 20px; }
  .hero-title { margin-bottom: 18px; font-size: clamp(40px, 11.6vw, 60px); }
  .hero-lead { font-size: 17px; }
  .hero-ctas { margin-top: 28px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-promo { flex: 1 1 100%; }
  .hero-stack-list { gap: 8px 18px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img, .hero-line > span, .hero-receipt { animation: none; }
  .hero-sweep::before, .hero-chip-dot::after { animation: none; }
  .hero-sweep-core { animation: none; background-position: 72% 0; }
}

/* ===================== 02 · PROBLEM (owner B) ===================== */
.prob-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px);
  align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.prob-head h2 { max-width: 12ch; }
.prob-body { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }

/* ---------- ledger stage ---------- */
.prob-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: clamp(12px, 2vw, 28px); padding: clamp(20px, 3.4vw, 48px);
  background: var(--paper-2); border-radius: var(--r-xl); overflow: hidden; isolation: isolate; }
.prob-stage > .guilloche { z-index: -1; opacity: .9; }

.prob-ledger { position: relative; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: clamp(18px, 2.2vw, 28px); overflow: hidden; }
.prob-ledger--public { box-shadow: var(--shadow-1); }
.prob-ledger--sealed { box-shadow: inset 0 0 0 1.5px var(--violet-soft), var(--shadow-2); }
.prob-ledger-cap { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line); }
.prob-led { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.prob-led--red { background: var(--exposed); box-shadow: 0 0 0 4px var(--exposed-soft); }
.prob-led--violet { background: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }

.prob-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.prob-table th { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  text-align: left; padding: 10px 0 8px; }
.prob-table th:last-child, .prob-table td:last-child { text-align: right; }
.prob-table td { height: 46px; padding: 0; color: var(--ink-2); border-top: 1px solid var(--line); white-space: nowrap; }
.prob-table td.prob-red { color: var(--exposed); font-weight: 600; }

/* sealed cell: amount and chip share one grid cell so the flip never shifts layout */
.prob-cell { display: grid; justify-items: end; align-items: center; }
.prob-cell > * { grid-area: 1 / 1; }
.prob-was { color: var(--exposed); font-weight: 600; opacity: 0; transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease), transform var(--dur) var(--ease); }
.prob-chip { height: 28px; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* armed (JS + motion allowed): start exposed, the sweep seals row by row */
.prob-armed .prob-was { opacity: 1; }
.prob-armed .prob-chip { opacity: 0; transform: scale(.82); }
.prob-armed tr.is-sealed .prob-was { opacity: 0; filter: blur(6px); transform: translateX(-6px); }
.prob-armed tr.is-sealed .prob-chip { opacity: 1; transform: none; transition-delay: .06s; }

.prob-sweep { position: absolute; left: 0; right: 0; top: 0; height: 56px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(167,139,250,.16) 70%, rgba(124,92,255,.22) 100%); }
.prob-sweep::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--lilac) 20%, var(--violet) 55%, var(--mint) 85%, transparent);
  box-shadow: 0 0 14px 2px rgba(124,92,255,.45); }

/* the wax seal between the ledgers */
.prob-seal { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; justify-content: center; }
.prob-seal-line { width: 1.5px; flex: 1; max-height: 120px; background: linear-gradient(180deg, transparent, var(--lilac)); }
.prob-seal-line:last-child { background: linear-gradient(0deg, transparent, var(--lilac)); }
.prob-seal-disc { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--grad-card); color: var(--card); box-shadow: inset 0 0 0 4px rgba(255,255,255,.28), 0 0 0 6px var(--paper-2), var(--shadow-2); }
.prob-seal-disc::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed var(--lilac); }
.prob-seal-disc svg { width: 26px; height: 26px; }
.prob-seal-disc::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--grad-ring);
  opacity: 0; z-index: -1; filter: blur(12px); transition: opacity var(--dur-slow) var(--ease); }
.prob-stage.is-done .prob-seal-disc::after { opacity: .7; }

/* ---------- stat tiles (Plaid big-number row) ---------- */
.prob-stats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 40px);
  margin-top: clamp(56px, 7vw, 96px); }
.prob-stat { padding-top: 22px; border-top: 1px solid var(--line-strong); }
.prob-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(52px, 6.4vw, 92px);
  line-height: .95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-bottom: 14px; padding-bottom: .04em;
  background: var(--grad-num); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prob-stat--red { border-top-color: var(--exposed); }
.prob-stat--red .prob-num { background: none; color: var(--exposed); }
.prob-stat--violet { border-top-color: var(--violet); }
.prob-stat p { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); max-width: 24ch; }

.prob-foot { margin-top: clamp(32px, 4vw, 48px); font-size: var(--fs-small); color: var(--ink-3); max-width: 70ch; }

@media (max-width: 960px) {
  .prob-head { grid-template-columns: 1fr; gap: 20px; }
  .prob-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 760px) {
  .prob-stage { grid-template-columns: 1fr; }
  .prob-seal { flex-direction: row; height: auto; }
  .prob-seal-line { width: auto; height: 1.5px; max-height: none; max-width: 96px;
    background: linear-gradient(90deg, transparent, var(--lilac)); }
  .prob-seal-line:last-child { background: linear-gradient(270deg, transparent, var(--lilac)); }
  .prob-seal-disc { width: 52px; height: 52px; }
  .prob-seal-disc svg { width: 22px; height: 22px; }
}
@media (max-width: 420px) {
  .prob-table { font-size: 13px; }
  .prob-table td { height: 42px; }
  .prob-chip { height: 26px; padding: 0 10px; font-size: 12px; letter-spacing: .06em; }
}
@media (max-width: 400px) {
  .prob-ledger-cap { font-size: 12px; letter-spacing: .08em; gap: 8px; }
}

/* ===================== 03 · HOW IT WORKS (owner B) ===================== */
.how-head h2 { max-width: none; }

/* ---------- stage: paper-2 plate with violet contour lines ---------- */
.how-stage { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl);
  background: var(--paper-2); padding: clamp(28px, 5vw, 80px) clamp(16px, 4vw, 64px); }
.how-waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 30%, transparent 100%); }
.how-waves-g { fill: none; stroke: var(--violet); stroke-opacity: .2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.how-waves-g path { vector-effect: non-scaling-stroke; }
.how-waves-g { animation: how-drift 22s var(--ease) infinite alternate; animation-play-state: paused; }
.how-stage.is-live .how-waves-g { animation-play-state: running; }
@keyframes how-drift { from { transform: translate3d(-24px, 0, 0); } to { transform: translate3d(24px, -10px, 0); } }

.how-diagram { display: grid; grid-template-columns: minmax(0, 300px) minmax(220px, 1fr) minmax(0, 320px);
  align-items: center; justify-content: center; max-width: 1040px; margin-inline: auto; }

/* ---------- left: payment card ---------- */
.how-pay { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 34px 26px 26px; border-radius: var(--r-xl); min-height: 320px; }
.how-pay-notch { position: absolute; top: 12px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: var(--r-pill); background: var(--line-strong); }
.how-pay-title { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.how-pay-to { font-size: 13px; color: var(--ink-3); margin-top: -10px; }
.how-amt { display: flex; align-items: center; gap: 12px; color: var(--ink); margin-top: 6px; }
.how-lock { width: 30px; height: 30px; color: var(--violet-ink); flex: none; }
.how-dots { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: .02em; color: var(--ink); }
.how-send { margin-top: auto; width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--on-dark); font-weight: 600; font-size: 15px; }
.how-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: var(--mint);
  animation: how-spin 1s linear infinite; animation-play-state: paused; }
.how-stage.is-live .how-spin { animation-play-state: running; }
@keyframes how-spin { to { transform: rotate(360deg); } }

/* ---------- middle: rails + connectors ---------- */
.how-rails { position: relative; height: 300px; display: grid; place-items: center; }
.how-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.how-wires path { fill: none; vector-effect: non-scaling-stroke; }
.how-wire-base path { stroke: var(--lilac); stroke-width: 1.25; stroke-opacity: .55; }
.how-wire-flow path { stroke: var(--violet); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; opacity: 0;
  transition: opacity var(--dur) var(--ease); animation: how-flow 1.1s linear infinite; animation-play-state: paused; }
.how-stage.is-live .how-wire-flow path { animation-play-state: running; }
.how-stage[data-step="0"] .how-wire-flow path[data-i="0"],
.how-stage[data-step="1"] .how-wire-flow path[data-i="1"],
.how-stage[data-step="2"] .how-wire-flow path[data-i="2"] { opacity: 1; }
@keyframes how-flow { to { stroke-dashoffset: -24; } }
.how-node { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--card); box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 4px var(--violet-soft); z-index: 1; }
.how-node--l { left: -5px; } .how-node--r { right: -5px; }

.how-pills { position: relative; display: flex; flex-direction: column; gap: 22px; }
.how-pill { min-width: 176px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.how-pill.is-active { transform: scale(1.06); }

/* ---------- right: .nota receipt (perforated foot) ---------- */
.how-nota-wrap { filter: drop-shadow(0 24px 24px rgba(43,42,140,.18)); }
.how-nota { position: relative; background: var(--card); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 24px 24px 30px;
  -webkit-mask: radial-gradient(circle 6px at 9px 100%, transparent 5.5px, #000 6px) 0 0 / 18px 100% repeat-x;
          mask: radial-gradient(circle 6px at 9px 100%, transparent 5.5px, #000 6px) 0 0 / 18px 100% repeat-x;
  transition: transform var(--dur-slow) var(--ease); }
.how-nota::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--grad-card); opacity: .9; }
.how-nota-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.how-nota-title { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.how-postmark { width: 92px; height: auto; color: var(--violet); opacity: .55; flex: none; font-family: var(--font-mono); font-weight: 600;
  transform: rotate(-8deg); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.how-fields { display: grid; gap: 0; }
.how-fields > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--line); }
.how-fields dt { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.how-fields dd { font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.how-fields dd svg { width: 15px; height: 15px; flex: none; }
.how-sealed { color: var(--violet-ink) !important; }
.how-ok { color: var(--mint-ink) !important; }
.how-nota-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* VERIFY lights the receipt */
.how-stage[data-step="2"] .how-nota { transform: translateY(-4px); }
.how-stage[data-step="2"] .how-postmark { opacity: 1; transform: rotate(-8deg) scale(1.04); }

/* ---------- step captions ---------- */
.how-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 64px); }
.how-step { position: relative; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.how-step::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--violet);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease); }
.how-step.is-active::before { transform: scaleX(1); }
.how-step-n { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 10px;
  transition: color var(--dur) var(--ease); }
.how-step.is-active .how-step-n { color: var(--violet-ink); }
.how-step h3 { margin-bottom: 8px; }
.how-step p { color: var(--ink-2); max-width: 34ch; }

.how-hood { margin: clamp(36px, 4vw, 56px) auto 0; max-width: 72ch; text-align: center; font-size: var(--fs-small); color: var(--ink-3); }

/* ---------- tablet: tighten ---------- */
@media (max-width: 1080px) {
  .how-diagram { grid-template-columns: minmax(0, 260px) minmax(180px, 1fr) minmax(0, 290px); }
  .how-pill { min-width: 148px; height: 50px; font-size: 13.5px; }
}

/* ---------- mobile: stack, pills go 3-across ---------- */
@media (max-width: 860px) {
  .how-diagram { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .how-pay { min-height: 0; }
  .how-rails { height: auto; padding: 44px 0; }
  .how-wires { display: none; }
  .how-rails::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px;
    background: linear-gradient(180deg, var(--lilac), var(--violet) 50%, var(--lilac)); opacity: .6; }
  .how-node { left: 50%; margin-left: -5px; top: auto; margin-top: 0; }
  .how-node--l { top: -5px; right: auto; } .how-node--r { bottom: -5px; right: auto; }
  .how-pills { flex-direction: row; gap: 8px; width: 100%; justify-content: center; }
  .how-pill { min-width: 0; flex: 1 1 0; height: 46px; padding: 0 8px; font-size: 12px; letter-spacing: .1em; }
  .how-pill.is-active { transform: scale(1.04); }
  .how-steps { grid-template-columns: 1fr; gap: 28px; }
}

/* ===================== 04 · API (owner B) ===================== */
.api-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.api-left { grid-column: 1; grid-row: 1; min-width: 0; }
.api-copycol { grid-column: 2; grid-row: 1; min-width: 0; }

/* ---------- copy column ---------- */
.api-copycol h2 { max-width: 13ch; }
.api-copycol .lead { margin-top: 20px; max-width: 40ch; }
.api-bullets { list-style: none; display: grid; gap: 22px; margin: clamp(28px, 3.4vw, 40px) 0 clamp(32px, 3.6vw, 44px); }
.api-bullets li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.api-bullets p { color: var(--ink-2); padding-top: 2px; max-width: 46ch; }
.api-bullets strong { color: var(--ink); font-weight: 600; }
.api-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); color: var(--violet-ink); }
.api-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the gradient plate ---------- */
.api-plate { display: grid; place-items: center; padding: clamp(20px, 4.4vw, 64px) clamp(12px, 2.8vw, 40px); min-height: clamp(420px, 44vw, 600px); isolation: isolate; }
.api-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.api-lines g { fill: none; stroke: var(--card); stroke-opacity: .28; stroke-width: 1; }
.api-lines circle { vector-effect: non-scaling-stroke; }
.api-plate::after { content: ""; position: absolute; inset: auto -10% -30% -10%; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.35), transparent 65%); }

/* ---------- dark code card ---------- */
.api-code { position: relative; width: 100%; max-width: 580px; background: var(--navy); color: var(--on-dark-2);
  border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line-dark), var(--shadow-3), 0 2px 6px rgba(11,16,48,.25); overflow: hidden; }
.api-code-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--line-dark); }
.api-endpoint { flex: 1; min-width: 0; font-size: 13px; color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.api-sandbox { height: 26px; font-size: 12px; flex: none; }
.api-copy { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); color: var(--on-dark); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.api-copy svg { width: 16px; height: 16px; }
.api-copy:hover { background: rgba(255,255,255,.12); }
.api-copy.is-ok { color: var(--mint); background: rgba(94,234,212,.12); }
.api-code :focus-visible { box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--lilac); }

.api-tabs { position: relative; display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line-dark); isolation: isolate; }
.api-tab { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 14px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--on-dark-3); font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap; transition: color var(--dur) var(--ease); }
.api-tab:hover { color: var(--on-dark); }
.api-tab[aria-selected="true"] { color: var(--on-dark); }
.api-tab-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--lilac); }
.api-tab-ink { position: absolute; z-index: -1; top: 8px; left: 0; height: 44px; width: 0; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(167,139,250,.45), 0 6px 18px -8px rgba(124,92,255,.6);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease); }
html:not(.js) .api-tab[aria-selected="true"] { background: rgba(255,255,255,.08); }

.api-panels { min-height: calc(13.5px * 1.75 * 11 + 48px); }
.api-panel { margin: 0; padding: 22px 24px 26px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75; color: var(--on-dark-2);
  white-space: pre-wrap; overflow-wrap: break-word; tab-size: 2; border-radius: 0; }
.api-panel:focus-visible { box-shadow: inset 0 0 0 2px var(--lilac); } /* outer ring is clipped by .api-code overflow */
.api-panel.is-in { animation: api-in var(--dur) var(--ease) both; }
@keyframes api-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.api-panel .tok-fn { color: var(--pink); }
.api-panel .tok-key { color: var(--lilac); }
.api-panel .tok-str { color: var(--mint); }
.api-panel .tok-punct { color: var(--on-dark-3); }
.api-panel .tok-cmt { color: var(--on-dark-3); }
.api-panel .tok-resp { color: var(--on-dark); }

.api-honesty { margin-top: 16px; font-size: 12.5px; line-height: 1.6; letter-spacing: .02em; color: var(--ink-3); }

@media (max-width: 960px) {
  .api-grid { grid-template-columns: minmax(0, 1fr); }
  .api-left, .api-copycol { grid-column: 1; grid-row: auto; }
  .api-copycol h2 { max-width: 16ch; }
}
@media (max-width: 520px) {
  .api-plate { min-height: 0; border-radius: var(--r-lg); }
  .api-code-head { padding-left: 16px; }
  .api-tabs { padding: 6px; gap: 2px; }
  .api-tab { padding: 0 8px; font-size: 13.5px; flex: 1 1 0; }
  .api-tab-n { display: none; }
  .api-tab-ink { top: 6px; }
  .api-panel { padding: 18px 16px 22px; font-size: 12.5px; }
  .api-panels { min-height: calc(12.5px * 1.75 * 14 + 40px); }
  .api-copy { padding: 0 12px; }
}
@media (max-width: 380px) {
  .api-copy [data-api-copy-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .api-copy { width: 44px; padding: 0; justify-content: center; }
}

/* ============ 05 RECEIPTS (owner C) — Plaid gradient product card + floating .nota UI ============ */
.rcpt { --rcpt-h: 74px; --rcpt-gap: 10px; }

.rcpt-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px);
  align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
@media (max-width: 960px) { .rcpt-head { grid-template-columns: minmax(0, 1fr); } .rcpt-lead { justify-self: start; } }
.rcpt-head h2 { max-width: 13ch; }
.rcpt-lead { max-width: 44ch; justify-self: end; }

/* ---------- stage ---------- */
.rcpt-stage { position: relative; min-height: clamp(560px, 50vw, 660px); }
.rcpt-plate { position: absolute; inset: 0; box-shadow: var(--shadow-2); }
.rcpt-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
  transform: scale(1.04); transition: transform 1.6s var(--ease); }
.rcpt-stage.in .rcpt-plate img { transform: none; }
/* slow seal sweep — a soft light bar crossing the plate, only while in view */
.rcpt-sweep { position: absolute; inset: -20% auto -20% 0; width: 22%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 50%, transparent);
  transform: translateX(-120%) skewX(-12deg); opacity: 0; }
.rcpt-stage.is-live .rcpt-sweep { animation: rcpt-sweep 7s var(--ease) infinite 1.2s; }
@keyframes rcpt-sweep { 0% { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  10% { opacity: 1; } 55% { opacity: 1; } 70%, 100% { transform: translateX(560%) skewX(-12deg); opacity: 0; } }

/* ---------- glass receipt ---------- */
.rcpt-receipt { position: absolute; left: clamp(24px, 3.4vw, 48px); bottom: clamp(24px, 3.4vw, 48px); z-index: 2;
  width: min(360px, 38%); padding: 24px 24px 22px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-3); }
.rcpt-receipt-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-right: 72px; }
.rcpt-receipt-mark { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--navy); color: var(--on-dark); }
.rcpt-receipt-mark svg { width: 20px; height: 20px; }
.rcpt-receipt-kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-ink); line-height: 1.2; }
.rcpt-receipt h3 { font-size: 22px; letter-spacing: -0.025em; }
.rcpt-postmark { position: absolute; top: 14px; right: 14px; width: 84px; height: 84px; color: var(--violet-ink);
  font-family: var(--font-mono); opacity: 0; transform: rotate(-14deg) scale(1.35); }
.rcpt-stage.in .rcpt-postmark { opacity: .72; transform: rotate(-14deg) scale(1);
  transition: opacity var(--dur) var(--ease) .9s, transform var(--dur) var(--ease) .9s; }

.rcpt-fields { display: grid; border-bottom: 1px solid var(--line); }
.rcpt-fields > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--line); }
.rcpt-fields dt { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rcpt-fields dd { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 14px; color: var(--ink); text-align: right; }
.rcpt-fields dd svg { width: 15px; height: 15px; flex: none; }
.rcpt-sealed { color: var(--violet-ink) !important; }
.rcpt-verified { color: var(--mint-ink) !important; }
.rcpt-check { stroke-dasharray: 16; stroke-dashoffset: 16; }
.rcpt-stage.in .rcpt-check { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-slow) var(--ease) 1.1s; }
.rcpt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- notification feed ---------- */
.rcpt-feed-wrap { position: absolute; top: clamp(24px, 3.4vw, 48px); right: clamp(24px, 3.4vw, 48px); z-index: 2; width: min(372px, 38%); }
.rcpt-feed-label { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; margin-bottom: 12px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.rcpt-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-ink); box-shadow: 0 0 0 0 rgba(94,234,212,.7); }
.rcpt-stage.is-live .rcpt-live-dot { animation: rcpt-ping 2.2s var(--ease) infinite; }
@keyframes rcpt-ping { 0% { box-shadow: 0 0 0 0 rgba(94,234,212,.75); } 70%, 100% { box-shadow: 0 0 0 8px rgba(94,234,212,0); } }

.rcpt-feed { list-style: none; display: flex; flex-direction: column; gap: var(--rcpt-gap); }
.rcpt-note { display: flex; align-items: center; gap: 12px; height: var(--rcpt-h); padding: 0 14px 0 12px;
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.rcpt-note-no { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-sm);
  background: var(--violet-soft); color: var(--violet-ink); font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.rcpt-note-body { min-width: 0; flex: 1; display: grid; gap: 2px; }
.rcpt-note-title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.015em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.rcpt-note-sub { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.rcpt-ok-dot { display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: -2px 7px 0 0; border-radius: 50%; background: var(--mint-ink); }
.rcpt-note-meta { flex: none; display: grid; justify-items: end; gap: 4px; }
.rcpt-amt { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  background: var(--violet-soft); color: var(--violet-ink); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rcpt-amt::before { content: ""; width: 9px; height: 9px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.rcpt-time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* live mode (JS + motion allowed): cards stack absolutely and arrive from above, newest on top */
.rcpt-feed.rcpt-feed--live { position: relative; display: block; height: calc(4 * var(--rcpt-h) + 3 * var(--rcpt-gap)); }
.rcpt-feed--live .rcpt-note { position: absolute; inset: 0 0 auto 0; --slot: 0;
  transform: translateY(calc(var(--slot) * (var(--rcpt-h) + var(--rcpt-gap)))); opacity: 1;
  transition: transform .7s var(--ease), opacity .5s var(--ease), box-shadow .6s var(--ease); }
.rcpt-feed--live .rcpt-note:not(.is-shown) { transform: translateY(calc(-.6 * var(--rcpt-h))) scale(.94); opacity: 0; pointer-events: none; }
.rcpt-feed--live .rcpt-note.is-new { box-shadow: inset 0 0 0 1.5px var(--lilac), 0 0 0 5px rgba(167,139,250,.16), var(--shadow-2); }
.rcpt-feed--live.is-clearing .rcpt-note { opacity: 0; transform: translateY(calc(var(--slot) * (var(--rcpt-h) + var(--rcpt-gap)) + 8px)); }

/* ---------- code strip ---------- */
/* matches 04-api's .api-code card exactly (surface, head row, body type, token colours) */
.rcpt-code { position: relative; z-index: 3; margin: -88px clamp(24px, 3.4vw, 48px) 0 auto; max-width: 600px; padding: 0;
  background: var(--navy); color: var(--on-dark-2); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line-dark), var(--shadow-2), 0 2px 6px rgba(11,16,48,.25); overflow: hidden; }
.rcpt-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--line-dark); }
.rcpt-code-head .chip { height: 26px; font-size: 12px; flex: none; }
.rcpt-code-title { font-family: var(--font-mono); font-size: 13px; color: var(--on-dark); }
.rcpt-code-body { margin: 0; padding: 22px 24px 26px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75; color: var(--on-dark-2);
  white-space: pre-wrap; overflow-wrap: break-word; tab-size: 2; border-radius: 0; }
.rcpt-c-verb { color: var(--pink); }
.rcpt-c-path { color: var(--on-dark); }
.rcpt-c-arrow { color: var(--on-dark-3); }
.rcpt-c-status { color: var(--on-dark); }
.rcpt-c-key { color: var(--lilac); }
.rcpt-c-val, .rcpt-c-str { color: var(--mint); }
.rcpt-c-cmt { color: var(--on-dark-3); font-style: normal; }

/* ---------- tablet + mobile: plate, then the floating UI flows below ---------- */
@media (max-width: 1179px) {
  .rcpt-stage { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .rcpt-plate { position: relative; inset: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .rcpt-receipt, .rcpt-feed-wrap { position: relative; inset: auto; width: auto; }
  .rcpt-receipt { margin-top: -120px; margin-left: 20px; }
  .rcpt-feed-wrap { margin-top: 8px; margin-right: 4px; }
  .rcpt-code { margin: 24px 0 0; max-width: none; }
  /* no live stacking once the feed flows in the grid: a plain stacked list (JS skips live mode here too),
     otherwise the 4 reserved slots read as an empty band below the receipt */
  .rcpt-feed.rcpt-feed--live { height: auto; display: flex; }
  .rcpt-feed--live .rcpt-note, .rcpt-feed--live .rcpt-note:not(.is-shown) { position: relative; transform: none; opacity: 1; pointer-events: auto; }
}
@media (max-width: 760px) {
  .rcpt { --rcpt-h: 70px; }
  .rcpt-stage { grid-template-columns: 1fr; gap: 24px; }
  .rcpt-plate { aspect-ratio: 4 / 3.4; border-radius: var(--r-lg); }
  .rcpt-receipt { margin: -96px 12px 0; padding: 20px 18px 18px; }
  .rcpt-feed-wrap { margin: 0; }
  .rcpt-postmark { width: 70px; height: 70px; top: 10px; right: 10px; }
  .rcpt-receipt-head { padding-right: 60px; }
  .rcpt-code-head { padding-left: 16px; }
  .rcpt-code-body { padding: 18px 16px 22px; font-size: 12.5px; }
}
@media (max-width: 480px) {
  .rcpt { --rcpt-h: 84px; }
  .rcpt-note-no { width: 40px; height: 40px; font-size: 12.5px; }
  .rcpt-note-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (prefers-reduced-motion: reduce) {
  .rcpt-plate img { transform: none; }
  .rcpt-postmark { opacity: .72; transform: rotate(-14deg); }
  .rcpt-check { stroke-dashoffset: 0; }
  .rcpt-sweep { display: none; }
}
html:not(.js) .rcpt-postmark { opacity: .72; transform: rotate(-14deg); }
html:not(.js) .rcpt-check { stroke-dashoffset: 0; }

/* ============ 06 COMPLIANCE (owner C) — envelope access table + the quadrant ============ */
.comp-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px);
  align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.comp-head h2 { max-width: 15ch; }
.comp-head-side .lead { max-width: 46ch; }
.comp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.comp-chips .chip { height: 34px; padding: 0 14px; }

.comp-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; }

/* ---------- envelope access table ---------- */
/* table card + quadrant share one surface: white card, shadow-2, r-xl */
.comp-table-card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: 10px clamp(10px, 1.4vw, 18px) 14px; }
.comp-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; text-align: left; }
.comp-caption { caption-side: top; text-align: left; padding: 14px 10px 4px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.comp-table thead th { padding: 8px 18px 2px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); }
.comp-table tbody th, .comp-table tbody td { background: var(--paper); padding: 20px 18px; vertical-align: middle;
  font-size: 15.5px; line-height: 1.4; color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.comp-table tbody th { font-family: var(--font-display); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; width: 34%;
  border-radius: var(--r-md) 0 0 var(--r-md); }
.comp-table tbody td:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.comp-table tbody tr { border-radius: var(--r-md); }
.comp-who { display: flex; align-items: center; gap: 12px; }
.comp-key { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--paper-3); color: var(--ink-2); }
.comp-key svg { width: 22px; height: 22px; stroke-width: 1.6; }
.comp-see { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.comp-see::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.comp-see--law { color: var(--violet-ink); }
.comp-see--crowd { color: var(--exposed); }
.comp-row--law th, .comp-row--law td { background: linear-gradient(90deg, var(--violet-soft), var(--paper) 70%); }
.comp-row--law td { background: var(--paper); }
.comp-row--law th { box-shadow: inset 3px 0 0 var(--violet); }
.comp-row--law .comp-key { background: var(--card); color: var(--violet-ink); }
.comp-row--crowd .comp-key { color: var(--exposed); background: var(--exposed-soft); }
@media (hover: hover) {
  .comp-table tbody tr:hover th, .comp-table tbody tr:hover td { background: var(--paper-2); }
  .comp-row--law:hover th { background: var(--violet-soft); }
}

/* stagger the rows in once the card reveals */
.comp-table tbody tr { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.comp-table-card.in tbody tr { opacity: 1; transform: none; }
.comp-table-card.in tbody tr:nth-child(2) { transition-delay: .1s; }
.comp-table-card.in tbody tr:nth-child(3) { transition-delay: .2s; }
.comp-table-card.in tbody tr:nth-child(4) { transition-delay: .3s; }
html:not(.js) .comp-table tbody tr { opacity: 1; transform: none; }

/* ---------- quadrant ---------- */
.comp-quad { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: clamp(20px, 2.4vw, 32px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.comp-quad-plot { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; flex: 1; }
.comp-ax { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.comp-ax--y { grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); }
.comp-ax--x { grid-row: 2; grid-column: 2; }
.comp-ax::after { content: ""; order: 1; flex: 1; min-width: 16px; min-height: 16px; align-self: stretch; margin: 0 2px;
  background: linear-gradient(90deg, var(--line-strong), var(--violet)) center / 100% 1.5px no-repeat; }
.comp-ax--y::after { background: linear-gradient(180deg, var(--line-strong), var(--violet)) center / 1.5px 100% no-repeat; }
.comp-ax span:last-child { order: 2; color: var(--violet-ink); }

.comp-cells { list-style: none; grid-row: 1; grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; min-height: 300px; }
.comp-cell { position: relative; border-radius: var(--r-md); background: var(--paper); padding: 16px; display: flex; align-items: flex-start; }
.comp-cell--tl { order: 1; } .comp-cell--tr { order: 2; } .comp-cell--bl { order: 3; } .comp-cell--br { order: 4; }
.comp-names { display: grid; gap: 2px; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.comp-cell--br .comp-names { color: var(--ink-3); }
.comp-cell--bl { background: var(--paper); overflow: hidden; }
.comp-cell--bl::before { content: ""; position: absolute; inset: 0; opacity: .7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='20' viewBox='0 0 120 20'%3E%3Cpath d='M0 10 C20 4 40 16 60 10 S100 4 120 10' fill='none' stroke='%237C5CFF' stroke-opacity='.16' stroke-width='.8'/%3E%3C/svg%3E");
  background-size: 120px 8px; }

.comp-cell--tr { background: var(--violet-soft); box-shadow: inset 0 0 0 1.5px var(--lilac); align-items: center; justify-content: center; }
.comp-aroko { display: grid; justify-items: center; gap: 10px; position: relative; z-index: 1; }
.comp-aroko-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--navy); color: var(--on-dark);
  box-shadow: 0 12px 28px -12px rgba(83,56,214,.6); }
.comp-aroko-mark svg { width: 26px; height: 26px; }
.comp-aroko-word { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.03em; color: var(--ink); }
.comp-cell--tr::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(124,92,255,.35); opacity: 0; }
.comp-quad.in .comp-cell--tr::after { animation: comp-ring 1.6s var(--ease) .7s 2 both; }
@keyframes comp-ring { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(124,92,255,.38); } 100% { opacity: 0; box-shadow: 0 0 0 14px rgba(124,92,255,0); } }
.comp-cell--tr .comp-aroko-mark { transform: scale(.8); opacity: 0; transition: transform var(--dur-slow) var(--ease) .45s, opacity var(--dur) var(--ease) .45s; }
.comp-quad.in .comp-cell--tr .comp-aroko-mark { transform: none; opacity: 1; }
html:not(.js) .comp-cell--tr .comp-aroko-mark { transform: none; opacity: 1; }

.comp-quad-cap { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.02em; color: var(--ink); line-height: 1.25; }

@media (max-width: 960px) { .comp-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .comp-grid { grid-template-columns: 1fr; }
  .comp-quad { max-width: 560px; }
}

/* ---------- mobile: rows reflow into stacked cards, table semantics kept via roles ---------- */
@media (max-width: 760px) {
  .comp-table-card { padding: 6px 8px 8px; border-radius: var(--r-lg); }
  .comp-table, .comp-table tbody, .comp-table tr, .comp-table th, .comp-table td { display: block; width: 100%; }
  .comp-table caption { display: block; padding: 12px 10px 10px; }
  .comp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .comp-table tbody { display: grid; gap: 8px; }
  .comp-table tbody tr { background: var(--paper); border-radius: var(--r-md); overflow: hidden; }
  .comp-table tbody th, .comp-table tbody td { border-radius: 0; background: transparent; width: auto; }
  .comp-table tbody th { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
  .comp-table tbody td { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 12px; padding: 10px 16px; font-size: 15px; }
  .comp-table tbody td:last-child { border-radius: 0; padding-bottom: 16px; }
  .comp-table tbody td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.6; }
  .comp-row--law th { background: var(--violet-soft); box-shadow: inset 3px 0 0 var(--violet); }
  .comp-row--law td { background: transparent; }
  .comp-cells { min-height: 260px; }
  .comp-cell { padding: 12px; }
  .comp-names { font-size: 13.5px; }
  .comp-aroko-mark { width: 46px; height: 46px; border-radius: 14px; }
  .comp-aroko-mark svg { width: 22px; height: 22px; }
}
@media (max-width: 520px) {
  .comp-table tbody td { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 380px) {
  .comp-ax { font-size: 12px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .comp-table tbody tr { opacity: 1; transform: none; }
  .comp-cell--tr .comp-aroko-mark { transform: none; opacity: 1; }
  .comp-quad.in .comp-cell--tr::after { animation: none; }
}

/* ============ 07 NAME (owner C) — Plaid's deep navy feature card, engraved aroko cord ============ */
.name-card { --pad: clamp(28px, 5.6vw, 88px); padding: var(--pad); isolation: isolate; box-shadow: var(--shadow-3); }
.name-guilloche { opacity: 1; z-index: 0; inset: 0 40% 20% 0;
  mask-image: radial-gradient(ellipse at 20% 35%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 20% 35%, #000 0%, transparent 72%); }

/* the cord plate: bleeds off the top/right edges and dissolves into navy */
.name-visual { position: absolute; top: -16px; right: -16px; width: 58%; height: 82%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 58%, transparent 100%);
  mask-composite: intersect; }
.name-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%;
  opacity: 0; transform: scale(1.08); transition: opacity 1.4s var(--ease), transform 2.2s var(--ease); }
.name-card.in .name-visual img { opacity: 1; transform: scale(1); }
.name-card.is-live .name-visual { animation: name-drift 14s ease-in-out infinite alternate; }
@keyframes name-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-10px, 8px, 0); } }

.name-main { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: end; min-height: clamp(380px, 32vw, 480px); }
.name-copy { align-self: start; max-width: 600px; }
.name-copy h2 { max-width: 15ch; }
.name-copy .eyebrow { color: var(--on-dark); }
.name-copy h2 { font-size: var(--fs-h2); letter-spacing: -0.04em; line-height: 1.02; }
.name-h2-2 { display: block; color: var(--on-dark-3); }
.name-body { margin-top: 28px; font-size: var(--fs-lead); line-height: 1.6; color: var(--on-dark-2); max-width: 42ch; }

/* definition card — glass on dark */
.name-def { justify-self: end; width: min(100%, 400px); padding: 24px 26px 26px; border-radius: var(--r-lg);
  background: rgba(11,16,48,.52); border: 1px solid var(--line-dark);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6); }
.name-def dt { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin-bottom: 14px; }
.name-def dt::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.name-def dd { font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4; letter-spacing: -0.015em; color: var(--on-dark); }

/* three artifacts */
.name-artifacts { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px); margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-dark); }
.name-art { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 2px; align-items: start; }
.name-art-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line-dark); color: var(--lilac);
  transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.name-art:nth-child(3) .name-art-icon { color: var(--mint); }
.name-art-icon svg { width: 22px; height: 22px; }
/* glyphs are drawn on a 32 grid: 2.13 user units = the shared 1.6 stroke on a 24 grid */
.name-art-icon svg, .name-art-icon svg [stroke-width] { stroke-width: 2.13; }
.name-art h3 { font-size: 18px; letter-spacing: -0.015em; line-height: 1.3; padding-top: 0; color: var(--on-dark); }
.name-art p { font-size: 15px; line-height: 1.5; color: var(--on-dark-2); }
@media (hover: hover) {
  .name-art:hover .name-art-icon { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--lilac); }
}

/* ---------- tablet + mobile: copy, then the plate full-bleed, the definition card overlapping it ---------- */
@media (max-width: 1179px) {
  .name-card { display: flex; flex-direction: column; }
  .name-main { display: contents; }
  .name-copy { order: 1; position: relative; z-index: 1; max-width: 640px; }
  .name-visual { order: 2; position: relative; inset: auto; width: auto; height: auto; aspect-ratio: 16 / 8; opacity: 1;
    margin: 0 calc(-1 * var(--pad)); animation: none !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 68%, transparent 100%); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 68%, transparent 100%); mask-composite: add; }
  .name-visual img { object-position: 50% 50%; }
  .name-def { order: 3; position: relative; z-index: 1; margin-top: -96px; justify-self: auto; align-self: flex-end; width: min(100%, 440px); }
  .name-artifacts { order: 4; }
}
@media (min-width: 761px) and (max-width: 1179px) {
  .name-visual { aspect-ratio: 16 / 7.5; margin-top: -140px; }
}
@media (max-width: 760px) {
  .name-card { --pad: 24px; border-radius: var(--r-lg); padding-top: 40px; }
  .name-visual { aspect-ratio: 5 / 4; margin-top: 4px; }
  .name-visual img { object-position: 62% 50%; }
  .name-def { margin-top: -56px; width: 100%; padding: 20px 20px 22px; }
  .name-artifacts { grid-template-columns: 1fr; margin-top: 40px; gap: 24px; }
  .name-body { margin-top: 20px; font-size: 17px; }
  .name-guilloche { inset: 0 0 50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .name-visual img { opacity: 1; transform: none; }
  .name-card .name-visual { animation: none; }
}
html:not(.js) .name-visual img { opacity: 1; transform: none; }

/* ============ 08 proof — owner D ============ */
.proof { overflow: clip; }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }

/* ---- left: ribbon stage + floating notification cards ---- */
/* column: the category caption sits above the cards, never beside them */
.proof-stage { position: relative; min-height: 640px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; isolation: isolate; }
.proof-ribbon { position: absolute; inset: -48px -12% -48px -18%; width: 130%; height: calc(100% + 96px); z-index: -1; opacity: .9; }
.proof-ribbon path { vector-effect: non-scaling-stroke; }
.proof-ribbon-a { opacity: .78; }
.proof-ribbon-b { opacity: .46; }
.proof-packets { stroke: var(--mint); stroke-dasharray: 46 954; stroke-dashoffset: 1000; opacity: 0; }

.proof-feed { list-style: none; display: grid; gap: 18px; width: 100%; padding-block: 24px; }
.proof-card { --x: 0%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 10px; align-items: start; gap: 14px;
  width: min(100%, 396px); margin-left: var(--x); padding: 16px 18px 16px 16px;
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); }
.proof-card:nth-child(1) { --x: 4%; }
.proof-card:nth-child(2) { --x: 26%; }
.proof-card:nth-child(3) { --x: 10%; }
.proof-card:nth-child(4) { --x: 32%; }
.proof-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--grad-card); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.proof-ico svg { width: 22px; height: 22px; stroke-width: 1.6; }
.proof-body { display: grid; gap: 4px; min-width: 0; }
.proof-tag { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-ink); }
.proof-text { font-size: 15px; line-height: 1.45; color: var(--ink); }
.proof-tick { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--mint-ink); box-shadow: 0 0 0 4px var(--mint-soft); }

/* ---- right: copy + gradient numerals ---- */
.proof-copy h2 { max-width: 13ch; }
.proof-lead { margin-top: 24px; max-width: 44ch; }
.proof-nums { list-style: none; margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }
.proof-num { display: grid; grid-template-columns: minmax(0, 3.2ch) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.4vw, 32px);
  padding-block: clamp(14px, 1.6vw, 22px); border-bottom: 1px solid var(--line); font-size: clamp(52px, 6.4vw, 92px); }
.proof-fig { font-family: var(--font-display); font-weight: 600; font-size: 1em; line-height: .95; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; background: var(--grad-num); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .04em; }
.proof-cap { font-size: var(--fs-body); line-height: 1.45; color: var(--ink-2); max-width: 30ch; }

/* ---- motion: only while in view ---- */
@media (prefers-reduced-motion: no-preference) {
  .proof-ribbon-a { animation: proof-drift-a 16s var(--ease) infinite alternate; }
  .proof-ribbon-b { animation: proof-drift-b 21s var(--ease) infinite alternate; }
  .proof-packets { opacity: .95; }
  .proof-packet { animation: proof-packet 7s linear infinite; }
  .proof-packet.p1 { animation-delay: -2.4s; animation-duration: 8.5s; }
  .proof-packet.p2 { animation-delay: -4.9s; animation-duration: 7.6s; }
  .proof-card.in { animation: proof-bob 6s var(--ease) infinite alternate; }
  .proof-card.in:nth-child(2) { animation-duration: 7.2s; animation-delay: -1.8s; }
  .proof-card.in:nth-child(3) { animation-duration: 6.6s; animation-delay: -3.1s; }
  .proof-card.in:nth-child(4) { animation-duration: 7.8s; animation-delay: -.9s; }
  .proof:not(.is-live) .proof-ribbon *, .proof:not(.is-live) .proof-card { animation-play-state: paused; }
}
@keyframes proof-drift-a { to { translate: -18px 14px; } }
@keyframes proof-drift-b { to { translate: 16px -12px; } }
@keyframes proof-packet { to { stroke-dashoffset: 0; } }
@keyframes proof-bob { to { translate: 0 -7px; } }

/* ---- responsive ---- */
@media (max-width: 960px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .proof-copy { order: -1; }
  .proof-stage { min-height: 0; }
  .proof-ribbon { inset: -40px -30%; width: 160%; height: calc(100% + 80px); }
  .proof-card { width: min(100%, 400px); }
  .proof-card:nth-child(odd) { --x: 0%; }
  .proof-card:nth-child(even) { --x: max(0%, calc(100% - 400px)); }
}
@media (max-width: 520px) {
  .proof-feed { gap: 14px; }
  .proof-card { grid-template-columns: 44px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .proof-card { width: calc(100% - 24px); }
  .proof-card:nth-child(even) { --x: 24px; }
  .proof-tick { display: none; }
  .proof-num { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* attribution captions (deck slide 8): mainnet proof belongs to the category, the numbers to Aroko */
.proof-stage > .proof-cap, .proof-copy > .proof-cap { position: relative; z-index: 1; max-width: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.proof-copy > .proof-cap + .proof-nums { margin-top: 14px; }
.proof-stage > .proof-cap + .proof-feed { padding-top: 14px; }
.proof-nums + .proof-cap, .proof-lead + .proof-cap { margin-top: clamp(32px, 3.5vw, 48px); }

/* ============ 09 vision + waitlist — owner D ============ */

/* ---- vision band: Today / Next / Then ---- */
.wl-vision { padding-bottom: 0; }
/* the timeline sits on an engraved paper panel (same treatment as 03's .how-stage) */
.wl-track { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); background: var(--paper-2);
  padding: clamp(28px, 4vw, 56px); }
.wl-track-lines { z-index: -1; opacity: .8; }
.wl-vision .sec-head h2 { max-width: 16ch; }
.wl-line { --node: 18px; list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px); padding-top: calc(var(--node) + 28px); }
.wl-line::before, .wl-line::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--node) / 2); height: 1px; }
.wl-line::before { background: var(--line-strong); }
.wl-line::after { height: 2px; margin-top: -.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--mint), var(--violet) 45%, var(--lilac) 80%, transparent);
  transform: scaleX(0); transform-origin: left center; transition: transform 1.6s var(--ease) .1s; }
.wl-line:has(.in)::after, html:not(.js) .wl-line::after { transform: none; }
.wl-stop { position: relative; display: grid; gap: 10px; align-content: start; }
.wl-node { position: absolute; top: calc(-1 * (var(--node) + 28px)); left: 0; width: var(--node); height: var(--node); border-radius: 50%;
  background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--lilac); }
.wl-stop:nth-child(2) .wl-node { box-shadow: inset 0 0 0 2px var(--violet); }
.wl-stop:nth-child(3) .wl-node { box-shadow: inset 0 0 0 1.5px var(--lilac); outline: 1.5px dashed var(--lilac); outline-offset: 3px; }
.wl-stop.is-now .wl-node { background: var(--mint-ink); box-shadow: 0 0 0 5px var(--mint-soft); }
.wl-when { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-ink); }
.wl-stop.is-now .wl-when { color: var(--mint-ink); }
.wl-what { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); max-width: 24ch; }
.wl-stop:not(.is-now) .wl-what { color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
  .wl-stop.is-now .wl-node::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--mint-ink);
    animation: wl-ping 2.8s var(--ease) infinite; }
  .wl-vision:not(.is-live) .wl-node::after { animation-play-state: paused; }
}
@keyframes wl-ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }

@media (max-width: 760px) {
  .wl-line { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 0; padding-left: calc(var(--node) + 22px); }
  .wl-line::before, .wl-line::after { left: calc(var(--node) / 2); right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .wl-line::after { width: 2px; margin: 0 0 0 -.5px; background: linear-gradient(180deg, var(--mint), var(--violet) 45%, var(--lilac) 80%, transparent);
    transform: scaleY(0); transform-origin: center top; }
  .wl-node { top: 4px; left: calc(-1 * (var(--node) + 22px)); }
}

/* ---- the form card: deep navy, gradient ring edge ---- */
/* vision panel → waitlist card: one deliberate gap, the same step as a section head to its content */
.wl-vision + .wl { padding-top: clamp(40px, 5vw, 72px); }
.wl-ring { padding: 1.5px; border-radius: var(--r-xl); background: var(--grad-ring); box-shadow: var(--shadow-3); }
.wl-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start;
  padding: clamp(28px, 5.5vw, 80px); border-radius: calc(var(--r-xl) - 1.5px); isolation: isolate; }
.wl-guilloche { opacity: .9; z-index: -1; mask-image: radial-gradient(ellipse at 10% 90%, #000 0%, transparent 60%); -webkit-mask-image: radial-gradient(ellipse at 10% 90%, #000 0%, transparent 60%); }
.wl-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 100% 0%, color-mix(in oklab, var(--violet) 34%, transparent), transparent 70%),
              radial-gradient(45% 55% at 0% 100%, color-mix(in oklab, var(--mint) 16%, transparent), transparent 70%); }
.wl-intro { position: relative; display: grid; align-content: start; min-height: 100%; }
.wl-intro h2 { max-width: 11ch; }
.wl-lead { margin-top: 20px; color: var(--on-dark-2); max-width: 36ch; }
.wl-stamp { width: 128px; height: 128px; margin-top: clamp(32px, 5vw, 64px); color: var(--on-dark-3); opacity: .55; }
.wl-stamp text { font-family: var(--font-mono); font-weight: 600; }

/* ---- fields ---- */
.wl-panel { position: relative; }
.wl-form { display: grid; gap: 22px; }
.wl-field { display: grid; gap: 8px; }
.wl-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; color: var(--on-dark); }
.wl-opt { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3); }
.wl-input { width: 100%; height: 56px; padding: 0 18px; border-radius: var(--r-sm); font-size: 16px; color: var(--on-dark);
  background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.wl-input::placeholder { color: var(--on-dark-3); opacity: 1; }
.wl-input:hover { border-color: rgba(255,255,255,.26); }
.wl-input:focus, .wl-input:focus-visible { border-color: var(--lilac); background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--lilac) 28%, transparent); border-radius: var(--r-sm); }
.wl-input[aria-invalid="true"] { border-color: var(--exposed); box-shadow: 0 0 0 4px color-mix(in oklab, var(--exposed) 22%, transparent); }
.wl-input:-webkit-autofill { -webkit-text-fill-color: var(--on-dark); -webkit-box-shadow: 0 0 0 40px var(--navy-2) inset; caret-color: var(--on-dark); }
.wl-select { position: relative; }
.wl-select select { padding-right: 48px; cursor: pointer; }
.wl-select select option { color: var(--ink); background: var(--card); }
.wl-select svg { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--on-dark-2); pointer-events: none; }
.wl-err { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--exposed-soft); }
.wl-err::before { content: ""; flex: none; margin-top: .52em; width: 6px; height: 6px; border-radius: 50%; background: var(--exposed); box-shadow: 0 0 0 3px color-mix(in oklab, var(--exposed) 30%, transparent); }
.wl-err:not([hidden]) { animation: wl-err-in var(--dur) var(--ease); }
@keyframes wl-err-in { from { opacity: 0; transform: translateY(-4px); } }
.wl-submit { --h: 56px; width: 100%; margin-top: 6px; }
.wl-fine { font-size: var(--fs-small); line-height: 1.5; color: var(--on-dark-3); }
.wl-form .wl-fine { text-align: center; }
.wl-mailto { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--lilac); text-underline-offset: 3px; }
.wl-mailto:hover { text-decoration-color: var(--mint); }

/* ---- success: the sealed envelope ---- */
.wl-done { display: grid; justify-items: center; text-align: center; gap: 10px; padding-block: clamp(8px, 3vw, 40px); }
.wl-env { width: min(220px, 70%); height: auto; margin-bottom: 18px; overflow: visible; }
.wl-env-body { fill: rgba(255,255,255,.05); stroke: var(--lilac); stroke-width: 1.5; }
.wl-env-flap, .wl-env-fold { fill: none; stroke: var(--lilac); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wl-env-fold { stroke: var(--on-dark-3); stroke-width: 1; opacity: .7; }
.wl-seal circle { fill: var(--violet); stroke: var(--lilac); stroke-width: 2; }
.wl-seal g { fill: #fff; }
.wl-seal { transform-box: fill-box; transform-origin: center; }
.wl-done-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.03em; }
.wl-done-title:focus { box-shadow: none; }
.wl-done-title:focus-visible { box-shadow: var(--focus); }
.wl-done-copy { font-size: var(--fs-lead); color: var(--on-dark-2); }
.wl-done .wl-fine { margin-top: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .wl.is-live .wl-stamp { animation: wl-spin 60s linear infinite; }
  .wl-done:not([hidden]) .wl-env { animation: wl-rise var(--dur-slow) var(--ease) both; }
  .wl-done:not([hidden]) .wl-env-flap { stroke-dasharray: 240; animation: wl-draw 1s var(--ease) .2s both; }
  .wl-done:not([hidden]) .wl-seal { animation: wl-stamp .7s var(--ease) .75s both; }
  .wl-done:not([hidden]) > :not(.wl-env) { animation: wl-rise var(--dur-slow) var(--ease) .9s both; }
}
@keyframes wl-spin { to { transform: rotate(360deg); } }
@keyframes wl-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes wl-draw { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes wl-stamp { from { opacity: 0; transform: scale(1.6) rotate(-14deg); } }

@media (max-width: 960px) {
  .wl-card { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wl-stamp { display: none; }
}
@media (max-width: 520px) {
  .wl > .wrap { padding-inline: 12px; }
  .wl-card { padding: 28px 20px 24px; }
}
.wl-err[hidden], .wl-done[hidden], .wl-form[hidden] { display: none; }

/* ============ 10 footer — owner D ============ */
.foot { padding: 0 12px 12px; }
.foot-card { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); border-radius: var(--r-xl); color: var(--on-dark-2); }
.foot-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 90% at 100% 100%, color-mix(in oklab, var(--indigo) 70%, transparent), transparent 70%); }
.foot-guilloche { z-index: -1; opacity: .7; mask-image: radial-gradient(ellipse at 85% 20%, #000 0%, transparent 55%); -webkit-mask-image: radial-gradient(ellipse at 85% 20%, #000 0%, transparent 55%); }
.foot-inner { padding-block: clamp(56px, 7vw, 104px) clamp(24px, 3vw, 36px); }

.foot-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.foot-logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--on-dark);
  font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.03em; }
.foot-logo svg { width: 30px; height: 30px; }
.foot-line { margin-top: 22px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -0.035em; max-width: 14ch; }
.foot-tagline { margin-top: 20px; max-width: 46ch; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; line-height: 1.8;
  letter-spacing: .14em; color: var(--on-dark-3); }

.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: end; gap: clamp(32px, 5vw, 80px); }
.foot-h { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-3); margin-bottom: 12px; }
.foot-col ul { list-style: none; display: grid; }
.foot-col a { position: relative; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 16px; color: var(--on-dark);
  background: linear-gradient(90deg, var(--mint), var(--lilac)) no-repeat left calc(50% + 13px) / 0% 1px;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease); }
.foot-col a:hover { background-size: 100% 1px; }
.foot-col a:focus-visible { box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--lilac); }

.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: clamp(56px, 7vw, 96px);
  padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: var(--fs-small); color: var(--on-dark-3); }
.foot-gloss { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; }

/* the oversized wordmark, cropped by the card edge */
.foot-word { position: relative; z-index: -1; margin: -0.18em 0 -0.26em; padding-inline: var(--gutter); text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(96px, 23vw, 360px); line-height: 1; letter-spacing: -0.06em;
  background: linear-gradient(180deg, color-mix(in oklab, var(--lilac) 26%, transparent), transparent 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; pointer-events: none; }

@media (max-width: 960px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { justify-content: start; }
}
@media (max-width: 560px) {
  .foot { padding: 0 8px 8px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .foot-col:last-child { grid-column: 1 / -1; }
  .foot-bottom { flex-direction: column; }
}
@media (max-width: 480px) {
  .foot-word { font-size: 32vw; padding-inline: 0; }
}