/* The waitlist form (components/waitlist.html): one e-mail field and one button, on whatever the page puts it on (the mist
   hero, a white card, the pink band). The field is the site's pill shape at the button's height; below 560px the button
   goes under the field, full width. After sending, the field and the note give way to the answer (assets/js/waitlist.js). */
.waitlist { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 580px; }
.waitlist__lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text); font-weight: 600; }
.waitlist__row { display: flex; gap: 10px; }
.waitlist__field { flex: 1; min-width: 0; display: flex; }
.waitlist__input { width: 100%; height: 52px; padding: 0 22px; border: 1.5px solid var(--border-2); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; transition: border-color 160ms ease, box-shadow 160ms ease; }
.waitlist__input::placeholder { color: var(--text-3); opacity: 1; }
.waitlist__input:hover { border-color: var(--text-3); }
.waitlist__input:focus { outline: none; border-color: var(--navy); box-shadow: var(--ring); }
.waitlist.is-error .waitlist__input { border-color: #b3261e; }
.waitlist__btn { flex: none; }
.waitlist__btn:disabled { opacity: 0.7; cursor: progress; }
.waitlist__note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.waitlist__note a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.waitlist__status { margin: 0; padding: 12px 16px; border-radius: 16px; background: #fdecea; color: #8c1d18; font-size: 15px; font-weight: 600; line-height: 1.5; }
.waitlist.is-done .waitlist__row, .waitlist.is-done .waitlist__note { display: none; }
.waitlist.is-done .waitlist__status { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--yellow); color: var(--navy); font-size: 16px; outline: none; }
.waitlist.is-done .waitlist__status::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; }
@media (max-width: 560px) {
  .waitlist__row { flex-direction: column; }
  .waitlist__btn { justify-content: space-between; width: 100%; }
}