/* Landing 07.10 L3 rebuild (DECISIONS-1007 items 14 + 16). Shared tokens with the quiz: keep these values in sync. */
:root{
  --cta:#FF5A36; --cta-hover:#E8482A; --ink:#2B2118; --bg:#FFF8F2; --card:#FFFFFF; --muted:#6B5B53; --ok:#2E8B57;
  --line:#F0E2D8; --soft:#FFEDE3; --sun:#FFC94D; --sky:#E7F3FF; --error:#B3261E;
  --radius:16px; --display:"Fredoka","Nunito",system-ui,-apple-system,sans-serif; --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 10px 30px rgba(43,33,24,.12); --shadow-sm:0 4px 14px rgba(43,33,24,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.55 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.2px}
h2{font-size:32px}
h3{font-size:22px;font-weight:600}
p{margin:0}
[hidden]{display:none!important}
section[id],#start{scroll-margin-top:72px}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--card);padding:10px 14px;border-radius:10px;z-index:50}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.center{text-align:center}
.section-inner{width:100%;max-width:1160px;margin:0 auto;padding:0 16px}
.section-head{max-width:680px;margin:0 auto 28px;text-align:center}
.section-head p{margin-top:10px;color:var(--muted);font-size:19px}
.note{font-size:15px;color:var(--muted)}
.hint{font-size:16px;color:var(--muted);margin-top:10px}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,248,242,.94);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.header-inner{max-width:1160px;margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center;justify-content:space-between}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font:700 24px/1 var(--display);min-height:44px}
.logo svg{color:var(--cta);flex:none}
.site-header nav{display:none;gap:28px}
.nav-link{font-weight:700;font-size:17px;text-decoration:none;color:var(--ink)}
.nav-link:hover{color:var(--cta-hover)}

/* buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 28px;border-radius:999px;border:0;cursor:pointer;
  font:700 20px/1.1 var(--body);text-decoration:none;background:var(--cta);color:#fff;box-shadow:0 8px 20px rgba(255,90,54,.35);transition:background .15s,transform .15s}
.button:hover{background:var(--cta-hover)}
.button:active{transform:translateY(1px)}
.button[disabled]{background:#F3C9BC;color:#fff;box-shadow:none;cursor:not-allowed}
.button-cta{font-size:21px;min-height:62px;padding:16px 30px}
.button-block{display:flex;width:100%}
.button-outline{background:var(--card);color:var(--ink);border:2px solid var(--ink);box-shadow:none}
.button-outline:hover{background:var(--soft)}
.text-button{background:none;border:0;padding:8px 4px;font:700 17px/1.2 var(--body);color:var(--ink);text-decoration:underline;text-decoration-color:var(--cta);text-underline-offset:4px;cursor:pointer;min-height:44px}
.text-link{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--cta);text-decoration-thickness:2px;text-underline-offset:3px}

/* hero */
.hero{padding:18px 0 28px;background:radial-gradient(120% 70% at 85% 10%,#FFE1D2 0,rgba(255,225,210,0) 60%),radial-gradient(90% 60% at 0% 60%,#FFF1C7 0,rgba(255,241,199,0) 60%),var(--bg)}
.hero-grid{max-width:1160px;margin:0 auto;padding:0 16px;display:grid;gap:14px}
.eyebrow{display:inline-block;font:700 15px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#B23A1C;background:#FFE3D8;padding:7px 12px;border-radius:999px;margin-bottom:10px}
.hero h1{font-size:35px;line-height:1.08}
.hl{color:var(--cta);white-space:nowrap;background:linear-gradient(transparent 72%,rgba(255,201,77,.6) 72%)}
.hero-sub{margin-top:10px;font-size:18px;color:var(--muted)}
.hero-art{margin:0}
.transform{display:grid;grid-template-columns:37% 1fr;align-items:center;gap:10px;position:relative}
.tf-small{display:flex;flex-direction:column;align-items:center;gap:4px}
.tf-tile{position:relative;width:100%;border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm);border:3px solid #fff}
.tf-photo{width:82%}
.tf-label{position:absolute;left:6px;bottom:6px;background:rgba(43,33,24,.82);color:#fff;font:700 13px/1 var(--body);padding:5px 8px;border-radius:999px}
.tf-arrow{color:var(--cta);display:flex}
.tf-arrow-curve{position:absolute;left:31%;bottom:16%;z-index:2}
.tf-book{display:block;border-radius:6px 14px 14px 6px;overflow:hidden;box-shadow:var(--shadow),-2px 0 0 rgba(0,0,0,.05);transform:rotate(2deg);transition:transform .2s}
.tf-book:hover{transform:rotate(0) scale(1.01)}
.hero-art .note{margin-top:10px;text-align:center}
.hero-action{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.hero-cta{width:100%}
.cta-note{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:17px;color:var(--ink)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}


/* sections */
.how,.together,.styles-section,.pages-section,.price-section,.faq,.closing{padding:56px 0}
.how{background:var(--card)}
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:28px}
.how-step{position:relative;text-align:center}
.how-pic{margin:0 auto 14px;max-width:340px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--soft)}
.how-pic img{width:100%;aspect-ratio:4/5}   /* three equal 4:5 cards (DECISIONS 19) */
.step-no{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cta);color:#fff;font:700 21px/1 var(--display);margin-bottom:8px}
.how-step h3{margin-bottom:6px}
/* OZ-1023b item 24: the step number as a small round badge, no "1 · " dot */
.how-num{display:inline-grid;place-items:center;width:1.6em;height:1.6em;margin-right:.45em;border-radius:50%;background:var(--soft);color:var(--cta);font-size:.8em;line-height:1;vertical-align:.12em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.how-step p{color:var(--muted);max-width:340px;margin:0 auto}
/* round 2 (10.10): the shortened copy never leaves a single word alone on the last line ("12.", "story.", "minutes." on a phone) */
.how-step h3,.how-step p,.cast-copy>p,.closing-copy>p,.closing-copy h2,.alive-copy>p{text-wrap:balance}

.together{background:linear-gradient(180deg,var(--bg),#FFF1E6)}
.together .section-head h2,.together .section-head p{text-wrap:balance}
.together-grid{display:grid;gap:28px;align-items:center}
.tablet{margin:0 auto;max-width:420px;padding:14px;border-radius:28px;background:#2B2118;box-shadow:var(--shadow);transform:rotate(-2deg)}
.tablet-screen{background:#fff;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.tablet-screen p{padding:10px 12px;font-size:13px;line-height:1.45;font-family:var(--body)}
.together-copy h2{margin-bottom:12px}
.together-copy>p{font-size:19px;color:var(--muted)}
.ticks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:36px;font-weight:700}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}

.style-grid{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px}
.style-card{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;padding-bottom:12px;border:3px solid transparent}
.style-card h3{font-size:18px;margin:10px 10px 4px}
.style-card p{font-size:15px;color:var(--muted);margin:0 10px;line-height:1.4}
/* UB styles 1023: three looks; on a phone two on top, the third centred under them (27.10: four looks, drawn-2d: two rows of two) */
@media (max-width:699px){.style-grid>li:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}}
.occasions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:14px}
.occasions-lead{flex-basis:100%;font-weight:700;color:var(--ink)}
.chip{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--soft);border:2px solid #FFD4C4;font:700 16px/1.2 var(--body);color:var(--ink)}

.pages-section{background:var(--card)}
.carousel{overflow:hidden}
.carousel-track{list-style:none;margin:0;padding:4px 16px 12px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel-track::-webkit-scrollbar{display:none}
.page-card{flex:0 0 78%;max-width:340px;scroll-snap-align:center;background:var(--bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);position:relative}
.page-card p{padding:12px 14px 34px;font-size:16px;line-height:1.5}
.page-no{position:absolute;right:12px;bottom:10px;font-size:14px;color:var(--muted);font-weight:700}
.pages-foot{text-align:center}
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 18px}
.round-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.dots{display:flex;gap:6px}
.dots button{width:12px;height:12px;border-radius:50%;border:0;background:#E3CFC3;padding:0;cursor:pointer}
.dots button[aria-current="true"]{background:var(--cta);width:26px;border-radius:999px}

.offer{max-width:640px;margin:0 auto;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:26px 20px;border:3px solid #FFD4C4}
.offer-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin-bottom:6px}
.offer-soon{margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--sky);font-weight:700;font-size:17px}
.offer-cta{margin-top:24px}

.faq-inner{max-width:760px;margin:0 auto;padding:0 16px}
.faq h2{text-align:center;margin-bottom:24px}
.questions{display:grid;gap:10px}
.questions details{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.questions summary{list-style:none;cursor:pointer;padding:18px 52px 18px 18px;font:600 20px/1.3 var(--display);position:relative;min-height:56px}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font:700 22px/1 var(--body);color:var(--cta-hover)}
.questions details[open] summary::after{content:"–"}
.questions details p{padding:0 18px 18px;font-size:18px}

.closing{background:linear-gradient(160deg,#FF7A50,#FF5A36);color:#fff}
.closing-inner{display:grid;gap:22px;align-items:center;justify-items:center;text-align:center}
/* fix 07.10 (FIX-PLAN L3): the closing cover sits on a screen (the same .tablet frame as "Made to be read together"), not as a tilted physical book */
.closing-device{width:230px;max-width:100%;margin:0;padding:12px}
.closing-device .tablet-screen{grid-template-columns:1fr;border-radius:12px}
.closing-cover{display:block;width:100%;height:auto}
.closing-copy h2{font-size:32px}
.closing-copy>p{margin:10px 0 20px;font-size:19px}
.closing .button-cta{background:#fff;color:#C2361A;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.closing .button-cta:hover{background:#FFF0EA}

.site-footer{background:var(--ink);color:#F5E9E0;padding:36px 0 120px}
.footer-inner{display:grid;gap:18px}
.site-footer .logo{color:#fff}
.footer-brand p{margin-top:6px;color:#D9C8BC}
.site-footer nav{display:flex;flex-wrap:wrap;gap:10px 18px}
.site-footer nav a{color:#F5E9E0;font-weight:700;font-size:16px}
/* UB-1020 (phone check 20.10, round 2 after review M1): footer links and the links inside the FAQ text were 25 px high. Every one is now a
   real 44 px box (min-height), not padding pulled back with a negative margin: neighbouring tap zones never overlap. The rows sit
   edge to edge (row gap 0, as couple.html already had), a FAQ link is an inline-flex box so two links on adjacent lines own their own line. */
.site-footer nav{row-gap:0}
.site-footer nav a{display:inline-flex;align-items:center;min-height:44px}
.faq a.text-link{display:inline-flex;align-items:center;min-height:44px}
.footer-note{color:#BFAEA3;font-size:15px}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,248,242,.96);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(43,33,24,.08);transform:translateY(110%);transition:transform .25s}
.sticky-cta.is-shown{transform:none}
.sticky-cta .button{min-height:56px;font-size:20px}
/* OZ-FB-1023 #42: "Create your free preview →" took 2 lines at 320/360 px (240 px of text at 21 px in a 228 px box). Narrow phones get
   16 px side padding and a type size that scales with the screen (21 px from 362 px up, 18.6 px at 320), so it stays on one line. */
@media (max-width:389px){
  .button-cta,.sticky-cta .button{gap:8px;padding-left:16px;padding-right:16px;font-size:min(21px,5.8vw)}
  .button-cta [data-v="cta"],.sticky-cta [data-v="cta"]{white-space:nowrap}
}

@media (min-width:390px){.hero h1{font-size:37px}}
@media (min-width:700px){
  h2{font-size:40px}
  .how-steps{grid-template-columns:repeat(3,1fr);gap:24px}
  .style-grid{grid-template-columns:repeat(4,1fr);max-width:1100px;gap:18px}
  .page-card{flex-basis:300px}
  .closing-inner{grid-template-columns:auto 1fr;text-align:left;justify-items:start;max-width:900px}
}
@media (min-width:1000px){
  body{font-size:19px}
  .site-header nav{display:flex}
  .hero{padding:48px 0 64px}
  .hero-grid{grid-template-columns:1fr 1.05fr;grid-template-areas:"copy art" "action art";column-gap:56px;row-gap:22px;align-items:start}
  .hero-copy{grid-area:copy;align-self:end}
  .hero-art{grid-area:art;align-self:center}
  .hero-action{grid-area:action;align-items:flex-start}
  .hero h1{font-size:60px}
  .hero-sub{font-size:22px;max-width:520px}
  .hero-cta{width:auto;padding:18px 40px;font-size:23px}
  .cta-note{justify-content:flex-start;text-align:left}
  .transform{grid-template-columns:30% 1fr;gap:22px;max-width:640px;margin:0 auto}
  .tf-label{font-size:15px}
  .tf-arrow-curve{left:27%;bottom:14%}
  .together-grid{grid-template-columns:1.1fr 1fr;gap:56px}
  .together-copy h2{font-size:44px}
  .sticky-cta{display:none}
  .site-footer{padding-bottom:40px}
  .footer-inner{grid-template-columns:1fr auto;align-items:start}
  .footer-note{grid-column:1/-1}
}

/* phone fit (L3 pass 2): the whole first screen (headline, transformation, CTA, price) inside 390x844 */
@media (max-width:699px){
  .hero{padding-top:12px}
  .hero-grid{gap:10px}
  .eyebrow{font-size:14px;margin-bottom:8px;padding:6px 11px}
  .hero-sub{margin-top:6px;font-size:18px}
  .tf-photo{width:70%}
  .tf-scene{width:86%}
  .transform{grid-template-columns:36% 1fr}
  .hero-art .note{margin-top:6px;font-size:14px}
  .hero-action{gap:6px}
  /* how it works: picture left, words right, so three steps fit in about one screen */
  .how-steps{gap:18px}
  .how-step{display:grid;grid-template-columns:132px 1fr;grid-template-rows:auto auto 1fr;column-gap:14px;text-align:left;align-items:start}
  .how-pic{grid-row:1/4;margin:0;max-width:none}
  .step-no{width:34px;height:34px;font-size:18px;margin-bottom:4px}
  .how-step h3{font-size:19px;line-height:1.2}
  .how-step p{margin:0;font-size:16px;line-height:1.45}
  /* 28.10 (Oz call 27.10 #6): the three steps read as one set on a phone: the badge sits in the heading's first line, a heading that
     wraps ("Read the first pages free") keeps its second line under the words, not under the badge */
  .how-step h3{padding-left:1.56em;text-indent:-1.56em}   /* = the badge: 1.5em + .45em of its .8em font */
  .how-num{width:1.5em;height:1.5em;margin-right:.45em;text-indent:0}
}

/* pass 2: contrast and price block (white body text on orange fails WCAG; the closing band is light, the CTA stays orange) */
.closing{background:linear-gradient(180deg,#FFE3D8,#FFD3C2);color:var(--ink)}
.closing .button-cta{background:var(--cta);color:#fff;box-shadow:0 8px 20px rgba(255,90,54,.35)}
.closing .button-cta:hover{background:var(--cta-hover)}
@media (max-width:699px){
  .offer-head{flex-direction:column;align-items:flex-start}
}
.hero-art .couple-link{max-width:250px;margin:0 auto;transform:rotate(1.5deg)}
@media (max-width:699px) and (max-height:780px){.hero-art .couple-link{max-width:200px}}  /* integration 07.10: couple CTA inside a 360x740 first screen (it ended at 750) */
@media (min-width:1000px){.hero-art .couple-link{max-width:420px}}

/* Worlds reader (08.10): replaces the 07.10 shelf + book dialog in section#pages. One open book paged on the landing itself
   (worlds-reader.js), the 8 worlds as tabs under it. Phone: one leaf, art over text, full width; >=760px: a two-page spread. */
.worlds-section{overflow:hidden}
.worlds-section .pages-foot{margin-top:24px}
.reader{max-width:1160px;margin:0 auto;padding:0 12px}
.reader-stage{position:relative}
.reader-book{position:relative;margin:0 auto;max-width:560px;border-radius:12px;background:#FFFDF8;overflow:hidden;touch-action:pan-y;
  box-shadow:0 1px 0 #EFE4D8,0 3px 0 #F8F0E7,0 4px 0 #E4D3C3,0 6px 0 #F8F0E7,0 7px 0 #DCC8B6,0 22px 44px rgba(43,33,24,.2)}
.reader-book:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.reader-leaf{display:flex;flex-direction:column}
.reader-art{position:relative;overflow:hidden;background:var(--soft)}
/* 11.10: the box stays 3:4 (the phone arrows overlay is sized to it); a picture of another ratio (the Runaway Hat: 864x1184 and 864x1157) fills it
   at one scale and loses a sliver top and bottom (1.35% each at most) instead of being squeezed. The only crop in this file. */
.reader-art img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.reader-art .is-faded{filter:blur(7px) saturate(.85);opacity:.7;transform:scale(1.08)}
.reader-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:86%;padding:12px 18px;border-radius:999px;
  background:rgba(255,253,248,.94);box-shadow:var(--shadow-sm);font:700 17px/1.25 var(--body);text-align:center;color:var(--ink)}
.reader-lock span{color:#B23A1C}
.reader-text{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:12.5em;padding:22px 22px 30px}
.reader-kicker{font:700 13px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#B23A1C;margin-bottom:10px}
.reader-title{font-size:27px;line-height:1.15;margin-bottom:12px}
.reader-blurb{font-size:18px;color:var(--muted)}
.reader-hint{margin-top:16px;font-weight:700;color:#B23A1C}
.reader-hint span{display:inline-block;margin-left:4px}
.reader-story{font:400 20px/1.6 var(--body);color:var(--ink)}
.reader-story::first-letter{font:700 1.9em/1 var(--display);color:#B23A1C;float:left;margin:.06em .08em 0 0}
.reader-pageno{position:absolute;left:0;right:0;bottom:10px;text-align:center;font:700 14px/1 var(--body);color:var(--muted)}
.reader-endnote{margin-top:10px;font-size:17px;color:var(--ink)}
.reader-actions{margin-top:18px;align-self:stretch}
.reader .reader-cta{font-size:19px;min-height:56px;padding:12px 26px;width:100%;white-space:nowrap}   /* round 2 (10.10): "Create your free preview" stays on one line at 1280 */
.reader-again{margin-top:6px}
.reader-nav{display:flex;align-items:center;justify-content:center;gap:16px;height:56px;margin-top:16px}
.reader:not(.is-live) .reader-nav{display:none}
.reader-turn{flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--ink);background:var(--card);color:var(--ink);display:grid;place-items:center;
  cursor:pointer;box-shadow:var(--shadow-sm);padding:0;transition:background .15s,opacity .15s}
@media (hover:hover){.reader-turn:hover:not(:disabled){background:var(--soft)}}
.reader-turn:disabled{opacity:.28;cursor:default;box-shadow:none}
.reader-count{min-width:8em;text-align:center;font:700 17px/1.2 var(--body);color:var(--ink)}
/* 11.10 (owner: "open the book and read it in full, not only in this small window"): one link that opens the book on show in the full-size
   viewer (worlds-reader.js aims it at the selected tab). On a phone it sits under the book, above the tabs; from 760px the script moves it
   into the section head (rules below). It is outside the leaf, so it never covers a picture or the text. */
.reader-more{display:flex;justify-content:center;margin:12px 0 0}
.reader-full{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;font:700 17px/1.2 var(--body);color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--cta);text-decoration-thickness:2px;text-underline-offset:4px}
.reader-full svg{flex:none;color:#B23A1C}
.reader-more + .world-tabs{margin-top:6px}
/* 26.10 (Danilo: "CTA on every page of the sample books"): the end leaf's button, under the book on every other view (on the end leaf the
   leaf has its own; the row keeps its height so nothing jumps). Outside the leaf, so it never covers a picture or the text. From 760px the
   book is 64px shorter (below) so the book, this row and the tabs still fit one screen. */
.reader-cta-row{display:flex;justify-content:center;margin:14px 0 0;min-height:50px}
.reader .reader-cta-every{width:auto;min-height:50px;padding:10px 26px;font-size:18px;transition:opacity .2s}
.reader-cta-row.is-end .reader-cta-every{visibility:hidden;opacity:0}
.reader-cta-row + .reader-more{margin-top:4px}
/* 11.10 review: from 760px worlds-reader.js moves the link into the section head, on the sub line's row, so it costs no height: the book
   keeps its size and the book and its tabs fit one screen again (08.10 rule). Under 760px it stays under the book. With no link in the
   head (no JavaScript) these rules change nothing that shows. */
@media (min-width:760px){
  .worlds-section .section-head{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;column-gap:14px}
  .worlds-section .section-head h2{flex:0 0 100%}
  .worlds-section .section-head .reader-more{margin:2px 0 -8px}
}
@keyframes leaf-next{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes leaf-prev{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes leaf-fade{from{opacity:0}to{opacity:1}}
.reader-leaf.turn-next{animation:leaf-next .28s ease-out}
.reader-leaf.turn-prev{animation:leaf-prev .28s ease-out}
.reader-leaf.turn-fade{animation:leaf-fade .3s ease-out}
/* phone (<760px, coordinator 08.10): the arrows and the page count sit ON the art, so the book turns without scrolling.
   The overlay box is exactly the art box (same width, 3:4) and lets touches through to the book (swipe) except on its buttons. */
@media (max-width:759px){
  .reader-nav{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,560px);height:auto;aspect-ratio:3/4;margin:0;z-index:2;
    display:flex;align-items:center;justify-content:space-between;padding:0 8px;pointer-events:none}
  .reader-nav>*{pointer-events:auto}
  .reader-turn{width:48px;height:48px;border:0;background:rgba(255,253,248,.88);color:var(--ink);
    box-shadow:0 0 0 1px rgba(43,33,24,.18),0 4px 12px rgba(20,12,6,.35)}
  .reader-turn:disabled{visibility:hidden}
  .reader-lock{top:26%}   /* clear of the Prev arrow at mid-height */
  .reader-count{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);min-width:0;padding:6px 12px;border-radius:999px;
    background:rgba(30,20,12,.72);color:#fff;font-size:15px;white-space:nowrap;pointer-events:none}
}
/* the world tabs: a sideways strip on a phone, one centred row on a wide screen */
.world-tabs{display:flex;gap:8px;margin:22px -12px 0;padding:6px 12px 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scroll-padding:0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.world-tabs::-webkit-scrollbar{display:none}
.world-tab{flex:0 0 98px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 6px 8px;border:2px solid transparent;
  border-radius:14px;text-decoration:none;color:var(--ink);transition:background .15s,border-color .15s,color .15s}
.world-tab picture{width:62px;border-radius:4px 9px 9px 4px;overflow:hidden;box-shadow:0 5px 10px -3px rgba(43,33,24,.35)}
.world-tab img{width:100%;aspect-ratio:3/4}
.world-tab-label{display:flex;align-items:flex-start;justify-content:center;min-height:2.4em;font:700 15px/1.2 var(--body);text-align:center}
@media (hover:hover){.world-tab:hover{background:var(--soft)}}
.world-tab[aria-current="true"]{border-color:var(--cta);background:#FFF1EA}
.world-tab[aria-current="true"] .world-tab-label{color:#B23A1C}
@media (min-width:760px){
  .reader{padding:0 16px}
  .reader-stage{padding:0 70px}
  /* 08.10 review: book + tabs fit one 800px screen after the header's "Sample book" jump (book height = 100vh - 372px) */
  .worlds-section{padding-top:32px}
  .worlds-section .section-head{max-width:980px;margin-bottom:16px}
  .reader-book{max-width:max(560px,min(1000px,calc((100vh - 436px) * 1.5)));border-radius:8px 14px 14px 8px}
  .reader-leaf{flex-direction:row}
  .reader-art,.reader-text{flex:1 1 50%;width:50%}
  .reader-art::after{content:"";position:absolute;top:0;bottom:0;right:0;width:8%;pointer-events:none;background:linear-gradient(90deg,rgba(43,33,24,0),rgba(43,33,24,.22))}
  .reader-text{aspect-ratio:3/4;min-height:0;padding:7% 8% 9%;justify-content:safe center}
  .reader-text::before{content:"";position:absolute;top:0;bottom:0;left:0;width:7%;pointer-events:none;background:linear-gradient(90deg,rgba(43,33,24,.13),rgba(43,33,24,0))}
  /* type follows the BOOK's width (container units), not the window's: the book is sized by the window height */
  .reader-book{container-type:inline-size}
  .reader-title{font-size:clamp(22px,3.4cqw,36px)}
  .reader-blurb{font-size:clamp(15px,2.3cqw,20px)}
  .reader-story{font-size:clamp(16px,2.55cqw,23px)}
  .reader-kicker{font-size:clamp(12px,1.6cqw,13px)}
  .reader-endnote{font-size:clamp(15px,2.2cqw,17px)}
  .reader .reader-cta{width:100%;white-space:normal;text-wrap:balance;text-align:center;justify-content:center;padding:12px 10px;font-size:clamp(16px,2.5cqw,19px)}
  .reader-nav{height:0;margin:0}
  .reader-turn{position:absolute;top:calc(50% - 30px);width:60px;height:60px}
  .reader-count{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);min-width:0;padding:5px 12px;border-radius:999px;
    background:rgba(30,20,12,.72);color:#fff;font-size:14px;white-space:nowrap;pointer-events:none;z-index:2}
  .reader-prev{left:0}
  .reader-next{right:0}
  /* centred while it fits, scrolls (from its first tab) when it does not, e.g. 760-800px: auto margins = a safe centre */
  .world-tabs{margin:16px 0 0;padding:4px 4px 8px}
  .world-tab{flex:0 0 112px;padding:6px 4px;gap:5px}
  .world-tab:first-child{margin-left:auto}
  .world-tab:last-child{margin-right:auto}
  .world-tab picture{width:64px}
  .world-tab-label{font-size:15px}
}
/* 08.10 (owner: readability first, the audience is grandparents): from 1024px wide the page text is >=19px and the cover blurb >=17px.
   The book follows the window height but never gets narrower than 720px (text page 360x480), the size at which the longest page
   (246 characters) and every cover/end leaf fit at those sizes; on a short window the tabs may start below the fold. */
@media (min-width:1024px){
  .reader-book{max-width:max(720px,min(1000px,calc((100vh - 372px) * 1.5)))}
  .reader-story{font-size:clamp(19px,2.55cqw,23px)}
  .reader-blurb{font-size:clamp(17px,2.3cqw,20px)}
  .reader-endnote{font-size:17px}
  .reader-title{font-size:clamp(24px,3.4cqw,36px)}
}

/* Hero generation (08.10 evening, hero-gen.js): the visitor draws their own grandchild on the first screen.
   Reuses the 00:32 card's pieces (swatches, consent, alert, spinner), restyled to the current hero. */
.hg{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hg[data-phase="consent"],.hg[data-phase="eyes"],.hg[data-phase="busy"],.hg[data-phase="failed"]{background:var(--card);border:2px solid #FFD4C4;border-radius:20px;box-shadow:var(--shadow-sm);padding:14px 14px 10px;animation:hg-open .25s ease-out}
.hg-try{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;width:100%;max-width:420px;padding:10px 20px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:700 18px/1.15 var(--body);cursor:pointer;box-shadow:var(--shadow-sm)}
.hg-try:hover{background:var(--soft)}
.hg-try[disabled]{opacity:.7;cursor:progress}
.hg-ico{display:inline-flex;color:var(--cta);flex:none}
.hg-btn .hg-ico{color:#fff}
.hg-title{font:700 21px/1.2 var(--display)}
.hg-sub{font-size:15px;color:var(--muted);line-height:1.35;max-width:420px}
.hg-btn{width:100%;max-width:420px;min-height:54px;font-size:19px}
.hg-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hg-cancel{font-size:16px;min-height:40px;padding:4px}
.hg-error{color:var(--error);font-weight:700;font-size:15px}
.hg-consent{display:grid;grid-template-columns:28px 1fr;gap:4px 10px;align-items:start;text-align:left;font-size:15px;line-height:1.35;max-width:420px;padding:8px 10px;border-radius:12px;background:#FFF6F1}
.hg-consent input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--cta)}
.hg-consent label{font-weight:700;cursor:pointer}
.hg-consent__link,.hg-consent .hg-error{grid-column:2}
.hg-consent__link{font-weight:700;font-size:15px;text-decoration-color:var(--cta)}
.hg-consent--error{outline:2px solid var(--error)}
.hg-swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.hg-swatch{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:58px;min-height:64px;padding:6px 4px;border:2px solid transparent;border-radius:14px;background:none;cursor:pointer;font:700 14px/1 var(--body);color:var(--ink)}
.hg-swatch--on{border-color:var(--cta);background:#FFF0EA}
.hg-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 3px rgba(255,255,255,.65),0 1px 3px rgba(0,0,0,.25)}
.hg-tick{color:#fff;font-size:17px;font-weight:700}
.hg-spinner{width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.5);border-top-color:#fff;animation:hg-spin 1s linear infinite;flex:none}
.hg-status{display:grid;gap:4px;justify-items:center;max-width:420px}
.hg-status__title{font:700 20px/1.2 var(--display)}
.hg-status__line{font-size:15px;color:var(--muted)}
.hg-timer{font-variant-numeric:tabular-nums}
.hg-pips{display:flex;gap:6px;margin-top:2px}
.hg-pip{width:22px;height:6px;border-radius:999px;background:#EAD8CC}
.hg-pip--on{background:var(--ok)}
.hg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hg-alert{max-width:420px;background:#FFF0EA;border-radius:12px;padding:10px 12px;font-weight:700;font-size:15px;text-align:left}
.hg-alert--info{background:var(--sky)}
.hg-alert__actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:8px}
/* the tiles with the visitor's own pictures: same frame, their image cropped to it */
.hg-own .hg-img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--soft);display:block}   /* the landing never crops a face (L3 13): their photo and pictures sit whole in the 3:4 frame */
.tf-book.hg-own{position:relative}
.tf-book.hg-own .hg-img{aspect-ratio:3/4}
.tf-scene.hg-own::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s}
.tf-scene.hg-stage-waiting::before,.tf-scene.hg-stage-queued::before{opacity:1;background:rgba(255,248,242,.45)}
.tf-scene.hg-stage-drawing::before,.tf-scene.hg-stage-retry::before,.tf-scene.hg-stage-checking::before{opacity:1;background:linear-gradient(115deg,rgba(255,248,242,.55) 30%,rgba(255,201,77,.55) 50%,rgba(255,248,242,.55) 70%);background-size:250% 100%;animation:hg-sweep 1.8s linear infinite}
.tf-scene.hg-stage-waiting .hg-img,.tf-scene.hg-stage-queued .hg-img,.tf-scene.hg-stage-drawing .hg-img,.tf-scene.hg-stage-retry .hg-img,.tf-scene.hg-stage-checking .hg-img{filter:saturate(.6) blur(1.5px)}
.tf-scene.hg-stage-failed .hg-img{filter:grayscale(1);opacity:.6}
.tf-scene.hg-stage-ready .hg-img{animation:hg-in .7s ease-out}
.hg-own .tf-label{z-index:2}
@keyframes hg-spin{to{transform:rotate(360deg)}}
@keyframes hg-sweep{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes hg-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes hg-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:699px){.hg{margin-top:8px}.hg-try{min-height:50px;font-size:17px}}
@media (min-width:1000px){.hg{max-width:640px;margin-left:auto;margin-right:auto}}
.hero-art{scroll-margin-top:68px}
.hg{scroll-margin-bottom:16px}
.hg-own .tf-label{white-space:nowrap}
@media (max-width:699px){.tf-photo.hg-own .tf-label{font-size:12px;left:4px;bottom:4px;padding:4px 6px}}
/* short phones: the Try action moves onto the sample photo tile, so the main button stays in the first screen (geometry test 360x740) */
.hg-chip{display:none}
@media (max-width:699px) and (max-height:799px){
  .hg[data-phase="closed"]:not([data-alert]){display:none}
  .hg-chip{display:inline-flex;align-items:center;gap:6px;position:absolute;right:10px;bottom:12px;z-index:3;white-space:nowrap;min-height:40px;padding:6px 12px;border:2px solid #fff;border-radius:999px;background:var(--ink);color:#fff;font:700 14px/1 var(--body);box-shadow:0 6px 16px rgba(43,33,24,.35);cursor:pointer}
  .hg-chip .hg-ico{color:#fff}
  .hg-chip svg{width:16px;height:16px}
}
html[data-hg-open] .sticky-cta{display:none}

/* 09.10 (call 08.10, SPEC-1009 track A): a book for anyone you love. Same tokens and components; new blocks below. */
/* hero: the promise line and the "Who is it for?" shortcuts (the first quiz question, previewed on the landing) */
.promise{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-weight:700;font-size:17px;color:var(--ink)}
.promise-item{display:inline-flex;align-items:center;gap:7px}
.promise svg{color:var(--cta);flex:none}
.pick{margin-top:6px}
/* 09.10 "Who's the hero?" (owner: the white pill chips were bulky): one light row of round portraits, each cut from that path's own
   sample cover, with a one-word name under it. Picked: an orange ring and the name in ink. One row at every width (5 equal columns on a phone). */
.pick-lead{font:700 15px/1.2 var(--body);color:var(--muted);letter-spacing:.01em;margin-bottom:10px;text-align:center}
.pick-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;justify-content:center;gap:10px}
.pick-list li{min-width:0}
.pick-chip{display:flex;flex-direction:column;align-items:center;gap:6px;width:74px;padding:2px 0 4px;border-radius:14px;color:var(--muted);text-decoration:none;-webkit-tap-highlight-color:transparent}
.pick-ava{display:block;width:54px;height:54px;padding:2px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #F1D9CB,0 3px 10px rgba(43,33,24,.12);transition:box-shadow .18s ease,transform .18s ease}
.pick-ava img{display:block;width:100%;height:100%;border-radius:50%}
.pick-name{font:700 14px/1.15 var(--body);transition:color .18s ease}
.pick-chip:hover{color:var(--ink)}
.pick-chip:hover .pick-ava{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--cta),0 6px 14px rgba(43,33,24,.16)}
.pick-chip:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.pick-chip[aria-pressed="true"]{color:var(--ink)}
.pick-chip[aria-pressed="true"] .pick-ava{box-shadow:0 0 0 3px var(--cta),0 6px 14px rgba(43,33,24,.18)}
@media (min-width:1000px){.pick-lead{text-align:left}.pick-list{justify-content:flex-start}.promise{font-size:19px;margin-top:16px}}
@media (max-width:699px){.promise{font-size:16px;margin-top:6px;gap:2px 12px}.pick-list{gap:4px;justify-content:space-between}.pick-list li{flex:1 1 0}.pick-chip{width:auto}.pick-ava{width:48px;height:48px}.pick-name{font-size:13px}}
@media (prefers-reduced-motion:reduce){.pick-ava,.pick-name{transition:none}}

/* made to be read together: one card per scenario. 09.10 together3: each card shows a staged 4:3 photo (1600x1200, shown whole, never cropped
   by CSS) of the person reading their own book on a tablet; a quiet note under the cards says the photos are staged with invented people */
.scenes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.scene{flex:1 1 240px;max-width:560px;display:flex;flex-direction:column;background:var(--card);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}
.scene-pic{position:relative;margin:0;background:var(--soft)}
.scene-page{display:block;width:100%;height:auto;aspect-ratio:4/3}
.scenes-note{margin:8px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.scene h3{font-size:21px;margin:14px 16px 4px}
/* 11.10: the four card titles stay on one line, so the four texts under them start level. Where a card is narrower than its longest title
   (cards of 236 to 265px: four in a row at about 1046 to 1146px wide, and the phone strip at 320px) the title type steps down with the card,
   to 18.4px at the least; from 266px up it is the 21px above. A browser without container units keeps 21px. */
.scene{container-type:inline-size}
.scene h3{font-size:min(21px,calc((100cqw - 32px)*.09))}
.scene p{margin:0 16px;color:var(--muted);font-size:17px}
.scene-link{margin:auto 16px 16px;padding-top:10px;font-weight:700;font-size:17px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--cta);text-decoration-thickness:2px;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
@media (max-width:699px){
  .scenes{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .scenes::-webkit-scrollbar{display:none}
  .scene{flex:0 0 82%;scroll-snap-align:center}
  .scene:only-child{flex-basis:100%}
}
/* variant C (owner review 11.10): photo -> hero pair between the section head and the cards */
.together .section-head{margin-bottom:14px}
/* Wasabi call 30.10 (#14, Oz: "your photo… I need this bigger"; competitors show the before/after big): the two pictures fill the width
   (each about 150px at 390px, up to 200px), the labels go under them; markup order stays label, tile, arrow, tile, label */
.tg-pair{display:grid;grid-template-columns:minmax(0,200px) auto minmax(0,200px);grid-template-areas:"t1 arrow t2" "l1 . l2";align-items:center;justify-content:center;gap:8px 12px;margin:0 auto 26px}
.tg-pair>.tg-pair-label:first-child{grid-area:l1}
.tg-pair>.tg-pair-label:last-child{grid-area:l2}
.tg-pair>.tg-pair-tile:nth-child(2){grid-area:t1}
.tg-pair>.tg-pair-tile:nth-child(4){grid-area:t2}
.tg-pair-tile{display:block;width:100%;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm);border:4px solid #fff}
.tg-pair-tile img{display:block;width:100%;height:auto;aspect-ratio:4/5}
.tg-pair-arrow{grid-area:arrow;flex:0 0 auto;color:var(--cta)}
.tg-pair-label{font:700 16px/1.2 var(--body);color:var(--ink);white-space:nowrap;text-align:center}
@media (max-width:699px){.tg-pair{gap:6px 8px}.tg-pair-label{font-size:15px}}
@media (max-width:374px){.tg-pair{gap:5px 5px}.tg-pair-arrow{width:20px;height:20px}.tg-pair-label{font-size:14px}}

/* personal: what makes the book theirs (the fields quiz v3 really has: moments, things to include, special phrase, dedication) */
/* 09.10 p2 "You tell us -> it's in the book": each card = the quiz field as the buyer fills it, an arrow, the real sample page
   (a prebuilt 4:3 crop in assets/personal/, never object-fit) and the page's own sentence with the same words marked.
   Cards share row tracks (subgrid) so the fields, arrows and pages line up; phone: one swipeable row with the next card peeking. */
.personal{padding:64px 0 60px;background:var(--card)}
.proof-grid{list-style:none;margin:0 -16px;padding:4px 16px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,330px);column-gap:14px;row-gap:0;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.proof-grid::-webkit-scrollbar{display:none}
.proof{display:flex;flex-direction:column;min-width:0;scroll-snap-align:start;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:18px 18px 20px;
  box-shadow:0 1px 0 rgba(43,33,24,.04),0 14px 30px -20px rgba(43,33,24,.28)}
.proof-label{margin:0 0 8px;font:700 15px/1.3 var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proof-input{margin:0;padding:11px 13px 12px;background:#fff;border:1.5px solid var(--cta);border-radius:12px;box-shadow:0 0 0 3px rgba(255,90,54,.13);
  font:400 16px/1.45 var(--body);color:var(--ink)}
.proof-caret{display:inline-block;width:2px;height:1.15em;margin-left:2px;vertical-align:-.2em;background:var(--cta);animation:proof-blink 1.1s steps(1) infinite}
@keyframes proof-blink{50%{opacity:0}}
.proof-arrow{display:flex;align-items:center;gap:9px;margin:16px 0 12px;font:700 15px/1 var(--body);color:#B23A1C;white-space:nowrap;min-width:0}
.proof-arrow svg{flex:none;width:28px;height:28px;border-radius:50%;background:var(--cta);color:#fff;padding:6px;box-shadow:0 4px 10px rgba(255,90,54,.3)}
.proof-arrow::after{content:"";flex:1;min-width:12px;border-top:1.5px dashed #E6CDBE}
.proof-page{margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 0 rgba(43,33,24,.04),0 12px 24px -16px rgba(43,33,24,.4)}
.proof-page picture{display:block}
.proof-page img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:13px 13px 0 0;background:var(--soft)}
.proof-page figcaption{display:flex;flex-direction:column;padding:16px 18px 18px;border-top:1px solid var(--line)}
.proof-line{margin:0;font:400 17px/1.5 var(--body);color:var(--ink);text-wrap:balance}
.proof mark{white-space:nowrap;color:inherit;padding:0 .08em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(180deg,transparent 0 48%,rgba(255,201,77,.78) 48% 94%,transparent 94%)}
.personal-cta{margin-top:28px}
@supports (grid-template-rows:subgrid){
  .proof-grid{grid-template-rows:repeat(5,auto)}
  .proof{display:grid;grid-row:span 5;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0}
  .proof-page{display:grid;grid-row:span 2;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0}
  .proof-page figcaption{justify-content:flex-start}
}
@media (min-width:900px){.proof-grid{margin:0 auto;padding:0;max-width:1128px;overflow:visible;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
  .proof{scroll-snap-align:none}
}

/* how it works: solo or several characters */
.cast{margin:40px auto 0;max-width:1000px;display:grid;gap:22px;align-items:center;background:var(--bg);border-radius:24px;padding:22px 18px;border:2px solid var(--line)}
.cast-title{font-size:26px;margin-bottom:8px}
.cast-copy>p{color:var(--muted);font-size:18px}
.cast-link{font-size:17px;display:inline-block;padding:10px 0}
.cast-pics{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.cast-pic{margin:0;text-align:center}
.cast-pic picture{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--soft)}
.cast-pic figcaption{margin-top:8px;font-weight:700;font-size:15px;line-height:1.3;text-wrap:balance}
.cast-plus{font:700 17px/1 var(--body);text-transform:lowercase;color:var(--muted);letter-spacing:.02em}
@media (min-width:860px){.cast{grid-template-columns:1fr 1fr;padding:30px 32px;gap:32px}}

/* pets (and toys, when confirmed) come alive */
.alive{padding:56px 0;background:linear-gradient(180deg,#FFF1E6,var(--bg))}
.alive-grid{display:grid;gap:26px;align-items:center}
.alive-copy h2{margin-bottom:12px}
.alive-copy>p{font-size:19px;color:var(--muted);margin-top:8px}
.alive-copy .alive-remember{color:var(--ink);font-style:italic}
.alive-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px!important}
.alive-links .text-link{font-size:18px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.alive-pics{display:flex;justify-content:center;gap:16px}
.alive-pic{margin:0;flex:0 1 300px;text-align:center}
.alive-pic picture,.alive-pic img{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.alive-pic picture{display:block;background:var(--soft);aspect-ratio:864/1184}   /* 09.10: a warm placeholder while the lazy page loads, never an empty hole */
.alive-pic img{width:100%;height:auto}
.alive-pic figcaption{margin-top:8px;font-weight:700;font-size:15px}
@media (min-width:700px){.alive-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px}.alive-pics{justify-content:flex-start}}   /* 09.10 owner: side by side from tablet width */
@media (min-width:1000px){.alive-grid{grid-template-columns:1fr 1fr;gap:56px}.alive-pics{justify-content:center}.alive-copy h2{font-size:42px}}
/* the worlds strip: centred on the tabs on show (an angle tab hidden at the end must not pull the strip to the right) */
@media (min-width:760px){
  .world-tab:first-child,.world-tab:last-child{margin-left:0;margin-right:0}
  .world-tab.tab-first{margin-left:auto}
  .world-tab.tab-last{margin-right:auto}
}
/* short phones (360x740): the universal H1 is one line longer than the 07.10 one, so the first screen tightens a little to keep the main button in view */
@media (max-width:699px) and (max-height:799px){
  .hero h1{font-size:32px}
  .hero-sub{font-size:17px;line-height:1.45}
  .promise{font-size:15px;margin-top:4px}
  .promise svg{width:18px;height:18px}
}

/* 09.10 hero v2 (owner: the first screen read as a kids' product): a fan of 5 sample covers for 5 kinds of people, "Who's the hero?"
   choices above the CTA (CSS order; in the markup the CTA stays the first quiz link), one note line under the CTA (09.10: no price on the landing).
   The fan box has a fixed aspect ratio and the cards are absolutely placed: turning the fan never moves anything else (no layout shift). */
.hero-action .pick{order:-1;margin:0 0 12px}
.cta-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px;font-weight:700;font-size:17px;color:var(--ink);text-align:center}
.cta-line .cta-note{display:inline;font:inherit;color:inherit}
.cta-line .dot{display:none}
.fan{position:relative;list-style:none;margin:0 auto;padding:0;width:100%;max-width:560px;aspect-ratio:100/68;overflow:hidden}   /* 09.10 P2: +6% height = the room for the tags UNDER the covers */
.fan-card{position:absolute;top:3%;left:30%;width:40%;transition:transform .55s cubic-bezier(.3,.7,.3,1),filter .55s;transform-origin:50% 80%}
.fan-hold{position:relative}
.fan-link,.fan-card .tf-book{display:block;border-radius:6px 12px 12px 6px;overflow:hidden;background:var(--soft);box-shadow:var(--shadow);border:3px solid #fff;transform:none}
.fan-card .tf-book:hover{transform:none}
.fan-link img{display:block;width:100%;height:auto;aspect-ratio:3/4}
/* 09.10 P2 (owner call): the tag sits UNDER its cover, never on it: the "A storybook made for ..." line and the title stay readable */
.fan-tag{position:absolute;left:50%;top:100%;margin-top:7px;transform:translateX(-50%);white-space:nowrap;background:rgba(43,33,24,.86);color:#fff;font:700 13px/1 var(--body);padding:6px 10px;border-radius:999px;box-shadow:0 3px 10px rgba(43,33,24,.25);pointer-events:none}
.fan-card[data-pos="0"]{z-index:5;transform:none}
.fan-card[data-pos="1"]{z-index:4;transform:translateX(50%) rotate(7deg) scale(.84)}
.fan-card[data-pos="4"]{z-index:4;transform:translateX(-50%) rotate(-7deg) scale(.84)}
.fan-card[data-pos="2"]{z-index:3;transform:translateX(80%) rotate(12deg) scale(.7)}
.fan-card[data-pos="3"]{z-index:3;transform:translateX(-80%) rotate(-12deg) scale(.7)}
/* a card behind the front one shows its outer half, so its tag sits on that outer edge */
.fan-card:not([data-pos="0"]) .fan-tag{font-size:13px;padding:5px 8px;margin-top:6px}
.fan-card[data-pos="1"] .fan-tag,.fan-card[data-pos="2"] .fan-tag{left:auto;right:4px;transform:none}
.fan-card[data-pos="3"] .fan-tag,.fan-card[data-pos="4"] .fan-tag{left:4px;transform:none}
/* round 2 (10.10): at 1280 the far-right tag ("For the dog") sat under its nearer neighbour's tag and read "or the dog". Only the front cover and the two covers beside it are tagged; the two far slivers keep their cover, hover lift and "Read it" pill but no tag (the chips below name all five) */
.fan-card[data-pos="2"] .fan-tag,.fan-card[data-pos="3"] .fan-tag{display:none}
.fan-card:not([data-pos="0"]) .fan-link{filter:saturate(.92) brightness(.97)}
.fan-card[data-pos="0"] .fan-tag{background:var(--cta);font-size:14px}
.hero-art .note{margin-top:4px}
/* hero-gen.js (the child path's live try): its tiles show only once they hold the visitor's own photo; its Try row and the chip on the
   cover show only when "A child or grandchild" is picked (or once it is at work) */
.hero-art .tf-small{display:none}
.hero-art .tf-small:has(.hg-own){display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:300px;margin:8px auto 0}
.hero-art .tf-small .tf-tile{width:100%}
.hero:not([data-pick="child"]) .hg[data-phase="closed"]:not([data-alert]){display:none}
.hero:not([data-pick="child"]) .hg-chip{display:none!important}
.fan .hg-chip{bottom:calc(34px + 9%);right:50%;transform:translateX(50%)}   /* 09.10 P2: the fan box grew by the tag room; the chip stays on the front cover */
@media (min-width:1000px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero-art{align-self:center}
  .fan{max-width:640px;aspect-ratio:100/74;overflow:visible}
  .fan-card{top:4%;left:28%;width:44%}
  .fan-tag{font-size:15px;padding:7px 12px;margin-top:9px}
  .fan-card[data-pos="0"] .fan-tag{font-size:16px}
  .cta-line{justify-content:flex-start;text-align:left;font-size:18px}
  .pick-lead{font-size:16px}
}
@media (max-width:699px){
  .hero-art .note{font-size:13px;margin-top:2px}
  .fan-tag{font-size:12px;padding:5px 8px;margin-top:5px}
  .fan-card:not([data-pos="0"]) .fan-tag{display:none}   /* 09.10 P2: on a phone only the front cover is labelled; the tags of the slivers behind it were ~9 px and ran into each other (the chips below name the same five people) */
  .pick-lead{margin-bottom:8px}
  .cta-line{font-size:16px}
}
@media (max-width:699px) and (max-height:799px){
  .fan{aspect-ratio:100/58}
  .fan-card{left:33%;width:34%;top:2%}
  .eyebrow{display:none}
}
/* the turning fan's outer cards may reach past the column on 1000-1280 px windows: they are clipped at the hero, never a sideways scroll */
.hero{overflow-x:clip}

/* 09.10 pop-out (owner: hovering must not reorder the fan): the book under the pointer (or with keyboard focus) rises in place, grows a little,
   gets a stronger shadow and a "Read it" pill, and sits above its neighbours; nothing else moves. The lift is on .fan-hold (the card box,
   which is what the pointer hits, stays still, so the edge never flickers). translate/scale are separate properties: they add to the
   fan position transform instead of replacing it. Reduced motion: same state, no transition. */
.fan-link{cursor:pointer}
.fan-hold{transform-origin:50% 80%;transition:translate .18s ease,scale .18s ease}
.fan-link{transition:box-shadow .18s ease,filter .18s ease}
.fan-tag{transition:translate .18s ease}
.fan-hold::after{content:"Read it \2192";position:absolute;left:50%;bottom:46px;transform:translate(-50%,6px);z-index:2;background:#fff;color:var(--ink);font:700 15px/1 var(--body);padding:8px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(43,33,24,.3);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;white-space:nowrap}
.fan-card[data-pick="child"] .fan-hold::after{bottom:76px}
.fan-link:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
.fan-card:has(.fan-link:focus-visible){z-index:6}
.fan-card:has(.fan-link:focus-visible) .fan-hold{translate:0 -12px;scale:1.05}
.fan-card:has(.fan-link:focus-visible) .fan-tag{translate:0 -12px}
.fan-card:has(.fan-link:focus-visible) .fan-link{box-shadow:0 16px 36px rgba(43,33,24,.38);filter:none}
.fan-card:has(.fan-link:focus-visible) .fan-hold::after{opacity:1;transform:translate(-50%,0)}
@media (hover:hover) and (pointer:fine){
  .fan-card:hover{z-index:6}
  .fan-card:hover .fan-hold{translate:0 -12px;scale:1.05}
  .fan-card:hover .fan-tag{translate:0 -12px}
  .fan-card:hover .fan-link{box-shadow:0 16px 36px rgba(43,33,24,.38);filter:none}
  .fan-card:hover .fan-hold::after{opacity:1;transform:translate(-50%,0)}
}
@media (max-width:699px){.fan-hold::after{bottom:36px;font-size:13px;padding:6px 10px}.fan-card[data-pick="child"] .fan-hold::after{bottom:66px}}
@media (prefers-reduced-motion:reduce){
  .fan-card,.fan-hold,.fan-link,.fan-tag,.fan-hold::after{transition:none!important}
}

/* OZ-FB-1023 L1 (Oz: "nothing says the books open"): one "Tap to look inside" pill (desktop: "Click…") right under the front book. It takes
   the front book's tag place (that tag and the front's hover "Read it" pill step aside, so there are never two pills); main.js points it
   at the front book. The fan box keeps its size: the pill is pulled up into the tag strip under the front cover
   (strip = ~12.4% of the fan's width, the fan is at most 560 px wide here, 640 px from 1000 px). 44 px tall, 15 px white text on the tags'
   dark ink (white on the CTA orange is 3.1:1 at this size), orange icon. Scoped with :has(): couple.html shares this file and has no pill. */
.hero-art:has(.fan-hint) .fan-card[data-pos="0"] .fan-tag{display:none}
.hero-art:has(.fan-hint) .fan-card[data-pos="0"] .fan-hold::after{content:none}
.fan-hint{position:relative;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;min-height:44px;
  margin:calc(4px - min(12.4%, 69px)) auto 0;padding:0 18px 0 14px;border-radius:999px;background:#2b2118;color:#fff;
  font:700 15px/1.2 var(--body);text-decoration:none;text-align:center;box-shadow:0 4px 14px rgba(43,33,24,.28);-webkit-tap-highlight-color:transparent}
.fan-hint svg{flex:none;color:var(--cta)}
.fan-hint-mouse{display:none}
@media (hover:hover) and (pointer:fine){
  .fan-hint-touch{display:none}
  .fan-hint-mouse{display:inline}
  .fan-hint:hover{background:#45362a;box-shadow:0 6px 18px rgba(43,33,24,.34)}
}
.fan-hint:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hero-art .fan-hint ~ .note{margin-top:6px}
@media (max-width:699px) and (max-height:799px){.fan-hint{margin-top:calc(4px - min(11.5%, 64px))}}
@media (min-width:1000px){.fan-hint{margin-top:calc(8px - min(12.4%, 79px));font-size:16px;min-height:46px}}
/* OZ-FB-1023 #42: "Tap to look inside the Christmas story" (326 px) widened the hero column past a 320 px screen and was cut off. The
   column may not grow with its content (a longer label wraps inside the pill), and under 360 px the pill drops the book's name. */
.hero-art{min-width:0}
@media (max-width:359px){.fan-hint-what{display:none}}
/* 28.10 (Oz call 27.10 #7): "Popular now" follows the holiday calendar (holidays.js): one quiet link under the hero CTA and a tag on the
   matching "Made to be read together" card. A line, not a button: the orange CTA above stays the one thing to press. */
.popular-now{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;align-self:center;max-width:100%;padding:7px 12px;border-radius:14px;background:var(--soft);color:var(--ink);font:600 15px/1.3 var(--body);text-decoration:none}
.popular-now:hover,.popular-now:focus-visible{background:#FFE3D8}
.popular-now-tag{font:700 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#B23A1C}
.popular-now-text>span:first-child{text-decoration:underline;text-decoration-color:var(--cta);text-underline-offset:3px}
@media (min-width:700px){.popular-now{align-self:flex-start}}
.scene-popular{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:999px;background:var(--cta);color:#fff;font:700 13px/1 var(--body);letter-spacing:.04em;text-transform:uppercase}