/* Waitlist form (waitlist.html and the no-JS thank-you page). Uses the
 * Washed Horizon tokens from washed-horizon.css; form styling only. */
@layer layout {
  .wl-main [hidden] { display: none !important; }

  .wl-main {
    position: relative;
    isolation: isolate;
    padding-block: 56px 96px;
    background: radial-gradient(circle at 92% 8%, rgb(125 211 200 / 18%), transparent 26rem), radial-gradient(circle at 8% 0%, rgb(255 180 121 / 7%), transparent 18rem), linear-gradient(180deg, #FBFDFD 0%, #F1F8F6 100%);
  }
  /* Same horizon line as the page band on the other pages (.wh-pagehead). */
  .wl-main::after {
    content: "";
    position: absolute; z-index: -1; left: 0; right: 0; bottom: -1px; height: 64px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46C385 4 630 40 882 56c232 15 466 2 718-34v58H0Z' fill='%23F7FAF9'/%3E%3Cpath d='M0 46C385 4 630 40 882 56c232 15 466 2 718-34' fill='none' stroke='%237DD3C8' stroke-opacity='.5' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
    pointer-events: none;
  }
  .wl-layout {
    width: min(1080px, calc(100% - 32px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas: "intro card" "next card";
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    row-gap: 36px;
    align-items: start;
  }
  .wl-intro { grid-area: intro; padding-block-start: 12px; }
  .wl-layout > .wl-card { grid-area: card; }
  .wl-next { grid-area: next; }
  .wl-title { margin-top: 10px; color: var(--wh-ink); }
  .wl-lede { margin-top: 14px; max-width: 40ch; font-size: 1.04rem; line-height: 1.6; color: #33485A !important; }

  .wl-card {
    background: #fff;
    border: 1px solid var(--wh-sea-line);
    border-radius: 16px;
    box-shadow: var(--wh-shadow-soft);
    padding: 28px;
  }
  .wl-thanks.wl-card { width: min(640px, calc(100% - 32px)); margin-inline: auto; }

  .wl-form { display: grid; gap: 14px; }
  .wl-label { font-weight: 800; font-size: .95rem; color: var(--wh-ink); }
  .wl-row { display: flex; gap: 10px; }
  .wl-row .wl-input { flex: 1; min-width: 0; }
  .wl-input {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #B9CFD0;
    border-radius: 10px;
    background: #fff;
    color: var(--wh-ink);
    font: inherit;
    font-size: 1rem; /* 16px keeps iOS from zooming on focus */
  }
  .wl-input:focus { outline: 2px solid var(--wh-primary); outline-offset: 1px; border-color: var(--wh-primary); }
  .wl-textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
  .wl-submit { min-height: 46px; border-radius: 10px; padding-inline: 18px; white-space: nowrap; }
  .wl-submit:disabled { opacity: .6; cursor: progress; }

  .wl-note, .wl-hint { font-size: .86rem; line-height: 1.5; color: var(--wh-muted); }
  .wl-note a, .wl-link { color: var(--wh-primary); text-decoration: underline; text-underline-offset: 2px; }
  .wl-error { padding: 10px 12px; border-radius: 10px; background: #FDF0EC; color: #8A2E17 !important; font-size: .9rem; line-height: 1.45; }

  /* Honeypot: off-screen for people, still in the form for bots. */
  .wl-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

  .wl-step2 { gap: 22px; }
  .wl-saved { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--wh-teal) !important; }
  .wl-saved::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wh-wash); font-size: .8rem; }
  .wl-step-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important; line-height: 1.12 !important; font-weight: 880; outline: none; }
  .wl-step2 > .wl-hint { margin-top: -14px; }
  .wl-q .wl-hint { margin-top: -6px; }

  .wl-q { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
  .wl-q legend { padding: 0; margin-block-end: 10px; font-weight: 800; font-size: 1rem; line-height: 1.35; color: var(--wh-ink); }
  .wl-options { display: flex; flex-wrap: wrap; gap: 8px; }
  .wl-option {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 13px;
    border: 1px solid #CFE0DF;
    border-radius: 10px;
    background: #FBFDFD;
    color: #23384A;
    font-size: .93rem;
    line-height: 1.3;
    cursor: pointer;
  }
  .wl-option:has(input:checked) { border-color: var(--wh-teal); background: var(--wh-mist); }
  .wl-option input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--wh-teal); }
  .wl-other { max-width: 420px; }
  .wl-calls { display: grid; gap: 8px; }
  .wl-call { width: 100%; font-weight: 700; }

  .wl-kids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
  .wl-kid { display: grid; gap: 6px; font-size: .88rem; font-weight: 700; color: #33485A; }

  .wl-actions { display: flex; align-items: center; gap: 16px; }
  .wl-skip { background: none; border: 0; padding: 10px 6px; min-height: 44px; color: var(--wh-muted); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

  .wl-thanks { display: grid; gap: 12px; }
  .wl-thanks p { line-height: 1.6; }

  /* What happens next: the steps after joining, under the intro on wide screens and after the form on phones. */
  .wl-next-title { font-size: 1.05rem !important; line-height: 1.3 !important; letter-spacing: -.015em !important; font-weight: 850; }
  .wl-next-list { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: wl-next; display: grid; gap: 0; }
  .wl-next-list li { counter-increment: wl-next; position: relative; display: grid; gap: 2px; padding: 0 0 18px 44px; }
  .wl-next-list li::before { content: counter(wl-next); position: absolute; left: 0; top: -3px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #DFF3EF; color: #236E77; font-size: .78rem; font-weight: 900; }
  .wl-next-list li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 31px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--wh-sea-line); }
  .wl-next-list li:last-child::before { background: color-mix(in srgb, var(--wh-sunrise) 26%, white); color: #9A3F22; }
  .wl-next-list strong { color: var(--wh-ink); font-size: .98rem; line-height: 1.35; }
  .wl-next-list span { color: var(--wh-muted); font-size: .9rem; line-height: 1.5; }

  @media (max-width: 899.98px) {
    .wl-layout { grid-template-columns: 1fr; grid-template-areas: "intro" "card" "next"; grid-template-rows: auto; gap: 24px; }
    .wl-intro { padding-block-start: 0; }
    .wl-next { padding-inline: 4px; }
  }

  @media (max-width: 639.98px) {
    .wl-main { padding-block: 28px 64px; }
    .wl-main::after { height: 40px; }
    .wl-card { padding: 20px 16px; border-radius: 14px; }
    .wl-row { flex-direction: column; }
    .wl-submit { width: 100%; }
    .wl-options { display: grid; }
    .wl-option { width: 100%; }
    .wl-actions { flex-direction: column; align-items: stretch; gap: 4px; }
  }
}