:root{--bg:#131311;--bg-deep:#0c0c0a;--surface:#1c1c18;--surface-2:#26261f;--line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.16);--text:#f5f3ea;--text-2:#cbc8ba;--muted:#93907f;--amber:#f5c11e;--amber-2:#ffd23f;--amber-dim:rgba(245,193,30,.13);--ink:#171408;--shadow:0 20px 50px rgba(0,0,0,.45)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:400 17px/1.55 Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
p{text-wrap:pretty}
::selection{background:var(--amber);color:var(--ink)}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber-2)}
img{display:block;max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.mono{font-family:"IBM Plex Mono",monospace}
.eyebrow{font:500 12px/1.4 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.sec{padding:110px 0;scroll-margin-top:90px}
.sub{color:var(--text-2);font-size:19px;max-width:640px;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 Archivo,sans-serif;padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:all .2s}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:var(--amber-2);color:var(--ink);box-shadow:0 6px 30px rgba(245,193,30,.35);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--text-2)}
.btn-ghost:hover{border-color:var(--amber);color:var(--text)}
nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(15,15,13,.94);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.wordmark{font:700 21px/1 Archivo,sans-serif;letter-spacing:-.02em;color:var(--text)}
.wordmark span{font-weight:500}
.wordmark .ks{color:var(--muted)}
.wordmark .kd{color:var(--amber);font-weight:800}
.wordmark:hover{color:var(--text)}
nav .btn{padding:10px 20px;font-size:14px}
.hero{position:relative;overflow:hidden;padding:190px 0 0;background:radial-gradient(700px 420px at 8% 8%,rgba(245,193,30,.05),transparent 60%),var(--bg)}
.hero::before{content:"";position:absolute;top:-32%;right:-14%;width:1100px;height:720px;background:radial-gradient(closest-side,rgba(245,193,30,.16),transparent 70%);animation:drift 18s ease-in-out infinite alternate;pointer-events:none}
.hero>.wrap{position:relative;z-index:1}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-150px,100px) scale(1.14)}}
.hero h1{font-size:clamp(40px,6.2vw,80px);font-weight:800;line-height:1.06;max-width:960px;margin-bottom:28px}
.hero h1 span{display:block}
.hero h1 .l1{color:var(--text-2)}
.hero .sub{margin-bottom:22px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.yt-line{font-size:13.5px;color:var(--muted);margin-top:22px}
.rulestrip{margin-top:84px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.honesty{max-width:780px;margin:0 auto;padding:20px 24px;text-align:center;font-size:15px;color:var(--muted);text-wrap:pretty}
.honesty strong{color:var(--text-2)}
.honesty .plat{display:block;font-size:12.5px;margin-top:7px}
.spine h2,.rigor h2,.join h2{font-size:clamp(32px,4.4vw,52px);margin-bottom:18px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:54px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 26px;transition:border-color .25s}
.card:hover{border-color:rgba(245,193,30,.35)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}
.idx{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--muted)}
.dot{width:12px;height:12px;border-radius:50%}
.dot.ring{border:2.5px solid var(--amber)}
.dot.live{background:var(--amber);animation:pulse 2.2s ease-in-out infinite}
.dot.done{background:var(--amber);box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 12px var(--amber)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,193,30,.45)}55%{box-shadow:0 0 0 9px rgba(245,193,30,0)}}
.card h3{font-size:21px;margin-bottom:10px}
.card p{color:var(--text-2);font-size:15.5px;text-wrap:pretty}
.act .grid2{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
.act .grid2.flip{grid-template-columns:1fr 1.15fr}
.act h3{font-size:clamp(28px,3.4vw,40px);margin-bottom:20px}
.act .copy p{color:var(--text-2);margin-bottom:16px;text-wrap:pretty}
.pill{display:inline-block;font:500 12.5px/1.5 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-2);margin-top:10px}
.frame{border-radius:16px;border:1px solid var(--line-2);box-shadow:var(--shadow);overflow:hidden}
.frame .chrome{display:flex;align-items:center;gap:10px;padding:11px 16px;font:500 11.5px/1 "IBM Plex Mono",monospace;letter-spacing:.08em}
.chrome .dots{display:flex;gap:6px}
.chrome .app{font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.62}
.chrome .sep{width:1px;height:11px;background:currentColor;opacity:.22;margin:0 -2px}
.chrome .win{letter-spacing:.02em;font-weight:500}
.chrome .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-2)}
.chrome .live i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:chromeLive 2.4s ease-in-out infinite}
@keyframes chromeLive{0%,100%{opacity:1}50%{opacity:.28}}
.chrome .dots i{width:9px;height:9px;border-radius:50%}
.frame.light{background:#fbfaf7}
.frame.light .win{color:#4a4840}
.frame.light .chrome{background:#efede6;color:#8a877a;border-bottom:1px solid #e2dfd4}
.frame.light .dots i{background:#d5d2c5}
.frame.dark{background:#101012}
.frame.dark .win{color:#d9d6cc}
.frame.dark .chrome{background:#17171a;color:var(--muted);border-bottom:1px solid var(--line)}
.frame.dark .dots i{background:#2e2e33}
.frame img{width:100%}
.moat-head{max-width:660px;margin-bottom:56px}
.stage{position:relative;margin-bottom:120px}
.copilot{position:absolute;right:-16px;bottom:-96px;width:min(48%,500px)}
.copilot .label{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--amber);margin-bottom:10px;text-transform:uppercase}
.moat .pill{margin-top:0}
.rigor .wrap{max-width:820px;text-align:center}
.rigor p{color:var(--text-2);margin:0 auto;max-width:680px;text-wrap:pretty}
.rigor .thumb{max-width:860px;margin:44px auto 0}
.rigor .cap{font:400 12px/1.5 "IBM Plex Mono",monospace;color:var(--muted);margin-top:12px}
.proof-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:48px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:52px 56px}
.proof-card h3{font-size:clamp(26px,3vw,36px);margin-bottom:16px}
.proof-card p{color:var(--text-2);margin-bottom:26px;text-wrap:pretty}

.join{background:radial-gradient(700px 380px at 50% 0%,rgba(245,193,30,.12),transparent 65%)}
.join .wrap{max-width:640px;text-align:center}
.join .sub{margin:0 auto 40px}
.join-box{background:var(--surface);border:1px solid var(--line-2);border-radius:24px;padding:36px 34px;text-align:left}
.join-box .label{font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;color:var(--amber);margin-bottom:6px}
.join-box .hint{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.join-form{display:flex;gap:10px}
.join-form input{flex:1;min-width:0;background:var(--bg-deep);border:1px solid var(--line-2);border-radius:999px;padding:14px 20px;font:400 15px Archivo,sans-serif;color:var(--text);outline:none}
.join-form input:focus{border-color:var(--amber)}
.join-form input::placeholder{color:var(--muted)}
.legal-inline{font-size:12.5px;color:var(--muted);margin-top:16px;text-wrap:pretty}
.thanks{font:500 15px Archivo,sans-serif;color:var(--amber-2);padding:14px 0}
footer{border-top:1px solid var(--line);padding:56px 0 64px;background:var(--bg-deep)}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.foot-row .mono{font-size:12.5px;color:var(--muted)}
.foot-row a{color:var(--text-2)}
.foot-row a:hover{color:var(--amber)}
.disclaimer{font-size:12px;line-height:1.65;color:#75725f;max-width:920px;text-wrap:pretty}
.msticky{display:none}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
[hidden]{display:none!important}
/* Text for screen readers only: it takes no room and is not drawn. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.btn:focus-visible,.faqlist summary:focus-visible{outline:2px solid var(--amber-2);outline-offset:3px}

/* --- Launch announcement bar, above the header on every page. On the home
       page the fixed nav becomes sticky under it, overlapping the hero by its
       own height exactly as the fixed nav did, so nothing covers the bar. --- */
.lbar{position:relative;z-index:60;background:#1f1b0c;border-bottom:1px solid rgba(245,193,30,.35);color:var(--text);font:500 14px/1.45 Archivo,system-ui,sans-serif}
.lbar-in{max-width:1120px;margin:0 auto;padding:8px 12px 8px 24px;display:flex;align-items:center;gap:12px}
.lbar-text{flex:1;min-width:0;margin:0;text-align:center;overflow-wrap:anywhere}
.lbar-link{font-weight:700;color:var(--amber-2);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.lbar-link:hover{color:#fff}
.lbar-close{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid transparent;background:none;color:var(--text-2);font:400 22px/1 Archivo,sans-serif;cursor:pointer}
.lbar-close:hover{color:var(--text);border-color:var(--line-2)}
.lbar a:focus-visible,.lbar-close:focus-visible{outline:2px solid var(--amber-2);outline-offset:2px}
.lbar.is-urgent{background:var(--amber);color:var(--ink);border-bottom-color:var(--amber-2)}
.lbar.is-urgent .lbar-link,.lbar.is-urgent .lbar-link:hover,.lbar.is-urgent .lbar-close{color:var(--ink)}
.lbar.is-urgent .lbar-close:hover{border-color:rgba(23,20,8,.4)}
.lbar.is-urgent a:focus-visible,.lbar.is-urgent .lbar-close:focus-visible{outline-color:var(--ink)}
.lbar:not([hidden]) ~ #nav{position:sticky;margin-bottom:-69px}
@media (max-width:600px){.lbar{font-size:13px}.lbar-in{padding:6px 6px 6px 16px;gap:6px}.lbar-text{text-align:left}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.dot.live{animation:none}.hero::before{animation:none}.chrome .live i{animation:none}.msticky{transition:none}html{scroll-behavior:auto}}

/* --- Breakpoints run widest first so the narrower rule always wins. The two
       max-width steps below 920 refine the single-column layout the 920 rule
       establishes; they do not re-establish it. --- */
@media (max-width:1024px){.wrap{padding:0 20px}.sec{padding:88px 0}.cards{gap:14px}.act .grid2,.act .grid2.flip{gap:44px}.proof-card{gap:36px;padding:42px 38px}.rulestrip{margin-top:68px}}
@media (max-width:920px){.sec{padding:72px 0}.hero{padding-top:140px}.rulestrip{margin-top:56px}.cards{grid-template-columns:1fr}.act .grid2,.act .grid2.flip{grid-template-columns:1fr;gap:32px}.act .grid2.flip figure{order:-1}.stage{margin-bottom:0}.copilot{position:static;width:100%;margin-top:24px}.proof-card{grid-template-columns:1fr;padding:32px 26px}.join-form{flex-direction:column}.join-form .btn{justify-content:center}.msticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(15,15,13,.96);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s}.msticky.on{transform:none}.msticky .btn{width:100%;justify-content:center}}
@media (max-width:768px){body{font-size:16px}.sec{padding:60px 0}.hero{padding-top:118px}.sub{font-size:17px}.card{padding:24px 22px}.card-top{margin-bottom:28px}.proof-card{padding:26px 20px;gap:28px}.join-box{padding:28px 22px}.rigor .thumb{margin-top:32px}footer{padding:44px 0 52px}.foot-row{flex-direction:column;align-items:flex-start;gap:12px}.disclaimer{font-size:11.5px}}
@media (max-width:360px){.wrap{padding:0 16px}.sec{padding:52px 0}.eyebrow{letter-spacing:.14em;margin-bottom:14px}.btn{padding:12px 20px;font-size:14px}nav .btn{padding:9px 15px;font-size:13px}.wordmark{font-size:19px}.join-box{padding:22px 16px}.join-form input{padding:12px 17px}.honesty{padding:18px 16px;font-size:14px}}

/* --- Above 1440 the column stops growing with the viewport unless it is told
       to, which leaves the page marooned in the middle of a wide display. --- */
@media (min-width:1440px){.wrap{max-width:1240px}.sec{padding:124px 0}.proof-card{padding:60px 64px}}
@media (min-width:1920px){body{font-size:18px}.wrap{max-width:1360px}.sub{font-size:20px}.sec{padding:140px 0}}