/* Waitlist page: one screen over the animated waves (assets/waves.js): dark type on the white sky and blue wave,
   white links over the dark green at the bottom. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
.wl {
  --ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto;
  font-family: "Inter Tight", system-ui, sans-serif; color: #0d0f1a; background: #dfe5fb;
  -webkit-font-smoothing: antialiased;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the waves span the whole page, not the window, so the dark band always stays under the bottom links */
.wl-waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.wl > :not(.wl-waves) { position: relative; z-index: 1; }

.wl-logo { justify-self: start; margin: 28px 0 0 32px; color: #0d0f1a; display: block; animation: wl-in .8s var(--ease) both; }
.wl-logo svg { height: 30px; width: auto; display: block; }

.wl-main { align-self: start; display: grid; justify-items: center; gap: 18px; width: min(780px, 100%); margin: 0 auto; padding: clamp(28px, 9vh, 110px) 20px 64px; text-align: center; }
.wl-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; height: 36px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(13, 15, 26, .1); font-size: 15px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: wl-in .8s .05s var(--ease) both;
}
.wl-badge span:first-child { font-weight: 600; font-style: italic; letter-spacing: -.01em; }
.wl-badge svg { width: 16px; height: 16px; fill: #0d0f1a; }
.wl-badge span:last-child { color: rgba(13, 15, 26, .7); }
.wl-title { margin: 4px 0 0; font-size: clamp(42px, 7.4vw, 78px); line-height: .98; font-weight: 500; letter-spacing: -.045em; animation: wl-in .9s .12s var(--ease) both; }
.wl-lead { margin: 0; max-width: 460px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.45; color: rgba(13, 15, 26, .78); animation: wl-in .9s .2s var(--ease) both; }

.wl-form {
  display: flex; width: min(520px, 100%); margin-top: 10px; padding: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(13, 15, 26, .1), 0 12px 40px rgba(20, 40, 120, .18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: wl-in .9s .28s var(--ease) both;
  transition: box-shadow .25s;
}
.wl-form:focus-within { box-shadow: inset 0 0 0 1.5px rgba(13, 15, 26, .45), 0 12px 40px rgba(20, 40, 120, .18); }
.wl-form input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border: 0; outline: 0; background: none; color: #0d0f1a; font: inherit; font-size: 16px; }
.wl-form input::placeholder { color: rgba(13, 15, 26, .5); }
.wl-form button {
  flex-shrink: 0; height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: #0d0f1a; color: #fff;
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; transition: background-color .2s, opacity .2s;
}
.wl-form button:hover { background: #262a3d; }
.wl-form button:disabled { opacity: .6; cursor: default; }
.wl-form button:focus-visible, .wl a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.wl-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-form.is-done { display: none; }

.wl-status { margin: 0; min-height: 22px; font-size: 15px; font-weight: 500; color: #0d0f1a; }
.wl-status.is-error { color: #a3121f; }
.wl-status.is-done { font-size: 17px; animation: wl-in .6s var(--ease) both; }
.wl-fine { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; font-weight: 500; color: rgba(13, 15, 26, .8); animation: wl-in .9s .34s var(--ease) both; }
.wl-fine a { color: #0d0f1a; }

.wl-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 48px 20px 30px; font-size: 14px; color: rgba(255, 255, 255, .5); animation: wl-in .9s .4s var(--ease) both; }
.wl-links a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .2s; }
.wl-links a:hover { color: #fff; }

@keyframes wl-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 560px) {
  .wl-logo { margin: 20px 0 0 20px; }
  .wl-logo svg { height: 26px; }
  .wl-form { flex-direction: column; gap: 6px; border-radius: 26px; }
  .wl-form input { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .wl * { animation: none !important; } }