@font-face { font-family: Geist; src: url('assets/geist-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url('assets/geist-medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }

:root {
  --p-bg: #09090b; --p-surface: #18181b; --p-ink: #f4f4f5; --p-muted: #a1a1aa;
  --p-accent: #bef264; --p-accent-ink: #09090b; --p-action: #bef264; --p-action-ink: #09090b;
  --p-inv-bg: #f4f4f5; --p-inv-surface: #e1e1e2; --p-inv-ink: #09090b; --p-inv-muted: #565658;
  --p-inv-accent: #09090b; --p-inv-accent-ink: #f4f4f5; --p-inv-action: #09090b; --p-inv-action-ink: #f4f4f5;
  --font-display: Geist, sans-serif; --font-text: Geist, sans-serif;
  --display-weight: 500; --display-tracking: -.035em; --display-tracking-xl: -.045em;
  --nav: 0px; --gut: 32px;
}

html, body { background: var(--p-bg); color: var(--p-ink); }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #bef264; color: #09090b; }
.hero.hero--centred { min-height: 100svh; height: auto; padding: 64px 0; display: grid; place-items: center; }
.hero.hero--centred > .wrap { width: min(100% - 2 * var(--gut), 1280px); height: auto; display: block; }
.hero.hero--centred > .wrap > .hero-text { height: auto; text-align: center; }
.hero--centred .hero-text { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: none; margin: 0; }
.wordmark { display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 56px; font-size: 25px; font-weight: 500; letter-spacing: -.06em; }
.wordmark img { width: 48px; height: 48px; object-fit: contain; }
.hero--centred h1 { margin: 0; max-width: none; width: 100%; font-size: clamp(48px, 7.15vw, 104px); line-height: 1.06; font-weight: 500; letter-spacing: -.065em; }
.hero--centred h1 > span { display: block; }
.hero--centred h1 .sleep-line { color: var(--p-muted); }
.hero--centred .hero__lead { margin: 32px 0 0; max-width: 480px; color: var(--p-muted); font-size: 20px; line-height: 1.55; letter-spacing: -.02em; }
.download-area { margin-top: 40px; }
.hero--centred .btn-row { margin: 0; justify-content: center; }
.btn { gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 8px; font-weight: 500; letter-spacing: -.02em; }
.btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn:disabled { cursor: not-allowed; opacity: .8; }
.release-status { margin: 16px 0 0; min-height: 21px; color: var(--p-muted); font-size: 13px; line-height: 1.6; text-align: center; }
.skip-link { z-index: 100; }

@media (max-width: 639px) {
  :root { --gut: 24px; }
  .hero.hero--centred { padding: max(40px, env(safe-area-inset-top)) 0 max(40px, env(safe-area-inset-bottom)); }
  .wordmark { margin-bottom: 40px; font-size: 23px; }
  .hero--centred h1 { font-size: clamp(40px, 10.8vw, 64px); line-height: 1.08; letter-spacing: -.06em; }
  .hero--centred h1 > span:last-child { max-width: 9ch; margin-inline: auto; }
  .hero--centred .hero__lead { margin-top: 24px; max-width: 310px; font-size: 17px; }
  .desktop-break { display: none; }
  .download-area { width: min(100%, 310px); margin-top: 32px; }
  .btn-row, .btn { width: 100%; }
}
@media (max-height: 600px) and (min-width: 640px) {
  .hero.hero--centred { padding: 32px 0; }
  .wordmark { margin-bottom: 24px; }
  .hero--centred h1 { font-size: clamp(44px, 6vw, 72px); }
  .hero--centred .hero__lead { margin-top: 20px; }
  .download-area { margin-top: 24px; }
}