/* Barlow and Barlow Condensed, self-hosted (SIL Open Font License, see fonts/OFL.txt) */
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800.woff2) format("woff2")}
:root{
  color-scheme:dark;
  --bg:#0b1210; --panel:#121c17; --panel-2:#17231d; --line:#26352e;
  --text:#e8efe9; --muted:#9fb0a5; --faint:#6f8177;
  --good:#7ee08a; --gold:#ffd65a; --bad:#ff8a5b;
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.45;padding:env(safe-area-inset-top,0) 16px 48px}
.wrap{max-width:1080px;margin:0 auto}
.sr,.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

.top{padding:22px 0 0}
.logo{display:inline-flex;align-items:baseline;gap:3px;font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:.01em;color:var(--text);text-decoration:none}
.logo i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#fff;align-self:baseline;transform:translateY(-1px)}
.logo b{color:var(--good);font-weight:800}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:40px 0 24px}
.eyebrow{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(48px,7.5vw,88px);line-height:.92;margin:0;letter-spacing:.005em;text-wrap:balance}
.lede{color:var(--muted);font-size:19px;margin:18px 0 26px;max-width:46ch}

#join{display:flex;gap:8px;max-width:520px}
input[type=email]{flex:1;min-width:0;font:inherit;font-size:17px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:13px 18px}
input[type=email]:focus-visible,textarea:focus-visible{outline:2px solid var(--good);outline-offset:1px;border-color:transparent}
button{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:#0b1210;background:var(--good);border:0;border-radius:999px;padding:12px 22px;cursor:pointer;white-space:nowrap}
button:hover,button:focus-visible{background:var(--gold);outline:none}
button[disabled]{opacity:.6;cursor:wait}
.fine{color:var(--faint);font-size:14.5px;margin:10px 0 0}
.fine.err{color:var(--bad)}
.done{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-size:34px;line-height:1;margin:0}
.tick{width:30px;height:30px;border-radius:50%;background:var(--good);position:relative;flex:none}
.tick::after{content:"";position:absolute;left:10px;top:6px;width:7px;height:13px;border:solid #0b1210;border-width:0 3px 3px 0;transform:rotate(45deg)}

#questions{margin-top:18px;display:grid;gap:10px;max-width:560px}
.q{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase}
.fine a,.foot a{color:var(--good)}
fieldset{border:0;margin:0;padding:0}
legend{font-weight:600;margin-bottom:8px;padding:0}
legend small{color:var(--faint);font-weight:400;margin-left:4px}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pills label{cursor:pointer}
.pills input{position:absolute;opacity:0;width:1px;height:1px}
.pills span{display:inline-block;font-size:15px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 13px}
.pills label:hover span{border-color:var(--muted)}
.pills input:focus-visible+span{outline:2px solid var(--good);outline-offset:2px}
.pills input:checked+span{background:var(--good);border-color:var(--good);color:#0b1210;font-weight:600}
textarea{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;resize:vertical}
#questions button{justify-self:start}

.phone{justify-self:center;width:min(100%,340px);aspect-ratio:9/16;border-radius:34px;padding:10px;background:#050806;box-shadow:0 0 0 1px var(--line),0 30px 80px rgba(0,0,0,.6)}
.phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:26px;background:#000}

h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.4vw,46px);text-transform:uppercase;margin:0 0 14px}
.how,.what{padding:34px 0 0}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:s}
.how li{counter-increment:s;background:var(--panel);border-radius:14px;padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px}
.how li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--gold)}
.how b{font-family:var(--display);font-weight:800;font-size:24px;text-transform:uppercase}
.how span{color:var(--muted)}
.what ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;max-width:70ch}
.what li{position:relative;padding-left:22px;color:var(--text)}
.what li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--good)}
.foot{color:var(--faint);font-size:14px;padding:40px 0 0}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:28px;padding-top:26px}
  .phone{width:min(78vw,320px)}
  .how ol{grid-template-columns:1fr}
}
@media (max-width:460px){
  #join{flex-direction:column}
  button{width:100%}
  #questions button{width:auto}
}