/* =========================================================
   Section 7 — Join the waitlist (CTA card)
   Figma node 2132:1295 (desktop 1512 × 534, bg #0D1117)
   ========================================================= */

.waitlist {
  position: relative;
  padding-bottom: 80px;
  background: var(--color-bg-fade);
}

.waitlist__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 72px 100px;
  border: 1px solid #383838;
  border-radius: 32px;
  background: linear-gradient(180deg, #020d18 68.26%, #362700 124.64%);
  text-align: center;
}

/* circuit lines (same artwork as the step cards) */
.waitlist__circuit {
  position: absolute;
  z-index: -1;
  width: 217px;
  height: 262.36px;
  max-width: none;
  pointer-events: none;
}

.waitlist__circuit--left  { left: -1px;  top: 110px; }
.waitlist__circuit--right { right: -23px; top: -5px; transform: rotate(180deg); }

/* Bottom light (Figma "Group 2087326102"): a soft amber glow rising
   from the bottom edge + a thin light streak that fades out at both ends.
   No hard bar — everything is gradients. */
.waitlist__card::before,
.waitlist__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.waitlist__card::before {
  bottom: 0;
  width: var(--glow-w, 1000px);
  height: var(--glow-h, 110px);
  background:
    radial-gradient(38% 9px at 50% calc(100% - 4px), rgba(255, 200, 90, 0.95), rgba(255, 196, 80, 0)),
    radial-gradient(55% 100% at 50% 100%, rgba(255, 179, 0, 0.2), rgba(255, 179, 0, 0.07) 55%, rgba(255, 179, 0, 0) 100%);
}

.waitlist__card::after {
  bottom: 4px;
  width: var(--line-w, 1000px);
  height: 1.5px;
  background: linear-gradient(90deg,
    rgba(255, 226, 170, 0) 0%,
    rgba(255, 226, 170, 0.35) 18%,
    rgba(255, 232, 185, 0.8) 32%,
    rgba(255, 246, 225, 1) 50%,
    rgba(255, 232, 185, 0.8) 68%,
    rgba(255, 226, 170, 0.35) 82%,
    rgba(255, 226, 170, 0) 100%);
}

/* ---------- Text ---------- */
.waitlist__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.waitlist__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.waitlist__titles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.waitlist__badge { --s: 64px; }

.waitlist__badge .icon-badge__inner img {
  width: 74.6%;                       /* logo is wider than tall (42 × 34 in Figma) */
}

.waitlist__eyebrow {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--color-white);
}

.waitlist__title {
  font-size: 42px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.42px;
  color: var(--color-amber);
}

.waitlist__desc {
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---------- Email form ---------- */
.waitlist__form {
  display: flex;
  gap: 12px;
}

.waitlist__input {
  width: 372px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--color-white);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.waitlist__input::placeholder { color: rgba(255, 255, 255, 0.7); opacity: 1; }

.waitlist__input:focus {
  border-color: var(--color-amber);
  box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.15);
}

.waitlist__input.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.waitlist__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: linear-gradient(-89.77deg, #f0b726 5.27%, #c9a227 62.86%);
  font-size: 16px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  transition: box-shadow 0.25s ease, transform 0.2s ease, filter 0.2s ease;
}

.waitlist__btn svg { width: 20px; height: 20px; transition: transform 0.25s var(--ease-out); }

.waitlist__btn:hover {
  box-shadow: 0 0 24px rgba(255, 179, 0, 0.45);
  filter: brightness(1.06);
}

.waitlist__btn:hover svg { transform: translateX(3px); }
.waitlist__btn:active { transform: scale(0.98); }

/* status / fallback message under the form */
.mail-note {
  min-height: 0;
  margin-top: -16px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.mail-note:empty { display: none; }
.mail-note.is-error { color: #f87171; }

.mail-note a,
.mail-note button {
  color: var(--color-amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Small popup used by the navbar "Join Waitlist" fallback */
.mail-toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 24px;
  width: min(440px, calc(100% - 32px));
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(10, 18, 28, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  transform: translate(-50%, 20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
}

.mail-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s;
}

.mail-toast a,
.mail-toast button {
  color: var(--color-amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
  .waitlist__card { padding-inline: 48px; }
}

@media (max-width: 991px) {
  .waitlist__title { font-size: 34px; }
  .waitlist__desc  { font-size: 18px; }
}

/* Mobile — matches section_7_mobile.png (430 wide) */
@media (max-width: 767px) {
  .waitlist { padding-bottom: 48px; }

  .waitlist__card {
    gap: 32px;
    padding: 24px 20px 40px;
    border-radius: 24px;
  }

  .waitlist__circuit { width: 130px; height: 157px; }
  .waitlist__circuit--left  { top: 150px; }
  .waitlist__circuit--right { top: -4px; right: -12px; }

  .waitlist__heading { gap: 24px; }
  .waitlist__intro   { gap: 12px; }
  .waitlist__titles  { gap: 6px; }

  .waitlist__badge { --s: 48px; }

  .waitlist__eyebrow {
    font-size: 12px;
    letter-spacing: 1.08px;
    color: rgba(255, 255, 255, 0.7);
  }

  .waitlist__title {
    font-size: 22px;
    letter-spacing: -0.22px;
  }

  .waitlist__desc {
    font-size: 14px;
    line-height: 1.65;
  }

  .waitlist__form { width: 100%; }

  .waitlist__input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    border-color: #30363d;
    background: #1f2937;
  }

  /* icon-only square button */
  .waitlist__btn {
    flex: none;
    width: 44px;
    padding: 0;
  }

  .waitlist__btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .waitlist__card { --glow-w: 400px; --glow-h: 80px; --line-w: 380px; }

  .mail-note { margin-top: -20px; font-size: 13px; }
}