/* The site's one stylesheet (design system P-16): fonts, tokens, the header mark and its Get notified button, the footer,
   the card, the field with its send button, the waitlist's done state, the card pages (/launch's password, unsubscribe)
   and the legal shell. soon.html, index.html, src/index.js (launchForm, the unsubscribe answers) and the legal pages
   (src/privacy.js, src/fair-use.js) link it as /site.css?v=N (bump N when this file changes: it's cached a year); what
   only one page needs stays in that page. Light mode (P-2): src/index.js inlines this file before rewriting a page for
   a visitor who chose light in the drive, so write colours as tokens or literals theme.js can map. */
@font-face{font-family:"Plus Jakarta Sans";src:url('/fonts/site/PlusJakartaSans-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url('/fonts/site/InstrumentSans-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
/* One brand gradient (P-1): the five stops, 135° for rings (focused field, send button, the done ring), 90° for lines and
   the footer name's shimmer. */
:root{color-scheme:dark;--bg:#0e0e0e;--text:#f4f4f4;--muted:#8d8d8d;--surface:#151517;--line:#2c2c2c;--accent:#2cc6fa;--danger:#ff8a7a;
 --pill-bg:#f4f4f4;--pill-text:#111;
 --brand-ring:linear-gradient(135deg,#253596,#2cc6fa,#ddf2df,#fedc5a,#c52614);
 --brand-line:linear-gradient(90deg,#253596,#2cc6fa,#ddf2df,#fedc5a,#c52614);
 --body:"Plus Jakarta Sans",system-ui,sans-serif;--display:"Instrument Sans",system-ui,sans-serif;--gut:clamp(16px,6vw,96px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.6 var(--body);-webkit-font-smoothing:antialiased}

/* Header: the bridge mark and the name; on soon and the homepage it floats over the hero (.top). */
header,footer{display:flex;justify-content:space-between;align-items:center}
header.top{position:absolute;left:0;right:0;top:0;z-index:5;padding:24px var(--gut)}
.mark{display:inline-flex;align-items:center;gap:12px;font:700 16px/1 var(--display);letter-spacing:-.01em;color:var(--text);text-decoration:none}
.bm{display:block;height:auto;aspect-ratio:85/33.5;overflow:visible}
.mark .bm{width:36px}
.mark,.tag{white-space:nowrap}
@media(max-width:380px){.top .mark{gap:9px;font-size:15px}.top .mark .bm{width:30px}}
/* Get notified: the drive's main button (D-44, P-13): compact, white, sentence case, no rainbow. */
.tag{font:600 10px var(--body);color:var(--pill-text);background:var(--pill-bg);border:0;border-radius:999px;padding:7px 12px;text-decoration:none;cursor:pointer;transition:background .15s,transform .12s}
.tag:hover{background:#fff}.tag:active{transform:scale(.98)}
.tag:focus-visible{background:#fff;outline:2px solid var(--accent);outline-offset:3px}

/* Footer: one set of links on every page (src/footer.js). */
footer{font-size:12px;color:var(--muted);flex-wrap:wrap;gap:8px 16px}
footer a{color:var(--muted);text-underline-offset:3px}footer a:hover{color:var(--text)}
/* "Creative Drive" in the footer: on hover the letters fade into the brand gradient with a soft glow and a drifting light. */
/* Longhands, not the background shorthand: light mode rewrites only background-image, so the text clip survives. */
.alive{cursor:default;padding:.3em .6em;margin:-.3em -.6em;background-image:linear-gradient(100deg,#fff0 0%,#ffffff38 50%,#fff0 100%),linear-gradient(90deg,#253596,#2cc6fa,#ddf2df,#fedc5a,#c52614);background-size:8em 100%,auto;background-position:0 0,0 0;background-repeat:repeat-x,repeat;-webkit-background-clip:text;background-clip:text;
 animation:sheen 4s linear infinite paused;filter:drop-shadow(0 0 0 #2cc6fa00);transition:color .6s ease,filter .6s ease}
.alive:hover{color:transparent;animation-play-state:running;filter:drop-shadow(0 0 10px #2cc6fa59)}
@keyframes sheen{to{background-position:8em 0,0 0}}
@media(prefers-reduced-motion:reduce){.alive{animation:none!important}}

/* The card: both waitlists (soon's pop-up, the homepage's Get notified) and the card pages. */
.card{width:100%;background:var(--surface);border:1px solid #ffffff1f;border-radius:20px;padding:clamp(22px,3vw,36px);text-align:left;box-shadow:inset 0 1px 0 #ffffff14,0 30px 80px #0006}
.card .ct{margin:0 0 6px;font:600 clamp(24px,4vw,30px)/1.1 var(--display);letter-spacing:-.02em}
.card .lead{margin:0 0 20px;color:var(--muted);font-size:14px}
/* The field with its round send button inside (the ringed send is the site's recorded exception to D-44, B-201). */
input{flex:1;min-width:0;width:100%;background:#00000040;border:1px solid transparent;border-radius:8px;padding:12px 14px;color:var(--text);font:500 15px var(--body)}
input:focus{outline:0;background:linear-gradient(#1b1c20,#1b1c20) padding-box,var(--brand-ring) border-box}
button{font:600 12px var(--body);border:0;border-radius:999px;padding:0 20px;cursor:pointer;transition:opacity .15s,transform .15s}
button:disabled{opacity:.4;cursor:not-allowed}
.field{position:relative;display:flex}
.field input{padding-right:64px;height:60px;font-size:17px}
.go{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%;color:#fff;border:1.5px solid transparent;background:linear-gradient(#2b2c31,#2b2c31) padding-box,var(--brand-ring) border-box}
.go:active:not(:disabled){transform:translateY(-50%) scale(.95)}
.go svg{width:18px;height:18px}
.go.busy svg{animation:nudge .8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(-3px)}}
.note{font-size:12.5px;color:#d8d8d8;margin:12px 2px 0;min-height:1.2em}
.note.error{color:var(--danger)}
.status:empty{display:none}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Done (D-43 ring-check, design system 7.12): one brand ring with a white check, a white heading, one muted line. The
   status line stays for screen readers. */
.okay{display:none;text-align:center;padding:6px 0 2px}
.card.done>:not(.okay,.x,.status){display:none}
.card.done .status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.card.done .okay{display:block}
.rck{width:64px;height:64px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--brand-ring) border-box;color:#fff}
.rck svg{width:28px;height:28px}
.okay h3{margin:0 0 6px;font:600 clamp(22px,3.4vw,28px)/1.15 var(--display);letter-spacing:-.02em}
.okay p{margin:0 auto;max-width:34ch;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.card.done .rck{animation:ringin .5s cubic-bezier(.2,.8,.2,1) both}
.card.done .rck path{stroke-dasharray:30;animation:tick .45s .2s cubic-bezier(.65,0,.35,1) both}
@keyframes ringin{from{opacity:0;transform:scale(.85)}}@keyframes tick{from{stroke-dashoffset:30}}
@media(prefers-reduced-motion:reduce){.card.done .rck,.card.done .rck path{animation:none}}

/* Card pages: /launch's password and the unsubscribe answers, one card in the middle of the page. */
body.cardpage{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
:where(.cardpage) .card{width:min(420px,100%);padding:clamp(24px,4vw,34px)}
:where(.cardpage .card)>.bm{width:52px;margin:0 0 18px}
:where(.cardpage) h1{margin:0 0 18px;font:600 24px/1.1 var(--display);letter-spacing:-.02em}
:where(.cardpage div.card) h1{margin-bottom:10px}
:where(.cardpage .card)>p{margin:0;color:var(--muted)}:where(.cardpage .card)>p+p{margin-top:18px}
:where(.cardpage) a{color:var(--accent);text-underline-offset:3px}

/* Legal shell: privacy, terms, texts and fair use, a 640 column for the header, the text and the footer. */
body.legal{font:400 16px/1.65 var(--body);overflow-x:hidden}
:where(.legal) header,:where(.legal) footer{gap:12px;max-width:640px;margin:0 auto;padding:24px 16px}
:where(.legal) footer{border-top:1px solid var(--line);flex-wrap:wrap;gap:8px 16px}
:where(.legal) main{max-width:640px;margin:0 auto;padding:8px 16px 48px;overflow-wrap:break-word}
:where(.legal) h1{font:700 clamp(28px,6vw,44px)/1.1 var(--display);margin:0 0 8px;letter-spacing:-.025em}
:where(.legal) h2{font:600 18px/1.3 var(--display);letter-spacing:-.01em;margin:36px 0 10px;color:#e8e8e8}
:where(.legal) .draft{background:#3a2a06;border:1px solid #fedc5a66;color:#fedc5a;border-radius:12px;padding:12px 16px;margin:0 0 28px;font-weight:600}
:where(.legal) .dated{color:var(--muted);font-size:14px;margin:0 0 24px}
:where(.legal) .lede{font-size:18px;margin:0 0 16px}
:where(.legal) ul{margin:0;padding-left:20px}:where(.legal) li{margin:6px 0}
:where(.legal) p{margin:0 0 10px}
:where(.legal) a{color:var(--accent);text-underline-offset:3px}
:where(.legal) footer a{color:var(--muted)}:where(.legal) footer a:hover{color:var(--text)}