@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 clamp(1.0625rem,1rem + .25vw,1.1875rem)/1.55 "Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:500;letter-spacing:-.035em;line-height:1;text-wrap:balance}
h1 em,h2 em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:-.02em}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.small{font-size:.9rem;opacity:.78}
.screen{position:relative;aspect-ratio:16/10;overflow:hidden}
.screen>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .35s}
.screen>.on{opacity:1}
.slip .row{display:flex;gap:10px;align-items:baseline;margin:.35em 0}
.slip .row i{flex:1;border-bottom:1px dotted currentColor;opacity:.4}
input[type=range]{width:100%;accent-color:currentColor}
details summary{cursor:pointer}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-weight:600;vertical-align:top;white-space:nowrap}
th,td{padding:.8em 1em .8em 0}
:root{--paper:#f2f0e8;--ink:#10231d;--muted:#4b5a54;--leaf:#1d6b58;--dark:#0c1613;--dark-2:#15231f;--on-dark:#e9eee6;--edge:clamp(20px,4vw,64px)}
html{background:var(--paper)}
body{color:var(--ink);background:var(--paper);overflow-x:clip}
.top{position:fixed;z-index:9;top:0;left:0;right:0;display:flex;align-items:center;gap:26px;height:68px;padding:0 var(--edge);color:var(--ink);background:var(--paper);transition:color .3s,background .3s}
.top a{text-decoration:none;font-size:.95rem}
.top .mark{font-weight:600;font-size:1.2rem;margin-right:auto;letter-spacing:-.02em}
.top .join{padding:9px 18px;border-radius:999px;background:var(--ink);color:var(--paper);transition:background .3s,color .3s}
html[data-dark] .top{color:var(--on-dark);background:var(--dark)}
html[data-dark] .top .join{background:var(--on-dark);color:var(--dark)}
@media(max-width:640px){.top .hide{display:none}}

.scene{position:relative;height:560vh}
.stage{position:sticky;top:0;height:100svh;height:100svh;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.step{position:absolute;z-index:3;inset:0;padding:0 var(--edge);opacity:0;visibility:hidden}
.step:not(.live){display:none}
.step.live{visibility:visible}
.hero h1{position:absolute;left:var(--edge);right:var(--edge);top:11vh;font-size:clamp(3.2rem,min(11.4vw,20vh),12.5rem);line-height:.92;letter-spacing:-.05em}
.hero h1 span{display:block}
.hero h1 span+span{text-align:right}
.hero .lead{position:absolute;z-index:3;left:var(--edge);top:calc(11vh + clamp(3.2rem,min(11.4vw,20vh),12.5rem)*1.02);width:min(390px,calc(100% - 2*var(--edge)))}
.hero .lead .small{display:block;width:100%}
.hero .lead p{margin-bottom:16px;color:var(--ink)}
.button{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;text-decoration:none;cursor:pointer}
.cta-line{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.lost{z-index:3;display:grid;place-items:center;text-align:center}
.lost h2{font-size:clamp(2.6rem,7.4vw,8rem);padding:.3em .55em .36em;background:var(--paper);border-radius:28px}
.turn{z-index:3}
.turn .card{position:absolute;right:max(var(--edge),6vw);top:50%;transform:translateY(-50%);width:min(560px,48vw);padding:30px 32px;border-radius:22px;background:#fffdf6;box-shadow:0 30px 70px -30px rgba(16,35,29,.45)}
.turn h2{font-size:clamp(2rem,3.6vw,3.6rem);margin-bottom:14px}
.note-title{font-weight:600;font-size:1.05rem;margin:14px 0 6px;}
.note li{margin:7px 0;font-size:.98rem}
.note ul{margin:8px 0 0;padding:0;list-style:none}
.note time{font-variant-numeric:tabular-nums;color:var(--leaf);margin-right:8px;font-weight:600;font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chips span{padding:3px 11px;border:1px solid #cdcab9;border-radius:999px;font-size:.84rem}
.map{z-index:3;color:var(--on-dark)}
.map h2{position:absolute;left:var(--edge);bottom:5vh;font-size:clamp(2.4rem,min(5.4vw,10vh),6rem)}
.map p{position:absolute;right:var(--edge);bottom:6vh;width:min(340px,40vw)}
.cluster{position:absolute;z-index:3;color:var(--on-dark);font-size:.95rem;font-weight:500;opacity:0;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap}
@media(max-width:900px){
  .hero h1{top:13vh;font-size:clamp(2.6rem,12vw,6rem)}
  .hero h1 span+span{text-align:left}
  .hero .lead{position:relative;top:auto;left:0;width:auto;margin-top:calc(13vh + clamp(2.6rem,12vw,6rem)*2.5)}
  .turn .card{left:var(--edge);right:var(--edge);top:auto;bottom:3vh;transform:none;width:auto;padding:20px}
  .turn .card .extra{display:none}
  .map h2{bottom:22vh}.map p{left:var(--edge);right:var(--edge);width:auto;bottom:6vh}
}
/* without the live scene the steps are plain sections */
html:not(.gl) .scene{height:auto}
html:not(.gl) .stage{position:static;height:auto;overflow:visible}
html:not(.gl) #gl{display:none}
html:not(.gl) .step{position:relative;opacity:1;visibility:visible;padding-block:96px}
html:not(.gl) .hero h1,html:not(.gl) .hero .lead,html:not(.gl) .turn .card,html:not(.gl) .map h2,html:not(.gl) .map p{position:static;transform:none;width:auto}
html:not(.gl) .hero .lead{margin-top:28px}
html:not(.gl) .map{background:var(--dark)}

.after{position:relative;z-index:4;background:var(--dark);color:var(--on-dark)}
section{padding:clamp(72px,11vw,150px) var(--edge)}
h2{font-size:clamp(2.5rem,6vw,6rem)}
.get-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:end;margin-bottom:34px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills button{padding:10px 18px;border-radius:999px;border:1px solid rgba(233,238,230,.3);background:none;cursor:pointer;transition:background .18s,color .18s}
.pills button[aria-pressed=true]{background:var(--on-dark);color:var(--dark)}
.get-stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:end}
.screen{border-radius:16px;background:var(--dark-2)}
.dock p{font-size:1.14rem;margin-bottom:12px}.dock small{opacity:.7}
.keeps,.faq,.cta,.foot{background:var(--paper);color:var(--ink)}
.keeps{display:grid;grid-template-columns:1fr 1fr;gap:6vw}
.keeps h2{margin-bottom:22px}
.keeps tr{border-top:1px solid #cfccbd}
.keeps table+p{margin-top:16px}
.how{display:grid;grid-template-columns:1fr minmax(0,520px);gap:6vw;background:#e3dfd0;color:var(--ink)}
.how h2{margin-bottom:22px}
.count{display:block;margin-top:30px;font-weight:500}
.count-value{display:block;font-size:clamp(5rem,13vw,12rem);line-height:1;letter-spacing:-.05em;font-weight:500;font-variant-numeric:tabular-nums}
.slip{padding:30px;background:#fffdf6;border-radius:18px}
.slip h3{font-size:.95rem;margin:20px 0 6px;font-weight:600}.slip h3:first-child{margin-top:0}
.total{margin-top:20px;font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.risk{display:grid;grid-template-columns:1fr 1fr;gap:6vw;background:var(--leaf);color:#f4f6ef}
.statement{font-size:clamp(1.5rem,2.3vw,2.2rem);line-height:1.2;letter-spacing:-.02em;margin-bottom:18px}
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:6vw}
details{border:0;background:rgba(127,127,127,.12);border-radius:12px;padding:14px 18px;margin-bottom:8px}
summary{font-weight:500}details p{margin-top:8px}
.cta{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end;background:var(--ink);color:var(--paper)}
form{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
input[type=email]{flex:1;min-width:210px;min-height:50px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:none;color:inherit;font:inherit}
.cta .button{background:var(--paper);color:var(--ink)}
.foot{background:var(--ink);color:var(--paper);padding:30px var(--edge) 24px}
.foot nav{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:12px}
.foot-name{font-size:clamp(4rem,19vw,22rem);font-weight:500;letter-spacing:-.06em;line-height:.9;margin-top:24px}
@media(max-width:860px){.get-stage,.keeps,.how,.risk,.faq,.cta{grid-template-columns:1fr}.screen{aspect-ratio:4/3}}

/* Privacy page */
.page{max-width:720px;margin:0 auto;padding:48px var(--edge) 96px}
.page h1{font-size:clamp(2.6rem,6vw,4.4rem);margin:32px 0 18px}
.page h2{font-size:1.5rem;margin:40px 0 10px;letter-spacing:-.02em}
.page p{margin-bottom:12px}
.page .wordmark{font-weight:600;font-size:1.2rem;text-decoration:none}
.page .statement{font-size:1.5rem;line-height:1.3;letter-spacing:-.015em}
.page tbody tr:nth-child(odd){background:rgba(16,35,29,.05)}
.page th,.page td{padding:12px}
/* Skip link and the archive figure */
.skip{position:absolute;left:-999px;top:8px;z-index:20;padding:8px 14px;background:var(--ink);color:var(--paper)}
.skip:focus{left:8px}
.proof{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end;padding:clamp(72px,10vw,150px) var(--edge)}
.proof h2{grid-column:1/3;font-size:clamp(2.2rem,5vw,4.4rem)}
.proof .figure{font-size:clamp(6rem,17vw,16rem);font-weight:500;letter-spacing:-.05em;line-height:.9}
@media(max-width:860px){.proof{grid-template-columns:1fr}.proof h2{grid-column:auto}}