@font-face{font-family:Inter;src:url("/assets/Inter-VF.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:GeistMono;src:url("/assets/GeistMono-Regular.otf") format("opentype");font-display:swap}

/* the two cuts. Nothing else differs between them. */
:root{
  --ink:#0A0A0A;--ivory:#F8F6F1;--lime:#CCFF00;
  --sans:Inter,-apple-system,Segoe UI,Arial,Helvetica,sans-serif;
  --mono:GeistMono,Consolas,ui-monospace,monospace;
  --ground:var(--ink);--text:var(--ivory);
  --band:var(--lime);--band-text:var(--ink);--line:var(--ink);
  --ph:rgba(10,10,10,.6);
  --btn-bg:var(--ink);--btn-text:var(--lime);--focus:var(--ink);
}
:root[data-cut="alt"]{
  --ground:var(--ivory);--text:var(--ink);
  --band:var(--ink);--band-text:var(--ivory);--line:var(--ivory);
  --ph:rgba(248,246,241,.6);
  --btn-bg:var(--lime);--btn-text:var(--ink);--focus:var(--ivory);
}

*{box-sizing:border-box}
html{min-width:320px}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,p{margin:0}
.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}

/* the page is one column the height of the viewport: the lockup stage takes the slack, the band
   sits on the bottom edge, and there is nothing to scroll. */
.page{min-height:100vh;min-height:100svh;height:100svh;display:flex;flex-direction:column}
.stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vh,72px) clamp(20px,4vw,56px)}
.lockup{width:clamp(360px,46vw,760px);max-width:100%;max-height:100%;display:flex;align-items:center}
.lockup img{width:100%;height:auto;max-height:100%;object-fit:contain}

/* the band */
.band{flex:none;width:100%;background:var(--band);color:var(--band-text);padding:clamp(20px,3vh,40px) clamp(20px,4vw,56px)}
/* the left column takes its natural width so the expo line holds on one line from 1280px up
   (max-content, capped by the 60ch measure); the form column keeps 440px, enough for the two
   fields and the 160px button in one row. Below that the auto column shrinks and the line wraps. */
.band-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,auto) minmax(440px,1fr);gap:0 clamp(24px,4vw,64px);align-items:end;transform-origin:50% 50%}
.band-say{min-width:0}
.soon{width:clamp(220px,22vw,340px);height:auto}
.expo{font:400 18px/1.45 var(--sans);margin-top:clamp(12px,1.6vh,18px);max-width:60ch}
.band-ask{min-width:0}
.eyebrow{font:12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;opacity:.75;margin-bottom:10px}
.inputs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 160px;gap:10px}
.inputs input{width:100%;min-width:0;height:52px;padding:0 15px;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--band-text);font:400 15px/1.2 var(--sans)}
.inputs input::placeholder{color:var(--ph);opacity:1}
.inputs button{height:52px;min-width:0;padding:0 18px;border:0;border-radius:0;background:var(--btn-bg);color:var(--btn-text);font:700 14px/1 var(--sans);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.inputs input:focus-visible,.inputs button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.privacy{font:11px/1.45 var(--mono);margin-top:10px;opacity:.75}
.foot{grid-column:1/-1;font:11px/1.5 var(--mono);letter-spacing:.04em;opacity:.7;margin-top:clamp(14px,2vh,22px)}

/* one column under 960px, as the original's mobile */
@media(max-width:959px){
  .band-inner{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.2vh,22px);align-items:start}
  .lockup{width:min(86vw,520px)}
  .inputs{grid-template-columns:minmax(0,1fr)}
  .inputs button{width:100%}
  .expo{font-size:17px;max-width:46ch}
}
@media(max-width:759px){
  .stage{padding:clamp(18px,4vh,40px) 20px}
  .lockup{width:min(86vw,520px);max-height:34vh}
  .soon{width:min(70vw,300px)}
  .inputs input,.inputs button{height:48px}
  .expo{font-size:16px}
  .band{padding:clamp(16px,2.4vh,28px) 20px}
}
@media(max-width:479px){
  .page{height:auto;min-height:100svh}
}

/* the thanks page */
.thanks{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(24px,4vh,40px);padding:clamp(24px,5vh,64px) 24px;background:var(--ink);color:var(--ivory)}
.thanks img{width:min(86vw,520px);height:auto}
.thanks h1{font:400 clamp(22px,3vw,34px)/1.3 var(--sans);max-width:24ch}
.thanks .foot{opacity:.7}