/* What every page of the site shares, over chorana.css and theme.css: sections and their headings, the waitlist
   form's states, the page for long text (privacy, terms) and the 404 */

/* the full-width layers behind the header and the hero are 100vw, which counts the scrollbar: clip that sliver
   (clip, not hidden, so the sticky header keeps working) */
html,body{overflow-x:clip}

main.home{display:block}
/* chorana.css centres every <section> under a big top margin: none of that here */
main.home section,main.doc section{margin-top:0;text-align:left}
main.home section:not(.hero){display:block}
.sec{padding:clamp(64px,8vw,112px) 0 0;scroll-margin-top:72px}
#waitlist{scroll-margin-top:96px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--ink)}
.sech{max-width:760px;margin:0 0 clamp(36px,5vw,56px)}
.sech.center{margin-left:auto;margin-right:auto;text-align:center}
.sech h2{margin:0;font-size:clamp(34px,4.2vw,56px);font-weight:600;line-height:1.05;letter-spacing:-.035em}
.sech p{margin:18px 0 0;font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--mute);max-width:58ch}
.sech.center p{margin-left:auto;margin-right:auto}
.nav a.navgo{display:inline-grid;place-items:center}

/* the waitlist: a trap field for bots (people never see it), and the line that says what went wrong */
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl .err{display:none;margin:0;padding:6px 12px 8px;font-size:13.5px;color:var(--bad);text-align:left}
.wl .err.on{display:block}
.wl .err a{color:inherit}
.wl.busy .go{opacity:.6;pointer-events:none}

/* fade-up on scroll (added by the script, so without it everything simply shows) */
.rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---- long text: privacy, terms ---- */
main.doc{display:block;max-width:720px;margin:0 auto;padding:clamp(32px,6vw,72px) 0 0;text-align:left}
main.doc h1{margin:0;font-size:clamp(38px,5vw,56px);font-weight:600;line-height:1.05;letter-spacing:-.04em}
main.doc .updated{margin:14px 0 0;font:500 13px var(--mono);color:var(--faint)}
main.doc .lede{margin:24px 0 0;font-size:19px;line-height:1.55;color:var(--mute)}
main.doc h2{margin:48px 0 12px;font-size:22px;font-weight:600;letter-spacing:-.025em}
main.doc p,main.doc li{font-size:16px;line-height:1.7;color:var(--ink);max-width:none;text-align:left}
main.doc p{margin:0 0 14px}
main.doc ul{margin:0 0 14px;padding-left:20px}
main.doc li{margin:0 0 6px}
main.doc a{color:var(--ink)}

/* ---- the 404 ---- */
main.lost{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:48px 0;text-align:center}
main.lost .code{font:500 13px var(--mono);letter-spacing:.08em;color:var(--faint)}
main.lost h1{margin:16px 0 0;font-size:clamp(40px,6vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1}
main.lost p{margin:16px 0 0;font-size:18px;color:var(--mute)}
main.lost .btn{margin-top:28px;height:44px;padding:0 22px}