/* =========================================================================
   Dino Superfan — website prototype styles
   V1.3: premium personalised-gift editorial feel — cinematic prehistoric
   palette, warm earth tones, golden light. Crude CSS scenery/emoji-as-
   finished-art has been demoted in favour of asset-ready shells (see
   .book-shell / .asset-frame) that a real approved image drops into with
   no markup change — see data/product.js `assets` and assets/README.md.
   No glassmorphism, no clip-art dinosaurs, no generic SaaS gradients.
   ========================================================================= */

:root{
  --ink:#17322a;
  --ink-soft:#2a4a3e;
  --muted:#5c6f65;
  --canopy-deep:#1f4a34;
  --canopy:#2f7d49;
  --canopy-light:#6cae52;
  --earth:#8a5a34;
  --earth-dark:#5c3c22;
  --sand:#efe3c3;
  --paper:#fffaf0;
  --paper-dim:#fdf6e6;
  --cream:#fffdf7;
  --line:#dfe6d9;
  --line-strong:#c7d3c3;
  --gold:#f2b544;
  --gold-deep:#d99420;
  --amber:#e2823a;
  --shadow-sm:0 4px 14px rgba(23,50,42,.10);
  --shadow-md:0 16px 40px rgba(23,50,42,.16);
  --shadow-lg:0 28px 70px rgba(23,50,42,.22);
  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:28px;
  --font-body: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-stamp: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --container: 1180px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:0;
  overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
}
img,canvas,svg{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}

:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:6px}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.eyebrow{
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--amber);
}

.section{padding:88px 0}
.section-head{max-width:640px;margin:0 0 40px}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.1;margin:.3em 0 .2em;font-weight:900}
.section-head p{color:var(--ink-soft);font-size:1.08rem;line-height:1.6}
.section-alt{background:linear-gradient(180deg,var(--paper-dim),var(--paper))}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:999px;padding:14px 24px;font-weight:900;
  font-size:1rem;min-height:50px;background:var(--canopy);color:#fff;
  box-shadow:0 6px 0 var(--canopy-deep);transition:transform .15s,box-shadow .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--canopy-deep)}
.btn.secondary{
  background:#fff;color:var(--ink);border:2px solid var(--line-strong);
  box-shadow:none;
}
.btn.secondary:active{transform:translateY(2px)}
.btn.gold{background:var(--gold);color:#3a2a06;box-shadow:0 6px 0 var(--gold-deep)}
.btn.gold:active{box-shadow:0 2px 0 var(--gold-deep)}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn .arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,250,240,.88);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:.02em;font-size:1.15rem;text-decoration:none}
.brand .mark{font-size:1.4rem}
.main-nav{display:flex;align-items:center;gap:28px}
.main-nav a{text-decoration:none;font-weight:750;color:var(--ink-soft);font-size:.96rem;padding:6px 2px;border-bottom:2px solid transparent}
.main-nav a:hover{border-color:var(--gold)}
.header-cta{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:none;border:2px solid var(--line-strong);border-radius:12px;padding:9px 11px}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;
}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}
.mobile-nav{display:none}

/* V1.7D fix: this was max-width:880px, which left a horizontal-overflow
   gap from 882px up to 944px — the full nav + both header-CTA buttons
   don't actually fit in that range (confirmed by bisecting real rendered
   widths in an iframe, not guessed: overflow ran from 60px at 885px down
   to 0px at 945px, perfectly linear). Raised to 950px, just past the
   measured 945px point where it first fits cleanly, so the gap is fully
   closed with a small safety margin. Nothing else about the desktop/
   mobile nav design changed — same hamburger/.mobile-nav pattern this
   breakpoint always used, just triggered a little earlier. */
@media (max-width:950px){
  .main-nav{display:none}
  .header-cta .btn.secondary-header{display:none}
  .nav-toggle{display:block}
  .mobile-nav.open{
    display:flex;flex-direction:column;gap:2px;padding:8px 24px 18px;border-top:1px solid var(--line);
  }
  .mobile-nav a{padding:12px 6px;text-decoration:none;font-weight:800;color:var(--ink);border-bottom:1px solid var(--line)}
}
/* V1.7D: a second, separate overflow found while verifying the fix above
   (same iframe-bisection method, not part of the task's original 881-950
   report) — even with the nav already collapsed to the hamburger, the
   brand wordmark + the full-text gold CTA button + the hamburger button
   still don't fit together below ~465px (overflow ran from 149px at
   320px down to 0px at 470px). `.btn` is deliberately not touched here
   (white-space:nowrap on the shared class is used all over the site,
   e.g. every dedicated CTA); instead the redundant header CTA is hidden
   at this width only — "Personalise" in the already-open hamburger menu
   (index.html .mobile-nav) reaches the same #configurator destination,
   so nothing becomes unreachable. */
@media (max-width:479px){
  .header-cta .btn.gold{display:none}
}

/* ---------- Hero ---------- */
.hero{padding:56px 0 88px}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero-copy{position:relative}
.hero-h1{font-size:clamp(2.3rem,5vw,3.5rem);line-height:1.04;font-weight:950;margin:.28em 0 .16em}
.hero-h1-line{display:block}
/* V1.7C: replaces V1.7B's pairing of a separately-positioned floating
   dinosaur PNG + a separate wordmark PNG with the one approved composite
   (dinosaur + "Lost Dinosaur Valley" + foliage already integrated into a
   single asset — assets/dino/hero/, see assets/README.md for exact
   provenance). It's a normal block-flow image now, not absolutely
   positioned — because there's no separate element that needs to be kept
   clear of the text any more, the whole "margin-gutter positioning +
   z-index safety net" apparatus from V1.7A/V1.7B is gone; the browser's
   ordinary block layout guarantees no overlap with any text, at any
   width, with zero manual tuning. `width:min(...)` scales it with the
   hero column rather than at a fixed pixel size, matching the same
   technique the V1.7B wordmark used. Accessible name comes from `alt` —
   nothing duplicates the phrase visibly. */
.hero-title-composite{
  display:block;width:min(86%,485px);max-width:100%;height:auto;
  margin:-.04em 0 .02em -4px;
}
.hero-copy .lede{font-size:1.15rem;color:var(--ink-soft);max-width:34rem;line-height:1.6}

.name-field{
  margin-top:26px;background:#fff;border:2px solid var(--line-strong);border-radius:20px;
  padding:16px 18px;max-width:420px;box-shadow:var(--shadow-sm);
}
.name-field label{display:block;font-weight:850;font-size:.86rem;color:var(--ink-soft);margin-bottom:6px}
.name-field .input-row{display:flex;align-items:center;gap:10px}
.name-field input{
  flex:1;min-width:0;border:0;border-bottom:2px solid var(--line-strong);background:transparent;
  padding:8px 2px;font-weight:850;font-size:1.15rem;color:var(--ink);
}
.name-field input:focus-visible{outline:none;border-color:var(--gold-deep)}
.live-title-preview{margin-top:8px;font-family:var(--font-stamp);font-size:.86rem;color:var(--muted);letter-spacing:.02em}
.live-title-preview strong{color:var(--canopy-deep)}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.hero-visual{position:relative}

@media (max-width:900px){
  .hero .container{grid-template-columns:1fr;gap:36px}
  .hero-visual{max-width:340px;margin:0 auto}
}
/* V1.7C: the composite's own width:min(78%,440px) already scales it down
   continuously as .hero-copy narrows — no hero-decor visibility toggle
   needed any more (V1.7A/V1.7B hid a separate floating dinosaur under
   520px; there's nothing separate to hide now). Just tighten the cap a
   little further at phone widths so it stays proportionate to the
   shorter wrapped lines above it, per the task's "reduce the whole
   composite rather than overlapping text" guardrail — it never needs to
   overlap anything to begin with, since it's normal block flow. */
@media (max-width:520px){
  .hero-title-composite{width:min(84%,320px)}
}

/* ---------- Book shell (V1.3) ----------
   Premium asset-ready cover slot. Pending state (default): refined
   material/typography only — no invented scene, no "Sample cover" stamp.
   Ready state (.has-art, set by app.js applyCoverArt() when
   data/product.js assets.cover.status === "ready"): becomes the frame for
   the real approved cover image via background-image, title/plate overlay
   on top of it. Sizes: default = hero/magic-moment; .mini = configurator
   preview + review modal. */
.book-shell{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:2/3;border:10px solid var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:11% 9%;
  background:
    radial-gradient(120% 90% at 22% 0%, rgba(255,255,255,.16), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px),
    linear-gradient(165deg, var(--canopy-deep) 0%, #123a29 55%, #0d281c 100%);
}
.book-shell::after{
  content:"";position:absolute;inset:12px;border:1px solid rgba(242,181,68,.32);
  border-radius:calc(var(--radius-lg) - 12px);pointer-events:none;
}
.book-shell-plate{
  font-family:var(--font-stamp);text-transform:uppercase;letter-spacing:.26em;
  font-size:.72rem;color:var(--gold);margin-bottom:auto;
}
.book-shell-title{
  color:#fffdf6;font-weight:950;font-size:clamp(1.3rem,2.6vw,1.95rem);line-height:1.12;
  text-shadow:0 3px 10px rgba(0,0,0,.4);
}
.book-shell-caption{
  font-family:var(--font-stamp);font-style:italic;font-size:.76rem;letter-spacing:.02em;
  color:rgba(255,253,246,.55);margin-top:auto;
}
.book-shell.has-art{background-size:cover;background-position:center;border-color:var(--cream)}
/* Real cover art already carries the brand plate/title/tagline as
   illustrated elements — the pending-state CSS text stack would double up
   on top of it, so hide it once a real image is showing. */
.book-shell.has-art .book-shell-plate,
.book-shell.has-art .book-shell-title,
.book-shell.has-art .book-shell-caption{display:none}

.book-shell.mini{border-width:6px;border-radius:var(--radius-md);padding:9% 8%}
.book-shell.mini::after{inset:8px;border-radius:calc(var(--radius-md) - 8px)}
.book-shell.mini .book-shell-plate{font-size:.55rem;letter-spacing:.2em}
.book-shell.mini .book-shell-title{font-size:.85rem;line-height:1.15}
.book-shell.mini .book-shell-caption{font-size:.6rem}

/* Dynamic cover name-plate (V1.5, alignment/casing corrected V1.6): the
   ONLY thing overlaid onto the real cover art is the child's name,
   positioned inside the blank stone plaque built into
   cover-dynamic-master.webp. Position is tuned to that specific image's
   plaque geometry; font-size is set at runtime by app.js fitNamePlates()
   (--name-max-size is its starting point per size variant, then it
   shrinks to fit so both "Zo" and "Persephone-Jean" stay inside the
   plaque). Hidden entirely in the pending/shell state — there's no
   plaque to overlay onto until real art is showing.
   V1.6 vertical fix: re-measured the plaque's actual blank inner area on
   the source pixels (flat cracked-stone surface, excluding its raised
   brick border) — it runs ~12%–24% of image height, optical centre
   ~18%. The V1.5 box (top:17%, height:6% → centred at 20%) sat visibly
   below that, which is why "EVIE" read as hanging low. Shifted top from
   17% to 15% (box now 15%–21%, centred ~18%) — height/left/right and the
   shrink-to-fit logic are unchanged, so this is a pure vertical nudge. */
.book-shell-name-plate{
  display:none;position:absolute;left:14%;right:14%;top:15%;height:6%;
  align-items:center;justify-content:center;text-align:center;padding:0 2%;
  --name-max-size:34;
}
.book-shell.has-art .book-shell-name-plate{display:flex}
.book-shell-name-plate span{
  display:block;max-width:100%;white-space:nowrap;overflow:hidden;
  /* V1.6: casing fix — the plate used to force text-transform:uppercase
     so every name rendered as e.g. "EVIE" regardless of what the parent
     typed. Removed so the exact entered casing ("Evie") shows on the
     cover. Letter-spacing trimmed slightly (.01em -> normal) because
     mixed-case text doesn't need the extra breathing room that all-caps
     letterforms do — tight positive spacing on lowercase glyphs reads as
     an error, not intentional premium typesetting. */
  font-weight:950;letter-spacing:normal;line-height:1;
  color:#3c2a12;
  text-shadow:0 1px 0 rgba(255,241,214,.55),0 -1px 1px rgba(0,0,0,.3);
  /* V1.7: subtle live-update tell — app.js dips this to a lower opacity
     and lets it transition back to 1 whenever the typed name actually
     changes, across all 4 cover instances at once, so the cover visibly
     "reacts" to typing rather than silently swapping text. Kept to
     opacity only (no layout/position movement) so it can't jostle the
     shrink-to-fit sizing, and is short enough not to feel laggy while
     typing quickly. */
  transition:opacity .18s ease;
}
.book-shell.mini .book-shell-name-plate{--name-max-size:13}

/* Favourite dinosaur is a configurator choice shaping the preview, not a
   confirmed printed placement — shown as a caption beside the cover art,
   never baked into the cover/certificate art itself. */
.shaping-line{color:var(--muted)}
.shaping-line strong{color:var(--ink)}
.magic-content .shaping-note{color:var(--muted);font-size:.96rem;margin-bottom:20px}
.magic-content .shaping-note strong{color:var(--earth-dark)}

/* ---------- Asset-ready shells (V1.3) ----------
   Generic "real image or honest placeholder" frame used by proof panels
   and the "see inside" tiles. app.js renderAssetSlot() toggles
   .has-art/.is-shell and injects either an <img> or shell content —
   never invented artwork. */
.asset-frame{
  border-radius:var(--radius-md);overflow:hidden;position:relative;
  aspect-ratio:4/3;
}
.asset-frame.is-shell{
  background:linear-gradient(135deg,var(--paper-dim),var(--sand));
  border:1.5px dashed var(--line-strong);
  display:flex;align-items:center;justify-content:center;
}
.asset-frame.has-art img{width:100%;height:100%;object-fit:cover;display:block}
.asset-shell-inner{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;text-align:center}
.asset-shell-label{font-weight:800;font-size:.86rem;color:var(--ink-soft)}
.proof-quote{font-family:var(--font-stamp);font-style:italic;font-size:1.05rem;line-height:1.5;color:var(--ink-soft);max-width:34rem}
.proof-panel .sample-badge{display:inline-block;margin:2px 0 12px}
.proof-panel .proof-quote{margin-top:14px}

/* ---------- Interactive proof ("Why it's different", V1.3) ----------
   Single-column editorial list (not equal-height SaaS cards). Hover and
   keyboard focus reveal the proof panel via pure CSS (:hover /
   :focus-within); click/tap additionally pins it open via .pinned,
   toggled by app.js — so the interaction never depends on hover alone. */
.proof-list{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.proof-item{background:var(--cream)}
.proof-trigger{
  width:100%;display:flex;align-items:center;gap:16px;text-align:left;
  background:none;border:0;padding:22px 24px;
}
.proof-icon{
  flex:none;width:44px;height:44px;border-radius:14px;background:var(--sand);
  display:grid;place-items:center;font-size:1.25rem;
}
.proof-text{display:grid;gap:4px;flex:1;min-width:0}
.proof-text strong{font-size:1.05rem;font-weight:900}
.proof-text small{color:var(--ink-soft);font-size:.94rem;line-height:1.5;font-weight:500}
.proof-chev{flex:none;font-size:1.3rem;font-weight:300;color:var(--muted);transition:transform .2s ease}

.proof-panel-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.proof-panel-wrap > .proof-panel{overflow:hidden}
.proof-panel{padding:0 24px}
.proof-frame{margin:0 0 24px}
.proof-panel .certificate,.proof-panel .certificate-art{margin:0 0 24px}

/* V1.7: proof content fades/lifts in as the panel opens rather than
   appearing instantly at full height — makes the certificate promise in
   particular feel like a reveal, not just another static card. The
   certificate gets a touch more delay so it lands just after the image-
   based proofs, since it's the "keepsake" payoff of the three. Purely
   opacity/transform, no animation library; zeroed by the global
   prefers-reduced-motion rule below like every other transition here. */
.proof-panel > *{opacity:0;transform:translateY(8px);transition:opacity .32s ease,transform .32s ease}
:is(.proof-item:hover,.proof-item:focus-within,.proof-item.pinned) .proof-panel > *{opacity:1;transform:none}
.proof-panel .certificate,.proof-panel .certificate-art{transition-delay:.08s}

:is(.proof-item:hover,.proof-item:focus-within,.proof-item.pinned) .proof-panel-wrap{grid-template-rows:1fr}
.proof-item.pinned .proof-chev{transform:rotate(45deg)}
.proof-item:hover,.proof-item:focus-within,.proof-item.pinned{background:var(--paper-dim)}
.proof-item.pinned .proof-trigger{box-shadow:inset 4px 0 0 0 var(--gold-deep)}

@media (hover:none){
  /* Touch devices: no sustained hover — rely on the .pinned click/tap
     state only, which app.js sets on every tap regardless of pointer type. */
  .proof-item:hover .proof-panel-wrap{grid-template-rows:0fr}
  .proof-item.pinned .proof-panel-wrap{grid-template-rows:1fr}
}

/* ---------- See inside the adventure (V1.3 grid; V1.7 tap-to-view) ----------
   Each tile is a real <button> (see app.js renderInsideMoments()) so the
   whole card is a single tap/click/keyboard target that opens the
   viewer/lightbox (#insideViewer) — not just descriptive text about the
   page. The "Tap to explore" affordance is a persistent CSS overlay
   (rather than hover-only) so it reads as tappable on touch devices too. */
.inside-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:28px}
.inside-tile{
  display:block;width:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.inside-tile:hover,.inside-tile:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.inside-tile:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px}
.inside-tile .asset-frame{border-radius:0;aspect-ratio:16/10}
.inside-frame{position:relative}
.inside-frame::after{
  content:"🔍 Tap to explore";pointer-events:none;
  position:absolute;right:10px;bottom:10px;
  background:rgba(23,50,42,.75);color:#fff;font-size:.72rem;font-weight:750;
  letter-spacing:.02em;padding:5px 10px;border-radius:999px;
}
.inside-body{padding:18px 20px 22px}
.inside-tag-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.inside-tile h3{font-size:1.1rem;font-weight:900;margin-bottom:6px}
.inside-caption{color:var(--ink-soft);font-size:.94rem;line-height:1.5}

/* Marks a slot whose image contains fixed baked copy (e.g. a sample name)
   that doesn't change with the current customer — see data/product.js
   `sampleOnly` and assets/README.md. Never implies live personalisation. */
.sample-badge{
  font-size:.66rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--paper-dim);border:1px solid var(--line-strong);
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}

.tag-pill{
  display:inline-block;font-size:.72rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}
.tag-pill.tag-story{background:#e4f1de;color:var(--canopy-deep)}
.tag-pill.tag-puzzle{background:#fdecd2;color:#8a5417}
.tag-pill.tag-discovery{background:#e0f2f1;color:#276661}
.tag-pill.tag-colour{background:#f1e3f7;color:#6a3a86}
.tag-pill.tag-activity{background:#fbe2dc;color:#a3462b}
.tag-pill.tag-reveal{background:#fdf1c8;color:#8a6417}

.demo-callout{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--canopy-deep),var(--canopy));color:#fff;
  border-radius:var(--radius-md);padding:26px 28px;box-shadow:var(--shadow-md);
}
.demo-callout h3{font-size:1.2rem;font-weight:900;margin-bottom:6px}
.demo-callout p{color:#e4f3e2;font-size:.95rem;max-width:36rem}

@media (max-width:760px){.inside-grid{grid-template-columns:1fr}}

/* ---------- See inside viewer (V1.7 lightbox/carousel) ----------
   Opened from any .inside-tile (app.js openViewer()). Same z-index layer
   as .modal-overlay below — the two are mutually exclusive (only one of
   review modal / viewer is ever open at once) so there's no stacking
   conflict. Image uses object-fit:contain (never cropped/cover) so the
   full page art is always visible, unlike the cropped 16:10 grid tile. */
.viewer-overlay{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(13,26,20,.86);
  align-items:center;justify-content:center;padding:20px;
}
.viewer-overlay.open{display:flex}
.viewer{
  position:relative;width:100%;max-width:900px;max-height:92vh;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.viewer-close{
  position:absolute;top:-6px;right:-6px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;background:var(--cream);color:var(--ink);
  font-size:1rem;font-weight:900;display:grid;place-items:center;box-shadow:var(--shadow-md);
}
.viewer-stage{
  position:relative;width:100%;max-height:68vh;border-radius:var(--radius-lg);
  overflow:hidden;background:#0d281c;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
}
.viewer-img{max-width:100%;max-height:68vh;object-fit:contain;display:block}
.viewer-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,253,246,.94);color:var(--ink);
  font-size:1.5rem;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow-md);
}
.viewer-nav:hover{transform:translateY(-50%) scale(1.05)}
.viewer-prev{left:10px}
.viewer-next{right:10px}
.viewer-meta{width:100%;max-width:640px;text-align:center;color:#fff}
.viewer-position{
  display:block;font-family:var(--font-stamp);font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px;
}
.viewer-caption{font-size:1rem;line-height:1.5;color:#f2f5ee}
.viewer-badge-row{margin-top:10px}
.viewer-badge-row:empty{margin-top:0}
.viewer-badge-row .sample-badge{background:rgba(255,253,246,.94)}

@media (max-width:640px){
  .viewer-nav{width:40px;height:40px;font-size:1.3rem}
  .viewer-prev{left:2px}
  .viewer-next{right:2px}
  .viewer-close{top:-2px;right:2px}
}

/* ---------- Configurator (V1.3: persistent live preview) ----------
   Desktop: stepper spans full width; step controls sit left, a live
   preview panel sits right, on the same row (grid-template-areas).
   Mobile: single column — stepper, active step content, preview, then
   Back/Next actions — so the preview follows the active control. */
.configurator{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:32px;
}
.configurator-grid{
  display:grid;gap:16px 32px;
  grid-template-columns:1.05fr .95fr;
  grid-template-areas:
    "top top"
    "panels preview"
    "actions actions";
}
.configurator-top{grid-area:top}
.configurator-panels{grid-area:panels;min-width:0}
.configurator-preview{grid-area:preview}
.configurator-actions{grid-area:actions}

@media (max-width:900px){
  .configurator-grid{grid-template-columns:1fr;grid-template-areas:"top" "panels" "preview" "actions"}
}

.stepper{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.step-pill{
  display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:800;color:var(--muted);
  padding:8px 14px;border-radius:999px;border:2px solid var(--line-strong);background:#fff;
}
.step-pill .num{
  width:22px;height:22px;border-radius:50%;background:var(--line-strong);color:#fff;
  display:grid;place-items:center;font-size:.74rem;
}
.step-pill.active{border-color:var(--canopy);color:var(--canopy-deep);background:#eef8e9}
.step-pill.active .num{background:var(--canopy)}
.step-pill.done .num{background:var(--gold-deep)}

.step-meter{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin:14px 0 0}
.step-meter > span{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--canopy-light),var(--gold));transition:width .3s ease}

.config-panel{display:none}
.config-panel.active{display:block;animation:fadeSlide .3s ease}
@keyframes fadeSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.config-panel h3{font-size:1.4rem;font-weight:900;margin-bottom:6px}
.config-panel > p.help{color:var(--muted);margin-bottom:20px}

.field{margin-bottom:18px;max-width:460px}
.field label{display:block;font-weight:850;font-size:.9rem;margin-bottom:6px}
.field .hint{display:block;font-weight:600;color:var(--muted);font-size:.82rem;margin-top:4px}
.field input[type=text],.field textarea{
  width:100%;border:2px solid var(--line-strong);border-radius:14px;padding:12px 14px;
  background:#fff;font-size:1rem;
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--gold-deep)}

/* Dinosaur choice — V1.3 de-premiumised this to a plain emoji chip
   specifically because the emoji were wrong-species/proxy glyphs, not
   real matched art (see VISUAL_REVIEW_2026-08-22.md: "not premium enough
   for customer-ready use... when approved assets exist, use them"). V1.7D
   wires in exactly that approved art (data/product.js `img`, five website-
   use derivative crops — assets/README.md has provenance), so `.ic` is
   now a fixed-size, rounded image frame rather than a bare font-sized
   glyph — still a compact chip, not a full illustrated card, just sized
   to actually show the artwork. `object-fit:contain` inside a fixed box
   is what keeps all five at consistent visual weight despite their
   differing source aspect ratios (T-Rex's crop is a wide ~1.55:1,
   Brachiosaurus's is closer to square) without ever stretching/distorting
   any of them — a landscape-cropped dinosaur and a taller one both simply
   scale to fit the same frame. font-size on `.ic` is a fallback only, for
   the rare option that has no `img` yet (app.js renderOptionGrid()) and
   falls back to its plain `icon` emoji instead. */
/* V1.7F: switched from a fixed 3-column CSS Grid to a wrapping flex row.
   With 5 cards in 3 columns, the second row (2 cards) always left-hugged
   under the first two columns, leaving a bare gap under column 3 — read
   as the row "floating independently" rather than a deliberate layout.
   flex-wrap + justify-content:center means a genuinely partial last row
   centres itself under the row(s) above instead, at any card count. */
.dino-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:640px}
.dino-choice{
  flex:0 1 200px;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:14px;padding:10px 12px;text-align:left;
  display:flex;align-items:center;gap:10px;transition:.15s border-color,.15s background;
}
.dino-choice .ic{
  flex:none;width:56px;height:56px;border-radius:12px;overflow:hidden;
  background:var(--paper-dim);display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
}
.dino-choice .ic img{width:100%;height:100%;object-fit:contain;display:block}
.dino-choice strong{display:block;font-size:.88rem;font-weight:800}
.dino-choice small{color:var(--muted);font-size:.72rem;line-height:1.25;display:block;margin-top:1px;font-weight:500}
.dino-choice[aria-pressed=true]{border-color:var(--canopy);background:#eef8e9}

@media (max-width:640px){.dino-choice{flex-basis:calc(50% - 5px)}}
@media (max-width:420px){.dino-choice{flex-basis:100%}}

/* V1.7F: `justify-content:center` vertically centres the cover+shaping-
   line as one group within the panel rather than packing them to the
   top and leaving the leftover height (the panel's height always
   matches whichever step's content is tallest, via the shared grid row)
   as dead space below — this is what made the shaping line read as
   "stranded low" and the cover as adrift in empty space. `.book-shell
   .mini` widened (150px -> 190px) so the cover reads as a considered
   part of the panel rather than a small tile lost in a much wider card. */
.configurator-preview{
  background:var(--paper-dim);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:20px;display:flex;flex-direction:column;justify-content:center;gap:16px;align-content:start;
}
.configurator-preview .book-shell.mini{width:190px;margin:0 auto}
.preview-facts{display:grid;gap:8px;font-size:.9rem;text-align:center}

.step-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Magic moment / preview (V1.3: reveal, not dashboard) ---------- */
.magic-moment{
  border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(180deg,var(--paper-dim),var(--paper));
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:0;
}
.magic-visual{background:linear-gradient(160deg,#0d281c,var(--canopy-deep));padding:40px;display:flex;align-items:center;justify-content:center}
.magic-visual .book-shell{width:100%;max-width:320px}
.magic-content{padding:44px 40px}
.magic-content .eyebrow{margin-bottom:8px}
.magic-lede{font-size:1.4rem;font-weight:900;line-height:1.2;margin-bottom:10px}

.beat-list{display:grid;gap:6px;margin-bottom:22px}
.beat-line{font-size:1rem;color:var(--ink-soft);line-height:1.5}

.certificate{
  background:var(--cream);color:var(--ink);border-radius:16px;padding:24px 22px;
  border:2px double var(--gold-deep);max-width:480px;box-shadow:var(--shadow-sm);
  margin-bottom:26px;
}
.certificate.compact{padding:18px 18px;border-width:1.5px;box-shadow:none;background:var(--paper-dim)}
.certificate .cert-eyebrow{font-family:var(--font-stamp);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:var(--amber);text-align:center}
.certificate h4{font-family:var(--font-stamp);text-align:center;font-size:1.35rem;margin:.35em 0;color:var(--canopy-deep)}
.certificate p{font-family:var(--font-stamp);text-align:center;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.certificate .cert-note{font-family:var(--font-stamp);text-align:center;margin-top:10px;font-size:.82rem;font-weight:750;color:var(--earth-dark)}

/* Certificate as real art (V1.5): certificate-p31.webp as the background,
   with the achievement copy/name/dedication overlaid deterministically
   into its blank parchment centre — the WebP itself is never touched.
   Position/size tuned to that specific image's blank-zone geometry.
   Falls back to the plain typographic .certificate above if the
   certificateProof asset slot is ever pending again — see
   app.js buildCertificateNode(). */
.certificate-art{
  position:relative;border-radius:16px;overflow:hidden;container-type:inline-size;
  aspect-ratio:900/718;max-width:480px;box-shadow:var(--shadow-sm);margin-bottom:26px;
}
.certificate-bg{width:100%;height:100%;object-fit:cover;display:block}
.certificate-art .certificate-overlay{
  position:absolute;left:11%;right:11%;top:25%;height:27%;padding:0 1%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;
  text-align:center;
}
.certificate-art .certificate-overlay .cert-eyebrow{
  font-family:var(--font-stamp);text-transform:uppercase;letter-spacing:.13em;
  font-size:clamp(.5rem,1.6cqw,.62rem);color:#8a5417;
}
.certificate-art .certificate-overlay h4{
  font-family:var(--font-stamp);font-weight:700;line-height:1.15;margin:0;
  font-size:clamp(.85rem,3.4cqw,1.35rem);color:#3c2a12;
}
.certificate-art .certificate-overlay p{
  font-family:var(--font-stamp);line-height:1.3;margin:0;color:#5c4a30;
  font-size:clamp(.56rem,1.7cqw,.76rem);
}
.certificate-art .certificate-overlay .cert-note{
  font-weight:750;color:#5c3c22;margin-top:.2em;
  font-size:clamp(.5rem,1.5cqw,.66rem);
}
.certificate-art.compact{max-width:420px}

.magic-cta{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:860px){
  .magic-moment{grid-template-columns:1fr}
  .magic-visual{padding:32px}
  .magic-visual .book-shell{max-width:220px}
  .magic-content{padding:32px 24px}
}

/* ---------- What's included (V1.3: no commercial placeholders) ---------- */
.included-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:900px;
}
.included-list li{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;font-weight:650;
}
.included-list li .check{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--canopy);color:#fff;
  display:grid;place-items:center;font-size:.78rem;margin-top:1px;
}
@media (max-width:640px){.included-list{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px;max-width:760px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.faq-q{
  width:100%;text-align:left;background:none;border:0;padding:18px 20px;display:flex;
  justify-content:space-between;align-items:center;gap:12px;font-weight:850;font-size:1rem;
}
.faq-q .chev{transition:transform .2s ease;color:var(--muted);flex:none}
.faq-item[data-open="true"] .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-a p{padding:0 20px 18px;color:var(--ink-soft);line-height:1.55;font-size:.96rem}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,30,24,.55);display:none;
  align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:100;overflow-y:auto;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--cream);border-radius:var(--radius-lg);max-width:560px;width:100%;
  box-shadow:var(--shadow-lg);padding:30px;position:relative;
}
.modal-close{
  position:absolute;top:16px;right:16px;background:#fff;border:2px solid var(--line-strong);
  border-radius:50%;width:38px;height:38px;font-size:1rem;font-weight:900;
}
.modal h2{font-size:1.4rem;font-weight:950;margin-bottom:4px}
.modal .modal-sub{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.review-grid{display:grid;grid-template-columns:130px 1fr;gap:18px;margin-bottom:20px}
.review-grid .book-shell.mini{width:130px}
.review-rows{display:grid;gap:10px}
.review-row{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;border-bottom:1px solid var(--line);padding-bottom:8px}
.review-row span:first-child{color:var(--muted);font-weight:750}
.review-row span:last-child{font-weight:800;text-align:right}
.modal-included{margin:18px 0 22px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;font-size:.88rem;color:var(--ink-soft);line-height:1.6}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap}
.checkout-confirm{display:none;text-align:center;padding:8px 4px}
.checkout-confirm.show{display:block}
.checkout-confirm .badge-ok{font-size:2.4rem;margin-bottom:10px}
.checkout-confirm h3{font-size:1.15rem;font-weight:900;margin-bottom:8px}
.checkout-confirm p{color:var(--ink-soft);font-size:.94rem;line-height:1.55;margin-bottom:18px}

/* ---------- Footer ---------- */
.site-footer{background:var(--canopy-deep);color:#eaf3e6;padding:48px 0 32px}
.footer-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.footer-brand{font-weight:950;font-size:1.1rem;display:flex;align-items:center;gap:8px}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{text-decoration:none;color:#cfe4c9;font-weight:700;font-size:.92rem}
.footer-links a:hover{color:#fff}
.footer-note{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:.82rem;color:#b9d3b1;line-height:1.6}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- Small screens: section rhythm ---------- */
@media (max-width:640px){
  .section{padding:60px 0}
  .configurator{padding:22px}
  .modal{padding:22px}
  .review-grid{grid-template-columns:1fr}
  .review-grid .book-shell.mini{width:150px;margin:0 auto}
  .proof-trigger{padding:18px}
  .proof-panel{padding:0 18px}
}


/* post-purchase page shell */
.post-purchase-header .bar{min-height:64px}
.post-purchase-status{font-size:13px;font-weight:800;color:#6b746b;text-transform:uppercase;letter-spacing:.08em}
.post-purchase-intro{padding:56px 20px 24px;background:#f7f3e9;text-align:center}
.post-purchase-intro .container{max-width:860px}
.post-purchase-intro h1{margin:0 0 14px;font-size:clamp(34px,5vw,58px);line-height:1.02;color:#183d2d}
.post-purchase-intro p{max-width:700px;margin:0 auto;color:#636b63;line-height:1.65}


/* Six-page live book build test */
.book-build-test{background:#f7f3e9}
.book-build-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 24px;padding:16px 18px;background:#fff;border:1px solid #e5dfd1;border-radius:14px}
.book-build-toolbar>div{display:flex;flex-direction:column;gap:4px}
.book-build-state{font-size:14px;color:#6a7168}
.book-build-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.book-test-page{margin:0;background:#fff;border:1px solid #e4dfd5;border-radius:18px;overflow:hidden;box-shadow:0 12px 28px rgba(35,49,39,.08)}
.book-test-page canvas{display:block;width:100%;height:auto;background:#132d22}
.book-test-page p{margin:0;padding:12px 16px;font-weight:800;color:#173b2b}
.book-build-note{margin:22px 0 0;color:#60685f;line-height:1.6}
@media(max-width:760px){
  .book-build-grid{grid-template-columns:1fr}
  .book-build-toolbar{align-items:flex-start;flex-direction:column}
}


/* Post-purchase hierarchy: book first, editing second */
.post-purchase-intro{padding-bottom:34px}
.book-build-test{padding-top:54px}
.compact-edit-head{margin-top:4px}
.compact-edit-head .btn{margin-top:16px}
.configurator-collapsed{display:none}
.configurator-collapsed.is-open{display:block}
#configurator.section{padding-top:42px}


/* Old placeholder magic-moment is superseded by the live book preview. */
#preview{display:none}


/* Normalise six-page preview presentation without altering source artwork */
.book-build-grid{
  align-items:start;
}
.book-test-page{
  display:flex;
  flex-direction:column;
  height:100%;
}
.book-test-page canvas{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:contain;
  background:#0f3428;
}
.book-test-page p{
  min-height:48px;
  display:flex;
  align-items:center;
  padding:12px 16px;
  border-top:1px solid #ece6da;
}
@media(min-width:761px){
  .book-build-grid{
    grid-auto-rows:1fr;
  }
}


/* 32-page build audit status */
.book-test-page{position:relative}
.book-page-status{
  position:absolute;top:10px;right:10px;z-index:4;
  padding:5px 9px;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:.02em;
  background:#ece8de;color:#4b514b;
  box-shadow:0 2px 8px rgba(0,0,0,.12)
}
.book-test-page[data-build-status="built"] .book-page-status{
  background:#dff1df;color:#22582a
}
.book-test-page[data-build-status="partial"] .book-page-status{
  background:#fff0c9;color:#7b5514
}
.book-test-page[data-build-status="needs"] .book-page-status{
  background:#f5dddd;color:#7d2929
}
.book-build-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:1150px){
  .book-build-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:850px){
  .book-build-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .book-build-grid{grid-template-columns:1fr}
}


/* True two-page book spreads */
.book-test-page[data-book-page="P20"] canvas,
.book-test-page[data-book-page="P24"] canvas,
.book-test-page[data-book-page="P27"] canvas,
.book-test-page[data-book-page="P28"] canvas{
  aspect-ratio:auto;
  height:auto;
  object-fit:contain;
}
.book-test-page[data-book-page="P20"],
.book-test-page[data-book-page="P24"],
.book-test-page[data-book-page="P27"],
.book-test-page[data-book-page="P28"]{
  grid-column:span 2;
}
@media(max-width:850px){
  .book-test-page[data-book-page="P20"],
  .book-test-page[data-book-page="P24"],
  .book-test-page[data-book-page="P27"],
  .book-test-page[data-book-page="P28"]{
    grid-column:span 2;
  }
}
@media(max-width:560px){
  .book-test-page[data-book-page="P20"],
  .book-test-page[data-book-page="P24"],
  .book-test-page[data-book-page="P27"],
  .book-test-page[data-book-page="P28"]{
    grid-column:span 1;
  }
}


/* Finished-book reader — customer-facing */
.book-reader-overlay{
  position:fixed;inset:0;z-index:5000;display:none;
  background:#171918;padding:0;overflow:hidden;
}
.book-reader-overlay.open{display:block}
.book-reader{
  width:100%;height:100vh;display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  color:#f4f3ef;background:#171918;
}
.book-reader-header{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.08);
  background:#1c1f1d;
}
.book-reader-heading{display:flex;flex-direction:column;gap:2px;min-width:0}
.book-reader-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:#aeb8b0;font-weight:800}
.book-reader-heading strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-reader-header-actions{display:flex;align-items:center;gap:10px}
.book-reader-tool,.book-reader-close{
  border:1px solid rgba(255,255,255,.16);background:#262a27;color:#f7f7f4;
  border-radius:999px;height:38px;padding:0 15px;font-weight:800;cursor:pointer;
}
.book-reader-close{width:38px;padding:0;font-size:18px}
.book-reader-stage{
  min-height:0;display:grid;grid-template-columns:64px minmax(0,1fr) 64px;
  align-items:center;gap:12px;padding:18px 20px;
}
.book-reader-canvas-wrap{
  position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;
}
.book-reader-page{
  height:100%;width:100%;display:flex;align-items:center;justify-content:center;
}
.book-reader-page canvas{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  background:#fff;
  box-shadow:0 18px 54px rgba(0,0,0,.48);
}
.book-reader-page:not(.is-spread) canvas{border-radius:4px}
.book-reader-page.is-spread canvas{border-radius:3px}
.book-reader-loading{
  position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:10px 15px;border-radius:999px;background:rgba(0,0,0,.58);font-size:13px;
}
.book-reader-error{
  padding:28px 34px;background:#f7f1e6;color:#533;border-radius:8px;
}
.book-reader-nav{
  width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);color:#fff;font-size:36px;cursor:pointer;
  display:grid;place-items:center;transition:.18s ease;
}
.book-reader-nav:hover{background:rgba(255,255,255,.16)}
.book-reader-nav:disabled{opacity:.18;cursor:default}
.book-reader-footer{
  display:grid;grid-template-columns:auto minmax(100px,420px) auto;
  align-items:center;justify-content:center;gap:18px;
  padding:10px 22px;color:#c9cfca;font-size:12px;
  border-top:1px solid rgba(255,255,255,.07);
}
.book-reader-progress{height:3px;background:#3a3e3b;border-radius:99px;overflow:hidden}
.book-reader-progress span{display:block;height:100%;width:0;background:#d7b05e;transition:width .25s ease}
.book-reader-hint{color:#8e9790}
.book-reader-thumbs{
  display:flex;gap:8px;overflow-x:auto;padding:10px 18px 14px;
  background:#202421;border-top:1px solid rgba(255,255,255,.08);
}
.book-reader-thumbs[hidden]{display:none}
.book-reader-thumb{
  flex:0 0 92px;border:2px solid transparent;background:#2a2e2b;color:#fff;
  padding:4px;border-radius:6px;cursor:pointer;
}
.book-reader-thumb.active{border-color:#d7b05e}
.book-reader-thumb canvas{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#fff;border-radius:3px
}
.book-reader-thumb span{display:block;padding:4px 2px 1px;font-size:10px;text-align:center}
@media(max-width:760px){
  .book-reader-header{padding:10px 12px}
  .book-reader-heading strong{font-size:14px}
  .book-reader-stage{grid-template-columns:42px minmax(0,1fr) 42px;padding:10px 6px;gap:4px}
  .book-reader-nav{width:38px;height:38px;font-size:28px}
  .book-reader-footer{grid-template-columns:auto 1fr;padding:8px 12px}
  .book-reader-hint{display:none}
}


/* Customer page hides internal 28-page QA surface; canvases still build off-screen for the reader. */
#bookBuildTest .book-build-grid,
#bookBuildTest #rebuildBookTest,
#bookBuildTest .book-build-state{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}
#bookBuildTest .book-build-toolbar{
  justify-content:center;
  text-align:center;
  padding:22px 24px;
}
#bookBuildTest .book-build-toolbar>div:first-child{
  display:none;
}
#bookBuildTest .book-build-actions{
  justify-content:center;
}
#openFullBookPreview{
  min-width:min(100%,320px);
  font-size:16px;
  padding:14px 24px;
  gap:0;
}
.post-purchase-actions .btn{
  min-height:52px;
}
.post-purchase-reassurance{
  align-items:center;
}
.post-purchase-reassurance span{
  white-space:nowrap;
}


/* Hard-hide internal QA grid from customer surface */
#bookBuildGrid{
  display:none !important;
}
#bookBuildTest .book-test-page,
#bookBuildTest .book-page-status{
  display:none !important;
}


/* ===== Customer post-purchase handoff ===== */
.book-render-engine{
  position:fixed !important;
  left:-100000px !important;
  top:0 !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}
.book-render-engine #bookBuildGrid,
.book-render-engine .book-test-page{
  display:block !important;
}
.book-render-engine canvas{
  display:block !important;
}

.post-purchase-ready{
  padding:72px 0 64px;
  background:
    radial-gradient(circle at 76% 34%,rgba(242,181,68,.12),transparent 30%),
    linear-gradient(180deg,#fffaf0,#f8f1df);
}
.post-purchase-ready-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.62fr);
  gap:72px;
  align-items:center;
}
.post-purchase-ready-copy h1{
  margin:.26em 0 .22em;
  max-width:720px;
  font-size:clamp(2.5rem,5.6vw,4.6rem);
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--canopy-deep);
}
.post-purchase-lede{
  max-width:650px;
  color:var(--ink-soft);
  font-size:1.12rem;
  line-height:1.65;
}
.post-purchase-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}
.post-purchase-reassurance{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:24px;
  color:var(--muted);
  font-size:.9rem;
  font-weight:750;
}
.post-purchase-cover{
  position:relative;
  display:flex;
  justify-content:center;
}
.post-purchase-cover::before{
  content:"";
  position:absolute;
  width:78%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(47,125,73,.10);
  filter:blur(2px);
  top:12%;
}
.post-purchase-cover-live{
  position:relative;
  z-index:1;
  width:min(380px,100%);
  aspect-ratio:2/3;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 24px 58px rgba(23,50,42,.24);
  background:#ddd;
}
.post-purchase-cover-live>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.post-purchase-cover-live .p01-avatar,
.post-purchase-cover-live .p01-dino{
  object-fit:contain;
}
.post-purchase-cover-live .p01-live-name{
  position:absolute;
  left:14%;
  right:14%;
  top:15%;
  height:6%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#3c2a12;
  font-size:clamp(24px,3vw,42px);
  font-weight:950;
  line-height:1;
  z-index:5;
}
#configurator{
  padding-top:56px;
  background:#fffdf7;
}
#configurator .compact-edit-head{
  max-width:760px;
  margin-bottom:22px;
}
#configurator .compact-edit-head h2{
  font-size:clamp(1.7rem,3.2vw,2.35rem);
}
#configuratorBody{
  margin-top:18px;
}
.site-footer .footer-note{
  display:none;
}
@media(max-width:900px){
  .post-purchase-ready-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .post-purchase-cover{
    order:-1;
  }
  .post-purchase-cover-live{
    width:min(310px,78vw);
  }
  .post-purchase-ready-copy{
    text-align:center;
  }
  .post-purchase-ready-copy h1,
  .post-purchase-lede{
    margin-left:auto;
    margin-right:auto;
  }
  .post-purchase-actions,
  .post-purchase-reassurance{
    justify-content:center;
  }
}


/* Original MAGICO navigation system */
.magico-nav{
  min-height:92px;
  display:grid;
  grid-template-columns:minmax(260px,360px) 1fr minmax(250px,320px);
  align-items:center;
  gap:22px;
  padding:10px 28px;
  background:linear-gradient(90deg,#052f24,#073a2d 52%,#052f24);
  border-bottom:1px solid rgba(212,170,73,.34);
  box-shadow:0 4px 16px rgba(3,24,18,.16);
  position:relative;
  z-index:100;
}
.magico-nav-logo{
  display:block;
  width:min(100%,330px);
  text-decoration:none;
}
.magico-nav-logo img{
  display:block;
  width:100%;
  height:70px;
  object-fit:contain;
  object-position:left center;
}
.magico-nav-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.magico-nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 22px;
  color:#fff9e8;
  text-decoration:none;
  font-weight:750;
  font-size:1rem;
  border-left:1px solid rgba(236,206,132,.22);
}
.magico-nav-link:first-child{border-left:0}
.magico-nav-link img{
  width:38px;
  height:38px;
  object-fit:contain;
  flex:none;
}
.magico-profile{
  border:0;
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  cursor:pointer;
}
.magico-profile img{
  display:block;
  width:min(100%,280px);
  max-height:70px;
  object-fit:contain;
  object-position:right center;
}
@media(max-width:1080px){
  .magico-nav{
    grid-template-columns:minmax(220px,300px) 1fr auto;
    gap:10px;
    padding-inline:18px;
  }
  .magico-nav-link{
    padding-inline:12px;
  }
  .magico-nav-link span{display:none}
  .magico-profile img{max-width:220px}
}
@media(max-width:760px){
  .magico-nav{
    min-height:72px;
    grid-template-columns:1fr auto;
  }
  .magico-nav-logo{
    width:min(250px,72vw);
  }
  .magico-nav-logo img{height:54px}
  .magico-nav-links{display:none}
  .magico-profile img{
    max-width:62px;
    max-height:54px;
    object-fit:cover;
    object-position:left center;
  }
}


/* Scale MAGICO navigation to match original dashboard proportions */
.magico-nav{
  min-height:132px !important;
  grid-template-columns:minmax(340px,430px) 1fr minmax(320px,400px) !important;
  gap:30px !important;
  padding:16px 40px !important;
}
.magico-nav-logo{
  width:min(100%,410px) !important;
}
.magico-nav-logo img{
  height:98px !important;
}
.magico-nav-links{
  gap:16px !important;
}
.magico-nav-link{
  min-height:82px !important;
  padding:0 24px !important;
  gap:0 !important;
  font-size:1.36rem !important;
  font-weight:800 !important;
}
.magico-nav-link img{
  width:auto !important;
  height:64px !important;
  max-width:190px !important;
}
.magico-profile img{
  width:min(100%,380px) !important;
  max-height:98px !important;
}
@media(max-width:1320px){
  .magico-nav{
    min-height:110px !important;
    grid-template-columns:minmax(280px,340px) 1fr minmax(260px,320px) !important;
    gap:16px !important;
    padding:13px 24px !important;
  }
  .magico-nav-logo{
    width:min(100%,330px) !important;
  }
  .magico-nav-logo img{
    height:80px !important;
  }
  .magico-nav-links{
    gap:8px !important;
  }
  .magico-nav-link{
    min-height:62px !important;
    padding:0 16px !important;
    gap:11px !important;
    font-size:1.08rem !important;
  }
  .magico-nav-link img{
    width:auto !important;
    height:52px !important;
    max-width:160px !important;
  }
  .magico-profile img{
    max-width:300px !important;
    max-height:80px !important;
  }
}
@media(max-width:1080px){
  .magico-nav{
    min-height:96px !important;
    grid-template-columns:minmax(230px,290px) 1fr auto !important;
    gap:10px !important;
    padding-inline:18px !important;
  }
  .magico-nav-logo img{
    height:70px !important;
  }
  .magico-nav-link{
    padding-inline:11px !important;
  }
  .magico-nav-link img{
    width:auto !important;
    height:48px !important;
    max-width:148px !important;
  }
  .magico-profile img{
    max-width:230px !important;
    max-height:70px !important;
  }
}
@media(max-width:900px){
  .magico-nav{
    min-height:84px !important;
    grid-template-columns:1fr auto !important;
  }
  .magico-nav-logo img{
    height:62px !important;
  }
}

/* Live personalised P01 cover reused across hero, editor and review */
.live-config-cover,
.live-review-cover{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.live-config-cover .js-live-p01-cover{
  display:block;
  width:min(170px,100%);
  height:auto;
  aspect-ratio:1023/1537;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 10px 24px rgba(23,50,42,.18);
  background:#ddd;
}
.live-review-cover .js-live-p01-cover{
  display:block;
  width:130px;
  height:auto;
  aspect-ratio:1023/1537;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(23,50,42,.16);
  background:#ddd;
}
@media(max-width:640px){
  .live-review-cover .js-live-p01-cover{width:150px}
}


/* Match the landing-page physical book treatment on the finished-book hero. */
.post-purchase-book3d{
  position:relative;
  width:min(380px,100%);
  aspect-ratio:2/3;
  transform:rotateY(-4deg);
  transform-style:preserve-3d;
  perspective:1400px;
}
.post-purchase-book3d-front{
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  width:100% !important;
  box-shadow:0 24px 58px rgba(23,50,42,.24),7px 8px 0 rgba(239,232,216,.98) !important;
}
.post-purchase-book3d-pages{
  position:absolute;
  top:5px;
  right:-12px;
  bottom:-9px;
  left:8px;
  z-index:2;
  border-radius:6px 10px 10px 6px;
  background:repeating-linear-gradient(180deg,#cdbda3 0 2px,#ad9a7b 2px 3px);
  box-shadow:inset -10px 0 14px rgba(64,43,23,.16),4px 6px 10px rgba(35,24,13,.16);
}
.post-purchase-book3d-pages::before{
  content:"";
  position:absolute;
  left:10px;
  right:5px;
  bottom:-7px;
  height:8px;
  border-radius:0 0 7px 7px;
  background:repeating-linear-gradient(90deg,#c8b79a 0 3px,#a89272 3px 4px);
}
.post-purchase-book3d-back{
  position:absolute;
  top:2px;
  right:-16px;
  bottom:-11px;
  left:-6px;
  z-index:1;
  border-radius:7px 11px 11px 7px;
  background:#5e4027;
}
.post-purchase-book3d-back::before{
  content:"";
  position:absolute;
  top:5px;
  bottom:5px;
  left:-7px;
  width:8px;
  border-radius:7px 0 0 7px;
  background:linear-gradient(90deg,#321f12,#6f4a2c);
}
@media(max-width:900px){
  .post-purchase-book3d{
    width:min(310px,78vw);
    transform:none;
  }
}

/* Master book preview architecture */
.book-preview-shell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.book-preview-shell--cover{
  width:auto;
  height:min(61.5vw,700px,68vh);
  aspect-ratio:2/3;
  perspective:1700px;
}
.book-cover-preview{
  transform-style:preserve-3d;
}
.open-book-preview{
  transform-style:preserve-3d;
}

/* Rendered hardcover master shell with deterministic live cover layers. */
.rendered-book-cover{
  position:relative;
  width:min(560px,49vw);
  aspect-ratio:2/3;
  margin:auto;
  transform:
    perspective(1500px)
    rotateY(-5.5deg)
    rotateX(.75deg)
    rotateZ(-.2deg);
  transform-origin:center center;
  transform-style:preserve-3d;
  filter:drop-shadow(18px 28px 30px rgba(29,13,4,.30));
}
.rendered-book-cover::before{
  content:"";
  position:absolute;
  top:9px;
  right:-18px;
  bottom:-13px;
  left:7px;
  z-index:0;
  border-radius:3px 9px 10px 4px;
  background:
    repeating-linear-gradient(
      0deg,
      #f3ead6 0 2px,
      #e4d3b7 2px 3px,
      #f8f0df 3px 6px
    );
  box-shadow:
    inset -7px 0 10px rgba(83,58,31,.16),
    inset 0 -5px 9px rgba(83,58,31,.12),
    5px 7px 10px rgba(48,27,12,.17);
}
.rendered-book-cover::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:-8px;
  width:10px;
  z-index:2;
  border-radius:5px 0 0 5px;
  background:
    linear-gradient(
      90deg,
      #382411 0%,
      #5e3e20 38%,
      #8a6842 72%,
      rgba(231,215,186,.55) 100%
    );
  box-shadow:
    inset -2px 0 3px rgba(18,10,4,.28),
    1px 0 1px rgba(255,255,255,.12);
}
.rendered-book-shell-image{
  display:none !important;
}
.rendered-book-personalisation{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  background:transparent !important;
  border:1px solid rgba(48,31,15,.42) !important;
  border-radius:3px 6px 6px 3px !important;
  object-fit:fill !important;
  transform:none !important;
  clip-path:none !important;
  box-shadow:
    inset 4px 0 8px rgba(42,22,8,.08),
    inset -1px -2px 3px rgba(0,0,0,.05),
    2px 2px 3px rgba(48,27,12,.12) !important;
  pointer-events:none;
}
.book-reader-page.is-cover{
  width:min(900px,82vw);
  height:min(760px,72vh);
}
@media(max-width:760px){
  .rendered-book-cover{width:min(88vw,590px)}
  .book-reader-page.is-cover{width:94vw;height:67vh}
}

/* Desk-stage finished-book preview: true closed 2:3 cover -> open 4:3 book. */
.book-reader-overlay{
  background:
    radial-gradient(circle at 20% 14%,rgba(255,232,174,.18),transparent 24%),
    linear-gradient(135deg,#6d3f20 0%,#8b552d 38%,#70401f 72%,#583018 100%) !important;
}
.book-reader{background:transparent !important}
.book-reader-stage{position:relative;overflow:hidden}
.book-reader-stage::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(42,20,7,.055) 0 2px,transparent 2px 10px),
    radial-gradient(ellipse at center,rgba(255,236,194,.08),transparent 58%);
  mix-blend-mode:soft-light;
}
.book-reader-canvas-wrap{perspective:1800px;z-index:1}
.book-reader-page{
  position:relative;
  width:min(1180px,88vw);
  height:min(760px,72vh);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.book-reader-page::before{
  content:"";
  position:absolute;
  left:50%;bottom:2.5%;
  width:64%;height:9%;
  transform:translateX(-50%);
  background:rgba(28,12,4,.34);
  filter:blur(30px);
  border-radius:50%;
  z-index:-1;
}
.reader-book-3d{
  height:min(61.5vw,700px,68vh);
  aspect-ratio:2/3;
  perspective:1700px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.reader-book-object{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transform:rotateY(-3.2deg) rotateX(.8deg) rotateZ(-.15deg);
  transform-origin:center center;
  transition:transform .35s ease;
}
.reader-book-3d:hover .reader-book-object{
  transform:rotateY(-1.8deg) rotateX(.5deg) rotateZ(0deg);
}
.reader-book-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
}
.reader-book-front{
  z-index:10;
  transform:translateZ(8px);
  border:7px solid #efe6d4;
  border-radius:4px 8px 8px 4px;
  overflow:hidden;
  background:#efe6d4;
  box-shadow:
    inset 4px 0 7px rgba(27,15,7,.10),
    inset -1px -2px 4px rgba(0,0,0,.04);
}
.reader-book-front::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.03) 0%,
    rgba(255,255,255,.08) 10%,
    rgba(255,255,255,0) 24%,
    rgba(0,0,0,.025) 100%
  );
}
.reader-book-front canvas{
  display:block;
  width:100%;
  height:100%;
}
.reader-book-spine{
  z-index:4;
  left:-13px;
  right:auto;
  width:14px;
  height:100%;
  transform:rotateY(-90deg) translateZ(8px);
  transform-origin:right center;
  overflow:hidden;
  border-radius:5px 0 0 5px;
  box-shadow:
    inset -2px 0 3px rgba(0,0,0,.18),
    inset 1px 0 2px rgba(255,255,255,.10);
}
.reader-book-spine canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.reader-book-spine span{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;
  color:rgba(255,255,255,.78);
  font:800 7px/1 Arial,sans-serif;
  letter-spacing:.12em;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  white-space:nowrap;
}
.reader-book-pages{
  z-index:2;
  top:8px;
  bottom:9px;
  left:8px;
  right:-8px;
  width:auto;
  height:auto;
  transform:translateZ(1px);
  border-radius:0 7px 7px 0;
  background:
    repeating-linear-gradient(
      0deg,
      #fffaf0 0 2px,
      #e7dcc8 2px 3px
    );
  box-shadow:
    2px 0 3px rgba(34,19,8,.16),
    inset -1px 0 2px rgba(0,0,0,.05);
}
.reader-book-endpaper{
  z-index:3;
  opacity:0;
  pointer-events:none;
  top:8px;
  right:8px;
  bottom:10px;
  left:8px;
  width:auto;
  height:auto;
  transform:translateZ(10px);
  border-radius:5px 10px 10px 5px;
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 20%,rgba(138,108,63,.06),transparent 22%),
    radial-gradient(circle at 76% 72%,rgba(138,108,63,.045),transparent 24%),
    linear-gradient(180deg,#f5ecd9 0%,#efe2c9 100%);
  box-shadow:
    inset 0 0 0 1px rgba(86,58,29,.08),
    inset 8px 0 12px rgba(67,43,20,.08);
}
.reader-book-endpaper::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background:
    repeating-radial-gradient(
      circle at 30% 35%,
      rgba(102,77,42,.20) 0 1px,
      transparent 1px 18px
    );
}
.reader-book-3d.is-closed .reader-book-endpaper{
  opacity:0;
}
.reader-book-endpaper-mark{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-8deg);
  color:rgba(79,57,31,.20);
  font:900 22px/1 Arial,sans-serif;
  letter-spacing:.10em;
  white-space:nowrap;
  border:2px solid rgba(79,57,31,.16);
  border-radius:999px;
  padding:10px 16px;
}
.reader-book-back{
  z-index:1;
  transform:translateZ(-5px);
  border-radius:6px 9px 9px 6px;
  background:#d5c7ad;
  box-shadow:0 3px 4px rgba(0,0,0,.14);
}
.reader-book-shadow{
  position:absolute;
  z-index:-1;
  width:104%;
  height:103%;
  left:2.5%;
  top:3.5%;
  background:rgba(0,0,0,.24);
  border-radius:12px;
  filter:blur(16px);
  transform:translateZ(-18px);
  pointer-events:none;
}
.reader-book-open{
  position:relative;
  width:min(1040px,82vw);
  aspect-ratio:4/3;
  padding:10px 12px 12px;
  background:#e9ddc6;
  border-radius:12px 12px 16px 16px;
  box-shadow:
    -7px 7px 0 #c7b696,
    7px 7px 0 #c7b696,
    0 31px 54px rgba(30,13,3,.40);
  transform:rotateX(2deg) rotateZ(-.25deg);
  transform-origin:center bottom;
}
.reader-book-open::before,
.reader-book-open::after{
  content:"";
  position:absolute;
  top:12px;bottom:12px;
  width:7px;
  z-index:2;
  pointer-events:none;
}
.reader-book-open::before{
  left:-6px;
  border-radius:5px 0 0 5px;
  background:repeating-linear-gradient(to bottom,#e8dcc5 0 2px,#cdbb9c 2px 3px);
}
.reader-book-open::after{
  right:-6px;
  border-radius:0 5px 5px 0;
  background:repeating-linear-gradient(to bottom,#e8dcc5 0 2px,#cdbb9c 2px 3px);
}
.reader-book-paper{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:5px 5px 8px 8px;
  background:#f5eddd;
  box-shadow:inset 0 0 0 1px rgba(64,42,22,.10);
}
.reader-book-paper::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:44px;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(37,21,9,0),
    rgba(37,21,9,.18) 42%,
    rgba(255,255,255,.10) 50%,
    rgba(37,21,9,.14) 58%,
    rgba(37,21,9,0)
  );
  mix-blend-mode:multiply;
}
.reader-book-paper canvas{
  display:block;
  width:100%;
  height:100%;
  border-radius:4px;
}
.book-reader-page.is-opening .reader-book-open{
  animation:magicoBookOpen .72s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes magicoBookOpen{
  0%{
    opacity:.15;
    transform:scaleX(.52) rotateY(-54deg) rotateX(5deg);
    filter:brightness(.76);
  }
  58%{opacity:1}
  100%{
    opacity:1;
    transform:scaleX(1) rotateY(0) rotateX(2deg) rotateZ(-.25deg);
    filter:brightness(1);
  }
}
.book-reader-header,
.book-reader-footer,
.book-reader-thumbs{
  background:rgba(19,24,20,.90) !important;
  backdrop-filter:blur(8px);
}
.book-reader-thumb canvas{
  aspect-ratio:4/3 !important;
  object-fit:cover !important;
}
@media(max-width:760px){
  .book-reader-page{width:94vw;height:67vh}
  .reader-book-3d{height:min(64.5vw,540px,59vh)}
  .reader-book-open{width:86vw}
}


/* ===== Static desktop customer reader =====
   The supplied desktop/book image is the fixed scene. The live spread is
   projectively warped into the two measured page planes; only that canvas changes. */
.book-reader-overlay{
  background:#6b3f22 !important;
}
.book-reader{
  position:relative;
  grid-template-rows:minmax(0,1fr) auto auto !important;
  background:#6b3f22 !important;
}
.book-reader-header{
  position:absolute !important;
  top:12px;
  right:14px;
  left:auto !important;
  width:auto;
  z-index:30;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
.book-reader-heading{display:none !important}
.book-reader-header-actions{
  padding:6px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(24,20,14,.55);
  backdrop-filter:blur(10px);
}
.book-reader-stage{
  grid-row:1;
  min-height:0;
  grid-template-columns:58px minmax(0,1fr) 58px !important;
  gap:8px !important;
  padding:0 12px !important;
}
.book-reader-canvas-wrap{
  height:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.book-reader-page.is-desktop-spread{
  width:100% !important;
  height:100% !important;
  min-width:0;
}
.desktop-reader-scene{
  position:relative;
  width:min(
    calc(100vw - 156px),
    calc((100vh - 78px) * 1.745),
    1657px
  );
  max-width:100%;
  aspect-ratio:1657/949;
  flex:0 0 auto;
  background:
    url("https://pub-0e531375d086473498a2e22c1b2ce6b8.r2.dev/dino-superfan-v1/reader/desktop-stage-upright-bedroom-v1.png")
    center/100% 100% no-repeat;
  isolation:isolate;
}
.desktop-reader-page-canvas{
  position:absolute !important;
  inset:0 !important;
  z-index:4;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:fill !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  transition:opacity .12s ease;
  pointer-events:none;
}
.desktop-reader-page-canvas.is-updating{opacity:.92}
.book-reader-page.is-desktop-spread > canvas:not(.desktop-reader-page-canvas),
.book-reader-page.is-desktop-spread > .reader-book-open{
  display:none !important;
}
.book-reader-loading{
  z-index:20;
  background:rgba(31,22,13,.72) !important;
}
.book-reader-nav{
  position:relative;
  z-index:20;
  width:46px !important;
  height:46px !important;
  border-color:rgba(255,255,255,.32) !important;
  background:rgba(31,22,13,.58) !important;
  backdrop-filter:blur(7px);
}
.book-reader-footer{
  position:relative;
  z-index:25;
  margin:-58px auto 12px;
  width:min(640px,72vw);
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px;
  background:rgba(28,20,13,.72) !important;
  backdrop-filter:blur(9px);
}
.book-reader-thumbs{
  position:relative;
  z-index:25;
  background:rgba(22,18,13,.92) !important;
}
@media(max-width:760px){
  .book-reader-header{top:8px;right:8px}
  .book-reader-stage{
    grid-template-columns:40px minmax(0,1fr) 40px !important;
    padding:0 4px !important;
  }
  .desktop-reader-scene{
    width:min(100%,calc((100vh - 72px) * 1.745));
    max-width:100%;
  }
  .book-reader-footer{
    width:88vw;
    margin:-46px auto 8px;
  }
}