/* ──────────────────────────────────────────────
   Landing — scroll story on the Clay kit (main.css).
   Desktop (html.lp-pinned): .lp-stage is pinned to the viewport and the
   scenes sit on top of each other; landing.js swaps them on scroll.
   Otherwise the scenes stack normally.
────────────────────────────────────────────── */

.lp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Chrome ── */
.lp-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 120; padding: 12px 0 0; }
.lp-nav { display: flex; gap: 4px; }
.lp-nav-link {
  appearance: none; border: 0; background: none; cursor: pointer;
  height: 38px; padding: 0 14px; border-radius: var(--radius-full);
  font-family: var(--font-display); font-weight: 800; font-size: 14.5px; color: var(--ink-2);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.lp-nav-link:hover, .lp-nav-link.is-active { background: var(--primary-soft); color: var(--primary-text); }

.lp-bg { position: fixed; inset: 0; z-index: 0; background: #EDEBFF; }
.lp-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 70%),
    radial-gradient(50% 40% at 90% 90%, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
}
body:has(.lp) .page-vignette { display: none; }
body:has(.lp) .site-footer { display: none; }
.lp { position: relative; z-index: 1; color: var(--ink); }

/* Sticky glass footer, always on screen — this plus the fixed topbar is what
   sells "one page" even though the content behind them is really transiting
   through several scenes. */
.lp-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: 10px 0;
  pointer-events: none;
}
.lp-footer-inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.lp-footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--ink-2); }
.lp-footer-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.lp-footer-links a, .lp-footer-links .footer-link-btn { font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-family: var(--font-body); }
.lp-footer-links a:hover, .lp-footer-links .footer-link-btn:hover { color: var(--primary-text); }

/* ── Dots ── */
.lp-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 110; display: none; flex-direction: column; gap: 10px; }
html.lp-pinned .lp-dots, html.lp-snap .lp-dots { display: flex; }
.lp-dot {
  position: relative; appearance: none; border: 0; cursor: pointer;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(30, 27, 75, 0.18);
  transition: transform var(--dur-base) var(--ease-bounce), background var(--dur-fast) ease;
}
.lp-dot:hover { background: rgba(30, 27, 75, 0.4); }
.lp-dot.is-active { background: var(--primary); transform: scale(1.35); }
.lp-dot::after {
  content: attr(data-label); position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(6px);
  padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-out);
}
.lp-dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ── Stage & scenes ── */
.lp-stage { position: relative; }
.scene { position: relative; padding: 110px 0 84px; }
.scene-inner { position: relative; width: 100%; }
html.lp-pinned .lp-stage { height: 100svh; overflow: hidden; }
html.lp-pinned .scene { position: absolute; inset: 0; display: flex; align-items: center; padding: 96px 0 68px; visibility: hidden; opacity: 0; }
html.lp-pinned .scene-hero { visibility: visible; opacity: 1; }

/* ── Type ── */
.lp-kicker { margin-bottom: 18px; }
.lp-h1 { font-size: clamp(44px, 5.6vw, 82px); margin: 0 0 20px; max-width: 12ch; }
.lp-h2 { font-size: clamp(36px, 4.4vw, 62px); margin: 0 0 18px; max-width: 14ch; }
.lp-h2-sm { font-size: clamp(30px, 3.4vw, 46px); max-width: 20ch; margin-bottom: 0; }
.lp-h1 em, .lp-h2 em { font-style: normal; color: var(--primary); }
.lp-lead { max-width: 560px; margin: 0 0 26px; }
.lp-note { font-size: 13.5px; color: var(--ink-3); margin: 12px 0 0; }
.lp-note a { color: var(--primary-text); font-weight: 700; }
.lp-sep { color: var(--border-rule); margin: 0 4px; }

/* ── Signup ── */
.lp-signup { display: flex; gap: 10px; max-width: 520px; }
.lp-signup-center { margin: 0 auto; }
.lp-signup-input {
  flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 22px;
  border: 0; border-radius: var(--radius-full);
  background: #fff; color: var(--ink);
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  box-shadow: var(--shadow-card);
}
.lp-signup-input::placeholder { color: var(--ink-3); font-weight: 500; }
.lp-signup-input:focus { outline: 3px solid var(--primary-soft); }
.lp-cta { margin-bottom: 4px; }

/* ── 1 Hero ── */
.scene-hero .scene-inner { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
.lp-principles { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.lp-principles .chip { height: 28px; font-size: 12.5px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
/* The reserve covers the signup row (54px), its gap, and clearance for the fixed
   footer bar — without it the film grows on tall viewports until the email input
   collides with the footer. min-width is capped so the film can still shrink. */
.lp-film { position: relative; width: min(100%, calc((100svh - 310px) * 1.5)); min-width: min(100%, 520px); aspect-ratio: 3 / 2; margin: 0 auto; }
.lp-film-stage, .lp-film-stage svg { display: block; width: 100%; height: 100%; }
.lp-film-replay {
  position: absolute; right: 16px; bottom: 14px; appearance: none; border: 0; cursor: pointer;
  height: 34px; padding: 0 16px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  box-shadow: 0 2px 10px rgba(30, 27, 75, 0.12), inset 0 0 0 1.5px rgba(30, 27, 75, 0.08);
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-bounce);
}
.lp-film-replay:hover { transform: scale(1.06); }
.lp-film-replay[hidden] { display: none; }
.lp-hero-copy { display: flex; justify-content: center; padding-bottom: 72px; }
.lp-hero-action { width: 100%; max-width: 520px; }
.lp-hero-copy .lp-signup { margin: 0 auto; }

/* ── 2 Why ── */
.scene-why .scene-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.lp-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.lp-steps li {
  padding: 12px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.55; transition: opacity 320ms ease, background 320ms ease, transform 320ms var(--ease-bounce);
}
.lp-steps li.is-active { opacity: 1; background: #fff; box-shadow: var(--shadow-card); transform: translateX(6px); }
.lp-steps strong { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.lp-steps span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lp-foot { font-size: 12.5px; color: var(--ink-3); margin: 18px 0 0; max-width: 520px; }
.lp-curve-panel { position: relative; margin: 0; padding: 28px 24px 18px; }
.lp-curve-clay { position: absolute; right: 18px; top: -30px; width: 96px; }
.lp-curve { display: block; width: 100%; height: auto; }
.lp-curve .c-grid line { stroke: var(--border-subtle); stroke-width: 1; }
.lp-curve .c-axis line { stroke: var(--border-rule); stroke-width: 2; stroke-linecap: round; }
.lp-curve .c-tick text, .lp-curve .c-note { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--ink-3); }
.lp-curve .c-forget { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.lp-curve .c-review { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.lp-curve .c-reset { stroke: var(--primary); stroke-width: 2; stroke-dasharray: 4 6; stroke-linecap: round; opacity: 0.6; }
.lp-curve .c-dot { fill: #fff; stroke: var(--primary); stroke-width: 5; }
.lp-curve .c-mark-label { font-family: var(--font-display); font-size: 13px; font-weight: 800; fill: var(--primary-text); }
.lp-curve .c-mark { transform-box: fill-box; transform-origin: center; }

/* ── 3 Methods ── */
.scene-methods .scene-inner { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px 32px; align-items: start; }
.lp-mhead { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lp-mhead .lp-kicker { margin: 0; }
.lp-mhead .lp-h2-sm { max-width: 26ch; }
.lp-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-rail-item {
  appearance: none; border: 0; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 16px; text-align: left;
  background: rgba(255, 255, 255, 0.45); color: var(--ink-2);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base) ease;
}
.lp-rail-item:hover { color: var(--ink); background: rgba(255, 255, 255, 0.8); }
.lp-rail-item.is-active { color: var(--hue-text); background: #fff; box-shadow: var(--shadow-card); transform: translateX(6px); }
.lp-rail-n { font-size: 12px; font-weight: 900; letter-spacing: 0.08em; color: var(--hue-text); min-width: 22px; }
.lp-mstack { position: relative; display: grid; }
.lp-mcard {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center;
  padding: 34px 38px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--tint) 0%, #fff 60%, var(--tint-2) 100%);
  box-shadow: var(--shadow-card);
}
html.lp-pinned .lp-mcard { visibility: hidden; opacity: 0; }
html.lp-pinned .lp-mcard.is-active { visibility: visible; opacity: 1; }
.lp-mcard-title { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 44px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.02; margin: 0 0 12px; }
.lp-mcard-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-mcard-tagline { font-size: 17px; font-weight: 600; line-height: 1.45; margin: 0 0 14px; max-width: 520px; }
.lp-mcard-steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.lp-mcard-steps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.lp-mcard-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-weight: 900; font-size: 12px; color: var(--hue-text); padding-top: 3px; }
.lp-mcard-science { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; padding-top: 12px; border-top: 1.5px solid rgba(var(--hue-rgb), 0.18); max-width: 520px; }
.lp-mcard-art { position: relative; display: grid; place-items: center; }
.lp-mcard-clay { width: 100%; max-width: 280px; height: auto; }
.lp-mcard-art .sparks { position: absolute; top: 6%; right: 4%; width: 22%; color: var(--xp); }

/* ── 4 Try it: an open two-page book, real games launch from the right page ── */
.scene-try .scene-inner { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: 44px; align-items: center; }

.lp-open-book-wrap { perspective: 2400px; display: flex; justify-content: center; }
.lp-open-book {
  position: relative; width: 100%; max-width: 720px;
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 20px;
  background: #EFEDE6;
  box-shadow: var(--shadow-card-hover);
  padding: 10px;
}
.lp-open-book-spine {
  position: absolute; left: 50%; top: 4%; bottom: 4%; width: 18px; margin-left: -9px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--primary-hover) 0%, var(--primary) 45%, var(--primary) 55%, var(--primary-hover) 100%);
  box-shadow: inset 3px 0 6px rgba(0, 0, 0, 0.25), inset -3px 0 6px rgba(0, 0, 0, 0.25), 0 8px 16px -6px rgba(30, 27, 75, 0.4);
  z-index: 2;
}
.lp-open-book-page {
  position: relative;
  background: #FBF9F3;
  padding: 34px 32px 30px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 420px;
}
.lp-open-book-left { border-radius: 16px 4px 4px 16px; box-shadow: inset -10px 0 24px -18px rgba(30, 27, 75, 0.35); }
.lp-open-book-right { border-radius: 4px 16px 16px 4px; box-shadow: inset 10px 0 24px -18px rgba(30, 27, 75, 0.35); }
.lp-open-book-page h3 { font-family: var(--font-display); font-size: 23px; font-weight: 900; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.lp-open-book-page > p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.lp-book-rule { height: 2px; border-radius: 1px; background: var(--primary-soft); width: 64px; margin-top: auto; }
.lp-book-foot { font-size: 12.5px; color: var(--ink-3); margin: 0; }

.lp-play-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-play-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft), inset 0 0 0 1.5px var(--border-subtle);
}
.lp-play-row .clay { flex: none; width: 44px; height: 44px; }
.lp-play-row-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-play-row-copy strong { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink); }
.lp-play-row-copy span { font-size: 12.5px; color: var(--ink-3); }
.lp-play-btn { flex: none; }
[data-method="flashcard-duel"] .lp-play-btn { --hue: var(--m-flashcard-duel); }
[data-method="map-master"] .lp-play-btn { --hue: var(--m-map-master); }
[data-method="knock-knock"] .lp-play-btn { --hue: var(--m-knock-knock); }
[data-method="three-truths"] .lp-play-btn { --hue: var(--m-three-truths); }
.lp-play-row[data-method] .lp-play-btn { background: var(--hue); box-shadow: 0 10px 24px -10px rgba(var(--hue-rgb, 79, 70, 229), 0.55), inset 0 1px 0 rgba(255,255,255,0.25); }

/* ── Real-game popups ──
   Each .lp-play-modal hosts one live game's unmodified markup/CSS/JS. The
   modal itself only owns the full-screen dim + fade/scale-in; every pixel
   inside .lp-play-modal-inner is the real game (position:fixed, so it
   already fills the screen on its own — the modal wrapper is just the
   dimmed backdrop it sits on). */
.lp-play-modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 27, 75, 0.55);
  opacity: 0; transition: opacity 0.2s ease;
}
.lp-play-modal.is-open { opacity: 1; }
.lp-play-modal[hidden] { display: none; }
.lp-play-modal-inner { width: 100%; height: 100%; background: var(--bg-base); }
.lp-modal-close { cursor: pointer; }
/* The flashcard game's own container isn't position:fixed like the other
   three (it assumes normal page flow) — give it one here so it also fills
   the popup edge to edge, with its own opaque background since it's now
   layered over the landing page rather than being the whole document. */
.lp-play-modal-inner > .study-page { position: fixed; inset: 0; overflow-y: auto; z-index: 1; background: var(--bg-base); }
.lp-play-modal-inner .mm-game-page,
.lp-play-modal-inner .ci-game-page,
.lp-play-modal-inner .ttal-game-page { z-index: 1; background: var(--bg-base); }


/* ── 5 Evidence ── */
.scene-evidence .scene-inner, .scene-around .scene-inner { display: flex; flex-direction: column; gap: 26px; }
.lp-ehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lp-ehead-center { justify-content: center; text-align: center; }
.lp-ehead-center .lp-h2-sm { max-width: none; }
.lp-counter { display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); }
.lp-counter .clay { width: 72px; height: 72px; }
.lp-counter strong { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; color: var(--hue-text); }
.lp-counter span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.lp-refs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-refs .panel { position: relative; padding: 22px 22px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.lp-ref-n { font-family: var(--font-display); font-weight: 900; font-size: 12px; letter-spacing: 0.1em; color: var(--hue-text); }
.lp-ref-claim { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; line-height: 1.35; }
.lp-ref-cite { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin-top: auto; }
.lp-ref-cite i { font-style: italic; }

/* ── 6 Around ── */
.lp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-tile { text-align: center; padding: 26px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-tile .clay { width: 110px; height: 110px; margin-bottom: 6px; }
.lp-tile h3 { font-family: var(--font-display); font-size: 19px; font-weight: 800; margin: 0; }
.lp-tile p { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.lp-tile-soon { background: linear-gradient(160deg, #fff 0%, var(--primary-soft-2) 100%); }
.lp-tile-soon .chip { margin-top: 6px; }
.lp-dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: lp-pulse 2.4s ease-out infinite; }
@keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45); } 70% { box-shadow: 0 0 0 9px rgba(79, 70, 229, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } }

/* ── 7 Begin ── */
.scene-begin .scene-inner { display: flex; align-items: center; justify-content: center; min-height: calc(100svh - 128px); }
.lp-begin { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lp-begin .lp-h2, .lp-begin .lp-lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.lp-begin-clay { width: 130px; margin-bottom: 8px; }
.lp-foot-brand { font-family: var(--font-display); font-weight: 800; color: var(--ink-2); }
.lp-foot-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.lp-foot-links a, .lp-foot-links .footer-link-btn { font-size: 13px; font-weight: 600; color: var(--ink-3); font-family: var(--font-body); }
.lp-foot-links a:hover, .lp-foot-links .footer-link-btn:hover { color: var(--primary-text); }

/* ── Short desktop viewports ── */
@media (min-width: 900px) and (max-height: 820px) {
  html.lp-pinned .scene { padding-top: 84px; padding-bottom: 64px; }
  .lp-h1 { font-size: clamp(40px, 4.8vw, 62px); }
  .lp-h2 { font-size: clamp(32px, 3.6vw, 48px); }
  .lp-h2-sm { font-size: clamp(26px, 2.8vw, 36px); }
  .lp-lead { font-size: 15.5px; margin-bottom: 18px; }
  .lp-principles { margin-top: 18px; }
  .lp-film { width: min(100%, calc((100svh - 360px) * 1.5)); }
  .lp-steps li { padding: 9px 14px; } .lp-steps span { font-size: 13px; }
  .lp-mcard { padding: 24px 28px; grid-template-columns: minmax(0, 1fr) 240px; }
  .lp-mcard-title { font-size: clamp(26px, 2.6vw, 34px); }
  .lp-mcard-tagline { font-size: 15.5px; } .lp-mcard-steps li { font-size: 13.5px; } .lp-mcard-science { font-size: 13px; }
  .lp-rail-item { padding: 8px 12px; font-size: 14px; }
  .lp-refs .panel { padding: 16px 18px; } .lp-ref-claim { font-size: 15px; }
  .lp-tile .clay { width: 84px; height: 84px; }
  .lp-open-book { max-width: 620px; }
}

/* ── Mobile snap deck (phone / tablet) ──
   One section per screen, snapped, like the pinned desktop deck. Native CSS
   scroll-snap rather than JS, so momentum, rubber-banding and the URL bar
   collapsing behave normally, and it degrades to ordinary scrolling where
   scroll-snap is unsupported.

   Every section MUST fit one screen here. Long lists become horizontal swipe
   rails (see .lp-rail-x below) instead of growing the page, and secondary
   detail is hidden rather than scrolled past — a phone gets the highlights,
   not the full desktop copy. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html.lp-snap {
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: none;
  }
  html.lp-snap body { overflow-x: hidden; }
  html.lp-snap .scene {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100svh; min-height: 100svh; max-height: 100svh;
    overflow: hidden;                /* a section never scrolls internally */
    display: flex; flex-direction: column; justify-content: center;
    padding: 76px 0 72px;
  }
  html.lp-snap .scene-inner { max-height: 100%; }

  /* per-section tint, as the desktop deck animates it */
  html.lp-snap .scene-hero,
  html.lp-snap .scene-methods,
  html.lp-snap .scene-begin   { background: #EDEBFF; }
  html.lp-snap .scene-why     { background: #FFF6D6; }
  html.lp-snap .scene-try     { background: #FFE4EF; }
  html.lp-snap .scene-evidence{ background: #DDF7F0; }
  html.lp-snap .scene-around  { background: #DCEBFF; }

  /* ── Hero ──
     The 3:2 stage caps the film at ~265px on a 390px screen, leaving a third
     of the section empty and the in-film typography around 11px. Instead the
     film takes all the height the section can spare and `preserveAspectRatio`
     crops the 1200x800 stage rather than letterboxing it, so the artwork and
     its captions scale up to fill the width. The signup row is pinned to the
     bottom with real padding, not floated in the middle. */
  /* The film is landscape and the section is portrait, so there is always
     spare height. Give it to the gap ABOVE the film and keep the signup row
     pinned near the bottom, rather than centring everything and leaving a
     band of nothing under the call to action. */
  html.lp-snap .scene-hero { justify-content: stretch; padding-top: 60px; padding-bottom: 18px; }
  html.lp-snap .scene-hero .scene-inner {
    flex: 1 1 auto; display: flex; flex-direction: column;
    justify-content: center; gap: 0; min-height: 0;
  }
  html.lp-snap .scene-hero .lp-hero-art,
  html.lp-snap .scene-hero > .container > :first-child { margin-top: auto; }
  html.lp-snap .lp-hero-copy { margin-top: auto; }
  /* full-bleed and as wide as the screen allows; the viewBox above is trimmed
     to the artwork so this is all content, no empty margin */
  html.lp-snap .scene-hero .lp-film {
    width: calc(100% + 32px); max-width: none; margin: 0 -16px;
    aspect-ratio: 1070 / 640; min-width: 0;
  }
  /* the svg's preserveAspectRatio is set to "slice" by landing.js — it is an
     SVG attribute, not a CSS property, so it cannot be set here */
  html.lp-snap .scene-hero .lp-film-stage,
  html.lp-snap .scene-hero .lp-film-stage svg { width: 100%; height: 100%; }
  html.lp-snap .lp-hero-copy { flex: 0 0 auto; padding: 0 0 8px; }
  html.lp-snap .lp-signup { gap: 8px; }
  html.lp-snap .lp-signup-input { height: 46px; font-size: 15px; padding: 0 18px; }
  html.lp-snap .lp-signup .btn-lg { height: 46px; font-size: 15px; padding: 0 22px; }

  /* ── Horizontal swipe rail: the fallback for anything too tall ──
     A vertical list of N cards becomes one row of N cards you swipe through,
     so the section still fits one screen. The next card is deliberately
     peeking at the right edge so it reads as swipeable, and .lp-swipe-hint
     (added by landing.js) spells it out. */
  html.lp-snap .lp-rail-x {
    display: flex; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 4px 0 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
    scrollbar-width: none;
  }
  html.lp-snap .lp-rail-x::-webkit-scrollbar { display: none; }
  html.lp-snap .lp-rail-x > * {
    flex: 0 0 82%;                   /* the 18% remainder is the next card peeking */
    scroll-snap-align: center;
    min-width: 0;
  }
  .lp-swipe-hint {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--ink-3);
    font-family: var(--font-display);
  }
  .lp-swipe-hint svg { width: 15px; height: 15px; animation: lp-nudge 1.6s ease-in-out infinite; }
  @keyframes lp-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

  /* ── Section-by-section: shrink, and hide secondary detail ── */
  html.lp-snap .lp-h1 { font-size: clamp(27px, 7.4vw, 34px); }
  html.lp-snap .lp-h2 { font-size: clamp(24px, 6.6vw, 31px); }
  html.lp-snap .lp-h2-sm { font-size: clamp(20px, 5.4vw, 25px); }
  html.lp-snap .lp-lead { font-size: 14.5px; margin-bottom: 12px; }
  html.lp-snap .lp-kicker { margin-bottom: 8px; }

  /* why: the forgetting-curve figure is the point; the three steps are detail */
  html.lp-snap .lp-steps { display: none; }
  html.lp-snap .lp-curve-panel { padding: 14px 12px 8px; }
  html.lp-snap .lp-curve-note { display: none; }

  /* methods: cards already a rail — just smaller */
  html.lp-snap .lp-mhead { margin-bottom: 10px; }
  html.lp-snap .lp-mcard { padding: 18px 18px; gap: 10px; }
  html.lp-snap .lp-mcard-clay { max-width: 108px; }
  html.lp-snap .lp-mcard-steps, html.lp-snap .lp-mcard-science { display: none; }

  /* try: one page of the book, not two */
  html.lp-snap .lp-open-book-left { display: none; }
  html.lp-snap .lp-open-book { max-width: none; }
  html.lp-snap .lp-open-book-page { padding: 16px 16px 14px; }

  /* evidence + around: lists become rails */
  html.lp-snap .lp-refs .panel { padding: 16px 16px 14px; gap: 7px; }
  html.lp-snap .lp-ref-claim { font-size: 14.5px; }
  html.lp-snap .lp-ref-cite { font-size: 11.5px; }
  html.lp-snap .lp-tile { padding: 18px 14px 16px; gap: 5px; }
  html.lp-snap .lp-tile .clay { width: 64px; height: 64px; margin-bottom: 2px; }
  html.lp-snap .lp-tile h3 { font-size: 16px; }
  html.lp-snap .lp-tile p { font-size: 13px; }

  html.lp-snap .lp-dots { display: flex; right: 8px; gap: 7px; }
  html.lp-snap .lp-dot { width: 7px; height: 7px; }

  /* The legal bar is ~120px stacked on a phone and would eat a sixth of every
     screen, so it belongs to the last section only (.lp-at-end from landing.js). */
  html.lp-snap .lp-footer {
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease;
  }
  html.lp-snap.lp-at-end .lp-footer { opacity: 1; visibility: visible; }
}

/* ── Stacked (tablet / phone / reduced motion) ── */
@media (max-width: 899px) {
  .lp-nav { display: none; }
  .scene { padding: 96px 0 120px; }
  .scene-hero .scene-inner, .scene-why .scene-inner, .scene-try .scene-inner { grid-template-columns: 1fr; gap: 28px; }
  .lp-h1 { max-width: none; }
  .lp-film { width: 100%; min-width: 0; }
  .lp-hero-action { max-width: none; }
  .lp-steps li { opacity: 1; background: #fff; box-shadow: var(--shadow-card); transform: none; }
  .lp-curve-panel { padding: 22px 16px 14px; }
  .scene-methods .scene-inner { display: block; }
  .lp-rail { display: none; }
  .lp-mhead { margin-bottom: 18px; }
  .lp-mstack { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
  .lp-mcard { flex: 0 0 88%; grid-template-columns: 1fr; gap: 16px; padding: 24px 22px; scroll-snap-align: center; }
  .lp-mcard-art { order: -1; } .lp-mcard-clay { max-width: 180px; }
  .lp-open-book { grid-template-columns: 1fr; max-width: 440px; }
  .lp-open-book-spine { display: none; }
  .lp-open-book-left { border-radius: 16px 16px 4px 4px; box-shadow: inset 0 -10px 24px -18px rgba(30, 27, 75, 0.35); }
  .lp-open-book-right { border-radius: 4px 4px 16px 16px; box-shadow: inset 0 10px 24px -18px rgba(30, 27, 75, 0.35); }
  .lp-refs { grid-template-columns: 1fr; }
  .lp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-begin .scene-inner { min-height: 0; }
  .lp-footer-inner { flex-direction: column; align-items: flex-start; gap: 6px; border-radius: 20px; }
  .lp-footer { padding: 8px 0; }
}
@media (max-width: 560px) {
  .lp-signup { flex-direction: column; }
  .lp-signup .btn-lg { width: 100%; }
  .lp-signin { display: none; }
  .lp-tiles { grid-template-columns: 1fr; }
  .lp-open-book-page { padding: 26px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-dot-pulse { animation: none; }
}