:root{
  /* Muscle Math Mania palette — sampled from the printed Book 1 cover. Locked. */
  --navy:#0E1B3D; --navy-fur:#53668C;
  --red:#E21F29; --red-dark:#B7161F; --red-lite:#FF5C62;
  --gold:#FFCB15; --gold-dark:#E0AC00;
  /* dark theme surfaces */
  --bg:#071026; --bg-1:#0A1533; --bg-2:#0D1B3F; --band:#0E1B3D;
  --surface:#14224A; --surface-2:#1B2C5C;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20);
  --text:#EAF0FA; --text-soft:#B4C3DD; --text-mute:#93A5C4;
  --r-sm:10px; --r:16px; --r-lg:26px;
  --shadow:0 4px 16px rgba(0,0,0,.34);
  --shadow-lg:0 24px 54px -18px rgba(0,0,0,.72);
  --sp:clamp(58px,7vw,108px);
  --head:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --body:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--head);line-height:1.08;margin:0;letter-spacing:-.01em;color:#fff}
h1{font-size:clamp(2.5rem,6vw,4.35rem);font-weight:800}
h2{font-size:clamp(1.95rem,3.9vw,3rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin-inline:auto;position:relative;z-index:2}
.sec{padding:var(--sp) 0;position:relative;z-index:1;overflow:hidden}
.eyebrow{font-family:var(--head);font-weight:700;font-size:.83rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
.lede{font-size:clamp(1.06rem,1.7vw,1.24rem);color:var(--text-soft);max-width:62ch}
.center{text-align:center;margin-inline:auto}
.center .lede{margin-inline:auto}
/* graph-paper motif, echoing the workbook covers */
.graph{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:28px 28px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--head);font-weight:700;font-size:1.02rem;text-decoration:none;
  padding:15px 30px;border-radius:var(--r-sm);border:3px solid transparent;cursor:pointer;
  min-height:52px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  position:relative}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 5px 0 var(--red-dark)}
.btn-primary:hover{background:var(--red-dark);transform:translateY(2px);box-shadow:0 3px 0 var(--red-dark)}
.btn-gold{background:var(--gold);color:#071026;box-shadow:0 5px 0 var(--gold-dark)}
.btn-gold:hover{background:var(--gold-dark);transform:translateY(2px);box-shadow:0 3px 0 var(--gold-dark)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-sm{padding:11px 20px;font-size:.93rem;min-height:44px}
    /* buy stack — paperback first, digital second */
    .buys{margin-top:auto;padding-top:1.1rem;display:grid;gap:.6rem}
    .book .buys .btn{width:100%;margin-top:0}
    .btn-buy{padding:13px 18px;justify-content:flex-start;text-align:left;font-size:.99rem}
    .btn-buy svg{flex:0 0 auto}
    .btn-buy .btn-sub{display:block;font-family:var(--body);font-weight:600;
      font-size:.78rem;letter-spacing:0;opacity:.88;margin-top:1px}
    .btn-outline{background:transparent;color:var(--gold);
      border-color:rgba(255,203,21,.55);box-shadow:none}
    .btn-outline:hover{background:var(--gold);color:#071026;
      border-color:var(--gold);transform:translateY(2px);box-shadow:none}
    /* form feedback */
    .form-msg{margin:.9rem 0 0;font-size:.94rem;line-height:1.5;display:none}
    .form-msg.show{display:block}
    .form-msg.err{color:#FFB3B8}
    .form-msg.ok{color:#9BE8B4}
    .form button[disabled]{opacity:.6;cursor:progress}


/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(7,16,38,.90);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease}
header.scrolled{box-shadow:0 8px 28px -12px rgba(0,0,0,.8)}
.nav{display:flex;align-items:center;gap:1.6rem;padding:.55rem 0;justify-content:space-between}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{height:52px;width:auto}
.navlinks{display:flex;gap:1.7rem;margin-left:auto;align-items:center}
.navlinks a{font-family:var(--head);font-weight:700;font-size:.97rem;text-decoration:none;
  color:var(--text-soft);padding:.35rem 0;border-bottom:3px solid transparent;
  transition:border-color .18s,color .18s}
.navlinks a:hover,.navlinks a:focus-visible{border-bottom-color:var(--red);color:#fff}
@media(max-width:880px){.navlinks{display:none}.brand img{height:44px}}

/* ---------- hero ---------- */
.hero{background:var(--bg);position:relative;overflow:hidden;padding:clamp(46px,6vw,84px) 0 0}
.hero-in{display:grid;grid-template-columns:1.06fr .94fr;gap:2.6rem;align-items:center;
  position:relative;z-index:2}
.hero h1 .hl{color:var(--gold);display:inline-block}
.hero .lede{margin:1.35rem 0 2rem;font-size:clamp(1.08rem,1.75vw,1.28rem)}
.hero-cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:2rem}
.hero-art{position:relative}
.hero-art img{width:100%;filter:drop-shadow(0 26px 40px rgba(0,0,0,.62))}
.rule{display:flex;flex-wrap:wrap;gap:.5rem 1.7rem;padding:1.05rem 0 1.4rem;
  border-top:1px solid var(--line);position:relative;z-index:2;margin-top:1.2rem}
.rule span{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:var(--text-soft)}
.rule svg{flex-shrink:0;color:var(--gold)}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:1.2rem}
  .hero-art{max-width:460px;margin-inline:auto;order:-1}
}

/* ---------- blocks ---------- */
.grid{display:grid;gap:1.4rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:920px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:640px){.g4,.g2{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;
  box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--text-soft);font-size:.97rem;margin:0}
.ico{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:1.05rem;
  background:rgba(255,203,21,.14);color:var(--gold);border:1px solid rgba(255,203,21,.28)}
.ico.red{background:rgba(226,31,41,.16);color:var(--red-lite);border-color:rgba(226,31,41,.34)}
.ico.gold{background:var(--gold);color:#071026;border-color:var(--gold)}

.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.step .num{font-family:var(--head);font-weight:800;font-size:2.5rem;color:var(--gold);
  line-height:1;margin-bottom:.45rem;opacity:.95}
.step h3{margin-bottom:.4rem}
.step p{color:var(--text-soft);font-size:.95rem;margin:0}

/* books */
.book{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.book-top{background:linear-gradient(180deg,var(--band),#0A1533);padding:2rem 1.5rem 0;
  display:grid;place-items:center;perspective:900px}
.book-top img{width:min(215px,72%);border-radius:5px;box-shadow:0 22px 40px -12px rgba(0,0,0,.8)}
.book-body{padding:1.6rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.tag{display:inline-block;background:var(--gold);color:#071026;font-family:var(--head);
  font-weight:700;font-size:.78rem;letter-spacing:.05em;padding:5px 12px;border-radius:99px;
  margin-bottom:.8rem;align-self:flex-start}
.book ul{list-style:none;padding:0;margin:.9rem 0 1.4rem;display:grid;gap:.5rem}
.book li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;color:var(--text-soft)}
.book li svg{flex-shrink:0;color:var(--gold);margin-top:3px}
.book .btn{width:100%;margin-top:auto}
.soon{border:2px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03);box-shadow:none;
  align-items:center;justify-content:center;text-align:center;padding:2.4rem 1.5rem;gap:.6rem}
.soon p{color:var(--text-mute);font-size:.95rem;max-width:26ch;margin:0}

/* look inside */
.pages{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap}
.pages img{width:min(262px,42vw);border-radius:9px;border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg);transform:rotate(-1.6deg);transition:transform .25s ease}
.pages img:nth-child(2){transform:rotate(1.6deg)}
.pages img:hover{transform:rotate(0) scale(1.03)}

/* sample / form */
.sample{background:linear-gradient(150deg,var(--band) 0%,#060E22 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(2rem,4.5vw,3.4rem);position:relative;overflow:hidden}
.sample-in{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;
  gap:2.6rem;align-items:center}
@media(max-width:840px){.sample-in{grid-template-columns:1fr;gap:1.7rem}}
.form{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form input{flex:1 1 250px;min-height:52px;padding:14px 17px;border-radius:var(--r-sm);
  border:3px solid var(--line-2);font-family:var(--body);font-size:1rem;
  background:var(--surface-2);color:#fff}
.form input::placeholder{color:#8DA0C2}
.form input:focus-visible{outline:none;border-color:var(--gold)}
.fineprint{font-size:.83rem;color:var(--text-mute);margin:.9rem 0 0}
.sample-art{display:grid;place-items:center}
.sample-art img{width:min(190px,60%);border-radius:6px;box-shadow:var(--shadow-lg);transform:rotate(3deg)}

/* faq */
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:.8rem;overflow:hidden}
details[open]{border-color:var(--line-2)}
summary{cursor:pointer;padding:1.15rem 1.4rem;font-family:var(--head);font-weight:700;
  font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;color:#fff}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
summary::after{content:"+";font-size:1.6rem;color:var(--gold);line-height:1;flex-shrink:0;
  transition:transform .22s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 1.4rem 1.3rem;margin:0;color:var(--text-soft);font-size:.98rem}

/* footer */
footer{background:#050B1A;color:var(--text-mute);padding:3.2rem 0 2.2rem;font-size:.9rem;
  position:relative;z-index:1;border-top:1px solid var(--line)}
.f-top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-bottom:1.8rem;border-bottom:1px solid var(--line)}
.f-top img{height:64px}
.f-links{display:flex;gap:1.6rem;flex-wrap:wrap}
.f-links a{color:var(--text-mute);text-decoration:none}
.f-links a:hover{color:var(--gold)}
.f-bot{padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.83rem;color:#7286A8}
.disclaimer{max-width:66ch;margin-top:.7rem;color:#7286A8;font-size:.83rem}
.pv-unused{background:var(--gold);color:#071026;text-align:center;padding:.6rem 1rem;
  font-weight:800;font-size:.87rem;font-family:var(--head);letter-spacing:.02em;
  position:relative;z-index:70}
/* ============================================================
   MOTION SYSTEM
   Carried over from the current MuscleMathMania.com and extended.
   Every effect below is transform/opacity only, and every one of
   them is switched off under prefers-reduced-motion.
   ============================================================ */

/* ---------- floating math symbols ---------- */
.pfield{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.pfield.fixed{position:fixed}
.particle{position:absolute;font-family:var(--head);font-weight:800;opacity:0;
  user-select:none;will-change:transform,opacity;animation:float-up linear infinite}
@keyframes float-up{
  0%{transform:translateY(112vh) rotate(0deg);opacity:0}
  8%{opacity:var(--pop,.11)}
  92%{opacity:var(--pop,.11)}
  100%{transform:translateY(-140px) rotate(720deg);opacity:0}
}

/* ---------- hero arena floor (3-D perspective grid) ---------- */
.arena{position:absolute;bottom:0;left:-10%;width:120%;height:46%;z-index:0;
  background-image:linear-gradient(rgba(255,203,21,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,203,21,.20) 1px,transparent 1px);
  background-size:64px 64px;transform-origin:bottom center;opacity:0;
  animation:arena-rise 1.5s cubic-bezier(.22,1,.36,1) .25s forwards}
.arena::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,16,38,0) 0%,rgba(7,16,38,.88) 100%)}
@keyframes arena-rise{
  from{opacity:0;transform:perspective(450px) rotateX(80deg) translateY(60px)}
  to{opacity:.85;transform:perspective(450px) rotateX(65deg) translateY(0)}
}

/* ---------- mascot: glow + orbiting symbols ---------- */
.glow{position:absolute;top:52%;left:50%;width:74%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,203,21,.30) 0%,rgba(255,203,21,0) 68%);
  animation:glow-pulse 4.5s ease-in-out infinite}
@keyframes glow-pulse{
  0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.13)}
}
.orbit-ring{position:absolute;inset:-8%;pointer-events:none;z-index:2}
.orbit-sym{position:absolute;top:50%;left:50%;font-family:var(--head);font-weight:900;
  font-size:1.45rem;line-height:1;margin:-.72rem;animation:orbit linear infinite;
  filter:drop-shadow(0 0 9px currentColor);will-change:transform}
@keyframes orbit{
  from{transform:rotate(0deg) translateX(var(--rad,170px)) rotate(0deg)}
  to{transform:rotate(360deg) translateX(var(--rad,170px)) rotate(-360deg)}
}
.mascot-wrap{position:relative;animation:muscle-pulse 4s ease-in-out 1.8s infinite}
@keyframes muscle-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}

/* ---------- entrance + scroll reveal ---------- */
@keyframes fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.enter{opacity:0;animation:fade-up .75s cubic-bezier(.22,1,.36,1) forwards}
.enter.e1{animation-delay:.10s}.enter.e2{animation-delay:.22s}
.enter.e3{animation-delay:.34s}.enter.e4{animation-delay:.46s}
.enter.e5{animation-delay:.58s}.enter.e6{animation-delay:.70s}

.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.40s}

/* ---------- book covers: drop in, then breathe ---------- */
.book-top img{animation:book-enter .95s cubic-bezier(.22,1,.36,1) both}
.book:nth-child(2) .book-top img{animation-delay:.12s}
@keyframes book-enter{
  from{opacity:0;transform:translateY(-38px) scale(.92)}
  to{opacity:1;transform:translateY(10px) scale(1)}
}
.book-top img.floating{animation:book-float 5.5s ease-in-out infinite}
@keyframes book-float{
  0%,100%{transform:translateY(10px) rotateY(-4deg) rotateX(2deg)}
  50%{transform:translateY(-8px) rotateY(4deg) rotateX(-2deg)}
}
.book-top{perspective:900px}

/* ---------- topic marquee ---------- */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee-scroll 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.chip{flex-shrink:0;display:flex;align-items:center;gap:.6rem;margin-right:.85rem;
  padding:11px 20px;border-radius:99px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);font-family:var(--head);font-weight:700;
  font-size:.97rem;color:#DCE5F5;white-space:nowrap}
.chip b{color:var(--gold);font-weight:800}

/* ---------- animated stat counters ---------- */
.stat{text-align:center}
.stat-num{font-family:var(--head);font-weight:800;line-height:1;color:var(--gold);
  font-size:clamp(2.6rem,6vw,4rem);font-variant-numeric:tabular-nums}
.stat-lbl{font-weight:700;font-size:.93rem;color:#B9C7E0;margin-top:.5rem}
.stat-sub{font-size:.79rem;color:#7C8FB2;margin-top:.18rem}

/* ---------- reduced motion: switch everything off ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;
    scroll-behavior:auto!important}
  .pfield{display:none!important}
  .reveal,.enter{opacity:1!important;transform:none!important}
  .arena{opacity:.6!important;transform:perspective(450px) rotateX(65deg)!important}
  .book-top img{transform:translateY(10px)!important;opacity:1!important}
}
/* no-JS safety: never leave content invisible */
.no-js .reveal,.no-js .enter{opacity:1!important;transform:none!important}


/* ============================================================
   SERIES SHELF + HOMEPAGE CAROUSEL  (added 2026-09-20)
   ============================================================ */

/* --- a book whose buy links are not live yet --- */
.book.pending .book-top{position:relative}
.book .ribbon,.carousel-slide .ribbon{position:absolute;top:.75rem;left:.75rem;z-index:2;
  font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;color:#071026;background:#FFCB15;
  padding:.3rem .6rem;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.btn.is-pending{cursor:not-allowed;opacity:.55;filter:saturate(.7);
  box-shadow:none;transform:none !important}
.btn.is-pending:hover,.btn.is-pending:focus{transform:none;box-shadow:none;filter:saturate(.7)}
.buys-note{margin:.7rem 0 0;font-size:.82rem;line-height:1.5;color:var(--text-soft);text-align:center}
.buys-note a{color:#FFCB15;text-decoration:underline;text-underline-offset:2px}
.book-desc{color:var(--text-soft);font-size:.96rem;margin:.5rem 0 0}
article.book[id]{scroll-margin-top:96px}

/* --- the shelf strip: all six covers standing in a row --- */
.shelf{margin-top:2.6rem}
.shelf-rail{display:flex;gap:0;align-items:flex-start;justify-content:center;justify-content:safe center;
  flex-wrap:nowrap;overflow-x:auto;padding:0 0 .4rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.shelf-rail::-webkit-scrollbar{height:6px}
.shelf-rail::-webkit-scrollbar-thumb{background:rgba(143,165,204,.35);border-radius:99px}
.shelf-item{flex:0 0 auto;scroll-snap-align:center;
  width:clamp(112px,14.5vw,163px);padding:0 clamp(.3rem,1vw,.7rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  text-align:center;text-decoration:none;color:inherit}
.shelf-item .shelf-cover{display:block;transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.shelf-item img{width:100%;height:auto;display:block;border-radius:4px;
  box-shadow:0 10px 22px rgba(0,0,0,.5)}
.shelf-item:hover .shelf-cover,.shelf-item:focus-visible .shelf-cover{transform:translateY(-12px)}
.shelf-item:focus-visible{outline:3px solid #FFCB15;outline-offset:4px;border-radius:6px}
.shelf-item .plank{display:block;height:13px;margin:0 calc(-1 * clamp(.3rem,1vw,.7rem));
  background:linear-gradient(180deg,#FFCB15 0%,#c99c06 52%,#7d5f02 100%);
  box-shadow:0 12px 22px rgba(0,0,0,.5)}
.shelf-item:first-child .plank{border-radius:4px 0 0 4px}
.shelf-item:last-child .plank{border-radius:0 4px 4px 0}
.shelf-item .shelf-label{display:block;margin-top:.75rem;
  font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:.76rem;
  line-height:1.3;color:var(--text-soft)}
.shelf-item:hover .shelf-label,.shelf-item:focus-visible .shelf-label{color:#FFCB15}

/* --- homepage carousel --- */
.carousel{position:relative;margin-top:2.6rem}
.carousel-track{display:flex;gap:clamp(.9rem,2.4vw,1.6rem);overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:.5rem .25rem 1.6rem;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{flex:0 0 clamp(190px,42vw,236px);scroll-snap-align:center;
  display:flex;flex-direction:column;text-align:center;text-decoration:none;color:inherit;
  background:var(--bg-2,#0b1733);border:1px solid rgba(143,165,204,.18);border-radius:14px;
  padding:1rem 1rem 1.15rem;transition:transform .28s cubic-bezier(.2,.8,.3,1),
  border-color .28s ease,box-shadow .28s ease}
.carousel-slide:hover,.carousel-slide:focus-visible{transform:translateY(-8px);
  border-color:rgba(255,203,21,.5);box-shadow:0 16px 34px rgba(0,0,0,.42)}
.carousel-slide:focus-visible{outline:3px solid #FFCB15;outline-offset:3px}
.carousel-slide .cs-cover{position:relative}
.carousel-slide img{width:100%;height:auto;display:block;border-radius:6px;
  box-shadow:0 10px 22px rgba(0,0,0,.45)}
.carousel-slide .tag{align-self:center;margin-top:.95rem}
.carousel-slide h3{font-size:1.02rem;margin:.55rem 0 0;line-height:1.25}
.carousel-slide .cs-cta{margin-top:.7rem;font-family:'Nunito',system-ui,sans-serif;
  font-weight:800;font-size:.82rem;color:#FFCB15}
.carousel-slide .cs-cta::after{content:" \2192"}
.carousel-nav{position:absolute;top:38%;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(143,165,204,.35);
  background:rgba(7,16,38,.86);color:#fff;cursor:pointer;z-index:3;
  transition:background .2s ease,border-color .2s ease,opacity .2s ease}
.carousel-nav:hover{background:#E21F29;border-color:#E21F29}
.carousel-nav:focus-visible{outline:3px solid #FFCB15;outline-offset:2px}
.carousel-nav[disabled]{opacity:.25;cursor:default}
.carousel-nav.prev{left:-6px}
.carousel-nav.next{right:-6px}
@media (max-width:640px){.carousel-nav{display:none}}
.carousel-dots{display:flex;gap:.5rem;justify-content:center;margin-top:.2rem}
.carousel-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(143,165,204,.4);transition:background .2s ease,transform .2s ease}
.carousel-dots button[aria-current="true"]{background:#FFCB15;transform:scale(1.35)}
.carousel-dots button:focus-visible{outline:2px solid #FFCB15;outline-offset:3px}
.carousel-hint{text-align:center;margin:.9rem 0 0;font-size:.85rem;color:var(--text-soft)}
.no-js .carousel-nav,.no-js .carousel-dots{display:none}

/* --- carousel slide, restructured so live books keep a real buy button --- */
.carousel-slide .cs-main{display:flex;flex-direction:column;text-align:center;
  text-decoration:none;color:inherit}
.carousel-slide .cs-main:focus-visible{outline:3px solid #FFCB15;outline-offset:3px;border-radius:8px}
.carousel-slide .cs-cover{position:relative;display:block}
.carousel-slide .cs-title{display:block;font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:700;font-size:1.02rem;line-height:1.25;margin:.55rem 0 0;color:var(--text,#fff)}
.carousel-slide .cs-main:hover .cs-title{color:#FFCB15}
.cs-buys{display:flex;flex-direction:column;gap:.45rem;margin-top:.85rem}
.btn.btn-mini{width:100%;justify-content:center;padding:.52rem .7rem;font-size:.82rem;
  line-height:1.2;border-radius:9px;text-align:center}

@media (prefers-reduced-motion:reduce){
  .shelf-item,.carousel-slide{transition:none}
  .shelf-item:hover,.carousel-slide:hover{transform:none}
}

/* ============================================================
   MULTI-PAGE SITE  (2026-09-26 rebuild)
   Self-hosted fonts, utility backgrounds (no inline styles, so the
   CSP can drop 'unsafe-inline'), mobile menu, page heroes, the two
   rotating workbook wheels, the sample viewer, About and Contact.
   ============================================================ */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/baloo-2-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo-2-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo-2-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/nunito-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format('woff2')}

.bg0{background:var(--bg)}.bg1{background:var(--bg-1)}.bg2{background:var(--bg-2)}.bgband{background:var(--band)}
.mw44{max-width:44rem}.mw52{max-width:52rem}.mw820{max-width:820px}
.mt1{margin-top:1.1rem}.mt2{margin-top:2rem}.mt26{margin-top:2.6rem}.mt3{margin-top:3rem}.mb2{margin-bottom:2rem}
.stat-band{padding:clamp(46px,5.5vw,72px) 0}
.gold-link{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#071026;
  padding:.6rem 1rem;font-weight:800;border-radius:0 0 8px 0}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- nav: active page + mobile menu ---------- */
.navlinks a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}
.nav-cta{display:flex;gap:.6rem;align-items:center}
.menu-btn{display:none;width:46px;height:46px;border-radius:10px;border:1px solid var(--line-2);
  background:transparent;color:#fff;cursor:pointer;place-items:center}
.menu-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.menu-btn .bar{display:block;width:20px;height:2.5px;background:currentColor;border-radius:2px;
  margin:4px auto;transition:transform .2s ease,opacity .2s ease}
.menu-btn[aria-expanded="true"] .bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:880px){
  .menu-btn{display:grid}
  .navlinks{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;margin:0;background:rgba(7,16,38,.98);
    border-bottom:1px solid var(--line);padding:.4rem 4vw 1rem}
  .navlinks.open{display:flex}
  .navlinks a{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1.08rem}
  .navlinks a[aria-current="page"]{border-bottom-color:var(--line);color:var(--gold)}
  .no-js .navlinks{display:flex;position:static;flex-direction:row;flex-wrap:wrap;
    background:none;border:0;padding:0;gap:1rem}
  .no-js .menu-btn{display:none}
  .nav{flex-wrap:wrap}
  .nav-cta .btn-sm{padding:10px 14px}
}
@media(max-width:400px){.nav-cta .btn-sm{display:none}}

/* ---------- inner-page hero ---------- */
.phero{position:relative;overflow:hidden;background:var(--bg);
  padding:clamp(54px,7vw,96px) 0 clamp(46px,6vw,78px);border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(2.3rem,5.4vw,3.9rem)}
.phero .lede{margin-top:1.2rem}
.phero .hero-cta{margin:1.8rem 0 0}
.crumbs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.8rem}
.crumbs a{font-family:var(--head);font-weight:700;font-size:.92rem;text-decoration:none;
  padding:.5rem 1rem;border-radius:99px;border:1px solid var(--line-2);color:var(--text-soft)}
.crumbs a:hover,.crumbs a:focus-visible{border-color:var(--gold);color:#fff}

/* ---------- homepage: two-line teaser ---------- */
.lines{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:860px){.lines{grid-template-columns:1fr}}
.line-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;box-shadow:var(--shadow);
  position:relative;overflow:hidden}
.line-card h3{font-size:1.55rem;margin:.2rem 0 .5rem}
.line-card p{color:var(--text-soft);font-size:.98rem}
.fan{display:flex;justify-content:center;align-items:flex-end;height:190px;margin:.6rem 0 1.4rem}
.line-card .btn{margin-top:auto;align-self:flex-start}
.pill-row{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 1.2rem}
.pill{font-family:var(--head);font-weight:700;font-size:.8rem;padding:4px 11px;border-radius:99px;
  background:rgba(255,255,255,.07);border:1px solid var(--line-2);color:#DCE5F5}

/* per-book sample chooser under the homepage form */
.pick{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.pick>p:first-child{font-weight:700;color:#fff;margin:0 0 .7rem;font-size:.95rem}
.pick-row{display:flex;flex-wrap:wrap;gap:.5rem}
.pick-row a{font-family:var(--head);font-weight:700;font-size:.86rem;text-decoration:none;
  color:var(--gold);border:1px solid rgba(255,203,21,.45);border-radius:99px;padding:.42rem .9rem}
.pick-row a:hover,.pick-row a:focus-visible{background:var(--gold);color:#071026}

/* ============================================================
   THE WHEELS
   ============================================================ */
.wheel-sec h2 .count{color:var(--gold)}
.wheel{position:relative;margin-top:2.4rem}
.wheel-stage{position:relative;height:380px;perspective:1300px;
  perspective-origin:50% 0%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wheel-ring{list-style:none;margin:0;padding:0;position:absolute;inset:0;transform-style:preserve-3d}
.wheel-item{position:absolute;left:50%;top:calc(var(--cw,210px) * .68 + 10px);width:var(--cw,210px);margin-left:calc(var(--cw,210px) / -2);
  transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s ease,filter .5s ease}
.wheel-item button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  border-radius:8px;position:relative}
.wheel-item button:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.wheel-item .ribbon{position:absolute;top:.6rem;left:.6rem;z-index:2;font-family:var(--body);
  font-weight:800;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:#071026;
  background:var(--gold);padding:.28rem .55rem;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.wheel-floor{position:absolute;left:8%;right:8%;bottom:0;height:70px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,203,21,.22) 0%,rgba(255,203,21,0) 70%);
  pointer-events:none}
.wheel-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.4rem;position:relative;z-index:5}
.wheel-btn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(143,165,204,.35);background:rgba(7,16,38,.86);color:#fff;
  transition:background .2s ease,border-color .2s ease}
.wheel-btn:hover{background:var(--red);border-color:var(--red)}
.wheel-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wheel-count{font-family:var(--head);font-weight:700;color:var(--text-soft);min-width:5.5rem;text-align:center}
.wheel-count b{color:#fff}
.wheel-play{font-family:var(--head);font-weight:700;font-size:.82rem;color:var(--text-mute);
  background:none;border:1px solid var(--line-2);border-radius:99px;padding:.35rem .8rem;cursor:pointer}
.wheel-play:hover,.wheel-play:focus-visible{color:#fff;border-color:var(--gold)}
.wheel-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:1rem}
.wheel-tabs button{font-family:var(--head);font-weight:700;font-size:.8rem;cursor:pointer;
  padding:.36rem .8rem;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--text-soft)}
.wheel-tabs button[aria-selected="true"]{background:var(--gold);color:#071026;border-color:var(--gold)}
.wheel-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* detail panel under each wheel */
.wb-details{margin-top:2rem}
.wb{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,2.2rem);box-shadow:var(--shadow);scroll-margin-top:96px}
.js .wb-details .wb{display:none}
.js .wb-details .wb.is-active{display:grid;animation:fade-up .45s cubic-bezier(.22,1,.36,1)}
.no-js .wb-details .wb+.wb{margin-top:1.4rem}
.wb-cover{position:relative}
.wb h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:.1rem 0 .4rem}
.wb .book-desc{font-size:1.02rem;max-width:62ch}
.wb ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.4rem}
.wb li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;color:var(--text-soft)}
.wb li svg{flex-shrink:0;color:var(--gold);margin-top:4px}
.wb-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.2rem}
.wb-meta .tag{margin:0}
.tag.alt{background:rgba(255,255,255,.1);color:#fff;border:1px solid var(--line-2)}
.wb-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem;margin-top:1.5rem}
.wb-actions .btn{width:100%;margin:0}
.wb-actions .btn-buy{min-height:62px}
.btn-sample{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none}
.btn-sample:hover{background:#fff;color:var(--navy);transform:translateY(2px)}
.btn-sample.is-pending{border-style:dashed}
.wb .buys-note{text-align:left}
@media(max-width:900px){.wb-actions{grid-template-columns:1fr}}
@media(max-width:760px){.wb{grid-template-columns:1fr}.wb-cover{max-width:200px;margin-inline:auto}
  .wb ul{grid-template-columns:1fr}}
.wheel-sub{text-align:center;margin:1.2rem 0 0;color:var(--text-mute);font-size:.88rem}

/* no-JS: the ring becomes a plain grid */
.no-js .wheel-stage{height:auto;perspective:none}
.no-js .wheel-ring{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
.no-js .wheel-item{position:static;margin:0;width:auto;transform:none}
.no-js .wheel-controls,.no-js .wheel-tabs,.no-js .wheel-floor{display:none}

/* compare table */
.compare{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:.95rem}
.compare th,.compare td{padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-family:var(--head);color:#fff;background:var(--surface-2);font-size:1rem}
.compare tbody th{color:#fff;font-weight:700;width:26%}
.compare td{color:var(--text-soft)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- sample viewer (native <dialog>) ---------- */
dialog.sv{width:min(980px,94vw);max-height:92vh;padding:0;border:1px solid var(--line-2);
  border-radius:var(--r-lg);background:var(--bg-1);color:var(--text);box-shadow:0 40px 90px rgba(0,0,0,.7)}
dialog.sv::backdrop{background:rgba(3,8,20,.78);backdrop-filter:blur(4px)}
dialog.sv[open]{animation:fade-up .35s cubic-bezier(.22,1,.36,1)}
.sv-in{padding:clamp(1.3rem,3vw,2.2rem);overflow:auto;max-height:92vh}
.sv-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.sv-head h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.sv-close{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);
  background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center}
.sv-close:hover,.sv-close:focus-visible{background:var(--red);border-color:var(--red);outline:none}
.sv-pages{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.4rem 0}
.sv-pages figure{margin:0}
.sv-pages img{width:100%;border-radius:6px;border:1px solid var(--line-2);background:#fff;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.8)}
.sv-pages figcaption{font-size:.8rem;color:var(--text-mute);margin-top:.45rem;text-align:center}
@media(max-width:640px){.sv-pages{grid-template-columns:repeat(3,70%);overflow-x:auto;scroll-snap-type:x mandatory}
  .sv-pages figure{scroll-snap-align:center}}
.sv-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.sv-note{font-size:.85rem;color:var(--text-mute);margin:1rem 0 0}

/* ---------- About ---------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.prose p{color:var(--text-soft);font-size:1.05rem}
.prose p strong{color:#fff}
.quote{font-family:var(--head);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.2;
  color:#fff;border-left:5px solid var(--red);padding:.3rem 0 .3rem 1.3rem;margin:0}
.quote span{color:var(--gold)}
.anatomy{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.anatomy li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem}
.anatomy .lbl{font-family:var(--head);font-weight:800;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:6px;background:var(--red);color:#fff;white-space:nowrap}
.anatomy .lbl.navy{background:#1E3A78}.anatomy .lbl.gold{background:var(--gold);color:#071026}
.anatomy .lbl.dark{background:#050B1A;border:1px solid var(--line-2)}
.anatomy p{margin:0;color:var(--text-soft);font-size:.95rem}
.anatomy b{color:#fff}
.ladder{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;align-items:end}
.rung{text-align:center;text-decoration:none;color:inherit}
.rung span{display:block;font-family:var(--head);font-weight:700;font-size:.8rem;margin-top:.55rem;color:var(--text-soft)}
.rung:nth-child(1){padding-top:0}
@media(max-width:760px){.ladder{grid-template-columns:repeat(3,1fr)}}
.values .card h3{display:flex;gap:.6rem;align-items:center}
.founders{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.founder{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:.5rem 1.2rem .5rem .5rem}
.founder .mono{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:#071026;font-family:var(--head);font-weight:800}
.founder b{display:block;color:#fff;font-family:var(--head);line-height:1.1}
.founder small{color:var(--text-mute);font-size:.8rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.4rem,3.5vw,2.8rem);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.cform{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.3rem);box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.05rem}
.field label{font-family:var(--head);font-weight:700;color:#fff;font-size:.98rem}
.field .hint{font-size:.82rem;color:var(--text-mute)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:13px 15px;border-radius:var(--r-sm);
  border:2px solid var(--line-2);background:var(--surface-2);color:#fff;font-family:var(--body);font-size:1rem}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#FFCB15 50%),linear-gradient(135deg,#FFCB15 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:#8DA0C2}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.route{display:grid;gap:.9rem}
.route .card{padding:1.3rem 1.4rem}
.route .card h3{font-size:1.05rem;display:flex;gap:.6rem;align-items:center}
.route .card p{font-size:.93rem}
.route a{color:var(--gold)}
.mailbox{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:linear-gradient(150deg,var(--band),#060E22);
  border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem}
.mailbox a{font-family:var(--head);font-weight:800;font-size:1.15rem;color:#fff;text-decoration:none;word-break:break-all}
.mailbox a:hover{color:var(--gold)}

/* ---------- legal / utility pages ---------- */
.prose-page{max-width:780px}
.prose-page h2{font-size:1.5rem;margin:2.2rem 0 .7rem}
.prose-page p,.prose-page li{color:var(--text-soft)}
.prose-page a{color:var(--gold)}
.prose-page .meta{color:var(--text-mute);font-size:.92rem}
.prose-page .btn{margin:.4rem .4rem .4rem 0}
.prose-page .btn-gold{color:#071026}

@media(prefers-reduced-motion:reduce){
  .wheel-item{transition:none}
}
.hl-gold{color:var(--gold)}
.gold{color:var(--gold);font-weight:700}
.f-tag{margin:.9rem 0 0;max-width:34ch}
.marquee-band{background:var(--band);padding:1.5rem 0;position:relative;z-index:1;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.center-block{margin-inline:auto}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sample .form{margin-top:.2rem}
.sample-art img{height:auto}
.pages img{height:auto}
.brand img{width:auto}
.f-top img{width:auto}
.hero-art img{height:auto}

img{height:auto}
.line-card .eyebrow{position:relative;z-index:3}
.wb-cover .ribbon{position:absolute;top:.6rem;left:.6rem;z-index:2;font-family:var(--body);font-weight:800;
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:#071026;background:var(--gold);
  padding:.28rem .6rem;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.35)}

/* ============================================================
   3-D BOOKS  (2026-09-26 pm) — every cover is a real book:
   cover, page block (right/top/bottom), spine and back.
   --bw = the book's rendered width in that context; --d = depth ratio.
   No filter/opacity on 3-D containers (both would flatten them);
   shading is applied per face through --shade / --fade.
   ============================================================ */
.b3d{--d:.08;--t:calc(var(--bw,200px) * var(--d));position:relative;display:block;width:100%;
  aspect-ratio:433/560;transform-style:preserve-3d}
.d4{--d:.07}.d5{--d:.078}.d6{--d:.087}.d7{--d:.096}.d8{--d:.105}.d9{--d:.114}
.d10{--d:.123}.d11{--d:.132}.d12{--d:.141}.d13{--d:.15}
.b3d-face{position:absolute;display:block;filter:brightness(var(--shade,1));opacity:var(--fade,1)}
.b3d-front{inset:0;transform:translateZ(calc(var(--t) / 2));border-radius:2px 4px 4px 2px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.b3d-front img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;box-shadow:none}
.b3d-front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.38) 0,rgba(255,255,255,.18) 1.6%,rgba(0,0,0,.08) 3.4%,transparent 6%,
    transparent 70%,rgba(255,255,255,.07) 88%,rgba(0,0,0,.12) 100%)}
.b3d-back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--t) / 2));border-radius:4px 2px 2px 4px;
  background:linear-gradient(135deg,#1B2C5C,#0E1B3D 60%,#081230)}
.b3d-pages{left:100%;top:1.2%;bottom:1.2%;width:var(--t);transform-origin:left center;
  transform:translateZ(calc(var(--t) / 2)) rotateY(90deg);
  background:repeating-linear-gradient(90deg,#FBF7EC 0 1px,#E6DFCC 1px 2px),#F4EFE2;
  box-shadow:inset 0 0 6px rgba(120,100,60,.35)}
.b3d-top,.b3d-bottom{left:1%;right:1.5%;height:var(--t);
  background:repeating-linear-gradient(180deg,#FBF7EC 0 1px,#E2DBC6 1px 2px),#F4EFE2}
.b3d-top{top:0;transform-origin:center top;transform:translateZ(calc(var(--t) / 2)) rotateX(-90deg)}
.b3d-bottom{bottom:0;transform-origin:center bottom;transform:translateZ(calc(var(--t) / 2)) rotateX(90deg)}
.b3d-spine{left:0;top:0;bottom:0;width:var(--t);transform-origin:left center;
  transform:translateZ(calc(var(--t) / 2)) rotateY(90deg);
  background:linear-gradient(180deg,#0E1B3D 0 12%,#E21F29 12% 15%,#0E1B3D 15% 82%,#FFCB15 82% 86%,#0E1B3D 86%)}
.b3d .ribbon{position:absolute;top:.55rem;left:.7rem;z-index:2}

/* wheel: books turn to show their pages, the front one breathes */
.wheel{--bw:var(--cw,210px)}
.wheel-item button{transform-style:preserve-3d;border-radius:0}
.wheel-item .b3d{transform:rotateY(-30deg);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.wheel-item.is-active .b3d{animation:b3d-idle 6s ease-in-out infinite}
.wheel-item.is-active .b3d-front{box-shadow:0 0 0 3px var(--gold)}
.wheel-item button:hover .b3d,.wheel-item button:focus-visible .b3d{transform:rotateY(-46deg) translateY(-6px)}
@keyframes b3d-idle{0%,100%{transform:rotateY(-26deg) translateY(0)}50%{transform:rotateY(-40deg) translateY(-8px)}}
.wheel-item img{box-shadow:none!important}
.wheel-shadow{display:none}

/* detail panel cover */
.wb-cover{--bw:220px;perspective:1100px;padding:0 10px 0 0}
.wb-cover .b3d{transform:rotateY(-32deg) rotateX(4deg);animation:b3d-detail 7s ease-in-out infinite}
@keyframes b3d-detail{0%,100%{transform:rotateY(-28deg) rotateX(4deg)}50%{transform:rotateY(-42deg) rotateX(2deg) translateY(-6px)}}
@media(max-width:760px){.wb-cover{--bw:190px;width:200px;padding:0 10px 0 0}}

/* homepage fans */
.fan{perspective:900px;--bw:112px;height:200px;align-items:flex-end}
.fan-b{display:block;width:112px;margin:0 -18px;transition:transform .35s cubic-bezier(.2,.8,.3,1);transform-style:preserve-3d}
.fan-b .b3d{transform:rotateY(-34deg)}
.fan-b:nth-child(1){transform:rotate(-12deg) translateY(16px)}
.fan-b:nth-child(2){transform:rotate(-6deg) translateY(4px)}
.fan-b:nth-child(3){transform:translateY(-6px) scale(1.08)}
.fan-b:nth-child(4){transform:rotate(6deg) translateY(4px)}
.fan-b:nth-child(5){transform:rotate(12deg) translateY(16px)}
.line-card:hover .fan-b:nth-child(1){transform:rotate(-16deg) translate(-12px,12px)}
.line-card:hover .fan-b:nth-child(5){transform:rotate(16deg) translate(12px,12px)}
.line-card:hover .fan-b .b3d{transform:rotateY(-48deg)}
.fan-b .b3d{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
@media(max-width:480px){.fan{--bw:88px;height:160px}.fan-b{width:88px;margin:0 -16px}}

/* about-page ladder */
.ladder{perspective:1000px}
.rung-b{display:block;--bw:150px;transition:transform .3s ease}
.rung-b .b3d{transform:rotateY(-30deg);transition:transform .4s ease}
.rung:hover .rung-b,.rung:focus-visible .rung-b{transform:translateY(-8px)}
.rung:hover .b3d,.rung:focus-visible .b3d{transform:rotateY(-46deg)}
@media(max-width:760px){.rung-b{--bw:100px}}

@media(prefers-reduced-motion:reduce){
  .wheel-item.is-active .b3d,.wb-cover .b3d{animation:none!important}
}
.no-js .wheel-item .b3d{transform:rotateY(-26deg)}

/* companion links: skill book -> its curriculum book, and back */
.belongs{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem;padding:.75rem 1rem;
  border-radius:var(--r-sm);border:1px solid rgba(255,203,21,.45);background:rgba(255,203,21,.07);
  text-decoration:none;color:#fff;transition:background .2s ease,border-color .2s ease}
.belongs:hover,.belongs:focus-visible{background:rgba(255,203,21,.16);border-color:var(--gold);outline:none}
.belongs-lbl{font-family:var(--head);font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.belongs-name{font-family:var(--head);font-weight:700;font-size:1.02rem}
.belongs-go{margin-left:auto;color:var(--gold);font-weight:800}
.companions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;margin-top:1.1rem}
.companions .belongs-lbl{width:100%}
.companions a{font-family:var(--head);font-weight:700;font-size:.9rem;text-decoration:none;color:var(--gold);
  border:1px solid rgba(255,203,21,.45);border-radius:99px;padding:.4rem .9rem}
.companions a:hover,.companions a:focus-visible{background:var(--gold);color:#071026;outline:none}
.wheel{scroll-margin-top:84px}