:root{
  --paper:#f4f4f2; --card:#fcfcfa; --ink:#121210; --muted:#5a5a56; --line:#dcdcd6;
  --accent:#3b5bdb; --accent-ink:#ffffff; --tint:#e4e8fb;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;letter-spacing:-0.025em;line-height:1.08}
p{margin:0}

/* nav */
header{position:sticky;top:0;z-index:20;background:rgba(244,244,242,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.mark{display:block;line-height:0;text-decoration:none}
.mark img{display:block;height:28px;width:auto}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:15px}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.btn{display:inline-block;font:inherit;font-weight:600;font-size:15px;padding:11px 20px;border-radius:10px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none}
.btn:hover{background:#2a2a27}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:#e9e9e4}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.accent:hover{background:#2f4bc0}

/* hero */
.hero{padding:96px 24px 88px}
.hero h1{font-size:clamp(46px,9vw,112px);font-weight:700;letter-spacing:-0.045em;line-height:.98;max-width:12ch}
.hero .sub{margin-top:28px;max-width:34em;font-size:clamp(19px,2.2vw,24px);color:var(--muted);line-height:1.4}

/* sections */
section{padding:84px 0;border-top:1px solid var(--line)}
section.first{border-top:none;padding-top:72px}
.lead{font-size:clamp(30px,4.4vw,52px);font-weight:700;max-width:20ch}
.intro{margin-top:18px;max-width:38em;color:var(--muted);font-size:19px}
.stats{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px}
.stat b{display:block;font-size:clamp(34px,4.4vw,54px);letter-spacing:-0.035em;line-height:1;font-weight:700}
.stat span{display:block;margin-top:12px;color:var(--muted);font-size:16px;line-height:1.4}
.punch{margin-top:36px;font-size:21px;font-weight:600;max-width:34em;letter-spacing:-0.01em}
.src{margin-top:18px;font-size:13.5px;color:#76766f}

/* steps */
.steps{margin:44px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s}
.steps li{counter-increment:s;padding:0 22px 0 0;border-top:3px solid var(--ink);padding-top:16px}
.steps li::before{content:counter(s);display:block;color:var(--accent);font-weight:700;font-size:15px;margin-bottom:6px}
.steps h3{font-size:19px;letter-spacing:-0.015em;line-height:1.2}
.steps p{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.45}
.caveat{margin-top:40px;padding:20px 24px;background:var(--tint);border-radius:12px;font-weight:600;max-width:40em}

/* outputs */
.outs{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.out{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.out h3{font-size:18px;letter-spacing:-0.015em;line-height:1.25}
.out p{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.45}

/* validation */
.honest{margin-top:34px;max-width:42em;color:var(--muted);font-size:18px}
.honest strong{color:var(--ink)}

/* audience */
.aud{margin-top:36px;max-width:44em;font-size:20px}

/* team */
.team{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.person{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--tint);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:18px;margin-bottom:16px}
.person h3{font-size:21px;letter-spacing:-0.02em;line-height:1.15}
.role{margin-top:6px;color:var(--accent);font-weight:600;font-size:15px}
.person p{margin-top:10px;font-size:15px;color:var(--muted);line-height:1.45}

/* contact */
.mail{font-size:clamp(26px,4vw,44px);font-weight:700;letter-spacing:-0.03em;text-decoration-thickness:2px;text-underline-offset:6px}
footer{border-top:1px solid var(--line);padding:32px 0 48px;font-size:14px;color:var(--muted)}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* dialog */
dialog{border:none;border-radius:18px;padding:34px 32px 28px;max-width:440px;width:calc(100% - 32px);background:var(--card);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.28)}
dialog::backdrop{background:rgba(18,18,16,.55)}
dialog[open]{animation:pop .18s ease-out}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
dialog h2{font-size:32px}
dialog p{margin-top:12px;color:var(--muted);font-size:17px}
dialog .actions{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr;gap:28px 20px}
  .outs{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav{flex-wrap:wrap;padding:10px 24px 4px}
  nav{order:3;width:100%}
  nav ul{gap:18px;font-size:14px;overflow-x:auto;white-space:nowrap;padding:6px 0 10px}
  .hero{padding:64px 24px 56px}
  section{padding:60px 0}
  section.first{padding-top:44px}
  .stats{grid-template-columns:1fr}
  .steps,.outs,.team{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}dialog[open]{animation:none}}

/* banners */
.banner{margin:0}
.banner img{display:block;width:100%;height:clamp(200px,32vw,400px);object-fit:cover;object-position:center 55%;background:#dcdcd6}
.banner figcaption{padding-top:12px;padding-bottom:0;font-size:13.5px;color:#76766f;line-height:1.4}
.band{position:relative;overflow:hidden;height:clamp(110px,16vw,190px)}
.band svg{position:absolute;right:max(24px,calc((100% - 1120px) / 2));top:50%;transform:translateY(-50%);height:135%;width:auto}
.band.indigo{background:var(--accent);color:rgba(255,255,255,.22)}
.band.ink{background:var(--ink);color:rgba(255,255,255,.14)}
.band.tint{background:var(--tint);color:rgba(59,91,219,.28)}
.banner + section.first,.band + section.first{padding-top:52px}

/* waitlist form */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#waitlist{margin-top:20px}
#waitlist input[type=email]{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
#waitlist input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
#waitlist .consent{margin-top:10px;font-size:14px;line-height:1.45}
#waitlist .consent a,dialog .alt a{color:var(--accent)}
#waitlist .status{margin-top:10px;font-size:15px;min-height:1.2em;color:var(--muted)}
#waitlist .status.err{color:#b42318}
#waitlist .status.ok{color:#146c43}
#waitlist .actions{margin-top:14px}
dialog .alt{margin-top:18px;font-size:14px}