/* Join the Waiting List: the sign-up form box, course preview cards, and the navy benefits panel. */

.wl-lede { max-width: 960px; }
.pg-join-the-waiting-list[id] { scroll-margin-top: var(--header-h); }
.wl-box { max-width: 700px; margin: 0 auto; padding: 56px 48px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(20 32 56 / 8%); }
.wl-box h2 { font-family: var(--font-head); font-size: 32px; letter-spacing: -.01em; }
.wl-intro { margin: 16px 0 32px; font-size: 17px; }
.wl-box .choice { align-items: flex-start; font-size: 14px; }
.wl-box .choice input { margin-top: 1px; }
.wl-box .choice b { font-weight: 700; }
.wl-box .form-actions .btn { border-radius: 12px; padding: 15px 24px; }
.wl-box .form-success { margin-top: 8px; }
.wl-box .form-success p { margin: 0; }

.wl-courses { max-width: 1216px; margin: 0 auto; gap: 40px; }
.wl-course { padding: 32px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(20 32 56 / 6%); font-size: 16px; }
.wl-course .icon-tile { width: 48px; height: 48px; border-radius: 10px; background: var(--steel-soft); color: var(--steel); font-size: 22px; }
.wl-course h3 { margin: 24px 0 16px; font-family: var(--font-head); font-size: 22px; font-weight: 600; }
.wl-tag { margin-bottom: 22px; }
.wl-tag .tag { padding: 6px 13px; font-size: 11px; letter-spacing: .05em; }
.wl-course strong { color: var(--navy-text); }
.wl-blue { color: var(--steel-text); }

.wl-benefits-wrap { padding-top: 0; }
.wl-benefits { padding: 88px 40px 68px; border-radius: 40px; background: var(--navy-bg); color: #cbd5e1; text-align: center; }
.wl-benefits .eyebrow { color: #8fc0f2; } /* light steel on navy, as in .band-navy (site.css) */
.wl-benefits h2 { font-family: var(--font-head); font-size: clamp(32px, 4.2vw, 48px); letter-spacing: -.025em; color: #fff; }
.wl-benefits .lede { margin-bottom: 64px; }
.wl-benefit-list { max-width: 1032px; margin: 0 auto 72px; gap: 32px; text-align: left; }
.wl-benefit-list .icon-tile { width: 54px; height: 54px; border-radius: 10px; background: #2e3d59; color: #a9c8ef; font-size: 24px; }
.wl-benefit-list h3 { margin: 30px 0 16px; font-size: 20px; font-weight: 700; color: #fff; }
.wl-benefit-list p { margin: 0; font-size: 17px; }

@media (max-width: 760px) {
  .wl-box { padding: 36px 20px; }
  .wl-box h2 { font-size: 28px; }
  .wl-course { padding: 26px 20px; }
  .wl-benefits { padding: 56px 20px; border-radius: 28px; }
  .wl-benefits .lede { margin-bottom: 40px; }
  .wl-benefit-list { margin-bottom: 48px; }
  .wl-benefits .btn { width: 100%; }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .wl-box { box-shadow: 0 10px 30px rgb(0 0 0 / 34%); }
  .wl-course { box-shadow: 0 10px 30px rgb(0 0 0 / 28%); }
  .wl-course .icon-tile { color: #7ebaf9; }
  .wl-benefits h2 { color: #ffffff; }
  .wl-benefit-list .icon-tile { background-color: #2e3d59; }
  .wl-benefit-list h3 { color: #ffffff; }
}