/* ════════════════════════════════════════════════════════════════════
   WAITLIST COUNTDOWN BANNER
   ────────────────────────────────────────────────────────────────────
   One stylesheet for all six pages that carry this banner, rather than
   the same ~370 lines pasted into home.css and each of the five persona
   stylesheets. The handoff document describes it that way because it was
   written against a static site with no shared stylesheet; here every
   token it needs already lives in variables.css, which is loaded
   site-wide, so one file serves all six and a fix lands once.

   Two variants, exactly as the design calls for:

     .wl-banner--light   the homepage. Its hero directly below is dark,
                         so a second dark band read as one long slab.
     .wl-banner--dark    the five persona pages, whose heroes are light,
                         so the dark band is what gives them contrast.

   They differ only in the section's own surface and the pitch column's
   text colours. Everything structural - the grid, the countdown, the
   form panel, the success state, every breakpoint - is shared, and the
   "Get early access" panel is dark in both by design: it is meant to be
   the focal point by contrast, not by tint.

   Self-contained by intent. It depends on no class from any host page -
   notably the badge, which the homepage version originally borrowed from
   .hero-badge and the persona pages could not, because three of them do
   not define it and Seller's is a different design expecting a different
   child element. It is .wl-banner__badge everywhere now.

   No page-local tokens either. home.css names its transition duration
   --t and the five persona sheets name theirs --transition; a shared
   file can rely on neither, so durations here are literal.
════════════════════════════════════════════════════════════════════ */

/* ── SECTION ──────────────────────────────────────────────────────── */
.wl-banner {
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

.wl-banner--dark { background: var(--md-navy); }

.wl-banner--light {
  background: var(--md-gray-50);
  border-top: 1px solid var(--md-gray-200);
  border-bottom: 1px solid var(--md-gray-200);
}

/* Background photo, dark variant only - dimmed by a heavy navy scrim so
   the card and copy on top stay legible. The light variant has none: a
   dark photo dimmed for a white section reads muddy rather than light. */
.wl-banner__bg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1744782211816-c5224434614f?w=1600&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center 32%;
  z-index: 0;
}
.wl-banner__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(6,14,44,.95) 0%, rgba(10,22,62,.90) 45%, rgba(13,27,76,.85) 100%);
}
.wl-banner--light .wl-banner__bg { display: none; }

/* Brand glow blobs - above the photo scrim, below the card. Far fainter
   on light, where the dark-tuned opacities would muddy the surface. */
.wl-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wl-banner--dark::before {
  z-index: 1;
  background:
    radial-gradient(ellipse 640px 440px at 10% -15%, rgba(45,108,223,.30) 0%, transparent 62%),
    radial-gradient(ellipse 520px 380px at 95% 115%, rgba(255,193,7,.18) 0%, transparent 60%);
}
.wl-banner--light::before {
  z-index: 0;
  background:
    radial-gradient(ellipse 640px 440px at 10% -15%, rgba(45,108,223,.07) 0%, transparent 62%),
    radial-gradient(ellipse 520px 380px at 95% 115%, rgba(255,193,7,.10) 0%, transparent 60%);
}

/* Dot grid, masked so it fades toward the edges. Light dots on dark,
   dark dots on light - white dots on white are simply not there. */
.wl-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 30%, #000 0%, transparent 75%);
  pointer-events: none;
}
.wl-banner--dark::after {
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}
.wl-banner--light::after {
  z-index: 0;
  background-image:
    linear-gradient(rgba(13,27,76,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,27,76,.05) 1px, transparent 1px);
}

.wl-banner--dark .container-lg { position: relative; z-index: 2; }
.wl-banner--light .container-lg { position: relative; z-index: 1; }

/* ── THE CARD ─────────────────────────────────────────────────────── */
.wl-banner__card {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
/* Glass panel on dark, matching the recipe those pages already use for
   .persona-card / .seller-card. */
.wl-banner--dark .wl-banner__card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 64px rgba(2,6,23,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Plain white card on light, using the homepage's other existing recipe
   (the shadow token .hp-tool-card / .hp-conf-card already use). */
.wl-banner--light .wl-banner__card {
  background: #fff;
  border: 1.5px solid var(--md-gray-200);
  box-shadow: var(--shadow-card-lg);
}

/* Top accent bar, tying the two brand colours across the card. */
.wl-banner__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--md-blue) 0%, var(--md-blue-mid) 45%, var(--md-yellow) 100%);
}

.wl-banner__content { padding: 44px 40px 44px 44px; min-width: 0; }

/* ── BADGE ────────────────────────────────────────────────────────── */
.wl-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 16px 6px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin-bottom: 18px;
  width: fit-content;
}
.wl-banner--dark .wl-banner__badge {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.90);
}
.wl-banner--light .wl-banner__badge {
  background: var(--md-blue-light);
  border: 1px solid rgba(45,108,223,.22);
  color: var(--md-blue-dark);
}
.wl-banner__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--md-yellow);
  border-radius: 50%;
  flex-shrink: 0;
  animation: wl-badge-pulse 2s ease infinite;
}
.wl-banner--light .wl-banner__badge-dot { background: var(--md-yellow-dark); }
@keyframes wl-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,.6); }
  50%      { box-shadow: 0 0 0 8px rgba(255,193,7,0); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-banner__badge-dot { animation: none; }
}

/* ── PITCH COPY ───────────────────────────────────────────────────── */
.wl-banner__title {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.wl-banner--dark .wl-banner__title { color: #fff; }
.wl-banner--light .wl-banner__title { color: var(--md-navy); }

/* The pale base yellow reads fine on navy and is too low-contrast on
   white, so the light variant uses the darker tone throughout. */
.wl-banner--dark .wl-banner__title-accent { color: var(--md-yellow); }
.wl-banner--light .wl-banner__title-accent { color: var(--md-yellow-dark); }

.wl-banner__sub {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 460px;
}
.wl-banner--dark .wl-banner__sub { color: rgba(255,255,255,.72); }
.wl-banner--light .wl-banner__sub { color: var(--md-gray-600); }

/* ── PERK CHIPS ───────────────────────────────────────────────────── */
.wl-perks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; }
.wl-perks__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
}
.wl-banner--dark .wl-perks__item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
}
.wl-banner--light .wl-perks__item {
  background: var(--md-gray-50);
  border: 1px solid var(--md-gray-200);
  color: var(--md-gray-600);
}
.wl-perks__item i { font-size: 12px; }
.wl-banner--dark .wl-perks__item i { color: var(--md-yellow); }
.wl-banner--light .wl-perks__item i { color: var(--md-yellow-dark); }

/* ── COUNTDOWN ────────────────────────────────────────────────────── */
.wl-countdown { margin: 0; }
.wl-countdown__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 10px;
}
.wl-banner--dark .wl-countdown__eyebrow { color: rgba(255,255,255,.55); }
.wl-banner--light .wl-countdown__eyebrow { color: var(--md-gray-600); }
.wl-banner--dark .wl-countdown__eyebrow i { color: var(--md-yellow); }
.wl-banner--light .wl-countdown__eyebrow i { color: var(--md-yellow-dark); }

.wl-countdown__units { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-countdown__unit {
  position: relative;
  border-radius: var(--radius-md);
  min-width: 68px;
  padding: 12px 8px 9px;
  text-align: center;
  overflow: hidden;
}
.wl-banner--dark .wl-countdown__unit {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
}
.wl-banner--light .wl-countdown__unit {
  background: var(--md-gray-50);
  border: 1px solid var(--md-gray-200);
}
.wl-countdown__unit::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--md-blue-mid), var(--md-yellow));
  opacity: .8;
}

.wl-countdown__num {
  display: block;
  font-size: 26px;
  font-weight: 800;
  /* Tabular figures so the width does not jitter as the digits change. */
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.wl-banner--dark .wl-countdown__num { color: #fff; }
.wl-banner--light .wl-countdown__num { color: var(--md-navy); }

.wl-countdown__label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-top: 4px;
}
.wl-banner--dark .wl-countdown__label { color: rgba(255,255,255,.55); }
.wl-banner--light .wl-countdown__label { color: var(--md-gray-600); }

.wl-countdown__sep {
  font-size: 20px;
  font-weight: 700;
  margin-top: -16px; /* optically aligns with the numbers, not the labels */
}
.wl-banner--dark .wl-countdown__sep { color: rgba(255,255,255,.25); }
.wl-banner--light .wl-countdown__sep { color: var(--md-gray-400); }

/* Replaces the four chips once the target date passes, rather than
   counting into negative numbers. */
.wl-countdown__launched {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(255,193,7,.14);
  border: 1px solid rgba(255,193,7,.35);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
}
.wl-banner--dark .wl-countdown__launched { color: var(--md-yellow); }
.wl-banner--light .wl-countdown__launched { color: var(--md-yellow-dark); border-color: rgba(255,193,7,.4); }
.wl-countdown.is-launched .wl-countdown__units,
.wl-countdown.is-launched .wl-countdown__eyebrow { display: none; }
.wl-countdown.is-launched .wl-countdown__launched { display: flex; }

/* ── "GET EARLY ACCESS" PANEL ─────────────────────────────────────────
   Dark on both variants. On the persona pages it is a tint shift within
   an already-dark card; on the homepage it is the one dark surface in a
   light section, which is what makes it the focal point. */
.wl-formcard {
  position: relative;
  padding: 44px 44px 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.wl-banner--dark .wl-formcard {
  background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border-left: 1px solid rgba(255,255,255,.12);
}
.wl-banner--light .wl-formcard {
  background: linear-gradient(165deg, var(--md-blue-dark) 0%, var(--md-navy) 100%);
  border-left: 1px solid rgba(255,255,255,.14);
}

.wl-formcard__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--md-yellow), var(--md-yellow-dark));
  color: var(--md-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(255,193,7,.3);
}
.wl-formcard__title { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 5px; }
.wl-formcard__sub { font-size: 12.5px; color: rgba(255,255,255,.72); line-height: 1.55; margin: 0 0 18px; }

/* ── FORM ─────────────────────────────────────────────────────────── */
.wl-form__row { display: flex; gap: 8px; }
/* Scoped for the same reason as the submit button: a host page rule on
   an input or a wrapper would otherwise tie with this and win on order. */
.wl-banner .wl-form__field { position: relative; flex: 1 1 auto; min-width: 0; }
.wl-banner .wl-form__input { width: 100%; }
.wl-form__field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--md-gray-400);
  font-size: 14px;
  pointer-events: none;
}
.wl-form__input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 38px;
  border-radius: var(--radius-sm);
  /* A light-grey border all but vanishes against the dark panel. */
  border: 1.5px solid rgba(255,255,255,.2);
  background: #fff;
  color: var(--md-text);
  font-size: 13.5px;
  font-family: 'Roboto', sans-serif;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.wl-form__input::placeholder { color: var(--md-gray-400); }
.wl-form__input:focus {
  outline: none;
  border-color: var(--md-blue);
  box-shadow: 0 0 0 3px rgba(45,108,223,.22);
}
.wl-form__input.wl-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220,53,69,.16);
}

/* All five persona stylesheets give .btn-cta-primary width:100%. Inside
   this flex row that becomes the button's basis, so it claims the whole
   row and squeezes the email field down to just its icon.
   
   Deliberately scoped through .wl-banner rather than left as a bare
   .wl-form__submit. Two classes beat one, so this wins wherever the
   stylesheets happen to load - a bare .wl-form__submit ties with
   .btn-cta-primary on specificity and the tie goes to whichever file
   comes later, which made the fix depend on link order. It broke exactly
   that way here: this sheet loads before the page's own.
   
   The 640px breakpoint below puts the button back to full width on
   purpose, where stacked is what you want. */
.wl-banner .wl-form__submit {
  flex: 0 0 auto;
  width: auto;
  height: 46px;
  padding: 0 20px;
  box-shadow: 0 6px 18px rgba(255,193,7,.28);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wl-banner .wl-form__submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,193,7,.36); }
.wl-banner .wl-form__submit:disabled { opacity: .75; cursor: default; transform: none; }
.wl-banner .wl-form__submit i { transition: opacity .15s ease; }
.wl-banner .wl-form__submit.is-loading i { opacity: 0; }

/* Light pink, not the standard red used elsewhere: this sits on the dark
   panel, where #dc3545 is too low-contrast to read. */
.wl-form__err {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #ffb3b8;
  margin-top: 9px;
}
.wl-form__err.is-visible { display: flex; }

.wl-form__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255,255,255,.55);
  margin: 12px 0 0;
}
.wl-form__hint i { color: rgba(255,255,255,.35); }

/* ── SUCCESS STATE ────────────────────────────────────────────────── */
.wl-success { display: none; align-items: center; gap: 12px; padding: 4px 2px; }
.wl-form.is-success .wl-form__row,
.wl-form.is-success .wl-form__hint { display: none; }
.wl-form.is-success .wl-success { display: flex; }
.wl-success__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--md-yellow);
  color: var(--md-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255,193,7,.35);
}
.wl-success__text { font-size: 13.5px; font-weight: 700; color: #fff; }
.wl-success__text small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wl-banner__card { grid-template-columns: 1fr; }
  .wl-banner__content { padding: 34px 30px 30px; }
  /* Once stacked, the divider between the columns becomes a top edge. */
  .wl-formcard { padding: 30px; border-left: none; }
  .wl-banner--dark .wl-formcard { border-top: 1px solid rgba(255,255,255,.12); }
  .wl-banner--light .wl-formcard { border-top: 1px solid rgba(255,255,255,.14); }
}

@media (max-width: 640px) {
  .wl-banner { padding: 40px 0; }
  .wl-banner__content { padding: 26px 20px 22px; }
  .wl-formcard { padding: 24px 20px 28px; }
  .wl-banner__sub { max-width: 100%; }
  .wl-perks { gap: 6px; margin-bottom: 24px; }
  .wl-form__row { flex-direction: column; }
  .wl-banner .wl-form__submit { width: 100%; justify-content: center; }
  .wl-countdown__unit { min-width: 58px; padding: 10px 6px 7px; }
  .wl-countdown__num { font-size: 21px; }
}

@media (max-width: 400px) {
  .wl-countdown__units { gap: 7px; }
  .wl-countdown__unit { min-width: 48px; padding: 8px 4px 6px; }
  .wl-countdown__num { font-size: 17px; }
  .wl-countdown__label { font-size: 8.5px; }
  .wl-countdown__sep { display: none; }
}