/* /waitlist/ (src/waitlist.html, js/waitlist.js): one air stage on the sky "gateway" photo (clouds both sides, open
   centre), a centred column: the strike line (S1 motif) draws in over a price path that stays under it, H1, one line,
   the email row, the X link. Success: the strike line draws again and a tick draws in. Reduced motion: site.css turns
   every animation into its end state. */
.rs-wl.rs-stage { display: grid; place-items: center; min-height: calc(100svh - 2 * var(--rs-frame)); box-sizing: border-box; text-align: center;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--rs-ht) + var(--rs-hh) + var(--rs-stage-y) * 0.5); }
.rs-wl__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rs-wl__sky picture, .rs-wl__sky img { display: block; width: 100%; height: 100%; }
.rs-wl__sky img { object-fit: cover; object-position: 50% 100%; }
.rs-wl__sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 46% at 50% 52%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2) 62%, transparent 84%); }
@media (max-width: 767px) { .rs-wl__sky::after { background: radial-gradient(ellipse 85% 52% at 50% 52%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25) 64%, transparent 88%); } }
.rs-wl__body { display: flex; flex-direction: column; align-items: center; max-width: 36rem; }

/* the strike line: accent line + flag (the section heads' motif), a price path that stays under it, the price bead */
.rs-wl__art { width: min(240px, 64vw); height: auto; overflow: visible; margin-bottom: clamp(20px, 3svh, 32px); }
.rs-wl__k, .rs-wl__px { fill: none; stroke-linecap: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.rs-wl__k { stroke: var(--rs-accent); stroke-width: 2px; animation: rs-wl-draw 0.9s var(--rs-ease-out) 0.2s both; }
.rs-wl__px { stroke: rgba(15, 31, 24, 0.42); stroke-width: 1.75px; animation: rs-wl-draw 1.6s var(--rs-ease-in-out) 0.35s both; }
.rs-wl__flag { fill: var(--rs-accent); transform-box: fill-box; transform-origin: 0 100%; animation: rs-wl-flag 0.5s var(--rs-ease-out) 0.95s both; }
.rs-wl__bead { fill: var(--rs-text); transform-box: fill-box; transform-origin: center; animation: rs-wl-bead 0.5s var(--rs-ease-out) 1.75s both; }
@keyframes rs-wl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rs-wl-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rs-wl-flag { from { opacity: 0; transform: translateY(-8px) scaleY(0.4); } }
@keyframes rs-wl-bead { from { opacity: 0; transform: scale(0.2); } }
/* success: the strike line draws again and the flag lifts */
.rs-wl.is-done .rs-wl__k { animation: rs-wl-redraw 0.8s var(--rs-ease-out) both; }
.rs-wl.is-done .rs-wl__flag { animation: rs-wl-lift 0.6s var(--rs-ease-out) 0.5s both; }
@keyframes rs-wl-lift { 0% { transform: none; } 45% { transform: translateY(-5px); } 100% { transform: none; } }

.rs-wl__h1 { margin: 0; font: 500 clamp(44px, 5.4vw, 80px)/1.02 var(--rs-display); letter-spacing: -0.03em; color: var(--rs-text); text-wrap: balance; }
.rs-wl__h1 .rs-line { display: block; }
.rs-wl__line { margin: clamp(16px, 2svh, 22px) 0 0; max-width: 26em; font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--rs-font); color: var(--rs-text-2); text-wrap: balance; }

/* the email row: one glass pill, the input and the ink button inside it; stacked under 480 px */
.rs-wl__form { width: 100%; max-width: 30rem; margin-top: clamp(28px, 4svh, 40px); }
.rs-wl__row { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--rs-glass-strong);
  -webkit-backdrop-filter: blur(var(--rs-blur)) saturate(1.15); backdrop-filter: blur(var(--rs-blur)) saturate(1.15); transition: background-color 0.25s ease; }
.rs-wl__row:focus-within { background: rgba(255, 255, 255, 0.82); }
.rs-wl__input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 8px 0 20px; border: 0; border-radius: 999px; background: transparent; outline: 0;
  color: var(--rs-text); font: 400 17px/1 var(--rs-font); }
.rs-wl__input::placeholder { color: var(--rs-text-3); opacity: 1; }
.rs-wl__row:has(.rs-wl__input:focus-visible) { outline: 2px solid var(--rs-accent); outline-offset: 2px; }
.rs-wl__btn { flex: none; }
.rs-wl__btn[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.rs-wl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rs-wl__msg { min-height: 1.4em; margin: 14px 0 0; font: 500 15px/1.4 var(--rs-font); color: var(--rs-text-2); text-wrap: balance; }
.rs-wl__msg.is-error { color: var(--rs-down); }
.rs-wl__form.is-shake .rs-wl__row { animation: rs-wl-shake 0.4s var(--rs-ease-out); }
@keyframes rs-wl-shake { 25% { translate: -6px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
.rs-wl__form.is-leaving { animation: rs-wl-out 0.3s var(--rs-ease-std) forwards; }
@keyframes rs-wl-out { to { opacity: 0; translate: 0 8px; } }
@media (max-width: 479px) {
  .rs-wl__row { flex-direction: column; align-items: stretch; padding: 6px; border-radius: 28px; }
  .rs-wl__input { padding: 0 18px; text-align: center; }
  .rs-wl__btn { width: 100%; }
}

/* the confirmation: a tick that draws, one line, one note */
.rs-wl__done { display: flex; flex-direction: column; align-items: center; margin-top: clamp(28px, 4svh, 40px); outline: 0; animation: rs-fade-up 0.7s var(--rs-ease-out) 0.25s backwards; }
.rs-wl__done[hidden] { display: none; }
.rs-wl__tick { width: 48px; height: 48px; overflow: visible; }
.rs-wl__tick circle, .rs-wl__tick path { fill: none; stroke: var(--rs-accent); stroke-width: 2.25px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.rs-wl__tick circle { animation: rs-wl-draw 0.7s var(--rs-ease-out) 0.35s both; }
.rs-wl__tick path { animation: rs-wl-draw 0.4s var(--rs-ease-out) 0.85s both; }
.rs-wl__done-h { margin: 16px 0 0; font: 500 clamp(24px, 2vw, 30px)/1.2 var(--rs-display); letter-spacing: -0.02em; color: var(--rs-text); }
.rs-wl__done-l { margin: 8px 0 0; font: 400 17px/1.5 var(--rs-font); color: var(--rs-text-2); }

.rs-wl__x { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: clamp(20px, 3svh, 32px); padding: 0 16px; border-radius: 999px;
  color: var(--rs-text); font: 500 15px/1 var(--rs-font); text-decoration: none; transition: background-color 0.2s ease; }
.rs-wl__x svg { width: 16px; height: 16px; fill: currentColor; }
@media (hover: hover) { .rs-wl__x:hover { background: var(--rs-glass-chip); } }

/* this page is the waitlist: the footer's waitlist button would point here */
html:has(.rs-wl) .rs-foot__wl { display: none; }