/* ==========================================================================
   Ember — page
   Builds on foundation.css (tokens, fonts, buttons, orb, device frame).

   Elevation, as in the app: the page is --bg0; a card is a few points
   lighter AND carries a hairline. Both halves, always. Nothing on a surface
   glows: the only glowing things are the orb, the primary button and the
   bloom in "how it works".
   ========================================================================== */

/* ---- section rhythm ------------------------------------------------------ */
/* fanned phones overhang their columns by design; clip it per section so the
   page is never wider than the phone (a wider page makes mobile browsers zoom
   out). clip, not hidden: it creates no scroll container, so sticky still works */
main > section { overflow-x: clip; }
.sec { position: relative; padding-block: clamp(80px, 10vw, 128px); }
.sec-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.sec h2, .access h2 { font-size: clamp(2.05rem, 1.3rem + 2.4vw, 3.2rem); }
.note {                           /* the app's lowercase italic tab subtitle */
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.12rem, 1.6vw, 1.3rem);
  color: var(--ember-hi);
  margin-top: 6px;
}
.sec-lede { margin-top: 18px; max-width: 36em; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem); line-height: 1.62; color: var(--text); }
.fine { font-size: 15px; line-height: 1.6; color: var(--text-mid); }
.microlabel { font: 700 11.5px/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mid); }

/* the flourish: the app's only divider, above each section heading */
.flourish {
  display: flex; align-items: center; gap: 12px;
  max-width: 560px; margin: 0 auto clamp(40px, 5vw, 56px); padding-inline: var(--gutter);
}
.flourish::before, .flourish::after { content: ""; flex: 1; height: 1px; }
.flourish::before { background: linear-gradient(90deg, transparent, var(--flourish-hair)); }
.flourish::after  { background: linear-gradient(90deg, var(--flourish-hair), transparent); }
.flourish i { width: 6px; height: 6px; background: var(--ember); rotate: 45deg; box-shadow: 0 0 10px var(--flourish-glow); }

/* the stamp: a card's category, letterpressed */
.stamp {
  display: inline-block;
  padding: 5px 10px 4px;
  border: 1px solid var(--stamp-border); border-radius: 5px;
  font: 700 11px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember);
}
.age { font-size: 13px; color: var(--text-mid); }

/* soft warm pool behind phone art */
.hero-halo, .art-halo {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 48%; translate: -50% -50%;
  width: min(720px, 120%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(242 145 60 / 0.17), rgb(221 93 44 / 0.06) 48%, transparent 72%);
}

/* ==========================================================================
   Header: the app's floating island
   ========================================================================== */
#hd { position: fixed; inset: 12px 0 auto; z-index: 50; pointer-events: none; }
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 26px;
  width: min(calc(var(--wrap) - 48px), calc(100% - 24px));
  height: var(--header-h);
  margin-inline: auto;
  padding: 0 10px 0 20px;
  border-radius: var(--r-pill);
  background: var(--island);
  border: 1px solid var(--island-border);
  box-shadow: var(--island-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  margin-right: auto;
  font-family: var(--display); font-size: 23px; font-weight: 450;
  color: var(--text-hi); text-decoration: none;
}
.brand .orb { --s: 24px; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a {
  font-size: 15px; color: var(--text-mid); text-decoration: none;
  padding-block: 12px;
  transition: color 200ms var(--ease);
}
.nav-links a:hover { color: var(--text-hi); }
.nav .btn-sm { border-radius: var(--r-pill); }
@media (max-width: 860px) {
  :root { --header-h: 60px; }
  .nav-links { display: none; }   /* the footer carries every section link */
  .nav { padding-left: 16px; }
  .brand { font-size: 21px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + 12px + clamp(48px, 7vw, 92px)) 0 clamp(72px, 9vw, 120px);
}
.hero::before {                   /* one warm pool behind the type */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 22% 78%, var(--warm-glow), transparent 70%),
    radial-gradient(50% 60% at 82% 38%, rgb(53 33 18 / 0.8), transparent 70%);
}
/* the app's SparkLayer: four sparks, its own constants */
.sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sparks i {
  position: absolute; left: var(--x); bottom: -10px;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--ember-hi); opacity: 0; filter: blur(0.5px);
  box-shadow: 0 0 8px rgb(249 200 128 / 0.8);
  animation: rise var(--dur) linear var(--delay) infinite;
}
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.4; }
  80% { opacity: 0.3; }
  100% { transform: translateY(-82vh); opacity: 0; }
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 12px; margin-bottom: 28px;
  border: 1px solid var(--island-border); border-radius: var(--r-pill);
  background: rgb(26 18 13 / 0.7);
  font-size: 14px; font-weight: 500; color: var(--text);
}
.hero-pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ember);
  box-shadow: 0 0 0 4px rgb(242 145 60 / 0.15), 0 0 12px rgb(242 145 60 / 0.7);
}
.hero h1 { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; font-weight: 420; }
.hero h1 em { font-weight: 420; }
.lede { margin: 26px 0 34px; max-width: 30em; font-size: clamp(1.1rem, 1.04rem + 0.32vw, 1.28rem); line-height: 1.6; color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; font-size: 16px; color: var(--text-hi); text-decoration: none;
}
.text-link svg { width: 18px; height: 18px; color: var(--ember); transition: translate 220ms var(--ease); }
.text-link:hover svg { translate: 4px 0; }
.hero-fine { margin-top: 18px; font-size: 15px; color: var(--text-mid); }

.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.store {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 18px 9px 14px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: rgb(17 11 7 / 0.55);
  color: var(--text-hi); text-decoration: none;
  transition: border-color 250ms var(--ease), background-color 250ms var(--ease);
}
a.store:hover { border-color: var(--accent-line); background: rgb(54 43 38 / 0.55); }
.store svg { width: 20px; height: 20px; flex: none; }
.store > span:not(.sr-only) { display: flex; flex-direction: column; line-height: 1.2; font-size: 15px; font-weight: 600; white-space: nowrap; }
.store small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); }
span.store { cursor: default; }

/* three real screens: the app's three tabs */
.hero-art { position: relative; height: clamp(560px, 46vw, 660px); }
.hero-art .device { position: absolute; top: 50%; left: 50%; }
.d-main { --sw: clamp(250px, 21vw, 290px); z-index: 3; translate: -50% -50%; }
.d-side { --sw: clamp(170px, 17vw, 236px); z-index: 1; filter: brightness(0.56) saturate(0.9); }
.d-left  { translate: calc(-50% - 57%) calc(-50% + 30px); rotate: -6deg; }
.d-right { translate: calc(-50% + 57%) calc(-50% + 30px); rotate: 6deg; }

@media (max-width: 900px) {
  .hero { padding-bottom: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-pill { margin-bottom: 22px; }
  .lede { margin: 20px 0 28px; }
  .hero-art {
    height: min(104vw, 450px);
    margin-inline: calc(var(--gutter) * -1);
    -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 97%);
    mask-image: linear-gradient(180deg, #000 64%, transparent 97%);
  }
  .hero-art .device { top: 0; }
  .d-main { --sw: min(47vw, 220px); translate: -50% 0; }
  .d-side { --sw: min(38vw, 180px); }
  .d-left  { translate: calc(-50% - 63%) 42px; }
  .d-right { translate: calc(-50% + 63%) 42px; }
}
@media (max-width: 520px) {
  .cta-row .btn { flex: 1 1 100%; }
  .cta-row .text-link { margin-inline: auto; }
  .stores .store { flex: 1 1 0; justify-content: center; padding-inline: 10px; }
}
@media (max-width: 359px) {
  .stores { flex-direction: column; }
}

/* ==========================================================================
   The problem + three rooms
   ========================================================================== */
.rooms-head { max-width: 760px; }
.rooms-head p { margin-top: 20px; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem); max-width: 36em; }
.rooms-head .aside { font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.38rem); color: var(--text-mid); }
.rooms-list {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(44px, 6vw, 68px);
}
.room { padding-top: 28px; border-top: 1px solid var(--line); }
.room-icon { display: grid; place-items: center; margin-bottom: 18px; }
.room-icon:not(.orb) {
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--ember-hi);
  background: var(--wash-tile);
  box-shadow: inset 0 0 0 1px var(--wash-border-soft);
}
.room-icon svg { width: 22px; height: 22px; }
.room-icon.orb { --s: 32px; margin: 6px 0 24px 6px; }
.room h3 { font-size: 1.65rem; }
.room .note { font-size: 1.06rem; margin-top: 2px; }
.room p:last-child { margin-top: 14px; color: var(--text); }
@media (max-width: 760px) {
  .rooms-list { grid-template-columns: 1fr; gap: 0; }
  .room { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; padding: 24px 0; }
  .room-icon { grid-row: 1 / span 3; margin: 0; }
  .room-icon.orb { margin: 6px; }
  .room p:last-child { margin-top: 8px; }
}

/* ==========================================================================
   The cards: three, shown the way the board shows them
   ========================================================================== */
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .sec-lede { margin-inline: auto; }
.sec-head.center h2 em { white-space: nowrap; }   /* the italic half never splits */
.sec-head.center h2, .sec-lede, .promises b, .promises span { text-wrap: balance; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pcard {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 22px 4px;
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
  border: 1px solid var(--paper-border);
  box-shadow: inset 0 1px 0 var(--paper-inset), 0 18px 40px -18px rgb(2 0 0 / 0.7);
}
.pcard::before {
  content: "\201C"; position: absolute; top: -6px; left: 14px;
  font: 400 70px/1 var(--display); color: var(--paper-ghost); pointer-events: none;
}
.pcard-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding-left: 28px; }
.pcard-top .age { margin-left: auto; }
.pcard .stamp { white-space: nowrap; }
.pcard h3 { font-size: 1.4rem; line-height: 1.22; margin: 16px 0 10px; letter-spacing: -0.005em; }
.pcard > p:not(.intent) { font-family: var(--display); font-size: 1.06rem; line-height: 1.6; color: var(--paper-ink); }
.intent {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0;
  font-family: var(--display); font-style: italic; font-size: 1.02rem;
  color: var(--text-mid);
}
.intent svg { width: 17px; height: 17px; color: var(--ember); flex: none; }
.acts {                              /* sits on the card's floor, so the three line up */
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  margin-top: auto; padding: 12px 0 14px;
  border-top: 1px solid var(--paper-hairline);
  font-size: 14px; color: var(--text-mid);
}
.acts > span { display: inline-flex; align-items: center; gap: 6px; }
.acts svg { width: 19px; height: 19px; flex: none; }
.acts .respond { margin-left: auto; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }
.acts .respond svg { width: 16px; height: 16px; }
.cards-note { margin-top: 24px; text-align: center; font-size: 14.5px; color: var(--text-mid); }
@media (max-width: 900px) {
  .pcards {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 12px;
    scrollbar-width: none;
  }
  .pcards::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 min(82vw, 360px); scroll-snap-align: start; scroll-snap-stop: always; }
  .pcards:focus-visible { outline-offset: -2px; }
}

/* ==========================================================================
   How it works. Desktop: the section holds still while you scroll through
   four steps, and each screen blooms open from the button you'd tap on the
   one before, the way the app moves on. Phones: one step per swipe.
   ========================================================================== */
@property --k { syntax: "<number>"; inherits: true; initial-value: 0; }

.story { --bloom: cubic-bezier(0.6, 0.05, 0.2, 1); }   /* catches, spreads, settles */
.story-sec { padding-bottom: 0; }
.story:not(.live) { padding-bottom: clamp(64px, 10vw, 128px); }
.story.live { height: 320vh; height: 320svh; }          /* the stage, plus 55 per step */
.story.live .story-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + 12px);
}
.story-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); align-items: center; width: 100%; }
.story-text h2 { max-width: 12em; font-size: clamp(2rem, 1.3rem + 2vw, 2.9rem); }

/* the step bar: a segment per step, filling as you scroll through it, so the
   page never feels stuck between two screens. 24px tall to hit */
.story-dots { display: flex; gap: 6px; margin: 24px 0 0 -2px; }
.story-dots button {
  position: relative; width: 48px; height: 24px; padding: 0; border: 0;
  background: none; cursor: pointer;
}
.story-dots button::before, .story-dots button::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 11px; height: 2px; border-radius: 2px;
}
.story-dots button::before { background: var(--line-strong); }   /* 3:1+, visible as a control */
.story-dots button::after {
  background: var(--ember);
  box-shadow: 0 0 8px rgb(242 145 60 / 0.5);
  transform-origin: left; transform: scaleX(var(--f, 0));
}

.steps { margin-top: 22px; }
.step { max-width: 30em; }
.story:not(.live):not(.m) .step + .step { margin-top: 40px; }   /* no JS: a plain list */
.story-n { font-family: var(--display); font-style: italic; font-size: 1.1rem; line-height: 26px; color: var(--ember); margin-bottom: 8px; }
.step h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem); margin-bottom: 14px; }
.step p:not(.story-n):not(.fine) { font-size: 1.08rem; line-height: 1.65; }
.step .fine {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 15.5px;
}
.step .fine svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--ember); }

/* copy: the old step lifts away quickly, then the new one settles in, line by
   line. The direction follows the scroll. All four stay in the reading order */
.story.live .steps { display: grid; }
.story.live .step { grid-area: 1 / 1; }
.story.live .step:not(.on) { pointer-events: none; }
.story.live .step > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 320ms var(--ease), transform 520ms var(--ease);
}
.story.live .step.past > * { transform: translateY(-12px); }
.story.live .step.on > * {
  opacity: 1; transform: none;
  transition-duration: 700ms, 900ms;
  transition-delay: 180ms;
}
.story.live .step.on > :nth-child(2) { transition-delay: 230ms; }
.story.live .step.on > :nth-child(3) { transition-delay: 280ms; }
.story.live .step.on > :nth-child(4) { transition-delay: 330ms; }

/* the phone */
.story-phone { position: relative; display: flex; justify-content: center; }
.story-phone .device { --sw: clamp(200px, min(24vw, calc((100svh - var(--header-h) - 120px) / 2.24)), 290px); }
.story-phone .device::after { z-index: 3; }   /* the island stays above every screen */
.story.live .story-phone .device { animation: drift 7s ease-in-out infinite; }
@keyframes drift { 50% { translate: 0 -6px; } }
.story-halo {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 150%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(240 122 46 / 0.24), rgb(221 93 44 / 0.07) 50%, transparent 72%);
  opacity: 0.6;
}
.story-stack {
  position: relative; display: grid; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--sw) * 0.135);
  background: #0a0604;
}
.story-face { grid-area: 1 / 1; position: relative; }
.story:not(.live):not(.m) .story-face:not(:first-child) { display: none; }

/* the bloom: the next screen opens from the button you'd tap, its soft edge
   catching a little warm light as it spreads, while the last screen sinks
   back into the glass. --k runs 0 to 1, and back again on the way up */
.story.live .story-face {
  --R: calc(var(--sw) * 2.35);                  /* past the farthest corner */
  --soft: calc(var(--sw) * 0.32);
  -webkit-mask-image: radial-gradient(circle at 50% var(--oy, 85%), #000 calc(var(--k) * var(--R) - var(--soft)), transparent calc(var(--k) * var(--R)));
          mask-image: radial-gradient(circle at 50% var(--oy, 85%), #000 calc(var(--k) * var(--R) - var(--soft)), transparent calc(var(--k) * var(--R)));
  transform: scale(1.06);
  transition: --k 1200ms var(--bloom), transform 1200ms var(--ease), filter 1200ms var(--ease);
}
.story.live .story-face:nth-child(2) { --oy: 82%; }     /* from "I think I'm starting to understand" */
.story.live .story-face:nth-child(3) { --oy: 87.4%; }   /* from "Post to Emberboard" */
.story.live .story-face:nth-child(4) { --oy: 83.6%; }   /* from "Send request anonymously" */
.story.live .story-face:first-child { -webkit-mask-image: none; mask-image: none; }
.story.live .story-face.on { --k: 1; transform: none; }
.story.live .story-face.under { transform: scale(0.92); filter: brightness(0.45) blur(2px); }
.story.live .story-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% var(--oy, 85%),
    transparent calc(var(--k) * var(--R) - var(--sw) * 0.6),
    rgb(255 176 100 / 0.55) calc(var(--k) * var(--R) - var(--sw) * 0.22),
    transparent calc(var(--k) * var(--R)));
  mix-blend-mode: screen;
  opacity: 0;
}
@supports (opacity: sin(1)) {   /* the warm edge lives only while the bloom moves */
  .story.live .story-face:not(:first-child)::after { opacity: sin(var(--k) * 3.1416); }
}
/* no animatable custom properties: a plain cross-fade instead */
.story.live.fade .story-face {
  -webkit-mask-image: none; mask-image: none; opacity: 0;
  transition: opacity 700ms var(--ease), transform 1000ms var(--ease), filter 700ms var(--ease);
}
.story.live.fade .story-face.on { opacity: 1; }
.story.live.fade .story-face::after { content: none; }
/* landing mid-story (reload, resize): no catch-up animation */
.story.instant .story-face, .story.instant .step > * { transition: none !important; }

/* phones, and windows too short for the whole stage */
@media (max-width: 900px), (max-height: 560px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }   /* minmax: the rail must not widen it */
  .story-text h2 { max-width: 13em; }
  .story.m .steps, .story.m .story-phone { display: none; }
  .story-phone { margin-top: 40px; }                      /* no JS: the steps, then one phone */
  .story-phone .device { --sw: min(54vw, 230px); }
  .story-dots { justify-content: center; gap: 2px; margin: 0 0 14px; }
  .story-dots button { width: 24px; transition: width 400ms var(--ease); }
  .story-dots button::before {
    left: 7px; right: 7px; top: 7px; height: 10px; border-radius: var(--r-pill);
    transition: background-color 400ms var(--ease);
  }
  .story-dots button::after { content: none; }
  .story-dots button.on { width: 44px; }
  .story-dots button.on::before { background: var(--ember); }
  .m-story { margin: 26px calc(var(--gutter) * -1) 0; }
  .m-rail {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    padding: 4px var(--gutter) 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .m-rail::-webkit-scrollbar { display: none; }
  .m-slide {
    flex: 0 0 86vw; max-width: 420px;
    scroll-snap-align: start; scroll-snap-stop: always;
    overflow: hidden;
    padding: 22px 20px 0;
    border-radius: var(--r-card);
    background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
    border: 1px solid var(--paper-border);
    box-shadow: inset 0 1px 0 var(--paper-inset);
  }
  .m-slide .step { max-width: none; }
  .m-slide .story-n { font-size: 1rem; margin-bottom: 4px; }
  .m-slide .step h3 { font-size: 1.45rem; margin-bottom: 10px; }
  .m-slide .step p:not(.story-n):not(.fine) { font-size: 15.5px; line-height: 1.58; }
  .m-phone {
    display: flex; justify-content: center; margin-top: 20px;
    height: calc(min(54vw, 210px) * 1.55); overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
    mask-image: linear-gradient(180deg, #000 70%, transparent);
  }
  .m-phone .device { --sw: min(54vw, 210px); }
}
/* the side notes are trimmed on phones only; short desktop windows keep them */
@media (max-width: 900px) { .m-slide .step .fine { display: none; } }

/* ==========================================================================
   Matching
   ========================================================================== */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split-copy h2 { max-width: 12em; }
.sec-lede i { font-family: var(--display); color: var(--ember-hi); }
.points { list-style: none; margin-top: 30px; }
.points li { display: grid; grid-template-columns: 26px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.points li:first-child { border-top: 0; }
.points svg { width: 24px; height: 24px; color: var(--ember); margin-top: 1px; }
.points b { display: block; font-weight: 600; color: var(--text-hi); font-size: 1.04rem; }
.points span { display: block; margin-top: 3px; color: var(--text-mid); font-size: 0.98rem; }
.split-art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 640px; }
.split-art .device { position: absolute; top: 50%; left: 50%; }
.pair-front { --sw: clamp(240px, 21vw, 280px); z-index: 2; translate: calc(-50% + 34px) -50%; rotate: 3deg; }
.pair-back  { --sw: clamp(200px, 17vw, 236px); z-index: 1; translate: calc(-50% - 92px) calc(-50% + 26px); rotate: -6deg; filter: brightness(0.56) saturate(0.9); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-art {
    order: -1; min-height: 0; height: min(100vw, 430px);
    margin-inline: calc(var(--gutter) * -1);
    -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 97%);
    mask-image: linear-gradient(180deg, #000 64%, transparent 97%);
  }
  .split-art .device { top: 0; }
  .pair-front { --sw: min(48vw, 220px); translate: calc(-50% + 22%) 0; }
  .pair-back  { --sw: min(40vw, 184px); translate: calc(-50% - 52%) 36px; }
}

/* ==========================================================================
   Privacy: four promises, nothing to read twice
   ========================================================================== */
.privacy-sec { background: var(--bg1); border-block: 1px solid var(--hairline); }
.promises {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
  text-align: center;
}
.p-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin: 0 auto 16px;
  border-radius: 50%;
  color: var(--ember-hi);
  background: var(--wash-tile);
  box-shadow: inset 0 0 0 1px var(--wash-border-soft);
}
.p-icon svg { width: 22px; height: 22px; }
.promises b { display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 450; line-height: 1.25; color: var(--text-hi); }
.promises li > span:last-child { display: block; max-width: 17em; margin: 8px auto 0; font-size: 15.5px; line-height: 1.55; color: var(--text-mid); }
@media (max-width: 900px) {
  .promises { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}
@media (max-width: 560px) {
  .promises { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .promises li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-soft); }
  .promises li:first-child { border-top: 0; padding-top: 0; }
  .p-icon { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; }
  .p-icon svg { width: 19px; height: 19px; }
  .promises b { font-size: 1.15rem; }
  .promises li > span:last-child { max-width: none; margin: 3px 0 0; }
}


/* ==========================================================================
   What Ember is not
   ========================================================================== */
.nots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 52px); margin-top: clamp(32px, 5vw, 52px); }
.not h3 { font-style: italic; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem); margin-bottom: 12px; }
.not p { color: var(--text-mid); }
.not a { color: var(--ember-hi); }
@media (max-width: 820px) {
  .nots { grid-template-columns: 1fr; gap: 0; }
  .not { padding: 22px 0; border-top: 1px solid var(--line-soft); }
  .not:first-child { border-top: 0; padding-top: 0; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-wrap { max-width: 820px; }
.faq-wrap h2 { text-align: center; }
.faq { margin-top: clamp(28px, 4vw, 44px); }
.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  display: flex; align-items: center; gap: 16px;
  min-height: 60px; padding: 16px 4px;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(1.14rem, 1.08rem + 0.3vw, 1.3rem); color: var(--text-hi);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; margin-left: auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--ember); border-bottom: 2px solid var(--ember);
  rotate: 45deg; translate: 0 -3px;
  transition: rotate 300ms var(--ease), translate 300ms var(--ease);
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq .a { padding: 0 4px 24px; max-width: 40em; }
.faq .a p { color: var(--text-mid); }
.faq .a p + p { margin-top: 12px; }
.faq .a a { color: var(--ember-hi); }

/* ==========================================================================
   Early access
   ========================================================================== */
.access { position: relative; padding-block: clamp(96px, 12vw, 150px) clamp(80px, 10vw, 120px); text-align: center; }
.access-inner { display: flex; flex-direction: column; align-items: center; }
.access-orb { --s: 54px; margin-bottom: 36px; }
.access h2 { max-width: 13em; }
.access-sub { margin: 20px auto 34px; max-width: 32em; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.18rem); }
#signup { width: 100%; max-width: 500px; text-align: left; }
.field-label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 8px 4px; }
.frow { display: flex; gap: 10px; }
#email {
  flex: 1; min-width: 0; height: 56px; padding: 0 20px;
  border-radius: var(--r-input);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-hi);
  font: 500 16px var(--ui);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
#email::placeholder { color: var(--text-mid); }
#email:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px rgb(203 104 0 / 0.25); }
#email[aria-invalid="true"] { border-color: #eb8376; }
.agree { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--text-mid); cursor: pointer; }
.agree input { width: 24px; height: 24px; margin: 0; accent-color: var(--ember); flex: none; cursor: pointer; }
.agree a { color: var(--text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* bot trap, never shown */
.msg { min-height: 24px; margin-top: 12px; font-size: 15px; color: var(--ember-hi); }
.msg:empty { min-height: 0; margin: 0; }
.form-closed { max-width: 30em; font-size: 17px; color: var(--text-mid); }
.stores-center { justify-content: center; margin-top: 34px; }
.store-note { margin-top: 12px; }
.safety { margin-top: 40px; max-width: 36em; font-size: 14.5px; line-height: 1.65; color: var(--text-mid); }
.safety a { color: var(--text); }
@media (max-width: 520px) {
  .frow { flex-direction: column; }
  .frow .btn { width: 100%; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { padding: 48px 0 56px; border-top: 1px solid var(--hairline); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.foot .brand { font-size: 21px; margin-right: 0; }
.foot .brand .orb { --s: 20px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot nav a { font-size: 14.5px; color: var(--text-mid); text-decoration: none; padding-block: 10px; }
.foot nav a:hover { color: var(--text-hi); }
.foot-tag { flex: 1 1 60%; font-size: 14px; color: var(--text-mid); }
.motion-toggle {
  min-height: 44px; padding: 0 16px; margin-left: auto;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: none; cursor: pointer;
  font: 500 14px var(--ui); color: var(--text-mid);
}
.motion-toggle:hover { color: var(--text-hi); }
.motion-toggle[aria-pressed="true"] { color: var(--ember-hi); border-color: var(--accent-line); }
.motion-toggle[hidden] { display: none; }
/* "Pause animations": the ambient loops stop; the story still follows you */
.still .sparks { display: none; }
.still .story-phone .device { animation: none; }
/* once a store is live, its row leads the access section */
.access-sub + .stores-center { margin: 0 0 34px; }
@media (max-width: 760px) {
  .foot-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Document pages (privacy.html, terms.html)
   ========================================================================== */
.doc {
  max-width: 680px; margin-inline: auto;
  padding: calc(var(--header-h) + 12px + clamp(48px, 8vw, 96px)) var(--gutter) clamp(64px, 9vw, 112px);
}
.doc h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); }
.doc .doc-scope {
  max-width: none;
  margin: 18px 0 40px; padding: 18px 20px;
  border-radius: 14px; background: var(--card); border: 1px solid var(--line-soft);
  font-size: 15.5px; color: var(--text-mid);
}
.doc h2 { font-size: 1.45rem; margin: 34px 0 10px; }
.doc p { color: var(--text); max-width: 38em; }
.doc p + p { margin-top: 12px; }
.doc a { color: var(--ember-hi); }
.foot nav a[aria-current="page"] { color: var(--text-hi); }

/* ==========================================================================
   Phones: same page, less scrolling
   ========================================================================== */
@media (max-width: 760px) {
  .sec { padding-block: 64px; }
  .flourish { margin-bottom: 32px; }
  .sec-head { margin-bottom: 28px; }
  .sec-head.center, .sec-head.center .sec-lede { margin-inline: 0; text-align: left; }
  .rooms-list { margin-top: 32px; }
  .cards-note { margin-top: 12px; text-align: left; }
  /* matching: a shorter peek at the two phones */
  .split-art { height: min(84vw, 340px); }
  .points { margin-top: 18px; }
  .points li { padding: 12px 0; }
  .access { padding-block: 72px 64px; }
  .access-orb { margin-bottom: 26px; }
  .safety { margin-top: 28px; }
}

/* ==========================================================================
   Reduced motion: no ambient loops, no movement; fades stay, gently
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sparks { display: none; }
  .story-dots button, .story-dots button::before { transition: none; }
  .story.live .story-phone .device { animation: none; }
  .story.live .story-face { -webkit-mask-image: none; mask-image: none; opacity: 0; transition: opacity 300ms linear; }
  .story.live .story-face.on { opacity: 1; transform: none; }
  .story.live .story-face.under { transform: none; filter: none; }
  .story.live .story-face::after { content: none; }
  .story.live .step > *, .story.live .step.past > *, .story.live .step.on > * { transform: none; transition: opacity 300ms linear; }
  .text-link svg { transition: none; }
  .faq summary::after { transition: none; }
}