/* Astonik home page. Loaded after site.css, on the home page only — the other
   pages (fit, legal, delete-account, 404) never read a line of this.

   🚨 THE SAME TWO RULES AS site.css: type is `rem`, breakpoints are `em`, and
   every viewport-scaled size is bounded by HEIGHT as well as width
   (`min(<vw>, <vh>)`), because a laptop is wide but short. Pictures, hairlines
   and radii stay px.

   🚨 MOTION HAS ONE CONTRACT HERE: an element's BASE style is the finished
   picture, and its keyframes supply where it starts. site.css turns every
   animation off for prefers-reduced-motion, and with scripts off nothing adds
   the classes that start the scroll-triggered ones — both of those must show a
   whole page, not an empty sky. The "not yet" states that wait for a scroll
   are written under `.js … :not(.is-in)`, so they only exist when a script is
   there to lift them. */

.home {
  --deep: #07081A;            /* the ground the page stands on (the hero's near hill) */
  --deep-2: #0C0D26;
  --sky-top: #05060F;
  --indigo: #1A1947;          /* the app icon's sky */
  --indigo-2: #2C2762;
  --lamp: #F6D57F;
  --paper: #F5EFE3;
  --ease-back: cubic-bezier(.34, 1.5, .64, 1);
  background: var(--deep);
}

/* ============================================================ HERO ======= */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  /* 92, not 100: at 1366×768 the facts strip shows under the fold, which is
     the reason to scroll. The 54rem cap keeps a 1440p monitor from getting a
     wall of sky. */
  min-height: min(92svh, 54rem);
  display: flex; align-items: center;
  padding: clamp(6rem, 13vh, 8.5rem) 0 clamp(3.5rem, 9vh, 6rem);
  background: var(--sky-top);
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  column-gap: clamp(24px, 4vw, 64px);
}
.hero-words { min-width: 0; }
.hero-title {
  font-size: clamp(2.75rem, min(6.3vw, 8.6vh), 5.375rem);
  line-height: .98; letter-spacing: -.035em; max-width: 14ch;
  text-shadow: 0 2px 30px rgba(5, 6, 15, .55);
}
.hero-title em { font-style: italic; color: var(--gold-sky); }
/* Each word rises out of its own slot. The slot's padding and matching negative
   margin give Fraunces' italic overhang and descenders room inside the clip. */
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .06em .16em; margin: -.08em -.06em -.16em; }
.hero-title .w > span { display: inline-block; animation: word-up 1.15s var(--ease) both; }
.wd1 { animation-delay: .12s; } .wd2 { animation-delay: .19s; } .wd3 { animation-delay: .26s; }
.wd4 { animation-delay: .33s; } .wd5 { animation-delay: .46s; } .wd6 { animation-delay: .53s; }
.wd7 { animation-delay: .6s; } .wd8 { animation-delay: .67s; } .wd9 { animation-delay: .74s; }
@keyframes word-up { from { transform: translateY(112%) rotate(4deg); } }
.hero .lead { max-width: 38ch; color: rgba(246, 241, 230, .8); text-shadow: 0 1px 18px rgba(5, 6, 15, .7); }
.hero-in { animation: rise 1s var(--ease) both; }
.hi-1 { animation-delay: .05s; } .hi-3 { animation-delay: .7s; } .hi-4 { animation-delay: .86s; } .hi-5 { animation-delay: 1s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.store-note { margin: clamp(14px, 2.2vh, 20px) 0 0; font-size: 0.84375rem; color: var(--cream-faint); display: flex; align-items: center; gap: 8px; }
.store-note svg { width: 1rem; height: 1rem; opacity: .8; }

/* ---------- the actions: sentences you can act on, not pills ----------
   🚨 "Will it help?" is DESCRIPTIVE TEXT (founder 2026-09-26: "keep will it
   help like descriptive text, not a big one, so maintain visual hierarchy
   everywhere"). The headings lead every screen; the fit check is the gold
   sentence under them, with its own name in cream so it still reads as a
   thing, and a hairline underline and an arrow so it still reads as a link.
   It keeps a thumb-sized target (min-height) without looking like a button. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 30px; margin-top: clamp(18px, 3.4vh, 28px); }
.hero-actions .link-cta { font-weight: 700; }

/* The hero's three points (founder 2026-09-26: "shorten it, or better do it
   pointwise"). Short lines, each marked with the logo's four-point star. */
.hero-points { list-style: none; margin: clamp(16px, 2.8vh, 24px) 0 0; padding: 0; display: grid; gap: clamp(8px, 1.4vh, 12px); }
.hero-points li {
  position: relative; padding-left: 1.75rem;
  font: 400 clamp(1.0625rem, min(1.4vw, 2.3vh), 1.1875rem)/1.45 var(--sans); color: rgba(246, 241, 230, .9);
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(5, 6, 15, .7);
}
.hero-points li::before {
  content: ''; position: absolute; left: 0; top: .28em; width: .9rem; height: .9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 5.6 5.4 10.3 11 11-5.6.7-10.3 5.4-11 11-.7-5.6-5.4-10.3-11-11 5.6-.7 10.3-5.4 11-11z' fill='%23EFD394'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* A native underline, so a link that wraps is underlined line by line. The
   last word and its arrow never part (.nw). Vertical padding makes the target
   thumb-sized without moving a single line of text. */
.link-cta, .link-quiet {
  padding: .55rem 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .42em;
  transition: text-decoration-color .25s, color .2s;
}
.link-cta { font: 600 1.0625rem/1.5 var(--sans); color: var(--gold-sky); text-decoration-color: rgba(239, 211, 148, .42); }
.link-cta b { font-weight: 700; color: var(--cream); }
.link-quiet { font: 600 0.96875rem/1.5 var(--sans); color: var(--cream-dim); text-decoration-color: rgba(246, 241, 230, .24); }
.link-cta:hover { text-decoration-color: var(--gold-sky); }
.link-quiet:hover { color: var(--cream); text-decoration-color: var(--cream); }
.link-cta .nw, .link-quiet .nw { white-space: nowrap; }
.link-cta .arr, .link-quiet .arr { display: inline-block; margin-left: .4em; transition: transform .3s var(--ease); }
.link-cta:hover .arr, .link-quiet:hover .arr { transform: translateX(4px); }
.hero-actions .link-film { min-height: 2.75rem; }

/* The quiet second action: a link with a drawn play ring, never a second pill. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 3.25rem; padding: 0 4px;
  font: 700 0.96875rem/1.2 var(--sans); color: var(--cream); text-decoration: none;
  transition: color .2s;
}
.link-arrow:hover { color: var(--gold-sky); }
.link-film svg { width: 1.625rem; height: 1.625rem; flex: none; color: var(--gold-sky); transition: transform .3s var(--ease); }
.link-film:hover svg { transform: scale(1.1); }
/* A slow ring of light around the play mark, so the link reads as "press me"
   without becoming a second button. */
.link-film { position: relative; }
.link-film::before {
  content: ''; position: absolute; left: 4px; top: 50%; width: 1.625rem; height: 1.625rem; margin-top: -.8125rem;
  border-radius: 50%; border: 1.5px solid rgba(239, 211, 148, .7); opacity: 0; animation: ping 2.8s ease-out 2.4s infinite;
}
@keyframes ping { 0% { opacity: .9; scale: 1; } 70%, 100% { opacity: 0; scale: 1.9; } }

/* ---------- the phone ---------- */
.hero-device { position: relative; justify-self: end; margin-right: clamp(0px, 2vw, 32px); animation: phone-in 1.5s var(--ease) both .45s; }
/* 🚨 STILL, AND UPRIGHT. A screenshot that is tilted, bobbing or following the
   pointer is resampled every frame at fractional pixels and its small text goes
   soft (founder 2026-09-26: "the mobile pic is blurry"). Phones arrive, then hold. */
.hero-device .phone { position: relative; z-index: 1; width: min(18.5rem, 30vh); }
/* the phone's own light on the ground it stands on */
.hero-device::after {
  content: ''; position: absolute; left: 50%; bottom: -6%; width: 150%; height: 18%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(246, 213, 127, .26), rgba(246, 213, 127, .06) 45%, transparent 70%);
}
.hero-device::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(44, 39, 98, .55), transparent 62%);
}
@keyframes phone-in { from { opacity: 0; transform: translateY(40px) scale(.97); } }

/* ---------- the scene ---------- */
.scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* The app icon's sky (#0D0E27 → #1A1947 → #2C2762), with the glow on the horizon
   behind the summit and a Milky Way laid across it. */
.scene-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 30% 20% at 57% 62%, rgba(246, 213, 127, .2), transparent 72%),
    radial-gradient(ellipse 62% 30% at 55% 66%, rgba(141, 104, 199, .2), transparent 72%),
    linear-gradient(to bottom, #05060F 0%, #0B0C24 26%, #14143D 46%, #221F57 60%, #2C2762 68%, #1C1A4A 82%, #0E0D2B 100%);
}
.scene-sky::before {
  content: ''; position: absolute; left: -25%; right: -25%; top: -6%; height: 70%;
  transform: rotate(-16deg); transform-origin: 50% 50%;
  background:
    radial-gradient(ellipse 46% 17% at 56% 50%, rgba(206, 196, 255, .05), transparent 70%),
    radial-gradient(ellipse 26% 8% at 60% 51%, rgba(255, 236, 200, .035), transparent 70%);
}
.scene-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Fine grain over the night, so a long indigo gradient does not band on an
   8-bit screen. A data: image, which the CSP allows (img-src 'self' data:). */
.scene::after, .close-sky::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scene-layer { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.scene-mist { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.scene-mist i {
  position: absolute; left: -20%; width: 140%; height: 14%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(178, 168, 240, .13), transparent 72%);
  animation: mist 32s ease-in-out infinite alternate;
}
.scene-mist i:first-child { top: 60%; }
.scene-mist i:last-child { top: 68%; height: 10%; opacity: .8; animation-duration: 41s; animation-direction: alternate-reverse; }
@keyframes mist { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* Parallax: js/home.js writes --px (pointer, −1…1) and --sy (scroll, px) on the
   hero. Far things move least. `translate` for the entrance and `transform`
   for the parallax, so the two never fight over one property. */
/* The land layers move almost together (the trail ahead lives on the far layer
   and must stay joined to the tent on the near one); the stars carry the depth. */
.scene-stars { transform: translate3d(calc(var(--px, 0) * -5px), calc(var(--sy, 0) * .32px), 0); }
.scene-far { transform: translate3d(calc(var(--px, 0) * -7px), calc(var(--sy, 0) * .07px), 0); animation: land-in 1.8s var(--ease) both .1s; }
.scene-mist { transform: translate3d(calc(var(--px, 0) * -9px), calc(var(--sy, 0) * .06px), 0); }
.scene-near { transform: translate3d(calc(var(--px, 0) * -11px), calc(var(--sy, 0) * .06px), 0); animation: land-in 1.6s var(--ease) both .25s; }
@keyframes land-in { from { opacity: 0; translate: 0 36px; } }

/* The white star over the summit: breathes, and now and then catches the light. */
.sc-star { transform-box: fill-box; transform-origin: center; animation: star-in 1.4s var(--ease-back) both 2.1s; }
.sc-star-glow { animation: star-glow 5.5s ease-in-out 3.5s infinite; }
@keyframes star-in { from { opacity: 0; scale: .2; rotate: -80deg; } }
@keyframes star-glow { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.sc-rim { animation: fade-in 2s ease both 2.4s; }

/* The trail: the walked part draws itself up to the tent; the lights of the
   kept nights come on one by one behind it; the dark one stays dark. */
.sc-walk-reveal { stroke-dasharray: 1 1; stroke-dashoffset: 0; animation: walk 2.2s cubic-bezier(.45, 0, .25, 1) both .9s; }
@keyframes walk { from { stroke-dashoffset: 1; } }
.sc-kept, .sc-missed, .sc-next { transform-box: fill-box; transform-origin: center; }
.sc-kept { animation: light-on .7s var(--ease-back) both, glimmer 4.5s ease-in-out infinite; }
.sc-kept.d1 { animation-delay: 1.05s, 2.6s; } .sc-kept.d2 { animation-delay: 1.3s, 3.4s; } .sc-kept.d3 { animation-delay: 1.55s, 2.9s; }
.sc-kept.d5 { animation-delay: 2.05s, 3.8s; } .sc-kept.d6 { animation-delay: 2.3s, 3.1s; }
.sc-missed { animation: fade-in 1s ease both 1.8s; }
@keyframes light-on { from { opacity: 0; scale: .1; } }
@keyframes glimmer { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.sc-trail-ahead { animation: fade-in 1.6s ease both 2.6s; }
.sc-next { animation: light-on .6s var(--ease-back) both, twinkle 3.6s ease-in-out infinite; }
.sc-next.d1 { animation-delay: 2.9s, 3.5s; } .sc-next.d2 { animation-delay: 3.05s, 4.4s; } .sc-next.d3 { animation-delay: 3.2s, 3.9s; } .sc-next.d4 { animation-delay: 3.35s, 4.8s; }
@keyframes twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
@keyframes fade-in { from { opacity: 0; } }

/* Tonight's tent: the doorway lights, then flickers like a lamp inside. */
.sc-door { animation: door-on 1.2s ease both 2.45s, flicker 6s ease-in-out 4s infinite; }
.sc-halo { transform-box: fill-box; transform-origin: center; animation: halo-on 1.6s ease both 2.5s, breathe-halo 5s ease-in-out 4.2s infinite; }
.sc-spill, .sc-spill-ground { animation: fade-in 1.4s ease both 2.6s; }
@keyframes door-on { 0% { opacity: 0; } 30% { opacity: .9; } 40% { opacity: .35; } 55% { opacity: 1; } 65% { opacity: .7; } 100% { opacity: 1; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 42% { opacity: .9; } 46% { opacity: .97; } 71% { opacity: .86; } 74% { opacity: 1; } }
@keyframes halo-on { from { opacity: 0; scale: .4; } }
@keyframes breathe-halo { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.08; opacity: .8; } }

/* Fireflies. Four drift paths, eight flies, eight delays. */
.sc-fly { transform-box: fill-box; transform-origin: center; opacity: .9; animation: fly-1 11s ease-in-out infinite, blink 3.2s ease-in-out infinite backwards; }
.sc-fly.f2 { animation-name: fly-2, blink; animation-duration: 13s, 2.7s; }
.sc-fly.f3 { animation-name: fly-3, blink; animation-duration: 9.5s, 3.6s; }
.sc-fly.f4 { animation-name: fly-4, blink; animation-duration: 12s, 2.9s; }
.sc-fly.d1 { animation-delay: -1s, 3s; } .sc-fly.d2 { animation-delay: -3s, 3.4s; } .sc-fly.d3 { animation-delay: -5s, 3.8s; } .sc-fly.d4 { animation-delay: -7s, 4.1s; }
.sc-fly.d5 { animation-delay: -2s, 4.5s; } .sc-fly.d6 { animation-delay: -4s, 3.2s; } .sc-fly.d7 { animation-delay: -6s, 3.6s; } .sc-fly.d8 { animation-delay: -8s, 4.3s; }
@keyframes fly-1 { 0%, 100% { translate: 0 0; } 25% { translate: 22px -18px; } 50% { translate: 8px -34px; } 75% { translate: -16px -14px; } }
@keyframes fly-2 { 0%, 100% { translate: 0 0; } 30% { translate: -26px -10px; } 60% { translate: -8px -30px; } 80% { translate: 14px -12px; } }
@keyframes fly-3 { 0%, 100% { translate: 0 0; } 33% { translate: 18px 12px; } 66% { translate: -20px 4px; } }
@keyframes fly-4 { 0%, 100% { translate: 0 0; } 20% { translate: -12px -22px; } 55% { translate: 20px -30px; } 85% { translate: 6px -6px; } }
@keyframes blink { 0%, 100% { opacity: .1; } 40%, 60% { opacity: .75; } }

@media (max-width: 60em) {
  /* Stacked: the words, then the land as its own band below them. The sky and
     the stars still run behind both. The phone is left out here (see the
     comment in index.html). */
  .hero { display: block; min-height: 0; padding: 7rem 0 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-device { display: none; }
  .hero-words { padding-bottom: clamp(15.5rem, 68vw, 26rem); }
  .scene-layer, .scene-mist { top: auto; height: clamp(19rem, 84vw, 30rem); transform: none; }
  .scene-sky {
    background:
      radial-gradient(ellipse 60% 16% at 60% 80%, rgba(246, 213, 127, .18), transparent 72%),
      radial-gradient(ellipse 90% 26% at 55% 82%, rgba(141, 104, 199, .2), transparent 72%),
      linear-gradient(to bottom, #05060F 0%, #0B0C24 30%, #14143D 52%, #221F57 70%, #2C2762 78%, #1C1A4A 90%, #0E0D2B 100%);
  }
}

/* ============================================================ FACTS ====== */
.facts { position: relative; background: var(--deep); border-bottom: 1px solid rgba(246, 241, 230, .07); }
.facts-row {
  list-style: none; margin: 0 auto; padding-top: clamp(22px, 3.6vh, 34px); padding-bottom: clamp(22px, 3.6vh, 34px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(20px, 3vw, 44px);
}
.facts li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 14px; align-items: start; }
.fact-mark {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--gold-sky); background: rgba(237, 201, 103, .07); border: 1px solid rgba(237, 201, 103, .22);
}
.fact-mark svg { width: 1.25rem; height: 1.25rem; }
.fact-mark svg * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease) .25s; }
.js .facts li:not(.is-in) .fact-mark svg * { stroke-dashoffset: 1; }
.facts b { display: block; font: 700 0.875rem/1.3 var(--sans); color: var(--cream); }
.facts span { display: block; margin-top: 3px; font-size: 0.84375rem; line-height: 1.5; color: var(--cream-dim); }

/* ============================================================ FILM ======= */
.film { position: relative; overflow: hidden; padding: var(--section-y) 0; background: var(--deep); }
.film-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 55% at 26% 50%, rgba(44, 39, 98, .75), transparent 70%),
    radial-gradient(ellipse 24% 30% at 26% 56%, rgba(246, 213, 127, .1), transparent 70%);
}
/* 🚨 The screen's column is sized EXPLICITLY. As `auto` with the screen at
   `width: min(…, 100%)`, the percentage resolved against the video's own
   1080px and the words were squeezed to one word per line. */
.film-grid {
  position: relative; display: grid;
  grid-template-columns: min(580px, 72vh) minmax(0, 1fr);
  grid-template-areas: 'stage head' 'stage rest';
  column-gap: clamp(32px, 6vw, 96px);
}
.film-head { grid-area: head; align-self: end; }
.film-head .lead { max-width: 36ch; }
.film-stage { grid-area: stage; position: relative; width: 100%; align-self: center; }
.film-rest { grid-area: rest; align-self: start; }
.film-rest .cta-row { margin-top: clamp(16px, 2.6vh, 24px); }

/* A ring of light turns slowly round the screen. @property makes the angle
   animatable; without it the ring simply stands still. */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.film-frame {
  position: relative; padding: 1.5px; border-radius: calc(var(--r-card) + 1.5px);
  background: conic-gradient(from var(--spin), rgba(246, 213, 127, .05), rgba(246, 213, 127, .7) 12%, rgba(185, 166, 242, .4) 22%, rgba(246, 213, 127, .05) 36%, rgba(246, 213, 127, .05) 60%, rgba(185, 166, 242, .45) 76%, rgba(246, 213, 127, .05) 88%);
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95), 0 0 80px -30px rgba(246, 213, 127, .25);
  animation: spin 14s linear infinite;
}
@keyframes spin { to { --spin: 360deg; } }
.film-screen {
  position: relative; z-index: 1; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r-card); background: #131A26;
}
.film-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Controls sit ON the picture, top right — the one corner the film keeps
   clear from its first frame to its last — on dark glass, always visible. */
.film-controls { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; pointer-events: none; }
.film-btn {
  pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(246, 241, 230, .26); color: var(--cream);
  background: rgba(5, 7, 14, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 0.8125rem/1 var(--sans); transition: background-color .2s, border-color .2s;
}
.film-btn:hover { background: rgba(5, 7, 14, .82); border-color: rgba(246, 241, 230, .5); }
.film-btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.film-toggle { padding: 0; }
.film-btn .i-play, [data-film]:not(.is-playing) .film-btn .i-pause { display: none; }
[data-film]:not(.is-playing) .film-btn .i-play { display: block; }
.film-btn .i-sound, [data-film]:not(.is-muted) .film-btn .i-muted { display: none; }
[data-film]:not(.is-muted) .film-btn .i-sound { display: block; }
/* A cream disc, not gold: gold on this page is the one primary action. */
.film-start {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 5rem; height: 5rem; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(246, 241, 230, .94); color: var(--night);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7), 0 0 0 10px rgba(246, 241, 230, .12);
  transition: transform .25s var(--ease), opacity .25s;
}
.film-start:hover { transform: translate(-50%, -50%) scale(1.06); }
.film-start svg { width: 2rem; height: 2rem; margin-left: 4px; }
[data-film].is-playing .film-start { opacity: 0; pointer-events: none; }
.film-progress { display: none; }
.js .film-progress { display: block; }
.film-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(5, 7, 14, .4); }
.film-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-b), var(--gold-sky)); transform-origin: left; transform: scaleX(0); transition: transform .3s linear; }

/* The chapters: four real buttons that seek the film and light up with it. */
.chapters { list-style: none; padding: 0; margin: clamp(20px, 3.4vh, 30px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 34rem; }
.chapters button {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 3rem; padding: 8px 14px;
  border-radius: 14px; border: 1px solid rgba(246, 241, 230, .14); background: rgba(246, 241, 230, .03);
  color: var(--cream-dim); font: 600 0.875rem/1.25 var(--sans); text-align: left; cursor: pointer;
  transition: border-color .3s, background-color .3s, color .3s;
}
.chapters button:hover { border-color: rgba(246, 241, 230, .32); color: var(--cream); }
.chapters b {
  flex: none; width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(246, 241, 230, .08); color: var(--cream); font: 700 0.75rem/1 var(--sans);
  transition: background .3s, color .3s;
}
.chapters button.is-now { border-color: rgba(237, 201, 103, .55); background: rgba(237, 201, 103, .09); color: var(--cream); }
.chapters button.is-now b { background: linear-gradient(160deg, var(--gold-a), var(--gold-b)); color: var(--gold-ink); }

/* the transcript: the film's text alternative, and a quiet one */
.film-transcript { margin-top: clamp(16px, 2.8vh, 26px); border-top: 1px solid var(--cream-line); max-width: 34rem; }
.film-transcript summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 2px; cursor: pointer; list-style: none;
  font: 600 1rem/1.4 var(--sans); color: var(--cream-dim);
}
.film-transcript summary::-webkit-details-marker { display: none; }
.film-transcript summary:hover { color: var(--cream); }
.film-transcript .q-mark::before, .film-transcript .q-mark::after { background: var(--cream-dim); }
.film-transcript[open] .q-mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.film-transcript ol { margin: 0; padding: 0 0 6px 1.25rem; display: grid; gap: 10px; font-size: 0.9375rem; line-height: 1.6; color: var(--cream-dim); }
.film-transcript li::marker { color: var(--gold-sky); font-weight: 700; }
.film-transcript b { color: var(--cream); font-weight: 700; }
.film-transcript q { font-style: italic; quotes: '“' '”'; }
@media (max-width: 56.25em) {
  .film-grid { grid-template-columns: 1fr; grid-template-areas: 'head' 'stage' 'rest'; }
  .film-stage { justify-self: center; width: min(580px, 72vh, 100%); margin-top: clamp(28px, 5vh, 44px); }
  .film-rest { justify-self: center; width: min(580px, 100%); }
}
@media (max-width: 38.75em) {
  .film-controls { top: 10px; right: 10px; }
  .film-btn { padding: 0; }
  .film-btn span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .film-start { width: 4rem; height: 4rem; }
  .film-start svg { width: 1.625rem; height: 1.625rem; }
  .chapters { grid-template-columns: 1fr; }
}

/* ============================================================ PHONES ===== */
.phone {
  aspect-ratio: 780 / 1688;
  padding: 8px; border-radius: 44px;
  background: linear-gradient(150deg, #34353c, #0c0d11 45%, #1d1e24);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .09) inset, 0 0 0 1px rgba(0, 0, 0, .6);
}
.phone > img { width: 100%; height: 100%; border-radius: 36px; object-fit: cover; background: var(--night-2); }
.day .phone { box-shadow: 0 50px 90px -45px rgba(26, 36, 60, .55), 0 0 0 1px rgba(255, 255, 255, .09) inset, 0 0 0 1px rgba(0, 0, 0, .5); }
.screen-layer { position: absolute; inset: 8px; border-radius: 36px; overflow: hidden; opacity: 0; transition: opacity .6s var(--ease); }
.screen-layer.is-on { opacity: 1; }
.screen-layer img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- wave edges ----------
   Where a paper or pearl section meets the night above it, its top edge is a
   gentle hand-drawn wave rather than a ruler line. Two mask layers: the wave for
   the first 26px, a plain block for the rest. Without mask support it is simply
   square, and the 26px overlap only covers the section above's bottom padding. */
.wave-top {
  margin-top: -26px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V14C110 3 230 2 360 11s250 15 370 5 245-15 360-6 250 14 350 4V26z'/%3E%3C/svg%3E") top / 100% 26px no-repeat,
                linear-gradient(#000 0 0) 0 25px / 100% calc(100% - 25px) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V14C110 3 230 2 360 11s250 15 370 5 245-15 360-6 250 14 350 4V26z'/%3E%3C/svg%3E") top / 100% 26px no-repeat,
        linear-gradient(#000 0 0) 0 25px / 100% calc(100% - 25px) no-repeat;
}

/* ============================================================ TRAIL MAP == */
/* No overflow rule here: `overflow: hidden` on this section makes it the sticky
   container and the phone stops following the page. The contour image is
   inset: 0 and never overflows, so nothing needs clipping. */
.trail-sec { background: linear-gradient(180deg, #F3EDE0, var(--paper) 30%, #F7F2E8); }
.trail-sec .topo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: .9; }
.trail-sec .wrap { position: relative; }
.trail-sec .lead { color: #4A4436; }
.trail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: clamp(32px, 7vw, 110px); }
.trail-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 4.25rem; }
/* The trail itself: a hand-drawn wave of footsteps down the left edge, then a
   gold copy of it clipped to how far you have scrolled. data: URIs are images
   as far as the CSP is concerned (`img-src 'self' data:`). */
.trail-steps::before, .trail-steps::after {
  content: ''; position: absolute; left: 1.25rem; width: 1.5rem; top: var(--line-top, .6rem); bottom: var(--line-bottom, 2rem);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='56'%3E%3Cpath d='M12 0C4 14 4 14 12 28S20 42 12 56' fill='none' stroke='%237E8BA0' stroke-width='2' stroke-linecap='round' stroke-dasharray='0.1 8'/%3E%3C/svg%3E") repeat-y center top;
}
.trail-steps::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='56'%3E%3Cpath d='M12 0C4 14 4 14 12 28S20 42 12 56' fill='none' stroke='%23B8892B' stroke-width='3.2' stroke-linecap='round' stroke-dasharray='0.1 8'/%3E%3C/svg%3E");
  clip-path: inset(0 0 calc(100% - var(--trail, 1) * 100%) 0);
}
.trail-step {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(16rem, 58vh, 32rem);
}
.trail-body { position: relative; max-width: 30rem; }
.trail-kicker { margin: 0 0 10px; font: 700 0.71875rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #8E6B1E; }
.trail-step h3 { font-size: clamp(1.625rem, min(2.8vw, 4vh), 2.25rem); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
.trail-body > p:not(.trail-kicker) { margin: 12px 0 0; font-size: 1.0625rem; line-height: 1.65; color: #4A4436; }
.trail-body b { color: var(--ink); }
/* Each stop's mark sits on the trail line, level with the kicker. */
.trail-mark {
  position: absolute; left: -3.9rem; top: -.55rem; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center; background: #FBF7EE; border: 2px solid #B8892B;
  box-shadow: 0 0 0 6px rgba(184, 137, 43, .14);
  transition: border-color .4s, box-shadow .4s, background .4s;
}
.trail-mark i { width: .75rem; height: .75rem; border-radius: 50%; background: linear-gradient(160deg, var(--gold-a), var(--gold-b)); transition: transform .5s var(--ease-back), opacity .4s; }
.trail-mark.is-camp { width: 2.75rem; height: 2.75rem; left: -4.15rem; top: -.8rem; color: #DCCBA8; background: #1A1947; border-color: #1A1947; }
.trail-mark.is-camp svg { width: 1.75rem; height: auto; margin-top: -2px; }
.camp-door { fill: #F6D57F; transition: opacity .5s; }
/* With the script running, stops you have not reached yet are hollow rings. */
.trail.is-live .trail-step:not(.is-past):not(.is-now) .trail-mark { border-color: #A7B1C0; box-shadow: none; }
.trail.is-live .trail-step:not(.is-past):not(.is-now) .trail-mark i { transform: scale(0); opacity: 0; }
.trail.is-live .trail-step:not(.is-past):not(.is-now) .camp-door { opacity: .15; }
.trail.is-live .trail-step:not(.is-past):not(.is-now) .trail-mark.is-camp { background: #2E3350; border-color: #2E3350; }
.trail.is-live .trail-step.is-now .trail-mark { animation: mark-now 2.4s ease-in-out infinite; }
@keyframes mark-now { 0%, 100% { box-shadow: 0 0 0 6px rgba(184, 137, 43, .16); } 50% { box-shadow: 0 0 0 12px rgba(184, 137, 43, .06); } }
.trail.is-live .trail-step:not(.is-now) .trail-body { opacity: .8; }
.trail-body { transition: opacity .5s; }

/* The phone stays put while the stops scroll past it. */
.trail-stage { position: relative; }
.trail-sticky { position: sticky; top: max(5.5rem, calc(50vh - min(19rem, 35vh) * 1.08 - 1rem)); display: grid; justify-items: center; }
.trail-sticky .phone { position: relative; width: min(19rem, 35vh); box-shadow: 0 60px 90px -50px rgba(50, 38, 12, .55), 0 0 0 1px rgba(255, 255, 255, .09) inset, 0 0 0 1px rgba(0, 0, 0, .5); }
.trail-caption { margin: 18px 0 0; font: 700 0.75rem/1 var(--sans); letter-spacing: .2em; color: #8E6B1E; }
.trail-shot { display: none; margin: 0; }
@media (max-width: 56.25em) {
  .trail { grid-template-columns: 1fr; }
  .trail-stage { display: none; }
  .trail-step { min-height: 0; padding: 0 0 clamp(42px, 8vh, 64px); }
  .trail-steps::before, .trail-steps::after { top: .6rem; bottom: 2rem; }
  .trail-shot { display: block; margin-top: 22px; }
  .trail-shot .phone { width: min(13.5rem, 62vw); }
  .trail.is-live .trail-step:not(.is-now) .trail-body { opacity: 1; }
}
@media (max-width: 38.75em) {
  .trail-steps { padding-left: 3.25rem; }
  .trail-steps::before, .trail-steps::after { left: .75rem; }
  .trail-mark { left: -3.4rem; }
  .trail-mark.is-camp { left: -3.65rem; }
}

/* ============================================================ BAND ======= */
.band { position: relative; overflow: hidden; padding: clamp(84px, min(13vw, 15vh), 160px) 0; text-align: center; background: var(--deep); }
.band-sky {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 56% at 50% 34%, rgba(44, 39, 98, .85), transparent 72%),
    radial-gradient(ellipse 26% 22% at 50% 30%, rgba(246, 213, 127, .1), transparent 70%);
}
.band .wrap { position: relative; }
.week { max-width: 47.5rem; margin: 0 auto clamp(16px, 3vh, 30px); }
@media (max-width: 38.75em) { .week { margin-inline: calc(-1 * var(--gutter)); } }
.week svg { display: block; width: 100%; height: auto; overflow: visible; }
.wk-days text { font: 700 20px/1 var(--sans); letter-spacing: .1em; opacity: .5; }
.wk-days .wk-day-missed { opacity: .28; }
.wk-night, .wk-on circle { transform-box: fill-box; transform-origin: center; }
.js .week:not(.is-in) .wk-night, .js .week:not(.is-in) .wk-on circle { opacity: 0; }
.week.is-in .wk-kept { animation: night-pop .8s var(--ease-back) both; }
.week.is-in .wk-kept use { animation: glimmer 4.2s ease-in-out infinite; }
.week.is-in .n1 { animation-delay: .15s; } .week.is-in .n2 { animation-delay: .4s; } .week.is-in .n3 { animation-delay: .65s; }
.week.is-in .n4 { animation-delay: .9s; } .week.is-in .n6 { animation-delay: 1.65s; } .week.is-in .n7 { animation-delay: 1.9s; }
.week.is-in .n1 use { animation-delay: 1.6s; } .week.is-in .n2 use { animation-delay: 2.4s; } .week.is-in .n3 use { animation-delay: 2s; }
.week.is-in .n4 use { animation-delay: 2.9s; } .week.is-in .n6 use { animation-delay: 2.2s; } .week.is-in .n7 use { animation-delay: 3.1s; }
.week.is-in .wk-missed { animation: fade-in 1.2s ease both 1.2s; }
.week.is-in .n8 { animation: fade-in .6s ease both 2.2s; } .week.is-in .n9 { animation: fade-in .6s ease both 2.4s; } .week.is-in .n10 { animation: fade-in .6s ease both 2.6s; }
@keyframes night-pop { from { opacity: 0; scale: .15; translate: 0 18px; } }
.band blockquote { margin: 0 auto; max-width: 20ch; font: 600 clamp(1.875rem, min(4.8vw, 6.8vh), 3.5rem)/1.1 var(--serif); letter-spacing: -.02em; }
.band blockquote em { font-style: italic; color: var(--gold-sky); }
.band p { margin: 26px auto 0; max-width: 46ch; color: var(--cream-dim); font-size: 1.0625rem; }

/* ============================================================ USE CASES == */
.uses { background: radial-gradient(ellipse 60% 40% at 90% 0%, rgba(247, 238, 214, .9), transparent 70%), var(--pearl); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* 🚨 Flex column so `.card-night` can take `margin-top: auto`: the example
   lines then sit on ONE baseline across a row of cards whose titles wrap to
   different heights. */
.card {
  display: flex; flex-direction: column;
  padding: 10px 10px clamp(20px, 2.2vw, 26px); border-radius: 28px;
  background: #fff; border: 1px solid var(--ink-line);
  transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: rgba(58, 79, 104, .35); box-shadow: 0 30px 60px -36px rgba(26, 36, 60, .45); }
.card h3 { margin: 0 14px; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; }
.card > p { margin: 10px 14px 0; font-size: 0.96875rem; color: var(--ink-dim); }
.card > .card-night { margin-top: auto; }
.card > .card-night { padding-top: 15px; border-top: 1px solid var(--ink-line); font-size: 0.9375rem; line-height: 1.5; color: var(--ink); }
.card h3 + p { margin-bottom: clamp(16px, 2vh, 22px); }
.card-night b { display: block; margin-bottom: 6px; font: 700 0.6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--deep-gold); }

/* Each card opens on a small night window. The drawings move only while the
   window is on screen (js/home.js sets .is-playing); with the script absent
   they simply run.
   🚨 A WINDOW DRAWS THE PERSON'S OWN THINGS, NEVER A TOOL (founder
   2026-09-27; the rule and what it replaced are above the cards in
   index.html). Nothing below may count, time, score, play back or confirm
   anything: no counter, progress dots, timer, output or tick. Astonik writes
   the step; the picture shows it done with what the person already has. */
.vignette {
  position: relative; aspect-ratio: 2 / 1; margin-bottom: 20px; overflow: hidden; border-radius: 20px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(246, 213, 127, .12), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 0%, #2A2660, #16153D 60%, #0E0D2B);
}
.vignette::before {
  content: ''; position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 72%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 46% 12%, #fff, transparent), radial-gradient(1px 1px at 64% 30%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 82% 16%, #fff, transparent), radial-gradient(1px 1px at 91% 62%, #fff, transparent),
    radial-gradient(1px 1px at 6% 56%, #fff, transparent), radial-gradient(1px 1px at 72% 84%, #fff, transparent);
}
.vignette svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vignette text { font-family: var(--sans); }
.js .vignette:not(.is-playing) * { animation-play-state: paused !important; }

/* guitar: their own guitar. The pick strums down, then back up, and the
   strings ring. No chord chart and no chord names: the app draws no chord
   diagram, so the picture does not either. */
.gt-pick { transform-box: fill-box; transform-origin: center; translate: 128px 76px; rotate: 8deg; animation: gt-pick 3.2s cubic-bezier(.55, 0, .25, 1) infinite; }
@keyframes gt-pick {
  0%, 12% { translate: 128px 76px; rotate: 8deg; }
  19%, 52% { translate: 128px 108px; rotate: -10deg; }
  59%, 100% { translate: 128px 76px; rotate: 8deg; }
}
.gt-s { animation: gt-ring 3.2s linear infinite; }
.gs2 { animation-delay: .015s; } .gs3 { animation-delay: .03s; } .gs4 { animation-delay: .045s; } .gs5 { animation-delay: .06s; } .gs6 { animation-delay: .075s; }
@keyframes gt-ring {
  0%, 15%, 33%, 55%, 73%, 100% { translate: 0 0; }
  17% { translate: 0 .9px; } 19% { translate: 0 -.8px; } 22% { translate: 0 .5px; } 26% { translate: 0 -.3px; }
  57% { translate: 0 -.9px; } 59% { translate: 0 .8px; } 62% { translate: 0 -.5px; } 66% { translate: 0 .3px; }
}
.gt-note { translate: 166px 40px; }
.gn2 { translate: 190px 24px; opacity: .6; }
.gn1 { animation: gt-note-1 3.2s ease-out infinite; }
.gn2 { animation: gt-note-2 3.2s ease-out infinite; }
@keyframes gt-note-1 { 0%, 18% { opacity: 0; translate: 150px 58px; } 28% { opacity: 1; } 62%, 100% { opacity: 0; translate: 172px 18px; } }
@keyframes gt-note-2 { 0%, 58% { opacity: 0; translate: 160px 60px; } 68% { opacity: .9; } 100% { opacity: 0; translate: 190px 24px; } }

/* a new language: sticky notes on their own window, pressed on one at a
   time. Paper, not flash cards — nothing is spoken to them and nothing is
   counted. */
.lg-note { transform-box: fill-box; transform-origin: center; }
.lg-note text { font: 600 17px/1 var(--serif); fill: #1C1A47; }
.ln3 text { font-size: 15px; }
.ln1 { animation: lg-stick-1 9s cubic-bezier(.3, 1.5, .55, 1) infinite; }
.ln2 { animation: lg-stick-2 9s cubic-bezier(.3, 1.5, .55, 1) infinite; }
.ln3 { animation: lg-stick-3 9s cubic-bezier(.3, 1.5, .55, 1) infinite; }
@keyframes lg-stick-1 { 0% { opacity: 0; scale: 1.28; rotate: 9deg; } 6%, 88% { opacity: 1; scale: 1; rotate: 0deg; } 95%, 100% { opacity: 0; scale: 1; rotate: 0deg; } }
@keyframes lg-stick-2 { 0%, 22% { opacity: 0; scale: 1.28; rotate: -9deg; } 28%, 88% { opacity: 1; scale: 1; rotate: 0deg; } 95%, 100% { opacity: 0; scale: 1; rotate: 0deg; } }
@keyframes lg-stick-3 { 0%, 44% { opacity: 0; scale: 1.28; rotate: 8deg; } 50%, 88% { opacity: 1; scale: 1; rotate: 0deg; } 95%, 100% { opacity: 0; scale: 1; rotate: 0deg; } }

/* coding: their own laptop on a desk, a small function typing itself in.
   Nothing runs, prints or passes on screen — the app has no editor and
   checks no code. */
.cd-l { animation: cd-type-1 8s steps(12, end) infinite; }
.cl2 { animation-name: cd-type-2; } .cl3 { animation-name: cd-type-3; } .cl4 { animation-name: cd-type-4; }
@keyframes cd-type-1 { 0% { clip-path: inset(-2px 100% -2px 0); } 12%, 92% { clip-path: inset(-2px -2px -2px -2px); opacity: 1; } 98%, 100% { clip-path: inset(-2px -2px -2px -2px); opacity: 0; } }
@keyframes cd-type-2 { 0%, 14% { clip-path: inset(-2px 100% -2px 0); } 26%, 92% { clip-path: inset(-2px -2px -2px -2px); opacity: 1; } 98%, 100% { clip-path: inset(-2px -2px -2px -2px); opacity: 0; } }
@keyframes cd-type-3 { 0%, 28% { clip-path: inset(-2px 100% -2px 0); } 38%, 92% { clip-path: inset(-2px -2px -2px -2px); opacity: 1; } 98%, 100% { clip-path: inset(-2px -2px -2px -2px); opacity: 0; } }
@keyframes cd-type-4 { 0%, 42% { clip-path: inset(-2px 100% -2px 0); } 54%, 92% { clip-path: inset(-2px -2px -2px -2px); opacity: 1; } 98%, 100% { clip-path: inset(-2px -2px -2px -2px); opacity: 0; } }
.cd-caret { translate: 160px 73px; animation: cd-caret 8s steps(12, end) infinite; }
@keyframes cd-caret {
  0% { translate: 94px 33px; } 12%, 13.9% { translate: 158px 33px; }
  14% { translate: 104px 45px; } 26%, 27.9% { translate: 186px 45px; }
  28% { translate: 104px 57px; } 38%, 41.9% { translate: 160px 57px; }
  42% { translate: 94px 73px; } 54%, 100% { translate: 160px 73px; }
}
.cd-caret rect { animation: cd-blink 1.1s steps(1, end) infinite; }
@keyframes cd-blink { 50% { opacity: 0; } }
.cd-leaves { transform-box: fill-box; transform-origin: 50% 100%; animation: cd-sway 6s ease-in-out infinite; }
@keyframes cd-sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }

/* drawing: a real cup on the table, sketched from three angles on their own
   pad. The cup keeps steaming; the pencil draws each view in turn. */
.dr-cup * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.dc1 * { animation: sketch-1 8s ease-in-out infinite; }
.dc2 * { animation: sketch-2 8s ease-in-out infinite; }
.dc3 * { animation: sketch-3 8s ease-in-out infinite; }
@keyframes sketch-1 { 0% { stroke-dashoffset: 1; opacity: 0; } .5% { opacity: 1; } 16%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sketch-2 { 0%, 18% { stroke-dashoffset: 1; opacity: 0; } 18.5% { opacity: 1; } 36%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sketch-3 { 0%, 38% { stroke-dashoffset: 1; opacity: 0; } 38.5% { opacity: 1; } 56%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.dr-steam { opacity: .8; animation: dr-steam 3.6s ease-in-out infinite; }
@keyframes dr-steam { 0%, 100% { opacity: .3; translate: 0 2px; } 50% { opacity: .9; translate: 0 -2px; } }
.dr-pencil { translate: 272px 83px; animation: dr-pencil 8s ease-in-out infinite; }
@keyframes dr-pencil {
  0% { opacity: 0; translate: 125px 53px; } 3% { opacity: 1; } 16% { translate: 155px 89px; }
  18% { translate: 187px 53px; } 36% { translate: 217px 90px; }
  38% { translate: 231px 62px; } 56% { opacity: 1; translate: 269px 80px; }
  62%, 100% { opacity: 0; translate: 272px 83px; }
}

/* writing: their own notebook, filled a line at a time by a pen. No word
   count — the app has none. The lines and the pen's
   path come from one seeded script, so they stay in step. */
.wr-l { animation: wr-1 8s linear infinite; }
.wl2 { animation-name: wr-2; } .wl3 { animation-name: wr-3; } .wl4 { animation-name: wr-4; } .wl5 { animation-name: wr-5; }
.wl6 { animation-name: wr-6; } .wl7 { animation-name: wr-7; } .wl8 { animation-name: wr-8; } .wl9 { animation-name: wr-9; }
@keyframes wr-1 { 0% { clip-path: inset(-6px 100% -6px 0); } 7.2%, 90% { clip-path: inset(-6px -2px -6px -2px); opacity: 1; } 97%, 100% { clip-path: inset(-6px -2px -6px -2px); opacity: 0; } }
@keyframes wr-2 { 0%, 8% { clip-path: inset(-6px 100% -6px 0); } 15.2%, 90% { clip-path: inset(-6px -2px -6px -2px); opacity: 1; } 97%, 100% { clip-path: inset(-6px -2px -6px -2px); opacity: 0; } }
@keyframes wr-3 { 0%, 16% { clip-path: inset(-6px 100% -6px 0); } 23.2%, 90% { clip-path: inset(-6px -2px -6px -2px); opacity: 1; } 97%, 100% { clip-path: inset(-6px -2px -6px -2px); opacity: 0; } }
@keyframes wr-4 { 0%, 24% { clip-path: inset(-6px 100% -6px 0); } 31.2%, 90% { clip-path: inset(-6px -2px -6px -2px); opacity: 1; } 97%, 100% { clip-path: inset(-6px -2px -6px -2px); opacity: 0; } }
@keyframes wr-5 { 0%, 32% { clip-path: inset(-6px 100% -6px 0); } 39.2%, 90% { clip-path: inset(-6px -2px -6px -2px); opacity: 1; } 97%, 100% { clip-path: inset(-6px -2px -6px -2px); opacity: 0; } }
@keyframes wr-6 { 0%, 40% { clip-path: inset(-6px 100% -6px 0); } 47.2%, 90% { clip-path: inset(-6px -2px -6px -2px); opacity: 1; } 97%, 100% { clip-path: inset(-6px -2px -6px -2px); opacity: 0; } }
@keyframes wr-7 { 0%, 48% { clip-path: inset(-6px 100% -6px 0); } 55.2%, 90% { clip-path: inset(-6px -2px -6px -2px); opacity: 1; } 97%, 100% { clip-path: inset(-6px -2px -6px -2px); opacity: 0; } }
@keyframes wr-8 { 0%, 56% { clip-path: inset(-6px 100% -6px 0); } 63.2%, 90% { clip-path: inset(-6px -2px -6px -2px); opacity: 1; } 97%, 100% { clip-path: inset(-6px -2px -6px -2px); opacity: 0; } }
@keyframes wr-9 { 0%, 64% { clip-path: inset(-6px 100% -6px 0); } 71.2%, 90% { clip-path: inset(-6px -2px -6px -2px); opacity: 1; } 97%, 100% { clip-path: inset(-6px -2px -6px -2px); opacity: 0; } }
.wr-pen { translate: 215.3px 78px; animation: wr-pen 8s linear infinite; }
@keyframes wr-pen {
  0% { opacity: 0; translate: 76px 54px; } 1.5% { opacity: 1; }
  7.2% { translate: 141.4px 54px; }
  8% { translate: 76px 66px; } 15.2% { translate: 148.6px 66px; }
  16% { translate: 76px 78px; } 23.2% { translate: 150.3px 78px; }
  24% { translate: 76px 90px; } 31.2% { translate: 147.6px 90px; }
  32% { translate: 76px 102px; } 39.2% { translate: 150.6px 102px; }
  40% { translate: 76px 114px; } 47.2% { translate: 117.2px 114px; }
  48% { translate: 172px 54px; } 55.2% { translate: 238px 54px; }
  56% { translate: 172px 66px; } 63.2% { translate: 233.2px 66px; }
  64% { translate: 172px 78px; } 71.2% { opacity: 1; translate: 215.3px 78px; }
  76%, 100% { opacity: 0; translate: 221.3px 82px; }
}

/* speaking: a microphone on a stand, in a spotlight, and a voice using it.
   No record button, level meter or timer — the app does not record a talk
   or play one back; they use whatever they already have. */
.tk-a { opacity: .55; animation: tk-voice 1.7s ease-in-out infinite; }
.ta2 { opacity: .38; animation-delay: .14s; }
.ta3 { opacity: .22; animation-delay: .28s; }
@keyframes tk-voice { 0%, 100% { opacity: .08; } 30% { opacity: .95; } 55% { opacity: .4; } 70% { opacity: .8; } }

.uses-more { margin: clamp(28px, 4vh, 40px) 0 0; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--slate); text-decoration: none; border-bottom: 1px solid rgba(58, 79, 104, .3); padding-bottom: 3px; }
.text-link span { transition: transform .3s var(--ease); }
.text-link:hover { border-color: var(--slate); }
.text-link:hover span { transform: translateX(4px); }

.gains-head { max-width: 45rem; margin: clamp(52px, min(9vw, 9vh), 96px) 0 32px; }
.gains-head h3 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); line-height: 1.12; }
.gains-head p { margin: 12px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-dim); }
.gains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3vw, 38px); }
.gains li { display: grid; grid-template-columns: 1.625rem minmax(0, 1fr); gap: 14px; align-items: start; padding-top: clamp(18px, 2.4vh, 24px); border-top: 1px solid var(--ink-line); }
.g-mark { color: var(--slate); }
.g-mark svg { width: 1.375rem; height: 1.375rem; display: block; }
.g-mark svg * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) .2s; }
.js .gains li:not(.is-in) .g-mark svg * { stroke-dashoffset: 1; }
.gains h4 { margin: 0; font: 600 1.1875rem/1.3 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.gains p { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-dim); }
.gains-note { margin: 40px 0 0; font-size: 0.875rem; color: var(--ink-dim); }
@media (max-width: 60em) { .cards, .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38.75em) { .cards, .gains { grid-template-columns: 1fr; } }

/* ============================================================ SKIES ====== */
.skies { position: relative; overflow: hidden; color: var(--cream); transition: color .6s; }
.skies[data-sky='clouds'] { color: var(--navy); }
.skies[data-sky='ivory'] { color: var(--ink); }
/* A new sky opens as a circle from the tab that was pressed (site.js writes
   --rx/--ry). The layer on top is the one opening; the rest wait under it. */
.sky-layer {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  clip-path: circle(150% at var(--rx, 50%) var(--ry, 50%));
  transition: opacity .8s var(--ease), clip-path 1.1s cubic-bezier(.6, 0, .2, 1);
}
.sky-layer.is-on { opacity: 1; }
.sky-layer.is-top { z-index: 1; transition: opacity .15s, clip-path 1.1s cubic-bezier(.6, 0, .2, 1); }
.sky-layer.is-opening { clip-path: circle(0 at var(--rx, 50%) var(--ry, 50%)); transition: none; }
.sky-layer img { width: 100%; height: 100%; object-fit: cover; }
.sky-galactic { background: var(--night); }
.sky-galactic img { opacity: .75; object-position: 50% 30%; }
.sky-galactic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--deep), transparent 30%, transparent 60%, var(--deep)); }
.sky-clouds { background: #7FB0DD; }
.sky-clouds img { object-position: 50% 100%; }
.sky-clouds::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(111, 164, 221, .85), transparent 55%); }
.sky-ivory { background: radial-gradient(ellipse 60% 50% at 80% 10%, #F8F1E1, transparent 70%), radial-gradient(ellipse 60% 60% at 10% 90%, #CFDBEA, transparent 70%), var(--pearl); }
.skies .wrap { position: relative; z-index: 2; }
.skies .eyebrow { color: currentColor; opacity: .82; }
.skies h2 em { color: inherit; }
.tabs {
  display: inline-flex; gap: 4px; padding: 5px; margin-top: 34px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.skies[data-sky='ivory'] .tabs { background: rgba(255, 255, 255, .6); border-color: var(--ink-line); }
.tab { border: 0; background: transparent; padding: 11px 20px; border-radius: 999px; cursor: pointer; font: 600 0.90625rem/1 var(--sans); color: inherit; opacity: .78; transition: background .3s, opacity .3s, color .3s; white-space: nowrap; }
.tab:hover { opacity: 1; }
/* A selected tab is a STATE, so it takes the ground's own ink, never gold. */
.tab[aria-selected='true'] { opacity: 1; background: var(--cream); color: var(--night); }
.skies[data-sky='clouds'] .tab[aria-selected='true'] { background: var(--navy); color: var(--pearl); }
.skies[data-sky='ivory'] .tab[aria-selected='true'] { background: var(--ink); color: var(--pearl); }
.sky-copy { min-height: 3.4em; margin: 26px auto 0; max-width: 52ch; font-size: 1.0625rem; line-height: 1.6; }
.sky-copy p { margin: 0; }
.sky-phones { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 3vw, 40px); margin-top: clamp(34px, 6vh, 60px); }
.sky-phones figure { margin: 0; }
.sky-phones .phone { position: relative; width: clamp(180px, min(22vw, 25vh), 244px); transition: transform .6s var(--ease); }
.sky-phones figure:nth-child(2) .phone { width: clamp(198px, min(25vw, 28vh), 272px); }
.sky-phones figure:nth-child(1) .phone { transform: translateY(14px); }
.sky-phones figure:nth-child(3) .phone { transform: translateY(14px); }
.sky-phones figure:hover .phone { transform: translateY(-8px); }
.sky-phones .screen-layer { transition: opacity .7s var(--ease); }
.phone-caption { text-align: center; margin-top: 16px; font: 700 0.71875rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .78; }
@media (max-width: 47.5em) {
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
  .tab { display: grid; place-items: center; min-height: 2.75rem; padding: 9px 8px; font-size: 0.8125rem; line-height: 1.25; white-space: normal; }
  .sky-phones { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 44px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 10px; scrollbar-width: none; }
  .sky-phones::-webkit-scrollbar { display: none; }
  .sky-phones > figure { scroll-snap-align: center; flex: none; }
  .sky-phones .phone, .sky-phones figure:nth-child(2) .phone { width: 230px; }
  .sky-phones figure:nth-child(n) .phone { transform: none; }
}

/* ============================================================ COACH ====== */
.coach-sec { position: relative; overflow: hidden; background: var(--deep); }
.coach-aura {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 38% 50% at 24% 50%, rgba(130, 90, 190, .26), transparent 70%),
    radial-gradient(ellipse 30% 30% at 34% 78%, rgba(246, 213, 127, .08), transparent 70%);
}
.coach { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.coach-visual { position: relative; height: min(640px, 76vh); }
.coach-visual .phone { position: absolute; }
.coach-visual .phone-back { width: min(250px, 29vh); left: 0; top: 70px; opacity: .92; }
.coach-visual .phone-front { width: min(285px, 33vh); left: 34%; top: 0; }
/* Waystone, the app's coach, on the app's own 3.4 s breath. */
.coach-buddy { position: absolute; right: -15%; bottom: 3%; z-index: 2; width: min(11rem, 22vh); animation: buddy 3.4s ease-in-out infinite; }
.coach-buddy img { width: 100%; height: auto; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .55)); }
@keyframes buddy { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -8px; scale: 1.02; } }
.buddy-spark {
  position: absolute; width: .875rem; height: .875rem; z-index: 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 5.6 5.4 10.3 11 11-5.6.7-10.3 5.4-11 11-.7-5.6-5.4-10.3-11-11 5.6-.7 10.3-5.4 11-11z' fill='%23F6D57F'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: spark 2.8s ease-in-out infinite;
}
.buddy-spark.s1 { left: 6%; top: 8%; } .buddy-spark.s2 { right: 4%; top: 22%; width: .625rem; height: .625rem; animation-delay: -.9s; } .buddy-spark.s3 { left: -6%; top: 46%; width: .5rem; height: .5rem; animation-delay: -1.8s; }
@keyframes spark { 0%, 100% { opacity: 0; scale: .3; rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 45deg; } }
.features { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 26px; }
.features li { display: grid; grid-template-columns: 2.875rem 1fr; gap: 18px; }
.f-icon { width: 2.875rem; height: 2.875rem; border-radius: 14px; display: grid; place-items: center; background: rgba(246, 241, 230, .06); border: 1px solid var(--cream-line); color: var(--gold-sky); transition: background .3s, transform .4s var(--ease); }
.features li:hover .f-icon { background: rgba(237, 201, 103, .12); transform: rotate(-6deg) scale(1.06); }
.f-icon svg { width: 1.375rem; height: 1.375rem; }
.features h3 { font-size: 1.3125rem; line-height: 1.3; letter-spacing: -.01em; }
.features p { margin: 6px 0 0; color: var(--cream-dim); font-size: 0.96875rem; }
.disclose { margin: 38px 0 0; padding: 16px 18px; border-radius: var(--r-inner); border: 1px solid var(--cream-line); background: rgba(246, 241, 230, .03); font-size: 0.84375rem; line-height: 1.55; color: var(--cream-faint); }
@media (max-width: 56.25em) {
  .coach { grid-template-columns: 1fr; }
  .coach-visual { height: 540px; }
  .coach-visual .phone-back { width: 205px; left: calc(50% - 195px); top: 44px; }
  .coach-visual .phone-front { width: 235px; left: calc(50% - 40px); }
  .coach-buddy { right: calc(50% - 230px); width: 8.5rem; }
}
@media (max-width: 26.25em) {
  /* 🚨 BOTH PHONES INSIDE THE WRAP. At 320 the wrap is 280px, so the back
     phone starts at 0 (50% of 280 = 140, less 140) and the front one ends at
     exactly 280 (140 - 32 + 172). Changing either width means redoing that sum. */
  .coach-visual { height: 420px; }
  .coach-visual .phone-back { width: 150px; left: calc(50% - 140px); }
  .coach-visual .phone-front { width: 172px; left: calc(50% - 32px); }
  .coach-buddy { right: 0; width: 6.5rem; }
}

/* ============================================================ QUESTIONS == */
.q-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 5vw, 80px); align-items: start; }
.q-grid .section-head { margin-bottom: 0; position: sticky; top: 6rem; }
.faq { border-top: 1px solid var(--ink-line); interpolate-size: allow-keywords; }
.faq details { border-bottom: 1px solid var(--ink-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 2.4vh, 24px) 2px; cursor: pointer; list-style: none;
  font: 600 clamp(1.0625rem, 1.7vw, 1.1875rem)/1.4 var(--serif); letter-spacing: -.01em; color: var(--ink);
  transition: color .2s, padding-left .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--slate); padding-left: 8px; }
/* A drawn plus/minus. Two rules rather than a glyph, because Manrope's own
   arithmetic characters sit off the optical centre at this size. */
.q-mark { position: relative; flex: none; width: 1.125rem; height: 1.125rem; }
.q-mark::before, .q-mark::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--slate);
  transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .25s;
}
.q-mark::before { width: 1.125rem; height: 1.5px; }
.q-mark::after { width: 1.5px; height: 1.125rem; }
.faq details[open] .q-mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
/* Where the browser can animate to `auto`, an answer slides open. Elsewhere it
   simply appears, as it always did. */
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq-body { padding: 0 2px clamp(20px, 3vh, 28px); max-width: 62ch; }
.faq-body p { margin: 0 0 12px; font-size: 1rem; line-height: 1.68; color: var(--ink-dim); }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body a { color: var(--slate); }
.faq-body .text-link { margin-top: 6px; }
.data-band {
  margin-top: clamp(46px, min(8vw, 8vh), 92px); padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--ink-line);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px clamp(28px, 5vw, 70px); align-items: end;
}
.data-band h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.2; color: var(--ink); }
.data-band p { margin: 10px 0 0; max-width: 54ch; font-size: 1rem; line-height: 1.6; color: var(--ink-dim); }
.privacy-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; }
.data-band .privacy-links { margin: 0; }
.data-band .text-link { margin-top: 0; }

/* ============================================================ CLOSE ====== */
.close {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(4.5rem, min(9vw, 11vh), 8rem) 0 clamp(5rem, min(11vw, 13vh), 9rem);
  background: var(--deep);
}
.close-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 42% at 50% 40%, rgba(246, 213, 127, .12), transparent 70%),
    radial-gradient(ellipse 70% 70% at 50% 38%, #221F57, transparent 75%),
    linear-gradient(to bottom, var(--deep), #0D0E27 30%, #12123A 60%, var(--deep));
}
.close-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.close .wrap { position: relative; }
.camp { width: min(17rem, 34vh); margin: 0 auto clamp(8px, 2vh, 20px); }
.camp svg { display: block; width: 100%; height: auto; overflow: visible; }
.close h2 { font-size: clamp(1.9375rem, min(5vw, 6.6vh), 3.25rem); max-width: 24ch; margin-inline: auto; }
.close .lead { max-width: 54ch; }
.close-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: clamp(22px, 4vh, 36px); }
.close-actions .btn { margin-bottom: 10px; }
.close-fine { margin: clamp(24px, 4vh, 38px) auto 0; max-width: 64ch; font-size: 0.84375rem; line-height: 1.6; color: var(--cream-faint); }
.close-fine a { color: var(--cream-dim); }
/* The logo pitches itself when it scrolls into view — the film's end card. */
.cp-hill { stroke-dasharray: 1; stroke-dashoffset: 0; }
.cp-tent { transform-box: view-box; transform-origin: 512px 736px; }
.cp-star { transform-box: view-box; transform-origin: 698px 288px; }
.cp-pole { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .camp:not(.is-in) .cp-hill, .js .camp:not(.is-in) .cp-pole { stroke-dashoffset: 1; }
.js .camp:not(.is-in) .cp-tent, .js .camp:not(.is-in) .cp-star, .js .camp:not(.is-in) .cp-door,
.js .camp:not(.is-in) .cp-spill, .js .camp:not(.is-in) .cp-warm { opacity: 0; }
.camp.is-in .cp-hill { animation: draw 1.1s var(--ease) both .1s; }
.camp.is-in .cp-tent { animation: pitch 1s var(--ease-back) both .55s; }
.camp.is-in .cp-pole { animation: draw .6s var(--ease) both 1.25s; }
.camp.is-in .cp-star { animation: star-arrive 1.2s var(--ease-back) both 1.4s, star-breathe 5s ease-in-out 3s infinite; }
.camp.is-in .cp-door { animation: door-on 1.3s ease both 2.2s, flicker 6s ease-in-out 4s infinite; }
.camp.is-in .cp-spill { animation: fade-in 1.4s ease both 2.4s; }
.camp.is-in .cp-warm { animation: fade-in 2s ease both 2.4s; }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes pitch { from { opacity: 0; scale: 1 0; } 40% { opacity: 1; } }
@keyframes star-arrive { from { opacity: 0; scale: .1; rotate: -120deg; } }
@keyframes star-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }

/* ============================================================ WAITLIST === */
/* Published only when site.config.json says so. */
.join { position: relative; overflow: hidden; color: var(--navy); padding: clamp(76px, min(14vw, 15vh), 152px) 0; }
.join-sky { position: absolute; inset: 0; background: #7FB0DD; }
.join-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.join-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--pearl) 0%, rgba(243, 246, 250, 0) 26%); }
.join .wrap { position: relative; }
.join-card {
  max-width: 40rem; margin: 0 auto; padding: clamp(32px, 5vw, 52px); border-radius: 32px; text-align: center;
  background: rgba(246, 239, 223, .9); border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 40px 80px -40px rgba(18, 36, 60, .45);
}
.join-card .eyebrow { color: #5A4310; }
.join-card h2 { font-size: clamp(1.875rem, min(5vw, 6.4vh), 3rem); }
.join-card .lead { color: #2A415C; }
.form { margin-top: 32px; display: grid; gap: 12px; text-align: left; }
.field label { display: block; font: 700 0.8125rem/1.2 var(--sans); margin: 0 0 7px 4px; color: #2A415C; }
.field label span { font-weight: 400; }
.field input {
  width: 100%; min-height: 3.375rem; padding: 0 18px; border-radius: var(--r-inner);
  border: 1px solid rgba(18, 36, 60, .2); background: rgba(255, 255, 255, .86); color: var(--navy);
  font: 400 1rem/1 var(--sans); transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: rgba(42, 65, 92, .6); }
.field input:focus { outline: none; border-color: #8E6B1E; box-shadow: 0 0 0 4px rgba(213, 169, 71, .25); }
.form .btn { width: 100%; margin-top: 8px; min-height: 3.5rem; font-size: 1rem; }
.form .btn[disabled] { opacity: .7; cursor: progress; }
.form-status { min-height: 1.6em; margin: 4px 0 0; text-align: center; font-weight: 600; font-size: 0.9375rem; }
.form-status.is-ok { color: #1F5A3A; }
.form-status.is-err { color: #8A2A1E; }
.fine { margin: 14px 0 0; font-size: 0.8125rem; line-height: 1.55; color: #2A415C; text-align: center; }
.fine a { color: inherit; }
.joined { display: none; }
.join-card.is-joined .form, .join-card.is-joined .fine { display: none; }
.join-card.is-joined .joined { display: block; margin-top: 28px; }
.joined svg { width: 3.375rem; height: 3.375rem; margin: 0 auto 14px; color: #B98A2A; }
.joined p { margin: 0; font-size: 1.0625rem; }

/* ============================================================ IN THE HAND */
@media (max-width: 60em) {
  .facts-row { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 38.75em) {
  .link-cta { font-size: 1rem; }
  .q-grid { grid-template-columns: 1fr; }
  .q-grid .section-head { position: static; }
  .faq summary { gap: 14px; font-size: 1.0625rem; }
  .data-band { grid-template-columns: 1fr; align-items: start; }
  .card h3 { font-size: 1.25rem; }
  .features { gap: 22px; }
  .features li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 14px; }
  .gains li { grid-template-columns: 1.5rem minmax(0, 1fr); gap: 13px; }
  .f-icon { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
  .f-icon svg { width: 1.25rem; height: 1.25rem; }
  .features h3 { font-size: 1.1875rem; }
  /* Inline links are a 23px target at this size. Padding, not a bigger font. */
  .privacy-links { gap: 4px 20px; }
  .text-link { padding-top: 8px; padding-bottom: 9px; }
  .data-band .text-link { margin-top: 12px; }
}