@font-face { font-family: "Season Mix"; src: url("/fonts/SeasonMix-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("/fonts/SeasonMix-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --blue: #0009ff;
  --gray: #272727;
  --dim: rgb(255 255 255 / 0.72);
  /* Springs: SwiftUI .spring(duration: 0.8, bounce: 0.35) over 1.2 s, and (0.6, 0.45) over 1.0 s for the icon pop. */
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --spring-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@supports (color: color(display-p3 0 0 1)) {
  :root { --blue: color(display-p3 0 0.035 1); }
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.065, 0.215, 0.399, 0.581, 0.74, 0.867, 0.959, 1.019, 1.052, 1.066, 1.067, 1.059, 1.048, 1.035, 1.023, 1.013, 1.006, 1.001, 0.997, 0.996, 0.995, 0.996, 0.996, 1);
    --spring-pop: linear(0, 0.08, 0.267, 0.492, 0.706, 0.883, 1.009, 1.086, 1.121, 1.125, 1.108, 1.082, 1.054, 1.028, 1.008, 0.994, 0.987, 0.984, 0.985, 0.987, 0.991, 0.995, 0.998, 1, 1);
  }
}

* { box-sizing: border-box; margin: 0; }
/* Elements that set display (grid, flex) would otherwise ignore the hidden attribute. */
[hidden] { display: none !important; }
html, body { background: var(--gray); }
body {
  font: 300 18px/1.4 "Season Mix", system-ui, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  /* No orphans: every block of text balances its lines (inherited by everything). */
  text-wrap: balance;
}
a { color: inherit; text-underline-offset: 0.15em; }
img { display: block; max-width: 100%; height: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Hero: one screen tall, the card centred, the USPs and form at the bottom, like the app's welcome step. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: max(32px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
}
.hero > .spacer { flex: 1; }
#universe {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  /* Pushed back like the app's welcome screen (blur 4, black at 25%), so the wordmark, tagline and USPs stand out. */
  filter: blur(4px) brightness(0.75);
}
/* Progressive blur behind the bottom content, strongest at the bottom edge. */
.blur {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  z-index: -1;
  pointer-events: none;
  background: rgb(39 39 39 / 0.3);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  -webkit-mask-image: linear-gradient(transparent, #000 38%);
  mask-image: linear-gradient(transparent, #000 38%);
}

/* Welcome layout from the app: the wordmark alone on a wide blue card, the pitch underneath in white. */
/* Larger than in the app; everything scales from the card width, keeping the app's 218 × 122 proportions. */
.brand {
  /* Capped by height too, so the form stays on the first screen of a laptop. */
  --card: clamp(290px, min(42vw, 40svh), 480px);
  /* The card at 60% and the tagline at 80% of the phone-scaled size, at every breakpoint. */
  --logo: calc(var(--card) * 0.6);
  --tagline: calc(var(--card) * 0.115 * 0.8);
  display: grid;
  justify-items: center;
  gap: calc(var(--logo) * 0.1);
  text-align: center;
}
.brand-card {
  width: var(--logo);
  aspect-ratio: 218 / 122;
  border-radius: calc(var(--logo) * 0.11);
  background: var(--blue);
  box-shadow: 0 12px 60px rgb(0 0 0 / 0.35);
  display: grid;
  place-items: center;
}
.brand-card img { width: 70.6%; }
/* Covers fly behind the text; a soft dark glow keeps it readable over bright ones. */
.tagline {
  font-weight: 500;
  font-size: var(--tagline);
  line-height: 1.04;
  letter-spacing: -0.024em;
  text-shadow: 0 0 14px rgb(0 0 0 / 0.55);
}

.usp { width: 100%; max-width: 480px; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.usp img { width: 52px; height: 52px; flex: none; }
.usp p { font-weight: 500; font-size: 21px; line-height: 1.06; letter-spacing: -0.4px; }

.waitlist { width: 100%; max-width: 480px; display: grid; gap: 12px; }
.waitlist input {
  font: inherit;
  font-weight: 500;
  font-size: 20px;
  height: 64px;
  padding: 0 26px;
  border-radius: 999px;
  border: 2px solid rgb(255 255 255 / 0.35);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}
.waitlist input::placeholder { color: rgb(255 255 255 / 0.55); }
.waitlist input:focus-visible { outline: none; border-color: #fff; }
/* The app's white capsule button: the waitlist submit, and links styled as buttons. */
.waitlist button, .button {
  font: inherit;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.6px;
  height: 72px;
  padding: 0 24px 6px; /* the font sits low in its line box; lift the label to look centred */
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.button { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 480px; text-decoration: none; }
:is(.waitlist button, .button):active { transform: scale(0.97); opacity: 0.75; transition-duration: 0.05s; }
:is(.waitlist button, .button):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.waitlist button:disabled { cursor: progress; }
.status { min-height: 1.4em; text-align: center; font-size: 16px; }
.status:empty { min-height: 0; }
.fineprint { text-align: center; font-size: 14px; color: var(--dim); }

.joined { width: 100%; max-width: 480px; display: grid; justify-items: center; gap: 24px; text-align: center; }
.joined h2 { font-weight: 500; font-size: 30px; letter-spacing: -0.6px; }
.checkmark { position: relative; width: 124px; height: 124px; }
/* The 3D scene is larger than the icon so the tick can drop in from above without clipping. */
.checkmark canvas { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.wavy { font-size: 21px; letter-spacing: -0.3px; }
.wavy span { display: inline-block; white-space: pre; animation: wave 1.571s ease-in-out infinite; animation-delay: calc(var(--i) * 0.1125s); }
@keyframes wave {
  25% { transform: translateY(-2.5px); }
  75% { transform: translateY(2.5px); }
}

/* Entrance: rise from below (or scale up) out of a light blur, on a spring. */
.enter { animation: enter 1.2s var(--spring) var(--delay, 0s) both; }
.enter.from-scale { animation-name: enter-scale; }
@keyframes enter { from { opacity: 0; filter: blur(8px); transform: translateY(36px); } }
@keyframes enter-scale { from { opacity: 0; filter: blur(8px); transform: scale(0.82); } }
@keyframes fade { from { opacity: 0; } }

.features { max-width: 720px; margin: 0 auto; padding: 96px 16px 64px; display: grid; gap: 48px; }
.feature { display: grid; grid-template-columns: 88px 1fr; gap: 20px; align-items: center; }
.feature img { width: 88px; height: 88px; }
.feature h2 { font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -0.6px; }
.feature p { margin-top: 6px; color: var(--dim); }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  padding: 32px 16px max(32px, env(safe-area-inset-bottom));
  font-size: 15px;
  font-weight: 500;
  color: var(--dim);
}

/* Confirmation page: one centred column (logo, checkmark, text, button), vertically centred above the footer. */
.confirm {
  min-height: calc(100svh - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  text-align: center;
}
.confirm-logo { width: 150px; margin-bottom: 40px; }
.confirm .joined { gap: 20px; }
.confirm .joined h1 { font-weight: 500; font-size: clamp(34px, 6vw, 48px); line-height: 1.05; letter-spacing: -1px; }
.confirm .joined p { max-width: 26em; }
.confirm .button { margin-top: 12px; }

/* Light pages (the confirmation page): white background, everything in brand blue, the button inverted. */
html.light, html.light body { color-scheme: light; background: #fff; color: var(--blue); }
.light footer { color: var(--blue); }
.light .button { background: var(--blue); color: #fff; }
.light .button:focus-visible { outline-color: var(--blue); }

/* Privacy and support pages. */
.page { max-width: 680px; margin: 0 auto; padding: 40px 16px 24px; }
.page > header { margin-bottom: 40px; }
.page > header img { width: 110px; }
.page h1 { font-weight: 500; font-size: 41px; line-height: 1.05; letter-spacing: -1px; }
.page .updated { margin-top: 8px; color: var(--dim); }
.page h2 { font-weight: 500; font-size: 24px; letter-spacing: -0.4px; margin-top: 40px; }
.page h3 { font-weight: 500; font-size: 19px; margin-top: 24px; }
.page p, .page li { margin-top: 10px; line-height: 1.5; }
.page ul { padding-left: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  .enter, .enter.from-scale { animation: fade 0.3s ease-out var(--delay, 0s) both; }
  .wavy span { animation: none; }
}