:root{
  --aid-ultramarine:#2340D6; --aid-ultramarine-lift:#5C7BFF; --aid-ultramarine-deep:#1A31A6;
  --aid-graphite:#1B1F24; --aid-chalk:#F6F7F9; --aid-rule:#C7CCD6;
  --aid-withheld:#C2410C; --aid-tokenized:#7A5AC7;
  --aid-n-0:#FFFFFF; --aid-n-50:#F6F7F9; --aid-n-100:#EDEFF3; --aid-n-200:#DDE1E8;
  --aid-n-300:#C7CCD6; --aid-n-400:#9AA2B1; --aid-n-500:#6E7686; --aid-n-600:#4A5364;
  --aid-n-700:#333A45; --aid-n-800:#23272E; --aid-n-900:#1B1F24; --aid-n-950:#101317;

  --bg:var(--aid-chalk); --bg-raised:var(--aid-n-0); --fg:var(--aid-n-900);
  --fg-muted:var(--aid-n-600); --fg-subtle:var(--aid-n-400);
  --border:var(--aid-n-200); --border-strong:var(--aid-rule);
  --accent:var(--aid-ultramarine); --accent-fg:var(--aid-chalk);
  --accent-hover:var(--aid-ultramarine-deep); --focus:var(--aid-ultramarine);
  --grid-line:#E7E9EE;

  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Chivo Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1000px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--aid-n-950); --bg-raised:var(--aid-n-900); --fg:var(--aid-chalk);
    --fg-muted:var(--aid-n-400); --fg-subtle:var(--aid-n-500);
    --border:#2A2F37; --border-strong:#3A414C;
    --accent:var(--aid-ultramarine-lift); --accent-fg:var(--aid-n-950);
    --accent-hover:#7F98FF; --focus:var(--aid-ultramarine-lift);
    --grid-line:#191D23;
  }
}
:root[data-theme="dark"]{
  --bg:var(--aid-n-950); --bg-raised:var(--aid-n-900); --fg:var(--aid-chalk);
  --fg-muted:var(--aid-n-400); --fg-subtle:var(--aid-n-500);
  --border:#2A2F37; --border-strong:#3A414C;
  --accent:var(--aid-ultramarine-lift); --accent-fg:var(--aid-n-950);
  --accent-hover:#7F98FF; --focus:var(--aid-ultramarine-lift);
  --grid-line:#191D23;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--fg);
  font-family:var(--font-display); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(to right,var(--grid-line) 0 1px,transparent 1px 72px);
  display:flex; flex-direction:column;
}
h1,h2,h3{margin:0; letter-spacing:-.03em; line-height:1.1; text-wrap:balance}
p{margin:0}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}

/* header */
header{padding:clamp(1.6rem,4vw,2.6rem) 0}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--fg); width:max-content}
.brand svg{flex:none}
.brand span{font-size:1.22rem; font-weight:600; letter-spacing:-.035em}
.brand span i{font-style:normal; color:var(--accent)}

/* hero */
main{flex:1; display:flex; align-items:center; padding:clamp(1rem,4vw,3rem) 0 clamp(2.5rem,6vw,4rem)}
.grid{display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,6vw,4rem); width:100%; align-items:center}
@media(min-width:900px){ .grid{grid-template-columns:1.08fr .92fr} }

.status{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted);
  border:1px solid var(--border-strong); padding:.3rem .6rem; margin-bottom:1.4rem;
}
.status b{display:block; width:5px; height:5px; background:var(--accent)}
h1{font-size:clamp(2.1rem,6.2vw,3.5rem); font-weight:700; margin-bottom:1.1rem}
h1 em{font-style:normal; color:var(--accent)}
.lede{font-size:clamp(1rem,1.9vw,1.15rem); color:var(--fg-muted); max-width:50ch}
.lede + .lede{margin-top:.9rem}

/* signup */
form{margin-top:2.2rem; max-width:440px}
.field{display:flex; gap:.5rem; flex-wrap:wrap}
input[type=email]{
  flex:1 1 220px; min-width:0; font:inherit; font-size:15px; color:var(--fg);
  background:var(--bg-raised); border:1px solid var(--border-strong);
  padding:.72rem .85rem; border-radius:2px;
}
input[type=email]::placeholder{color:var(--fg-subtle)}
input[type=email]:focus-visible{outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus)}
button{
  font:inherit; font-size:14px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  background:var(--accent); color:var(--accent-fg); border:1px solid var(--accent);
  padding:.72rem 1.3rem; border-radius:2px;
}
button:hover:not(:disabled){background:var(--accent-hover); border-color:var(--accent-hover)}
button:disabled{opacity:.55; cursor:progress}
button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.note{margin-top:.8rem; font-size:12.5px; color:var(--fg-subtle); line-height:1.5}
.msg{margin-top:.9rem; font-size:13.5px; line-height:1.5; display:none}
.msg.on{display:block}
.msg.ok{color:var(--accent)}
.msg.err{color:var(--aid-withheld)}

/* the gate diagram: the product, drawn */
.panel{
  border:1px solid var(--border); background:var(--bg-raised);
  padding:clamp(1.4rem,3vw,2rem); display:flex; flex-direction:column; gap:1.15rem;
}
.panel h2{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-subtle);
}
.flow{display:flex; flex-direction:column; gap:1px; background:var(--border)}
.row{
  display:grid; grid-template-columns:1fr auto; gap:.75rem; align-items:center;
  background:var(--bg-raised); padding:.62rem .1rem;
}
.row .what{font-size:13.5px; color:var(--fg); min-width:0}
.row .what small{display:block; font-size:11px; color:var(--fg-subtle); margin-top:1px}
.tag{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  padding:.2rem .45rem; white-space:nowrap; border:1px solid currentColor;
}
.t-pass{color:var(--accent)}
.t-token{color:var(--aid-tokenized)}
.t-hold{color:var(--aid-withheld)}
.legend{
  font-size:11.5px; color:var(--fg-subtle); line-height:1.55;
  border-top:1px solid var(--border); padding-top:.9rem;
}

/* models marquee: the "every model" promise, drawn as a strip along the bottom */
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.models{border-top:1px solid var(--border); padding:1.1rem 0 .9rem; background:var(--bg)}
.models h2{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-subtle); margin-bottom:.8rem;
}
.marquee{
  overflow:hidden; display:flex; width:100%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.track{
  list-style:none; margin:0; padding:0; display:flex; flex:none; align-items:center;
  gap:2.75rem; padding-right:2.75rem; animation:marquee 48s linear infinite;
}
.marquee:hover .track{animation-play-state:paused}
.track li{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--fg-muted);
}
.m-icon{width:20px; height:20px; fill:currentColor; flex:none}
.tm{margin-top:.8rem; font-size:11px; color:var(--fg-subtle); line-height:1.5}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{flex-wrap:wrap; -webkit-mask-image:none; mask-image:none; padding:0 clamp(1.25rem,4vw,2.5rem)}
  .track{flex-wrap:wrap; gap:1rem 1.75rem; padding-right:0}
  .track[aria-hidden]{display:none}
}

/* footer */
footer{border-top:1px solid var(--border); padding:1.3rem 0 2rem}
.foot{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; justify-content:space-between}
.foot p{font-size:12px; color:var(--fg-subtle); font-family:var(--font-mono); letter-spacing:.03em}

:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}