/* MODE3 site v6b · the prototype grammar (REFERENCE_GRAMMAR.md): two sizes, one sentence per screen,
   the product scrubbed by the scroll, masked line reveals, one continuous sky. Layered over v4/v5. */
:root { --t-huge: clamp(2.75rem, 6.5vw, 7rem); --t-body: 1.0625rem; --e-norris: cubic-bezier(0.65, 0.05, 0, 1); --e-soft: cubic-bezier(0.4, 0, 0.6, 1); }
@media (max-width: 720px) { :root { --t-body: 0.9375rem; } }
.huge { font-size: var(--t-huge); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; margin: 0; }
.huge.up { text-transform: uppercase; }
.small { font-size: var(--t-body); line-height: 1.5; max-width: 36ch; margin: 0; }
.ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ln > span { display: block; transform: translateY(112%); transition: transform 0.75s var(--e-norris); transition-delay: calc(var(--i, 0) * 70ms); will-change: transform; }
.in .ln > span, .ln.in > span { transform: none; }
.ln.drift > span { transition-duration: 1.1s; }
.ln.snap > span { transition-duration: 0.45s; }
/* grain over the whole day (rule 6): the sky never looks like a css gradient */
body::after { content: ""; position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
main { position: relative; z-index: 1; }   /* the header keeps its fixed position from v4 */

/* ── 1 · HERO 05:30: the pre-dawn space, the statement line by line, the clock, the hold ── */
.hero7 { --ink: #ede9e3; --ink-2: rgba(237, 233, 227, 0.62); --ink-3: rgba(237, 233, 227, 0.4); --line: rgba(237, 233, 227, 0.16); color: var(--ink); background: #060a14; position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 7rem 0 clamp(2.5rem, 6svh, 4rem); overflow: clip; isolation: isolate; }
.hero7 .wrap { position: relative; z-index: 2; }
.hero7.switched { --ink: #0b0d10; --ink-2: rgba(11, 13, 16, 0.62); --ink-3: rgba(11, 13, 16, 0.4); --line: rgba(11, 13, 16, 0.18); background: linear-gradient(180deg, #1b1838 0%, #7a4256 48%, #f2c59c 100%); }
.hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.hero-sky.on { opacity: 1; }
.hero7 .hero-now, .hero7 .hero-sub, .hero7 .hero-cta .quiet { color: var(--ink-2); }
.hero7 .hold { color: var(--ink); border-color: var(--line); background: color-mix(in srgb, #0b0d10 35%, transparent); }
.hero7.switched .btn-primary { background: var(--ink); color: #f2c59c; }
html.hero-dark .hud { --ink: #ede9e3; color: #ede9e3; background: linear-gradient(180deg, rgba(6, 10, 20, 0.55), rgba(6, 10, 20, 0)); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.hero-dark .hud-brand { color: #ede9e3; }
html.hero-dark .hud-chip { background: rgba(6, 7, 10, 0.55); border-color: rgba(242, 239, 233, 0.2); color: #f2efe9; }
html.hero-dark .hud-reserve { color: #ede9e3; border-color: rgba(242, 239, 233, 0.2); }
.hero7 .hero-clock { display: none; }   /* the clock is pinned at 05:30 (one source: the scroll clock); the micro line carries it */
.hero7 .hero-now { margin: 0; }
.hero7 .hero-h1 { font-size: var(--t-huge); font-weight: 900; line-height: 0.92; letter-spacing: -0.04em; margin: 1rem 0 0; max-width: 14ch; }
.hero7 .hero-h1 .l2 { color: var(--ink-2); }
.hero7 .hero-sub { margin-top: 1.2rem; font-size: var(--t-body); max-width: 36ch; color: var(--ink-2); }
.hero7 .hold { position: static; transform: none; margin-top: 1.6rem; }
.hero7.switched .hero-hold, .hero7.switched .hero-sub { display: none; }   /* the switch swaps the description for the result */
.hero-after { margin: 1.4rem 0 0; font-size: var(--t-body); max-width: 36ch; opacity: 0; transform: translateY(0.4em); transition: opacity 0.6s var(--e-soft) 0.3s, transform 0.75s var(--e-norris) 0.3s; }
.hero-cta { opacity: 0; transform: translateY(0.4em); transition: opacity 0.6s var(--e-soft) 0.5s, transform 0.75s var(--e-norris) 0.5s; margin-top: 1.2rem; }
.hero7.switched .hero-after, .hero7.switched .hero-cta { opacity: 1; transform: none; }
.hero-cta .quiet { color: var(--ink-2); text-decoration: none; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; min-height: 44px; }
/* the PRIME render rises into frame on the switch (Apple: the product), right of centre */
.hero-bottle { position: absolute; z-index: 1; right: clamp(1rem, 4vw, 6rem); bottom: -4svh; height: 66svh; width: auto; pointer-events: none;
  opacity: 0; transform: translateY(14svh); transition: opacity 0.9s var(--e-soft), transform 1.3s var(--e-norris); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45)); }
.hero7.switched .hero-bottle { opacity: 1; transform: none; }
@media (max-width: 1100px) { .hero-bottle { height: 54svh; } }
@media (max-width: 720px) { .hero7 { padding-top: 6rem; } .hero-bottle { right: 8vw; top: 6rem; bottom: auto; height: 38svh; transform: translateY(6svh); } .hero7 .hero-h1 { max-width: 11ch; } }

/* ── 3-5 · the state scenes: one sticky screen per state, the product scrubbed, three beats, the punchline ── */
.scene { position: relative; height: 300vh; }
.scene-stick { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--scene-sky); color: var(--ink); }
.scene-stick::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 40% at 50% 100%, var(--scene-glow) 0%, transparent 100%); opacity: var(--glow-a, 0.6); }
.scene-stage { position: absolute; inset: 0; transition: opacity 0.5s var(--e-soft); }
.scene-stage.out { opacity: 0; pointer-events: none; }
.scene-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; font-size: var(--word-vw, 30vw); font-weight: 900; letter-spacing: -0.06em; line-height: 0.85; text-transform: uppercase; color: var(--word-ink, var(--accent)); margin: 0; white-space: nowrap; opacity: 0.92; }
.scene-word.ln { overflow: visible; }
.scene-time { position: absolute; left: var(--gutter, 6vw); top: clamp(4rem, 9svh, 6.2rem); z-index: 4; margin: 0; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--time-ink, var(--ink-2)); }
.scene-product { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: 4svh; height: 76svh; width: min(60vw, 760px); }
.scene-product .tt-canvas { position: absolute; inset: 0; display: block; }
.scene-product img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: opacity 0.4s; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.4)); }
.scene-product.tt-ready img { opacity: 0; }
.scene-product.still img { transform: scale(var(--zoom, 1)); transform-origin: 50% 100%; }
.scene-beats { position: absolute; left: var(--gutter, 6vw); bottom: clamp(3rem, 7svh, 5rem); z-index: 3; width: min(36ch, 40vw); height: 8em; color: var(--beat-ink, var(--ink)); }
.beat { position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; font-size: var(--t-body); line-height: 1.5; color: inherit; opacity: 0; transform: translateY(0.6em); transition: opacity 0.4s var(--e-soft), transform 0.6s var(--e-norris); pointer-events: none; }
.beat.on { opacity: 1; transform: none; }
.beat .k { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: inherit; margin-bottom: 0.6rem; }
.beat .k::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }
.scene-punch { position: absolute; left: var(--gutter, 6vw); right: var(--gutter, 6vw); top: 50%; transform: translateY(-50%); z-index: 3; margin: 0; font-size: var(--t-huge); font-weight: 900; line-height: 0.92; letter-spacing: -0.04em; max-width: 12ch; opacity: 0; transition: opacity 0.5s var(--e-soft); color: var(--punch-ink, var(--ink)); }
.scene-punch.in { opacity: 1; }
.scene-cue { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 3; font-size: var(--t-micro); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
/* the world per state: a sky gradient (dawn, day, dusk) with the horizon glow low, inks chosen per band */
.scene[data-state="prime"] { --accent: #9fe6d3; --word-vw: 34vw; --scene-sky: linear-gradient(180deg, #1b1838 0%, #7a4256 42%, #f2c59c 100%); --scene-glow: rgba(255, 226, 180, 0.9); --ink: #ede9e3; --time-ink: rgba(237, 233, 227, 0.7); --beat-ink: #0b0d10; --punch-ink: #ede9e3; }
.scene[data-state="perform"] { --accent: #ffd400; --word-ink: #b08f00; --word-vw: 24vw; --scene-sky: linear-gradient(180deg, #e9eef3 0%, #f1eee7 60%, #efe3cf 100%); --scene-glow: rgba(255, 255, 255, 0.8); --ink: #0b0d10; --time-ink: rgba(11, 13, 16, 0.6); --beat-ink: #0b0d10; --punch-ink: #0b0d10; }
.scene[data-state="unwind"] { --accent: #c58cf2; --word-ink: #dcb6f7; --word-vw: 27vw; --scene-sky: linear-gradient(180deg, #1b1433 0%, #7a3f6d 45%, #e8a24e 100%); --scene-glow: rgba(232, 162, 78, 0.9); --ink: #ede9e3; --time-ink: rgba(237, 233, 227, 0.7); --beat-ink: #0b0d10; --punch-ink: #ede9e3; }
.scene-cue { color: var(--beat-ink); opacity: 0.6; }
.state-after { padding-block: clamp(2rem, 6vh, 4rem) clamp(3rem, 8vh, 5rem); }
.state-after .hold { position: static; transform: none; margin-top: 2rem; }
@media (max-width: 720px) {
  .scene { height: 320vh; }
  .scene-product { width: 90vw; height: 70svh; bottom: 13svh; }
  .scene-word { top: 44%; }
  .scene-beats { bottom: clamp(2rem, 4svh, 3rem); width: auto; right: var(--gutter, 6vw); height: 7.5em; }
  .scene-cue { display: none; }
  .scene-punch { max-width: 10ch; }
}

/* ── 6 · WAKE and NIGHT keep v5; the night system: the unboxing plays by itself, no outline placeholders ── */
.unbox-tile { cursor: default; }
.unbox-tile .unbox-play { display: none; }
.unbox-tile video { display: block; }
.unbox-tile.playing img { opacity: 0; }
.unbox-tile img { transition: opacity 0.5s; }
.gal-item.gal-ph { display: none; }
.lab-one { margin-top: 1rem; font-size: var(--t-body); max-width: 36ch; }
.lab-one b { display: block; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; }

/* ── 9 · the offer: the number first, then Apple-clean ── */
.offer-number { margin: 0 0 1rem; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.offer-number small { font-size: inherit; }
.offer-number small::before { content: " · "; }
.h2 { font-size: var(--t-huge); line-height: 0.92; letter-spacing: -0.04em; }
.offer .h2 { max-width: 12ch; }
.offer .offer-sub, .offer .offer-scarce, .offer .offer-stack li span { font-size: var(--t-body); }

/* reduced motion: everything readable at once, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .ln > span, .beat, .scene-punch, .hero-after, .hero-cta, .hero-bottle { transition: none !important; transform: none !important; opacity: 1 !important; }
  .scene { height: auto; } .scene-stick { position: relative; height: auto; min-height: 100svh; }
  .scene-beats { position: static; padding: 60svh 0 2rem; } .beat { position: static; margin-bottom: 1.2rem; } .scene-punch { position: static; margin-bottom: 4rem; }
}
/* the offer stack: the label never wraps (Apple-clean rows) */
.offer-stack li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
@media (max-width: 420px) { .offer-stack li { grid-template-columns: 6rem 1fr; } }
/* the product stands on something: a faint contact shadow under the base, in the scene's own light */
.scene-product::before { content: ""; position: absolute; left: 50%; bottom: -1.2svh; width: 42%; height: 4svh; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 100%); z-index: 0; pointer-events: none; }
.hero-bottle-shadow { display: none; }

/* ── 013 · own signature per state ──────────────────────────────────────── */
/* PRIME: the stroke draws through the word with the scrub; the sky brightens with it */
.scene-stroke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 18px rgba(159, 230, 211, 0.45)); }
.scene[data-state="prime"] .scene-stick::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #4a3a66 0%, #c98a8a 40%, #ffe3c0 100%); opacity: var(--bright, 0); }
/* PERFORM: the stop. The stage fades except the bottle, the task line and the stone come in, one drop falls */
.scene[data-state="perform"] .scene-stage > :not(.scene-product) { transition: opacity 0.5s var(--e-soft); }
.scene[data-state="perform"].stopped .scene-stage > :not(.scene-product) { opacity: 0; }
.scene[data-state="perform"].stopped .scene-stage { opacity: 1; }
.stop { position: absolute; left: var(--gutter, 6vw); bottom: clamp(3rem, 7svh, 5rem); z-index: 3; width: min(36ch, 40vw); opacity: 0; transform: translateY(0.6em); transition: opacity 0.5s var(--e-soft), transform 0.75s var(--e-norris); pointer-events: none; }
.scene.stopped .stop { opacity: 1; transform: none; }
.stop-line { margin: 0 0 1.2rem; font-size: var(--t-body); line-height: 1.5; color: var(--beat-ink); font-weight: 700; }
.stone { position: relative; width: clamp(96px, 12vw, 150px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); }
.stone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stone .drop { position: absolute; left: 50%; top: -14%; width: 9%; height: 13%; margin-left: -4.5%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, rgba(255, 244, 200, 0.95), rgba(214, 168, 40, 0.9)); transform: translateY(calc(var(--fall, 0) * 420%)) scale(calc(1 - var(--hit, 0))); opacity: var(--drop-a, 0); }
.stone .ring { position: absolute; left: 50%; top: 50%; width: 10%; height: 10%; border-radius: 50%; border: 2px solid rgba(255, 212, 0, 0.9); transform: translate(-50%, -50%) scale(calc(1 + var(--hit, 0) * 9)); opacity: calc((1 - var(--hit, 0)) * var(--hit, 0) * 4); }
.stone::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 212, 0, 0.35), transparent 60%); opacity: var(--hit, 0); }
/* UNWIND: the mist rises from the bottle and dissolves the letters */
.scene-mist { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.scene[data-state="unwind"] .scene-word { filter: blur(calc(var(--fade, 0) * 14px)); opacity: calc(0.92 * (1 - var(--fade, 0))); transform: translate(-50%, calc(-50% - var(--fade, 0) * 6svh)); transition: none; }
.scene[data-state="unwind"] .beat { letter-spacing: calc(var(--fade, 0) * 0.02em); filter: blur(calc(var(--fade, 0) * 0.6px)); }
.scene[data-state="unwind"] .scene-word.ln > span { transition: transform 1.1s var(--e-norris); }

/* ── 013 · the app: one interactive moment ─────────────────────────────── */
.app-try { margin-top: 2rem; display: grid; justify-items: center; gap: 1rem; }
.phone-try { width: min(100%, 22rem); }
.ap { background: #0b0d10; color: #ede9e3; border-radius: 23px; padding: 1.3rem 1.1rem 0; font-size: 0.95rem; min-height: 34rem; display: flex; flex-direction: column; }
.ap-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237, 233, 227, 0.6); }
.ap-brand sup { font-size: 0.7em; }
.ap-title { margin: 0.3rem 0 0.8rem; font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.ap-q { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.ap-sub { margin: 0.2rem 0 0.9rem; color: rgba(237, 233, 227, 0.6); font-size: 0.85rem; }
.ap-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.ap-state { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.9rem 0.3rem; min-height: 64px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: #14171c; color: var(--c); font: inherit; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: transform 0.3s var(--e-soft), border-color 0.3s var(--e-soft); }
.ap-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ap-state small { font-size: 0.7rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(237, 233, 227, 0.6); }
.ap-state:active, .ap-state.hit { transform: scale(0.96); border-color: var(--c); }
.ap-log { margin-top: 1.1rem; background: #14171c; border-radius: 14px; padding: 0.9rem 0.9rem 0.6rem; flex: 1; }
.ap-log-h { margin: 0 0 0.6rem; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237, 233, 227, 0.5); }
.ap-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ap-rows li { display: inline-flex; align-items: center; gap: 0.5rem; width: max-content; max-width: 100%; padding: 0.4rem 0.75rem; border-radius: 100px; border: 1px solid var(--c); color: var(--c); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; animation: apIn 0.6s var(--e-norris) both; }
.ap-rows li span { color: rgba(237, 233, 227, 0.7); font-weight: 600; letter-spacing: 0; text-transform: none; }
@keyframes apIn { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
.ap-empty { margin: 0; color: rgba(237, 233, 227, 0.5); font-size: 0.85rem; }
.ap-empty.gone { display: none; }
.ap-note { margin: 0.7rem 0 0; font-size: 0.85rem; color: rgba(237, 233, 227, 0.75); }
.ap-foot { display: flex; justify-content: space-around; padding: 0.9rem 0 1rem; margin-top: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(237, 233, 227, 0.45); }
.ap-foot span:first-child { color: #ede9e3; }
.app-try-cap { color: var(--ink-3); text-align: center; max-width: 36ch; }

/* ── 013 · hero on a phone: the bottle takes the clear space above the label; the hold is a 44 px target ── */
@media (max-width: 720px) {
  .hero-bottle { top: 5rem; height: 30svh; transform: translateY(5svh); }
  .hero7.switched .hero-bottle { transform: none; }
  .hold { min-height: 44px; }
}

/* the stop on a phone: the line at the top, the stone in the bottom-left corner under the bottle's base */
@media (max-width: 720px) {
  .stop { inset: 0; width: auto; }
  .stop-line { position: absolute; left: var(--gutter, 6vw); right: var(--gutter, 6vw); top: 5.5rem; margin: 0; }
  .stone { position: absolute; left: var(--gutter, 6vw); bottom: 2svh; width: 72px; }
}

/* ── 014 · the rituals back, full-bleed inside each scene (js/ritual.js drawing + timing, driven by the scene) ── */
.scene { height: 440vh; }
@media (max-width: 720px) { .scene { height: 400vh; } }
.scene .rit { position: absolute; inset: 0; z-index: 3; width: 100%; margin: 0; opacity: 0; pointer-events: none; transition: opacity 0.6s var(--e-soft); --band-w: 114vw; --band-top: 50svh; }
.scene .rit.live { opacity: 1; }
.scene .rit::before, .scene .rit::after, html.ritual .scene .rit::after { display: none; }
.scene .rit-track, html.ritual .scene .rit-track { height: 100%; }
.scene .rit-stage, html.ritual .scene .rit-stage { position: absolute; inset: 0; height: 100%; border-radius: 0; box-shadow: none; padding: 0; overflow: clip; }
.rit-wet, .rit-mist { left: 50%; top: 50svh; width: 114vw; }
.rit-veil { position: fixed; inset: 0; }
html.ritual .scene .rit-copy { top: 66svh; }
@media (min-width: 820px) and (orientation: landscape) {
  .scene .rit { --band-w: 62vw; }
  .rit-wet, .rit-mist { width: 62vw; left: 50%; top: 50svh; }
  html.ritual .scene .rit-space { left: 40%; }
  .rit-wet, .rit-mist { left: 40%; }
  html.ritual .scene .rit-copy { left: 66%; right: 5%; top: 0; }
}
.scene.rit-live .scene-stage { opacity: 0; pointer-events: none; }
.scene.rit-live .scene-cue { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .scene .rit { display: none; } }

/* ── 015 · every section clears the fixed header on a phone; the phone demo without the second brand ── */
@media (max-width: 720px) {
  .sec:not(.hero):not(.scene) { padding-top: calc(86px + 24px); }
  .state-after { padding-top: 2rem; }
}
.ap-head { justify-content: flex-end; }

/* ── 016 B · lights out between the studio shot and the ritual ── */
.scene-dark { position: absolute; inset: 0; z-index: 1; background: #06070a; opacity: 0; pointer-events: none; }
.scene .scene-product { transform-origin: 50% 50%; will-change: transform; }
.scene-product { left: 50%; transform: translateX(-50%); }
.scene-word { transition: none; }
/* ── 016 C · the Log it demo in the app section ── */
.app-demo { margin-top: 2rem; display: grid; justify-items: center; gap: 1rem; }
.app-demo .m3ld { width: 100%; }

/* ── 016 A · the hero: NOISE → SIGNAL ──────────────────────────────────── */
.hero8 { --ink: #ede9e3; --ink-2: rgba(237, 233, 227, 0.62); --ink-3: rgba(237, 233, 227, 0.4); --line: rgba(237, 233, 227, 0.16); --hold: 0;
  color: var(--ink); background: #060a14; position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 6rem 0 clamp(5.5rem, 12svh, 7rem); overflow: clip; isolation: isolate;
  transition: background 1.2s var(--e-soft); }
.hero8.switched { background: linear-gradient(180deg, #14112b 0%, #5c3350 42%, #a85e62 78%, #c9826a 100%); }
.hero-words { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter, 6vw); pointer-events: none; opacity: calc(1 - var(--hold)); transform: scale(calc(1 - 0.06 * var(--hold))); }
.hero-small { margin: 0 0 0.6rem; font-size: var(--t-body); font-weight: 700; letter-spacing: 0.02em; color: #ede9e3; }
.hero-huge { margin: 0; font-size: clamp(3.2rem, 15vw, 15rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.05em; color: #ede9e3; white-space: nowrap; margin-left: -0.04em; }
.hero8.switched .hero-words { display: none; }
.hero-noise { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero8.switched .hero-noise { z-index: 2; }
.hero-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; overflow: visible; }
.hero8.switched .hero-line { opacity: 1; }
.hero-line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero-line .glow { stroke: #9fe6d3; stroke-width: 22; opacity: 0.85; filter: blur(7px); }
.hero-line .core { stroke: #f2fffb; stroke-width: 3; filter: drop-shadow(0 0 4px #9fe6d3); }
.hero8.switched .hero-line path { transition: stroke-dashoffset 0.25s linear; stroke-dashoffset: 0; }
.hero-flash { position: absolute; inset: 0; z-index: 2; background: #d9fff4; opacity: 0; pointer-events: none; }
.hero8.switched .hero-flash { animation: heroFlash 0.5s var(--e-soft) 0.2s 1; }
@keyframes heroFlash { 0% { opacity: 0; } 30% { opacity: 0.4; } 100% { opacity: 0; } }
.hero8.settled .hero-line { opacity: 0; transition: opacity 1.6s var(--e-soft); }
.hero-clock8 { position: absolute; z-index: 1; left: 0; right: 0; top: 12svh; margin: 0; text-align: center; font-size: 36vw; font-weight: 900; letter-spacing: -0.06em; line-height: 0.85; color: #ede9e3; opacity: 0; pointer-events: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero8.switched .hero-clock8 { opacity: 0.92; transition: opacity 1.2s var(--e-soft) 0.5s; }
.hero8.switched .hero-top { margin-top: 58svh; }
.hero8 .hero-top { position: relative; z-index: 4; }
.hero8 .hero-clock { display: none; }
.hero8 .hero-now { margin: 0; color: var(--ink-2); opacity: 0; transition: opacity 0.6s var(--e-soft) 0.9s; }
.hero8 .hero-h1 { font-size: var(--t-huge); font-weight: 900; line-height: 0.92; letter-spacing: -0.04em; margin: 1rem 0 0; max-width: 14ch; }
.hero8 .hero-h1 .ln > span { transform: translateY(112%); }
.hero8.switched .hero-h1 .ln > span { transform: none; transition-delay: calc(0.9s + var(--i, 0) * 90ms); }
.hero8 .hero-cta { opacity: 0; transform: translateY(0.4em); transition: opacity 0.6s var(--e-soft) 1.4s, transform 0.75s var(--e-norris) 1.4s; margin-top: 1.2rem; }
.hero8.switched .hero-now, .hero8.switched .hero-cta { opacity: 1; transform: none; }
.hero8 .hero-cta .quiet { color: var(--ink-2); text-decoration: none; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; min-height: 44px; }
.hero8.switched .btn-primary { background: #0b0d10; color: #f2c59c; }
.hero8.switched .hero-h1 .l2 { color: rgba(237, 233, 227, 0.62); }
.hero8 .hero-hold { position: absolute; left: 50%; bottom: clamp(1.4rem, 4svh, 2.4rem); transform: translateX(-50%); z-index: 5; margin: 0; color: #ede9e3; border-color: rgba(237, 233, 227, 0.25); background: rgba(6, 10, 20, 0.5); min-height: 44px; }
.hero8.switched .hero-hold { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
html.hero-dark .hud { --ink: #ede9e3; }
@media (max-width: 720px) {
  .hero8 { padding-top: 5.5rem; }
  .hero-huge { font-size: 19vw; white-space: normal; }
  .hero-clock8 { top: 11svh; font-size: 36vw; }
  .hero8.switched .hero-top { margin-top: 30svh; }
  .hero8 .hero-h1 { max-width: 11ch; }
}
@media (prefers-reduced-motion: reduce) {
  .hero8 .hero-words, .hero8 .hero-noise { display: none; }
  .hero-clock8, .hero8 .hero-now, .hero8 .hero-cta { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero8 .hero-h1 .ln > span { transform: none !important; }
}

/* ── 018 · the state word on a phone: fitted by js to the width minus 4vw a side ── */
@media (max-width: 720px) { .scene-word { left: 4vw; right: 4vw; transform: translateY(-50%); text-align: center; } .scene[data-state="unwind"] .scene-word { transform: translateY(calc(-50% - var(--fade, 0) * 6svh)); } .scene-word.fitted { font-size: var(--word-fit); } }
/* the flow fades out before the statement so the light ink stays readable */
.hero8.switched .hero-noise { -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 90%); mask-image: linear-gradient(to bottom, #000 52%, transparent 90%); }

/* a lost WebGL context: no canvas, the words and the dawn carry the hero */
.hero8.noise-lost .hero-noise { display: none; }
.hero8.noise-lost .hero-words { opacity: 1; }

/* ── 018b A · THE DAY OPENS ─────────────────────────────────────────────── */
.opens { position: relative; height: 200vh; padding: 0; }
.opens-stick { position: sticky; top: 0; height: 100svh; overflow: clip; color: #ede9e3; }
.hero-noise.pinned { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, #14112b 0%, #5c3350 42%, #a85e62 78%, #c9826a 100%); }   /* the hero's canvas carries the sequence, on the hero's dawn */
.opens-clock { position: absolute; z-index: 1; left: 0; right: 0; top: 12svh; margin: 0; text-align: center; font-size: 36vw; font-weight: 900; letter-spacing: -0.06em; line-height: 0.85; color: #ede9e3; opacity: 0.92; white-space: nowrap; transform-origin: 50% 50%; transform: scale(var(--z, 1)); pointer-events: none; }
.opens-words { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.opens-word { position: absolute; left: var(--gutter, 6vw); right: var(--gutter, 6vw); top: 50%; transform: translateY(-50%); margin: 0; text-align: center; font-size: clamp(3rem, 14vw, 14rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; color: var(--c); opacity: var(--o, 0); text-shadow: 0 0 40px color-mix(in srgb, var(--c) 60%, transparent); }
.opens-line { position: absolute; z-index: 2; left: var(--gutter, 6vw); right: var(--gutter, 6vw); top: 50%; height: 0; opacity: var(--lo, 0); pointer-events: none; }
.opens-tick { position: absolute; top: 1.2rem; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.26em; color: rgba(237, 233, 227, 0.6); }
.opens-tick.l { left: 0; } .opens-tick.r { right: 0; }
.opens-node { position: absolute; top: -2.6rem; transform: translateX(-50%); font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.26em; color: var(--c); }
.opens-cap { position: absolute; z-index: 2; left: 0; right: 0; top: calc(50% + 4rem); margin: 0; text-align: center; font-size: var(--t-body); font-weight: 700; opacity: var(--lo, 0); pointer-events: none; }
.opens-static { display: none; }
@media (max-width: 720px) { .opens-clock { top: 11svh; } .opens-line { left: 6vw; right: 6vw; } .opens-node { font-size: 0.6rem; letter-spacing: 0.16em; } }
@media (prefers-reduced-motion: reduce) {
  .opens { height: auto; } .opens-stick { position: relative; height: auto; min-height: 0; padding: 4rem 0; }
  .opens-clock, .opens-words, .opens-line, .opens-cap { display: none; }
  .opens-static { display: grid; gap: 2rem; padding: 0 var(--gutter, 6vw); }
  .opens-s1 { display: grid; gap: 0.4rem; } .opens-s1 span { font-size: clamp(2.5rem, 9vw, 7rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.95; color: var(--c); }
  .opens-s2 { width: 100%; height: 80px; } .opens-s3 { height: 40svh; background: radial-gradient(60% 60% at 18% 50%, #9fe6d3 0%, transparent 70%); }
}
/* ── 018b B · the kit carousel: arrows, dots ────────────────────────────── */
.gallery { position: relative; }
.gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; }
.gal-arrow.prev { left: 1rem; } .gal-arrow.next { right: 1rem; }
@media (hover: hover) and (pointer: fine) { .gal-arrow { display: inline-flex; } }
.gal-dots i { cursor: pointer; pointer-events: auto; padding: 6px; box-sizing: content-box; background-clip: content-box; }
.gal-dots { pointer-events: auto; }

/* ── 020 fixes · the pinned canvas fills the dynamic viewport with no mask; the hero statement sits on a soft dim ── */
.hero-noise.pinned { height: 100dvh; min-height: 100vh; -webkit-mask-image: none; mask-image: none; }
.hero8.switched .hero-top::before { content: ""; position: absolute; z-index: -1; left: -3rem; right: -3rem; top: -2.5rem; bottom: -2.5rem; background: radial-gradient(closest-side, rgba(26, 18, 38, 0.72), rgba(26, 18, 38, 0)); filter: blur(28px); pointer-events: none; }
.hero8 .hero-top { isolation: isolate; }

/* ── 020 · kinetic type: the punchlines, driven by the scroll ─────────────── */
.scene-punch.kin { max-width: none; left: var(--gutter, 6vw); right: var(--gutter, 6vw); transition: none; }
.scene-punch.kin .kw, .scene-punch.kin .kl { display: inline-block; will-change: transform, opacity; }
.scene-punch.kin .kw { transform: translateY(0.6em); opacity: 0; }
.scene-punch.kin .kl { opacity: 0; }
.kin-prime .last { position: relative; }
.kin-stroke { position: absolute; left: 0; right: 0; bottom: -0.06em; height: 0.08em; background: #9fe6d3; transform-origin: left; transform: scaleX(0); border-radius: 2px; box-shadow: 0 0 18px rgba(159, 230, 211, 0.6); }
.kin-perform { position: absolute; padding: 0.3em 0.4em; }
.kin-frame { position: absolute; inset: 0; border: 1px solid #ffd400; pointer-events: none; clip-path: inset(0 100% 0 0); }
.kin-unwind .kl { filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .scene-punch.kin .kw, .scene-punch.kin .kl { transform: none !important; opacity: 1 !important; filter: none !important; } .kin-stroke { transform: none !important; } .kin-frame { clip-path: none !important; } }

/* ── 020 · truth lines and the close: a black stage that multiplies over the pinned canvas, the type is the window ── */
.truth { position: relative; height: 200vh; padding: 0; }
.truth-stick { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; background: #000; mix-blend-mode: multiply; overflow: clip; }
.truth-text { margin: 0; padding: 0 var(--gutter, 6vw); color: #fff; text-align: center; font-size: clamp(2.4rem, 8vw, 8rem); line-height: 0.95; letter-spacing: -0.04em; text-wrap: balance; transform: scale(var(--s, 1)); transform-origin: 50% 50%; max-width: 14ch; }
.mark { position: relative; height: 160vh; padding: 0; }
.mark-stick { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; background: #000; mix-blend-mode: multiply; overflow: clip; }
.mark-word { margin: 0; color: #fff; font-weight: 900; letter-spacing: -0.06em; line-height: 0.85; white-space: nowrap; font-size: var(--mark-fit, 30vw); }
.mark-word sup { font-size: 0.45em; vertical-align: 0.9em; }
.mark-cap { position: absolute; left: 0; right: 0; bottom: calc(60vh + 12svh); margin: 0; text-align: center; color: #ede9e3; font-size: var(--t-body); font-weight: 700; pointer-events: none; }
.mark-stick { padding-bottom: 14svh; }
@media (prefers-reduced-motion: reduce) { .truth, .mark { height: auto; } .truth-stick, .mark-stick { position: relative; height: 70svh; mix-blend-mode: normal; } .truth-text, .mark-word { color: #ede9e3; } .mark-cap { position: static; margin-top: -3rem; padding-bottom: 3rem; } }

/* ── 020 · the offer number: the next free number flips in like a split-flap board ── */
.offer-next { display: flex; align-items: baseline; gap: 0.8rem; margin: 0 0 1rem; font-size: var(--t-huge); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.offer-next small { font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-2); }
.offer-next-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.flip { display: inline-flex; perspective: 600px; }
.flip i { display: inline-block; font-style: normal; transform-origin: 50% 50%; backface-visibility: hidden; opacity: 0; transform: rotateX(90deg); }
.flip.on i { animation: flipIn 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes flipIn { 0% { opacity: 0; transform: rotateX(90deg); } 60% { opacity: 1; transform: rotateX(-14deg); } 100% { opacity: 1; transform: rotateX(0); } }
@media (prefers-reduced-motion: reduce) { .flip i { opacity: 1; transform: none; animation: none !important; } }

.kword { white-space: nowrap; display: inline-block; }
.offer-next:not([hidden]) + .offer-number { display: none; }

/* ── 024 · RACK FOCUS hero ───────────────────────────────────────────────── */
.hero9 { --hold: 0; position: relative; min-height: 100svh; overflow: clip; isolation: isolate; color: #ede9e3; background: #0c0a16; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 clamp(5.5rem, 13svh, 7.5rem); }
.rf-poster, .rf-poster img, .rf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rf-poster img { object-fit: cover; object-position: 50% 100%; }
.rf-canvas { opacity: 0; }
.rf-canvas.on { opacity: 1; }
.hero9 .hero-noise:not(.pinned) { display: none; }
.rf-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 8, 22, 0.55) 0%, rgba(10, 8, 22, 0) 38%, rgba(10, 8, 22, 0) 55%, rgba(8, 7, 14, calc(0.15 + 0.55 * var(--landed, 0))) 100%); transition: --landed 0.6s; }
.hero9.landed .rf-scrim { --landed: 1; background: linear-gradient(180deg, rgba(10, 8, 22, 0.45) 0%, rgba(10, 8, 22, 0) 30%, rgba(8, 7, 14, 0.1) 52%, rgba(8, 7, 14, 0.78) 100%); }
/* the idle type dissolves as the focus lands */
.hero9 .hero-words { justify-content: flex-start; padding-top: clamp(6rem, 16svh, 10rem); opacity: calc(1 - var(--hold) * 1.3); filter: blur(calc(var(--hold) * 10px)); transform: scale(calc(1 + var(--hold) * 0.06)); letter-spacing: calc(var(--hold) * 0.04em); }
.hero9.landed .hero-words { display: none; }
/* the stroke draws across once on landing */
.hero9 .hero-line { z-index: 2; }
.hero9.landed .hero-line { opacity: 1; }
.hero9.landed .hero-line path { transition: stroke-dashoffset 0.6s cubic-bezier(0.6, 0, 0.2, 1); stroke-dashoffset: 0; }
.hero9.settled .hero-line { opacity: 0.4; transition: opacity 1.4s var(--e-soft); }
/* landed: headline, statement, the way in */
.rf-land { position: relative; z-index: 4; }
.rf-h1 { margin: 0; font-size: var(--t-huge); font-weight: 900; line-height: 0.92; letter-spacing: -0.04em; max-width: 13ch; text-shadow: 0 2px 30px rgba(8, 7, 14, 0.5); }
.rf-statement { margin: 1rem 0 0; max-width: 34ch; font-size: var(--t-body); line-height: 1.5; color: rgba(237, 233, 227, 0.82); }
.rf-cta { margin-top: 1.3rem; }
.rf-cta .quiet { color: rgba(237, 233, 227, 0.75); text-decoration: none; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; min-height: 44px; }
.hero9 .btn-primary { background: #ede9e3; color: #0b0d10; }
.rf-h1, .rf-statement, .rf-cta { opacity: 0; transform: translateY(0.5em); transition: opacity 0.6s var(--e-soft), transform 0.75s var(--e-norris); }
.hero9.landed .rf-h1 { opacity: 1; transform: none; transition-delay: 0.55s; }
.hero9.landed .rf-statement { opacity: 1; transform: none; transition-delay: 0.8s; }
.hero9.landed .rf-cta { opacity: 1; transform: none; transition-delay: 1s; }
.hero9:not(.landed) .rf-land { pointer-events: none; }
/* the hold */
.rf-hold { position: absolute; left: 50%; bottom: clamp(1.4rem, 4svh, 2.4rem); transform: translateX(-50%); z-index: 5; margin: 0; min-height: 44px; color: #ede9e3; border-color: rgba(237, 233, 227, 0.28); background: rgba(10, 8, 22, 0.45); }
.hero9.landed .rf-hold { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
/* the day opens picks up from the landed frame's horizon */
.hero9 .hero-noise.pinned { background: linear-gradient(rgba(10, 8, 22, 0.3), rgba(10, 8, 22, 0.3)), url(/assets/rackfocus/poster-p720-048.webp) 50% 100% / cover no-repeat, #14112b; }
@media (min-aspect-ratio: 1/1) { .hero9 .hero-noise.pinned { background-image: linear-gradient(rgba(10, 8, 22, 0.3), rgba(10, 8, 22, 0.3)), url(/assets/rackfocus/poster-l1080-048.webp); } }
@media (max-width: 720px) { .rf-h1 { max-width: 10ch; } .hero9 .hero-words { padding-top: 6.5rem; } }
@media (prefers-reduced-motion: reduce) { .rf-h1, .rf-statement, .rf-cta { opacity: 1 !important; transform: none !important; } .hero9 .hero-words { display: none; } }
/* 024 fixes: no clock in this hero; the landed text sits where the idle words were, so the ball in focus stays clear */
.hero9 .hero-clock, .hero9 .hero-now { display: none !important; }
.hero9 { justify-content: flex-start; padding: clamp(6rem, 15svh, 9.5rem) 0 0; }
.hero9.landed .rf-scrim { background: linear-gradient(180deg, rgba(10, 8, 22, 0.72) 0%, rgba(10, 8, 22, 0.5) 34%, rgba(10, 8, 22, 0) 62%, rgba(8, 7, 14, 0) 100%); }
@media (max-width: 720px) { .hero9 { padding-top: 6.5rem; } .rf-cta .btn-primary { width: auto; } }

/* 024: the idle line wraps on wide screens instead of running off the edge */
.hero9 .hero-huge { white-space: normal; font-size: clamp(3.2rem, 11vw, 12rem); max-width: 9ch; }

/* 025: no diagonal stroke after landing; one teal underline under "switch." draws in once the headline is fully in, and stays */
.hero9 .hero-line { display: none; }
.rf-switch { position: relative; display: inline-block; }
.rf-underline { position: absolute; left: 0; right: 0.32em; bottom: -0.04em; height: 4px; background: #9fe6d3; border-radius: 2px; transform-origin: left center; transform: scaleX(0); box-shadow: 0 0 12px rgba(159, 230, 211, 0.45); }
.hero9.landed .rf-underline { transform: scaleX(1); transition: transform 0.45s cubic-bezier(0.6, 0, 0.2, 1) 1.3s; }
@media (max-width: 720px) { .rf-underline { height: 3px; } }
@media (prefers-reduced-motion: reduce) { .rf-underline { transform: scaleX(1) !important; transition: none !important; } }

/* 026: the studio bottle is the ritual's frame 0, in the ritual's box (set by placeStudio), with nothing the ritual frame lacks:
   no drop shadow, no contact shadow, no zoom, no fit offset */
.scene .scene-product.still { will-change: auto; }
.scene .scene-product.still::before { display: none; }
.scene .scene-product.still img { inset: 0; width: 100%; height: 100%; object-fit: fill; filter: none; transform: none; transition: none; }
/* the handover: the stage's type and sky fade, the bottle stays fully opaque until the ritual layer (same pixels) is opaque over it */
.scene .scene-stage.out, .scene.rit-live .scene-stage { opacity: 1; }
.scene .scene-stage.out > :not(.scene-dark):not(.scene-product), .scene.rit-live .scene-stage > :not(.scene-dark):not(.scene-product) { opacity: 0 !important; transition: opacity 0.5s var(--e-soft); }
.scene .scene-stage.out > .scene-product { opacity: 0; }
.scene.rit-live .scene-stage > .scene-product { opacity: 0; transition: opacity 0s linear 0.7s; }

/* ── 027 · WHY IT WORKS ─────────────────────────────────────────────────── */
.why { padding-block: clamp(5rem, 12svh, 8rem); }
.why-eyebrow { margin: 0 0 2rem; color: var(--ink-2); }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.why-card { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.why-n { margin: 0 0 0.9rem; color: var(--accent); }
.why-h { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.why-line { margin: 0.6rem 0 0; font-size: var(--t-body); line-height: 1.5; color: var(--ink-2); max-width: 34ch; }
.why-more { margin-top: 0.8rem; }
.why-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.why-more summary::-webkit-details-marker { display: none; }
.why-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.why-arrow { display: inline-block; transition: transform 0.3s var(--e-soft); }
.why-more[open] .why-arrow { transform: rotate(180deg); }
.why-body { overflow: hidden; }
.why-body p { margin: 0; padding: 0.2rem 0 0.4rem; font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); max-width: 38ch; }
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ── 027 · sticky CTA ────────────────────────────────────────────────────── */
.sticky-cta { --lift: 0px; position: fixed; z-index: 900; right: clamp(16px, 2.5vw, 32px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--lift)); display: flex; align-items: center; gap: 1rem; padding: 0.55rem 0.55rem 0.55rem 1.2rem; border-radius: 999px; background: rgba(12, 12, 18, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(237, 233, 227, 0.14); color: #ede9e3; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s var(--e-soft), transform 0.3s var(--e-soft), bottom 0.3s var(--e-soft); }
.sticky-cta.on { opacity: 1; transform: none; pointer-events: auto; }
.sticky-txt { display: grid; gap: 0.15rem; }
.sticky-label { margin: 0; font-size: 0.66rem; letter-spacing: 0.2em; color: rgba(237, 233, 227, 0.72); }
.sticky-left { margin: 0; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sticky-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.2rem; border-radius: 999px; background: #ede9e3; color: #0b0d10; text-decoration: none; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 720px) { .sticky-cta { left: 16px; right: 16px; justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; transform: none; } }

/* 027: the sticky label stays on one line on a phone */
.sticky-label { white-space: nowrap; }
@media (max-width: 720px) { .sticky-label { font-size: 0.6rem; letter-spacing: 0.14em; } .sticky-btn { padding: 0 1rem; letter-spacing: 0.12em; } }

/* ── 028 · the 30-day guarantee, visible ────────────────────────────────── */
.guarantee-micro { display: inline-flex; align-items: center; min-height: 32px; color: inherit; opacity: 0.78; text-decoration: none; letter-spacing: 0.16em; border-bottom: 1px solid currentColor; padding-bottom: 1px; min-height: 0; }
.guarantee-micro:hover, .guarantee-micro:focus-visible { opacity: 1; }
.rf-guarantee { margin: 0.9rem 0 0; color: rgba(237, 233, 227, 0.9); opacity: 0; transform: translateY(0.5em); transition: opacity 0.6s var(--e-soft), transform 0.75s var(--e-norris); }
.hero9.landed .rf-guarantee { opacity: 1; transform: none; transition-delay: 1.15s; }
.offer-guarantee-line { margin: 1.6rem 0 0.6rem; font-size: var(--t-body); font-weight: 700; line-height: 1.5; max-width: 36ch; }
.offer-guarantee-line a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.offer .risk .guarantee-micro { font-size: var(--t-micro); }
/* the carousel's centre crossfade scales the media, never the layout */
.gal-media { transform-origin: 50% 60%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .rf-guarantee { opacity: 1 !important; transform: none !important; } }
/* 028: one line on a phone, a text underline (not a full-width border), readable over the bokeh */
.guarantee-micro { border-bottom: 0; padding-bottom: 0; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; opacity: 0.9; }
.rf-guarantee { margin-top: 0.5rem; }
@media (max-width: 720px) { .guarantee-micro { letter-spacing: 0.08em; font-size: 0.62rem; } }
@media (max-width: 720px) { .offer .risk .guarantee-micro { font-size: 0.6rem; letter-spacing: 0.06em; } }

/* ── 032 · truth lines and the mark: a bright still of our renders through the letters (v6/truth.js), cream fill under it,
   no live canvas, no blend; pin of one viewport, readable from the first frame ── */
.truth { height: 200svh; }
.mark { height: 130svh; }
.truth-stick, .mark-stick { mix-blend-mode: normal; background: #000; }
.truth-text, .mark-word { color: #ede9e3; background-color: #ede9e3; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transform: none; }
.truth-text { font-size: clamp(3rem, 12.5vw, 8.5rem); font-weight: 900; max-width: 13ch; }
.mark-word sup { -webkit-text-fill-color: transparent; }
.mark-stick { flex-direction: column; gap: clamp(1rem, 3svh, 2rem); padding-bottom: 0; }
.mark-cap { position: static; bottom: auto; }
@media (min-aspect-ratio: 1/1) { .truth-text { max-width: 16ch; } }
@media (prefers-reduced-motion: reduce) { .truth, .mark { height: auto; } .truth-stick, .mark-stick { height: 100svh; } .truth-text, .mark-word { -webkit-text-fill-color: transparent; } .mark-cap { margin: 0; padding: 0; } }

/* ── 033 · WHY IT WORKS as three pictures: each reason is an image with one line, the depth stays behind "Why ↓".
   Phone: full-width tall cards that stack (each sticks, the next slides over). Desktop: three tall cards side by side.
   The numerals are the only colour (the state colours); the section sits in the space world of 032. ── */
.why { --card-h: min(78svh, 700px); }
.why-grid { display: block; }
.why-card { position: sticky; top: calc(70px + var(--i, 0) * 12px); border-top: 0; padding: 0; margin: 0 0 1.4rem; min-height: var(--card-h); display: flex; flex-direction: column; background: #0b0c10; border: 1px solid rgba(237, 233, 227, 0.09); border-radius: 18px; overflow: hidden; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55); color: #ede9e3; }
.why-card:nth-child(1) { --i: 0; } .why-card:nth-child(2) { --i: 1; } .why-card:nth-child(3) { --i: 2; }
.why-vis { position: relative; flex: none; height: calc(var(--card-h) * 0.62); overflow: hidden; background: #000; }
.why-vis img, .why-vis picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.why-text { padding: 1.1rem 1.25rem 0.6rem; display: flex; flex-direction: column; flex: 1; }
.why-n { margin: 0 0 0.5rem; font-size: clamp(2.8rem, 11vw, 4.2rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.05em; color: var(--c); }
.why-h { font-size: clamp(1.3rem, 5.4vw, 1.6rem); line-height: 1.12; }
.why-line { color: rgba(237, 233, 227, 0.74); }
.why-more { margin-top: auto; padding-top: 0.4rem; }
.why-body p { color: rgba(237, 233, 227, 0.74); }
/* card 1: the route, a slow push-in while the card is on screen */
.why-vis-route img { transform: scale(1.08); transition: transform 2.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.why-card.in .why-vis-route img { transform: scale(1); }
/* card 2: the four memories, a 2×2 mosaic that tightens together, slightly overlapping */
.why-vis-bakery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; padding: 6%; background: #08090b; }
.why-vis-bakery img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); transition: transform 1.2s cubic-bezier(0.65, 0.05, 0, 1); }
.why-vis-bakery img:nth-child(1) { transform: translate(-14%, -12%) rotate(-5deg) scale(0.9); }
.why-vis-bakery img:nth-child(2) { transform: translate(14%, -12%) rotate(4deg) scale(0.9); }
.why-vis-bakery img:nth-child(3) { transform: translate(-14%, 12%) rotate(4deg) scale(0.9); }
.why-vis-bakery img:nth-child(4) { transform: translate(14%, 12%) rotate(-4deg) scale(0.9); }
.why-card.in .why-vis-bakery img:nth-child(1) { transform: translate(5%, 5%) rotate(-2deg) scale(1.04); }
.why-card.in .why-vis-bakery img:nth-child(2) { transform: translate(-5%, 4%) rotate(1.5deg) scale(1.04); z-index: 1; }
.why-card.in .why-vis-bakery img:nth-child(3) { transform: translate(4%, -5%) rotate(1.5deg) scale(1.04); z-index: 2; }
.why-card.in .why-vis-bakery img:nth-child(4) { transform: translate(-5%, -5%) rotate(-1.5deg) scale(1.04); z-index: 3; }
/* card 3: the bracelet, the stones dim, a glow travels from stone to stone once and rests on the glowing one (v6/why.js) */
.why-vis-ring .ring-base { filter: brightness(0.38) saturate(0.7); }
.why-vis-ring .ring-lit, .why-vis-ring .ring-glow { position: absolute; inset: 0; }
.why-vis-ring .ring-lit { -webkit-mask-image: radial-gradient(circle at var(--gx, 39%) var(--gy, 70%), #000 0, #000 var(--gr, 7%), transparent calc(var(--gr, 7%) * 1.9)); mask-image: radial-gradient(circle at var(--gx, 39%) var(--gy, 70%), #000 0, #000 var(--gr, 7%), transparent calc(var(--gr, 7%) * 1.9)); }
.why-vis-ring .ring-glow { background: radial-gradient(circle at var(--gx, 39%) var(--gy, 70%), rgba(255, 196, 110, 0.55) 0, rgba(255, 170, 70, 0.18) calc(var(--gr, 7%) * 1.6), transparent calc(var(--gr, 7%) * 2.6)); mix-blend-mode: screen; pointer-events: none; }
@media (min-width: 900px) {
  .why { --card-h: min(80svh, 760px); }
  .why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
  .why-card { position: relative; top: auto; margin: 0; box-shadow: none; }
  .why-vis { height: calc(var(--card-h) * 0.58); }
  .why-n { font-size: clamp(3rem, 4.4vw, 4.6rem); }
  .why-h { font-size: clamp(1.25rem, 1.6vw, 1.55rem); }
}
@media (prefers-reduced-motion: reduce) { .why-vis-route img, .why-vis-bakery img { transition: none !important; } }

/* ── 034 · the kit shows the bottles once (the carousel and the unboxing); the Huddle is three real phones, no bottle headers,
   no white boxes: black bezel, 44 px corners, a dynamic-island pill, soft shadow. Phone: one swipe row, 15 percent of the next peeks.
   Desktop: three in a row, the middle one larger and forward. ── */
.unbox-row .unbox-tile { flex: 1 1 100%; }
.hud-phones { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 3rem); align-items: start; }
.hphone { margin: 0; display: flex; flex-direction: column; align-items: center; }
.rphone { position: relative; width: min(100%, 290px); aspect-ratio: 1 / 1.55; padding: 10px 10px 0; border-radius: 44px 44px 0 0; background: #050506;
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.9), 0 16px 36px -18px rgba(0, 0, 0, 0.6);
  -webkit-mask-image: linear-gradient(#000 72%, transparent 100%); mask-image: linear-gradient(#000 72%, transparent 100%); }
.rphone::before { content: ""; position: absolute; z-index: 2; top: calc(10px + 3.2%); left: 50%; width: 31%; aspect-ratio: 3.6 / 1; transform: translateX(-50%); border-radius: 99px; background: #000; }
.rphone-screen { height: 100%; overflow: hidden; border-radius: 34px 34px 0 0; background: #fff; }
.rphone-screen img { display: block; width: 100%; height: auto; }
.hphone .hc-text { margin-top: 0.4rem; width: min(100%, 290px); }
.hphone .micro { color: var(--accent); }
.hphone h3 { margin: 0.6rem 0 0.4rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.hphone p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.hphone .hc-lead { margin-top: 0.6rem; font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
@media (min-width: 721px) {
  .hphone:nth-child(2) { position: relative; z-index: 2; transform: translateY(-3%) scale(1.1); transform-origin: 50% 0; }
  .hphone:nth-child(2) .hc-text { transform: scale(0.91); transform-origin: 50% 0; }
}
@media (max-width: 720px) {
  .hud-phones { display: flex; gap: 4vw; overflow-x: auto; scroll-snap-type: x mandatory; margin: 2rem calc(-1 * var(--gutter, 6vw)) 0; padding: 0 var(--gutter, 6vw) 0.5rem; scroll-padding: 0 var(--gutter, 6vw); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hud-phones::-webkit-scrollbar { display: none; }
  .hphone { flex: 0 0 78vw; scroll-snap-align: start; align-items: flex-start; }
  .rphone, .hphone .hc-text { width: 100%; }
  .rphone { border-radius: 40px 40px 0 0; }
}
/* 034: the bezel reads as a device on the near-black page: dark graphite metal with a black inner ring, no light border */
.rphone { background: linear-gradient(160deg, #2b2c31 0%, #16171b 38%, #0c0d10 100%); }
.rphone-screen { box-shadow: 0 0 0 2px #000; }
@media (max-width: 720px) { .hphone { flex-basis: 81.5vw; } }

/* ── 035 · one bottom bar on the phone: the sticky bar's left side is "Not now?" (opens the reminder sheet); the reminder's own
   phone bar is off. The header is transparent over the dark sections; the day's colour band only shows over the light ones. ── */
.sticky-later { display: none; }
@media (max-width: 720px) {
  .sticky-cta .sticky-label { display: none; }
  .sticky-later { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.4rem 0 0.7rem; margin: 0; border: 0; background: none; color: rgba(237, 233, 227, 0.86); font: inherit; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.35em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
  .sticky-later:active, .sticky-later:focus-visible { text-decoration-color: currentColor; }
  .sticky-later[hidden] { display: none; }
  .sticky-txt { display: flex; align-items: center; gap: 0.6rem; }
  .m3-remind-bar { display: none !important; }
}
html.hero-dark .hud { background: transparent; }
/* 035: the truth lines and the mark start with their black stage, no inherited .sec padding (that strip showed the day colour) */
section.sec.truth:not(.hero), section.sec.mark:not(.hero) { padding: 0; }

/* ── 036 · calmer: WHY without stacking, a real 2×2, truth lines without a pin, a lower bar that gets out of the way ── */
.why-card { position: relative; top: auto; min-height: 0; box-shadow: none; }
.why-vis { height: auto; aspect-ratio: 1 / 1; }
.why-text { flex: none; padding-bottom: 1rem; }
.why-more { margin-top: 0.8rem; padding-top: 0; }
@media (min-width: 900px) { .why-vis { height: auto; aspect-ratio: 1 / 1; } }
/* card 02: four equal square tiles, 6 px gaps, no overlap, no rotation; the entrance ends exactly on the grid */
.why-vis-bakery { gap: 6px; padding: 0; background: #000; }
.why-card .why-vis-bakery img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; box-shadow: none; z-index: auto; transition: transform 0.9s cubic-bezier(0.65, 0.05, 0, 1); }
.why-card .why-vis-bakery img:nth-child(1) { transform: translate(-8px, -8px) scale(0.96); }
.why-card .why-vis-bakery img:nth-child(2) { transform: translate(8px, -8px) scale(0.96); }
.why-card .why-vis-bakery img:nth-child(3) { transform: translate(-8px, 8px) scale(0.96); }
.why-card .why-vis-bakery img:nth-child(4) { transform: translate(8px, 8px) scale(0.96); }
.why-card.in .why-vis-bakery img:nth-child(n) { transform: none; }
/* truth lines and the mark: normal 100svh sections, the words come in once (v6/truth.js splits them, each word carries the fill) */
.truth, .mark { height: auto; }
.truth-stick, .mark-stick { position: relative; height: 100svh; }
.truth-text { position: relative; }
.truth-text.split { background: none; -webkit-text-fill-color: transparent; }
.truth-text .tw { display: inline-block; background-color: #ede9e3; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; transform: translateY(0.35em); transition: opacity 0.5s var(--e-soft), transform 0.5s var(--e-norris); transition-delay: calc(var(--ln, 0) * 0.12s); }
.truth-text.in .tw { opacity: 1; transform: none; }
.mark-word { opacity: 0; transform: translateY(0.2em); transition: opacity 0.6s var(--e-soft), transform 0.6s var(--e-norris); }
.mark-word.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .truth-text .tw, .mark-word { opacity: 1 !important; transform: none !important; transition: none !important; } }
/* the bar on phones: 56 px, one line, 12 px above the safe area; it slides down while scrolling down (v6/sticky.js) */
@media (max-width: 720px) {
  .sticky-cta { bottom: calc(12px + env(safe-area-inset-bottom) + var(--lift)); padding: 5px 5px 5px 8px; gap: 0.5rem; }
  .sticky-cta .sticky-btn { min-height: 44px; }
  .sticky-cta.on.tucked { transform: translateY(calc(100% + 12px + env(safe-area-inset-bottom))); pointer-events: none; }
  /* every section's last line stays clear of the visible bar */
  .sec:not(.hero):not(.scene):not(.truth):not(.mark):not(.opens) { padding-bottom: max(clamp(4.5rem, 11vh, 7rem), calc(56px + 12px + 24px + env(safe-area-inset-bottom))); }
  .footer { padding-bottom: calc(56px + 12px + 24px + env(safe-area-inset-bottom)); }
}
/* 036: the scenes start and end with their own stage; the inherited .sec padding showed a strip of the day sky above and below */
section.sec.scene { padding: 0; }

/* ── 037 · the kit as one moment: the unboxing, full width on the phone, captions over its lower part, then the headline ── */
.kit-film { position: relative; margin: 1.6rem 0 0; background: #2b2b2d; overflow: hidden; }
.kit-video, .kit-still { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1350; object-fit: cover; }
.kit-still { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 0.6s var(--e-soft); }
.kit-caps { position: absolute; left: 0; right: 0; bottom: 0; min-height: 34%; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.78) 100%); }
.kit-cap { position: absolute; left: var(--gutter, 6vw); right: var(--gutter, 6vw); bottom: clamp(1.4rem, 5vw, 2.6rem); margin: 0; display: grid; gap: 0.45rem; color: #ede9e3; opacity: 0; transform: translateY(0.6em); transition: opacity 0.35s var(--e-soft), transform 0.5s var(--e-norris); }
.kit-cap.on { opacity: 1; transform: none; }
.kit-cap-name { letter-spacing: 0.2em; color: rgba(237, 233, 227, 0.8); }
.kit-cap-name em { font-style: normal; color: rgba(237, 233, 227, 0.55); margin-left: 0.4em; }
.kit-cap-line { font-size: clamp(1.15rem, 5vw, 1.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; max-width: 24ch; }
.kit-again { position: absolute; right: var(--gutter, 6vw); bottom: clamp(1.2rem, 4vw, 2rem); z-index: 2; min-height: 44px; padding: 0 0.2rem; border: 0; background: none; color: #ede9e3; font: inherit; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.35em; cursor: pointer; }
.kit-again[hidden] { display: none; }
.kit-after { margin-top: clamp(1.8rem, 5vw, 3rem); opacity: 0; transform: translateY(0.6em); transition: opacity 0.6s var(--e-soft), transform 0.75s var(--e-norris); }
.kit.kit-done .kit-after { opacity: 1; transform: none; }
.kit-after .unbox-cap { margin-top: 1rem; }
.kit.kit-done .kit-caps { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.4) 100%); }
@media (min-width: 721px) {
  .kit-film { width: min(100% - 2 * var(--gutter, 6vw), 34rem); margin-left: auto; margin-right: auto; border-radius: 18px; }
  .kit-cap, .kit-again { left: 1.6rem; right: 1.6rem; } .kit-again { left: auto; }
  .kit-after { text-align: center; } .kit-after .h2 { margin-left: auto; margin-right: auto; }
}
/* reduced motion: the last frame as a still, the five captions as a short list */
.kit.kit-still-mode .kit-still { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .kit-video { display: none; } .kit-still { position: static; opacity: 1; height: auto; }
  .kit-film { overflow: visible; background: none; }
  .kit-caps { position: static; min-height: 0; background: none; padding: 1.2rem var(--gutter, 6vw) 0; display: grid; gap: 1rem; }
  .kit-cap { position: static; opacity: 1; transform: none; }
  .kit-after { opacity: 1; transform: none; }
}
/* 037: the fallback when the video cannot play: the same as reduced motion (the last frame, the captions as a list, the headline) */
.kit.kit-list .kit-video { display: none; }
.kit.kit-list .kit-still { position: static; opacity: 1; height: auto; }
.kit.kit-list .kit-film { overflow: visible; background: none; }
.kit.kit-list .kit-caps { position: static; min-height: 0; background: none; padding: 1.2rem var(--gutter, 6vw) 0; display: grid; gap: 1rem; }
.kit.kit-list .kit-cap { position: static; opacity: 1; transform: none; }
.kit.kit-list .kit-again { display: none; }

/* ── 039 · reduced motion: each state scene is one readable card (no scroll height, nothing sticky or absolute); the earlier
   `.scene { height: auto }` lost to the later `.scene { height: 440vh }` ── */
@media (prefers-reduced-motion: reduce) {
  section.sec.scene { height: auto; padding: 0; }
  section.sec.scene .scene-stick { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; padding: clamp(5rem, 12svh, 7rem) var(--gutter, 6vw) clamp(3rem, 8svh, 5rem); }
  section.sec.scene .scene-stage { position: relative; inset: auto; height: auto; display: grid; gap: 1rem; justify-items: start; }
  section.sec.scene .scene-stage > * { position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important; margin: 0; }
  section.sec.scene .scene-dark, section.sec.scene .scene-stroke { display: none !important; }
  section.sec.scene .scene-word { font-size: clamp(3rem, 14vw, 8rem); line-height: 0.9; }
  section.sec.scene .scene-product { width: auto; height: auto; }
  section.sec.scene .scene-product img { position: static !important; inset: auto !important; transform: none !important; width: auto; height: min(46svh, 26rem); max-width: 60vw; object-fit: contain; }
  section.sec.scene .scene-beats { padding: 0; max-width: 34ch; }
  section.sec.scene .scene-punch, section.sec.scene .kin-perform { position: static !important; inset: auto !important; transform: none !important; margin: 0.6rem 0 0; }
  section.sec.scene .scene-punch .kw, section.sec.scene .scene-punch .kl { transform: none !important; opacity: 1 !important; filter: none !important; }
}
/* 039: WAKE ends in a 40svh gradient from its sky colour into the black of the first truth line (no hard cut, no strip) */
section.sec.state#wake { padding-bottom: 0; }
section.sec.state#wake::after { content: ""; display: block; height: 40svh; margin-top: clamp(3rem, 8svh, 5rem); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 55%, #000 100%); }

/* ── 040 · kit polish: the eyebrow sits on the film (no collision with the header), the headline block takes no space while the
   film plays (no empty half screen under it) and comes in after the end ── */
.kit-film { margin-top: 0; }
.kit-eyebrow { position: absolute; z-index: 3; top: clamp(1rem, 4vw, 1.6rem); left: var(--gutter, 6vw); margin: 0; color: rgba(237, 233, 227, 0.82); }
@media (min-width: 721px) { .kit-eyebrow { left: 1.6rem; } }
.kit:not(.kit-done) .kit-after { display: none; }
.kit.kit-done .kit-after { animation: kitAfterIn 0.75s var(--e-norris) both; }
@keyframes kitAfterIn { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { section.sec.kit { padding-top: clamp(4.5rem, 9svh, 5.5rem); } }
@media (prefers-reduced-motion: reduce) { .kit-eyebrow { position: static; padding: 0 var(--gutter, 6vw) 1rem; color: inherit; } .kit.kit-done .kit-after { animation: none; } }
.kit.kit-list .kit-eyebrow { position: static; padding: 0 var(--gutter, 6vw) 1rem; color: inherit; }

/* ── 042 · the kit as one surface: the section is the video's own table colour (sampled at its edges: #30302d), fading in from the
   page above and out into the page below over 30svh; the video's edges are feathered (12 percent) so it has no visible border;
   eyebrow, captions and headline sit on that surface; the video loops (v6/kit6.js) ── */
section.sec.kit { --kit-surface: #30302d; padding: 30svh 0 calc(30svh + 2rem); background: linear-gradient(180deg, rgba(48, 48, 45, 0) 0, var(--kit-surface) 30svh, var(--kit-surface) calc(100% - 30svh), rgba(48, 48, 45, 0) 100%); color: #ede9e3; }
.kit-film { background: none; border-radius: 0; overflow: visible; }
.kit-video, .kit-still { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; }
.kit-caps { background: linear-gradient(180deg, rgba(48, 48, 45, 0) 0%, rgba(48, 48, 45, 0.7) 45%, rgba(48, 48, 45, 0.92) 100%); }
.kit:not(.kit-done) .kit-after, .kit .kit-after { display: block; opacity: 1; transform: none; animation: none; }
.kit-after { margin-top: clamp(1.4rem, 4vw, 2.4rem); }
.kit-after .h2, .kit-after .unbox-cap { color: #ede9e3; }
.kit-after .unbox-cap { color: rgba(237, 233, 227, 0.72); }
.kit .kit-eyebrow { color: rgba(237, 233, 227, 0.82); }
@media (min-width: 721px) { .kit-film { border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .kit-video, .kit-still { -webkit-mask-image: none; mask-image: none; } }
.kit.kit-list .kit-still { -webkit-mask-image: none; mask-image: none; }
.kit.kit-list .kit-caps { background: none; }
@media (prefers-reduced-motion: reduce) { .kit-caps { background: none; } }
.kit.kit-still-mode .kit-caps, .kit.kit-list .kit-caps { background: none; }

/* ── 043 · the kit on the site's own night navy: no grey surface, no fades; the colour is read from the video's first frame
   (v6/kit6.js sets --kit-bg), fallback #141125; navy scrim under the captions; the video edges stay feathered ── */
section.sec.kit { padding: clamp(4.5rem, 11vh, 7rem) 0; background: var(--kit-bg, #141125); }
.kit-caps { background: linear-gradient(180deg, rgba(20, 17, 37, 0) 0%, rgba(20, 17, 37, 0.7) 45%, rgba(20, 17, 37, 0.94) 100%); }
.kit-play { position: absolute; z-index: 4; left: 50%; top: 42%; transform: translate(-50%, -50%); min-height: 48px; padding: 0 1.4rem; border-radius: 999px; border: 1px solid rgba(237, 233, 227, 0.4); background: rgba(20, 17, 37, 0.7); color: #ede9e3; font: inherit; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.kit-play[hidden] { display: none; }
.kit.kit-paused .kit-caps { display: none; }
@media (max-width: 720px) { section.sec.kit { padding-bottom: calc(56px + 12px + 24px + env(safe-area-inset-bottom)); } }

/* ── 043 · the MODE³ ending (v6/mark.js) ── */
section.sec.mark { height: auto; }
.mark-stick { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.2rem, 4svh, 2.4rem); background: #000; overflow: hidden; padding: 0 0 calc(56px + 36px); }
.mark-stage { position: relative; width: 100%; display: grid; justify-items: center; }
.mark-stage .mark-word { grid-area: 1 / 1; margin: 0; font-weight: 900; letter-spacing: -0.06em; line-height: 0.85; white-space: nowrap; color: transparent; background: none; -webkit-text-fill-color: transparent; opacity: 1; transform: none; }
.mark-stage .ml { display: inline-block; background-color: #ede9e3; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; transform: scale(1.2); filter: blur(10px); transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mark-stage .ml:nth-child(2) { transition-delay: 70ms; } .mark-stage .ml:nth-child(3) { transition-delay: 140ms; } .mark-stage .ml:nth-child(4) { transition-delay: 210ms; }
.mark-stage .ms { font-size: 0.45em; vertical-align: 0.9em; letter-spacing: 0; filter: none; transform: translateY(-120vh); transition: opacity 0.1s linear 0.56s, transform 0.45s cubic-bezier(0.55, 0, 1, 0.45) 0.56s; }
.mark-stick.in .ml { opacity: 1; transform: none; filter: none; }
.mark-ignite { opacity: 0; }
/* the comet: an amber streak above the landing point, then a flash and one ring */
.mark-streak, .mark-flash, .mark-ring { position: absolute; left: var(--fx-x, 80%); top: var(--fx-y, 20%); pointer-events: none; }
.mark-streak { width: 3px; height: 46vh; margin-left: -1.5px; transform-origin: 50% 100%; transform: translateY(-100%) scaleY(0); opacity: 0; background: linear-gradient(180deg, rgba(255, 179, 71, 0), rgba(255, 196, 110, 0.9)); border-radius: 2px; }
.mark-stick.in .mark-streak { animation: markStreak 0.55s cubic-bezier(0.55, 0, 1, 0.45) 0.5s both; }
@keyframes markStreak { 0% { transform: translateY(-160%) scaleY(0.2); opacity: 0; } 30% { opacity: 1; } 85% { transform: translateY(-100%) scaleY(1); opacity: 1; } 100% { transform: translateY(-100%) scaleY(0); opacity: 0; } }
.mark-flash { width: var(--fx-s, 80px); height: var(--fx-s, 80px); margin: calc(var(--fx-s, 80px) / -2) 0 0 calc(var(--fx-s, 80px) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(255, 241, 214, 0.95) 0%, rgba(255, 179, 71, 0.55) 40%, rgba(255, 179, 71, 0) 70%); opacity: 0; transform: scale(0.4); mix-blend-mode: screen; }
.mark-ring { width: var(--fx-s, 80px); height: var(--fx-s, 80px); margin: calc(var(--fx-s, 80px) / -2) 0 0 calc(var(--fx-s, 80px) / -2); border-radius: 50%; border: 2px solid rgba(255, 196, 110, 0.9); opacity: 0; transform: scale(0.3); }
.mark-stick.landed .mark-flash { animation: markFlash 0.5s ease-out both; }
.mark-stick.landed .mark-ring { animation: markRing 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes markFlash { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes markRing { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(3.2); } }
/* Before. During. After. word by word in the state colours */
.mark-stick .mark-cap { position: static; margin: 0; font-size: clamp(1.1rem, 4.6vw, 1.8rem); font-weight: 900; letter-spacing: -0.03em; }
.mark-cap span { display: inline-block; color: var(--c); opacity: 0; transform: translateY(0.4em); transition: opacity 0.35s var(--e-soft), transform 0.45s var(--e-norris); }
.mark-stick.landed .mark-cap span { opacity: 1; transform: none; }
.mark-stick.landed .mark-cap span:nth-child(2) { transition-delay: 0.25s; } .mark-stick.landed .mark-cap span:nth-child(3) { transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  .mark-stage .ml, .mark-cap span { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .mark-streak, .mark-flash, .mark-ring { display: none; }
  .mark-ignite { opacity: 1 !important; }
}

/* ── 043 · type pass, louder: every short statement (8 words or fewer) at 900, -0.05em, line-height 0.88, about 35 percent bigger,
   balanced; on phones capped in vw so the longest word still fits at 320; punch lines of 4 words or fewer a touch taller; one key word
   in the state colour in the state scenes (the legible accent variant); small labels quieter ── */
.h2, .why-h, .kit-cap-line, .close h2, .scene-punch, .rit-h, .moon-h1, .truth-text, .state-after h2, .opens-cap, .hphone h3 { font-weight: 900; letter-spacing: -0.05em; line-height: 0.88; text-wrap: balance; }
.h2 { font-size: clamp(3.71rem, 8.8vw, 9.45rem); }
.why-h { font-size: clamp(1.75rem, 2.2vw, 2.1rem); }
.kit-cap-line { font-size: clamp(1.55rem, 6.75vw, 2.16rem); max-width: 18ch; }
.close h2 { font-size: clamp(2.2rem, 4.6vw, 4.3rem); }
.scene-punch { font-size: calc(var(--t-huge) * 1.35); }
.rit-h { font-size: clamp(2rem, 3.1vw, 2.8rem); }
.moon-h1 { font-size: calc(var(--t-huge) * 1.35); max-width: 11ch; }
.truth-text { font-size: clamp(3rem, 12.5vw, 11.5rem); max-width: 16ch; }
.state-after h2 { font-size: clamp(5.4rem, 8vw, 7.5rem); }
.opens-cap { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.hphone h3 { font-size: 1.62rem; }
@media (max-width: 720px) {
  .h2 { font-size: min(3.71rem, 13.4vw); }
  .why-h { font-size: min(1.85rem, 7.6vw); }
  .close h2 { font-size: min(2.6rem, 10.4vw); }
  .scene-punch { font-size: min(calc(var(--t-huge) * 1.35), 12.6vw); }
  .rit-h { font-size: min(1.85rem, 7.8vw); }
  .moon-h1 { font-size: min(calc(var(--t-huge) * 1.35), 13.4vw); }
  .truth-text { font-size: min(13.2vw, 4.2rem); }
  .state-after h2 { font-size: min(5.4rem, 20vw); }
  .opens-cap { font-size: min(1.45rem, 6vw); }
  .hphone h3 { font-size: 1.5rem; }
}
/* punch lines of 4 words or fewer: taller, more compressed */
.moon-word, .moon-h1, .bakery-memory .bakery-word, .bakery-teal, .kin-unwind, .state-after h2 { scale: 1 1.12; transform-origin: 50% 100%; }
/* one key word in the state colour, in the state scenes (the last word carries the kinetic stroke already) */
.scene-punch .kw.last { color: var(--accent); }
/* the two levels further apart: labels small and quieter */
.eyebrow, .kit-cap-name, .why-eyebrow, .scene-time, .rit-tag, .state-time { opacity: 0.6; }
/* 043: the Huddle swipe row bleeds to the edges with negative margins; the section clips it so the page itself never scrolls sideways */
.sec.huddle { overflow-x: clip; }
/* 043: at 320 the one-line guarantee is 6 px too wide; on the narrowest phones it may wrap */
@media (max-width: 350px) { .guarantee-micro { white-space: normal; } }
/* 043: the video's navy (read from its frame) and the night sky around it differ by a hair (21,18,45 vs 22,16,40); a 12svh
   navy-to-navy edge at the top and bottom keeps that from showing as a straight line (no grey, no band) */
section.sec.kit { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, var(--kit-bg, #141125) 12svh, var(--kit-bg, #141125) calc(100% - 12svh), rgba(0, 0, 0, 0) 100%); }

/* 044: phones: the bar slides away and the header fades while a big statement crosses them (v6/sticky.js) */
@media (max-width: 720px) {
  .sticky-cta.on.covering { transform: translateY(calc(100% + 12px + env(safe-area-inset-bottom))); pointer-events: none; }
  .hud { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1); }
  .hud.m3-yield { opacity: 0; pointer-events: none; }
}

/* ── 045 · the joints (v6/joints.js): an eased 35svh bleed of the next section's top colour at the bottom of the current one ── */
.joint { position: absolute; left: 0; right: 0; bottom: 0; height: 35svh; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jc) 0%, transparent) 0%, color-mix(in srgb, var(--jc) 8%, transparent) 25%, color-mix(in srgb, var(--jc) 30%, transparent) 50%, color-mix(in srgb, var(--jc) 65%, transparent) 72%, color-mix(in srgb, var(--jc) 90%, transparent) 90%, var(--jc) 100%); }
.joint-scene { z-index: 6; opacity: 0; }
.truth-stick > .joint, .mark-stick > .joint { z-index: 0; }
.truth-stick > .truth-text, .mark-stick > * { position: relative; z-index: 1; }
.joint-host { isolation: isolate; }
.joint-host > .joint { z-index: -1; }
/* the PERFORM punch line without its yellow frame (it could be cut by the header) */
.kin-frame { display: none; }
@media (prefers-reduced-motion: reduce) { .joint-scene { opacity: 1; } }

/* ── 045 · truth lines that hit: fixed lines, each fitted to the full width (16 px gutters), slam in 120 ms apart, one pulse and a
   short shake when the last lands; brighter stone in the letters; the key word in a solid colour; ~110svh, no pin ── */
.truth-stick { height: 110svh; }
.truth-text.lined { width: 100%; max-width: none; padding: 0 16px; box-sizing: border-box; text-align: center; line-height: 0.88; letter-spacing: -0.05em; font-weight: 900; }
.truth-text.lined .tl { display: block; white-space: nowrap; opacity: 0; transform: scale(1.35); filter: blur(12px); }
.truth-text.lined.in .tl { animation: truthLine 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--li, 0) * 120ms); }
@keyframes truthLine { to { opacity: 1; transform: none; filter: none; } }
.truth-text.lined .tw { opacity: 1 !important; transform: none !important; transition: none !important; filter: brightness(1.3) saturate(1.1); }
.truth-text.lined .tw.tk { background-image: none !important; background-color: transparent; color: var(--kc); -webkit-text-fill-color: var(--kc); filter: none; }
.truth-text.lined.hit { animation: truthHit 0.3s ease-out; }
@keyframes truthHit { 0% { filter: brightness(1); transform: translateX(0); } 8% { transform: translateX(4px); } 16% { filter: brightness(1.7); transform: translateX(-4px); } 24% { transform: translateX(0); } 100% { filter: brightness(1); transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .truth-text.lined .tl { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } .truth-text.lined.hit { animation: none; } }

/* ── 045 · the header gets out of the way: up while scrolling down, back on scroll up or 1.2 s still; a night-navy backdrop
   (70 percent, 12 px blur) with light ink whenever it is shown over content ── */
.hud { transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
.hud.hud-hidden { transform: translateY(-110%); }
.hud.hud-solid, html.hero-dark .hud.hud-solid { --ink: #ede9e3; color: #ede9e3; background: rgba(20, 17, 37, 0.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hud.hud-solid .hud-brand { color: #ede9e3; }
.hud.hud-solid .hud-chip { background: rgba(6, 7, 10, 0.4); border-color: rgba(242, 239, 233, 0.2); color: #f2efe9; }
.hud.hud-solid .hud-reserve { color: #ede9e3; border-color: rgba(242, 239, 233, 0.24); }
.hud.m3-yield { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hud { transition: none; } }
/* 045: after the last element of a section at most 12svh, then the next section (the truth lines and the mark are centred stages,
   WAKE's bottom is its 35svh fade into the truth line) */
section.sec.why, section.sec.state-after, section.sec.dawn, section.sec.close, section.sec.night, section.sec.app, section.sec.huddle, section.sec.founder { padding-bottom: 10svh; }
.why .why-grid { margin-bottom: 0; }
section.sec.state#wake::after { height: 35svh; margin-top: 4svh; }
@media (max-width: 720px) {
  section.sec.why, section.sec.state-after, section.sec.dawn, section.sec.close, section.sec.night, section.sec.app, section.sec.huddle, section.sec.founder { padding-bottom: calc(56px + 12px + 24px + env(safe-area-inset-bottom)) !important; }
}
.why-card:last-child { margin-bottom: 0; }
section.sec.close { padding-bottom: 0 !important; }

/* ── 049 · the tall level (v6/tall.js): lines fitted to the width, Montserrat 900, -0.055em, line-height 0.82, stretched
   (scale set inline: 1.6 phone, 1.4 desktop) from the top with the height reserved; absolute punch lines stretch from their centre ── */
.tall { font-weight: 900; letter-spacing: -0.055em; line-height: 0.82; max-width: none; text-wrap: nowrap; transform-origin: 50% 0; }
.tall .tline { display: block; white-space: nowrap; }
.tall [data-mode] .tline { display: block; }
.scene-punch.tall-abs { transform-origin: 50% 50%; max-width: none; left: 16px; right: 16px; text-align: center; }
@media (min-width: 721px) { .scene-punch.tall-abs { left: var(--gutter, 6vw); right: var(--gutter, 6vw); } }
.moon-h1.tall { max-width: none; }
/* medium statements: the 043 size + 15 percent, no stretch */
.h2:not(.tall) { font-size: clamp(4.27rem, 10.1vw, 10.9rem); }
@media (max-width: 720px) { .h2:not(.tall) { font-size: min(4.27rem, 15.4vw); } }
/* the truth lines are fitted by truth.js; the stretch comes on top (from the top, height reserved by truth.js) */
.truth-text.lined { transform-origin: 50% 0; }
/* 049: the header makes way (fades) while a tall statement is under it */
.hud.m3-yield { opacity: 0; pointer-events: none; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1), transform 0.3s cubic-bezier(0.4, 0, 0.6, 1); }
/* 049: on desktop the bar fades out while a tall statement is on screen */
@media (min-width: 721px) { .sticky-cta.on.covering { opacity: 0; transform: translateY(12px); pointer-events: none; } }
/* 049 · the MODE³ mark: edge to edge, stretched 1.3 (height reserved by v6/mark.js) */
.mark-stage .mark-word { scale: 1 1.3; transform-origin: 50% 50%; }
/* 050: the two truth lines in capitals, short lines fitted huge (the 85 percent cap sets their size) */
.truth-text.lined { text-transform: uppercase; }
/* 051: no iOS text inflation; one size per tall block (set inline by v6/tall.js), lines left-aligned unless centred stage lines;
   the underline under "permission." sits below the descenders */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.tall .tline { font-size: inherit; }
.scene-punch.tall-abs .kin-stroke { bottom: -0.3em; height: 0.07em; }

/* 062 · the app demo's tab bar scrolls into view clear of the sticky bar (keyboard focus, anchors) */
#logDemo .m3ld-nav { scroll-margin-bottom: calc(56px + 12px + 24px + env(safe-area-inset-bottom)); }