/* ═══════════════════════════════════════════════════════════════════════════
   CueLight waitlist — layered on landing.css ("Signal Deck" tokens).
   Only what the landing sheet lacks lives here: page layout for a single
   centered act, and form controls (landing.css has no inputs at all).
   Reduced-motion and narrow-viewport behaviour ride on landing.css's
   global tiers; the layout below is fluid on its own.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── palette: black, white, coral (user direction) ────────────────────────
   The waitlist re-tokens itself locally: neutral blacks instead of the
   violet studio, coral as the only hue, red gradient for effects. The
   landing page and extension keep Signal Deck. ─────────────────────────── */
body.wl {
  --bg: #0c0b0d;
  --bg-2: #121012;
  --panel: #171416;
  --panel-2: #1d191a;
  --well: #0a090a;
  --line: #2a2527;
  --ink: #f6f4f4;
  --ink-2: #b1a8a8;
  --ink-3: #7d7475;
  --brand-a: #ff6a5d;
  --brand-b: #e2304a;
  --accent: #ff6a5d;
  --grad: linear-gradient(135deg, #ff8a70 0%, #ff6a5d 45%, #e2304a 100%);
  min-height: 100svh; display: flex; flex-direction: column;
}
/* the fixed page wash: coral breath top-right, neutral lift bottom-left */
body.wl::before {
  background: radial-gradient(120% 90% at 70% 0%, rgba(255, 106, 93, .09), transparent 60%),
              radial-gradient(90% 80% at 10% 100%, rgba(255, 255, 255, .04), transparent 55%);
}
.wl .amb-blob.a { opacity: .10; background: radial-gradient(circle at 50% 50%, #ff6a5d, transparent 65%); }
.wl .amb-blob.b { opacity: .08; background: radial-gradient(circle at 50% 50%, #e2304a, transparent 65%); }

.wl-top { position: relative; z-index: 2; padding: 22px clamp(16px, 4vw, 40px); }

/* ── brand lockup: the lamp is the C, "uelight" reads on from it ─────────── */
.wl-top .brand { gap: 2px; }
.wl-top .brand-mark { width: 23px; height: 23px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* the hero lamp pulses like a real tally (keyframes: landing.css); the brand
   mark stays a steady coral */
[data-lamp].live .lamp-live { animation: blink 1.4s ease-in-out infinite; }

.wl-hero {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px 0 50px;
}
.wl-lamp { width: 84px; height: 84px; margin: 0 0 28px; }
.wl-lede { max-width: 92ch; margin-inline: auto; }

/* the STANDBY · LAUNCHING SOON readout — same recipe as the editor's HUD pill */
.wl-status {
  display: inline-flex; align-items: center; gap: 8px; margin: 28px 0 0;
  font-size: 11.5px; letter-spacing: .14em; color: var(--ink-2);
  background: var(--well); border: 1px solid var(--line); border-radius: 20px;
  padding: 7px 15px;
}
.wl-status b { font-weight: 500; color: var(--ink); }

/* ── the join button: red gradient, glow bloom + sheen sweep on hover ────── */
.wl .btn-primary {
  position: relative; overflow: hidden;
  background: var(--grad); background-size: 170% 100%; background-position: 0 0;
  color: #1c0a09;
  box-shadow: 0 8px 30px -12px rgba(255, 106, 93, .75);
  transition: transform .18s var(--ease-snap), box-shadow .25s, background-position .4s;
}
.wl .btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  background-position: 90% 0;   /* gradient slides toward the deep red */
  box-shadow: 0 12px 40px -10px rgba(255, 106, 93, .9),
              0 2px 12px -4px rgba(226, 48, 74, .6);
}
.wl .btn-primary:active { transform: translateY(0) scale(.99); }
/* light sweep across the label */
.wl .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  transition: left .5s ease;
}
.wl .btn-primary:hover::after { left: 120%; }

/* ── the form (no input styles exist in landing.css) ─────────────────────── */
.wl-form { width: min(560px, 100%); margin: 30px auto 0; }
.wl-row { display: flex; gap: 10px; }

.wl-input {
  flex: 1; min-width: 0; padding: 14px 16px;
  font-family: var(--font-ui); font-size: 16px; font-weight: 500; color: var(--ink);
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-ctrl);
  transition: border-color .2s, box-shadow .2s;
}
.wl-input::placeholder { color: var(--ink-3); }
.wl-input:focus-visible {
  outline: none; border-color: var(--brand-a);
  box-shadow: 0 0 0 3px rgba(255, 106, 93, .25);
}
.wl-input.bad { border-color: var(--tally); box-shadow: 0 0 0 3px rgba(255, 106, 93, .18); }

/* arithmetic check row */
.wl-captcha { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.wl-captcha label { font-size: 11.5px; letter-spacing: .12em; color: var(--ink-2); }
.wl-captcha label b { color: var(--ink); font-weight: 600; }
.wl-answer {
  flex: 0 0 88px; text-align: center; padding: 11px 10px;
  font-family: var(--font-mono); font-size: 16px;
  /* stands out from the page's dark well: raised surface + visible border */
  background: var(--panel-2); border-color: #4f4547;
}
.wl-answer::placeholder { color: var(--ink-3); }
.wl-answer:hover { border-color: var(--ink-3); }

/* honeypot: physically removed from the page, still submitted with the form */
.wl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* status / error line under the form */
.wl-msg { min-height: 24px; margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }
.wl-msg.err { color: var(--tally); }

/* inline trace left behind once the confirmation overlay is dismissed */
.wl-done { margin-top: 26px; }

/* confirmation overlay — dimmed studio, one plate-style card */
.wl-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 20px; background: rgba(16, 12, 23, .72); backdrop-filter: blur(6px);
}
.wl-overlay[hidden] { display: none; }
.wl-card {
  width: min(440px, 100%); padding: 34px 30px 28px; text-align: center;
  display: grid; gap: 12px; justify-items: center;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .9);
}
.wl-card-lamp { width: 62px; height: 62px; }
.wl-card-lamp .lamp-live { animation: blink 1.4s ease-in-out infinite; }
.wl-card .micro { margin: 0; }
.wl-card .btn { margin-top: 10px; }
.wl-tagline {
  margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.05;
  font-size: clamp(32px, 4.6vw, 46px);
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.wl-foot {
  position: relative; z-index: 2; padding: 24px 16px 34px; text-align: center;
  display: grid; gap: 10px; justify-items: center; border-top: 1px solid var(--line);
}
.wl-foot .foot-links { font-size: 13px; color: var(--ink-2); }

@media (max-width: 560px) {
  .wl-row { flex-direction: column; }
  .wl-hero { justify-content: flex-start; padding-top: 16px; }
  .wl-lamp { width: 64px; height: 64px; }
}