:root{--ink:#171714;--cream:#F4F1E9;--muted:#5a584f;--hair:#d8d4c9;--orange:#E4552B;--acid:#D9FF57;--red:#b3341a;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html{color-scheme:light}
body{margin:0;background:var(--cream);color:var(--ink);font:16.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ink)}
.wrap{max-width:720px;margin:0 auto;padding:40px 20px 80px}
[hidden]{display:none!important}

header{display:flex;align-items:center;gap:10px;padding-bottom:26px;border-bottom:1px solid var(--hair)}
header img{height:34px;width:auto}
header .word{font:400 27px/1 var(--display);letter-spacing:-.01em}
header nav{margin-left:auto;font:14px var(--sans)}
header nav a{margin-left:18px;text-decoration:none;color:var(--muted)}
header nav a:hover{color:var(--ink)}

h1{font:400 clamp(26px,5.2vw,52px)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 20px}
h2{font:600 13px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.14em;margin:44px 0 12px;color:var(--muted)}
p,li{color:var(--ink)}
.lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:34em}
small,.meta{font:13px var(--sans);color:var(--muted)}

/* hero: the mark and "Meet Fumble." ride together above the one-line headline */
.hero{padding:64px 0 8px}
/* the lockup is small and sharply highlighted, not big: square corners, the
   block hugs the words, the mark rides inside it */
.lockup{display:inline-flex;align-items:center;gap:11px;margin:0 0 20px;
  font:400 clamp(24px,3.8vw,34px)/1 var(--display);letter-spacing:-.015em;
  padding:6px 13px 8px;border-radius:0;background:var(--ink);color:var(--cream)}
.lockup img{height:1.3em;width:auto}
.lockup.acid{background:var(--acid);color:var(--ink)}
.statement{font:400 clamp(21px,3.5vw,31px)/1.25 var(--display);letter-spacing:-.015em;margin:0 0 18px}

/* the range: one icon, one claim, hairlines between. no process, no bullets */
.range{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid var(--hair)}
.range li{display:flex;align-items:center;gap:16px;padding:17px 2px;border-bottom:1px solid var(--hair);
  font:400 clamp(19px,2.9vw,25px)/1.35 var(--display);letter-spacing:-.01em}
.range svg{flex:0 0 auto;width:23px;height:23px;fill:none;stroke:var(--ink);stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;opacity:.82}
.close{margin-top:34px;font-size:18px;line-height:1.55;color:var(--muted);max-width:32em}

.cta{display:inline-block;margin-top:30px;padding:13px 22px;background:var(--ink);color:var(--cream);
  text-decoration:none;font:600 15px var(--sans);border:0;border-radius:3px;cursor:pointer}
.cta:hover{background:#000}
.cta.ghost{background:transparent;color:var(--muted);border:1px solid var(--hair)}
.cta.ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)}

footer{margin-top:72px;padding-top:20px;border-top:1px solid var(--hair);font:13px var(--sans);color:var(--muted)}
footer a{color:var(--muted);margin-right:14px}

/* waitlist popup */
.scrim{position:fixed;inset:0;background:rgba(23,23,20,.34);z-index:40}
.modal{position:fixed;z-index:50;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(92vw,430px);max-height:92vh;overflow-y:auto;background:#fff;border:1px solid var(--hair);
  border-radius:8px;padding:30px 28px 28px;box-shadow:0 18px 50px rgba(23,23,20,.18)}
.modal-x{position:absolute;top:14px;right:14px;background:0;border:0;padding:6px;cursor:pointer;color:var(--muted);line-height:0}
.modal-x:hover{color:var(--ink)}
.modal-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.modal h2{font:400 30px/1.15 var(--display);text-transform:none;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.modal-sub{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 22px}
.modal label{display:block;margin-bottom:15px;font:600 11px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted)}
.modal label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;opacity:.7}
.modal input{display:block;width:100%;margin-top:8px;padding:11px 12px;font:400 15px var(--sans);
  color:var(--ink);background:#fff;border:1px solid var(--hair);border-radius:4px}
.modal input:focus{outline:0;border-color:var(--ink)}
.modal .cta{width:100%;margin-top:9px;text-align:center}
.modal .cta:disabled{opacity:.45;cursor:default}
.modal-err{margin:0 0 12px;font-size:13.5px;color:var(--red)}
.modal-done h2{margin-bottom:10px}

@media(max-width:520px){.hero{padding-top:44px}.range li{gap:13px}}