/* Waitlist sign-up: the field and the button side by side (stacked on a phone); after sending, the row folds away
   and the confirmation's tick draws. Needs form-fields' fields.css. Colours from --ui-* then --sx-*. */
.wl { --_g: var(--ui-ground, var(--sx-ground, #fff)); --_i: var(--ui-ink, var(--sx-ink, #121212)); --_a: var(--ui-accent, var(--sx-accent, #121212));
  --_oa: var(--ui-on-accent, var(--sx-on-accent, #fff)); --_mu: var(--ui-mute, var(--sx-mute, color-mix(in srgb, var(--_i) 66%, var(--_g))));
  --_t: var(--ui-text, var(--sx-text, system-ui, sans-serif)); --_d: var(--ui-display, var(--sx-display, var(--_t)));
  --_ease: var(--t-ease, cubic-bezier(.16, 1, .3, 1)); --_ms: calc(var(--t-reveal, 1000ms) * .6);
  position: relative; display: grid; width: min(100%, var(--wl-width, 560px)); font: 400 16px/1.45 var(--_t); color: var(--_i); }
.wl-row { grid-area: 1 / 1; display: flex; gap: 10px; align-items: start; transition: opacity calc(var(--_ms) * .5) ease, translate var(--_ms) var(--_ease); }
.wl-row .ff { flex: 1; min-width: 0; }
.wl-go { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--wl-button, var(--_i)); color: var(--wl-button-ink, var(--_g)); font: 600 16px/1 var(--_t); cursor: pointer; transition: scale .2s ease, opacity .2s ease; }
.wl-go:active { scale: var(--t-press, .97); }
.wl-go:disabled { opacity: .75; cursor: progress; }
.wl-go:focus-visible, .wl-again:focus-visible { outline: 2px solid var(--_a); outline-offset: 3px; }
.wl-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: wl-spin .7s linear infinite; }
@keyframes wl-spin { to { rotate: 1turn; } }
.wl-error, .wl [data-form-error] { margin: 8px 2px 0; color: var(--ui-error, #B42318); font-weight: 500; font-size: 14px; }
.wl-error:empty, .wl [data-form-error]:empty { display: none; }
/* Done: the row leaves upward, the confirmation arrives in its place. */
.wl.is-done .wl-row { opacity: 0; translate: 0 -10px; pointer-events: none; visibility: hidden; transition: opacity calc(var(--_ms) * .4) ease, translate var(--_ms) var(--_ease), visibility 0s linear var(--_ms); }
.wl-done { grid-area: 1 / 1; display: flex; gap: 16px; align-items: flex-start; border-radius: 12px; outline: none; }
.wl-done[hidden] { display: none; }
.wl-tick { flex: none; width: 48px; height: 48px; fill: none; stroke: var(--wl-tick, var(--_i)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wl-tick circle, .wl-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.wl-done.is-in .wl-tick circle { stroke-dashoffset: 0; transition: stroke-dashoffset var(--_ms) var(--_ease); }
.wl-done.is-in .wl-tick path { stroke-dashoffset: 0; transition: stroke-dashoffset calc(var(--_ms) * .6) var(--_ease) calc(var(--_ms) * .45); }
.wl-copy { opacity: 0; translate: 0 8px; }
.wl-done.is-in .wl-copy { opacity: 1; translate: 0 0; transition: opacity calc(var(--_ms) * .6) ease calc(var(--_ms) * .2), translate var(--_ms) var(--_ease) calc(var(--_ms) * .2); }
.wl-title { margin: 2px 0 2px; font: 500 clamp(22px, 2.4vw, 28px)/1.15 var(--_d); }
.wl-line { margin: 0; color: var(--_mu); }
.wl-line b { color: var(--_i); font-weight: 600; overflow-wrap: anywhere; }
.wl-again { margin-top: 6px; padding: 8px 0; border: 0; background: none; color: var(--_i); font: 500 14px/1 var(--_t); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 520px) { .wl-row { flex-direction: column; align-items: stretch; } .wl-go { justify-content: center; } }
@media (prefers-reduced-motion: reduce) {
  .wl-row, .wl-copy, .wl-done.is-in .wl-copy { transition: none !important; translate: none !important; }
  .wl-tick circle, .wl-tick path { stroke-dashoffset: 0 !important; transition: none !important; }
  .wl-spin { animation-duration: 2s; }
}