/* The waitlist (5 Nov 2026, second pass): a live pill in the middle of the nav, a section right under the
   hero, and the footer status indicator. Tokens first. Every colour comes from the site's palette
   (styles.css :root), so both themes work without rules of their own. */
:root{
  --ok:#2f9e6e;--warn:var(--yellow);--bad:var(--coral);
  --wl-radius:7px;--wl-field:var(--card);
  --wl-pill-h:38px;--wl-gap:64px;
  --wl-ease:cubic-bezier(.2,.7,.3,1);
}

/* ── Nav: three columns, the pill in the true middle ─────────────────────────────────────────────────
   (The section links stay hidden, as styles.css decided: the header keeps only actions.) */
nav.has-wl{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:18px}
nav.has-wl .nav-left{display:flex;align-items:center;min-width:0}
nav.has-wl .nav-right{justify-self:end}

.wl-pill{position:relative;display:inline-flex;align-items:center;gap:10px;height:var(--wl-pill-h);padding:0 3px 0 14px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--sheet) 82%,transparent);color:var(--ink);text-decoration:none;font:500 11px DM Mono,monospace;white-space:nowrap;overflow:hidden;isolation:isolate;transition:border-color .2s,background .2s}
.wl-pill:hover{border-color:color-mix(in srgb,var(--purple) 55%,var(--line));background:var(--sheet)}
.wl-pill:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.wl-pill-text{display:inline-flex;align-items:center;gap:5px;line-height:1}
.wl-pill-cta{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 13px;border-radius:999px;background:var(--btn);color:#fff;line-height:1}
.wl-pill:hover .wl-pill-cta{background:var(--pop)}
.wl-num{display:inline-block;font-weight:700;font-family:"DM Sans",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wl-pill .wl-num{font-size:14px;line-height:1}

/* The "live" dot: green, with a ring that keeps pinging while motion is allowed. */
.wl-live{position:relative;flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok)}

/* ── The window (5 Nov 2026: the form left the page; on the landing it read poorly) ─────────────────────
   Opened by the pill, the footer link and the #waitlist address. A card in the middle on a computer, a
   sheet from the bottom on a phone. */
/* Opened with show(), not showModal() (waitlist.js): fixed and centred by hand, above its own backdrop. */
.wl{position:fixed;inset:0;z-index:1000;height:fit-content;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--card-line);border-radius:var(--wl-radius);background:var(--card);color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 40px 100px -40px var(--shade)}
.wl-backdrop{position:fixed;inset:0;z-index:999;background:color-mix(in srgb,#170f34 62%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html.motion .wl-backdrop:not([hidden]){animation:wl-fade .26s var(--wl-ease)}
@keyframes wl-fade{from{opacity:0}}
/* $10 for everyone on the waitlist at launch (owner, 05.11) */
.wl-offer{margin:14px 0 0;padding:10px 13px;border:1px solid color-mix(in srgb,var(--coral) 42%,transparent);border-radius:10px;background:color-mix(in srgb,var(--coral) 9%,transparent);color:var(--ink);font-size:14px;line-height:1.45}
.wl-offer b{color:var(--coral)}
/* The consent box sits inside a .wl-field, so it has to beat the label and text-input rules below. */
.wl-field .wl-consent{display:flex;justify-content:flex-start;align-items:flex-start;gap:10px;margin:0;color:var(--muted);font:400 13px/1.45 "DM Sans",sans-serif;letter-spacing:0;cursor:pointer}
.wl-field .wl-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;padding:0;border:0;background:none;accent-color:var(--btn);cursor:pointer}
.wl-field .wl-consent input:focus{outline:none}
.wl-field .wl-consent input:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.wl-field .wl-consent input[aria-invalid="true"]{outline:2px solid var(--coral);outline-offset:2px}
.wl-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.wl-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1001}
html:has(.wl[open]){overflow:hidden}
.wl-panel{position:relative;padding:28px 30px 26px}
.wl-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}
.wl-close:hover{color:var(--ink);background:var(--sheet-hi)}
.wl-close:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.wl-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.wl-eyebrow{display:inline-flex;align-items:center;gap:10px}
.wl h2{margin:12px 44px 10px 0;font-size:clamp(30px,4.4vw,40px);line-height:1;letter-spacing:-.06em}
.wl h2 br{display:none}
.wl h2 em{color:var(--coral)}
.wl-lead{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.wl-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:12px 0 0;color:var(--muted);font:500 11px/1.5 DM Mono,monospace;letter-spacing:.04em}
.wl-count .wl-num{font-size:22px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.wl-form{margin-top:22px}
.wl-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.wl-field{margin:0 0 14px}
.wl-field label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 6px;font:500 11px DM Mono,monospace;letter-spacing:.06em;color:var(--muted)}
.wl-field label i{font-style:normal;color:var(--faint);letter-spacing:.04em}
.wl-field input,.wl-field textarea{display:block;width:100%;padding:11px 12px;border:1px solid var(--card-line);border-radius:4px;background:var(--sheet);color:var(--ink);font:400 15px/1.4 "DM Sans",sans-serif}
.wl-field textarea{min-height:66px;resize:vertical}
.wl-field ::placeholder{color:var(--faint);opacity:1}
.wl-field input:focus,.wl-field textarea:focus{outline:2px solid var(--purple);outline-offset:1px;border-color:transparent}
.wl-field [aria-invalid="true"]{border-color:var(--coral)}
.wl-error{margin:6px 0 0;color:var(--coral);font-size:13px;line-height:1.4}
.wl-say{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--coral);background:var(--sheet-hi);font-size:14px;line-height:1.45}
/* The honeypot: present for form-filling bots, never seen or reached by a person. */
.wl-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.wl-oauth{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.wl-oauth-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 14px;border:1px solid var(--card-line);border-radius:4px;background:var(--sheet);color:var(--ink);font:500 12px DM Mono,monospace;cursor:pointer;transition:border-color .2s,background .2s}
.wl-oauth-btn:hover{border-color:var(--ink);background:var(--sheet-hi)}
.wl-oauth-btn:focus-visible,.wl-submit:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.wl-oauth-btn svg{flex:none;width:18px;height:18px}
.wl-oauth-btn:disabled{opacity:.6;cursor:progress}
.wl-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--faint);font:500 10px DM Mono,monospace;letter-spacing:.1em;text-transform:uppercase}
.wl-or::before,.wl-or::after{content:"";flex:1;height:1px;background:var(--line)}

.wl-submit{display:block;width:100%;padding:14px 16px;border:0;border-radius:4px;background:var(--btn);color:#fff;font:500 12px DM Mono,monospace;letter-spacing:.04em;cursor:pointer}
.wl-submit:hover{background:var(--pop)}
.wl-submit:disabled{opacity:.6;cursor:progress}
.wl-privacy{margin:14px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
.wl-privacy a{color:var(--purple);text-underline-offset:3px}

.wl-done{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.wl-done:focus{outline:none}
.wl-done h3{margin:0 0 12px;font-size:clamp(34px,5vw,46px);line-height:1;letter-spacing:-.06em;transform-origin:0 60%}
.wl-done h3 em{color:var(--coral)}
.wl-done .wl-lead{margin-bottom:20px}
/* Joined: only the congratulation stays (waitlist.js sets .is-joined). */
.wl-panel.is-joined>:is(h2,.wl-lead,.wl-offer,.wl-count){display:none}
.wl-panel.is-joined .wl-done{margin-top:14px;padding-top:0;border-top:0}
html.motion .wl-panel.is-joined .wl-done h3{animation:wl-pop .6s cubic-bezier(.34,1.56,.64,1) both}
html.motion .wl-panel.is-joined .wl-done>:not(h3){animation:wl-rise .5s .15s var(--wl-ease) both}
@keyframes wl-pop{from{opacity:0;transform:scale(.8)}}
@keyframes wl-rise{from{opacity:0;transform:translateY(8px)}}

/* ── The footer: the beta line, the counter, the status indicator ──────────────────────────────────── */
.footer-brand>.footer-count{max-width:320px;margin:8px 0 0;color:#c8c1e7;font:500 11px/1.6 DM Mono,monospace;letter-spacing:.02em}
.footer-health{display:inline-flex;align-items:center;gap:9px;margin-top:14px;color:#c8c1e7;font:500 11px/1.6 DM Mono,monospace;letter-spacing:.02em;text-decoration:none}
.footer-health:hover{color:#fff}
.footer-health::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 28%,transparent)}
.footer-health[data-state="degraded"]::before{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 28%,transparent)}
.footer-health[data-state="outage"]::before{background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 28%,transparent)}
.wl-backdrop[hidden],.footer-health[hidden],.footer-count[hidden],.wl-count[hidden],.wl-error[hidden],.wl-say[hidden],.wl-form[hidden],.wl-done[hidden],.wl-oauth-wrap[hidden],.wl-oauth-btn[hidden]{display:none}

/* ── Smaller screens ────────────────────────────────────────────────────────────────────────────────── */
/* Where the right-hand buttons stop fitting their half, the documentation button keeps only its icon
   (the label stays for screen readers), and below 760px the nav becomes a plain row. */
@media(max-width:1080px){
  nav.has-wl .nav-doc{padding:10px}
  nav.has-wl .nav-doc b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Narrower: the nav stays a grid, so the pill stays in the true middle (5 Nov 2026: as a plain row it
   leaned left). To keep both halves wide enough, the pill keeps the dot, the number and a round arrow
   (concentric with the pill's end), and "Sign in" goes — the footer links to it. */
@media(max-width:760px){
  nav.has-wl{column-gap:10px}
  nav.has-wl .nav-in{display:none}
  .wl-pill{gap:7px;padding:0 3px 0 12px;--wl-pill-h:34px}
  .wl-pill-cta{width:26px;height:26px;padding:0;font-size:0}
  /* The arrow is drawn, not typed: the "→" of the mono font sat 1.6px below the circle's middle (5 Nov 2026).
     Its box is 14px in the 26px circle, so it starts on a whole pixel (6px): a 13px box started at 6.5px and
     the browser painted it at 7, half a pixel low and right. The drawing is centred in its box. */
  .wl-pill-cta::after{content:"";width:14px;height:14px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.7 7h8.6M7.7 3.4l3.6 3.6L7.7 10.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.7 7h8.6M7.7 3.4l3.6 3.6L7.7 10.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media(max-width:560px){
  /* the window becomes a sheet from the bottom of the screen */
  .wl{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;border-width:1px 0 0;border-radius:16px 16px 0 0}
  .wl-panel{padding:24px 18px calc(18px + env(safe-area-inset-bottom))}
  .wl-panel::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--line)}
  .wl h2{font-size:28px}
  .wl-row{grid-template-columns:1fr;gap:0}
  .wl-oauth{grid-template-columns:1fr}
}
/* The documentation button goes first (the footer links to the docs), then the logo keeps only its mark. */
@media(max-width:520px){
  nav.has-wl .nav-doc{display:none}
}
@media(max-width:430px){
  nav.has-wl .nav-right{gap:6px}
  nav.has-wl .brand span{display:none}
  .theme,.lang-btn,.wl-pill{flex:none}
}

/* ── Motion: only while the reader allows it (html.motion is set in the head) ───────────────────────── */
html.motion .wl-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:wl-ping 2.4s var(--wl-ease) infinite}
@keyframes wl-ping{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(2.8);opacity:0}}
/* The pill shimmers now and then: a soft band of the site's purple and coral crosses it. The band fades
   in as it enters and out before it leaves, so it never stops short or vanishes in one frame (5 Nov 2026:
   the first version crawled at the end and then cut out). */
html.motion .wl-pill::after{content:"";position:absolute;top:-1px;bottom:-1px;left:0;width:46%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,var(--purple) 30%,transparent) 42%,color-mix(in srgb,var(--coral) 24%,transparent) 62%,transparent 100%);transform:translateX(-110%);opacity:0;animation:wl-shine 7.5s cubic-bezier(.45,.05,.4,1) infinite}
@keyframes wl-shine{
  0%,52%{transform:translateX(-110%);opacity:0}
  60%{opacity:1}
  84%{opacity:1}
  96%,100%{transform:translateX(330%);opacity:0}
}
/* The window comes in softly; on a phone the sheet slides up. */
html.motion .wl[open]{animation:wl-in .26s var(--wl-ease)}
@keyframes wl-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:560px){html.motion .wl[open]{animation:wl-up .34s var(--wl-ease)}}
@keyframes wl-up{from{transform:translateY(100%)}to{transform:none}}
/* The drops around the cursor near the pill (wl-orbit.js): a canvas over everything that never takes a click. */
.wl-orbit{position:fixed;inset:0;width:100vw;height:100vh;z-index:30;pointer-events:none}
.wl-orbit[hidden]{display:none}
/* A number that just went up flashes coral and settles. */
html.motion .wl-num.bump{animation:wl-bump .9s var(--wl-ease)}
@keyframes wl-bump{0%{color:var(--coral);transform:translateY(-3px) scale(1.04)}100%{transform:none}}

/* On the list: the accounts to follow while the beta waits, as round icons. */
.wl-socials{gap:10px;margin:0 0 22px;color:var(--muted)}
.wl-socials a{justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%}
.wl-socials a:hover,.wl-socials a:focus-visible{color:var(--ink);border-color:var(--ink)}
.wl-socials svg{width:17px;height:17px}