/* Fungaia teaser — Slate tokens verbatim from src/theme/tokens.ts.
   Plex Sans is the v23 variable file: one src serves weights 400-600. */
@font-face{font-family:'Fraunces';font-weight:600;font-display:swap;src:url(/fonts/fraunces-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400 600;font-display:swap;src:url(/fonts/plex-sans.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400.woff2) format('woff2')}

:root{
  --bgDeep:#0A0E12; --panel2:#212B35; --line:#2E3A46; --moss:#6FA3B8;
  --amber:#B9C94A; --bone:#E5EAEE; --dim:#8B98A4; --faint:#7A8A9E;
  --ink:#0A0E12; --sage:#C3CDD6; --rust:#D4735C;
  --serif:'Fraunces',Georgia,serif;
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
/* The `hidden` attribute must beat any author `display` (2026-08-18). The UA
   sheet's [hidden]{display:none} loses to a class rule, so `.wl-ok{display:flex}`
   left "You're on the list." permanently on screen and `.wl-form{display:flex}`
   would have kept the form up after a successful signup. site-check guards it. */
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bgDeep);color:var(--bone);font-family:var(--sans)}

.page{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:72px 24px 40px}
.contours{position:absolute;inset:0;width:100%;height:100%;color:var(--bone);
  opacity:.04;pointer-events:none}
.col{position:relative;max-width:560px;display:flex;flex-direction:column;align-items:center}

.langs{position:absolute;top:24px;right:28px;display:flex;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.langs a{color:var(--dim);text-decoration:none}
.langs a:hover{color:var(--bone)}
.langs a[aria-current="true"]{color:var(--amber);pointer-events:none}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--amber)}
.wordmark{width:340px;max-width:80vw;height:auto;margin:26px 0 30px}
.wordmark-small{width:250px;margin-bottom:34px}
.tagline{font-family:var(--serif);font-weight:600;font-size:clamp(33px,7.5vw,46px);
  line-height:1.12;color:var(--bone)}
.cat{font-size:16.5px;line-height:1.65;color:var(--sage);max-width:36ch;margin-top:22px}
.plat{font-size:13px;line-height:1.6;color:var(--dim);margin-top:10px}

.wl-form{display:flex;gap:10px;width:100%;max-width:440px;margin-top:36px}
.wl-input{flex:1;min-width:0;height:48px;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;color:var(--bone);font-family:var(--sans);font-size:14.5px;padding:0 16px}
.wl-input::placeholder{color:var(--faint)}
.wl-input:focus{outline:none;border-color:var(--amber)}
.wl-btn{height:48px;background:var(--amber);color:var(--ink);border:0;border-radius:12px;
  font-family:var(--sans);font-weight:600;font-size:14.5px;padding:0 22px;cursor:pointer;white-space:nowrap}
.wl-btn:focus-visible,.back:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.wl-btn[disabled]{opacity:.6;cursor:default}

.wl-ok{display:flex;align-items:center;gap:12px;margin-top:36px}
.okmark{width:26px;height:26px;flex:none;border-radius:50%;background:var(--panel2);
  display:flex;align-items:center;justify-content:center}
.ok-t{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--bone)}
.wl-err{font-size:13px;color:var(--rust);margin-top:14px}

.micro{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--faint);
  margin-top:16px;max-width:44ch}
.foot{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);margin-top:84px}
.foot a,.back{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}

.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (max-width:520px){
  .wl-form{flex-direction:column}
  .wl-btn{width:100%}
  .foot{margin-top:56px}
}
@media (prefers-reduced-motion:no-preference){
  .col{animation:rise .6s ease-out}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}