/* ============================================================
   D1 — the premium pass.

   Loaded after the export's own styles, so on a tie it wins. It does not
   restate the design; it gives the page weight, texture and motion the
   design tool cannot express: sheet edges on the ink chapters, drawn
   controls instead of typed glyphs, the masks the SplitText reveals ride
   in, and one rhythm for the phone. (Grain and bloom were tried and taken
   out again: texture read as effect, not as quality.)

   Nothing here positions the thread — that stays in v9-thread/.
   ============================================================ */

:root {
  --hair: rgb(37 37 34 / .13);
  --hair-strong: rgb(37 37 34 / .24);
  --gold-deep: #8f6512;
  --gold-soft: #d6a658;
  --ink-2: #33312c;
  --paper-2: #f6ecdc;
  --r-sheet: clamp(28px, 4vw, 64px);
  --shadow-device:
    0 1px 0 rgb(255 255 255 / .35),
    0 30px 50px -30px rgb(37 37 34 / .45),
    0 80px 120px -60px rgb(37 37 34 / .35);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-release: cubic-bezier(.34, 1.56, .64, 1);
}

/* Once Lenis owns the scroll, the browser's own easing must not fight it. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Belt and braces: no glyph on this page may take the emoji presentation. */
html { font-variant-emoji: text; }

/* ── Grain: the paper is paper ─────────────────────────────── */


/* ── Type ─────────────────────────────────────────────────── */
.display { text-wrap: balance; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; flex: 0 0 auto; opacity: .7; transform: scaleX(var(--rule, 1)); transform-origin: 0 50%; }
[dir=rtl] .eyebrow::before { transform-origin: 100% 50%; }
.dark .eyebrow { color: #deb066; }
.marketplace .eyebrow { justify-content: center; }
.small, .tiny { color: var(--muted); }
.lead { color: #3f3b33; }
.dark .lead { color: #e6dfd3; }

/* SplitText structure. Words are inline-block so a transform can move them;
   the mask clones carry the clip, padded so ascenders and Hebrew descenders
   are not shaved off at the line box. */
.p-w { display: inline-block; will-change: transform; }
.p-w-mask { display: inline-block; overflow: clip; padding: .08em .04em .16em; margin: -.08em -.04em -.16em; vertical-align: bottom; }
.p-l { display: block; }
.p-l-mask { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.lead > span, .manifesto-bottom p { display: block; }
.heading-line { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
.hero-line .char { will-change: transform; }

/* ── Header: quiet, drawn, gets out of the way ────────────── */
.site-header {
  background: rgb(254 246 235 / .82);
  border-bottom-color: var(--hair);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: transform .55s var(--ease-out), background .4s var(--ease-soft), color .4s var(--ease-soft), border-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-compact { box-shadow: 0 10px 30px -22px rgb(37 37 34 / .35); }
.site-header.on-ink { background: rgb(37 37 34 / .78); color: var(--paper); border-bottom-color: rgb(255 255 255 / .08); box-shadow: none; }
.site-header.on-ink .button.compact { background: var(--paper); color: var(--ink); }
.site-header.on-ink .button.compact::before { background: #efe3cf; }
.site-header.on-ink .language:hover, .site-header.on-ink .motion-toggle:hover { background: rgb(255 255 255 / .1); }
.site-header.on-ink .nav-links a:hover { color: #deb066; }
.brand { gap: 0; }
.brand img { width: 38px; height: 38px; border-radius: 10px; transition: transform .5s var(--ease-out); }
.brand:hover img { transform: rotate(-6deg) scale(1.04); }
.nav-links { font-size: 13px; font-weight: 550; letter-spacing: .01em; }
.nav-links a { padding-block: 6px; }
.nav-actions { gap: 6px; }
.language, .motion-toggle {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .06em;
  transition: background .3s var(--ease-soft), color .3s var(--ease-soft);
}
.language:hover, .motion-toggle:hover { background: rgb(37 37 34 / .06); }
.motion-toggle svg { width: 18px; height: 18px; display: block; }
.motion-toggle .slash { opacity: 0; transition: opacity .3s var(--ease-soft); }
.motion-toggle[aria-pressed=true] .slash { opacity: 1; }
.motion-toggle[aria-pressed=true] { color: var(--gold-deep); }
.menu { width: 40px; height: 40px; border-radius: 999px; display: none; place-items: center; padding: 0; position: relative; }
.menu span { position: absolute; left: 11px; right: 11px; height: 1.5px; margin: 0; background: currentColor; transition: transform .45s var(--ease-out), top .45s var(--ease-out), opacity .3s; }
.menu span:first-child { top: 15px; }
.menu span:last-child { top: 23px; }
.menu[aria-expanded=true] span:first-child { top: 19px; transform: rotate(45deg); }
.menu[aria-expanded=true] span:last-child { top: 19px; transform: rotate(-45deg); }

/* ── Controls: drawn, and they answer the hand ────────────── */
.arrow { font-family: inherit; font-size: inherit; line-height: 0; display: inline-grid; place-items: center; }
.arrow svg { width: 1.05em; height: 1.05em; display: block; }
.button .arrow svg { width: 15px; height: 15px; }
.text-link .arrow svg { width: 17px; height: 17px; }
.text-link:hover .arrow, .button:hover .arrow { transform: translate(3px, -3px); }
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 14px;
  padding: 16px 24px;
  letter-spacing: .005em;
  transition: color .3s var(--ease-soft), transform .18s var(--ease-out), box-shadow .4s var(--ease-soft);
}
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ink-2);
  transform: translateY(102%);
  transition: transform .55s var(--ease-out);
}
.button:hover { background: var(--ink); }
.button:hover::before { transform: none; }
.dark .button::before { background: #efe3cf; }
.dark .button:hover { background: var(--paper); }
.button.compact { padding: 11px 18px; gap: 10px; }

/* One store badge system: 48px tall, one icon size, real contrast on ink. */
.store {
  min-width: 0;
  height: 50px;
  padding: 0 18px 0 14px;
  gap: 10px;
  border-radius: 13px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 12px 24px -16px rgb(37 37 34 / .6);
  transition: transform .35s var(--ease-out), background .3s var(--ease-soft), box-shadow .35s var(--ease-out);
}
.store:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 18px 30px -16px rgb(37 37 34 / .6); }
.store svg { width: 22px; height: 22px; }
.store small { font-size: 9px; letter-spacing: .02em; opacity: .85; }
.store b { font-size: 15px; font-weight: 600; }
.dark .store { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 0 16px 30px -18px rgb(0 0 0 / .7); }
.dark .store:hover { background: #fff; }
.store.is-magnetic { will-change: transform; }

.text-link { border-bottom-color: var(--hair-strong); }
.text-link:hover { border-bottom-color: currentColor; }

/* Segmented personality control with a sliding thumb. */
.personality-options {
  position: relative;
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  isolation: isolate;
  margin-top: 18px;
}
.personality-options button {
  position: relative;
  z-index: 1;
  border: 0;
  padding: 8px 16px;
  font-weight: 550;
  transition: color .35s var(--ease-soft), transform .18s var(--ease-out);
}
.personality-options.has-thumb button[aria-pressed=true] { background: transparent; color: var(--paper); border-color: transparent; }
.personality-options.has-thumb button[aria-pressed=false]:hover { border-color: transparent; color: var(--ink); }
.personality-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--ink);
  transition: transform .5s var(--ease-out), width .5s var(--ease-out);
  pointer-events: none;
}

/* Accordions: a drawn plus, an answer that unfolds. */
.plus, .faq summary > span:last-child { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; font-size: 0; }
.plus svg { width: 16px; height: 16px; display: block; }
.faq summary > span:last-child, .feature-list .plus { transition: transform .5s var(--ease-release), color .3s var(--ease-soft); }
.faq details[open] summary > span:last-child, .feature-list details[open] .plus { transform: rotate(135deg); }
.faq details, .feature-list details { border-top-color: var(--hair); }
.faq details:last-child { border-bottom-color: var(--hair); }
.faq details p, .feature-list details p { animation: none; }
.p-fold { overflow: clip; }

/* ── The hero: the object has weight ───────────────────────── */
.hero-product { perspective: 1400px; }
.hero-product .d1app-stage { transform-style: preserve-3d; will-change: transform; }
.hero-product, .mentor-visual, .market-visual, .beyond-product, .return-visual { isolation: isolate; position: relative; }
.d1app { box-shadow: 0 0 0 9px #1b1a17, 0 0 0 10px #4a463f, 0 0 0 11px #2b2925, var(--shadow-device); }
.device { box-shadow: 0 0 0 1px #6e685d, var(--shadow-device); }
.hero h1 em { text-shadow: 0 1px 0 rgb(255 255 255 / .5); }

/* ── Chapters as sheets, not slides ────────────────────────── */
.dark {
  position: relative;
  border-radius: var(--r-sheet);
  background-color: var(--ink);
  background-image: radial-gradient(120% 70% at 50% -20%, #3a3731 0%, rgb(37 37 34 / 0) 60%);
  box-shadow: 0 -30px 60px -50px rgb(37 37 34 / .6);
}
.download.dark { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.path-section, .return-section, .marketplace { border-radius: var(--r-sheet); }
.manifesto { border-top: 0; }
.manifesto .display { max-width: 1160px; }
.manifesto-bottom .script { text-shadow: 0 1px 0 rgb(255 255 255 / .6); }

/* Marquee: a real loop, skewed by velocity. */
.goals-window { border-color: var(--hair); overflow: hidden; }
.goals-track { will-change: transform; }
.goals-track > span { white-space: nowrap; }
.goals-track i { color: var(--gold-soft); }

/* Path beats: an index, and a rail that fills with the active beat. */
.path-beats { counter-reset: beat; }
.path-beats li { border-top-color: var(--hair); gap: 18px; }
.path-beats li::before,
.is-pinned .path-beats li.is-active::before {
  counter-increment: beat;
  content: counter(beat, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  background: none;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
  padding-top: .55em;
  min-width: 2.4em;
  flex: 0 0 auto;
  direction: ltr;
}
.path-beats li::after {
  content: '';
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width .8s var(--ease-out);
}
.is-pinned .path-beats li.is-active::after { width: 100%; }
.is-pinned .path-beats li { opacity: .38; }
.path-beats p { color: var(--muted); }

/* Mentor: the example sits in a real speech bubble. */
.typed-example { box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 14px 30px -20px rgb(176 138 90 / .5); border: 1px solid rgb(176 138 90 / .18); }
.mentor-prompt { border-color: var(--hair); }
.mentor-details b { letter-spacing: .12em; }

/* Return: the points are a list with a live edge. */
.return-point { border-top-color: var(--hair); }

/* Life: photographs with a baseline and a number. */
.life-track { counter-reset: life; }
.life-card .life-image { border-radius: 24px; box-shadow: 0 40px 70px -50px rgb(37 37 34 / .55); transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out); }
.life-card:hover .life-image { transform: translateY(-6px); box-shadow: 0 60px 90px -50px rgb(37 37 34 / .6); }
.life-card img { transform: scale(1.12); transition: transform 1.4s var(--ease-out); }
.life-card:hover img { transform: scale(1.06); }
.life-card figcaption { padding-top: 22px; }
.life-card figcaption::before {
  counter-increment: life;
  content: counter(life, decimal-leading-zero);
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--gold-deep);
  margin-bottom: 10px;
  direction: ltr;
  text-align: start;
}

/* Beyond: the list is the control. */
.feature-list summary { font-weight: 600; padding-block: 2px; }
.feature-list p { color: #c9c3b7; }

/* Marketplace + creators */
.marketplace { background: var(--paper-2); }
.status-pill { border-color: rgb(143 101 18 / .35); background: rgb(255 250 244 / .6); }
.creator-mark { line-height: 0; }
.creator-mark svg { width: 150px; height: 150px; display: block; }
.creator-entry { border-color: var(--hair-strong); }

/* FAQ */
.faq { border-top-color: var(--hair); }
.faq summary { font-weight: 600; letter-spacing: -.01em; }

/* Download + footer */
.download { border-top-left-radius: var(--r-sheet); border-top-right-radius: var(--r-sheet); }
.download .display { text-shadow: 0 2px 0 rgb(0 0 0 / .2); }
.footer { min-height: 0; padding-block: 54px 44px; border-top: 1px solid var(--hair); align-items: center; }
.footer .brand img { width: 36px; height: 36px; }
.footer-links { font-size: 13px; gap: 26px; }
.footer-links a { position: relative; padding-bottom: 2px; }
.footer-links a::after { content: ''; position: absolute; inset-inline: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
[dir=rtl] .footer-links a::after { transform-origin: right; }
.footer-links a:hover::after { transform: scaleX(1); }
.footer > small { font-size: 12px; color: var(--muted); }

/* Dialog */
dialog { border-color: var(--hair-strong); border-radius: 28px; box-shadow: 0 60px 120px -40px rgb(0 0 0 / .5); }
.close-dialog { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; font-size: 0; }
.close-dialog svg { width: 18px; height: 18px; }
.close-dialog:hover { background: rgb(37 37 34 / .06); }

/* Sticky install: the logo and the one action. */
.sticky-install {
  background: rgb(254 246 235 / .9);
  border-top-color: var(--hair);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  transition: transform .55s var(--ease-out), visibility .55s;
}
.sticky-install .brand img { width: 36px; height: 36px; }

/* ── Phone: the menu is a room, not a dropdown ─────────────── */
@media (max-width: 899px) {
  .menu { display: grid; }
  .site-header .nav-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    /* The header's backdrop-filter makes it the containing block for this
       fixed box, so `inset: 0` would be the header's own 70px. Size it to the
       viewport explicitly; the header is stuck to the top whenever it is open. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100lvh;
    z-index: 0;
    padding: calc(var(--nav) + 20px) var(--gutter) 48px;
    background: var(--ink);
    color: var(--paper);
    border: 0;
    font-size: clamp(34px, 9.5vw, 46px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.1;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .75s var(--ease-out);
    pointer-events: none;
  }
  .site-header .nav-links.open { clip-path: inset(0 0 0% 0); pointer-events: auto; }
  .site-header .nav > .brand, .site-header .nav > .nav-actions { position: relative; z-index: 1; }
  .site-header .nav-links a { transform: translateY(28px); opacity: 0; transition: transform .7s var(--ease-out), opacity .5s var(--ease-soft); }
  .site-header .nav-links.open a { transform: none; opacity: 1; }
  .site-header .nav-links.open a:nth-child(1) { transition-delay: .18s; }
  .site-header .nav-links.open a:nth-child(2) { transition-delay: .25s; }
  .site-header .nav-links.open a:nth-child(3) { transition-delay: .32s; }
  .site-header .nav-links.open a:nth-child(4) { transition-delay: .39s; }
  .site-header .nav-links a:hover { color: #deb066; }
  .site-header .nav-links a::after { display: none; }
  .site-header.menu-open { background: var(--ink); color: var(--paper); border-bottom-color: rgb(255 255 255 / .1); }
  .site-header.menu-open .language:hover, .site-header.menu-open .motion-toggle:hover { background: rgb(255 255 255 / .1); }
  .site-header.menu-open .button.compact { background: var(--paper); color: var(--ink); }
  .site-header.menu-open .brand img { filter: none; }
  .life-card .life-image { border-radius: 20px; }
}
@media (max-width: 600px) {
  :root { --r-sheet: 26px; }
  .dark { --hair: rgb(254 246 235 / .16); }

  /* ── Chapters ───────────────────────────────────────────── */
  /* The phone page is one column, so it is built like one: every chapter
     opens with a numbered row on a hairline, every piece of copy hangs off
     the same 24px edge, and the mock-ups sit in tinted windows of one fixed
     height, so no phone screenshot ever takes over the screen. The thread
     keeps weaving through it all as it does on the desktop. */
  main { counter-reset: chapter; }
  .section, .path-section { padding-block: 0 56px; }
  .dark { padding-top: 48px; border-radius: 26px; }
  .dark + .section { padding-top: 32px; }
  .download.dark { border-radius: 26px 26px 0 0; padding-bottom: 96px; }

  main .eyebrow {
    position: relative;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
    padding-top: 14px;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .18em;
  }
  main .eyebrow::before {
    counter-increment: chapter;
    content: counter(chapter, decimal-leading-zero);
    width: auto;
    height: auto;
    background: none;
    opacity: 1;
    transform: none;
    font-weight: 800;
  }
  /* the hairline is drawn by the same --rule the desktop's short dash used,
     so the row's line grows out as the row arrives */
  main .eyebrow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--hair);
    transform: scaleX(var(--rule, 1));
    transform-origin: 0 50%;
  }
  [dir=rtl] main .eyebrow::after { transform-origin: 100% 50%; }
  .marketplace .eyebrow { justify-content: flex-start; }

  .display, .marketplace .display, .path-copy .display, .return-heading .display,
  .manifesto .display, .life-heading .display, .community-heading .display {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -.05em;
    margin-bottom: 18px;
  }
  .download .display { font-size: 44px; line-height: 1.05; }
  .lead { font-size: 16px; line-height: 1.55; max-width: 30ch; }
  .community-heading .lead { font-size: 16px; margin: 0; }
  .small, .tiny { line-height: 1.5; }
  .eyebrow { font-size: 10px; }

  /* ── Header ─────────────────────────────────────────────── */
  /* menu · language · logo. The sticky bar owns the call to action once the
     hero's own badges have scrolled away. */
  .site-header .button.compact { display: none; }
  .nav-actions { gap: 6px; }
  .motion-toggle { display: none; }
  .language { min-width: 34px; height: 34px; padding: 0 8px; }
  .brand img { width: 34px; height: 34px; }

  /* ── Hero ───────────────────────────────────────────────── */
  .hero { padding-block: 36px 52px; gap: 0; }
  .hero h1 { margin-bottom: 22px; }
  [dir=rtl] .hero h1 { text-align: right; }
  [dir=rtl] .hero h1 em { margin-left: 0; margin-right: 22px; }
  .hero h2 { font-size: 24px; line-height: 1.25; max-width: none; margin-bottom: 10px; }
  .hero .lead { font-size: 17px; max-width: 31ch; margin-bottom: 22px; }
  .hero .store-links { gap: 10px; }
  .hero .store, .download .store { flex: 1 1 0; max-width: 190px; min-width: 0; }
  .store { height: 48px; padding: 0 14px 0 12px; }
  .hero-meta { display: block; }
  .hero-meta .small { margin-top: 12px; font-size: 11px; }
  .hero-product { padding: 0; }

  /* ── Phones ─────────────────────────────────────────────── */
  /* Every mock-up stands on the page itself: no box, no tint, nothing cut
     off. The product's 360×760 frame is scaled down whole, and since `scale`
     leaves layout untouched its box is given the scaled height explicitly
     (plus room for the bezel the frame draws as a box-shadow). The phone's
     resting place is CSS `translate`/`scale` so the scroll motion
     (premium.js, which owns `transform`) can move it without fighting. */
  .hero-product, .path-visual, .mentor-visual, .return-visual, .beyond-product, .marketplace .market-visual {
    position: relative;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    margin: 28px 0 0;
    padding: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
    isolation: auto;
  }
  .hero-product, .path-visual, .mentor-visual {
    --ph-scale: .7;
    height: calc(760px * var(--ph-scale) + 24px);
  }
  .hero-product .d1app-stage, .path-visual .d1app-stage, .mentor-visual .d1app-stage {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 360px;
    height: 760px;
    max-height: none;
    margin: 0;
    overflow: visible;
    translate: -50% 0;
    scale: var(--ph-scale);
    transform-origin: 50% 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* The export's own fit script writes an inline width/height on the stage
     and a scale on the app to fill whatever box it finds itself in. It is
     overruled: the stage stays the product's native size and the `scale`
     above is the only scaling. */
  .hero-product .d1app-stage, .path-visual .d1app-stage, .mentor-visual .d1app-stage { width: 360px !important; height: 760px !important; }
  .hero-product .d1app, .path-visual .d1app, .mentor-visual .d1app { position: relative; top: auto; left: auto; margin: 0; transform: none !important; }
  .return-visual .return-stage, .beyond-product .beyond-stage, .marketplace .market-device {
    position: relative;
    top: auto;
    left: auto;
    width: 252px;
    margin: 0 auto;
    translate: none;
    transform-origin: 50% 0;
  }
  .return-phone .device, .beyond-stage .device, .market-device { border-width: 6px; border-radius: 32px; }
  .return-route, .path-rail, .hero-route { display: none; }

  /* ── Manifesto ──────────────────────────────────────────── */
  .manifesto-bottom { margin-top: 16px; gap: 14px; }
  .manifesto-bottom .script { align-self: flex-start; font-size: 46px; }
  .goals-window { margin-top: 36px; padding-block: 16px; }

  /* ── Path: eyebrow, heading, the phone, then the beats ──── */
  /* the desktop's tinted sheet would swallow the window; on the phone the
     chapter sits on the paper like every other one */
  .path-section { background: none; border-radius: 0; }
  .path-stage { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .path-copy { display: contents; }
  .path-visual { order: 1; margin-top: 10px; }
  .path-beats { order: 2; margin: 22px 0 0; }
  .path-beats li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 14px 0; }
  .path-beats li::before, .is-pinned .path-beats li.is-active::before { position: static; padding-top: .55em; }
  .path-beats h3 { font-size: 19px; }
  .path-beats p { font-size: 14px; }

  /* ── Mentor ─────────────────────────────────────────────── */
  .mentor-layout { gap: 0; }
  .mentor-prompt { margin-block: 22px 0; padding-block: 20px; }
  .typed-example { font-size: 23px; }

  /* ── Return ─────────────────────────────────────────────── */
  .return-layout { gap: 0; margin-top: 0; }
  .return-copy .script { font-size: clamp(38px, 11vw, 46px); line-height: 1; margin-top: 22px; max-width: none; }
  .return-point b { font-size: 19px; }

  /* ── Beyond ─────────────────────────────────────────────── */
  .beyond-layout { gap: 24px; margin-top: 0; }
  .feature-list summary { font-size: 22px; gap: 16px; }
  .feature-list details { padding-block: 18px; }
  .feature-list p { font-size: 15px; margin-inline-start: 0; }

  /* ── Life: a rail of photographs, thumbed sideways ──────── */
  .life-heading { display: block; margin-bottom: 22px; }
  .life-heading .display { max-width: none; }
  .life-controls { display: none; }
  .life-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding: 0 var(--gutter) 4px;
    scrollbar-width: none;
  }
  .life-track::-webkit-scrollbar { display: none; }
  .life-card { flex: 0 0 272px; min-width: 0; scroll-snap-align: start; }
  .life-card .life-image { border-radius: 20px; }
  .life-card figcaption { padding: 14px 2px 0; }
  .life-card figcaption::before { display: none; }
  .life-card h3 { font-size: 19px; }
  .life-card h3::before {
    counter-increment: life;
    content: counter(life, decimal-leading-zero);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--gold-deep);
    margin-inline-end: 10px;
    vertical-align: .25em;
  }

  /* ── Marketplace: start-aligned like every other chapter ── */
  .market-copy, .market-foot, .marketplace .display, .marketplace .lead { text-align: start; margin-inline: 0; max-width: none; }
  .market-copy { display: block; }
  .market-copy .status-pill, .market-copy .eyebrow { margin-inline: 0; }
  .marketplace .status-pill { margin: 0 0 18px; }
  .market-foot { align-items: flex-start; margin-top: 22px; }

  /* ── Creators: the pill, the button and the note in a column ── */
  .creator-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .creator-mark { display: none; }
  .creator-entry .status-pill { margin-bottom: 14px; }
  .creator-entry .small { margin-top: 12px; }
  .creator-teaser-grid { gap: 24px; }

  /* ── Questions ──────────────────────────────────────────── */
  .faq details { padding-block: 18px; }
  .faq summary { font-size: 17px; }

  /* ── Download ───────────────────────────────────────────── */
  .download .store-links { margin-top: 26px; }
  .closing-script { margin-top: 56px; }
  .footer { padding-block: 26px 96px; }
}

/* ── Stillness on request ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .p-w, .p-l, .hero-line .char { transform: none !important; opacity: 1 !important; }
  .site-header.is-hidden { transform: none; }
  .life-card img { transform: scale(1.06); }
}
html[data-motion=off] .p-w, html[data-motion=off] .p-l { transform: none !important; opacity: 1 !important; }
html[data-motion=off] .site-header.is-hidden { transform: none; }