/* ==========================================================================
   StilledInk — Scenes (cinematic homepage layer)
   Loaded only on index.html, on top of tokens/base/components.
   Atmosphere, oversized type, glass UI fragments, sticky scroll scenes.
   ========================================================================== */

/* --- Scene scaffolding --------------------------------------------------- */
.scene { position: relative; }
/* Contain glow blobs horizontally. `clip` (not `hidden`) avoids creating a
   scroll container, so the sticky phone narrator keeps working. */
.product, .support2 { overflow-x: clip; }

/* Atmospheric light field (decorative). Drifts slowly. */
.field {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.9;
  will-change: transform;
}
.field--accent { background: radial-gradient(circle at 50% 50%, rgba(62,110,158,0.28), transparent 68%); }
.field--accent-soft { background: radial-gradient(circle at 50% 50%, rgba(62,110,158,0.16), transparent 70%); }
.field--ember { background: radial-gradient(circle at 50% 50%, rgba(185,138,94,0.12), transparent 72%); }
.field--cool { background: radial-gradient(circle at 50% 50%, rgba(111,163,206,0.14), transparent 72%); }

@keyframes drift-a {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(3%, -4%, 0) scale(1.08); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0,0,0) scale(1.05); }
  50% { transform: translate3d(-4%, 3%, 0) scale(1); }
}
.field--a { animation: drift-a 26s ease-in-out infinite; }
.field--b { animation: drift-b 32s ease-in-out infinite; }

/* Edge vignette to deepen the ink and frame each scene */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(8,9,11,0.55) 100%),
    linear-gradient(180deg, rgba(8,9,11,0.6), transparent 18%, transparent 82%, rgba(8,9,11,0.85));
}

.scene__inner { position: relative; z-index: 3; }

/* --- Oversized type ------------------------------------------------------ */
.type-xl {
  font-family: var(--font-serif);
  font-weight: 460;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--paper-50);
}

/* --- Reveal primitive (JS-gated; visible by default) --------------------- */
.cinema-on [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition: opacity var(--dur-cine) var(--ease-quiet),
              transform var(--dur-cine) var(--ease-quiet),
              filter var(--dur-cine) var(--ease-quiet);
  will-change: opacity, transform, filter;
}
.cinema-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ==========================================================================
   SCENE 1 — HERO STAGE
   ========================================================================== */
.hero-stage {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(8px, 4vh, 40px));
  padding-bottom: clamp(48px, 8vh, 96px);
  overflow: hidden;
}
.hero-stage .field--1 { width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; top: -18%; right: -10%; }
.hero-stage .field--2 { width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; bottom: -24%; left: -14%; }

.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  width: 100%;
}

.hero-lead { max-width: 30ch; }
.hero-eyebrow { display: inline-block; margin-bottom: var(--sp-5); }
.hero-title {
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  margin-bottom: var(--sp-5);
}
.hero-title .line { display: block; white-space: nowrap; }
.hero-title .line > span { display: block; }
.hero-tagline {
  display: block;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--paper-400);
  font-size: clamp(1.3rem, 2.6vw, 2.05rem);
  letter-spacing: -0.01em;
  margin-top: var(--sp-4);
}
.hero-body { max-width: 38ch; margin-bottom: var(--sp-7); color: var(--paper-200); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.hero-scrollcue {
  margin-top: var(--sp-8);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-600);
}
.hero-scrollcue .rail {
  width: 1px; height: 34px;
  background: linear-gradient(var(--paper-400), transparent);
  position: relative; overflow: hidden;
}
.hero-scrollcue .rail::after {
  content: ""; position: absolute; left: 0; top: -34px;
  width: 1px; height: 34px; background: var(--accent-300);
  animation: cue 2.4s var(--ease-quiet) infinite;
}
@keyframes cue { 0% { transform: translateY(0); } 100% { transform: translateY(68px); } }

/* Hero stage: phone + floating fragments */
.hero-figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 64vh, 680px);
}
.hero-figure .field--glowphone {
  width: 78%; height: 70%;
  top: 14%; left: 11%;
  filter: blur(70px);
}

/* --- Phone (premium upgrade) -------------------------------------------- */
.phone-pro {
  position: relative;
  z-index: 4;
  width: clamp(248px, 26vw, 312px);
  aspect-ratio: 9 / 19.5; /* Modern flagship aspect ratio */
  border-radius: 16px; /* Boxy Samsung S-Ultra style */
  padding: 4px; /* Ultra-thin bezel thickness */
  background:
    linear-gradient(160deg, #8a8e94 0%, #303338 30%, #1c1e22 100%); /* Prominent Titanium frame */
  box-shadow:
    var(--shadow-float),
    inset 0 0 0 2px rgba(255,255,255,0.15), /* strong metallic edge highlight */
    inset 0 0 0 3px #111, /* inner display gap */
    0 2px 1px rgba(246,244,239,0.15) inset,
    0 0 0 1px rgba(0,0,0,0.8);
}

/* Side hardware buttons (power, volume rocker) */
.phone-pro::after {
  content: "";
  position: absolute;
  top: 0; right: -3px; bottom: 0; width: 3px;
  background: 
    linear-gradient(#8a8e94, #666a70) 0 26% / 100% 32px no-repeat, /* power */
    linear-gradient(#666a70, #4a4e54) 0 38% / 100% 64px no-repeat; /* volume */
  border-radius: 0 3px 3px 0;
}

.phone-pro::before { /* side light rim */
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(115deg, rgba(255,255,255,0.3), transparent 22%, transparent 78%, rgba(255,255,255,0.1));
  pointer-events: none; z-index: 6;
}
.phone-pro__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 12px; /* matched to boxy bezel */
  overflow: hidden;
  background: radial-gradient(120% 70% at 50% -8%, #16191f, var(--ink-900) 60%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.8);
  display: flex; flex-direction: column;
}
.phone-pro__island {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; /* Small punch-hole camera */
  background: #000; z-index: 7;
  box-shadow: inset 0 -2px 3px rgba(255,255,255,0.15), 0 0 0 1px rgba(0,0,0,0.9);
}
.phone-float { animation: floaty 8s var(--ease-soft) infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Stacked product states inside the phone */
.states { position: relative; flex: 1; }
.state {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 40px 15px 10px;
  gap: 11px;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  filter: blur(8px);
  transition: opacity var(--dur-slow) var(--ease-quiet),
              transform var(--dur-slow) var(--ease-quiet),
              filter var(--dur-slow) var(--ease-quiet);
  pointer-events: none;
  overflow: hidden;
}
.state.is-active { opacity: 1; transform: none; filter: blur(0); }
/* Without JS / reduced-motion: show the Today state by default */
:root:not(.cinema-on) .state { transition: none; }
:root:not(.cinema-on) .state--today { opacity: 1; transform: none; filter: none; }

.scr-head { display: flex; flex-direction: column; gap: 2px; }
.scr-head h4 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--paper-50); font-weight: 500; }
.scr-head .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--paper-400); letter-spacing: 0.02em; }
.scr-label2 { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-600); font-weight: 600; }

.mini-input {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(20,23,27,0.9); border: 1px solid var(--line);
  color: var(--paper-400); font-size: 12px;
}
.mini-input svg { width: 13px; height: 13px; color: var(--accent-300); flex: none; }

.glass-note {
  background: linear-gradient(180deg, rgba(39,44,52,0.72), rgba(28,32,38,0.72));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: inset 0 1px 0 rgba(246,244,239,0.04);
}
.glass-note .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.glass-note .ttl { font-family: var(--font-serif); font-size: 13.5px; color: var(--paper-50); font-weight: 500; }
.glass-note .tm { font-family: var(--font-mono); font-size: 9px; color: var(--paper-600); flex: none; }
.glass-note .pv { font-size: 11px; line-height: 1.5; color: var(--paper-400); }

/* editor state */
.editor-area { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.editor-line { height: 8px; border-radius: var(--r-full); background: var(--ink-600); }
.editor-line.w95 { width: 95%; } .editor-line.w80 { width: 80%; } .editor-line.w60 { width: 60%; }
.editor-line.accent { background: linear-gradient(90deg, var(--accent-500), var(--accent-700)); width: 42%; height: 10px; }
.editor-text { font-size: 12px; line-height: 1.6; color: var(--paper-200); }
.caret { color: var(--accent-300); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* reflection prompt */
.prompt-card {
  margin-top: auto;
  background: linear-gradient(180deg, rgba(62,110,158,0.16), rgba(28,32,38,0.85));
  border: 1px solid rgba(111,163,206,0.28);
  border-radius: var(--r-lg);
  padding: 13px;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.4);
}
.prompt-card .k { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-300); }
.prompt-card .q { font-family: var(--font-serif); font-size: 14px; color: var(--paper-50); margin-top: 4px; }

/* reminders */
.rem-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: var(--r-md);
  background: rgba(20,23,27,0.85); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--paper-200);
}
.rem-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-500); flex: none; }
.rem-row time { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--paper-400); }
.rem-row .toggle { width: 26px; height: 15px; border-radius: var(--r-full); background: var(--ink-600); position: relative; flex: none; }
.rem-row .toggle.on { background: var(--accent-700); }
.rem-row .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper-50); transition: left var(--dur-base) var(--ease-quiet); }
.rem-row .toggle.on::after { left: 13px; }

/* organise */
.folder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.folder {
  border-radius: var(--r-md); padding: 11px; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(39,44,52,0.7), rgba(20,23,27,0.7));
  display: flex; flex-direction: column; gap: 8px; min-height: 64px;
}
.folder .nm { font-size: 11px; color: var(--paper-200); }
.folder .ct { font-family: var(--font-mono); font-size: 9px; color: var(--paper-600); margin-top: auto; }
.folder .ic { width: 16px; height: 16px; color: var(--accent-300); }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* tab bar */
.scr-tabs2 {
  display: flex; justify-content: space-around; align-items: center;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(14,16,19,0.92);
}
.scr-tabs2 i { width: 17px; height: 17px; color: var(--paper-600); display: block; }
.scr-tabs2 i.on { color: var(--paper-50); }

/* --- Floating glass fragments ------------------------------------------- */
.frag {
  position: absolute;
  z-index: 5;
  border-radius: var(--r-lg);
  padding: 12px 14px;
  background: linear-gradient(160deg, rgba(39,44,52,0.78), rgba(20,23,27,0.66));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(246,244,239,0.07);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  will-change: transform;
}
.frag::after { /* faint glow halo */
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: 0 0 40px var(--accent-glow); pointer-events: none; opacity: 0.7;
}
.frag__k { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-300); margin-bottom: 5px; display: block; }
.frag__t { font-family: var(--font-serif); color: var(--paper-50); font-size: 13.5px; }
.frag__d { font-size: 11px; color: var(--paper-400); margin-top: 2px; }
.frag__row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--paper-200); }
.frag__row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-500); }
.frag__row time { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--paper-400); }
.frag .chip--scripture { font-size: 9px; }

/* hero fragment positions */
.frag--reminder { top: 4%; right: -2%; width: 188px; }
.frag--reflect  { bottom: 12%; left: -6%; width: 196px; }
.frag--tag      { bottom: -2%; right: 4%; width: 168px; }
.frag--meta     { top: 30%; left: -10%; width: 150px; }

/* gentle individual float for fragments */
.frag-float { animation: floaty 9s var(--ease-soft) infinite; }
.frag-float.d1 { animation-duration: 10.5s; animation-delay: -2s; }
.frag-float.d2 { animation-duration: 12s; animation-delay: -4s; }
.frag-float.d3 { animation-duration: 11s; animation-delay: -1s; }

/* ==========================================================================
   SCENE 2 — THOUGHT SPACE (pinned, scrubbed oversized words)
   ========================================================================== */
.thought { position: relative; }
.cinema-on .thought { height: 360vh; }       /* scroll runway for the scrub */
.thought__pin {
  position: relative;
  height: auto;
  display: grid;
  place-items: center;
  padding-block: var(--section-y);
  text-align: center;
  overflow-x: clip;
}
.cinema-on .thought__pin {
  position: sticky; top: 0;
  height: 100svh;
  padding-block: 0;
}
.thought .field--1 { width: 70vw; height: 70vw; max-width: 820px; max-height: 820px; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.thought__words { position: relative; z-index: 3; display: grid; place-items: center; width: 100%; }
.thought__word {
  grid-area: 1 / 1;
  font-family: var(--font-serif);
  font-weight: 440;
  font-size: clamp(3.4rem, 13vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--paper-50);
  padding-inline: var(--gutter);
}
/* Default (no cinema): show as a calm stacked editorial list */
:root:not(.cinema-on) .thought__words { gap: clamp(8px, 2vh, 24px); }
:root:not(.cinema-on) .thought__word { grid-area: auto; font-size: clamp(2.6rem, 9vw, 6rem); opacity: 1; }
:root:not(.cinema-on) .thought__word.is-closing { color: var(--paper-400); font-size: clamp(1.8rem, 5vw, 3.2rem); margin-top: var(--sp-5); }

/* cinema scrub baseline: words stacked, JS drives opacity/blur/translate */
.cinema-on .thought__word { opacity: 0; will-change: transform, opacity, filter; }
.thought__word.is-closing { font-style: italic; color: var(--paper-200); font-size: clamp(2rem, 6vw, 5rem); letter-spacing: -0.02em; }
.thought__word .accent { color: var(--accent-300); }

/* progress dots */
.thought__progress {
  position: absolute; z-index: 4; right: clamp(16px, 4vw, 48px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
}
:root:not(.cinema-on) .thought__progress { display: none; }
.thought__progress i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-600); transition: background var(--dur-base) var(--ease-quiet), transform var(--dur-base) var(--ease-quiet); }
.thought__progress i.on { background: var(--accent-300); transform: scale(1.5); }

/* drifting fragments in thought space */
.thought .frag--t1 { top: 16%; left: 7%; width: 176px; }
.thought .frag--t2 { bottom: 16%; right: 8%; width: 184px; }
@media (max-width: 860px) { .thought .frag--t1, .thought .frag--t2 { display: none; } }

/* ==========================================================================
   SCENE 3 — PRODUCT SYSTEM (sticky phone narrator + beats)
   ========================================================================== */
.product { position: relative; padding-block: var(--section-y); }
.product .field--1 { width: 56vw; height: 56vw; max-width: 680px; max-height: 680px; top: 8%; right: -16%; }

.product__grid {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.product__stage {
  position: sticky;
  top: calc(var(--nav-h) + 6vh);
  height: fit-content;
  display: grid; place-items: center;
  min-height: 0;
}
.product__stage .field--glowphone { width: 80%; height: 64%; top: 16%; left: 10%; filter: blur(64px); }

.product__beats { display: flex; flex-direction: column; }
.beat {
  min-height: 78vh;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-4);
  max-width: 44ch;
}
.beat__index { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--accent-300); letter-spacing: 0.1em; }
.beat__title { font-size: clamp(2rem, 3.4vw, 3rem); }
.beat__body { color: var(--paper-400); }
.beat__frag { margin-top: var(--sp-3); }

/* product section header */
.product__head { position: relative; z-index: 3; max-width: 52ch; margin-bottom: var(--sp-7); }

/* ==========================================================================
   SCENE 4 — FAITH-AWARE MOMENT
   ========================================================================== */
.faith2 { position: relative; padding-block: var(--section-y); overflow-x: clip; }
.faith2 .field--ember1 { width: 52vw; height: 52vw; max-width: 600px; max-height: 600px; left: -14%; bottom: -28%; }
.faith2__grid {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px); align-items: center;
}
.faith2__text { max-width: 30ch; }
.faith2__note {
  position: relative;
  background: linear-gradient(180deg, rgba(39,44,52,0.7), rgba(20,23,27,0.7));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-float);
  max-width: 440px;
}
.faith2__note h4 { font-family: var(--font-serif); font-size: 1.4rem; color: var(--paper-50); margin-bottom: 4px; }
.faith2__note .meta { font-family: var(--font-mono); font-size: 11px; color: var(--paper-600); margin-bottom: var(--sp-4); }
.faith2__note p { font-size: var(--fs-small); color: var(--paper-200); margin-bottom: var(--sp-4); }
/* the scripture chip arrives after the note (JS adds .is-in) */
.cinema-on .faith2__chip { opacity: 0; transform: translateY(10px); filter: blur(6px); transition: all var(--dur-slow) var(--ease-quiet) 200ms; }
.cinema-on .faith2__chip.is-in { opacity: 1; transform: none; filter: none; }
.faith2__note .callout { margin-top: var(--sp-4); font-size: var(--fs-caption); color: var(--paper-400); display: flex; align-items: center; gap: 8px; }
.faith2__note .callout::before { content: ""; width: 22px; height: 1px; background: var(--ember-400); flex: none; }

/* ==========================================================================
   SCENE 5 — BIBLE-AWARE (Features page)
   ========================================================================== */
.feature-bible-aware {
  position: relative;
  padding-block: clamp(64px, 10vh, 120px);
  overflow-x: clip;
  background: var(--ink-850);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: clamp(32px, 5vh, 64px);
}

.feature-bible-aware::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(246, 244, 239, 0.25) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 85%, rgba(246, 244, 239, 0.20) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 70%, rgba(246, 244, 239, 0.15) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 25%, rgba(111, 163, 206, 0.15) 0 1px, transparent 1.5px),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(62, 110, 158, 0.08), transparent 70%);
  opacity: 0.8;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, transparent 100%);
}

.feature-bible-aware .wrap {
  position: relative;
  z-index: 2;
}

.feature-bible-aware__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(48px, 7vw, 104px);
  align-items: start;
}
.feature-bible-aware__text .eyebrow { display: block; margin-bottom: var(--sp-4); }
.feature-bible-aware__text h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
}
.feature-bible-aware__text .muted {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 36ch;
}
.feature-bible-aware__accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.feature-accordion__item {
  border-bottom: 1px solid var(--line);
}
.feature-accordion__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  transition: color var(--dur-fast) var(--ease-quiet);
}
.feature-accordion__item summary::-webkit-details-marker { display: none; }
.feature-accordion__item summary:focus-visible {
  outline: 2px solid var(--accent-300);
  outline-offset: 4px;
  border-radius: 4px;
}
.feature-accordion__title {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  color: var(--paper-50);
  letter-spacing: -0.005em;
}
.feature-accordion__icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--paper-400);
  transition: transform var(--dur-base) var(--ease-quiet),
              color var(--dur-fast) var(--ease-quiet);
}
.feature-accordion__icon svg { width: 16px; height: 16px; }
.feature-accordion__item summary:hover .feature-accordion__title,
.feature-accordion__item summary:hover .feature-accordion__icon { color: var(--accent-300); }
.feature-accordion__item[open] .feature-accordion__icon { transform: rotate(180deg); }
.feature-accordion__item > p {
  margin: 0;
  padding: 0 0 var(--sp-5);
  font-size: var(--fs-small);
  color: var(--paper-400);
  line-height: 1.6;
  max-width: 56ch;
}

@media (max-width: 860px) {
  .feature-bible-aware__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
  .feature-bible-aware__text .muted { max-width: 100%; }
}

/* ==========================================================================
   SCENE 6 — SUPPORT / CONTROL (reused trust + cards, lighter motion)
   ========================================================================== */
.support2 { position: relative; padding-block: var(--section-y); }

/* ==========================================================================
   SCENE 6 — CLOSING
   ========================================================================== */
.closing {
  position: relative;
  min-height: 96svh;
  display: flex; align-items: center;
  text-align: center;
  overflow-x: clip;
  padding-block: var(--section-y);
}
.closing .field--1 { width: 80vw; height: 60vw; max-width: 860px; max-height: 620px; left: 50%; top: 46%; transform: translate(-50%,-50%); }
.closing .vignette { background: radial-gradient(120% 100% at 50% 50%, transparent 38%, rgba(8,9,11,0.8) 100%); }
.closing__inner { position: relative; z-index: 3; margin-inline: auto; }
.closing__phone { margin: 0 auto var(--sp-8); }
.closing__line {
  font-size: clamp(2.6rem, 7vw, 6rem);
  letter-spacing: -0.03em;
  margin-inline: auto;
  max-width: 16ch;
}
.closing__body { margin: var(--sp-5) auto var(--sp-7); max-width: 42ch; color: var(--paper-200); }
.closing__actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }
.closing__note {
  margin-top: var(--sp-6);
  font-size: var(--fs-caption);
  color: var(--paper-600);
  /* Small ember tick echoes the hero glow at the bottom of the page so the
     warm hero + cool ink body read as one brand system. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.closing__note::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember-400);
  opacity: 0.7;
  box-shadow: 0 0 10px var(--ember-soft);
  flex: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero-lead { max-width: 100%; }
  .hero-figure { order: 2; min-height: clamp(420px, 70vh, 560px); margin-top: var(--sp-4); }
  .frag--meta, .frag--reflect { display: none; }          /* declutter on mobile */
  .frag--reminder { top: 0; right: -2%; transform: scale(0.92); }
  .frag--tag { bottom: 2%; right: 0; transform: scale(0.92); }

  .product__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .product__stage { position: sticky; top: calc(var(--nav-h) + 2vh); margin-bottom: var(--sp-6); }
  .beat { min-height: 64vh; max-width: 100%; }

  .faith2__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .faith2__note { max-width: 100%; }
  .faith2__text { max-width: 100%; }

  .cinema-on .thought { height: 300vh; }
}

@media (max-width: 560px) {
  .hero-actions .btn, .closing__actions .btn { flex: 1 1 auto; }
  .product__stage { transform: scale(0.92); transform-origin: top center; }
}

/* ==========================================================================
   ATMOSPHERE ADDITIONS
   ========================================================================== */
.field--sage { background: radial-gradient(circle at 50% 50%, var(--sage-glow), transparent 72%); }

/* --- Animated ink current (behind hero / closing phone) ------------------ */
.ink {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 96%; height: 86%;
  top: 8%; left: 2%;
  filter: blur(48px);
  opacity: 0.92;
}
.ink span {
  position: absolute; inset: 0;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  will-change: transform, border-radius;
  animation: ink-morph 24s ease-in-out infinite;
}
.ink span:nth-child(1) { background: radial-gradient(circle at 42% 40%, rgba(62,110,158,0.50), transparent 68%); }
.ink span:nth-child(2) { background: radial-gradient(circle at 60% 56%, rgba(126,155,134,0.34), transparent 72%); animation-duration: 30s; animation-direction: reverse; }
.ink span:nth-child(3) { background: radial-gradient(circle at 52% 36%, rgba(111,163,206,0.40), transparent 62%); animation-duration: 19s; }
@keyframes ink-morph {
  0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; transform: rotate(0deg) scale(1); }
  33% { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; transform: rotate(7deg) scale(1.08); }
  66% { border-radius: 55% 45% 62% 38% / 42% 56% 44% 58%; transform: rotate(-6deg) scale(0.95); }
}

/* --- Word-chips that scrub beside the thought-space words ---------------- */
.thought__word { position: relative; }
.wchip {
  position: absolute;
  top: 6%;
  right: clamp(-4px, 2vw, 40px);
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: clamp(0.6rem, 1vw, 0.78rem);
  letter-spacing: 0.02em;
  color: var(--accent-300);
  background: linear-gradient(160deg, rgba(39,44,52,0.86), rgba(20,23,27,0.7));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  padding: 6px 11px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}
.wchip svg { width: 12px; height: 12px; }
:root:not(.cinema-on) .wchip { position: static; transform: none; display: inline-flex; margin-left: 12px; vertical-align: middle; }
@media (max-width: 700px) { .wchip { display: none; } }

/* ==========================================================================
   SCENE — CARD THEATRE (oversized background line + floating product cards)
   ========================================================================== */
.theatre {
  position: relative;
  min-height: 130vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: clip;
  padding-block: var(--section-y);
}
.theatre .field--1 { width: 64vw; height: 64vw; max-width: 760px; max-height: 760px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.theatre .field--2 { width: 40vw; height: 40vw; max-width: 460px; max-height: 460px; bottom: 6%; right: 4%; }

.theatre__stage {
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  max-width: var(--maxw);
  margin-inline: auto;
  min-height: clamp(420px, 70vh, 680px);
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
}
.theatre__bg {
  grid-area: 1 / 1;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 450;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--paper-50);
  max-width: 14ch;
  position: relative;
  z-index: 2;
}
.theatre__bg .soft { color: var(--paper-400); }

/* floating cards overlaid on the big line */
.theatre__cards { grid-area: 1 / 1; position: relative; width: 100%; height: 100%; z-index: 3; }
.theatre .frag { position: absolute; }
.tc1 { top: 2%;  left: 1%;  width: 210px; }
.tc2 { top: 12%; right: 0%; width: 200px; }
.tc3 { bottom: 16%; left: 3%; width: 190px; }
.tc4 { bottom: 2%; right: 4%; width: 216px; }
.tc5 { top: 44%; left: -2%; width: 176px; }
.tc6 { top: 40%; right: -2%; width: 184px; }

@media (max-width: 860px) {
  .theatre { min-height: auto; }
  .theatre__stage { display: block; min-height: 0; }
  .theatre__bg { max-width: 100%; margin-bottom: var(--sp-7); }
  .theatre__cards { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .theatre .frag { position: static; width: auto !important; }
  .tc5, .tc6 { display: none; }
}
@media (max-width: 520px) {
  .theatre__cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PRODUCT BEATS — floating UI fragment per feature moment (depth/overlap)
   ========================================================================== */
.beat { position: relative; }
.beat__frag {
  margin-top: var(--sp-5);
  width: min(330px, 100%);
  position: relative;
  z-index: 2;
}
.beat__frag .frag {
  position: relative;
  width: 100%;
}
/* nudge the fragment to overlap toward the sticky phone for depth (desktop) */
@media (min-width: 861px) {
  .beat__frag { margin-left: clamp(-120px, -8vw, -40px); }
}

/* ==========================================================================
   CLOSING + FOOTER as one integrated poster (homepage only)
   ========================================================================== */
.closing { padding-bottom: clamp(40px, 6vh, 80px); }
.footer {
  background: transparent;       /* let the ink world show through */
  border-top-color: var(--line);
  position: relative;
  overflow-x: clip;
}
.footer .field--foot {
  position: absolute; z-index: 0; pointer-events: none;
  width: 80vw; height: 50vw; max-width: 900px; max-height: 520px;
  left: 50%; top: -40%; transform: translateX(-50%);
  border-radius: 50%; filter: blur(100px);
  background: radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 70%);
}
.footer .wrap { position: relative; z-index: 2; }

/* ==========================================================================
   REDUCED MOTION — disable all scrub/float/drift; keep content legible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .field--a, .field--b, .phone-float, .frag-float, .hero-scrollcue .rail::after, .caret, .ink span { animation: none !important; }
  .footer .field--foot { display: none; }
  .cinema-on .thought { height: auto; }
  .cinema-on .thought__pin { position: relative; height: auto; padding-block: var(--section-y); }
  .cinema-on .thought__word { position: relative; grid-area: auto; opacity: 1 !important; transform: none !important; filter: none !important; }
  .product__stage { position: relative; top: auto; }
}

/* ============================================================================
   SECTION BLEND  (later sections only)

   Goal: the homepage should read as one continuous cinematic scroll world,
   not stacked rectangles. Each later section gets a feathered atmospheric
   layer at its top edge and (where useful) at its bottom edge. The layers
   are pure CSS pseudo-elements — no markup, no JS, no assets. mask-image
   feathers BOTH ends of each gradient so nothing reads as a rectangle.

   The hero blend (.cosmic / .cosmic__fade / .atmosphere-bridge) and the
   thought scene are intentionally excluded — those are owned upstream and
   the user confirmed they are already acceptable.
   ============================================================================ */

/* Top blend — atmospheric pickup at the head of each later section.
   Sits at z-index: 1 inside each section's relative box. Content in those
   sections already uses z-index: 3 (.product__head / .product__grid /
   .theatre__stage / .faith2__grid / .closing__inner), so the veil stays
   beneath text. For .support2, see the .wrap z-index bump below. */
.theatre::before,
.product::before,
.product-glance::before,
.faith2::before,
.support2::before,
.closing::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(-100px, -15vh, -180px);
  height: clamp(240px, 35vh, 480px);
  pointer-events: none;
  z-index: 1;
  background:
    /* Faint cool pickup so the colour temperature feels continuous. */
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(62, 110, 158, 0.05), transparent 75%),
    /* Soft dark veil deepens toward the top edge then dissolves downward. */
    linear-gradient(180deg,
      rgba(11, 12, 14, 0.35) 0%,
      rgba(11, 12, 14, 0.16) 35%,
      rgba(11, 12, 14, 0.06) 65%,
      transparent 100%);
  /* Mask feathers BOTH ends so the layer has no rectangular shape. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 1) 22%,
    rgba(0, 0, 0, 1) 70%,
    transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 1) 22%,
    rgba(0, 0, 0, 1) 70%,
    transparent 100%);
}

/* Bottom blend — mirror of the top, lets the eye hand off downward without
   a hard cut. Sections with content centred vertically (theatre, faith2,
   product, support2) all have empty padding here — no risk of veiling text. */
.theatre::after,
.product::after,
.product-glance::after,
.faith2::after,
.support2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(-100px, -15vh, -180px);
  height: clamp(240px, 35vh, 480px);
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(62, 110, 158, 0.05), transparent 75%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(11, 12, 14, 0.06) 35%,
      rgba(11, 12, 14, 0.16) 65%,
      rgba(11, 12, 14, 0.35) 100%);
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 1) 78%,
    transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 1) 78%,
    transparent 100%);
}

/* Faith-aware leans ember in its atmosphere (the .field--ember1 glow). Tint
   its blends with a gentle warm note so the colour temperature reads
   continuous when entering/leaving the faith scene. */
.faith2::before {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(185, 138, 94, 0.06), transparent 75%),
    linear-gradient(180deg,
      rgba(11, 12, 14, 0.32) 0%,
      rgba(11, 12, 14, 0.14) 35%,
      rgba(11, 12, 14, 0.05) 65%,
      transparent 100%);
}

.faith2::after {
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(185, 138, 94, 0.04), transparent 75%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(11, 12, 14, 0.05) 35%,
      rgba(11, 12, 14, 0.14) 65%,
      rgba(11, 12, 14, 0.32) 100%);
}

/* Closing already has its own ink atmosphere via .closing .field--1 and the
   vignette; keep the top blend extra soft so we don't compete with it. */
.closing::before {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(185, 138, 94, 0.05), transparent 78%),
    linear-gradient(180deg,
      rgba(11, 12, 14, 0.28) 0%,
      rgba(11, 12, 14, 0.10) 40%,
      transparent 100%);
}

/* support2 content (.section-head / .trust-points / .cards) is not wrapped in
   a positioned z-indexed container. Bump its direct .wrap above the very
   faint top/bottom veils to guarantee no overlap, ever. */
.support2 > .wrap { position: relative; z-index: 2; }

/* ============================================================================
   PRODUCT GLANCE — stacked real-screen product panels.
   ============================================================================ */
.product-glance {
  position: relative;
  padding-block: var(--section-y);
  overflow-x: clip;
}
.product-glance > .wrap {
  position: relative;
  z-index: 2;
  max-width: min(1320px, calc(100vw - 72px));
}

.product-glance__head {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto var(--sp-7);
}
.product-glance__head .eyebrow {
  display: block;
  margin-bottom: var(--sp-4);
}
.product-glance__head h2 {
  font-family: var(--font-serif);
  font-weight: 460;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--paper-50);
}
.product-glance__head p {
  margin-top: var(--sp-4);
  color: var(--paper-400);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.product-stack {
  display: grid;
  gap: clamp(34px, 6vh, 72px);
  padding-bottom: clamp(64px, 12vh, 120px);
}

.product-panel {
  position: sticky;
  transform-origin: top center;
  min-height: clamp(380px, 28vw, 440px);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 1.08fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 3vw, 40px) clamp(34px, 6vw, 64px);
  overflow: hidden;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: clamp(24px, 2vw, 32px);
  background:
    radial-gradient(90% 120% at 82% 18%, rgba(62, 110, 158, 0.12), transparent 58%),
    radial-gradient(80% 100% at 18% 90%, rgba(185, 138, 94, 0.05), transparent 62%),
    linear-gradient(145deg, var(--ink-800), var(--ink-900) 80%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 0 80px rgba(0, 0, 0, 0.3),
    0 12px 32px rgba(0, 0, 0, 0.3);
}

.product-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    /* Sparse distant stars - Layer 1 */
    radial-gradient(circle at 12% 15%, rgba(246, 244, 239, 0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 35% 82%, rgba(246, 244, 239, 0.35) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 24%, rgba(246, 244, 239, 0.40) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 76%, rgba(246, 244, 239, 0.30) 0 1px, transparent 1.6px),
    /* More stars - Layer 2 */
    radial-gradient(circle at 25% 30%, rgba(246, 244, 239, 0.20) 0 0.8px, transparent 1.2px),
    radial-gradient(circle at 65% 70%, rgba(246, 244, 239, 0.25) 0 0.8px, transparent 1.2px),
    radial-gradient(circle at 85% 15%, rgba(246, 244, 239, 0.15) 0 0.8px, transparent 1.2px),
    /* Tinted stars/dust */
    radial-gradient(circle at 24% 62%, rgba(111, 163, 206, 0.28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 18%, rgba(185, 138, 94, 0.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 94% 42%, rgba(111, 163, 206, 0.20) 0 1px, transparent 1.5px),
    /* Deep cosmic glow/nebula */
    radial-gradient(ellipse 60% 80% at 85% 45%, rgba(62, 110, 158, 0.12), transparent 75%),
    radial-gradient(ellipse 50% 60% at 15% 55%, rgba(185, 138, 94, 0.06), transparent 70%);
  opacity: 0.8;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,1) 50%, rgba(0,0,0,0.4));
  animation: panel-twinkle 8s ease-in-out infinite alternate;
}

@keyframes panel-twinkle {
  from { opacity: 0.65; }
  to { opacity: 0.85; }
}

.product-panel::after {
  content: "";
  position: absolute;
  inset: auto 9% -18% auto;
  width: min(50vw, 420px);
  height: min(42vw, 320px);
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 52% 50%, rgba(62, 110, 158, 0.12), rgba(62, 110, 158, 0.04) 42%, transparent 72%);
  filter: blur(54px);
  opacity: 0.6;
}

.product-panel__text {
  position: relative;
  z-index: 3;
  max-width: 38ch;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--sp-4);
  padding-top: 0;
}

.product-panel__eyebrow {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: clamp(0.74rem, 0.9vw, 0.9rem);
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-300);
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: rgba(111, 163, 206, 0.10);
  box-shadow: inset 0 0 0 1px rgba(111, 163, 206, 0.16);
}

.product-panel__text h3 {
  margin: 0;
  max-width: 10ch;
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--paper-50);
}

.product-panel__text p {
  margin: 0;
  max-width: 35ch;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.48;
  color: var(--paper-200);
  opacity: 0.82;
}

.product-panel__media {
  position: relative;
  z-index: 3;
  min-height: 0;
  align-self: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.product-panel__media::before {
  content: "";
  position: absolute;
  left: 60%;
  top: 50%;
  width: min(92%, 620px);
  height: min(70%, 500px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(111, 163, 206, 0.17), rgba(62, 110, 158, 0.06) 42%, transparent 72%);
  filter: blur(42px);
  opacity: 0.9;
}

.product-panel .product-device {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  z-index: 1;
  width: clamp(180px, 15vw, 220px);
  height: auto;
  aspect-ratio: 1344 / 2992;
  padding: 6px;
  border-radius: 34px;
  transform: none;
  transition: none;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 0 2px rgba(0, 0, 0, 0.72),
    0 16px 40px rgba(0, 0, 0, 0.35),
    0 0 60px rgba(62, 110, 158, 0.15);
}

.product-panel .product-device::before {
  border-radius: 34px;
}

.product-panel .product-device .device3d__screen {
  border-radius: 28px;
  object-fit: contain;
  background: var(--ink-900);
}

.product-panel .product-device .device3d__glare {
  inset: 6px;
  border-radius: 28px;
}

.product-panel .product-device .device3d__camera {
  width: 8px;
  height: 8px;
  top: 11px;
}

@media (min-width: 961px) {
  .cinema-on .product-panel[data-reveal] {
    opacity: 0;
    transform: translateY(46px);
    filter: blur(12px);
    transition:
      transform 1200ms cubic-bezier(0.19, 1, 0.22, 1),
      filter 1000ms var(--ease-quiet),
      opacity 400ms var(--ease-quiet);
  }

  .cinema-on .product-panel[data-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  .product-panel:nth-child(1) { z-index: 1; top: calc(var(--nav-h) + 24px); }
  .product-panel:nth-child(2) { z-index: 2; top: calc(var(--nav-h) + 40px); }
  .product-panel:nth-child(3) { z-index: 3; top: calc(var(--nav-h) + 56px); }
  .product-panel:nth-child(4) { z-index: 4; top: calc(var(--nav-h) + 72px); }
}

@media (max-width: 960px) {
  .product-glance > .wrap {
    max-width: var(--maxw);
  }

  .product-stack {
    gap: var(--sp-6);
    padding-bottom: var(--sp-7);
  }

  .product-panel {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
    padding: clamp(32px, 5vw, 48px);
  }

  .product-panel:nth-child(1) { z-index: 1; top: calc(var(--nav-h) + 16px); }
  .product-panel:nth-child(2) { z-index: 2; top: calc(var(--nav-h) + 32px); }
  .product-panel:nth-child(3) { z-index: 3; top: calc(var(--nav-h) + 48px); }
  .product-panel:nth-child(4) { z-index: 4; top: calc(var(--nav-h) + 64px); }

  .product-panel__text {
    max-width: 48ch;
    align-self: start;
  }

  .product-panel__text h3 {
    max-width: 100%;
    font-size: clamp(2rem, 6vw, 2.8rem);
  }

  .product-panel__media {
    min-height: 0;
    padding-top: var(--sp-2);
    justify-content: center;
  }

  .product-panel__media::before {
    left: 50%;
    width: min(130%, 480px);
    height: min(120%, 480px);
  }

  .product-panel .product-device {
    width: min(50vw, 220px);
  }
}

@media (max-width: 560px) {
  .product-glance__head {
    text-align: left;
    margin-inline: 0;
  }

  .product-panel {
    border-radius: var(--r-lg);
    padding: clamp(24px, 6vw, 32px);
    gap: var(--sp-5);
  }

  .product-panel:nth-child(1) { z-index: 1; top: calc(var(--nav-h) + 12px); }
  .product-panel:nth-child(2) { z-index: 2; top: calc(var(--nav-h) + 24px); }
  .product-panel:nth-child(3) { z-index: 3; top: calc(var(--nav-h) + 36px); }
  .product-panel:nth-child(4) { z-index: 4; top: calc(var(--nav-h) + 48px); }

  .product-panel__text h3 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .product-panel__media {
    padding-top: var(--sp-2);
  }

  .product-panel .product-device {
    width: min(55vw, 180px);
  }
}

/* ============================================================================
   SUPPORT2 CLOSING CTA
   Compact, editorial closing moment that lives INSIDE the .support2 section
   (replacing the old full-height .closing poster). Carries id="get-the-app"
   so nav store buttons and the hero CTA still resolve here.
   ============================================================================ */
.support2__closing-cta {
  margin-top: clamp(48px, 9vh, 112px);
  padding-top: clamp(40px, 7vh, 88px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
}
.support2__closing-cta h2 {
  font-family: var(--font-serif);
  font-weight: 460;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--paper-50);
  margin: 0;
  max-width: 18ch;
  line-height: 1.1;
}
.support2__closing-cta > p {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--paper-600);
  letter-spacing: 0.02em;
}

/* ============================================================================
   PRODUCT GLANCE — DOWNLOAD ROW
   Equal-size store buttons under the four product cards. Reuses the Apple +
   Play SVG paths already in the nav. iOS is visually balanced but disabled.
   ============================================================================ */
.product-glance__downloads {
  /* Sit close under the cards so the buttons feel like part of the Product
     section, not a separate block. */
  margin-top: clamp(18px, 2.4vh, 32px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}
.product-glance__downloads-note {
  margin: var(--sp-4) auto 0;
  max-width: 50ch;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--paper-600);
  letter-spacing: 0.02em;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  padding: 12px 22px;
  border-radius: var(--r-md);
  background: var(--ink-700);
  border: 1px solid var(--line-strong);
  color: var(--paper-50);
  font-family: var(--font-sans);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-quiet),
              border-color var(--dur-base) var(--ease-quiet),
              background-color var(--dur-base) var(--ease-quiet),
              box-shadow var(--dur-base) var(--ease-quiet);
}
a.store-btn:hover,
a.store-btn:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent-300);
  background: var(--ink-600);
  box-shadow: 0 14px 40px var(--accent-glow);
}
.store-btn svg { width: 22px; height: 22px; flex: none; }
.store-btn__label {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
  gap: 2px;
}
.store-btn__small {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-400);
}
.store-btn__big {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--paper-50);
}

/* iOS placeholder — visually balanced, clearly not live. */
.store-btn.is-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.store-btn.is-disabled svg { color: var(--paper-400); }

@media (max-width: 520px) {
  .store-btn { min-width: 0; width: 100%; justify-content: center; }
}

/* ============================================================================
   SUPPORT2 — TWO-COLUMN + NATIVE <details> ACCORDION
   Premium, hairline-only styling. No JS, no libraries. The closing CTA still
   sits below the grid as the calm bookend.
   ============================================================================ */
.support2__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(48px, 7vw, 104px);
  align-items: start;
}
.support2__lead .eyebrow { display: block; margin-bottom: var(--sp-4); }
.support2__lead h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
}
.support2__lead .muted {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 36ch;
}

.support2__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.support2__item {
  border-bottom: 1px solid var(--line);
}
/* Strip default <summary> marker across browsers. */
.support2__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  transition: color var(--dur-fast) var(--ease-quiet);
}
.support2__item summary::-webkit-details-marker { display: none; }
.support2__item summary:focus-visible {
  outline: 2px solid var(--accent-300);
  outline-offset: 4px;
  border-radius: 4px;
}
.support2__item-title {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  color: var(--paper-50);
  letter-spacing: -0.005em;
}
.support2__item-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--paper-400);
  transition: transform var(--dur-base) var(--ease-quiet),
              color var(--dur-fast) var(--ease-quiet);
}
.support2__item-icon svg { width: 16px; height: 16px; }
.support2__item summary:hover .support2__item-title,
.support2__item summary:hover .support2__item-icon { color: var(--accent-300); }
.support2__item[open] .support2__item-icon { transform: rotate(180deg); }
.support2__item > p {
  margin: 0;
  padding: 0 0 var(--sp-5);
  font-size: var(--fs-small);
  color: var(--paper-400);
  line-height: 1.6;
  max-width: 56ch;
}

@media (max-width: 860px) {
  .support2__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
  .support2__lead .muted { max-width: 100%; }
}