/* ============================================================
   ACP — Agentic Control Plane · Production landing page
   ============================================================ */

:root{
  --bg:#0A0A0A;
  --surface-1:#141414;
  --surface-2:#1C1C1C;
  --surface-3:#222222;
  --border:#262626;
  --border-bright:#3A3A3A;
  --text-hi:#FAFAFA;
  --text-mid:#A1A1A1;
  --text-lo:#525252;
  --accent:#00E5FF;
  --accent-dim:rgba(0,229,255,.12);
  --amber:#FFB800;
  --danger:#FF4D4D;
  --serif:"Fraunces", "Times New Roman", serif;
  --sans:"Inter", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --max:1280px;
  --pad-x:clamp(24px, 5vw, 80px);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--text-hi); font-family:var(--sans); -webkit-font-smoothing:antialiased;}
body{overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
::selection{background:var(--accent); color:#000;}

/* ============ Section shell ============ */
section{
  position:relative;
  border-bottom:1px solid var(--border);
  padding: clamp(96px, 12vw, 180px) var(--pad-x);
}
.section-number{
  display:none;
  position:absolute; top:24px; left:var(--pad-x);
  font-family:var(--mono); font-size:11px; letter-spacing:.25em; color:var(--text-lo);
  z-index:2;
}
.container{max-width:var(--max); margin:0 auto; position:relative;}

/* ============ Eyebrow + headings ============ */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.35em;
  color:var(--accent); text-transform:uppercase; margin-bottom:32px;
  display:inline-block;
}
.eyebrow--muted{color:var(--text-lo);}
.eyebrow--amber{color:var(--amber);}

h1,h2,h3{font-family:var(--serif); font-weight:700; letter-spacing:-0.03em; line-height:1;}
h1{font-size:clamp(56px, 10vw, 140px); font-weight:900; letter-spacing:-0.045em;}
h2{font-size:clamp(44px, 6.5vw, 96px); line-height:1.02; letter-spacing:-0.035em;}
h3{font-size:clamp(24px, 2.8vw, 32px);}

.accent{color:var(--accent);}
.amber{color:var(--amber);}
.muted{color:var(--text-mid);}
.dim{color:var(--text-lo);}
.serif-italic{font-family:var(--serif); font-style:italic; font-weight:400;}

.lede{
  font-size:clamp(16px, 1.25vw, 19px); line-height:1.6;
  color:var(--text-mid); max-width:64ch;
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:8px;
  font-weight:600; font-size:14px; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  transition: transform .25s ease, background .2s ease, border-color .2s ease, box-shadow .3s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn--primary{background:var(--accent); color:#000; box-shadow:0 0 0 0 rgba(0,229,255,0);}
.btn--primary:hover{box-shadow:0 8px 32px rgba(0,229,255,.35);}
.btn--primary.glow{animation: primaryGlow 2.6s ease-in-out infinite;}
@keyframes primaryGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,0), 0 8px 24px rgba(0,229,255,.25);}
  50%{box-shadow:0 0 0 6px rgba(0,229,255,.08), 0 8px 36px rgba(0,229,255,.55);}
}
.btn--ghost{background:var(--surface-1); color:var(--text-hi); border-color:var(--border-bright);}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn--outline{background:transparent; color:var(--text-hi); border-color:var(--border-bright);}
.btn--outline:hover{border-color:var(--text-hi);}

/* ============ Nav ============ */
nav.top{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px var(--pad-x);
  background: rgba(10,10,10,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
nav.top.is-scrolled{background:rgba(10,10,10,.82); border-bottom-color:var(--border);}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-weight:700;
  letter-spacing:-.015em; font-size:20px;
  color:var(--text-hi); text-decoration:none;
}
.logo .mark{
  flex-shrink:0;
  filter: drop-shadow(0 0 10px rgba(0,229,255,.3));
  transition: transform .6s cubic-bezier(.2,.9,.3,1.2), filter .3s;
}
.logo:hover .mark{
  transform: rotate(-12deg);
  filter: drop-shadow(0 0 16px rgba(0,229,255,.55));
}
.logo .wordmark{
  font-family:var(--serif); font-weight:700;
  font-size:20px; letter-spacing:-.02em;
  line-height:1;
  background: linear-gradient(180deg, var(--text-hi), #D4D4D4);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
footer .logo .wordmark{font-size:17px;}
footer .logo{gap:8px;}
nav.top ul{display:flex; gap:36px; list-style:none; font-size:13px; color:var(--text-mid); font-weight:500;}
nav.top ul li{cursor:pointer; transition:color .2s;}
nav.top ul li:hover{color:var(--text-hi);}
.nav-right{display:flex; gap:10px; align-items:center;}
.stars-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:100px;
  background:var(--surface-1); border:1px solid var(--border-bright);
  font-family:var(--mono); font-size:12px; color:var(--text-hi);
  transition: border-color .2s;
}
.stars-pill:hover{border-color:var(--accent);}
.stars-pill .star{color:var(--amber);}
.stars-pill .count{color:var(--text-mid);}

/* ============ S01 HERO ============ */
.hero{
  min-height:100vh; display:grid; place-items:center; text-align:center;
  padding-top:64px; padding-bottom:80px;
  overflow:hidden;
}
#hero-canvas{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 45%, transparent 0%, rgba(10,10,10,.55) 75%, var(--bg) 100%),
    linear-gradient(to bottom, transparent 60%, var(--bg));
}
.hero .container{z-index:2;}
.hero-tag{
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 16px; border-radius:100px;
  background:rgba(20,20,20,.65); backdrop-filter:blur(6px);
  border:1px solid var(--border);
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--text-mid); text-transform:uppercase;
  margin-bottom:40px;
}
.hero-tag .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px var(--accent);
  animation: heroDot 2.2s ease-in-out infinite;
}
@keyframes heroDot{0%,100%{opacity:.5; transform:scale(.9);} 50%{opacity:1; transform:scale(1.15);}}

.hero h1 .line{display:block; overflow:hidden;}
.hero h1 .line-inner{display:block;}

.hero .sub{margin:36px auto 0; text-align:center;}
.hero .sub b{color:var(--text-hi); font-weight:500;}
.hero .ctas{display:flex; gap:14px; justify-content:center; margin-top:44px; flex-wrap:wrap;}

.trust-row{
  margin-top:84px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.36em;
  color:var(--text-lo); text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap;
}
.trust-row .label{color:var(--text-mid);}
.trust-row .sep{color:var(--text-lo); opacity:.5;}

/* ============ Drawer modal ============ */
.drawer-backdrop{
  position:fixed; inset:0; z-index:100;
  background:rgba(5,5,5,.75); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition: opacity .35s ease;
}
.drawer-backdrop.is-open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:101;
  width:min(620px, 94vw);
  background:var(--surface-1); border-left:1px solid var(--border);
  transform:translateX(100%); transition: transform .45s cubic-bezier(.2,.9,.3,1);
  display:flex; flex-direction:column;
  box-shadow:-30px 0 80px rgba(0,0,0,.6);
}
.drawer.is-open{transform:translateX(0);}
.drawer-head{
  padding:28px 32px 20px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  flex-shrink:0;
}
.drawer-eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em;
  color:var(--accent); text-transform:uppercase; margin-bottom:10px;
}
.drawer-title{font-family:var(--serif); font-weight:700; font-size:32px; letter-spacing:-.02em; line-height:1.1;}
.drawer-close{
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--border-bright); color:var(--text-mid);
  display:grid; place-items:center; font-size:18px; flex-shrink:0;
  transition: border-color .2s, color .2s;
}
.drawer-close:hover{border-color:var(--accent); color:var(--accent);}
.drawer-body{
  padding:28px 32px; overflow-y:auto; flex:1;
  font-size:14px; color:var(--text-mid); line-height:1.6;
}
.drawer-body h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em;
  color:var(--text-lo); text-transform:uppercase; margin: 28px 0 14px;
  font-weight:500;
}
.drawer-body h4:first-child{margin-top:0;}
.drawer-body .lede{font-size:16px; color:var(--text-hi); margin-bottom:4px;}
.drawer-list{list-style:none; display:flex; flex-direction:column; gap:10px; margin: 10px 0;}
.drawer-list li{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; background:var(--surface-2); border-radius:6px;
  border:1px solid var(--border);
  font-size:13.5px;
}
.drawer-list li::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);
  margin-top:7px; flex-shrink:0;
}
.drawer-code{
  background:var(--bg); border:1px solid var(--border); border-radius:6px;
  padding:16px; font-family:var(--mono); font-size:12.5px;
  color:var(--text-hi); line-height:1.65; overflow-x:auto;
}
.drawer-code .c{color:var(--text-lo);}
.drawer-code .k{color:#FF79C6;}
.drawer-code .f{color:var(--accent);}
.drawer-code .s{color:var(--amber);}
.drawer-map{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.drawer-map .mp{
  padding:10px 12px; border:1px solid var(--border); border-radius:6px;
  background:var(--surface-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
}
.drawer-map .mp b{color:var(--accent); font-weight:500; display:block; margin-bottom:3px; letter-spacing:.15em;}
.drawer-cta{
  padding:20px 32px; border-top:1px solid var(--border);
  display:flex; gap:10px; flex-shrink:0;
}

.ctrl-group{cursor:pointer;}

/* ============ Mobile nav ============ */
.nav-toggle{
  display:none;
  width:40px; height:40px; border-radius:8px;
  border:1px solid var(--border-bright); color:var(--text-hi);
  align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
}
.nav-toggle span{
  display:block; width:16px; height:1.5px; background:currentColor;
  transition: transform .25s ease;
}
.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(380px, 86vw);
  background:var(--surface-1); border-left:1px solid var(--border);
  transform:translateX(100%); transition: transform .4s cubic-bezier(.2,.9,.3,1);
  padding:80px 28px 28px; display:flex; flex-direction:column; gap:8px;
}
.mobile-menu.is-open{transform:translateX(0);}
.mobile-menu a{
  padding:16px 0; border-bottom:1px solid var(--border);
  font-family:var(--serif); font-size:28px; font-weight:700; letter-spacing:-.02em;
  color:var(--text-hi); display:block;
}
.mobile-menu .btn{margin-top:20px; justify-content:center;}

@media (max-width: 960px){
  .nav-toggle{display:flex;}
  nav.top .stars-pill{display:none;}
  nav.top .btn--primary{display:none;}
}

.countdown-detail{
  margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--amber);
  letter-spacing:.2em; text-transform:uppercase; opacity:.75;
}

/* ============ S03 PITCH ============ */
.pitch{text-align:center; overflow:hidden;}
.pitch .container{position:relative;}
.pitch-display{margin: 48px 0; display:flex; flex-direction:column; gap:8px;}
.pitch-line{
  font-family:var(--serif); font-weight:900;
  font-size:clamp(64px, 13vw, 180px); line-height:.95; letter-spacing:-.05em;
  position:relative; will-change: transform, opacity;
}
.pitch-line .big-num{display:inline-block; min-width:1.2em; text-align:right;}
.pitch-line:last-child{color:var(--accent);}
.pitch-line:last-child .caret{
  display:inline-block; width:.55ch; height:.85em;
  background:var(--accent); margin-left:.12em;
  vertical-align:-.05em;
  animation: caret 1s steps(2) infinite;
}
@keyframes caret{50%{opacity:0;}}
.pitch .lede{margin: 48px auto 0;}

.scroll-cue{
  margin-top:72px; display:flex; align-items:center; gap:16px; justify-content:center;
}
.scroll-cue .line{width:60px; height:1px; background:var(--text-lo);}
.scroll-cue span{font-family:var(--mono); font-size:10px; letter-spacing:.5em; color:var(--text-lo); text-transform:uppercase;}

/* ============ S04 CODE MOMENT ============ */
.code-wrap{max-width:960px; margin:0 auto;}
.code-head{text-align:center; margin-bottom:48px;}

.code-tabs{
  display:flex; gap:4px; padding:4px;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:10px; width:fit-content; margin:0 auto 20px;
}
.code-tab{
  padding:10px 18px; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; color:var(--text-mid);
  border-radius:6px; transition: background .2s, color .2s;
}
.code-tab.is-active{background:var(--surface-3); color:var(--text-hi);}
.code-tab:hover:not(.is-active){color:var(--text-hi);}

.code-block{
  background:var(--surface-1); border:1px solid var(--border); border-radius:12px;
  overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.code-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border); background:#0F0F0F;
}
.code-header .dots{display:flex; gap:6px;}
.code-header .dots span{width:11px; height:11px; border-radius:50%; background:var(--border-bright);}
.code-header .dots span:nth-child(1){background:#FF5F57;}
.code-header .dots span:nth-child(2){background:#FEBC2E;}
.code-header .dots span:nth-child(3){background:#28C840;}
.code-header .file{font-family:var(--mono); font-size:12px; color:var(--text-mid);}
.code-header .copy{
  font-family:var(--mono); font-size:11px; color:var(--text-mid);
  border:1px solid var(--border-bright); padding:5px 10px; border-radius:5px;
  letter-spacing:.1em; transition: all .2s;
}
.code-header .copy:hover{color:var(--accent); border-color:var(--accent);}
.code-header .copy.copied{color:var(--accent); border-color:var(--accent);}

pre.code{
  padding:28px 32px;
  font-family:var(--mono); font-size:14.5px; line-height:1.75;
  color:var(--text-hi); overflow:auto; margin:0;
  counter-reset:l;
}
pre.code .ln{
  display:block; position:relative; padding-left:3ch;
}
pre.code .ln::before{
  counter-increment:l; content: counter(l, decimal-leading-zero);
  position:absolute; left:0; color:var(--text-lo); opacity:.5; font-size:12px;
  user-select:none;
}
.tok-kw{color:#FF79C6;}
.tok-fn{color:var(--accent);}
.tok-str{color:var(--amber);}
.tok-com{color:var(--text-lo);}
.tok-arg{color:#FFA3A3;}
.tok-num{color:#BD93F9;}
.tok-deco{color:#F1FA8C;}

.code-legend{
  display:flex; gap:24px; margin-top:28px; flex-wrap:wrap; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--text-lo); text-transform:uppercase;
}
.code-legend .live{
  color:var(--accent);
  display:inline-flex; align-items:center; gap:6px;
}
.code-legend .live::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.4;} 50%{opacity:1;}}

/* ============ S05 CONTROLS · Catalog Spread ============ */
.controls-head{
  display:grid; grid-template-columns: auto 1fr auto;
  gap:40px; align-items:end;
  margin-bottom:56px; padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.controls-head h2{margin:0; font-size:clamp(36px, 4.4vw, 72px);}
.controls-head .ctx{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em;
  color:var(--text-lo); text-transform:uppercase;
  padding-bottom:10px; text-align:right;
}
.controls-head .ctx b{display:block; color:var(--accent); font-weight:500; margin-bottom:4px;}

.control-groups{
  display:flex; flex-direction:column;
  border-top:1px solid var(--border);
}
.ctrl-group{
  position:relative; cursor:pointer;
  display:grid;
  grid-template-columns: 72px 280px 1fr 120px;
  gap:32px; align-items:center;
  padding: 28px 16px;
  border-bottom:1px solid var(--border);
  transition: background .4s ease, padding .4s ease;
  overflow:hidden;
}
.ctrl-group::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s cubic-bezier(.2,.9,.3,1);
}
.ctrl-group:hover{background:var(--surface-1); padding-left:28px;}
.ctrl-group:hover::before{transform: scaleY(1);}

.ctrl-index{
  font-family:var(--mono); font-size:11px; letter-spacing:.25em;
  color:var(--text-lo);
}
.ctrl-index .slash{color:var(--accent); opacity:.6;}

.ctrl-title{display:flex; flex-direction:column; gap:6px;}
.ctrl-cat{
  font-family:var(--mono); font-size:10px; letter-spacing:.32em;
  color:var(--text-lo); text-transform:uppercase;
  transition: color .3s;
}
.ctrl-group:hover .ctrl-cat{color:var(--accent);}
.ctrl-group h3{
  font-size:clamp(22px, 2.4vw, 34px); letter-spacing:-.02em;
  font-family:var(--serif); font-weight:700; line-height:1.05;
  margin:0;
}

.ctrl-list{
  list-style:none; display:flex; flex-wrap:wrap; gap:6px 8px;
  margin:0;
}
.ctrl-list li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--text-mid);
  padding: 5px 10px;
  border:1px solid var(--border); border-radius:100px;
  background: var(--surface-1);
  transition: color .3s, border-color .3s, background .3s;
  white-space:nowrap;
}
.ctrl-group:hover .ctrl-list li{color:var(--text-hi); border-color:var(--border-bright);}

.ctrl-meter{
  display:flex; flex-direction:column; gap:8px;
  align-items:flex-end;
}
.ctrl-count{
  font-family:var(--serif); font-weight:900;
  font-size:56px; line-height:.9; letter-spacing:-.05em;
  color:var(--text-hi);
  display:flex; align-items:baseline; gap:6px;
}
.ctrl-count small{
  font-family:var(--mono); font-size:10px; color:var(--text-lo);
  letter-spacing:.25em; font-weight:400; letter-spacing:.25em;
}
.ctrl-group:hover .ctrl-count{color:var(--accent);}
.ctrl-bars{display:flex; gap:3px;}
.ctrl-bars span{
  width:4px; height:14px; background:var(--surface-3);
  border-radius:1px;
}
.ctrl-group:hover .ctrl-bars span{background:var(--accent);}
.ctrl-arrow{display:none;}

/* spec strip below */
.controls-strip{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:0; border-top:1px solid var(--border); margin-top: 40px;
  padding-top: 32px;
}
.controls-strip .cs{
  padding: 0 24px; border-right:1px dashed var(--border);
}
.controls-strip .cs:last-child{border-right:none;}
.controls-strip .cs-num{
  font-family:var(--serif); font-weight:900;
  font-size:40px; color:var(--text-hi); letter-spacing:-.03em; line-height:1;
  margin-bottom:10px;
}
.controls-strip .cs-lbl{
  font-family:var(--mono); font-size:10px; letter-spacing:.25em;
  color:var(--text-lo); text-transform:uppercase;
}

@media (max-width: 900px){
  .controls-head{grid-template-columns:1fr; gap:16px;}
  .controls-head .ctx{text-align:left;}
  .ctrl-group{
    grid-template-columns: 1fr;
    gap:16px; padding: 28px 0;
  }
  .ctrl-meter{flex-direction:row; align-items:center; justify-content:space-between;}
  .ctrl-group:hover{padding-left:16px;}
  .controls-strip{grid-template-columns: repeat(2, 1fr); gap:24px 0;}
}

/* ============ S06 FRAMEWORKS · Periodic Table ============ */
.fw-head{
  display:grid; grid-template-columns: 1fr auto;
  gap:40px; align-items:end; margin-bottom:48px;
  padding-bottom:24px; border-bottom:1px solid var(--border);
}
.fw-head h2{margin:0;}
.fw-head .ctx{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em;
  color:var(--text-lo); text-transform:uppercase; text-align:right;
  padding-bottom:10px;
}
.fw-head .ctx b{display:block; color:var(--accent); font-weight:500; margin-bottom:4px;}

.framework-grid{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:10px;
}
.fw-card{
  position:relative; cursor:pointer;
  padding: 20px 18px 18px;
  border:1px solid var(--border); border-radius:8px;
  background: var(--surface-1);
  display:flex; flex-direction:column; gap:14px;
  min-height:220px;
  transition: border-color .35s, transform .35s, background .35s;
  overflow:hidden;
}
.fw-card::before{
  /* periodic-element corner decorations */
  content:""; position:absolute; top:10px; right:12px;
  width:8px; height:8px;
  border-top:1px solid var(--text-lo);
  border-right:1px solid var(--text-lo);
  opacity:.5;
}
.fw-card::after{
  content:""; position:absolute; bottom:10px; left:12px;
  width:8px; height:8px;
  border-bottom:1px solid var(--text-lo);
  border-left:1px solid var(--text-lo);
  opacity:.5;
}
.fw-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  background:var(--surface-2);
}
.fw-card:hover::before, .fw-card:hover::after{border-color:var(--accent); opacity:1;}

.fw-atomic{
  display:flex; justify-content:space-between; align-items:flex-start;
}
.fw-num{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--text-lo);
}
.fw-weight{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--text-lo); text-align:right;
}
.fw-logo{
  font-family:var(--serif); font-weight:900;
  font-size:48px; line-height:1; letter-spacing:-.04em;
  color:var(--text-hi);
  margin-top:4px;
  transition: color .35s;
}
.fw-card:hover .fw-logo{color:var(--accent);}
.fw-name{
  font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  color:var(--text-hi); line-height:1.2;
  margin-top:auto;
}
.fw-meta{
  font-family:var(--mono); font-size:9.5px; color:var(--text-lo);
  letter-spacing:.05em; line-height:1.5;
  padding-top:10px; border-top:1px dashed var(--border);
  min-height:42px;
}
.fw-snippet{display:none;}

@media (max-width: 900px){
  .fw-head{grid-template-columns:1fr;}
  .fw-head .ctx{text-align:left;}
  .framework-grid{grid-template-columns:repeat(2, 1fr);}
}

/* ============ S07 ARCHITECTURE ============ */
.arch-head{text-align:center; margin-bottom:72px;}
.arch-stack{
  max-width:920px; margin:0 auto;
  display:flex; flex-direction:column; gap:10px;
  position:relative;
}
.arch-stack::before{
  content:""; position:absolute;
  left:110px; top:12px; bottom:12px; width:2px;
  background:linear-gradient(to bottom, transparent, var(--border) 10%, var(--border) 90%, transparent);
  z-index:0;
}
.arch-pulse{
  position:absolute; left:107px; top:0;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 16px var(--accent), 0 0 4px #fff;
  z-index:2;
}

.arch-layer{
  display:grid; grid-template-columns:200px 1fr auto;
  gap:24px; align-items:center;
  padding:22px 26px; background:var(--surface-1);
  border:1px solid var(--border); border-radius:10px;
  position:relative; z-index:1;
  transition: background .3s, border-color .3s;
}
.arch-layer:nth-child(even){background:var(--surface-2);}
.arch-layer.is-lit{border-color:var(--accent); background:var(--surface-2);}
.arch-layer .tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em;
  color:var(--accent); text-transform:uppercase;
}
.arch-layer .name{font-size:19px; font-weight:600; margin-bottom:4px; letter-spacing:-.01em;}
.arch-layer .desc{font-size:13.5px; color:var(--text-mid); line-height:1.55;}
.arch-layer .chip{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--text-lo); text-transform:uppercase;
  padding:4px 10px; border:1px solid var(--border); border-radius:100px;
}

/* ============ S08 PROOF ============ */
.proof-wrap{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;}
.proof-copy .eyebrow{color:var(--amber);}
.proof-copy h2{margin-top:24px;}
.proof-copy blockquote{
  font-family:var(--serif); font-size:clamp(22px, 2.1vw, 28px); line-height:1.35;
  font-weight:400; color:var(--text-hi); margin:28px 0; font-style:italic;
  padding-left:20px; border-left:2px solid var(--amber);
}
.proof-meta{
  display:flex; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; color:var(--text-lo);
  letter-spacing:.22em; text-transform:uppercase;
}
.proof-meta .sep{opacity:.4;}
.proof-stats{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:36px;}
.proof-stat{
  padding:22px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface-1);
}
.proof-stat .n{
  font-family:var(--serif); font-size:40px; font-weight:900;
  color:var(--accent); letter-spacing:-.04em; line-height:1;
}
.proof-stat .l{
  font-family:var(--mono); font-size:10.5px; color:var(--text-lo);
  letter-spacing:.22em; text-transform:uppercase; margin-top:10px;
}

.proof-visual{
  min-height:540px; border-radius:12px;
  background:
    radial-gradient(40% 60% at 70% 30%, rgba(0,229,255,.08), transparent 60%),
    var(--surface-1);
  border:1px solid var(--border);
  position:relative; overflow:hidden;
}
#proof-canvas{
  position:absolute; inset:0; width:100%; height:100%;
}
.proof-label{
  position:absolute; left:18px; bottom:18px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  color:var(--text-lo); text-transform:uppercase;
  padding:6px 10px; background:rgba(10,10,10,.6);
  border:1px solid var(--border); border-radius:4px;
  z-index:2;
}
.proof-label .live-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:8px;
  animation: pulse 1.4s ease-in-out infinite;
  box-shadow:0 0 8px var(--accent);
}

/* ============ S09 COMPARE ============ */
.compare-head{text-align:center; margin-bottom:64px;}
.compare-wrap{overflow-x:auto;}
.compare-table{
  width:100%; border-collapse:collapse; font-size:14px;
  min-width:780px;
}
.compare-table th, .compare-table td{
  padding:16px 12px; text-align:center;
  border-bottom:1px solid var(--border);
}
.compare-table th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  color:var(--text-lo); text-transform:uppercase;
  padding-bottom:20px; padding-top:4px;
}
.compare-table th:first-child{text-align:left;}
.compare-table td:first-child{
  text-align:left; color:var(--text-hi); font-weight:500; font-size:14px;
}
.compare-table .acp-col{
  background:rgba(0,229,255,.05);
  color:var(--accent); font-weight:700;
}
.compare-table .acp-col.head{
  color:var(--accent); font-size:12px;
  border-top:2px solid var(--accent); border-bottom:2px solid var(--accent);
  background:rgba(0,229,255,.08);
}
.compare-table .check{color:var(--accent); font-size:16px;}
.compare-table .x{color:var(--text-lo); font-family:var(--mono);}
.compare-table .partial{
  color:var(--amber); font-family:var(--mono); font-size:11px; letter-spacing:.05em;
}

.coverage-row{margin-top:28px; display:grid; grid-template-columns:1fr; gap:8px; max-width:780px; margin-inline:auto;}
.cov{display:grid; grid-template-columns:150px 1fr 46px; gap:14px; align-items:center; font-family:var(--mono); font-size:11px; color:var(--text-mid);}
.cov .bar{height:4px; background:var(--surface-2); border-radius:100px; overflow:hidden;}
.cov .bar i{display:block; height:100%; background:var(--text-lo); border-radius:100px; transition: width 1.2s cubic-bezier(.25,1,.3,1);}
.cov.is-acp .bar i{background:var(--accent); box-shadow:0 0 12px rgba(0,229,255,.5);}
.cov.is-acp{color:var(--accent);}
.cov .n{text-align:right;}

/* ============ S10 COMPLIANCE ============ */
.comp-head{text-align:center; margin-bottom:48px;}
.badges{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.badge{
  padding:16px 24px; border:1px solid var(--border); border-radius:100px;
  background:var(--surface-1);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-mid);
  transition: transform .3s ease, border-color .3s, color .3s;
  cursor:default;
}
.badge:hover{transform:translateY(-3px); border-color:var(--accent); color:var(--text-hi);}
.badge b{color:var(--text-hi); font-weight:500;}
.badge:hover b{color:var(--accent);}

/* ============ S08 PROOF · Redesigned ============ */
.proof{overflow:hidden;}
.proof-masthead{
  display:grid; grid-template-columns: 1fr auto;
  gap:40px; align-items:end;
  padding-bottom: 32px; margin-bottom: 40px;
  border-bottom:1px solid var(--border);
}
.proof-masthead h2{margin-top:16px;}
.pm-client{
  display:flex; align-items:center; gap:16px;
  padding: 14px 18px 14px 14px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface-1);
}
.pm-logo{
  width:48px; height:48px; border-radius:8px;
  background:linear-gradient(135deg, var(--amber), #C8891F);
  color:#0A0A0A; display:grid; place-items:center;
  font-family:var(--serif); font-weight:900; font-size:18px;
  letter-spacing:-.03em;
}
.pm-name{font-size:15px; font-weight:600; color:var(--text-hi); letter-spacing:-.005em;}
.pm-sub{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--text-lo); text-transform:uppercase; margin-top:4px;}

.proof-billboard{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin-bottom:48px;
}
.pb-cell{
  padding: 40px 32px;
  border-right:1px dashed var(--border);
  display:flex; flex-direction:column; justify-content:center;
}
.pb-cell:last-child{border-right:none;}
.pb-cell--lead{
  background: linear-gradient(135deg, rgba(0,229,255,.06), transparent 60%);
}
.pb-big{
  font-family:var(--serif); font-weight:900;
  font-size: clamp(96px, 12vw, 176px);
  line-height:.9; letter-spacing:-.06em;
  color:var(--accent); margin-bottom:18px;
}
.pb-mid{
  font-family:var(--serif); font-weight:900;
  font-size: clamp(44px, 4.5vw, 64px);
  line-height:1; letter-spacing:-.04em;
  color:var(--text-hi); margin-bottom:16px;
}
.pb-mid .plus{color:var(--accent); font-family:var(--mono); font-size:.6em; margin:0 6px; vertical-align:2px;}
.pb-lbl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.25em;
  color:var(--text-lo); text-transform:uppercase;
}
.pb-sub{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  color:var(--accent); margin-top:8px;
}

.proof-body{
  display:grid; grid-template-columns: 1fr 1fr; gap:1px;
  background:var(--border);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  margin-bottom: 40px;
}

.proof-quote{
  background:var(--surface-1); padding: 48px 44px;
  position:relative;
}
.pq-mark{
  font-family:var(--serif); font-weight:900; font-size:140px;
  color:var(--amber); opacity:.35;
  line-height:.8; margin-bottom:-30px;
}
.proof-quote blockquote{
  font-family:var(--serif); font-size: clamp(20px, 1.9vw, 26px);
  line-height:1.35; color:var(--text-hi); font-style:italic;
  font-weight:400; margin:0 0 32px;
  border:none; padding:0;
}
.pq-attr{display:flex; align-items:center; gap:16px;}
.pq-line{width:40px; height:1px; background:var(--amber);}
.pq-name{font-size:13.5px; font-weight:600; color:var(--text-hi);}
.pq-role{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--text-lo); text-transform:uppercase; margin-top:4px;}

.proof-trace{
  background:#0A0A0A; display:flex; flex-direction:column;
  position:relative;
}
.pt-head{
  display:flex; align-items:center; gap:12px;
  padding: 16px 20px; border-bottom:1px solid var(--border);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  color:var(--text-lo); text-transform:uppercase;
}
.pt-head .live-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
.pt-title{color:var(--text-hi); flex:1;}
.pt-session{color:var(--accent);}
.pt-feed{
  list-style:none; margin:0; padding: 8px 0; flex:1;
  font-family:var(--mono); font-size:11.5px;
  counter-reset: trace;
}
.pt-feed li{
  display:grid;
  grid-template-columns: 70px 48px 1fr auto;
  gap:12px; align-items:center;
  padding: 10px 20px;
  border-bottom:1px dashed transparent;
  position:relative;
  opacity:0; transform:translateX(-8px);
  animation: traceIn .5s cubic-bezier(.2,.9,.3,1) forwards;
}
.pt-feed li:nth-child(1){animation-delay:.2s;}
.pt-feed li:nth-child(2){animation-delay:.5s;}
.pt-feed li:nth-child(3){animation-delay:.8s;}
.pt-feed li:nth-child(4){animation-delay:1.1s;}
.pt-feed li:nth-child(5){animation-delay:1.4s;}
.pt-feed li:nth-child(6){animation-delay:1.7s;}
@keyframes traceIn{to{opacity:1; transform:translateX(0);}}
.pt-feed li::before{
  content: attr(data-t);
  font-size:9.5px; letter-spacing:.08em; color:var(--text-lo);
}
.pt-tag{
  font-size:9px; font-weight:700; letter-spacing:.18em;
  padding: 3px 6px; border-radius:3px;
  text-align:center;
}
.pt-tag--ok{background:rgba(0,229,255,.14); color:var(--accent);}
.pt-tag--scan{background:rgba(255,184,0,.14); color:var(--amber);}
.pt-tag--hold{background:rgba(255,77,77,.14); color:var(--danger);}
.pt-node{color:var(--text-hi); font-size:12px;}
.pt-msg{color:var(--text-lo); font-size:10.5px; letter-spacing:.04em; text-align:right;}
.pt-foot{
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  border-top:1px solid var(--border);
}
.pt-foot-cell{
  padding: 14px 16px; border-right:1px solid var(--border);
  font-family:var(--mono);
}
.pt-foot-cell:last-child{border-right:none;}
.pt-foot-cell span{font-size:9.5px; letter-spacing:.22em; color:var(--text-lo); display:block; margin-bottom:4px;}
.pt-foot-cell b{font-size:14px; color:var(--text-hi); font-weight:500; letter-spacing:-.01em;}

.proof-ribbon{
  display:grid; grid-template-columns: 1fr auto 1fr;
  gap: 32px; align-items:center;
  padding: 32px 36px;
  border:1px solid var(--border); border-radius:12px;
  background:
    linear-gradient(90deg, rgba(255,77,77,.04), transparent 40%, transparent 60%, rgba(0,229,255,.04));
}
.pr-col{display:flex; flex-direction:column; gap:10px;}
.pr-col--after{text-align:right;}
.pr-lbl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em;
  color:var(--text-lo); text-transform:uppercase;
}
.pr-col--after .pr-lbl{color:var(--accent);}
.pr-col:not(.pr-col--after) .pr-lbl{color:var(--danger);}
.pr-copy{color:var(--text-mid); font-size:14px; line-height:1.5; max-width:40ch;}
.pr-col--after .pr-copy{margin-left:auto;}
.pr-arrow{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--accent);
}
.pr-arrow span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  color:var(--accent); text-transform:uppercase;
  padding: 4px 10px; border:1px solid var(--accent); border-radius:100px;
  background:rgba(0,229,255,.06);
}

@media (max-width: 900px){
  .proof-masthead{grid-template-columns:1fr;}
  .proof-billboard{grid-template-columns:1fr 1fr;}
  .pb-cell--lead{grid-column: 1 / -1;}
  .proof-body{grid-template-columns:1fr;}
  .proof-ribbon{grid-template-columns:1fr; text-align:center;}
  .pr-col--after{text-align:center;}
  .pr-col--after .pr-copy{margin:0 auto;}
  .pr-arrow{transform:rotate(90deg);}
  .pt-feed li{grid-template-columns: 50px 1fr; gap:8px;}
  .pt-feed li::before, .pt-msg{display:none;}
}

/* ============ S11 FINAL CTA · Redesigned ============ */
.final{
  text-align:center; overflow:hidden; position:relative;
  padding: 120px var(--pad-x) 140px;
}
#final-canvas{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.8;
}
.final-grid-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.35;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(70% 50% at 50% 50%, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 50% at 50% 50%, #000 0%, #000 60%, transparent 100%);
}
.reg-ticker{
  position:absolute; top:0; left:0; right:0; z-index:3;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  background:rgba(10,10,10,.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  height:44px; display:flex; align-items:center;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.reg-ticker-track{
  display:flex; gap:56px; white-space:nowrap;
  animation: regScroll 60s linear infinite;
  padding-left: 56px;
}
@keyframes regScroll{to{transform:translateX(-50%);}}
.rt-item{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--text-mid); text-transform:uppercase;
}
.rt-item b{color:var(--amber); font-weight:700; letter-spacing:.22em;}
.rt-item::after{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--text-lo); margin-left:56px;
  display:inline-block;
}

.final-content{position:relative; z-index:2; margin-top:72px;}

.final-eyebrow{
  display:flex; align-items:center; justify-content:center;
  gap:20px; margin-bottom: 56px;
  font-family:var(--mono); font-size:11px; letter-spacing:.3em;
  color:var(--accent); text-transform:uppercase;
}
.fe-line{flex:1; max-width:140px; height:1px; background:linear-gradient(to right, transparent, var(--border-bright), transparent);}

.final-head{
  font-family:var(--serif); font-weight:900;
  font-size: clamp(56px, 8.5vw, 148px);
  line-height:.96; letter-spacing:-.045em;
  max-width: 18ch; margin: 0 auto 40px;
  color:var(--text-hi);
  display:flex; flex-direction:column; gap: 4px;
}
.fh-line{display:block;}
.fh-em{color:var(--text-mid);}
.fh-you{
  font-style: italic; color:var(--accent);
  position:relative; display:inline-block;
  font-weight:900;
}
.fh-you::after{
  content:""; position:absolute; left:4%; right:4%;
  bottom:.02em; height:.08em;
  background:var(--accent);
  transform: scaleX(0); transform-origin:left;
  animation: youUnder 1s cubic-bezier(.2,.9,.3,1) 1s forwards;
}
@keyframes youUnder{to{transform:scaleX(1);}}

.final-lede{margin: 24px auto 48px; max-width:52ch;}

/* Quickstart timeline */
.quickstart{
  display:flex; align-items:center; justify-content:center;
  gap: 0; margin: 0 auto 40px; max-width: 720px;
}
.qs-step{
  display:flex; flex-direction:column; gap:6px;
  padding: 16px 24px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--surface-1);
  flex: 1; min-width:0;
  position:relative;
}
.qs-step::before{
  content:""; position:absolute; top:-1px; left:-1px; width:40%; height:2px;
  background:var(--accent); border-radius:2px;
}
.qs-num{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.3em;
  color:var(--text-lo);
}
.qs-time{
  font-family:var(--serif); font-weight:900; font-size:28px;
  color:var(--accent); letter-spacing:-.03em; line-height:1;
}
.qs-act{
  font-family:var(--mono); font-size:12px; color:var(--text-hi);
  letter-spacing:.02em;
}
.qs-join{
  flex: 0 0 32px; height:1px;
  background:linear-gradient(to right, var(--accent), var(--border));
  position:relative;
}
.qs-join::after{
  content:""; position:absolute; right:-3px; top:-2px;
  width:0; height:0;
  border-left:5px solid var(--border); border-top:3px solid transparent; border-bottom:3px solid transparent;
}

.install-line{
  margin: 0 auto; max-width:460px;
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; background:var(--surface-1);
  border:1px solid var(--border-bright); border-radius:10px;
  font-family:var(--mono); font-size:13.5px; color:var(--text-hi);
  cursor:pointer; transition: border-color .2s;
}
.install-line:hover{border-color:var(--accent);}
.install-line .prompt{color:var(--accent);}
.install-line .cmd{flex:1; text-align:left;}
.install-line .cp{color:var(--text-lo); font-size:11px; letter-spacing:.2em;}
.install-line.copied .cp{color:var(--accent);}

.final .ctas{margin-top:28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

.final-altern{
  display:grid; grid-template-columns: 1fr auto 1fr;
  gap:0; margin:72px auto 0; max-width: 960px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--surface-1);
  text-align:left;
}
.alt-col{padding: 28px 32px;}
.alt-col--bad{border-right:1px solid var(--border);}
.alt-col--good{border-left:1px solid var(--border);}
.alt-lbl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em;
  text-transform:uppercase; margin-bottom:18px;
}
.alt-col--bad .alt-lbl{color:var(--danger);}
.alt-col--good .alt-lbl{color:var(--accent);}
.alt-col ul{
  list-style:none; display:flex; flex-direction:column; gap:10px;
  font-size:14px; color:var(--text-mid); line-height:1.5; padding:0;
}
.alt-col ul li{
  display:flex; gap:12px; align-items:flex-start;
}
.alt-col ul li::before{
  content:""; flex-shrink:0; width:8px; height:8px;
  margin-top:.5em;
}
.alt-col--bad ul li::before{
  background:
    linear-gradient(45deg, transparent 44%, var(--danger) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--danger) 44% 56%, transparent 56%);
}
.alt-col--good ul li::before{
  background: var(--accent); border-radius:50%;
}
.alt-divider{
  display:flex; align-items:center; justify-content:center;
  padding: 20px 0;
}
.alt-or{
  font-family:var(--serif); font-weight:900;
  font-size:32px; color:var(--text-lo);
  letter-spacing:-.04em; font-style:italic;
}

.final-trust{margin-top:48px; justify-content:center;}

@media (max-width: 900px){
  .final-head{font-size: clamp(44px, 12vw, 72px);}
  .quickstart{flex-direction:column; gap:10px;}
  .qs-join{display:none;}
  .qs-step{width:100%;}
  .final-altern{grid-template-columns:1fr;}
  .alt-col--bad{border-right:none; border-bottom:1px solid var(--border);}
  .alt-col--good{border-left:none; border-top:1px solid var(--border);}
}

/* ============ Footer ============ */
footer{padding: 72px var(--pad-x) 48px; border-top:1px solid var(--border); position:relative;}
.foot{
  display:grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; gap:48px;
  max-width:var(--max); margin:0 auto;
}
.foot h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; color:var(--text-lo); text-transform:uppercase; margin-bottom:20px;}
.foot ul{list-style:none; display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--text-mid);}
.foot ul li{transition: color .2s; cursor:pointer;}
.foot ul li:hover{color:var(--text-hi);}
.foot-brand p{color:var(--text-mid); font-size:13.5px; line-height:1.6; margin-top:16px; max-width:34ch;}
.meta{
  max-width:var(--max); margin: 56px auto 0;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; border-top:1px solid var(--border);
  font-family:var(--mono); font-size:10.5px; color:var(--text-lo); letter-spacing:.22em; text-transform:uppercase;
}

/* ============ Responsive ============ */
@media (max-width: 960px){
  nav.top ul{display:none;}
  .stats, .control-groups, .framework-grid{grid-template-columns:1fr;}
  .proof-wrap{grid-template-columns:1fr; gap:48px;}
  .stats::before,.stats::after{display:none;}
  .stat{border-bottom:1px solid var(--border);}
  .foot{grid-template-columns:1fr 1fr; gap:32px;}
  .arch-layer{grid-template-columns:100px 1fr;}
  .arch-layer .chip{display:none;}
  .arch-stack::before{left:60px;}
  .arch-pulse{left:57px;}
}
@media (max-width: 640px){
  .foot{grid-template-columns:1fr;}
  nav.top .stars-pill{display:none;}
  h1{font-size:clamp(44px,12vw,72px);}
  .pitch-line{font-size:clamp(48px,14vw,96px);}
  .meta{flex-direction:column; gap:12px; align-items:flex-start;}
}

/* ============ Reveal + motion helpers ============ */
.reveal{opacity:1; transform:none; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.9,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:1; transform:none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.0s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.24s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.32s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.40s;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
  .reveal,.reveal-stagger > *{opacity:1; transform:none;}
}

/* ============ Drawer modal ============ */
.drawer-backdrop{
  position:fixed; inset:0; z-index:100;
  background:rgba(5,5,5,.75); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition: opacity .35s ease;
}
.drawer-backdrop.is-open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:101;
  width:min(620px, 94vw);
  background:var(--surface-1); border-left:1px solid var(--border);
  transform:translateX(100%); transition: transform .45s cubic-bezier(.2,.9,.3,1);
  display:flex; flex-direction:column;
  box-shadow:-30px 0 80px rgba(0,0,0,.6);
}
.drawer.is-open{transform:translateX(0);}
.drawer-head{
  padding:28px 32px 20px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  flex-shrink:0;
}
.drawer-eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em;
  color:var(--accent); text-transform:uppercase; margin-bottom:10px;
}
.drawer-title{font-family:var(--serif); font-weight:700; font-size:32px; letter-spacing:-.02em; line-height:1.1;}
.drawer-close{
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--border-bright); color:var(--text-mid);
  display:grid; place-items:center; font-size:18px; flex-shrink:0;
  background:transparent; cursor:pointer;
  transition: border-color .2s, color .2s;
}
.drawer-close:hover{border-color:var(--accent); color:var(--accent);}
.drawer-body{
  padding:28px 32px; overflow-y:auto; flex:1;
  font-size:14px; color:var(--text-mid); line-height:1.6;
}
.drawer-body h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em;
  color:var(--text-lo); text-transform:uppercase; margin: 28px 0 14px;
  font-weight:500;
}
.drawer-body h4:first-child{margin-top:0;}
.drawer-body .lede{font-size:16px; color:var(--text-hi); margin-bottom:4px;}
.drawer-list{list-style:none; display:flex; flex-direction:column; gap:10px; margin: 10px 0; padding:0;}
.drawer-list li{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; background:var(--surface-2); border-radius:6px;
  border:1px solid var(--border);
  font-size:13.5px;
}
.drawer-list li::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);
  margin-top:7px; flex-shrink:0;
}
.drawer-code{
  background:var(--bg); border:1px solid var(--border); border-radius:6px;
  padding:16px; font-family:var(--mono); font-size:12.5px;
  color:var(--text-hi); line-height:1.65; overflow-x:auto; white-space:pre;
}
.drawer-code .c{color:var(--text-lo);}
.drawer-code .k{color:#FF79C6;}
.drawer-code .f{color:var(--accent);}
.drawer-code .s{color:var(--amber);}
.drawer-map{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.drawer-map .mp{
  padding:10px 12px; border:1px solid var(--border); border-radius:6px;
  background:var(--surface-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
}
.drawer-map .mp b{color:var(--accent); font-weight:500; display:block; margin-bottom:3px; letter-spacing:.15em;}
.drawer-cta{
  padding:20px 32px; border-top:1px solid var(--border);
  display:flex; gap:10px; flex-shrink:0;
}

/* ============ Mobile nav ============ */
.nav-toggle{
  display:none;
  width:40px; height:40px; border-radius:8px;
  border:1px solid var(--border-bright); color:var(--text-hi);
  background:transparent; cursor:pointer;
  align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
}
.nav-toggle span{
  display:block; width:16px; height:1.5px; background:currentColor;
  transition: transform .25s ease;
}
.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(380px, 86vw);
  background:var(--surface-1); border-left:1px solid var(--border);
  transform:translateX(100%); transition: transform .4s cubic-bezier(.2,.9,.3,1);
  padding:80px 28px 28px; display:flex; flex-direction:column; gap:8px;
}
.mobile-menu.is-open{transform:translateX(0);}
.mobile-menu a{
  padding:16px 0; border-bottom:1px solid var(--border);
  font-family:var(--serif); font-size:28px; font-weight:700; letter-spacing:-.02em;
  color:var(--text-hi); display:block;
  text-decoration:none;
}
.mobile-menu .btn{margin-top:20px; justify-content:center;}

@media (max-width: 960px){
  .nav-toggle{display:flex;}
  nav.top .stars-pill{display:none;}
  nav.top .btn--primary{display:none;}
}

/* cache bust v2 */


/* ============================================================
   S02 · PROBLEM · The Uncontrolled Run
   ============================================================ */
.problem{position:relative; overflow:hidden; padding:140px 0 180px;}
.problem .grid-overlay{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 40%, transparent 90%);
}
.problem-head{text-align:center; max-width:760px; margin:0 auto 64px; position:relative; z-index:2;}
.problem-head h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(44px, 5.4vw, 76px); line-height:1.02; letter-spacing:-.028em;
  margin:14px 0 0;
}
.problem-head .muted{color:var(--text-mid); font-style:italic;}
.problem-head .lede{margin:28px auto 0;}

.eyebrow--amber{color:var(--amber) !important;}

/* ----- The Run frame ----- */
.run{position:relative; z-index:2;}
.run-frame{
  position:relative;
  background: linear-gradient(180deg, #111 0%, #0C0C0C 100%);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.run-chrome{
  display:grid; grid-template-columns: auto 1fr auto;
  align-items:center; gap:16px;
  padding:12px 20px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, #161616, #101010);
}
.run-dots{display:flex; gap:6px;}
.run-dots span{width:10px; height:10px; border-radius:50%; background:#2a2a2a;}
.run-title{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--text-mid); text-align:center;
}
.run-title b{color:var(--text-hi);}
.run-live{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  color:var(--danger); text-transform:uppercase;
  padding:4px 10px; border:1px solid rgba(255,77,77,.35); border-radius:3px;
  background:rgba(255,77,77,.06);
}
.run-live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--danger);
  box-shadow:0 0 10px rgba(255,77,77,.8);
  animation: liveBlink 1s ease-in-out infinite;
}
@keyframes liveBlink{50%{opacity:.25}}

.run-body{
  display:grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  min-height:520px;
}
.run-col{padding:22px 26px;}
.run-col-head{
  font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  color:var(--text-lo); text-transform:uppercase;
  margin-bottom:16px;
}
.run-log{border-right:1px solid var(--border);}

/* log lines */
.run-lines{
  list-style:none; padding:0; margin:0;
  font-family:var(--mono); font-size:12.5px; line-height:1.65;
  counter-reset:line;
}
.run-lines li{
  display:grid;
  grid-template-columns: 72px 72px 1fr;
  gap:12px; align-items:baseline;
  padding:5px 8px 5px 8px;
  border-left:2px solid transparent;
  margin: 0 -8px;
  transition: background .2s;
}
.run-lines li:hover{background: rgba(255,255,255,.02);}
.run-t{color:var(--text-lo); font-size:11px;}
.run-tag{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:1px 6px; border-radius:2px; text-align:center;
  border:1px solid currentColor;
}
.run-m{color:var(--text-mid); font-size:12.5px;}
.run-m b{color:var(--text-hi); font-weight:600;}

.run-lines .ok .run-tag{color:#4A6D5E; border-color:#28403A;}
.run-lines .warn{border-left-color: rgba(255,184,0,.5); background: rgba(255,184,0,.04);}
.run-lines .warn .run-tag{color:var(--amber); border-color:rgba(255,184,0,.5);}
.run-lines .warn .run-m{color:#DBB977;}
.run-lines .err{border-left-color: rgba(255,77,77,.6); background: rgba(255,77,77,.05);}
.run-lines .err .run-tag{color:var(--danger); border-color:rgba(255,77,77,.5); background:rgba(255,77,77,.08);}
.run-lines .err .run-m{color:#FF8484;}
.run-lines .err .run-m b{color:var(--text-hi);}
.run-lines .pending .run-t, .run-lines .pending .run-m{color:var(--text-lo); font-style:italic;}
.run-lines .pending .run-tag{border:none; color:var(--text-lo); letter-spacing:.15em;}

/* reveal animation: lines type in */
.run.reveal.in .run-lines li{
  animation: lineIn .5s cubic-bezier(.2,.9,.3,1) both;
}
.run.reveal.in .run-lines li:nth-child(1){animation-delay:.1s}
.run.reveal.in .run-lines li:nth-child(2){animation-delay:.25s}
.run.reveal.in .run-lines li:nth-child(3){animation-delay:.4s}
.run.reveal.in .run-lines li:nth-child(4){animation-delay:.55s}
.run.reveal.in .run-lines li:nth-child(5){animation-delay:.75s}
.run.reveal.in .run-lines li:nth-child(6){animation-delay:.95s}
.run.reveal.in .run-lines li:nth-child(7){animation-delay:1.15s}
.run.reveal.in .run-lines li:nth-child(8){animation-delay:1.4s}
.run.reveal.in .run-lines li:nth-child(9){animation-delay:1.65s}
.run.reveal.in .run-lines li:nth-child(10){animation-delay:1.9s}
.run.reveal.in .run-lines li:nth-child(11){animation-delay:2.15s}
.run.reveal.in .run-lines li:nth-child(12){animation-delay:2.4s; animation: blinkCursor 1.2s ease-in-out 2.4s infinite;}
@keyframes lineIn{
  from{opacity:0; transform:translateX(-8px);}
  to{opacity:1; transform:none;}
}
@keyframes blinkCursor{50%{opacity:.3}}
.run-lines li{opacity:1;}

/* Meters column */
.run-meters{display:flex; flex-direction:column; gap:22px;}
.meter{}
.meter-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-bottom:10px;
}
.meter-lbl{
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  color:var(--text-lo); text-transform:uppercase;
}
.meter-val{
  font-family:var(--serif); font-weight:900;
  font-size:32px; line-height:1; letter-spacing:-.03em;
  font-variant-numeric: tabular-nums;
}
.meter-val.danger{color:var(--danger);}
.meter-bar{
  position:relative; height:8px;
  background: repeating-linear-gradient(90deg, var(--surface-3) 0 1px, transparent 1px 12px);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:visible;
}
.meter-fill{
  height:100%; width:100%;
  background: linear-gradient(90deg, var(--amber) 0%, #FF8A3D 50%, var(--danger) 100%);
  box-shadow: 0 0 16px rgba(255,77,77,.35);
  animation: fillGrow 1.8s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes fillGrow{ from{width:0} to{width:100%} }
.meter-cap{
  position:absolute; top:-4px; width:1px; height:16px;
  background:var(--text-hi); transform:translateX(-50%);
}
.meter-cap span{
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--text-hi);
  white-space:nowrap;
}
.meter-foot{
  margin-top:28px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--text-lo); text-transform:uppercase;
}
.meter-foot b{color:var(--text-hi); font-weight:600;}
.meter-foot b.danger{color:var(--danger);}

.meter-spark{height:44px; margin-top:8px;}
.meter-spark svg{width:100%; height:100%;}
.spark-line{stroke:var(--danger); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round;}
.spark-fill{}

.compli-list{
  list-style:none; padding:0; margin:12px 0 0;
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--text-mid);
}
.compli-list li{display:flex; align-items:center; gap:10px;}
.compli-list .chk{
  width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:3px; font-size:11px; flex-shrink:0;
}
.compli-list .chk.x{background:rgba(255,77,77,.15); color:var(--danger); border:1px solid rgba(255,77,77,.3);}

.run-callout{
  margin-top:4px; padding:16px 18px;
  border:1px dashed var(--border-bright);
  border-radius:4px;
  background: rgba(255,229,255,.002);
}
.run-callout-k{
  font-family:var(--serif); font-weight:500; font-size:15px;
  color:var(--text-hi); line-height:1.45; margin-bottom:8px;
}
.run-callout-v{font-size:12.5px; color:var(--text-mid); line-height:1.5;}
.run-callout-v b{color:var(--text-hi); font-weight:600;}

.run-foot{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  align-items:center; gap: 8px 24px;
  padding:14px 24px;
  border-top:1px solid var(--border);
  background: linear-gradient(180deg, #0D0D0D, #080808);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
}
.run-foot > div{display:flex; flex-direction:column; gap:4px;}
.foot-k{color:var(--text-lo); text-transform:uppercase; letter-spacing:.22em; font-size:9.5px;}
.foot-v{color:var(--text-mid); font-size:12px;}
.foot-v b{color:var(--text-hi);}
.foot-v.danger b{color:var(--danger);}
.foot-sep{display:none;}
@media (max-width:640px){
  .run-foot{grid-template-columns:1fr;}
}

/* ----- Verdict trio ----- */
.run-verdict{
  margin-top:48px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.verdict{
  position:relative;
  padding:28px 24px 24px;
  border-top:1px solid var(--border);
}
.verdict::before{
  content:""; position:absolute; top:-1px; left:0; width:48px; height:1px;
  background: currentColor;
}
.verdict-n{
  font-family:var(--serif); font-weight:900;
  font-size:clamp(56px, 6vw, 84px); line-height:.95; letter-spacing:-.04em;
  margin-bottom:18px;
  display:flex; align-items:baseline; gap:8px;
  font-variant-numeric: tabular-nums;
}
.verdict-n.danger{color:var(--danger);}
.verdict-n.amber{color:var(--amber);}
.verdict-n.accent{color:var(--accent);}
.verdict-n.danger::before, .verdict-n.amber::before, .verdict-n.accent::before{}
.verdict:nth-child(1){color:var(--danger);}
.verdict:nth-child(2){color:var(--amber);}
.verdict:nth-child(3){color:var(--accent);}
.verdict-u{
  font-family:var(--mono); font-size:12px; letter-spacing:.3em;
  color:var(--text-lo); text-transform:uppercase; font-weight:500;
  margin-left:4px;
  align-self:flex-end; padding-bottom:14px;
}
.verdict-zero{
  position:relative;
  -webkit-text-stroke: 2.5px currentColor;
  color:transparent;
  padding-right:8px;
}
.verdict-zero::after{
  content:""; position:absolute; top:50%; left:-8%; right:-8%; height:3px;
  background:currentColor; transform: translateY(-50%) rotate(-18deg);
  transform-origin:center;
}
.verdict-b{font-size:15px; line-height:1.55; color:var(--text-hi); margin-bottom:14px;}
.verdict-b b{color:currentColor;}
.verdict-s{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--text-lo); text-transform:uppercase;
}

/* Responsive */
@media (max-width:920px){
  .run-body{grid-template-columns:1fr;}
  .run-log{border-right:none; border-bottom:1px solid var(--border);}
  .run-verdict{grid-template-columns:1fr;}
  .run-title{font-size:11px; letter-spacing:.04em;}
}

/* ============================================================
   Nav anchor wiring + scroll-spy
   ============================================================ */
html{ scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

nav.top ul li a{
  color:inherit; text-decoration:none;
  display:inline-block; padding:4px 0; position:relative;
  transition: color .2s ease;
}
nav.top ul li a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition: transform .3s cubic-bezier(.2,.9,.3,1);
}
nav.top ul li a:hover{ color:var(--text-hi); }
nav.top ul li a.is-active{ color:var(--accent); }
nav.top ul li a.is-active::after{ transform:scaleX(1); }

.mobile-menu a.is-active{ color:var(--accent); }

/* ============================================================
   Waitlist drawer
   ============================================================ */
.waitlist-backdrop{
  position:fixed; inset:0; z-index:200;
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none;
  transition: opacity .35s ease;
}
.waitlist-backdrop.is-open{ opacity:1; pointer-events:auto; }

.waitlist{
  position:fixed; top:0; right:0; bottom:0; z-index:201;
  width:min(520px, 96vw);
  background:var(--surface-1);
  border-left:1px solid var(--border-bright);
  box-shadow: -30px 0 80px rgba(0,0,0,.5);
  padding:72px 40px 40px;
  overflow-y:auto;
  transform:translateX(102%);
  transition: transform .45s cubic-bezier(.2,.9,.3,1);
  display:flex; flex-direction:column; gap:28px;
}
.waitlist.is-open{ transform:translateX(0); }
.waitlist::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.6;
}

.waitlist-close{
  position:absolute; top:20px; right:20px;
  width:36px; height:36px; border-radius:8px;
  background:transparent; color:var(--text-mid);
  border:1px solid var(--border);
  font-size:14px; line-height:1;
  transition: all .2s;
}
.waitlist-close:hover{
  color:var(--text-hi); border-color:var(--border-bright); background:var(--surface-2);
}

.waitlist-head{ display:flex; flex-direction:column; gap:16px; }
.waitlist-head .eyebrow{ margin-bottom:0; color:var(--amber); }
.waitlist-head h3{
  font-family:var(--serif); font-weight:700;
  font-size:32px; line-height:1.1; letter-spacing:-.02em;
  color:var(--text-hi);
}
.waitlist-sublede{ color:var(--text-mid); font-size:14px; line-height:1.6; }

.waitlist-meter{
  display:flex; flex-direction:column; gap:8px;
  padding:16px; border:1px solid var(--border);
  border-radius:8px; background:var(--surface-2);
  font-family:var(--mono); font-size:11px; color:var(--text-mid); letter-spacing:.05em;
}
.wm-row{ display:flex; align-items:center; gap:10px; }
.wm-row b{ color:var(--text-hi); font-weight:500; }
.wm-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--text-lo);
}
.wm-dot--amber{ background:var(--amber); box-shadow:0 0 8px rgba(255,184,0,.5); }
.wm-dot--accent{ background:var(--accent); box-shadow:0 0 8px rgba(0,229,255,.5); }

.waitlist-form{ display:flex; flex-direction:column; gap:16px; }
.wl-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wl-field{ display:flex; flex-direction:column; gap:6px; }
.wl-label{
  font-family:var(--mono); font-size:10px; color:var(--text-lo);
  letter-spacing:.18em; text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center;
}
.wl-label em{
  font-style:normal; color:var(--accent);
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
}
.wl-label em.opt{ color:var(--text-lo); }
.wl-field input,
.wl-field select,
.wl-field textarea{
  background:var(--bg);
  color:var(--text-hi); font-family:var(--sans); font-size:14px;
  border:1px solid var(--border-bright); border-radius:6px;
  padding:12px 14px;
  transition: border-color .2s, box-shadow .2s;
  width:100%;
}
.wl-field input::placeholder,
.wl-field textarea::placeholder{ color:var(--text-lo); }
.wl-field input:focus,
.wl-field select:focus,
.wl-field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,229,255,.15);
}
.wl-field textarea{ resize:vertical; min-height:72px; font-family:var(--sans); }
.wl-field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-mid) 50%), linear-gradient(135deg, var(--text-mid) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right:36px;
}

.waitlist-submit{ margin-top:4px; justify-content:center; }
.waitlist-submit[disabled]{ opacity:.6; cursor:progress; }
.waitlist-fineprint{
  font-size:11px; line-height:1.5; color:var(--text-lo); text-align:center;
  font-family:var(--mono); letter-spacing:.03em;
}

.waitlist-success{
  display:flex; flex-direction:column; gap:16px;
  align-items:flex-start;
  padding:32px 0;
}
.waitlist-success[hidden]{ display:none; }
.wl-check{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation: wlCheckPop .6s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes wlCheckPop{
  0%{ transform:scale(.6); opacity:0; }
  60%{ transform:scale(1.1); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
.waitlist-success h4{
  font-family:var(--serif); font-weight:700;
  font-size:28px; line-height:1.15; letter-spacing:-.02em; color:var(--text-hi);
}
.waitlist-success p{ color:var(--text-mid); font-size:14px; line-height:1.6; }
.waitlist-success p b{ color:var(--text-hi); font-weight:500; }
.waitlist-success-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }

@media (max-width:540px){
  .waitlist{ padding:64px 24px 32px; }
  .wl-row{ grid-template-columns:1fr; }
  .waitlist-head h3{ font-size:28px; }
}