/* Nightpath landing page. Built from Figma v2 (Hesper). Colours, type and spacing come from tokens.css. */

@font-face { font-family: "Quicksand"; src: url("/fonts/quicksand-latin-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/fonts/lexend-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 300 17px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--lantern); color: var(--on-lantern); padding: 10px 16px; border-radius: var(--radius-pill); font-weight: 500; text-decoration: none; }
.skip:focus { top: 16px; }

/* Content column: up to 1440 px wide, with side margins that grow from 16 px on phones to 80 px on large screens. */
.wrap { width: min(1440px, 100% - 2 * clamp(16px, 5vw, 80px)); margin-inline: auto; }

/* Type */
.display { font: 600 64px/72px var(--font-display); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.h2 { font: 600 54px/62px var(--font-display); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.h3 { font: 600 44px/51px var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.lead { font-size: 18px; line-height: 31px; color: var(--ink-muted); }
.body-lg { font-size: 17px; line-height: 28px; color: var(--ink-muted); }
.eyebrow { font: 500 12px/17px var(--font-sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 24px; }
.eyebrow--rose { color: var(--rose-text); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill); border: 1.5px solid transparent; font: 500 16px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: box-shadow .6s ease, background-color .6s ease, border-color .6s ease; }
.btn--primary { background: var(--lantern); color: var(--on-lantern); }
.btn--primary:hover, .btn--primary:focus-visible { box-shadow: var(--glow); }
.btn--primary[disabled] { opacity: .75; cursor: progress; }
.btn--quiet { min-height: 50px; padding: 0 22px; font-size: 14px; color: var(--ink); border-color: rgba(185,178,204,.5); }
.btn--quiet:hover { background: var(--surface-raised); }
.btn--glow { min-height: 58px; padding: 0 28px; font-size: 18px; color: var(--lantern-text); background: rgba(37,40,74,.72); border-color: rgba(255,194,122,.7); box-shadow: 0 0 24px rgba(255,194,122,.25); }
.btn--glow:hover { box-shadow: 0 0 32px rgba(255,194,122,.45); }

/* Navigation */
:root { --nav-h: 96px; }
.nav { position: sticky; top: 0; z-index: 20; background: var(--night-indigo); transition: background-color .6s ease; }
/* Home page: the hero's sky runs up behind the nav, which stays clear until the page scrolls (site.js). */
.nav.is-clear { background: transparent; }
.nav__inner { height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 40px; height: 40px; }
.brand__word { font: 600 26px/1 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.brand__word sup { font-size: 11px; vertical-align: super; margin-left: 1px; }
.nav__links { display: flex; gap: 40px; }
.nav__links a { font-size: 14px; color: var(--ink-muted); text-decoration: none; transition: color .4s ease; }
.nav__links a:hover { color: var(--ink); }

/* Hero */
/* The hero fills the screen (800 to 1180 px) and starts under the clear nav. On screens taller than
   the 830 px design, the copy and island move down together by half the extra space. */
.hero { margin-top: calc(-1 * var(--nav-h)); --hero-shift: clamp(0px, (100svh - var(--nav-h) - 830px) / 2, 135px); position: relative; min-height: clamp(800px, 100svh, 1180px); overflow: hidden; isolation: isolate; background: var(--night-indigo); }
.hero__sky { position: absolute; inset: 0; z-index: -3; background: url("/img/hero-sky-1440.webp") center bottom / cover no-repeat; }
.hero__island { position: absolute; z-index: -2; left: 40.5%; top: calc(var(--nav-h) + var(--hero-shift) - 30px + 2.5vw); width: min(77vw, 1260px); aspect-ratio: 16 / 9; }
/* Soft left and bottom edges. On the still (its own box) and on the live canvas, which reaches
   160 px higher so drifting clouds aren't cut off: there the bottom fade starts at 86% of the box
   (86% + 22.4px of the taller canvas) and the top 70 px fade out gently. */
.hero__float { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%), linear-gradient(to bottom, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 26%), linear-gradient(to bottom, #000 86%, transparent 100%); mask-composite: intersect; }
.hero__still, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 1.2s ease; }
.hero.is-playing .hero__video { opacity: 1; }
/* Page clouds drawn again in front of the island's lower edge, so the video's bottom edge
   sinks into the cloud bank instead of showing a seam. Same image and position as .hero__sky. */
.hero__clouds { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("/img/hero-sky-1440.webp") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 74%, #000 90%); mask-image: linear-gradient(to bottom, transparent 74%, #000 90%); }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(27,29,58,.94) 0%, rgba(27,29,58,.72) 36%, rgba(27,29,58,0) 52%),
              linear-gradient(to bottom, rgba(19,20,42,0) 82%, var(--surface-deep) 100%); }
.hero__inner { position: relative; min-height: clamp(800px, 100svh, 1180px); padding-top: calc(104px + var(--nav-h) + var(--hero-shift)); padding-bottom: 56px; }
.hero__copy { max-width: 700px; }
.hero__copy .display { text-wrap: wrap; }
@media (max-width: 1100px) { .br-wide { display: none; } }
.hero__copy .lead { max-width: 480px; margin-top: 36px; }
.hero__copy .waitlist { margin-top: 36px; }
.hero__note { position: absolute; left: 0; bottom: 56px; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
/* Under the island, centred on it: x = the island box's centre, y = 86% down the box. */
.hero__try { position: absolute; left: calc(40.5vw + min(38.5vw, 630px) - (100vw - 100%) / 2); transform: translateX(-50%);
  top: calc(var(--nav-h) + var(--hero-shift) - 30px + 2.5vw + min(77vw, 1260px) * 9 / 16 * 0.86); display: grid; justify-items: center; gap: 14px; }
/* "Drag to turn the island": only once the live island is there, and it fades after the first drag or click. */
.hero__hint { display: none; align-items: center; gap: 8px; max-width: 300px; text-align: left; margin: 0 0 2px; font-size: 13px; line-height: 20px; color: var(--ink-muted); transition: opacity 1.2s ease; }
.hero.has-3d .hero__hint { display: inline-flex; }
.hero.hint-done .hero__hint { opacity: 0; }
.hero__cue { font-size: 12px; line-height: 18px; color: var(--ink); }

/* Waitlist form */
.waitlist { width: min(480px, 100%); display: grid; gap: 12px; text-align: left; }
.waitlist__label { font: 500 14px/18px var(--font-sans); color: var(--ink); }
.waitlist__row { display: flex; gap: 12px; }
.field { width: 100%; min-height: 52px; padding: 0 24px; border-radius: var(--radius-pill); border: 1.5px solid rgba(185,178,204,.35); background: var(--surface-raised); color: var(--ink); font: 300 16px/1.2 var(--font-sans); transition: border-color .4s ease; }
.field::placeholder { color: var(--ink-muted); opacity: 1; }
.field:hover { border-color: rgba(185,178,204,.6); }
.field:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: transparent; }
.field[aria-invalid="true"] { border-color: var(--rose-text); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; font-size: 15px; color: var(--ink-muted); padding-right: 52px; cursor: pointer; }
.select select:valid:not([value=""]) { color: var(--ink); }
.select::after { content: ""; position: absolute; right: 24px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: rotate(45deg); pointer-events: none; }
.select option { background: var(--surface-raised); color: var(--ink); }
.waitlist__privacy { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.waitlist__privacy a { color: var(--ink-muted); text-underline-offset: 3px; }
.waitlist__status { font-size: 15px; line-height: 23px; color: var(--ink); min-height: 0; }
.waitlist__status:empty { display: none; }
.waitlist__status.is-error { color: var(--rose-text); }
.waitlist.is-done .waitlist__row, .waitlist.is-done .select, .waitlist.is-done .waitlist__label, .waitlist.is-done .waitlist__privacy, .waitlist.is-done .cf-turnstile { display: none; }
/* Done: a lit card, so the confirmation stands apart from the page. A small lantern glows at the top. */
.waitlist.is-done .waitlist__status { position: relative; padding: 56px 28px 28px; border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,194,122,.16), rgba(255,194,122,0) 60%), var(--surface-raised);
  border: 1.5px solid rgba(255,194,122,.38); box-shadow: 0 0 48px rgba(255,194,122,.14), 0 18px 40px rgba(10,10,30,.35);
  font: 600 20px/28px var(--font-display); color: var(--ink); text-wrap: pretty; animation: done-in .9s ease both; }
.waitlist.is-done .waitlist__status::before { content: ""; position: absolute; left: 28px; top: 24px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--lantern); box-shadow: var(--glow); }
.join .waitlist.is-done .waitlist__status { text-align: center; }
.join .waitlist.is-done .waitlist__status::before { left: 50%; margin-left: -7px; }
@keyframes done-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .waitlist.is-done .waitlist__status { animation: none; } }
.waitlist__status small { display: block; margin-top: 12px; font: 300 15px/23px var(--font-sans); color: var(--ink-muted); }
/* Turnstile: usually invisible; when it needs a tap it shows full width above the button. */
.cf-turnstile { position: absolute; width: 1px; height: 1px; overflow: hidden; }  /* out of the layout while invisible */
.cf-turnstile.is-shown { position: static; width: auto; height: auto; overflow: visible; min-width: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Wind down */
.winddown { position: relative; overflow: hidden; background: var(--surface-deep); min-height: 460px; display: grid; align-items: center; text-align: center; }
.winddown__glow { position: absolute; left: 50%; top: 50%; width: 900px; height: 420px; transform: translate(-50%, -45%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,194,122,.10), rgba(227,161,160,.05) 50%, transparent); filter: blur(40px); }
.winddown__inner { position: relative; padding-block: 120px; }
.winddown .h2 { font-size: 56px; line-height: 64px; }
.winddown .faded { color: rgba(185,178,204,.5); }
.winddown .body-lg { max-width: 620px; margin: 24px auto 0; }
.lights { position: absolute; inset: 0; }
.lights i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--clay-cream); opacity: .45; filter: blur(1px);
  animation: drift var(--d) ease-in-out var(--t) infinite, twinkle calc(var(--d) * .4) ease-in-out var(--t) infinite; will-change: transform, opacity; }
.lights i:nth-child(3n) { background: var(--lantern-amber); box-shadow: 0 0 calc(var(--s) * 2) calc(var(--s) * .6) rgba(255,194,122,.22); filter: blur(1.5px); }
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(14px, -22px); }
  50% { transform: translate(-6px, -40px); }
  75% { transform: translate(-16px, -16px); }
}
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
.is-paused .lights i, .is-paused .orb, .is-paused .orb::before, .hero.is-paused .hero__float { animation-play-state: paused; }

/* What's inside */
.inside { background: var(--surface-deep); padding: 120px 0 140px; }
.inside__head { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: end; margin-bottom: 72px; }
.inside__head .eyebrow { margin-bottom: 20px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card__art { width: 100%; aspect-ratio: 282 / 220; height: auto; border-radius: var(--radius-lg); object-fit: cover; margin-bottom: 24px; }
.card__art--breath { position: relative; display: grid; place-items: center; overflow: hidden;
  /* Faded like the other three cards' artwork: an indigo panel with a dusk haze at the top and a soft warm haze
     around the orb, its edges melting into the section. The haze sits behind the orb, never over it; no grain. */
  background:
    radial-gradient(circle at 50% 50%, rgba(255,194,122,.14) 0, rgba(227,161,160,.10) 20%, rgba(227,161,160,0) 42%),
    radial-gradient(120% 75% at 50% 0%, rgba(108,111,184,.30), rgba(108,111,184,0) 70%),
    linear-gradient(to bottom, #2a2b4f 0%, #24233f 62%, #1a1a35 100%);
  box-shadow: inset 0 0 26px 12px rgba(19,20,42,.9), inset 0 -36px 40px -10px rgba(19,20,42,.75); }
/* Breathing blob: a soft bubble whose edge slowly changes shape while amber, rose and lavender drift inside it,
   with a pale rim of light. It grows over 4 s (breathe in), holds for 2 s and settles over 6 s (breathe out). */
.orb { position: relative; width: 46%; aspect-ratio: 1; overflow: hidden; isolation: isolate;
  border-radius: 42% 58% 60% 40% / 54% 40% 60% 46%;
  background: radial-gradient(circle at 50% 70%, #6C6FB8 0%, var(--sky) 70%);
  box-shadow: 0 0 46px 8px rgba(255,194,122,.18), 0 0 100px 28px rgba(227,161,160,.14);
  animation: breathe 12s ease-in-out infinite, morph 14s ease-in-out infinite; }
.orb::before { content: ""; position: absolute; inset: -20%;
  background: radial-gradient(circle at 40% 28%, rgba(227,161,160,1), rgba(227,161,160,0) 38%),
              radial-gradient(circle at 62% 36%, rgba(255,194,122,.95), rgba(255,194,122,0) 30%),
              radial-gradient(circle at 26% 46%, rgba(160,110,190,.9), rgba(160,110,190,0) 30%),
              radial-gradient(circle at 60% 78%, rgba(120,140,220,.9), rgba(120,140,220,0) 40%);
  filter: blur(10px); animation: swirl 26s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 30% 22%, rgba(243,234,223,.22), transparent 28%);
  box-shadow: inset 0 0 16px 3px rgba(225,235,255,.35), inset 0 0 2px 1px rgba(243,234,223,.6); }
@keyframes breathe { 0%, 100% { transform: scale(.8); opacity: .9; } 33%, 50% { transform: scale(1.06); opacity: 1; } }
@keyframes morph {
  0%, 100% { border-radius: 42% 58% 60% 40% / 54% 40% 60% 46%; }
  25% { border-radius: 60% 40% 44% 56% / 40% 60% 42% 58%; }
  50% { border-radius: 38% 62% 56% 44% / 60% 44% 56% 40%; }
  75% { border-radius: 55% 45% 38% 62% / 46% 56% 44% 54%; } }
@keyframes swirl { to { transform: rotate(360deg); } }
.card__tag { font: 500 12px/17px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.card__tag--amber { color: var(--lantern-text); } .card__tag--rose { color: var(--rose-text); }
.card__title { font: 600 24px/30px var(--font-display); color: var(--ink); margin-bottom: 12px; }
.card__body { font-size: 15px; line-height: 24px; color: var(--ink-muted); }

/* How it feels */
.feels { background: var(--surface); padding: 96px 0 120px; overflow: hidden; }
.feels__head { text-align: center; }
.feels__head .eyebrow { margin-bottom: 22px; }
.feels__head .body-lg { max-width: 620px; margin: 20px auto 0; line-height: 29px; }
.feels__stage { position: relative; height: 690px; margin-top: 34px; }
.feels__tiles { position: absolute; left: 50%; top: 330px; width: 1440px; max-width: none; height: auto; transform: translate(-50%, -50%); }
.feels__glow { position: absolute; left: 50%; top: 330px; width: 760px; height: 760px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(185,178,204,.16), transparent); }
.feels__phone { position: absolute; left: 50%; top: 30px; width: 290px; height: auto; max-width: none; transform: translateX(-50%); border-radius: 48px; box-shadow: 0 30px 60px rgba(5,5,20,.6); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-top: 72px; width: min(1080px, 100% - 32px); }
.steps__num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-raised); font: 500 12px/1 var(--font-sans); color: var(--rose-text); margin-bottom: 16px; }
.steps h3 { font: 600 20px/27px var(--font-display); color: var(--ink); margin-bottom: 8px; }
.steps p { font-size: 15px; line-height: 23px; color: var(--ink-muted); }

/* The path goes on */
.soon { background: var(--surface-deep); padding: 60px 0 80px; }
.soon__inner { display: grid; grid-template-columns: 490px 1fr; gap: 90px; align-items: center; }
.soon__art { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.soon__art img { width: 100%; height: auto; }
.soon__art figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 30px 32px; font: 600 22px/29px var(--font-display); color: var(--ink); background: linear-gradient(to top, rgba(14,16,34,.66), transparent); }
.soon__copy .eyebrow { margin-bottom: 20px; }
.soon__copy .body-lg { margin-top: 20px; max-width: 600px; }
.places { display: grid; gap: 10px; margin-top: 28px; max-width: 620px; }
.places li { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: var(--radius-md); background: var(--surface-raised); }
.places__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lavender-mist); opacity: .6; flex: none; }
.places .is-lit .places__dot { background: var(--lantern); opacity: 1; box-shadow: var(--glow); }
.places strong { display: block; font: 300 16px/20px var(--font-sans); color: var(--ink); }
.places small { display: block; font: 500 12px/17px var(--font-sans); color: var(--ink-muted); margin-top: 2px; }

/* No pressure */
.rest { position: relative; min-height: 600px; display: grid; align-items: center; background: var(--surface); overflow: hidden; }
.rest__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.rest__copy { position: relative; z-index: 2; }
/* Fades in from the deeper "soon" section above so there's no edge. Stops above the lamp and the man's hair (about 13% down the photo). */
.rest::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: clamp(64px, 6.5vw, 120px); pointer-events: none;
  background: linear-gradient(to bottom, var(--surface-deep) 0%, rgba(19,20,42,.7) 28%, rgba(19,20,42,.36) 55%, rgba(19,20,42,.12) 80%, rgba(19,20,42,0) 100%); }
.rest__copy .h2 { line-height: 61px; }
.rest__copy .body-lg { margin-top: 28px; line-height: 29px; }

/* Waitlist */
.join { position: relative; overflow: hidden; background: var(--surface); padding: 96px 0 120px; text-align: center; }
.join__glow { position: absolute; left: 50%; top: 52%; width: 900px; height: 600px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(227,161,160,.14), rgba(185,178,204,.06) 55%, transparent); }
.join__inner { position: relative; display: grid; justify-items: center; }
.join .display { line-height: 70px; }
.join .body-lg { max-width: 560px; margin: 28px auto 40px; line-height: 29px; }

/* Questions */
.faq { background: var(--surface-deep); padding: 100px 0 120px; }
.faq__inner { display: grid; grid-template-columns: 1fr 640px; gap: 64px; }
.faq__inner .eyebrow { margin-bottom: 20px; }
.faq__list { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font: 600 20px/27px var(--font-display); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 24px/1 var(--font-sans); color: var(--ink-muted); transition: transform .4s ease; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 48px 24px 0; font-size: 15px; line-height: 25px; color: var(--ink-muted); }
.faq details a { color: var(--ink); text-underline-offset: 3px; }

/* Footer */
.footer { background: var(--surface-deep); border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 14px; color: var(--ink-muted); }
.footer__top { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.footer__top .brand { margin-bottom: 14px; }
.footer__top p { line-height: 22px; }
.footer__top-link { font-size: 13px; color: var(--ink); text-decoration: none; }
.footer__bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; font-size: 12px; }
.footer__bottom nav { display: flex; gap: 48px; }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover, .footer__top-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Hero float: slow, a few pixels */
.hero__float { animation: float 9s ease-in-out infinite alternate; }
/* The loop has its own slow camera drift. Floating it as well made two motions at different
   frame rates, which read as stutter, so the float only runs on the still. */
.hero.is-playing .hero__float { animation: none; }
/* Where the 3D will take over, the opening still holds still, so it lines up with the island's first frame. */
@media (min-width: 761px) and (pointer: fine) { .hero__float { animation: none; } }
/* Live 3D island: replaces the opening still (its own first frame). It bobs by itself, so no float. */
.hero__3d { position: absolute; inset: -160px 0 0; opacity: 0; cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%), linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(86% + 22.4px), transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 26%), linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(86% + 22.4px), transparent 100%); mask-composite: intersect; }
.hero__3d:active { cursor: grabbing; }
.hero__3d canvas { display: block; width: 100%; height: 100%; }
.hero.has-3d .hero__3d { opacity: 1; }
/* The still is the island's own first frame, so the swap is instant: a crossfade would show two
   slightly different frames at once while the island starts to move. */
.hero.has-3d .hero__float { animation: none; visibility: hidden; }
/* Let drags reach the island through the empty parts of the hero's content box. */
.hero.has-3d .hero__inner { pointer-events: none; }
.hero.has-3d .hero__copy, .hero.has-3d .hero__note, .hero.has-3d .hero__try { pointer-events: auto; }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* Tablet */
@media (max-width: 1100px) {
  .nav__links { gap: 24px; }
  .cards { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .inside__head, .faq__inner { grid-template-columns: 1fr; gap: 24px; }
  .soon__inner { grid-template-columns: 1fr 1fr; gap: 48px; }
  .hero__island { left: 47.5%; }
  .hero__try { left: calc(47.5vw + min(38.5vw, 630px) - (100vw - 100%) / 2); }
}

/* Phone */
@media (max-width: 760px) {
  .select select { font-size: 14px; padding-left: 20px; padding-right: 44px; }
  .select::after { right: 20px; }
  html { scroll-padding-top: 72px; }
  :root { --nav-h: 72px; }
  .nav__inner { height: 72px; }
  .nav__links { display: none; }
  .brand img { width: 32px; height: 32px; }
  .brand__word { font-size: 22px; }
  .nav__cta { min-height: 44px; padding: 0 16px; }
  .display { font-size: 40px; line-height: 46px; }
  .h2 { font-size: 36px; line-height: 42px; }
  .h3 { font-size: 32px; line-height: 38px; }
  .winddown .h2 { font-size: 36px; line-height: 42px; }
  .lead { font-size: 17px; line-height: 28px; }

  .hero, .hero__inner { min-height: 0; }
  .hero__inner { padding-top: calc(var(--nav-h) + min(70vw, 380px)); padding-bottom: 48px; }
  .hero__island { left: -20%; top: var(--nav-h); width: 140vw; }
  /* The phone video has its own sky: fade its top edge into the page so no band shows under the nav. */
  .hero__float { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 86%, transparent 100%); }
  .hero__shade { background: linear-gradient(to bottom, rgba(27,29,58,0) 0, rgba(27,29,58,0) min(48vw, 260px), rgba(27,29,58,.9) min(82vw, 440px), var(--night-indigo) 100%); }
  .hero__copy .lead, .hero__copy .waitlist { margin-top: 24px; }
  .hero__note { position: static; margin-top: 32px; }
  /* Try the island sits right under the island, above the title. */
  .hero__inner { display: flex; flex-direction: column; }
  .hero__try { position: static; transform: none; order: -1; justify-items: start; margin: 0 0 40px; }
  /* Email, then the optional question, then the button last. */
  .waitlist__row { display: contents; }
  .waitlist__label { order: 1; } .waitlist__row .field { order: 2; } .waitlist .select { order: 3; } .waitlist .cf-turnstile { order: 3; }
  .waitlist__row .btn { order: 4; width: 100%; margin-top: 4px; }
  .waitlist__privacy { order: 5; } .waitlist__status { order: 6; }

  .winddown { min-height: 0; }
  .winddown__inner { padding-block: 96px; }
  .inside { padding: 80px 0; }
  .inside__head { margin-bottom: 40px; }
  .cards { grid-template-columns: 1fr; }
  .feels { padding: 80px 0; }
  .feels__stage { height: 560px; }
  .feels__tiles, .feels__glow { top: 270px; }
  .feels__phone { width: 240px; border-radius: 40px; }
  .feels__tiles { width: 1120px; }
  .steps { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .soon { padding: 64px 0; }
  .soon__inner { grid-template-columns: 1fr; gap: 32px; }
  .rest { min-height: 0; align-items: end; padding-top: 68vw; }
  .rest__photo img { height: 70vw; bottom: auto; object-position: 72% center; }
  .rest__copy { padding: 24px 0 72px; }
  .rest::before { height: 11vw; }
  /* the photo sits above the copy on phones: melt its bottom edge into the section so the label doesn't sit on a hard line */
  .rest::after { content: ""; position: absolute; left: 0; right: 0; top: 46vw; height: 24.5vw; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(27,29,58,0), rgba(27,29,58,.55) 55%, var(--surface)); }
  .rest__copy br { display: none; }
  .join { padding: 80px 0; }
  .join .display { line-height: 46px; }
  .faq { padding: 72px 0; }
  .faq details p { padding-right: 0; }
  .footer__top, .footer__bottom { flex-direction: column; }
  .footer__bottom nav { gap: 32px; }
}

/* Reduced motion: still lights, still island, no smooth scroll */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lights i, .hero__float { animation: none; }
  .orb { animation: glow 12s ease-in-out infinite; transform: none; }
  .orb::before { animation: none; }
  @keyframes glow { 0%, 100% { opacity: .55; } 40%, 55% { opacity: 1; } }
  .hero__video { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Simple pages: joined, try again, privacy, 404 */
.simple__main { min-height: calc(100vh - 96px); display: grid; align-content: center; justify-items: start; gap: 24px; padding-block: 96px; max-width: 720px; }

/* Privacy and other long text pages */
.legal { max-width: 720px; padding-block: 72px 96px; }
.legal > * + * { margin-top: 16px; }
.legal h2 { margin-top: 48px; font-size: 24px; line-height: 1.3; }
.legal p, .legal li { color: var(--ink-muted); line-height: 1.7; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul { padding-left: 1.2em; display: grid; gap: 8px; }
.legal a:not(.btn) { color: var(--ink); }
.legal__date { font-size: 14px; }
.legal .btn { margin-top: 48px; }
.need { background: rgba(255,194,122,.16); color: var(--lantern-text); padding: 0 4px; border-radius: 4px; }