/* =========================================================================
   Booky — Landing page only  •  landing.css
   "Nightfall Library" — cinematic scrollytelling.
   Depends on styles.css for tokens (--bg-*, --gold*, --on-*, --s*, --ease…)
   and shared components (.btn, .card, .spine, .chip, .wordmark, .grain,
   .reveal, .switcher). Everything here is landing-scoped.
   ========================================================================= */

/* ---- page base ---- */
body.lp{ overflow-x:hidden; }
body.lp main{ position:relative; z-index:2; }

/* deepen the canvas toward true void for cinematic depth */
body.lp{
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(232,184,100,0.10), transparent 60%),
    radial-gradient(1000px 800px at 10% 12%, rgba(80,110,255,0.07), transparent 60%),
    var(--bg-void);
}

/* full-page vignette (landing-owned; shared .vignette is element-scoped) */
.lp-vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 30%, transparent 52%, rgba(4,5,12,0.62) 100%);
}

/* extra atmospheric glow blobs reuse shared .glow positioning but soften */
body.lp .glow.g1{ opacity:0.4; }
body.lp .glow.g2{ opacity:0.42; }

/* ---- top scroll-progress rail ---- */
.read-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none;
  background:rgba(244,241,234,0.05);
}
.read-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow:0 0 12px rgba(232,184,100,0.55);
  transform-origin:left center;
}

/* =========================================================================
   NAV — glass, condenses on scroll, mobile drawer
   ========================================================================= */
.lp-nav{
  position:fixed; top:0; left:0; right:0; z-index:55;
  transition:padding var(--d-base) var(--ease), background var(--d-base) var(--ease),
             box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
  border-bottom:1px solid transparent;
}
.lp-nav-in{
  display:flex; align-items:center; gap:var(--s5);
  height:72px; transition:height var(--d-base) var(--ease);
}
.lp-nav.scrolled{
  background:rgba(10,12,22,0.72);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 8px 30px rgba(7,8,16,0.5);
  border-bottom-color:var(--line);
}
.lp-nav.scrolled .lp-nav-in{ height:58px; }

.lp-nav .wordmark{ color:var(--on-high); text-decoration:none; }
.lp-nav-links{ display:flex; gap:2px; align-items:center; margin-left:var(--s5); }
.lp-nav-links a{
  padding:9px 14px; border-radius:var(--r-pill); font-size:14px; font-weight:500;
  color:var(--on-med); text-decoration:none;
  transition:color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.lp-nav-links a:hover, .lp-nav-links a.is-active{ color:var(--on-high); background:rgba(244,241,234,0.06); }
.lp-nav-cta{ margin-left:auto; display:flex; gap:10px; align-items:center; }

.lp-burger{
  display:none; margin-left:auto; width:46px; height:46px; flex:0 0 auto;
  border-radius:var(--r-md); background:rgba(244,241,234,0.05);
  border:1px solid var(--line); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.lp-burger span{ display:block; width:20px; height:2px; border-radius:2px; background:var(--on-high);
  transition:transform var(--d-base) var(--ease), opacity var(--d-base) var(--ease); }
.lp-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.lp-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.lp-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.lp-mobile{
  display:flex; flex-direction:column; gap:4px; padding:14px var(--s5) 22px;
  background:rgba(10,12,22,0.94);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
/* honor the hidden attribute — a class display rule otherwise overrides UA [hidden] */
.lp-mobile[hidden]{ display:none !important; }
/* the drawer only exists on small screens; never show it on desktop even if toggled */
@media (min-width:761px){ .lp-mobile{ display:none !important; } }
.lp-mobile a{ padding:13px 8px; font-size:17px; font-weight:500; color:var(--on-high);
  text-decoration:none; border-bottom:1px solid var(--line); }
.lp-mobile-cta{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }

/* =========================================================================
   HERO — library at night, layered depth + light beam + dust
   ========================================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:140px 0 96px; overflow:hidden;
  isolation:isolate;
}
.hero-stage{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-stage .layer{ position:absolute; inset:-8% -6%; will-change:transform; }

/* far + mid shelves built from repeating gradients = rows of dim book spines */
.shelf-far{
  opacity:0.5;
  background:
    repeating-linear-gradient(90deg,
      rgba(30,22,40,0.0) 0, rgba(40,30,55,0.55) 2px, rgba(20,16,30,0.6) 6px,
      rgba(50,30,30,0.5) 9px, rgba(18,14,26,0.6) 13px, rgba(36,26,46,0.5) 17px,
      rgba(16,12,24,0.6) 21px, transparent 24px),
    linear-gradient(180deg, rgba(8,8,16,0) 0%, rgba(8,8,16,0) 30%, rgba(7,8,16,0.6) 100%);
  background-size:34px 100%, 100% 100%;
  filter:blur(2.5px) brightness(0.55) saturate(0.7);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
}
.shelf-mid{
  opacity:0.7; top:18%;
  background:
    repeating-linear-gradient(90deg,
      rgba(60,40,30,0.0) 0, rgba(90,50,40,0.7) 4px, rgba(40,26,30,0.75) 11px,
      rgba(70,40,70,0.65) 15px, rgba(34,24,40,0.8) 23px, rgba(96,64,30,0.6) 28px,
      rgba(30,22,36,0.8) 36px, transparent 42px);
  background-size:58px 100%;
  filter:blur(1.2px) brightness(0.62) saturate(0.85);
  -webkit-mask-image:radial-gradient(120% 90% at 78% 30%, #000 30%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 78% 30%, #000 30%, transparent 78%);
}

/* warm lamplight beam from upper-right */
.beam{
  background:
    conic-gradient(from 210deg at 82% -6%,
      rgba(255,214,138,0.0) 0deg,
      rgba(255,214,138,0.16) 18deg,
      rgba(232,184,100,0.10) 30deg,
      rgba(255,214,138,0.0) 52deg);
  mix-blend-mode:screen; opacity:0.9;
}
.hero::before{
  /* a soft lamp core glow top-right */
  content:""; position:absolute; z-index:0; top:-14%; right:4%;
  width:min(560px,70vw); height:min(560px,70vw); border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,138,0.28), rgba(232,184,100,0.08) 45%, transparent 70%);
  filter:blur(10px); pointer-events:none;
}

.hero-dust{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* foreground spine constellation — a wall of glowing spines along the lower band */
.spines-fore{ inset:auto -2% -2% -2%; height:46%; display:flex; align-items:flex-end; }
.hero-spines{
  display:flex; align-items:flex-end; gap:7px; width:120%; margin:0 -10%;
  padding:0 4%; opacity:0.92;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-spines .spine{ transform:translateY(18px); filter:brightness(0.92); }
.hero-spines .spine:hover{ transform:translateY(10px); }
.hero-shelf-board{
  height:14px; margin-top:-2px;
  background:linear-gradient(180deg, #2a1d12, #160d06);
  box-shadow:0 -2px 0 rgba(255,214,138,0.12) inset, 0 12px 30px rgba(0,0,0,0.6);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hero-inner{ position:relative; z-index:3; max-width:920px; }
.hero-h1{ font-size:clamp(46px,8vw,104px); line-height:0.98; letter-spacing:-0.03em; margin:14px 0 0; }
.hero-h1 .line{ display:block; }
.hero-h1 em{ font-style:italic; color:var(--gold);
  text-shadow:0 0 38px rgba(232,184,100,0.4); }
.hero-lede{ max-width:620px; margin:26px 0 0; font-size:clamp(16px,1.6vw,19px);
  line-height:1.65; color:var(--on-med); }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:36px;
  font-size:13.5px; color:var(--on-low); }
.hero-trust strong{ color:var(--on-high); font-weight:600; }
.dotsep{ width:4px; height:4px; border-radius:50%; background:var(--on-low); opacity:0.5; }

.scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--on-low);
  text-decoration:none;
}
.scroll-hint:hover{ color:var(--on-med); }
.scroll-dot{ width:22px; height:34px; border:1px solid var(--line-strong); border-radius:14px; position:relative; }
.scroll-dot::after{ content:""; position:absolute; left:50%; top:7px; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:var(--gold);
  animation:lp-scroll 1.9s var(--ease) infinite; }
@keyframes lp-scroll{ 0%{transform:translateY(0);opacity:0} 30%{opacity:1} 70%{opacity:1} 100%{transform:translateY(14px);opacity:0} }

/* =========================================================================
   ACTS — shared scene scaffolding
   ========================================================================= */
.act{ position:relative; padding:clamp(96px,14vh,168px) 0; }
.act-h{ font-size:clamp(30px,4.6vw,56px); line-height:1.04; letter-spacing:-0.02em; margin:14px 0 0; max-width:14ch; }
.act-h em{ font-style:italic; color:var(--gold); }
.act-lede{ max-width:560px; margin:22px 0 0; font-size:clamp(16px,1.5vw,18px); line-height:1.65; color:var(--on-med); }
.act-lede.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{ font-family:var(--f-text); }

/* ---- ACT 1 — scattered ---- */
.act-scattered .narrate{ max-width:760px; }
.act-scattered .act-h{ max-width:18ch; }
.strike-wrap{ position:relative; white-space:nowrap; }
.strike{ position:relative; color:var(--on-low); }
.strike::after{ content:""; position:absolute; left:-4%; right:-4%; top:54%; height:3px; border-radius:2px;
  background:var(--ember); transform:scaleX(0); transform-origin:left center;
  transition:transform var(--d-cine) var(--ease); }
.act-scattered.in-view .strike::after, .reveal.in .strike::after{ transform:scaleX(1); }
.scatter{
  position:relative; height:340px; margin:54px auto 0; max-width:680px;
}
.frag{
  position:absolute; left:50%; top:50%;
  padding:11px 18px; border-radius:var(--r-pill);
  background:rgba(22,26,43,0.7); border:1px solid var(--line); color:var(--on-med);
  font-size:14px; white-space:nowrap; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));
  transition:transform var(--d-cine) var(--ease), opacity var(--d-cine) var(--ease);
  box-shadow:var(--sh-warm);
}
.scatter.gather .frag{ transform:translate(-50%,-50%) translate(0,0) rotate(0deg); opacity:0; }
.scatter.gather .frag.center{ opacity:1; }
.frag.center{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#241b04; font-weight:700;
  border-color:transparent; box-shadow:var(--sh-gold); z-index:2; font-family:var(--f-display);
  font-size:19px; padding:13px 24px;
}
.act-resolve{ margin-top:48px; font-family:var(--f-display); font-size:clamp(20px,2.6vw,30px);
  line-height:1.3; color:var(--on-high); }
.act-resolve em{ font-style:italic; color:var(--gold); }

/* ---- ACT 2 — reader ---- */
.reader-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.reader-stage{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.theme-pills{ display:inline-flex; gap:6px; padding:5px; margin:24px 0 28px;
  background:rgba(244,241,234,0.05); border:1px solid var(--line); border-radius:var(--r-pill); }
.theme-pill{ padding:8px 18px; border-radius:var(--r-pill); border:0; background:transparent; cursor:pointer;
  color:var(--on-med); font:600 13.5px var(--f-text); min-height:38px;
  transition:background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.theme-pill.is-active{ background:var(--gold); color:#241b04; }

/* the CSS book */
.reader-stage{ perspective:1800px; }
.book{
  position:relative; width:min(360px,80vw); aspect-ratio:1/1.32;
  transform:rotateX(8deg) rotateY(-14deg); transform-style:preserve-3d;
  border-radius:6px 12px 12px 6px;
  box-shadow:30px 40px 80px rgba(0,0,0,0.6), 0 0 60px rgba(232,184,100,0.10);
  transition:background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.book-spine-edge{ position:absolute; left:-2px; top:0; bottom:0; width:16px; border-radius:6px 0 0 6px;
  background:linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0.05)); }
.page{ position:absolute; inset:0; border-radius:6px 12px 12px 6px; padding:34px 30px;
  font-family:var(--f-display); }
.page-static{ background:var(--pg-bg,#FBF7EE); color:var(--pg-ink,#211C14);
  box-shadow:inset -22px 0 36px rgba(0,0,0,0.06); }
.page-deep{ background:var(--pg-bg2,#F1ECDF); color:var(--pg-ink,#211C14); z-index:0; }
.page-turn{ transform-origin:left center; transform-style:preserve-3d; z-index:2;
  animation:lp-pageturn 6.2s var(--ease) infinite; }
.page-front, .page-back{ position:absolute; inset:0; border-radius:6px 12px 12px 6px; padding:34px 30px;
  -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.page-front{ background:var(--pg-bg,#FBF7EE); color:var(--pg-ink,#211C14);
  box-shadow:inset 18px 0 30px rgba(0,0,0,0.05); }
.page-back{ background:var(--pg-bg2,#F1ECDF); color:var(--pg-ink,#211C14); transform:rotateY(180deg); }
.pg-h{ font-size:13px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.55; margin:0 0 16px; font-family:var(--f-text); }
.pg-t{ font-size:16px; line-height:1.62; margin:0 0 14px; }
.pg-num{ position:absolute; left:0; right:0; bottom:18px; text-align:center; font-size:12px; opacity:0.4; font-family:var(--f-text); }

/* reader theme skins on the mock */
.book.theme-paper{ --pg-bg:#FBF7EE; --pg-bg2:#F4EFE2; --pg-ink:#211C14; }
.book.theme-sepia{ --pg-bg:#F3E7CE; --pg-bg2:#ECDDBE; --pg-ink:#4A3A22; }
.book.theme-night{ --pg-bg:#161A2B; --pg-bg2:#10131F; --pg-ink:#E8E4DA; }
.book.theme-night{ box-shadow:30px 40px 80px rgba(0,0,0,0.7), 0 0 70px rgba(232,184,100,0.16); }

@keyframes lp-pageturn{
  0%, 16%   { transform:rotateY(0deg); }
  44%, 62%  { transform:rotateY(-168deg); }
  90%, 100% { transform:rotateY(0deg); }
}
.reader-caption{ font-size:13px; color:var(--on-low); text-align:center; max-width:300px; }

/* =========================================================================
   ACT 3 — REMEMBER (the signature lifted-highlight)
   ========================================================================= */
.act-remember{ overflow:hidden; }
.act-remember::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%, rgba(232,184,100,0.10), transparent 70%); }
.remember-head{ max-width:680px; }
.remember-stage{
  position:relative; margin:60px auto 0; max-width:680px; min-height:420px;
  display:flex; flex-direction:column; align-items:center;
}
.rm-page{
  position:relative; z-index:1; width:min(560px,92%);
  background:linear-gradient(180deg,#FBF7EE,#F3ECDC); color:#241C12;
  border-radius:var(--r-md); padding:46px 44px;
  font-family:var(--f-display); font-size:clamp(17px,2vw,21px); line-height:1.78;
  box-shadow:0 30px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.04);
}
.rm-t{ margin:0; }
.rm-line{ position:relative; }
.rm-highlight{
  position:relative; border-radius:4px; padding:1px 3px;
  background:linear-gradient(180deg, transparent 60%, rgba(232,184,100,0) 60%);
  transition:background var(--d-slow) var(--ease);
}
/* state 1: marker sweeps across */
.remember-stage.is-marking .rm-highlight{ background:linear-gradient(180deg, transparent 12%, rgba(232,184,100,0.55) 12%); }
/* state 2: the source line dims/fades as the copy lifts away */
.remember-stage.is-lifting .rm-highlight{ color:rgba(36,28,18,0.18); background:transparent; }

/* the flying duplicate sentence */
.rm-fly{
  position:absolute; z-index:3; left:50%; top:54%;
  transform:translate(-50%,-50%) scale(1); opacity:0;
  font-family:var(--f-display); font-size:clamp(17px,2vw,21px); color:#241C12;
  padding:2px 6px; border-radius:4px; background:rgba(255,214,138,0.85);
  pointer-events:none; white-space:nowrap; max-width:90vw;
  box-shadow:0 0 0 1px rgba(232,184,100,0.5), 0 18px 40px rgba(232,184,100,0.3);
}
.remember-stage.is-flying .rm-fly{
  opacity:1;
  transform:translate(-50%,-50%) translateY(-120px) scale(0.82) rotate(-2deg);
  transition:transform 900ms var(--ease), opacity 280ms var(--ease);
  color:#241b04;
}
.remember-stage.is-landed .rm-fly{ opacity:0; transition:opacity 240ms var(--ease); }

/* the knowledge card */
.rm-card{
  position:relative; z-index:2; margin:24px auto 0; width:min(440px,92%);
  background:var(--bg-card); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  padding:22px 24px; text-align:left;
  opacity:0; transform:translateY(28px) scale(0.94);
  box-shadow:var(--sh-warm);
}
.remember-stage.is-landed .rm-card{
  opacity:1; transform:translateY(0) scale(1);
  transition:opacity 460ms var(--ease) 60ms, transform 640ms var(--ease) 60ms,
             box-shadow 640ms var(--ease);
  box-shadow:0 26px 60px rgba(0,0,0,0.5), 0 0 44px rgba(232,184,100,0.22);
}
.rm-card-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.rm-card-kicker{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.rm-card-book{ font-size:12px; color:var(--on-low); }
.rm-card blockquote{ margin:0; font-family:var(--f-display); font-size:18px; line-height:1.5; color:var(--on-high); font-style:italic; }
.rm-card-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.rm-tag{ font-size:12px; padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(232,184,100,0.1); border:1px solid rgba(232,184,100,0.22); color:var(--gold-bright); }
.rm-card-sr{ margin-top:14px; font-size:12.5px; color:var(--on-low); }
.rm-card-sr strong{ color:var(--on-med); }
.rm-foot{ text-align:center; margin-top:48px; }

/* =========================================================================
   ACT 4 — SHARE (stats + shelf of spines)
   ========================================================================= */
.share-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.act-share .share-copy{ order:1; } .act-share .shelf{ order:2; }
.share-stats{ display:flex; flex-wrap:wrap; gap:34px; margin:34px 0 30px; }
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat-n{ font-family:var(--f-display); font-weight:600; font-size:clamp(32px,4.4vw,46px);
  color:var(--gold-bright); line-height:1; letter-spacing:-0.02em;
  text-shadow:0 0 30px rgba(232,184,100,0.28); }
.stat-l{ font-size:13px; color:var(--on-low); }
.shelf{ position:relative; }
.shelf-row{ display:flex; align-items:flex-end; gap:8px; justify-content:center; min-height:240px; padding:0 8px; }
.shelf-board{ height:16px; border-radius:0 0 6px 6px;
  background:linear-gradient(180deg, #3a2817, #1c1209);
  box-shadow:0 -2px 0 rgba(255,214,138,0.14) inset, 0 18px 36px rgba(0,0,0,0.55); }

/* =========================================================================
   ACT 5 — CREATE & EARN
   ========================================================================= */
.create-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.act-create .earn{ order:1; } .act-create .create-copy{ order:2; }
.earn-card{ padding:26px 28px; max-width:420px; }
.earn-top{ display:flex; align-items:center; justify-content:space-between; }
.earn-kicker{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-low); font-weight:600; }
.earn-live{ display:inline-flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--gold); }
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(232,184,100,0.6); animation:lp-pulse 2.2s var(--ease) infinite; }
@keyframes lp-pulse{ 0%{box-shadow:0 0 0 0 rgba(232,184,100,0.55)} 70%{box-shadow:0 0 0 9px rgba(232,184,100,0)} 100%{box-shadow:0 0 0 0 rgba(232,184,100,0)} }
.earn-amount{ font-family:var(--f-display); font-weight:600; font-size:clamp(40px,6vw,60px); line-height:1;
  margin:14px 0 6px; color:var(--on-high); letter-spacing:-0.02em; }
.earn-cur{ color:var(--gold); font-size:0.6em; vertical-align:18%; margin-right:2px; }
.earn-spark{ margin:10px 0 16px; }
.earn-spark #sparkLine{ stroke-dasharray:600; stroke-dashoffset:600;
  transition:stroke-dashoffset 1600ms var(--ease); }
.earn.in .earn-spark #sparkLine, .reveal.in .earn-spark #sparkLine{ stroke-dashoffset:0; }
.earn-meta{ display:flex; gap:24px; font-size:13px; color:var(--on-low); border-top:1px solid var(--line); padding-top:16px; }
.earn-meta strong{ color:var(--on-high); font-weight:600; }
.create-list{ list-style:none; margin:24px 0 28px; padding:0; display:flex; flex-direction:column; gap:13px; }
.create-list li{ position:relative; padding-left:30px; color:var(--on-med); font-size:15.5px; line-height:1.5; }
.create-list li::before{ content:""; position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%;
  background:rgba(232,184,100,0.12);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4 10-11' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4 10-11' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  background:var(--gold); }

/* =========================================================================
   ACT 6 — EVERY AGE (three worlds)
   ========================================================================= */
.ages-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
.ages-head .act-h{ margin-left:auto; margin-right:auto; max-width:none; }
.worlds{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.world{ position:relative; display:flex; flex-direction:column; gap:10px; overflow:hidden;
  padding:30px 28px 28px; border-radius:var(--r-lg); text-decoration:none;
  border:1px solid var(--line); min-height:280px;
  transition:transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease); }
.world:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--sh-warm); }
.world-tag{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.world h3{ font-size:26px; color:var(--on-high); }
.world p{ color:var(--on-med); font-size:15px; line-height:1.55; margin:0; }
.world-go{ margin-top:auto; color:var(--gold); font-weight:600; font-size:14px;
  transition:transform var(--d-base) var(--ease); }
.world:hover .world-go{ transform:translateX(4px); }
.world-adults{ background:linear-gradient(165deg, rgba(34,40,62,0.55), rgba(12,14,26,0.6)); }
.world-teens{ background:linear-gradient(165deg, rgba(58,40,80,0.5), rgba(18,12,30,0.6)); }
.world-kids{ background:linear-gradient(165deg, rgba(255,138,61,0.16), rgba(40,20,8,0.55)); }
.ciko-cameo{ position:absolute; right:-26px; bottom:-30px; width:170px; height:auto; opacity:0.92;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,0.4)); pointer-events:none;
  transition:transform var(--d-base) var(--ease); }
.world-kids:hover .ciko-cameo{ transform:translateY(-6px) rotate(-3deg); }
.world-kids p{ max-width:62%; }
.cameo-quills{ transform-origin:130px 120px; }
.world-kids:hover .cameo-quills{ animation:lp-bristle 0.6s var(--ease-emph); }
@keyframes lp-bristle{ 0%,100%{transform:scale(1)} 40%{transform:scale(1.06) translateY(-3px)} }

/* =========================================================================
   ACT 7 — PRICING + CLOSE
   ========================================================================= */
.pricing-head{ max-width:660px; margin:0 auto 56px; text-align:center; }
.pricing-head .act-h{ margin:14px auto 0; max-width:none; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ padding:32px 28px; display:flex; flex-direction:column; }
.plan h3{ font-size:24px; color:var(--on-high); }
.price{ font-family:var(--f-display); font-weight:600; font-size:48px; color:var(--on-high); margin:8px 0 2px; letter-spacing:-0.02em; }
.price small{ font-size:16px; color:var(--on-low); font-weight:400; }
.plan-sub{ color:var(--on-low); font-size:14px; margin:0 0 20px; }
.plan ul{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.plan li{ position:relative; padding-left:26px; color:var(--on-med); font-size:14.5px; line-height:1.5; }
.plan li::before{ content:""; position:absolute; left:0; top:5px; width:16px; height:16px;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4 10-11' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4 10-11' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.plan-feat{ border-color:rgba(232,184,100,0.35); box-shadow:0 0 0 1px rgba(232,184,100,0.18), var(--sh-warm); }
.plan-feat::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, rgba(232,184,100,0.1), transparent 60%); }
.plan-flag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#241b04;
  font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:6px 14px; border-radius:var(--r-pill); box-shadow:var(--sh-gold); }

/* close */
.closer{ position:relative; text-align:center; margin-top:clamp(90px,12vh,150px); padding:72px 0 24px; overflow:hidden; }
.closer-spines{ display:flex; align-items:flex-end; justify-content:center; gap:7px; min-height:140px; margin-bottom:30px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.closer-spines .spine{ transform:translateY(20px) scale(0.7); opacity:0;
  transition:transform 760ms var(--ease), opacity 600ms var(--ease); }
.closer-spines.in .spine{ transform:translateY(0) scale(0.74); opacity:0.9; }
.closer-h{ font-size:clamp(34px,5.4vw,64px); line-height:1.06; letter-spacing:-0.02em; }
.closer-sub{ max-width:520px; margin:20px auto 32px; color:var(--on-med); font-size:17px; line-height:1.6; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.lp-foot{ border-top:1px solid var(--line); margin-top:clamp(80px,12vh,140px); padding:64px 0 120px; }
.lp-foot .cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.foot-brand{ max-width:300px; }
.foot-brand .wordmark{ color:var(--on-high); text-decoration:none; margin-bottom:14px; }
.foot-brand p{ color:var(--on-low); font-size:14px; line-height:1.6; margin:0; }
.lp-foot h4{ font-family:var(--f-text); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--on-low); margin:0 0 14px; font-weight:600; }
.lp-foot .cols a:not(.wordmark){ display:block; color:var(--on-med); text-decoration:none; font-size:14px;
  padding:5px 0; transition:color var(--d-fast) var(--ease); }
.lp-foot .cols a:not(.wordmark):hover{ color:var(--gold); }
.foot-fine{ margin-top:48px; font-size:13px; color:var(--on-low); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:960px){
  .reader-grid, .share-grid, .create-grid{ grid-template-columns:1fr; }
  .act-share .shelf, .act-create .earn{ order:0; }
  .worlds, .plans{ grid-template-columns:1fr; }
  .world-kids p{ max-width:74%; }
  .plan-feat{ order:-1; }
}
@media (max-width:760px){
  .lp-nav-links, .lp-nav-cta{ display:none; }
  .lp-burger{ display:flex; }
  .hero{ padding:120px 0 80px; min-height:92svh; }
  .scatter{ height:300px; }
  .frag{ font-size:12.5px; padding:9px 14px; }
  .share-stats{ gap:24px; }
}
@media (max-width:480px){
  .rm-page{ padding:32px 26px; }
  .rm-fly{ white-space:normal; max-width:80%; text-align:center; }
}

/* =========================================================================
   REDUCED MOTION — kill parallax/loops/auto-motion, keep cross-fades & content
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .page-turn{ animation:none; transform:rotateY(-30deg); }
  .scroll-dot::after{ animation:none; }
  .live-dot{ animation:none; }
  .hero-stage .layer{ transform:none !important; }
  /* show the signature moment's end-state without motion */
  .remember-stage .rm-fly{ display:none; }
  .remember-stage .rm-card{ opacity:1 !important; transform:none !important;
    box-shadow:0 26px 60px rgba(0,0,0,0.5), 0 0 44px rgba(232,184,100,0.2) !important; }
  .remember-stage .rm-highlight{ background:linear-gradient(180deg, transparent 12%, rgba(232,184,100,0.5) 12%); }
  .closer-spines .spine{ opacity:0.9; transform:scale(0.74); }
  .earn-spark #sparkLine{ stroke-dashoffset:0; }
  .scatter .frag{ opacity:1 !important; }
}