/* ============================================================================
   Eyas — 07 Waitlist / Conversion
   The grand closing. Cinematic dark band: crystalline falcon + glacier scrim,
   tagline reprise, frosted-glass waitlist card. Centered, wide, premium.
   Near-monochrome + steel signature. ONE tiny amber touch on the success state.
   All custom classes prefixed .wl-.
   ========================================================================== */

.waitlist {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(6rem, 14vh, 12rem);
}

/* ── Background layers ──────────────────────────────────────────────────── */
.wl-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 1. Glacier — full-bleed cover, very slow ambient pan */
.wl-bg__glacier {
  position: absolute;
  inset: -8% -8%;
  background:
    url("/img/brand/glacier-bg.webp") center 55% / cover no-repeat,
    var(--bg-deep);
  filter: saturate(0.88) brightness(0.6);
  animation: wl-pan 60s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes wl-pan {
  0%   { transform: scale(1.06) translate3d(-1%, -0.6%, 0); }
  100% { transform: scale(1.12) translate3d(1.2%, 0.8%, 0); }
}

/* 2. Strong scrim so the card + copy clear 4.5:1 */
.wl-bg__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 0%, rgba(5,7,13,0.55) 58%, rgba(4,6,12,0.88) 100%),
    linear-gradient(0deg, rgba(5,7,13,0.92) 0%, rgba(5,7,13,0.40) 40%, rgba(7,11,22,0.55) 100%);
}

/* (Das Chart-Motiv lebt jetzt sichtbar gerahmt in der FAQ-Sektion;
   die Waitlist bleibt bewusst ruhig: Gletscher, Scrim, Aurora.) */

/* 5. Aurora haze + base vignette */
.wl-bg__aurora {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 50% 28%, rgba(175,200,228,0.08), transparent 70%);
}
.wl-bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 110% at 50% 50%, transparent 52%, rgba(4,6,12,0.7) 100%);
}

/* ── Foreground ─────────────────────────────────────────────────────────── */
.wl-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.wl-head {
  max-width: 44ch;
  margin-inline: auto;
}
/* Live status badge — a glass pill with a pulsing steel dot, signalling the
   waitlist is open right now. Builds on the base .pill / .pill__dot. */
.wl-status {
  padding: 8px 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-hi);
  text-shadow: 0 1px 12px rgba(5,7,13,0.85);
  box-shadow: 0 0 26px -10px var(--glow-steel), inset 0 1px 0 0 rgba(255,255,255,0.06);
}
.wl-status__dot { position: relative; }
/* One calm breath on entry, then rest. No permanent blink (motion canon:
   no looping attention pulls). A static glow remains so the dot still reads
   as "open" once the single ping settles. */
.wl-status__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: wl-status-ping 1.6s var(--ease) 0.4s 1 both;
}
@keyframes wl-status-ping {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(3.2); opacity: 0; }
}
.wl-title {
  margin-top: var(--sp-4);
  font-size: clamp(2.6rem, 6vw, 5.4rem);   /* reprise, slightly under hero */
  font-weight: 700;                        /* heavier closing display for weight contrast */
}
.wl-sub {
  margin-top: var(--sp-5);
  margin-inline: auto;
  max-width: 52ch;
  font-weight: 400;                        /* sub-line stays light against the heavy title */
  color: var(--text-lo);
  text-wrap: balance;
}

/* ── The card ───────────────────────────────────────────────────────────── */
.wl-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  text-align: left;
  border-radius: var(--r-xl);
}

/* Glass-on-glass hygiene: the card is .glass (one blur layer). Any nested chip
   or pill inside it must NOT add a second backdrop-filter, or the stacking goes
   muddy. Give inner controls a solid tint instead of their own blur. */
.wl-card .pill,
.wl-card .wl-chip__face {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(13, 21, 37, 0.55);
}

/* ── Form ───────────────────────────────────────────────────────────────── */
.wl-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.wl-form.is-leaving {
  opacity: 0;
  transform: scale(0.985) translateY(6px);
}

.wl-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.wl-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-lo);
}
.wl-input {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: rgba(8, 13, 24, 0.55);
  color: var(--text-hi);
  font: inherit;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-snug);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.wl-input::placeholder { color: var(--text-faint); }
.wl-input:hover { border-color: var(--glass-border-hi); }
.wl-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(10, 16, 30, 0.7);
  box-shadow: 0 0 0 3px rgba(175,200,228,0.18), 0 0 22px -6px var(--glow-steel);
}
.wl-input:focus-visible { outline: none; } /* custom ring above is the focus signal */
.wl-input[aria-invalid="true"] {
  border-color: var(--eyas-critical);
  box-shadow: 0 0 0 3px rgba(201,72,95,0.18);
}
.wl-error {
  font-size: var(--fs-xs);
  color: #E06A7F;  /* hellerer Granat, >=4.5:1 fuer Fehlertext; Border bleibt --eyas-critical */
}

.wl-error--submit {
  margin-top: 0.25rem;
}

/* ── Segmentation chips (radio pills) ───────────────────────────────────── */
.wl-seg {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.wl-seg__q {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-mid);
}
.wl-seg__opt {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.wl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.wl-chip {
  position: relative;
  display: inline-flex;
}
/* visually hidden radio, still keyboard-focusable */
.wl-chip__in {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.wl-chip__face {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  color: var(--text-mid);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.wl-chip:hover .wl-chip__face {
  border-color: var(--glass-border-hi);
  background: var(--glass-fill-hi);
  color: var(--text-hi);
  transform: translateY(-1px);
}
/* selected = steel border + glow */
.wl-chip__in:checked + .wl-chip__face {
  border-color: var(--accent);
  background: rgba(175,200,228,0.10);
  color: var(--text-hi);
  box-shadow: 0 0 0 1px var(--accent), 0 0 20px -6px var(--glow-steel);
}
/* keyboard focus ring on the label face */
.wl-chip__in:focus-visible + .wl-chip__face {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Honest expectation line above the form: this is the list, not the seat. */
.wl-step {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-lo);
}

/* Honeypot wrapper: pulled fully off-screen, no space, never focusable by a
   pointer. Real users never see it; bots that autofill every field trip it. */
.wl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Submit + reassurance ───────────────────────────────────────────────── */
.wl-submit { width: 100%; }
.wl-reassure {
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
}

/* Privacy consent line: present but quiet, sits just under the reassurance. */
.wl-privacy {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
  color: var(--text-faint);
}
.wl-privacy__link {
  color: var(--text-lo);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.wl-privacy__link:hover {
  color: var(--text-mid);
  border-bottom-color: currentColor;
}

/* Second path under the form: the tilt-test (lead magnet) for the not-yet-ready. */
.wl-alt {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
  color: var(--text-faint);
}
.wl-alt__link {
  color: var(--text-lo);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.wl-alt__link:hover { color: var(--text-mid); border-bottom-color: currentColor; }

/* Referral share in the success state: honest word-of-mouth (shares the tilt test),
   no list-position promise (the backend cannot track it yet). */
.wl-share {
  margin-top: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--glass-border);
  width: 100%;
}
.wl-share__line {
  font-size: var(--fs-sm);
  color: var(--text-mid);
  line-height: 1.55;
  max-width: 42ch;
  margin-inline: auto;
}
.wl-share__btns {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.wl-share__btn { min-height: 44px; }

/* ── Success state ──────────────────────────────────────────────────────── */
/* [hidden] muss display:flex schlagen, sonst ist der Success-State permanent
   sichtbar (Author-CSS ueberschreibt das UA-Stylesheet). */
.wl-success[hidden] { display: none; }
.wl-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding-block: clamp(0.5rem, 2vw, 1.5rem);
}
.wl-success.is-entering { animation: wl-success-in var(--dur-slow) var(--ease) both; }
@keyframes wl-success-in {
  from { opacity: 0; transform: scale(0.96) translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* the single permitted warm amber touch — the human moment of joining */
.wl-success__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  color: var(--warm);
  border: 1px solid rgba(227,165,84,0.4);
  background: radial-gradient(circle at center, rgba(227,165,84,0.16), rgba(227,165,84,0.02) 70%);
  box-shadow: 0 0 30px -6px var(--warm-glow), inset 0 1px 0 rgba(255,255,255,0.12);
}
.wl-success__title {
  max-width: 30ch;
  text-wrap: balance;
}
.wl-success__sub {
  font-size: var(--fs-sm);
  max-width: 38ch;
}

/* ── Links (build-in-public + success) ──────────────────────────────────── */
.wl-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.wl-link svg { display: inline-block; }
.wl-link:hover {
  color: var(--accent-bright);
  border-bottom-color: currentColor;
}

.wl-bip {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  font-size: var(--fs-sm);
  text-align: center;
  max-width: 50ch;
  margin-inline: auto;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .wl-chip,
  .wl-chip__face { width: 100%; }
  .wl-chip__face { justify-content: center; text-align: center; }

  /* Kein Falke mehr im Hintergrund: die Headline folgt direkt auf das Badge. */
  .waitlist { padding-top: clamp(4rem, 10vh, 6rem); }
  .wl-title { margin-top: var(--sp-5); }
}

/* ── Desktop (>=1024px): confident, balanced closing composition ─────────── */
/* Ohne den Falken traegt die Typo die Sektion allein; das Chart-Motiv liegt
   ruhig hinter der unteren Haelfte und gibt dem Abschluss Tiefe statt Drama. */
@media (min-width: 1024px) {
  .waitlist {
    align-items: center;
    padding-block: clamp(7rem, 12vh, 11rem);
  }

  /* Focus the aurora/scrim energy higher, leaving the card on a calmer field. */
  .wl-bg__aurora {
    background: radial-gradient(58% 42% at 50% 18%, rgba(175,200,228,0.10), transparent 70%);
  }

  /* The column: a narrow, intentional measure with deliberate rhythm. */
  .wl-wrap { max-width: 760px; margin-inline: auto; }

  .wl-head { max-width: none; }

  /* Tighter measure + line-height so the reprise reads as two balanced lines,
     never a loose three-line wrap that drifts toward the card. */
  .wl-title {
    margin-top: var(--sp-5);
    max-width: 15ch;
    margin-inline: auto;
    font-size: clamp(3.4rem, 4.6vw, 5rem);
    line-height: 1.02;
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .wl-sub {
    margin-top: var(--sp-6);
    max-width: 46ch;
  }

  /* Card: a touch wider, more generous padding, anchored under the lead with a
     clear (not floaty) gap so headline -> lead -> form reads as one descent. */
  .wl-card {
    max-width: 600px;
    margin-top: var(--sp-8);
    padding: clamp(2.25rem, 2.6vw, 2.75rem) clamp(2.25rem, 2.6vw, 3rem);
  }

  /* Two-column chip grid: the four options sit as a tidy 2x2 block instead of an
     uneven wrap, each chip filling its column for a calm, scannable rhythm. */
  .wl-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }
  .wl-chip { display: flex; }
  .wl-chip__face { width: 100%; }

  /* Make the primary CTA carry real weight as the closing conversion moment. */
  .wl-submit { min-height: 56px; margin-top: var(--sp-1); }

  /* Generous, deliberate gap to the build-in-public line so it reads as a quiet
     footer to the whole moment, not a stray afterthought. */
  .wl-bip { margin-top: var(--sp-7); }

  /* Success state gets the same composed width and breathing room. */
  .wl-success { padding-block: var(--sp-4); }
  .wl-success__title { max-width: 24ch; }
}

/* ── Ultra-wide (>=1440px): a little more scale and air ──────────────────── */
@media (min-width: 1440px) {
  .waitlist { padding-block: clamp(8rem, 13vh, 13rem); }
  .wl-title { font-size: clamp(4rem, 3.6vw, 5.4rem); }
  .wl-card { max-width: 620px; }
}

/* ============================================================================
   Founding-100 offer (left column) + two-column layout
   The offer carries the value-equation: numbered seat, challenge-fee anchor,
   bonus stack, honest scarcity + price-lock. The capture card stays unchanged.
   ========================================================================== */

/* Stack on mobile: offer, then capture card. */
.wl-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3rem);
  margin-top: clamp(2.25rem, 5vh, 3.5rem);
}
.wl-offer { text-align: left; }

/* Numbered founding-member plate — quiet, monospace, terminal-grade. */
.wl-badge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 8px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  background: var(--glass-fill);
}
.wl-badge__seat {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-bright);
  letter-spacing: var(--tracking-snug);
}
.wl-badge__range { font-size: 1rem; color: var(--text-lo); }
.wl-badge__label {
  margin-left: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-lo);
}

/* Challenge-fee anchor: the real cost of the problem, then the seat. */
.wl-anchor {
  margin-top: var(--sp-6);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--glass-fill);
}
.wl-anchor__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  align-items: baseline;
  gap: var(--sp-4);
}
.wl-anchor__num {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--text-mid);
}
.wl-anchor__row--seat .wl-anchor__num { color: var(--accent-bright); }
.wl-anchor__txt { font-size: var(--fs-sm); color: var(--text-lo); line-height: 1.4; }
.wl-anchor__row--seat .wl-anchor__txt { color: var(--text-mid); }
.wl-anchor__rule { margin-block: var(--sp-4); }

/* Bonus stack. */
.wl-bonuses { margin-top: var(--sp-6); }
.wl-bonuses__head { color: var(--text-lo); margin-bottom: var(--sp-4); }
.wl-bonuses__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.wl-bonus {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.wl-bonus__ico {
  margin-top: 2px;
  color: var(--accent);
  flex: none;
  opacity: 0.92;
}
.wl-bonus__txt { font-size: var(--fs-sm); color: var(--text-mid); line-height: 1.45; }

/* Identity / dream-outcome beat: the one line that ties the seat to the
   transformation. Calm, a touch larger than the footnote, never transactional. */
.wl-becoming {
  margin-top: var(--sp-6);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 48ch;
  text-wrap: balance;
}

/* Honest scarcity + price-lock — quiet footnote weight, not a sales pitch. */
.wl-lock {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--glass-border);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-lo);
  max-width: 54ch;
}

/* ── Desktop: offer | capture side by side ──────────────────────────────── */
@media (min-width: 1024px) {
  .wl-wrap { max-width: 1120px; }
  .wl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 460px);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
    margin-top: clamp(3rem, 6vh, 4.5rem);
  }
  /* Card no longer auto-centers; it fills its column and aligns to the offer top. */
  .wl-layout .wl-card { margin-top: 0; max-width: none; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wl-bg__glacier,
  .wl-status__dot::after { animation: none; }
  .wl-form,
  .wl-form.is-leaving { transition: none; transform: none; opacity: 1; }
  .wl-success.is-entering { animation: none; }
}