/* ============================================================================
   MrMurse - Join Waitlist page styles
   Page-specific layout only; all values reference Phase 0 tokens. Composes the
   existing form controls (.field/.input/.select/.textarea/.choice), card, faq,
   and cta-block components.

   DEVELOPER NOTE: the waitlist form is front-end only. Form submission setup
   will be connected before launch. No backend is wired yet.
   ========================================================================== */

/* ---------------------------------------------------------------- HERO ----- */
.wl-hero {
  background:
    radial-gradient(1000px 460px at 82% -10%, var(--c-teal-tint-10), transparent 60%),
    var(--bg-page);
  padding-top: var(--space-9);
}
.wl-hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--space-8); align-items: center;
}
.wl-hero__title { font-size: var(--fs-h1); font-weight: var(--fw-extra); margin-top: var(--space-5); }
.wl-hero__sub { font-size: var(--fs-body-lg); color: var(--text-body); margin-top: var(--space-5); max-width: 520px; }
.wl-hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* Intake preview card */
.intake {
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  max-width: 420px; margin-inline: auto;
}
.intake__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-alt); border-bottom: var(--border-width) solid var(--border);
}
.intake__body { padding: var(--space-3) var(--space-5) var(--space-5); }
.intake__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--border);
}
.intake__row:last-child { border-bottom: 0; }
.intake__label { font-size: var(--fs-body-sm); color: var(--text-muted); }
.intake__pill {
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--accent-strong);
  background: var(--c-teal-tint-10); border: var(--border-width) solid var(--c-teal-tint-18);
  padding: 4px 12px; border-radius: var(--radius-pill);
}

@media (max-width: 920px) {
  .wl-hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .wl-hero__sub { max-width: none; }
  .intake { margin-inline: 0; }
}

/* ---------------------------------------------------------------- FORM ----- */
.wl-form-head { text-align: center; margin-bottom: var(--space-6); }
.wl-form-head h2 { scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
.wl-form-head__sub { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: var(--space-3); }

.wl-form { padding: var(--space-7) var(--space-6); }

/* Grouped sections: Contact Information, Your Goals, How We Can Help. */
.wl-section { margin-bottom: var(--space-6); }
.wl-section + .wl-section { padding-top: var(--space-6); border-top: var(--border-width) solid var(--border); }
.wl-section__title {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent-strong);
  margin-bottom: var(--space-5);
}
.wl-section .field:last-child, .wl-section .wl-fieldset:last-child { margin-bottom: 0; }
.wl-form .field:last-of-type { margin-bottom: var(--space-5); }
.field__optional { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--text-muted); margin-left: var(--space-2); }

/* fieldset reset to match .field rhythm */
.wl-fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.wl-fieldset .field__hint { margin-top: 2px; margin-bottom: var(--space-2); }

/* checkbox + radio groups */
.wl-checks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-5); margin-top: var(--space-2); }
.wl-radios { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
@media (max-width: 560px) { .wl-checks { grid-template-columns: 1fr; } }

.wl-trust { margin: var(--space-5) 0; }

/* ------------------------------------------------------- AFTER SUBMIT ------ */
.wl-after { margin-top: var(--space-6); }
.wl-after__card { text-align: left; }
.wl-after__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: var(--c-navy); color: #fff; font-weight: var(--fw-extra);
  box-shadow: 0 0 0 2px var(--accent); margin-bottom: var(--space-4);
}
.wl-after__title { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.wl-after__text { font-size: var(--fs-body-sm); color: var(--text-body); }

/* ---------------------------------------------------------------- FAQ ------ */
.wl-faq { max-width: 820px; }