/* ============================================================
   WAITLIST — the modal every buying button on this site opens.

   THIS IS THE ONE COPY. It used to live inside index.html's own
   inline <style>, which is why the waiting list existed on the
   home page and nowhere else while 28 buttons on 8 other pages
   sent a stranger straight into a product that has not opened.
   Moved out on 2026-08-21 so every page can link it.

   Every value below is a token from tokens.css, which all ten
   pages already link, so this file adds no colours of its own.
   ============================================================ */
.waitlist { max-width: 30rem; }
.waitlist__copy { font-size: var(--fs-small); color: var(--ink-soft); line-height: var(--lh-body); margin: 0 0 var(--s-3); }
.waitlist__copy strong { color: var(--ink); font-weight: var(--w-semi); }
.waitlist__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.waitlist__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: stretch; }
.waitlist__field { flex: 1 1 11rem; min-width: 9rem; }
.waitlist__field input {
  width: 100%; font: inherit; font-size: var(--fs-small); color: var(--ink);
  background: var(--surface); border: 1px solid var(--dormant-line);
  border-radius: var(--r-sm); padding: 0.85em 1.1em;
  transition: border-color var(--dur-fast) var(--ease-soft);
}
.waitlist__field input::placeholder { color: var(--ink-faint); }
.waitlist__field input:focus { border-color: var(--gold); }
.waitlist__row .btn { flex: 0 0 auto; }
.waitlist__error { margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--error); }
.waitlist__done { margin: 0; font-size: var(--fs-small); color: var(--ink); max-width: 30rem; }
.waitlist__done strong { font-weight: var(--w-semi); }
.final .waitlist { margin-inline: auto; }
.final .waitlist__error, .final .waitlist__done { margin-inline: auto; }

.wl-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--gutter); }
.wl-modal[hidden] { display: none; }
.wl-modal__backdrop { position: absolute; inset: 0; background: rgba(30, 27, 58, 0.45); backdrop-filter: blur(2px); }
.wl-modal__panel { position: relative; width: 100%; max-width: 26rem; background: var(--surface);
  border-radius: var(--r-card); box-shadow: var(--shadow-frame); padding: var(--s-7) var(--s-6); }
.wl-modal__close { position: absolute; top: var(--s-4); right: var(--s-4); width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-soft); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.wl-modal__close:hover { background: var(--dormant-fill); color: var(--ink); }
.wl-modal .waitlist { max-width: none; }
.wl-modal h3 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }