/* ============================================================
   THE COMING-SOON CARD.

   Theme-driven, not "dark with a light exception". Every colour below reads a
   custom property, and each theme sets those properties in one place. The card
   used to hardcode its dark greens and carry only an html[data-theme="light"]
   override, which meant Desert (data-theme="default") fell straight through to
   the dark values and sat on the warm brown page as a green card.

   Adding a theme now means adding one block of --cs-* values here. Nothing in
   the rules below has to be touched, and no theme can be missed silently.
   ============================================================ */

/* ---- dark: the brand theme, and the fallback for anything unlisted ---- */
:root {
  --cs-scrim-soft: rgba(11, 25, 23, .08);
  --cs-scrim: rgba(11, 25, 23, .58);
  --cs-card-bg: rgba(10, 28, 24, .91);
  --cs-card-border: rgba(230, 184, 97, .42);
  --cs-card-wash: rgba(230, 184, 97, .13);
  --cs-card-shadow: 0 38px 90px -36px rgba(0, 0, 0, .84), inset 0 1px rgba(255, 255, 255, .05);
  --cs-field-bg: rgba(255, 255, 255, .055);
  --cs-field-stroke: rgba(255, 255, 255, .16);
  --cs-field-placeholder: rgba(202, 215, 211, .58);
  --cs-focus-ring: rgba(230, 184, 97, .09);
}

/* ---- light. Plain white, not parchment: the rest of the light theme uses
        white surfaces, and a cream card on a white page is the same bug as a
        green card on a brown one (Ali, 2026-07-29). ---- */
html[data-theme="light"] {
  --cs-scrim-soft: rgba(255, 255, 255, .18);
  --cs-scrim: rgba(255, 255, 255, .66);
  --cs-card-bg: rgba(255, 255, 255, .96);
  --cs-card-border: rgba(168, 123, 46, .30);
  --cs-card-wash: rgba(168, 123, 46, .06);
  --cs-card-shadow: 0 1px 2px rgba(15, 25, 22, .05), 0 30px 70px -34px rgba(15, 25, 22, .25);
  --cs-field-bg: rgba(255, 255, 255, .72);
  --cs-field-stroke: rgba(16, 37, 31, .18);
  --cs-field-placeholder: #758a84;
  --cs-focus-ring: rgba(168, 123, 46, .14);
}

/* ---- desert. The page canvas is warm brown here, so the scrim and the card
        face are brown too. A green card on this page was the bug. ---- */
html[data-theme="default"] {
  --cs-scrim-soft: rgba(31, 20, 10, .10);
  --cs-scrim: rgba(31, 20, 10, .60);
  --cs-card-bg: rgba(38, 25, 13, .93);
  --cs-card-border: rgba(230, 184, 77, .42);
  --cs-card-wash: rgba(230, 184, 77, .14);
  --cs-card-shadow: 0 38px 90px -36px rgba(18, 11, 3, .86), inset 0 1px rgba(245, 230, 204, .06);
  --cs-field-bg: rgba(245, 230, 204, .06);
  --cs-field-stroke: rgba(245, 230, 204, .18);
  --cs-field-placeholder: rgba(212, 192, 148, .62);
  --cs-focus-ring: rgba(230, 184, 77, .12);
}

.lsany-coming-soon-shell {
  position: relative;
  min-height: clamp(420px, 52vw, 610px);
  isolation: isolate;
}

.lsany-coming-soon-preview {
  filter: blur(8px) saturate(.58);
  opacity: .22;
  pointer-events: none;
  user-select: none;
  transform: scale(.975);
  transform-origin: center;
}

.lsany-coming-soon-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 42px);
  background: radial-gradient(circle at 50% 48%, var(--cs-scrim-soft), var(--cs-scrim) 78%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lsany-coming-soon-card {
  width: min(100%, 610px);
  padding: clamp(27px, 4vw, 44px);
  text-align: center;
  border: 1px solid var(--cs-card-border);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, var(--cs-card-wash), transparent 46%),
    var(--cs-card-bg);
  box-shadow: var(--cs-card-shadow);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  transform: translateY(-56px);
}

/* Pre-launch the pricing cards are removed from the home page, not shown behind the
   veil. With no cards to sit over, the waitlist card renders as a normal centered
   block — no tall empty shell, no dim gradient layer, no upward offset. */
.lsany-coming-soon-shell.is-cardless { min-height: 0; }
.lsany-coming-soon-shell.is-cardless .lsany-coming-soon-overlay {
  position: static;
  inset: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lsany-coming-soon-shell.is-cardless .lsany-coming-soon-card { transform: none; }

/* The heading is the first thing in the card now. The "Course · Coming Soon"
   pill above it said the same words as the sentence directly beneath it
   (Ali, 2026-07-31), so it went, and the heading moved up into its space. */
.lsany-coming-soon-card h2 {
  margin: 0 0 10px;
  color: var(--cream, #faf5e8);
  font-family: var(--f-display, "Unbounded", sans-serif);
  font-size: clamp(27px, 4vw, 43px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.lsany-coming-soon-card > p:not(.lsany-coming-soon-consent):not(.lsany-coming-soon-status) {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--secondary, #bfd0cc);
  font-size: clamp(14px, 1.8vw, 17px);
  line-height: 1.55;
}

.lsany-coming-soon-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 23px;
}

.lsany-coming-soon-form input[type="email"] {
  min-width: 0;
  min-height: 54px;
  padding: 0 17px;
  border: 1px solid var(--cs-field-stroke);
  border-radius: 999px;
  outline: none;
  color: var(--cream, #faf5e8);
  background: var(--cs-field-bg);
  font: 500 15px/1 var(--f-body, "Instrument Sans", sans-serif);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.lsany-coming-soon-form input[type="email"]::placeholder { color: var(--cs-field-placeholder); }
.lsany-coming-soon-form input[type="email"]:focus {
  border-color: var(--gold, #e6b861);
  box-shadow: 0 0 0 4px var(--cs-focus-ring);
}
.lsany-coming-soon-form .btn { min-height: 54px; white-space: nowrap; }
.lsany-coming-soon-form .btn:disabled { cursor: wait; opacity: .72; }

.lsany-coming-soon-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.lsany-coming-soon-consent {
  margin: 11px auto 0;
  color: var(--muted, #8aa09a);
  font-size: 10.5px;
  line-height: 1.5;
}

.lsany-coming-soon-status {
  min-height: 20px;
  margin: 12px auto 0;
  color: var(--muted, #8aa09a);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}
/* Empty until the form says something, and an empty one still reserved 32px of
   height plus its margin. That was invisible while the kicker pill padded the
   top of the card; with the pill gone it left the card visibly bottom-heavy.
   It takes its space when it has something to say and none when it does not. */
.lsany-coming-soon-status:empty { display: none; }
.lsany-coming-soon-status.is-error { color: var(--coral, #f0a28a); }
.lsany-coming-soon-status.is-success { color: var(--green, #8fe0b4); font-size: 15px; }
.lsany-coming-soon-card.is-joined { padding-block: clamp(34px, 5vw, 52px); }

@media (max-width: 620px) {
  .lsany-coming-soon-shell { min-height: 520px; }
  .lsany-coming-soon-overlay { padding: 15px; }
  .lsany-coming-soon-card { border-radius: 21px; padding: 27px 19px; transform: translateY(-24px); }
  .lsany-coming-soon-form { grid-template-columns: 1fr; }
  .lsany-coming-soon-form .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lsany-coming-soon-preview { transform: none; }
}