/* ════════════════════════════════════════════════════════════════════
   MagicBooks · Coloring books guest page
   extends styles.css tokens — page-local components only
   ════════════════════════════════════════════════════════════════════ */

/* nav current state + burger threshold for this page's longer button */
.nav__links .is-current{color:var(--purple-deep);font-weight:700}
.nav__links .is-current::after{content:"";display:block;width:16px;height:2px;background:var(--purple);border-radius:2px;margin:3px auto 0}

/* ── marker highlight: one word per heading ── */
.mk{position:relative;white-space:nowrap}
.mk::before{
  content:"";position:absolute;z-index:-1;
  left:-.16em;right:-.16em;top:.16em;bottom:.02em;
  background:var(--mk,rgba(239,159,39,.42));
  border-radius:60% 40% 55% 45% / 70% 60% 45% 55%;
  transform:rotate(-1.1deg) skewX(-6deg);
}
.mk--gold{--mk:rgba(239,159,39,.44)}
.mk--rose{--mk:rgba(217,120,155,.40)}
.mk--violet{--mk:rgba(127,119,221,.34)}

/* ── layout scaffolding ── */
.wrap{max-width:var(--page);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.wrap--narrow{max-width:900px}
.band{width:100vw;margin-left:calc(50% - 50vw);padding:clamp(56px,7vw,92px) 0}
.band--gold{background:linear-gradient(180deg,#fdf0d4 0%,#fbe6c4 100%)}
.band--rose{background:linear-gradient(180deg,#fce6ee 0%,#fbdfe8 100%)}
.band--lav{background:linear-gradient(180deg,#eeecfb 0%,#e6e3f8 100%)}
.band--dark{background:linear-gradient(180deg,#211f2e 0%,#17161f 100%);color:#f3efe6}
.sect{padding-block:clamp(56px,7vw,92px)}
.sect--tight{padding-block:clamp(38px,4.6vw,60px)}

.h2{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(32px,4.4vw,54px);line-height:1.04;letter-spacing:-.015em;
  color:var(--ink);text-wrap:balance;
}
.band--dark .h2{color:#fdf6ec}
.lede{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;color:var(--ink-soft);max-width:56ch;text-wrap:pretty}
.band--dark .lede{color:rgba(243,239,230,.82)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow{margin-inline:auto;display:inline-flex}

/* ── placeholder frames (line art the client drops in) ── */
.ph{
  position:relative;background:
    repeating-linear-gradient(135deg,rgba(44,44,42,.045) 0 6px,transparent 6px 13px),
    var(--paper);
  border:1px solid var(--border);border-radius:12px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;
}
.ph span{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10.5px;letter-spacing:.06em;color:var(--ink-dim);line-height:1.4}

/* ════════════════ HERO ════════════════ */
.chero{padding-block:clamp(34px,5vw,64px) clamp(30px,4vw,48px)}
.chero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.4vw,64px);align-items:center}
.chero h1{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(40px,5.6vw,74px);line-height:1;letter-spacing:-.022em;
  color:var(--ink);margin:16px 0 18px;text-wrap:balance;
}
.chero__sub{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink-soft);max-width:46ch;margin-bottom:26px;text-wrap:pretty}
.chero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* ════════════════ FLIPBOOK ════════════════ */
.flip{display:flex;flex-direction:column;align-items:center;gap:14px}
.flip__badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--purple-deep);background:rgba(127,119,221,.11);
  border:1px solid rgba(127,119,221,.26);border-radius:999px;padding:7px 15px;
}
.flip__book{
  position:relative;width:100%;max-width:560px;aspect-ratio:1.42/1;
  perspective:1900px;
}
.flip__half{
  position:absolute;top:0;bottom:0;width:50%;
  background:linear-gradient(180deg,#fffdf8,#f8f2e6);
  border:1px solid var(--border);
  box-shadow:var(--shadow-paper);
  overflow:hidden;
}
.flip__half--l{left:0;border-radius:10px 3px 3px 10px;box-shadow:var(--shadow-paper),inset -16px 0 26px -18px rgba(44,44,42,.36)}
.flip__half--r{right:0;border-radius:3px 10px 10px 3px;box-shadow:var(--shadow-paper),inset 16px 0 26px -18px rgba(44,44,42,.36)}
.flip__leaf{
  position:absolute;top:0;right:0;width:50%;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform .78s cubic-bezier(.42,.02,.28,1);
}
.flip__leaf.is-flipped{transform:rotateY(-180deg)}
.flip__face{
  position:absolute;inset:0;backface-visibility:hidden;
  background:linear-gradient(180deg,#fffdf8,#f8f2e6);
  border:1px solid var(--border);overflow:hidden;
}
.flip__face--front{border-radius:3px 10px 10px 3px;box-shadow:inset 16px 0 26px -18px rgba(44,44,42,.34)}
.flip__face--back{transform:rotateY(180deg);border-radius:10px 3px 3px 10px;box-shadow:inset -16px 0 26px -18px rgba(44,44,42,.34)}
.flip__face image-slot,.flip__half image-slot{width:100%;height:100%;display:block}
.flip__spine{
  position:absolute;top:2%;bottom:2%;left:50%;width:16px;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(44,44,42,.16),rgba(44,44,42,.05) 42%,rgba(44,44,42,.05) 58%,rgba(44,44,42,.16));
  pointer-events:none;z-index:30;border-radius:3px;
}
.flip__bar{display:flex;align-items:center;gap:16px}
.flip__nav{
  width:42px;height:42px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--border);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s,transform .2s,box-shadow .2s;
}
.flip__nav:hover:not(:disabled){border-color:var(--purple);color:var(--purple-deep);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.flip__nav:disabled{opacity:.34}
.flip__count{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);min-width:110px;text-align:center}

/* ════════════════ FACT BAND ════════════════ */
.factband{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,5vw,64px);align-items:center}
.fact-hero{text-align:center}
.fact-hero__n{display:block;font-family:var(--display);font-size:clamp(104px,15vw,196px);line-height:.8;letter-spacing:-.05em;color:var(--rose)}
.fact-hero__t{display:block;font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(22px,2.7vw,33px);color:var(--ink);margin-top:4px}
.fact-rest{display:flex;flex-direction:column}
.fact{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px dashed rgba(44,44,42,.17)}
.fact:last-child{border-bottom:none}
/* The unit sits next to the numeral, so the column is as wide as "$5.99 once". */
.fact__n{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1;color:var(--gold-deep);min-width:150px;flex-shrink:0}
.fact__n small{font-size:.46em;font-family:var(--sans);font-weight:700;letter-spacing:.04em;color:var(--ink-mute)}
.fact__t{font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--ink-soft)}
.fact-note{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.58;color:var(--ink-mute);max-width:66ch;margin-top:24px;text-wrap:pretty}

/* ════════════════ SHELF ════════════════ */
.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px}
.pill{
  font-family:var(--sans);font-weight:700;font-size:13px;
  padding:9px 17px;border-radius:999px;border:1.5px solid var(--border);
  background:var(--paper);color:var(--ink-soft);transition:all .2s;
}
.pill:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-soft)}
.pill.is-on{background:linear-gradient(135deg,#fac775,#ef9f27);border-color:transparent;color:#3a2a08;box-shadow:var(--shadow-gold)}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sbook{
  background:var(--paper);border:1px solid var(--border);border-radius:18px;
  padding:12px;box-shadow:var(--shadow-paper);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .3s;
  text-decoration:none;display:block;
}
.sbook:nth-child(3n+1){transform:rotate(-.7deg)}
.sbook:nth-child(3n+3){transform:rotate(.7deg)}
.sbook:hover{transform:translateY(-6px) rotate(0) !important;border-color:var(--purple-soft);box-shadow:var(--shadow-lg)}
.sbook__pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sbook__cover,.sbook__page{aspect-ratio:3/4;border-radius:10px;overflow:hidden}
.sbook__cover image-slot{width:100%;height:100%;display:block}
.sbook__meta{padding:12px 6px 4px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sbook__meta h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:18px;line-height:1.15;color:var(--ink)}
.sbook__price{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--gold-deep);white-space:nowrap}
.sbook__tag{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dim);padding:0 6px 8px}

/* ════════════════ BRAND CHIPS ════════════════ */
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:13px;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--border);border-radius:999px;padding:9px 17px;
}
.chip__m{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:13px;color:#fff}
.chip__m--kdp{background:linear-gradient(135deg,#3d4a5c,#1e2733)}
.chip__m--etsy{background:linear-gradient(135deg,#f5772f,#d9530f)}

/* ════════════════ OFFER CARD ════════════════ */
.offer{
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(26px,4vw,54px);align-items:center;
  background:linear-gradient(150deg,#fdf0d4 0%,#fce6ee 100%);
  border:1px solid rgba(239,159,39,.3);border-radius:28px;
  padding:clamp(28px,4vw,52px);position:relative;overflow:hidden;
  box-shadow:var(--shadow-md);
}
.offer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12,0 L13,10 L23,12 L13,14 L12,24 L11,14 L1,12 L11,10 Z' fill='%23ef9f27' opacity='0.07'/></svg>") repeat;
  background-size:72px 72px;
}
.offer>*{position:relative}
.offer__list{list-style:none;margin:18px 0 24px;display:flex;flex-direction:column;gap:1px}
.offer__list li{
  font-family:var(--serif);font-size:16.5px;line-height:1.45;color:var(--ink-soft);
  padding:9px 0 9px 26px;position:relative;border-bottom:1px solid rgba(44,44,42,.08);
}
.offer__list li:last-child{border-bottom:none}
.offer__list li::before{content:"✦";position:absolute;left:0;top:9px;color:var(--gold);font-family:var(--sans)}
.offer__art{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg);background:var(--paper)}
.offer__art image-slot{width:100%;height:100%;display:block}
.offer__sticker{
  position:absolute;top:-14px;right:-10px;z-index:5;
  transform:rotate(7deg);
  font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#e290b0,#cf5f8a);
  padding:10px 15px;border-radius:12px;text-align:center;line-height:1.35;max-width:170px;
  box-shadow:0 10px 22px -8px rgba(207,95,138,.6);
}

/* ════════════════ MOVING STRIP ════════════════ */
.reel{position:relative;overflow:hidden;padding:8px 0}
.reel::before,.reel::after{content:"";position:absolute;top:0;bottom:0;width:14vw;z-index:3;pointer-events:none}
.reel::before{left:0;background:linear-gradient(90deg,var(--bg),rgba(253,246,236,0))}
.reel::after{right:0;background:linear-gradient(270deg,var(--bg),rgba(253,246,236,0))}
.reel__track{display:flex;gap:14px;width:max-content;animation:reelSlide 68s linear infinite}
.reel:hover .reel__track{animation-play-state:paused}
@keyframes reelSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reel__pg{width:132px;aspect-ratio:3/4;flex-shrink:0;box-shadow:var(--shadow-sm)}

/* ════════════════ STEPS ════════════════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;background:var(--paper);border:1px solid var(--border);border-radius:20px;padding:12px 12px 24px;box-shadow:var(--shadow-paper)}
.step__art{aspect-ratio:4/3;border-radius:14px;overflow:hidden;margin-bottom:20px;background:var(--paper-cream)}
.step__art image-slot{width:100%;height:100%;display:block}
.step__n{
  position:absolute;top:-14px;left:-12px;z-index:4;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#fac775,#ef9f27);color:#3a2a08;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:21px;
  box-shadow:0 8px 18px -6px rgba(239,159,39,.65);
}
.step__b{padding:0 12px}
.step__b h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:22px;line-height:1.12;color:var(--ink);margin-bottom:8px}
.step__b p{font-family:var(--serif);font-size:16px;line-height:1.45;color:var(--ink-soft);text-wrap:pretty}
.step__t{display:block;margin-top:14px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}

/* ════════════════ MADE ONCE, SOLD FOREVER ════════════════ */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.rung{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:24px 24px 22px;box-shadow:var(--shadow-sm)}
.rung__n{font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.rung h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:21px;line-height:1.16;color:var(--ink);margin:10px 0 8px;text-wrap:balance}
.rung p{font-family:var(--serif);font-size:16px;line-height:1.45;color:var(--ink-soft);text-wrap:pretty}
.rung--paid{border-color:rgba(239,159,39,.5);background:linear-gradient(170deg,#fffdf8,#fdf0d4)}
.rung--free{border-color:rgba(127,119,221,.42);background:linear-gradient(170deg,#fffdf8,#eeecfb)}
.routes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.route{display:flex;align-items:flex-start;gap:14px;background:var(--paper);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.route .chip__m{width:30px;height:30px;border-radius:8px;font-size:16px;flex-shrink:0;margin-top:2px}
.route h4{font-family:var(--serif);font-style:italic;font-weight:600;font-size:19px;color:var(--ink);margin-bottom:4px}
.route p{font-family:var(--serif);font-size:15.5px;line-height:1.45;color:var(--ink-soft);text-wrap:pretty}
.smallprint{font-family:var(--sans);font-size:12.5px;line-height:1.75;color:var(--ink-dim);max-width:80ch;margin:26px auto 0;text-align:center;text-wrap:pretty}
.smallprint b{color:var(--ink-mute);font-weight:700}
.money__close{text-align:center;margin-top:36px;padding-top:32px;border-top:1px solid rgba(44,44,42,.15)}
.money__close h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(26px,3.3vw,40px);line-height:1.14;color:var(--ink);margin-bottom:18px;text-wrap:balance}

/* ════════════════ WHAT IS COMING ════════════════ */
.coming{list-style:none;display:flex;flex-direction:column;margin-top:20px}
.coming li{display:flex;gap:16px;padding:18px 0;border-bottom:1px dashed rgba(44,44,42,.17)}
.coming li:last-child{border-bottom:none}
.coming__n{font-family:var(--display);font-size:21px;line-height:1.15;color:var(--purple-deep);flex-shrink:0;min-width:34px}
.coming h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:20px;line-height:1.2;color:var(--ink);margin-bottom:6px}
.coming p{font-family:var(--serif);font-size:16px;line-height:1.45;color:var(--ink-soft);text-wrap:pretty}

/* ════════════════ STRAIGHT TALK (dark) ════════════════ */
.talk{max-width:760px;margin:0 auto}
.talk h2{margin-bottom:22px}
.talk p{font-family:var(--serif);font-size:18px;line-height:1.62;color:rgba(243,239,230,.8);margin-bottom:16px;text-wrap:pretty}
.talk__end{
  font-family:var(--serif);font-style:italic;font-weight:600;font-size:22px;line-height:1.4;
  color:#fac775;margin-top:26px;padding-top:22px;border-top:1px solid rgba(243,239,230,.16);
}

/* ════════════════ VOLUME ════════════════ */
.vol__photo{
  max-width:960px;margin:0 auto 34px;aspect-ratio:21/9;
  border-radius:20px;overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow-lg);background:var(--paper);
}
.vol__photo image-slot{width:100%;height:100%;display:block}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{position:relative;background:var(--paper);border:1.5px solid var(--border);border-radius:22px;padding:30px 26px 26px;text-align:center;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.tier--hot{border-color:rgba(239,159,39,.5);box-shadow:0 0 0 4px rgba(239,159,39,.09),var(--shadow-md);transform:translateY(-8px)}
.tier__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:7px 15px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(135deg,#fac775,#ef9f27);color:#3a2a08;
  box-shadow:0 6px 14px -4px rgba(239,159,39,.6);
}
.tier__q{font-family:var(--serif);font-style:italic;font-weight:600;font-size:21px;color:var(--ink-soft);margin-bottom:6px}
.tier__p{font-family:var(--display);font-size:44px;line-height:1;color:var(--ink)}
.tier__per{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-mute);margin-top:8px}
.tier__save{
  display:inline-block;margin:14px auto 0;
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#2f6b4a;background:rgba(74,158,110,.13);border:1px solid rgba(74,158,110,.3);
  border-radius:999px;padding:6px 13px;
}
.tier .btn{margin-top:22px;width:100%}

/* ════════════════ COURSE ════════════════ */
.course{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,56px);align-items:center}
.course__form{background:var(--paper);border:1px solid var(--border);border-radius:20px;padding:26px;box-shadow:var(--shadow-md)}
.course__form label{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:9px}
.course__form input[type=email]{
  width:100%;font-family:var(--serif);font-size:18px;color:var(--ink);
  background:var(--paper-cream);border:1.5px solid var(--border);border-radius:12px;
  padding:13px 16px;outline:none;transition:border-color .2s;
}
.course__form input[type=email]:focus{border-color:var(--purple)}
.course__form .btn{width:100%;margin-top:14px}
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:16px}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--purple-deep);flex-shrink:0}
.consent span{font-family:var(--serif);font-size:14.5px;line-height:1.45;color:var(--ink-mute)}

/* ════════════════ OBJECTIONS ════════════════ */
.qs{max-width:860px;margin:0 auto}
.q{padding:26px 0;border-bottom:1px solid var(--border)}
.q:first-child{border-top:1px solid var(--border)}
.q h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:23px;line-height:1.2;color:var(--ink);margin-bottom:9px;text-wrap:balance}
.q p{font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}

/* ════════════════ LAST CALL ════════════════ */
.last{
  text-align:center;border-radius:30px;
  padding:clamp(42px,6vw,76px) clamp(24px,4vw,56px);
  background:
    radial-gradient(80% 100% at 20% 0%,rgba(127,119,221,.2) 0%,transparent 62%),
    radial-gradient(70% 100% at 88% 100%,rgba(239,159,39,.2) 0%,transparent 60%),
    linear-gradient(160deg,#fffdf8 0%,#fce6ee 100%);
  border:1px solid var(--border);box-shadow:var(--shadow-md);
}
.last .lede{margin:14px auto 26px}

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 1000px){
  .chero__grid{grid-template-columns:1fr;gap:34px}
  .chero__art{max-width:560px;width:100%;margin-inline:auto}
  .offer{grid-template-columns:1fr}
  .offer__art{max-width:420px;margin-inline:auto}
  .course{grid-template-columns:1fr}
  .shelf{grid-template-columns:1fr 1fr}
}
@media (max-width: 960px){
  /* burger takes over early — 5 nav items + the long button need ~951px */
  .nav{gap:6px;position:relative}
  .nav .brand{margin-right:auto}
  .nav__burger{
    display:flex !important;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:11px;flex-shrink:0;
    background:transparent;border:none;border-radius:10px;-webkit-tap-highlight-color:transparent;
  }
  .nav__burger span{display:block;width:100%;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
  .nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger.is-open span:nth-child(2){opacity:0}
  .nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav__links{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:calc(100% - 4px);left:12px;right:12px;
    background:var(--paper);border:1px solid var(--border);border-radius:16px;
    padding:10px;box-shadow:var(--shadow-lg);z-index:60;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s,transform .2s,visibility .2s;
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav__links a{padding:14px 16px;border-radius:10px;font-size:16px}
  .nav__links .is-current::after{margin:3px 0 0}
  .nav .btn--gold{font-size:13px;padding:11px 15px}
  .factband{grid-template-columns:1fr;gap:20px}
  .fact-hero{text-align:left;display:flex;align-items:baseline;gap:14px}
  .fact-hero__n{font-size:clamp(72px,17vw,112px)}
  .fact-note{margin-top:20px}
}
@media (max-width: 760px){
  .fact__n{min-width:120px}
  .ladder{grid-template-columns:1fr}
  .routes{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .tier--hot{transform:none;order:-1}
  .reel::before,.reel::after{width:18vw}
}
@media (max-width: 560px){
  .shelf{grid-template-columns:1fr}
  .fact{flex-direction:column;gap:2px}
  .fact__n{min-width:0}
  .flip__count{min-width:0;font-size:11px}
  .offer__sticker{position:static;transform:rotate(-1.4deg);margin:0 0 16px;max-width:none;display:inline-block}
  .reel__pg{width:104px}
}
@media (max-width: 390px){
  .chero h1{font-size:36px}
  .h2{font-size:29px}
  .flip__bar{gap:9px}
}

/* The reel now carries real pages rather than captioned boxes. */
.reel__pg img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* Slots carry an <img> now (placeholder SVG or a real page); it fills its box. */
.flip__half > img, .flip__face > img, .sbook__cover > img, .sbook__page > img,
.offer__art > img, .step__art > img, .vol__photo > img, .reel__pg > img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit
}
.flip__half > picture, .flip__face > picture{display:block;width:100%;height:100%}
.flip__half > picture img, .flip__face > picture img{width:100%;height:100%;object-fit:cover;display:block}

/* Every slot carries an <img> — the placeholder SVG now, real artwork later. */
.flip__half > img, .flip__face > img, .sbook__cover > img, .sbook__page > img,
.offer__art > img, .step__art > img, .vol__photo > img, .reel__pg > img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit
}