/* ==========================================================================
   sparkoflight.com — SOL platform site
   Warm editorial × SV polish. Fraunces headlines (one gold-italic word),
   Fraunces-italic annotations, Poppins body/labels, deep-night ground, grain.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* metric-matched fallback: Georgia sized/shaped to occupy the same space as
   Fraunces, so the H1 doesn't rewrap (CLS) during the font swap */
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia");
  size-adjust: 97.5%;
  ascent-override: 100.3%;
  descent-override: 26.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* the deep stop under a card, and the tonal lift behind the trust band.
     Both were hardcoded near-blacks, which is what kept the cards grey and
     the reassurance zone black once the ground turned over. */
  --espresso-deep: #19120C;
  --dusk: #16110C;
  --card-line: rgba(233, 186, 100, 0.1);
  --card-line-strong: rgba(233, 186, 100, 0.18);
  --glint-a: #E9BA64;
  --glint-b: #F7D794;
  --night: #0E0C0A;
  --espresso: #241B12;
  /* channels, so the alpha washes below compose against whichever ground
     the theme is standing on rather than a hardcoded near-black */
  --night-rgb: 14, 12, 10;
  --cream-rgb: 245, 235, 216;
  --gold: #EDB64A;
  --gold-soft: #E9BA64;
  --amber: #C8912F;
  --cream: #F5EBD8;
  --ivory: #F7F2EA;
  --taupe: #A89A86;

  --text-body: rgba(var(--cream-rgb), 0.72);
  --text-dim: rgba(var(--cream-rgb), 0.6);
  --hairline: rgba(233, 186, 100, 0.16);

  --serif: "Fraunces", "Fraunces-fallback", Georgia, serif;
  --sans: "Poppins", -apple-system, "Segoe UI", sans-serif;
  /* accents use Fraunces italic (elegant, timeless), not a handwritten script */
  --hand: "Fraunces", "Fraunces-fallback", Georgia, serif;

  --display-axes: "opsz" 144, "SOFT" 0, "WONK" 0;
  --ease: cubic-bezier(0.22, 0.61, 0.2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ light */
/* The day world. Only the ground and the ink turn over: the gold is the same
   gold, because it is the brand rather than a contrast device.
   Photographic sections stay night in both themes. A dawn photograph cannot
   carry dark text, and the page reads better as paper with dark plates set
   into it than as a washed out version of itself. Those islands re-declare
   the night tokens below, so everything inside them keeps working untouched. */
html[data-theme="light"] {
  color-scheme: light;
  /* the paper lifts and the card deepens, so a card reads as an object sitting
     on the page rather than as a slightly different shade of it */
  --night: #F9F5ED;
  --night-rgb: 249, 245, 237;
  --espresso: #EEE2CB;
  --cream: #1A150E;
  --cream-rgb: 26, 21, 14;
  --ivory: #16120C;
  --taupe: #6E6252;
  --gold-soft: #8A6414;
  --text-body: rgba(26, 21, 14, 0.76);
  --text-dim: rgba(26, 21, 14, 0.62);
  --hairline: rgba(138, 100, 20, 0.22);
  --glint-a: #92671A;
  --glint-b: #B8862A;
  --espresso-deep: #E3D5B9;
  --dusk: #F1EADC;
  /* gold at a tenth reads on near-black and disappears on paper, so the day
     borders carry roughly twice the weight */
  --card-line: rgba(138, 100, 20, 0.24);
  --card-line-strong: rgba(138, 100, 20, 0.3);
}

/* The hero scrim exists to hold text on a photograph. On the night art that
   means darkening it; on the day art it means the opposite, and gently, or the
   dunes flatten into a blank page. */
html[data-theme="light"] .hero-scrim {
  background:
    linear-gradient(to right, var(--night) 0%, rgba(var(--night-rgb), 0.86) 26%, rgba(var(--night-rgb), 0.4) 52%, transparent 78%),
    radial-gradient(120% 100% at 12% 46%, rgba(var(--night-rgb), 0.9) 0%, rgba(var(--night-rgb), 0.35) 58%, transparent 100%),
    linear-gradient(to bottom, rgba(var(--night-rgb), 0.42), rgba(var(--night-rgb), 0.06) 36%, rgba(var(--night-rgb), 0.4) 80%, var(--night) 100%);
}
html[data-theme="light"] .hero-foot-line { background: rgba(138, 100, 20, 0.22); }
/* the day art keeps some tone in its upper left, so the eyebrow needs more
   ink than --taupe carries to hold the same weight it has on the night art */
html[data-theme="light"] .hero .eyebrow { color: rgba(26, 21, 14, 0.72); }
html[data-theme="light"] .hero .eyebrow::before { background: rgba(138, 100, 20, 0.5); }
/* cream sparks, invisible against a bright sky */
html[data-theme="light"] .hero-motes { display: none; }

/* Every band now has day art of its own, so nothing is pinned to night any
   more. The only thing that stays dark is a phone, because a phone is a dark
   object in both worlds. */
html[data-theme="light"] .phone-wrap .chip {
  --cream: #F5EBD8;
  --cream-rgb: 245, 235, 216;
  --ivory: #F7F2EA;
  --espresso: #241B12;
  --espresso-deep: #19120C;
  --taupe: #A89A86;
  --hairline: rgba(233, 186, 100, 0.16);
  color: var(--cream);
}
/* The manifesto band is the one place the night theme has something the day
   theme cannot borrow: a black field for the dots to glow against. On paper
   the same band went flat, so the day gets its own plate, light coming through
   folded paper, and the dot-wave sits on it in multiply so the gold reads as
   ink rather than as glow. */
html[data-theme="light"] .band-manifesto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/img/gen/manifesto-day-1440.webp") center / cover no-repeat;
  opacity: .55;
}
html[data-theme="light"] .band-manifesto .band-inner { position: relative; z-index: 2; }
html[data-theme="light"] .dotwave { opacity: .72; mix-blend-mode: multiply; }
/* The two phones whose screens are drawn in CSS rather than screenshotted.
   Every captured screen now follows the theme, so these two would otherwise be
   the only night screens left on a day page. The frame stays dark either way,
   because a phone is a black object no matter what is on it. */
html[data-theme="light"] .live-screen { background: #FBF7EF; }
html[data-theme="light"] .lb-sol {
  background: #F1E9DA;
  border-color: rgba(138, 100, 20, 0.18);
  color: rgba(26, 21, 14, 0.88);
}
html[data-theme="light"] .live-composer {
  background: #F1E9DA;
  border-color: rgba(138, 100, 20, 0.18);
  color: #6E6252;
}
html[data-theme="light"] .live-screen,
html[data-theme="light"] .live-status,
html[data-theme="light"] .live-header { color: rgba(26, 21, 14, 0.82); }
html[data-theme="light"] .live-mentor-name,
html[data-theme="light"] .live-title { color: #171310; }
html[data-theme="light"] .live-back { color: #6E6252; }
html[data-theme="light"] .live-glyphs i { background: #6E6252; }
/* the battery is a clipped gradient, not a fill, so it needs the same shape */
html[data-theme="light"] .live-glyphs .batt {
  border-color: rgba(110, 98, 82, 0.7);
  background: linear-gradient(90deg, #6E6252 0 70%, transparent 70%);
}
html[data-theme="light"] .live-online,
html[data-theme="light"] .live-online::before { color: #4E7052; background-color: #4E7052; }
html[data-theme="light"] .live-online { background-color: transparent; }
html[data-theme="light"] .live-screen .live-avatar { border-color: rgba(138, 100, 20, 0.4); }
html[data-theme="light"] .live-header { border-bottom-color: rgba(138, 100, 20, 0.18); }

/* the spark scene is god-rays: on ivory they want less heat, not more */
html[data-theme="light"] .spark-glow { opacity: .5; }
html[data-theme="light"] .spark-rays { opacity: .3; }

/* the nav rides over both, so it takes its ground from the theme */
html[data-theme="light"] .nav-panel { background: rgba(var(--night-rgb), 0.94); }
html[data-theme="light"] .grain,
html[data-theme="light"] body::after { opacity: .5; }

/* theme switch */
.theme-toggle {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: transparent; color: var(--gold-soft);
  cursor: pointer; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .sun { display: none; }
html[data-theme="light"] .theme-toggle .sun { display: block; }
html[data-theme="light"] .theme-toggle .moon { display: none; }
.nav-panel .theme-toggle { width: 100%; border-radius: 14px; height: 46px; }

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto so width/height attributes (CLS hints) never pin a rendered
   height; class-level rules (.phone-screen img, .band-bg, …) override it. */
img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
p a, .trust-cols a {
  color: var(--gold-soft);
  text-decoration: underline;
  text-decoration-color: rgba(233, 186, 100, 0.4);
  text-underline-offset: 3px;
}
p a:hover { text-decoration-color: var(--gold-soft); }

::selection { background: var(--gold); color: var(--night); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: min(1160px, 100% - 48px);
  margin-inline: auto;
}

/* luxe scrollbar */
html { scrollbar-color: rgba(200, 145, 47, 0.55) var(--night); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(237, 182, 74, 0.5), rgba(200, 145, 47, 0.5));
  border-radius: 8px;
  border: 2px solid var(--night);
}

#sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

/* -------------------------------------------------------------- typography */
h1, h2 {
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-weight: 490;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5.6vw + 0.6rem, 5.7rem);
  line-height: 1.05;
}

h2 {
  font-size: clamp(2rem, 3.7vw + 0.3rem, 3.6rem);
  line-height: 1.1;
  margin-top: 18px;
  max-width: 21ch;
}

em.g {
  font-style: italic;
  font-weight: 520;
  color: var(--gold-soft);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--taupe);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: rgba(233, 186, 100, 0.45);
}
.eyebrow .idx {
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-soft);
  margin-right: 2px;
}

.microlabel {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
}

.note {
  font-family: var(--hand);
  font-style: italic;
  font-size: 1.14rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--gold-soft);
  line-height: 1.4;
}

.body {
  margin: 20px 0 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.78;
  color: var(--text-body);
  max-width: 44ch;
}
.body-lead { max-width: 50ch; }

.lead {
  margin: 24px 0 0;
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.75;
  color: var(--text-body);
  max-width: 46ch;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease), background-color 0.35s var(--ease),
              letter-spacing 0.35s var(--ease);
}

.btn-gold {
  background: linear-gradient(180deg, #F0C167, #E2A93C);
  color: #201404;
  box-shadow: 0 10px 30px -12px rgba(237, 182, 74, 0.55);
}
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 38px -12px rgba(237, 182, 74, 0.7);
}

.btn-ghost {
  border: 1px solid rgba(233, 186, 100, 0.35);
  color: var(--ivory);
}
.btn-ghost:hover {
  border-color: rgba(233, 186, 100, 0.7);
  background: rgba(233, 186, 100, 0.06);
}

.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}
.cta-row .note { margin-left: 4px; }

/* waitlist (non-iOS visitors); JS-gated since the Worker returns JSON */
.waitlist { margin-top: 30px; max-width: 480px; }
html.no-js .waitlist { display: none; }
.waitlist-label { margin: 0 0 12px; color: var(--taupe); }
.waitlist-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.waitlist-input {
  flex: 1 1 150px;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(233, 186, 100, 0.28);
  background: rgba(var(--night-rgb), 0.5);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1rem; /* 16px floor: below it iOS Safari zooms the page on focus */
}
.waitlist-input::placeholder { color: var(--taupe); }
.waitlist-input:focus { outline: none; border-color: rgba(233, 186, 100, 0.7); }
.wl-name { flex-basis: 120px; }
.wl-email { flex-basis: 210px; }
.waitlist-submit { flex: 0 0 auto; padding: 13px 22px; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist-msg { margin: 12px 0 0; min-height: 1.2em; font-size: 0.86rem; color: var(--taupe); }
.waitlist.err .waitlist-msg { color: #E6A19B; }
.waitlist .ok-msg { margin: 4px 0 0; color: var(--gold-soft); font-size: 0.98rem; }

/* ------------------------------------------------------------------ glass */
/* Warm espresso glass. Rules: never nest glass inside glass, never animate
   the blur radius; chips animate transform only. */
.glass {
  background: rgba(var(--night-rgb), 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--card-line-strong);
  box-shadow: inset 0 1px 0 rgba(247, 242, 234, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(24, 18, 12, 0.9); }
}

.chip {
  position: absolute;
  z-index: 3;
  border-radius: 999px;
  padding: 9px 18px;
  white-space: nowrap;
}
/* The chips carry the scroll-float `translate`. iOS Safari mis-renders
   backdrop-filter on a transformed element, ballooning the frosted blur into a
   huge grey blob over the phone. Chips are tiny labels over the app art, so
   drop the backdrop blur and use a solid translucent fill: same look, no bug. */
.chip.glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(28, 21, 13, 0.78);
}
.chip-hand {
  font-family: var(--hand);
  font-style: italic;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--gold-soft);
  top: 11%;
  right: -34px;
}
.chip-low {
  top: auto;
  right: auto;
  bottom: 17%;
  left: -46px;
}
.chip-caps {
  top: 9%;
  right: -30px;
  padding: 8px 15px;
  color: var(--cream);
}
@media (max-width: 760px) {
  /* chips stay visible on phones (they carry the scroll-float motion), pulled
     tight to the device corners and shrunk so they never overflow the narrow
     viewport */
  .chip { font-size: 0.9rem; padding: 6px 13px; }
  .chip-hand { top: 7%; right: -12px; }
  /* remembers-you has chip-hand too, so reset its top/right or it stretches
     from top:7% to bottom:14% into a huge box */
  .chip-low  { top: auto; right: auto; bottom: 14%; left: -14px; }
  .chip-caps { top: 7%; right: -12px; padding: 5px 11px; }
}

/* -------------------------------------------------------------------- nav */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(var(--night-rgb), 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom-color: rgba(233, 186, 100, 0.12);
}

.nav-inner {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-brand img { height: 34px; width: auto; display: block; }

.nav-links {
  display: flex;
  gap: 30px;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.08em;
}
.nav-links a {
  color: rgba(var(--cream-rgb), 0.66);
  transition: color 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ivory); }
.nav-links .nav-story { color: var(--gold-soft); }
.nav-links .nav-story span { font-size: 0.7em; }

.nav-cta { position: relative; padding: 11px 22px; font-size: 0.68rem; }

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--gold));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 95% at 16% 70%, rgba(var(--night-rgb), 0.8) 0%, rgba(var(--night-rgb), 0.28) 52%, transparent 100%),
    linear-gradient(to bottom, rgba(var(--night-rgb), 0.5), rgba(var(--night-rgb), 0.06) 32%, rgba(var(--night-rgb), 0.52) 76%, var(--night) 100%);
}
.hero-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(110px, 17vh, 190px);
}
.hero-content h1 { max-width: 15ch; }

.hero-foot {
  position: absolute;
  z-index: 2;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero-foot-line { flex: 1; height: 1px; background: rgba(233, 186, 100, 0.18); }

/* ------------------------------------------------------------------ bands */
.band { position: relative; overflow: hidden; }

.band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.band-inner { position: relative; z-index: 2; }

/* manifesto — golden dot-wave canvas over a static gold glow (the glow is
   also the no-JS fallback; reduced motion swaps in the aurora still) */
.band-manifesto {
  text-align: center;
  padding-block: clamp(130px, 19vh, 210px);
  background:
    radial-gradient(58% 82% at 50% 62%, rgba(237, 182, 74, 0.13), transparent 72%)
    var(--night);
}
.dotwave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.band-manifesto::before {
  background:
    radial-gradient(52% 46% at 50% 52%, rgba(var(--night-rgb), 0.55), rgba(var(--night-rgb), 0.15) 62%, transparent 100%),
    linear-gradient(to bottom, var(--night), transparent 22%, transparent 78%, var(--night));
}
@media (prefers-reduced-motion: reduce) {
  .dotwave { display: none; }
  .band-manifesto {
    background-image: url("assets/img/gen/aurora-1440.webp");
    background-size: cover;
    background-position: center;
  }
}
.manifesto {
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-weight: 440;
  font-size: clamp(1.75rem, 3.2vw + 0.4rem, 3rem);
  line-height: 1.32;
  color: var(--cream);
  max-width: 23ch;
  margin: 0 auto;
  text-wrap: balance;
}
.manifesto-mark {
  height: 64px;
  width: auto;
  opacity: 0.92;
  margin-top: 52px;
}
.manifesto .wd { display: inline-block; }

/* ------------------------------------------------------------ custom cursor */
/* Enabled by JS (fine pointers, motion allowed): html.cur-on hides the
   native cursor; the gold ring lerps behind the dot. Tab restores native. */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}
.cursor {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(233, 186, 100, 0.55);
  transition: width 0.3s var(--ease), height 0.3s var(--ease),
              margin 0.3s var(--ease), background-color 0.3s var(--ease),
              opacity 0.3s var(--ease);
}
.cursor-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(237, 182, 74, 0.8);
}
html.cur-on .cursor,
html.cur-on .cursor-dot { opacity: 1; }
html.cur-on,
html.cur-on body,
html.cur-on a,
html.cur-on button { cursor: none; }
html.cur-on .cursor.grow {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(237, 182, 74, 0.08);
}

/* spotlight hover: a soft gold pool follows the pointer inside cards */
.mentor,
.pillar,
.trust-panel,
.beta-content { position: relative; }
.mentor::after,
.pillar::after,
.trust-panel::after,
.beta-content::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(237, 182, 74, 0.09), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.mentor:hover::after,
.pillar:hover::after,
.trust-panel:hover::after,
.beta-content:hover::after { opacity: 1; }

/* ------------------------------------------------------------ intro overlay */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--night);
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro img { height: 46px; width: auto; }
.intro.off { display: none; }
html.intro-lock { overflow: hidden; }

/* --------------------------------------------------------------- marquee */
.marquee {
  overflow: hidden;
  border-block: 1px solid rgba(233, 186, 100, 0.12);
  padding: 20px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-track span {
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-style: italic;
  font-weight: 430;
  font-size: 1.4rem;
  color: rgba(var(--cream-rgb), 0.64);
  white-space: nowrap;
  padding-right: 56px;
}
.marquee-track i {
  font-style: normal;
  color: rgba(233, 186, 100, 0.55);
  padding: 0 18px;
}

/* memory */
.band-memory { padding-block: clamp(110px, 15vw, 190px); }
.band-memory::before {
  background:
    linear-gradient(100deg, rgba(var(--night-rgb), 0.93) 28%, rgba(var(--night-rgb), 0.55) 58%, rgba(var(--night-rgb), 0.3) 100%),
    linear-gradient(to bottom, var(--night), transparent 20%, transparent 80%, var(--night));
}

/* final cta */
.band-beta { padding-block: clamp(130px, 18vw, 230px); }
.band-beta::before {
  background:
    linear-gradient(to right, rgba(var(--night-rgb), 0.42), rgba(var(--night-rgb), 0.15) 38%, rgba(var(--night-rgb), 0.45) 72%, rgba(var(--night-rgb), 0.6) 100%),
    linear-gradient(to bottom, var(--night), transparent 24%, transparent 76%, var(--night));
}
.beta-content {
  margin-left: auto;
  max-width: 560px;
  padding: clamp(32px, 4vw, 48px);
  border-radius: 26px;
}
.beta-tagline { margin-top: 44px; color: rgba(var(--cream-rgb), 0.55); }

/* --------------------------------------------------------------- sections */
.section {
  position: relative;
  padding-block: clamp(88px, 10vw, 144px);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(48px, 7vw, 104px);
  align-items: center;
}

/* hairline feature rows */
.rows {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
}
.rows li {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}
.rows li:last-child { border-bottom: 1px solid var(--hairline); }
.rows h3 {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.rows p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-dim);
}

/* FAQ: editorial hairline list, serif question | answer */
.faq {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
}
.faq li {
  display: grid;
  grid-template-columns: minmax(190px, 250px) 1fr;
  gap: clamp(20px, 4vw, 60px);
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}
.faq li:last-child { border-bottom: 1px solid var(--hairline); }
.faq h3 {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-weight: 480;
  font-size: 1.34rem;
  line-height: 1.2;
  color: var(--ivory);
  text-wrap: balance;
}
.faq p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.72;
  color: var(--text-dim);
  max-width: 54ch;
}
@media (max-width: 640px) {
  .faq li { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .faq h3 { font-size: 1.22rem; }
}

/* ------------------------------------------------------------ phone mockup */
.phone-wrap {
  position: relative;
  margin: 0 auto;
  max-width: 340px;
  width: 100%;
}
.phone-wrap::before {
  content: "";
  position: absolute;
  inset: -52px;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 48%, rgba(237, 182, 74, 0.11), transparent 70%);
  pointer-events: none;
}
.phone {
  aspect-ratio: 390 / 844;
  border-radius: 48px;
  padding: 10px;
  background: linear-gradient(160deg, #1E1712, #110D09);
  border: 1px solid rgba(237, 182, 74, 0.22);
  box-shadow:
    0 42px 90px -32px rgba(0, 0, 0, 0.82),
    0 0 150px -55px rgba(237, 182, 74, 0.4),
    inset 0 1px 0 rgba(247, 242, 234, 0.07);
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: var(--ivory);
}
.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.phone-wrap .note,
.phone-wrap figcaption {
  display: block;
  text-align: center;
  margin-top: 20px;
  transform: rotate(-2deg);
}

/* ----------------------------------------------------------------- day rail */
.section-day .eyebrow,
.section-day h2 { text-align: left; }

.rail-outer { margin-top: 64px; }

.rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

.rail-slide { text-align: center; }
.rail-slide .phone {
  border-radius: 42px;
  padding: 8px;
  max-width: 280px;
  margin: 18px auto 0;
}
.rail-slide:nth-child(odd) .phone { rotate: -1.2deg; }
.rail-slide:nth-child(even) .phone { rotate: 1.2deg; }
.rail-slide:hover .phone { rotate: 0deg; }
.rail-slide .phone-screen { border-radius: 34px; }

.slide-time {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-style: italic;
  font-weight: 460;
  font-size: 1.5rem;
  color: var(--gold-soft);
}
.rail-slide .note { display: block; margin-top: 20px; }
.slide-text {
  margin: 10px auto 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 30ch;
}

.rail-dots { display: none; }

/* ---------------------------------------------------------------- pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin-top: 60px;
}
.pillar {
  position: relative;
  background: linear-gradient(180deg, var(--espresso), var(--espresso-deep));
  border: 1px solid var(--card-line);
  border-radius: 22px;
  padding: 16px 16px 30px;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.pillar-idx {
  position: absolute;
  top: 32px;
  right: 34px;
  z-index: 1;
  color: var(--cream);
  text-shadow: 0 1px 10px rgba(var(--night-rgb), 0.9);
}
.pillar:hover {
  transform: translateY(-6px);
  border-color: rgba(233, 186, 100, 0.3);
}
.pillar img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  transition: filter 0.7s var(--ease);
}
.pillar:hover img { filter: brightness(1.09) saturate(1.06); }
.pillar h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 24px 8px 10px;
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-weight: 520;
  font-size: 1.4rem;
  color: var(--ivory);
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.dot-mind { background: #6B8F71; box-shadow: 0 0 14px rgba(107, 143, 113, 0.8); }
.dot-body { background: #C48B7C; box-shadow: 0 0 14px rgba(196, 139, 124, 0.8); }
.dot-soul { background: #7BA694; box-shadow: 0 0 14px rgba(123, 166, 148, 0.8); }
.pillar p {
  margin: 0 8px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-dim);
}
/* the WHOOP / body integration is a signature hook, so pillar two carries extra
   presence and a live-connection badge */
.pillar-feature {
  border-color: rgba(233, 186, 100, 0.3);
  box-shadow: 0 0 0 1px rgba(233, 186, 100, 0.12),
              0 26px 64px -34px rgba(237, 182, 74, 0.55);
}
.whoop-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 8px 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(233, 186, 100, 0.4);
  background: rgba(233, 186, 100, 0.08);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.whoop-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(237, 182, 74, 0.9);
}

/* ---------------------------------------------------------------- mentors */
.section-mentors { overflow: hidden; }
.section-mentors .band-bg { z-index: 0; }
.section-mentors::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--night), rgba(var(--night-rgb), 0.55) 30%, rgba(var(--night-rgb), 0.55) 70%, var(--night)),
    rgba(var(--night-rgb), 0.35);
}
.section-mentors .container { position: relative; z-index: 2; }

.mentor-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center;
  gap: clamp(20px, 3vw, 32px);
  margin-top: 60px;
}
/* the growing-roster card is a quiet statement, not a named mentor */
.mentor-more h3 { font-weight: 470; }
.mentor-more .mentor-meta { color: var(--gold-soft); opacity: 0.7; }
.mentor {
  border-radius: 18px;
  padding: 32px 30px 36px;
  overflow: hidden;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
/* ghosted editorial index numeral, behind the card content */
.mentor::before {
  content: attr(data-n);
  position: absolute;
  top: -0.26em;
  right: 0.04em;
  z-index: -1;
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-weight: 600;
  font-size: 6.4rem;
  line-height: 1;
  color: rgba(237, 182, 74, 0.09);
  pointer-events: none;
}
.mentor:hover {
  border-color: rgba(233, 186, 100, 0.42);
  transform: translateY(-4px);
}
.mentor .microlabel { color: var(--gold-soft); }
.mentor h3 {
  margin: 16px 0 10px;
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--ivory);
}
.mentor p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-dim);
}
.mentor .mentor-meta {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(233, 186, 100, 0.14);
  color: var(--taupe);
}
.roster-note {
  display: block;
  margin: 44px auto 0;
  text-align: center;
  transform: rotate(-2deg);
}

/* ------------------------------------------------------------------ trust */
.trust-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  mix-blend-mode: screen;
  pointer-events: none;
}
.section-trust { overflow: hidden; }
.section-trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30% 42% at 22% 30%, rgba(237, 182, 74, 0.08), transparent 70%),
    radial-gradient(34% 46% at 82% 74%, rgba(200, 145, 47, 0.07), transparent 70%);
  pointer-events: none;
}
.trust-panel {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.65fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  border-radius: 26px;
  padding: clamp(24px, 4vw, 48px);
}
.trust-photo { margin: 0; }
.trust-photo img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.trust-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
.trust-cols h3 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.trust-cols p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-dim);
}

/* ------------------------------------------------------------- hero motes */
.hero-motes {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-motes span {
  position: absolute;
  left: var(--x, 50%);
  bottom: -8px;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 222, 158, 0.95), rgba(237, 182, 74, 0.5) 55%, transparent 72%);
  opacity: 0;
}

/* ------------------------------------------------------------ spark scene */
/* Static by default (no JS / reduced motion); main.js adds .spark-active to
   enable the pinned scroll-scrub. --sp is the awakening progress (0.15-1.15). */
.spark-scene {
  position: relative;
  --sp: 0.7;
}
/* The stage is a full-bleed backdrop; the copy floats IN FRONT of it on a
   glass panel so the moving light can never wash out the words. */
.spark-pin {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(110px, 14vw, 180px);
  min-height: 560px;
  overflow: hidden;
}
.spark-stage {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(460px, 74vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  z-index: 0;
}
/* no solid ball: a diffuse wash of light that spreads as --sp grows */
.spark-glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(247, 222, 158, 0.42) 0%,
    rgba(237, 182, 74, 0.2) 26%,
    rgba(237, 182, 74, 0.07) 52%,
    transparent 72%);
  transform: scale(calc(var(--sp) * 1.5));
  opacity: calc(var(--sp) * 0.95);
}
/* faint god-rays fanning out; they ride the slow stage rotation */
.spark-rays {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 8deg,
    transparent 0deg 11deg,
    rgba(237, 182, 74, 0.09) 15deg 19deg,
    transparent 23deg 34deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.5) 40%, transparent 66%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.5) 40%, transparent 66%);
  transform: scale(calc(0.5 + var(--sp) * 0.9));
  opacity: calc((var(--sp) - 0.25) * 1.2);
}
.spark-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 182, 74, 0.2), transparent 64%);
  transform: scale(calc(var(--sp) * 1.4));
  opacity: calc(var(--sp) - 0.2);
}
.spark-halo.h2x {
  background: radial-gradient(circle, rgba(237, 182, 74, 0.11), transparent 68%);
  transform: scale(calc(var(--sp) * 2));
  opacity: calc(var(--sp) - 0.3);
}
.spark-ring {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(233, 186, 100, 0.32);
  transform: scale(var(--sp));
  opacity: calc(0.2 + var(--sp) * 0.5);
}
.spark-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 222, 158, 0.9), transparent 70%);
  transform: rotate(var(--a, 0deg)) translateX(calc(var(--sp) * var(--r, 150px)));
  opacity: calc((var(--sp) - 0.72) * 3);
}
.spark-orbit.o1 { --a: 18deg;  --r: 138px; }
.spark-orbit.o2 { --a: 94deg;  --r: 172px; }
.spark-orbit.o3 { --a: 158deg; --r: 150px; }
.spark-orbit.o4 { --a: 232deg; --r: 186px; }
.spark-orbit.o5 { --a: 305deg; --r: 160px; }

.spark-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: clamp(26px, 3.4vw, 40px) clamp(28px, 4vw, 52px);
  border-radius: 24px;
  max-width: min(640px, 88vw);
}
.spark-copy .eyebrow { justify-content: center; }
.spark-lines {
  position: relative;
  width: min(520px, 78vw);
  min-height: 3.4em;
}
.spark-line {
  position: absolute;
  inset-inline: 0;
  top: 0;
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-weight: 470;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  line-height: 1.25;
  color: var(--ivory);
  opacity: 0;
}
.spark-line.note {
  font-family: var(--hand);
  font-style: italic;
  font-weight: 470;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--gold-soft);
}
.spark-line.on { opacity: 1; }
.spark-line.sl1 { opacity: 1; } /* static default shows the first line */
.spark-active .spark-line.sl1:not(.on) { opacity: 0; }

.spark-active { height: 250vh; }
.spark-active .spark-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-block: 0;
  align-content: center;
  overflow: hidden;
}
@media (max-width: 760px) {
  .spark-active { height: 160vh; }
  .spark-stage { width: min(300px, 74vw); }
}

/* ----------------------------------------------------------------- footer */
.footer {
  border-top: 1px solid var(--card-line);
  padding: 72px 0 40px;
}
.footer-lockup {
  margin: 0 0 64px;
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-weight: 460;
  font-size: clamp(3rem, 8.5vw, 7.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ivory);
  text-align: center;
  border-bottom: 1px solid var(--card-line);
  padding-bottom: 64px;
  text-wrap: balance;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand img { height: 42px; width: auto; }
.footer-brand p {
  margin: 20px 0 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--taupe);
}
.footer-links {
  display: flex;
  gap: 28px;
  font-size: 0.85rem;
  color: rgba(var(--cream-rgb), 0.62);
}
.footer-links a { transition: color 0.3s var(--ease); }
.footer-links a:hover { color: var(--ivory); }
.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(233, 186, 100, 0.08);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }

  /* section headlines rise out of a mask; scoped to h2 so the generic
     .reveal transform on other elements is untouched */
  h2.reveal {
    clip-path: inset(-2% -6% 102% -6%);
    transform: translateY(18px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease),
                clip-path 0.9s var(--ease);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  h2.reveal.in { clip-path: inset(-2% -6% -8% -6%); }

  .btn-gold:hover { letter-spacing: 0.175em; }

  .rail-slide .phone { transition: rotate 0.5s var(--ease); }

  .nav-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 26px rgba(237, 182, 74, 0.5);
    opacity: 0;
    pointer-events: none;
    animation: ctaPulse 8s ease-in-out infinite;
  }
  @keyframes ctaPulse {
    0%, 86%, 100% { opacity: 0; }
    93% { opacity: 0.55; }
  }

  /* hero motes: drift up-left with a twinkle envelope; two variants desync */
  .hero-motes span {
    animation: moteA var(--d, 30s) linear infinite;
    animation-delay: var(--dl, 0s);
  }
  .hero-motes span:nth-child(even) { animation-name: moteB; }
  @keyframes moteA {
    0%   { transform: translate3d(0, 4vh, 0); opacity: 0; }
    18%  { opacity: var(--o, 0.3); }
    52%  { opacity: calc(var(--o, 0.3) * 0.45); }
    74%  { opacity: var(--o, 0.3); }
    100% { transform: translate3d(-5vw, -36vh, 0); opacity: 0; }
  }
  @keyframes moteB {
    0%   { transform: translate3d(0, 4vh, 0); opacity: 0; }
    26%  { opacity: calc(var(--o, 0.3) * 0.6); }
    48%  { opacity: var(--o, 0.3); }
    82%  { opacity: calc(var(--o, 0.3) * 0.35); }
    100% { transform: translate3d(-7vw, -32vh, 0); opacity: 0; }
  }

  /* glass chips float */
  .chip { animation: chipFloat 9s ease-in-out infinite alternate; }
  .chip-low { animation-duration: 11s; animation-delay: -3s; }
  .chip-caps { animation-duration: 7s; animation-delay: -1.5s; }
  @keyframes chipFloat {
    from { transform: translateY(-5px); }
    to   { transform: translateY(4px); }
  }

  /* WHOOP badge dot breathes like a live device connection */
  .whoop-dot { animation: whoopPulse 2.4s ease-in-out infinite; }
  @keyframes whoopPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.15); }
  }

  /* scroll-float: JS drives the `translate` property (composes with the idle
     `transform` float above and the phone hover-tilt). No will-change: on these
     elements it perturbs the sibling `transform` animation/reveal and costs CLS,
     and translate composites fine without the hint. */

  /* spark scene line cross-fades (progress-driven via JS) */
  .spark-line { transition: opacity 0.45s var(--ease); }

  /* orbit sparkles circle slowly on top of the scroll-driven growth */
  .spark-active .spark-stage { animation: stageSpin 90s linear infinite; }
  @keyframes stageSpin { to { transform: rotate(360deg); } }

  /* the manifesto wordmark breathes with a soft halo (after its reveal) */
  .manifesto-mark.in {
    animation: markBreathe 6s ease-in-out infinite 0.9s backwards;
  }
  @keyframes markBreathe {
    0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 6px rgba(237, 182, 74, 0.1)); }
    50% { opacity: 1; filter: drop-shadow(0 0 22px rgba(237, 182, 74, 0.4)); }
  }

  .marquee:hover .marquee-track { animation-play-state: paused; }

  /* 3D tilt targets (values set by JS on fine pointers) */
  .grid-2 .phone-wrap { perspective: 900px; }
  .grid-2 .phone {
    transition: transform 0.45s var(--ease);
    transform-style: preserve-3d;
  }

  /* page scroll progress under the nav (Chrome scroll-driven) */
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      animation: pageProgress linear both;
      animation-timeline: scroll();
    }
    @keyframes pageProgress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
  }

  /* band parallax: Chrome scroll-driven animations, static elsewhere */
  @supports (animation-timeline: view()) {
    @keyframes bandParallax {
      from { transform: translateY(-6%) scale(1.12); }
      to   { transform: translateY(6%) scale(1.12); }
    }
    .band-memory .band-bg,
    .band-beta .band-bg,
    .section-mentors .band-bg {
      animation: bandParallax linear both;
      animation-timeline: view();
    }
  }

  /* manifesto: the line reveals word by word instead of as a block */
  .manifesto.reveal { opacity: 1; transform: none; transition: none; }
  .manifesto .wd {
    opacity: 0;
    transform: translateY(0.45em);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: calc(var(--i, 0) * 95ms);
  }
  .manifesto.in .wd { opacity: 1; transform: none; }

  .intro img { animation: introMark 1.5s var(--ease) both; }
  .intro.done { animation: introOut 0.7s var(--ease) forwards; }

  .marquee-track { animation: marquee 44s linear infinite; }

  .hero-bg img {
    animation: kenburns 16s var(--ease) forwards;
  }
  @keyframes kenburns {
    from { transform: scale(1.07); }
    to { transform: scale(1); }
  }

  em.g {
    background: linear-gradient(105deg, var(--glint-a) 30%, var(--glint-b) 50%, var(--glint-a) 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: glint 8s ease-in-out infinite;
  }
  @keyframes glint {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0% 0; }
  }

  @keyframes introMark {
    0% { opacity: 0; transform: scale(0.94); filter: blur(6px); }
    45% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes introOut {
    to { opacity: 0; visibility: hidden; }
  }
  @keyframes marquee {
    to { transform: translateX(-50%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .phone-wrap { max-width: 300px; }

  .pillars,
  .mentor-cards { grid-template-columns: 1fr; }
  .pillar img { aspect-ratio: 16 / 10; }

  .trust-panel { grid-template-columns: 1fr; }
  .trust-photo img { height: 220px; }
  .trust-cols { grid-template-columns: 1fr; gap: 26px; }

  .beta-content { margin-left: 0; }

  /* phone rails become full-bleed scroll-snap carousels: the next phone
     clips at the true screen edge, so the swipe affordance is unmissable */
  .rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    gap: 20px;
    width: auto;
    margin-inline: calc(50% - 50vw);
    padding-inline: 24px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail-slide {
    flex: 0 0 76%;
    scroll-snap-align: center;
  }
  .rail-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 26px;
  }
  /* 24px hit target, 9px visual dot (background-clip keeps the padding clear) */
  .rail-dots button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    padding: 7.5px;
    background: rgba(233, 186, 100, 0.5);
    background-clip: content-box;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
    cursor: pointer;
  }
  .rail-dots button.active {
    background: var(--gold);
    background-clip: content-box;
    transform: scale(1.2);
  }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-inner { height: 62px; }
  .nav-brand img { height: 30px; }

  .hero-content { padding-bottom: 96px; }
  .hero-content h1 { max-width: 13ch; }
  .hero-foot { display: none; }

  .rows li { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }

  .cta-row { gap: 14px; }
  .btn { padding: 14px 26px; }

  .band-memory::before {
    background:
      linear-gradient(to bottom, rgba(var(--night-rgb), 0.88), rgba(var(--night-rgb), 0.62)),
      linear-gradient(to bottom, var(--night), transparent 25%, transparent 75%, var(--night));
  }
  .band-beta::before {
    background:
      rgba(var(--night-rgb), 0.55),
      linear-gradient(to bottom, var(--night), transparent 25%, transparent 75%, var(--night));
  }

  .footer { padding-top: 56px; }
}

/* ============================ mobile touch layer ============================ */

/* mobile nav menu (hamburger + full-screen panel), all out of flow => CLS 0 */
.nav-toggle { display: none; }
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 0 clamp(28px, 8vw, 48px);
  background: rgba(var(--night-rgb), 0.92);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.nav--open .nav-panel { opacity: 1; visibility: visible; }
.nav-panel a {
  font-family: var(--serif);
  font-variation-settings: var(--display-axes);
  font-weight: 480;
  font-size: clamp(1.8rem, 7vw, 2.3rem);
  color: var(--ivory);
  text-decoration: none;
}
.nav-panel .nav-story { color: var(--gold-soft); }
.nav-panel .nav-story span { font-size: 0.7em; }
.nav-panel .nav-panel-cta {
  margin-top: 14px;
  align-self: flex-start;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.76rem;
}
html.nav-lock { overflow: hidden; }

@media (max-width: 760px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
    z-index: 46;
  }
  .nav-toggle span {
    position: absolute;
    width: 22px;
    height: 1.5px;
    background: var(--cream);
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
  }
  .nav-toggle span:first-child { transform: translateY(-4px); }
  .nav-toggle span:last-child { transform: translateY(4px); }
  .nav--open .nav-toggle span:first-child { transform: rotate(45deg); }
  .nav--open .nav-toggle span:last-child { transform: rotate(-45deg); }
  /* compact persistent CTA: the one conversion action must survive mobile */
  .nav-cta {
    padding: 9px 14px;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
}

/* touch feedback: press states + reuse the spotlight pool as a tap-spark */
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-gold:active { filter: brightness(1.07); }
.pillar:active, .mentor:active { border-color: rgba(233, 186, 100, 0.5); }
.mentor.tapped::after, .pillar.tapped::after,
.trust-panel.tapped::after, .beta-content.tapped::after { opacity: 1; }

/* touch: 44px tap targets + kill the continuous gold-glint text repaints */
@media (hover: none), (pointer: coarse) {
  em.g { animation: none; }
  .footer-links a { display: inline-block; padding: 8px 0; }
}
@media (hover: none) and (max-width: 760px) {
  .nav-cta { min-height: 44px; }
}
@media (max-width: 400px) {
  .hero h1 br { display: none; }
}

/* ============================================================
   Roadmap additions (2026-07-17): midpage CTA, post-submit moment,
   soul veil, live chat demo, spark CTA, form microcopy.
   ============================================================ */

/* --- midpage CTA band: one quiet re-engagement point after mentors --- */
.midpage-cta { padding: clamp(40px, 6vw, 72px) 0; }
.midpage-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 36px);
  flex-wrap: wrap;
  text-align: center;
}
.midpage-line {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 350;
  color: var(--ivory);
}

/* --- form microcopy + post-submit moment --- */
.waitlist-note { margin: 10px 0 0; opacity: 0.75; }
.waitlist-after {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.btn-sm { padding: 10px 18px; font-size: 0.6rem; }

/* --- spark scene CTA: materializes with the final line --- */
.spark-cta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
}
.spark-cta.on,
.spark-scene:not(.spark-active) .spark-cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* --- soul profile: brass armillary arcs, right-anchored, text zone kept clean --- */
.section-soul { position: relative; overflow: hidden; }
.soul-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(105deg, transparent 45%, rgba(0, 0, 0, 0.9) 78%);
  mask-image: linear-gradient(105deg, transparent 45%, rgba(0, 0, 0, 0.9) 78%);
  pointer-events: none;
}
.section-soul > .container,
.section-soul > .rail-outer { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .soul-arcs { opacity: 0.3; }
}

/* --- mentor portrait: the one real face on the page --- */
.mentor-portrait {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(233, 186, 100, 0.45);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  margin-bottom: 18px;
}

/* --- dusk lift: a tonal breath under the reassurance zone (trust + FAQ) --- */
.section-trust,
#faq {
  background: linear-gradient(180deg, var(--night) 0%, var(--dusk) 18%,
                              var(--dusk) 82%, var(--night) 100%);
}

/* --- hero cinemagraph: dawn light breathing, desktop only, fades over the still --- */
.hero-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.4s ease;
}
.hero-loop.on { opacity: 1; }

/* --- live scene: a staged SOL conversation inside the companion phone.
       All elements share one 18s infinite timeline so the loop stays coherent. --- */
.live-screen {
  text-align: left;
  display: flex;
  flex-direction: column;
  background: #070604;
  font-family: var(--sans);
  padding: 4.5% 5.5% 5%;
}
.live-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #EDEAE4;
  font-size: 0.72rem;
  font-weight: 400;
  padding: 2px 4px 10px;
}
.live-glyphs { display: inline-flex; align-items: flex-end; gap: 2px; }
.live-glyphs i { width: 3px; background: #EDEAE4; border-radius: 1px; }
.live-glyphs .g1 { height: 4px; } .live-glyphs .g2 { height: 6px; }
.live-glyphs .g3 { height: 8px; } .live-glyphs .g4 { height: 10px; }
.live-glyphs .batt {
  width: 18px; height: 9px; margin-left: 5px;
  border: 1px solid rgba(237, 234, 228, 0.7); border-radius: 3px;
  background: linear-gradient(90deg, #EDEAE4 0 70%, transparent 70%);
  background-clip: content-box; padding: 1px;
}
.live-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px 14px;
}
.live-back { color: #EDEAE4; font-size: 1.5rem; line-height: 1; font-weight: 300; }
.live-title {
  position: relative;
  color: #F2EADC;
  font-size: 1.28rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding-bottom: 7px;
}
.live-rule {
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 2px; background: var(--gold);
}
.live-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 10px;
}
.live-cell { display: grid; }
.live-cell > .lb { grid-area: 1 / 1; }
.lb {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 15px;
  font-size: 0.8rem;
  line-height: 1.55;
  font-weight: 300;
  opacity: 0;
}
.lb-sol {
  justify-self: start;
  align-self: start;
  background: #171310;
  border: 1px solid rgba(233, 186, 100, 0.14);
  border-bottom-left-radius: 5px;
  color: rgba(var(--cream-rgb), 0.88);
}
.lb-user {
  align-self: flex-end;
  background: linear-gradient(180deg, #E7BC6B, #D9A548);
  border-bottom-right-radius: 5px;
  color: #241608;
  font-weight: 400;
}
.lb-typing, .lb-typing2 {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 12px 14px;
}
.lb-typing i, .lb-typing2 i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-soft);
  animation: liveDot 0.9s ease infinite;
}
.lb-typing i:nth-child(2), .lb-typing2 i:nth-child(2) { animation-delay: 0.15s; }
.lb-typing i:nth-child(3), .lb-typing2 i:nth-child(3) { animation-delay: 0.3s; }
.live-composer {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid rgba(233, 186, 100, 0.16);
  background: #100D0A;
  color: var(--taupe);
  font-size: 0.76rem;
}
.live-caret {
  width: 1px; height: 13px; margin-left: 3px;
  background: var(--gold-soft);
  animation: liveCaret 1.1s step-end infinite;
}
/* the 18s conversation timeline */
.lb-typing  { animation: liveDot 0.9s ease infinite, liveTyping1 18s linear infinite; }
.lb-typing i { animation-name: liveDot; }
.lb-m1      { animation: liveM1 18s var(--ease) infinite; }
.lb-m2      { animation: liveM2 18s var(--ease) infinite; }
.lb-typing2 { animation: liveTyping2 18s linear infinite; }
.lb-m3      { animation: liveM3 18s var(--ease) infinite; }
@keyframes liveTyping1 {
  0%, 2% { opacity: 0; }
  4%, 12% { opacity: 1; }
  13%, 100% { opacity: 0; }
}
@keyframes liveM1 {
  0%, 13% { opacity: 0; transform: translateY(7px); }
  16%, 93% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}
@keyframes liveM2 {
  0%, 26% { opacity: 0; transform: translateY(7px); }
  29%, 93% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}
@keyframes liveTyping2 {
  0%, 33% { opacity: 0; }
  35%, 44% { opacity: 1; }
  45%, 100% { opacity: 0; }
}
@keyframes liveM3 {
  0%, 45% { opacity: 0; transform: translateY(7px); }
  49%, 93% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}
@keyframes liveDot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
@keyframes liveCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lb, .lb-m1, .lb-m2, .lb-m3 { animation: none; opacity: 1; transform: none; }
  .lb-typing, .lb-typing2 { animation: none; opacity: 0; }
  .lb-typing i, .lb-typing2 i, .live-caret { animation: none; }
}

/* --- live-guide: the Rodo conversation in the rail phone (smaller stage) --- */
.live-guide { padding: 4% 5% 4.5%; }
.live-guide .live-status { font-size: 0.62rem; padding-bottom: 7px; }
.live-header-mentor {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0 12px;
}
.live-screen .live-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(233, 186, 100, 0.35);
}
.live-mentor-name {
  display: flex;
  flex-direction: column;
  color: #F2EADC;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.25;
}
.live-online {
  font-style: normal;
  font-size: 0.6rem;
  color: #7C9A7E;
}
.live-online::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #7C9A7E;
  margin-right: 4px;
  vertical-align: 1px;
}
.live-guide .lb { font-size: 0.7rem; line-height: 1.5; padding: 8px 11px; max-width: 88%; }
.live-guide .live-composer { font-size: 0.66rem; padding: 9px 13px; margin-top: 10px; }
/* guide timeline: the question types in the composer, sends, then Rodo replies (24s cycle) */
.live-composer { position: relative; }
.live-ph { opacity: 1; }
.live-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  color: var(--ivory);
}
.live-guide .live-ph  { animation: guidePh 24s linear infinite; }
.live-guide .live-type { animation: guideTypeIn 24s linear infinite; }
.live-guide .live-caret { animation: liveCaret 1.1s step-end infinite, guideCaret 24s linear infinite; }
.gq  { animation: guideQ 24s var(--ease) infinite; }
.gt  { animation: guideT 24s linear infinite; }
.gt i { animation: liveDot 0.9s ease infinite; }
.gt i:nth-child(2) { animation-delay: 0.15s; }
.gt i:nth-child(3) { animation-delay: 0.3s; }
.gm1 { animation: guideM1 24s var(--ease) infinite; }
.gm2 { animation: guideM2 24s var(--ease) infinite; }
@keyframes guidePh {
  0%, 3% { opacity: 1; }
  4%, 15% { opacity: 0; }
  16%, 100% { opacity: 1; }
}
@keyframes guideTypeIn {
  0%, 4% { width: 0; }
  5% { width: 0; animation-timing-function: steps(29); }
  14%, 15% { width: 29ch; }
  15.5%, 100% { width: 0; }
}
@keyframes guideCaret {
  0%, 3% { opacity: 0; }
  4%, 15% { opacity: 1; }
  16%, 100% { opacity: 0; }
}
@keyframes guideQ {
  0%, 15.5% { opacity: 0; transform: translateY(7px); }
  18%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}
@keyframes guideT {
  0%, 20% { opacity: 0; }
  22%, 30% { opacity: 1; }
  31%, 100% { opacity: 0; }
}
@keyframes guideM1 {
  0%, 31% { opacity: 0; transform: translateY(7px); }
  35%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}
@keyframes guideM2 {
  0%, 52% { opacity: 0; transform: translateY(7px); }
  56%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gq, .gm1, .gm2 { animation: none; opacity: 1; transform: none; }
  .gt, .gt i { animation: none; opacity: 0; }
  .live-guide .live-type, .live-guide .live-caret { animation: none; width: 0; opacity: 0; }
  .live-guide .live-ph { animation: none; opacity: 1; }
}