:root{
  --cream:#f4ecd6; --cream-deep:#ecdfc0; --peach:#fbe9d0;
  --coral:#f0a878; --coral-deep:#e8836a; --coral-soft:#f6c9a0;
  --teal:#3a9aa0; --teal-deep:#1f6b72; --teal-dark:#175159;
  --moon:#f2d55c; --moon-edge:#c9a83a;
  --night:#1a2744; --night-deep:#12203c;
  --ink:#4a3b2e; --ink-soft:#715c48; --paper:#fffdf6;
  --serif:"Fraunces",Georgia,serif;
  --round:"Baloo 2","Trebuchet MS",sans-serif;
  --lift:0 10px 22px -12px rgba(74,59,46,.45);
  --paperY:0 3px 0 rgba(74,59,46,.10), 0 12px 26px -14px rgba(74,59,46,.4);
  --ease:cubic-bezier(.22,1,.36,1);
  --back:cubic-bezier(.34,1.56,.64,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--round);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-y:none}
::selection{background:var(--moon);color:#3a2c12}
button{font-family:inherit;cursor:pointer;color:inherit;border:none;background:none}
a{color:inherit;text-decoration:none}
em{font-style:italic;font-family:var(--serif)}
img{max-width:100%;display:block}

.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,44px);
  background:linear-gradient(to bottom,rgba(244,236,214,.96),rgba(244,236,214,.75) 70%,transparent);
  backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:500;
  font-size:clamp(18px,3.6vw,22px);letter-spacing:-.01em}
.brand-moon{width:1.4em;height:1.4em;filter:drop-shadow(0 2px 4px rgba(74,59,46,.25));
  animation:bob 6s var(--ease) infinite}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2.5vw,26px)}
.nav-links a{color:var(--ink-soft);font-weight:600;font-size:14px;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a[href="#shelf-sec"],.nav-links a[href="#how"],.nav-links a[href="#try"]{display:none}
@media(min-width:680px){.nav-links a[href="#shelf-sec"],.nav-links a[href="#how"],.nav-links a[href="#try"]{display:inline}}
.pill-start{background:var(--moon);color:var(--night-deep);font-weight:700;font-size:14px;
  padding:9px 18px;border-radius:22px;box-shadow:0 3px 0 var(--moon-edge);
  transition:transform .25s var(--back),box-shadow .25s}

/* ---------- EN / ES switch ---------- */
.lang-seg{display:flex;border-radius:20px;overflow:hidden;border:1.5px solid rgba(74,59,46,.22);flex:none}
.lang-seg .langBtn{padding:6px 11px;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-soft);background:transparent;transition:background .2s,color .2s}
.lang-seg .langBtn.on{background:var(--ink);color:var(--paper)}
.lang-seg-reader{border-color:rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.lang-seg-reader .langBtn{color:rgba(253,246,227,.75);background:rgba(255,255,255,.08);padding:7px 11px;font-size:12px}
.lang-seg-reader .langBtn.on{background:rgba(242,213,92,.9);color:var(--night-deep)}
.pill-start:hover{background:#f7de74;box-shadow:0 5px 0 var(--moon-edge)}
.pill-start:active{transform:scale(.95)}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(to bottom,var(--cream),var(--peach));
  padding:clamp(30px,6vw,70px) clamp(20px,5vw,56px) clamp(50px,8vw,96px)}
.hero-grid{max-width:1180px;margin:0 auto;display:grid;gap:clamp(28px,5vw,56px);align-items:center;
  grid-template-columns:1fr}
@media(min-width:860px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.kicker{color:var(--coral-deep);font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:14px}
.hero h1{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(34px,7.2vw,66px);color:var(--ink)}
.hero h1 em{color:var(--coral-deep)}
.lede{margin-top:20px;max-width:46ch;color:var(--ink-soft);font-size:clamp(15px,2.2vw,18px);line-height:1.62}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-note{margin-top:18px;color:var(--ink-soft);font-size:13px;opacity:.85;letter-spacing:.01em}

.hero-art{position:relative}
.hero-img{width:100%;border-radius:22px;box-shadow:0 6px 0 rgba(74,59,46,.10),0 30px 50px -22px rgba(74,59,46,.55);
  border:6px solid var(--paper)}
.float-star{position:absolute;color:var(--moon);font-size:26px;filter:drop-shadow(0 2px 6px rgba(242,213,92,.6))}
.float-star.s1{top:-14px;left:8%;animation:sway 6s var(--ease) infinite}
.float-star.s2{top:12%;right:-10px;font-size:18px;animation:bob 7s var(--ease) infinite}
.float-star.s3{bottom:8%;left:-12px;font-size:22px;animation:sway 8s var(--ease) infinite .5s}

/* ---------- BANDS + torn edges ---------- */
.band{position:relative;padding:clamp(56px,9vw,110px) clamp(20px,5vw,56px) clamp(48px,8vw,96px)}
.band-inner{max-width:1120px;margin:0 auto}
.torn-top{position:absolute;top:-1px;left:0;width:100%;height:clamp(38px,5vw,64px);
  transform:translateY(-99%);pointer-events:none}
.band-shelf{background:linear-gradient(to bottom,var(--coral),#f0b98e)}
.band-shelf .torn-top path{fill:var(--coral)}
.band-how{background:linear-gradient(to bottom,var(--teal),var(--teal-deep))}
.band-how .torn-top path{fill:var(--teal)}
.band-try{background:linear-gradient(to bottom,var(--night),var(--night-deep))}
.band-try .torn-top path{fill:var(--night)}
.band-offer{background:linear-gradient(to bottom,var(--night-deep),#0c1830)}
.band-offer .torn-top path{fill:var(--night-deep)}

.sec-head{max-width:640px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4.6vw,42px);
  line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.sec-head p{margin-top:14px;color:var(--ink-soft);font-size:clamp(15px,2vw,17px);line-height:1.6;max-width:52ch}
.sec-head.light h2{color:var(--paper)}
.sec-head.light p{color:rgba(255,253,246,.82)}

/* ---------- SHELF cards ---------- */
.shelf{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.shelf{grid-template-columns:1fr 1fr}}
.book{position:relative;display:flex;gap:16px;align-items:center;text-align:left;
  background:var(--paper);border-radius:18px;padding:14px;box-shadow:var(--paperY);
  transition:transform .4s var(--back),box-shadow .4s var(--ease);border:1px solid rgba(74,59,46,.06);width:100%}
.book:hover,.book:focus-visible{transform:translateY(-4px) rotate(-.5deg);
  box-shadow:0 6px 0 rgba(74,59,46,.10),0 22px 34px -16px rgba(74,59,46,.5);outline:none}
.book:active{transform:translateY(-1px) scale(.99)}
.book .cover{width:96px;height:96px;flex:none;border-radius:13px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(74,59,46,.08)}
.book .cover canvas{width:100%;height:100%;display:block}
.book .info h3{font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.12;color:var(--ink)}
.book .info p{color:var(--ink-soft);font-size:13.5px;line-height:1.45;margin-top:5px}
.book .age{display:inline-block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--teal-deep);background:rgba(58,154,160,.12);padding:3px 9px;border-radius:20px}
.book.locked{opacity:.92}
.book .lock{position:absolute;top:12px;right:14px;font-size:14px;opacity:.5}

/* ---------- HOW: image + steps ---------- */
.how-hero{display:grid;gap:clamp(20px,3vw,36px);align-items:center;grid-template-columns:1fr;
  margin-bottom:clamp(36px,5vw,56px)}
@media(min-width:760px){.how-hero{grid-template-columns:1.1fr 1fr}}
.how-img{width:100%;border-radius:20px;border:6px solid var(--paper);
  box-shadow:0 6px 0 rgba(0,0,0,.12),0 26px 44px -22px rgba(0,0,0,.55)}
.how-caption .cap-lead{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,25px);
  color:var(--paper);line-height:1.3}
.how-caption p{color:rgba(255,253,246,.82);font-size:15.5px;line-height:1.6;margin-top:8px;max-width:44ch}
.steps{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:rgba(255,253,246,.10);border:1px solid rgba(255,253,246,.16);border-radius:18px;
  padding:22px 20px;backdrop-filter:blur(3px)}
.step-n{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--moon)}
.step h3{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--paper);margin:8px 0 8px}
.step p{color:rgba(255,253,246,.8);font-size:14.5px;line-height:1.55}

/* ---------- TRY: live demo ---------- */
.demo-wrap{position:relative;border-radius:22px;overflow:hidden;
  box-shadow:0 6px 0 rgba(0,0,0,.2),0 30px 50px -24px rgba(0,0,0,.6);border:6px solid rgba(255,253,246,.14)}
.demo-stage{display:block;width:100%;height:min(56vh,440px);touch-action:manipulation;cursor:pointer}
.demo-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);color:#fff;
  background:rgba(18,32,60,.5);backdrop-filter:blur(3px);padding:8px 16px;border-radius:22px;
  font-size:13px;font-weight:600;pointer-events:none;transition:opacity .5s;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.demo-hint.gone{opacity:0}
.demo-clear{position:absolute;top:14px;right:14px;color:#fdf6e3;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);padding:7px 13px;border-radius:20px;font-size:12.5px;font-weight:600;
  backdrop-filter:blur(4px);transition:background .2s}
.demo-clear:hover{background:rgba(255,255,255,.22)}

/* ---------- OFFER ---------- */
.offer-inner{display:grid;gap:clamp(24px,4vw,48px);align-items:center;grid-template-columns:1fr}
@media(min-width:820px){.offer-inner{grid-template-columns:1fr 1.05fr}}
.offer-img{width:100%;border-radius:20px;border:6px solid var(--paper);
  box-shadow:0 6px 0 rgba(0,0,0,.2),0 26px 44px -22px rgba(0,0,0,.6)}
.offer-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.6vw,44px);color:var(--paper);letter-spacing:-.015em}
.offer-copy p{color:rgba(255,253,246,.82);font-size:16px;line-height:1.62;margin-top:14px;max-width:48ch}
.offer-cta{margin-top:22px}
.offer-list{list-style:none;margin-top:24px;display:grid;gap:9px}
.offer-list li{color:rgba(255,253,246,.86);font-size:14.5px;padding-left:26px;position:relative;line-height:1.4}
.offer-list li::before{content:"✦";position:absolute;left:0;color:var(--moon);font-size:14px}

/* ---------- FOOTER ---------- */
.site-foot{position:relative;background:#0c1830;padding:clamp(48px,7vw,80px) 24px 60px;text-align:center}
.site-foot .torn-top path{fill:#0c1830}
.foot-inner{color:rgba(255,253,246,.7);font-size:14px;line-height:1.8}
.foot-brand{font-family:var(--serif);font-size:24px;color:var(--paper);margin-bottom:6px}
.foot-links{margin-top:8px}

/* ---------- BUTTONS ---------- */
.btn{padding:13px 22px;border-radius:24px;font-weight:700;font-size:15px;display:inline-block;
  transition:transform .25s var(--back),box-shadow .3s,background .25s;letter-spacing:.01em}
.btn:active{transform:scale(.95)}
.btn-soft{background:var(--moon);color:var(--night-deep);box-shadow:0 4px 0 var(--moon-edge)}
.btn-soft:hover{background:#f7de74;box-shadow:0 6px 0 var(--moon-edge)}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1.5px solid rgba(74,59,46,.18)}
.btn-ghost:hover{background:rgba(74,59,46,.05)}
.btn-ghost-warm{background:transparent;color:var(--ink);border:1.5px solid rgba(74,59,46,.25)}
.btn-ghost-warm:hover{background:rgba(74,59,46,.06)}
.linkish{color:var(--teal-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;font-size:inherit;padding:2px}
.site-foot .linkish,.band-try .linkish{color:var(--moon)}

/* ================= READER (unchanged core) ================= */
.screen{min-height:100dvh}
.reader{position:relative;height:100dvh;display:flex;flex-direction:column;background:var(--night-deep);overflow:hidden}
.stage-wrap{position:relative;flex:1;min-height:0}
.stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.tap-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);color:#fff;
  background:rgba(26,39,68,.5);backdrop-filter:blur(3px);padding:7px 15px;border-radius:22px;
  font-size:13px;font-weight:600;pointer-events:none;transition:opacity .5s var(--ease);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.tap-hint.gone{opacity:0}
.add-count{position:absolute;right:14px;bottom:16px;color:rgba(255,255,255,.8);font-size:12px;font-weight:600;
  pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.reader-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:8px;
  padding:max(10px,env(safe-area-inset-top)) 12px 10px;background:linear-gradient(to bottom,rgba(18,32,60,.7),transparent)}
.story-name{font-family:var(--serif);color:#fdf6e3;font-size:15px;font-weight:500;margin-right:auto;padding-left:4px;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.toggles{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chip{color:#fdf6e3;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 12px;
  border-radius:20px;font-size:12.5px;font-weight:600;transition:background .25s,transform .25s var(--back);
  backdrop-filter:blur(4px);white-space:nowrap}
.chip:hover{background:rgba(255,255,255,.22)}
.chip:active{transform:scale(.94)}
.chip.tog{opacity:.5}
.chip.tog.on{opacity:1;background:rgba(242,213,92,.22);border-color:rgba(242,213,92,.4)}
.chip-rec{background:rgba(242,213,92,.9);color:var(--night-deep);border-color:rgba(201,168,58,.9);font-weight:700}
.chip-rec:hover{background:rgba(242,213,92,1)}
.read-bar{position:relative;z-index:5;background:linear-gradient(to top,var(--night-deep),rgba(18,32,60,.85));
  padding:16px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.line{color:#fdf6e3;font-family:var(--serif);font-weight:400;font-size:clamp(18px,5.2vw,26px);line-height:1.34;
  text-align:center;max-width:24ch;margin:0 auto;text-shadow:0 1px 6px rgba(0,0,0,.35);transition:opacity .4s}
.line em{color:var(--moon)}
.page-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:420px;margin:0 auto;width:100%}
.pg{width:54px;height:54px;border-radius:50%;font-size:26px;font-weight:700;color:var(--night-deep);
  background:var(--cream);box-shadow:var(--lift);display:grid;place-items:center;transition:transform .3s var(--back),background .25s;flex:none}
.pg:hover{background:#fff}
.pg:active{transform:scale(.9)}
.pg-next{background:var(--moon);color:var(--night-deep)}
.pg-next:hover{background:#f7de74}
.pg:disabled{opacity:.3;pointer-events:none}
.dots{display:flex;gap:7px}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);transition:.3s}
.dots i.on{background:var(--moon);transform:scale(1.25)}
.end-card{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(18,32,60,.62);backdrop-filter:blur(6px);padding:24px;animation:fade .6s var(--ease)}
.end-inner{background:var(--paper);border-radius:24px;padding:30px 26px;max-width:340px;text-align:center;box-shadow:var(--paperY)}
.end-inner h3{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--ink)}
.end-inner #endBlurb{color:var(--ink-soft);margin:8px 0 20px;font-size:15px;line-height:1.5}
.end-actions{display:flex;flex-direction:column;gap:10px}

/* ---------- PANEL (vary chat) ---------- */
.panel{position:fixed;z-index:40;right:0;top:0;bottom:0;width:min(400px,92vw);background:var(--paper);
  box-shadow:-14px 0 40px -18px rgba(0,0,0,.5);display:flex;flex-direction:column;padding:20px;animation:slideIn .4s var(--ease)}
.panel-head{display:flex;align-items:center;justify-content:space-between}
.panel-head h3{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ink)}
.x{width:36px;height:36px;border-radius:50%;font-size:16px;background:rgba(74,59,46,.07);display:grid;place-items:center;color:var(--ink-soft)}
.x:hover{background:rgba(74,59,46,.14)}
.panel-sub{color:var(--ink-soft);font-size:13.5px;line-height:1.5;margin:8px 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.vchip{background:rgba(58,154,160,.12);color:var(--teal-deep);font-weight:600;font-size:13px;padding:8px 13px;
  border-radius:20px;transition:transform .2s var(--back),background .2s}
.vchip:hover{background:rgba(58,154,160,.2)}
.vchip:active{transform:scale(.93)}
.vary-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 0}
.msg{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;max-width:88%}
.msg.you{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:5px}
.msg.moon{align-self:flex-start;background:var(--cream-deep);color:var(--ink);border-bottom-left-radius:5px}
.msg.thinking{opacity:.6;font-style:italic}
.vary-form{display:flex;gap:8px;margin-top:12px}
.vary-form input{flex:1;padding:12px 15px;border-radius:22px;border:1.5px solid rgba(74,59,46,.16);background:var(--cream);font-family:inherit;font-size:14px;color:var(--ink)}
.vary-form input:focus{outline:none;border-color:var(--teal)}
.vary-note{font-size:11.5px;color:var(--ink-soft);opacity:.75;margin-top:8px;line-height:1.4}
#revertVary{margin-top:8px;align-self:flex-start}

/* ---------- MODALS ---------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:22px;background:rgba(18,32,60,.55);backdrop-filter:blur(6px);animation:fade .35s var(--ease)}
.modal-card{background:var(--paper);border-radius:26px;padding:32px 26px;max-width:380px;width:100%;text-align:center;box-shadow:var(--paperY);animation:pop .5s var(--back)}
.modal-card h3{font-family:var(--serif);font-size:25px;font-weight:500;color:var(--ink)}
.modal-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.55;margin:10px 0 18px}
.gate-moon{width:58px;height:58px;margin:0 auto 6px;display:block;filter:drop-shadow(0 4px 6px rgba(74,59,46,.25));animation:sway 7s var(--ease) infinite}
.gate-form{display:flex;flex-direction:column;gap:10px}
.gate-form input{padding:13px 16px;border-radius:22px;border:1.5px solid rgba(74,59,46,.16);background:var(--cream);font-family:inherit;font-size:15px;text-align:center;color:var(--ink)}
.gate-form input:focus{outline:none;border-color:var(--teal)}
#gateLater{margin-top:14px}
.gate-msg{font-size:13px;margin-top:12px;min-height:1em}
.sheet-card{text-align:left;max-width:440px}
.sheet-body{color:var(--ink-soft);font-size:14.5px;line-height:1.65}
.sheet-body p{margin:0 0 12px;color:var(--ink-soft)}
.sheet-body strong{color:var(--ink)}
.sheet-card .btn{margin-top:10px}

/* ---------- animations ---------- */
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes nudge{0%{transform:translateY(0)}30%{transform:translateY(-7px) scale(1.008)}100%{transform:translateY(0)}}
.stage-wrap.nudge{animation:nudge .45s var(--back)}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
[hidden]{display:none!important}