/* /books/ (templates/books.html), scoped under .bks.

   A recreation of the owner's design handoff (design_handoff_books_page,
   2026-10-30, "Books Page.dc.html"): every inline style of the prototype is a class
   here, and every hover it drove through JS state is a plain CSS :hover. The tokens
   are /coaching/'s (static/css/pages/coaching.css):

     ground #05080f · ink #f4f7fc · body #d6deeb · dim #a3afc6 · muted #6f7c96
     blue #5bc3f9 (91,195,249) · light blue #8fd6fb · brand blue #2f6bff
     gold #f5c542 (245,197,66) · gold light #f7e3a1 · deep #d9a52a · amber #e0975a
     red #E8282B (232,40,43), #ff6b6e as text · success #2bd17e
     easing cubic-bezier(.2,.7,.2,1)

   Breakpoints are the prototype's: 1000px (hero, books and bundle stack head ->
   book(s) -> body), 760px (the site nav goes in the flow; the "Where to start"
   curve, as the same clamp(…, 100vw - 760px, …) it used) and 720px (stats).

   THE STAGES SCALE, THEY DO NOT RE-LAY OUT (handoff "Zoom"): the hero and bundle
   stages by min(1, (vw - 40) / 660), each volume's book by min(1, (vw - 40) / 440).
   --k is that factor, as a step ladder of plain numbers. NOT tan(atan2(a, b)):
   iOS WebKit (Safari, Instagram's browser) returned it NEGATIVE, so scale(--k)
   drew the books flipped, upside-down and mirrored (owner, 2026-10-30). */

/* ===== The site nav, over the hero (desktop), as on /coaching/ ===== */
body.bks-page{ height:auto; min-height:100vh; background:#05080f; }
html{ scroll-padding-top:88px; background:#05080f; }
.bks-page .landing-nav{ position:sticky; top:0; z-index:50; }
@media (min-width:761px){
  .bks-page .landing-nav{ transition:background-color .3s,border-color .3s,box-shadow .3s; }
  html.bks-at-top body.bks-page .landing-nav{
    background:transparent; border-bottom-color:transparent; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .bks{ margin-top:calc(-1 * var(--bks-navh)); }
}

/* ===== Root ===== */
.bks{
  --bks-navh:70px;
  --bks-ease:cubic-bezier(.2,.7,.2,1);
  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative; overflow:hidden; flex-shrink:0;
  line-height:normal;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#e7ecf6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(ellipse 70% 40% at 15% 0%,rgba(47,107,255,.14),transparent 70%),
    radial-gradient(ellipse 50% 30% at 90% 6%,rgba(245,197,66,.08),transparent 70%),
    #05080f;
}
.bks :where(h1,h2,h3,p,ul,ol,figure){ margin:0; }
.bks :where(ul,ol){ padding:0; list-style:none; }
.bks :where(a){ color:#5bc3f9; text-decoration:none; }
.bks :where(a:hover){ color:#8fd6fb; }
.bks :where(button){ font:inherit; color:inherit; }
.bks [hidden]{ display:none !important; }
.bks-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Each volume's colour: --c the accent, --rgb its channels, --t the accent as text. */
.bks-vol--blue,.bks-step--blue,.bks-final-link--blue,.bks-plist-row--blue,.bks-cf-thumb--blue,.bks-tab--blue,.bks-inside--blue{ --c:#5bc3f9; --rgb:91,195,249; --t:#5bc3f9; }
.bks-vol--gold,.bks-step--gold,.bks-final-link--gold,.bks-plist-row--gold,.bks-cf-thumb--gold,.bks-tab--gold,.bks-inside--gold{ --c:#f5c542; --rgb:245,197,66; --t:#f5c542; }
.bks-vol--red,.bks-step--red,.bks-final-link--red,.bks-plist-row--red,.bks-cf-thumb--red,.bks-tab--red,.bks-inside--red{ --c:#E8282B; --rgb:232,40,43; --t:#ff6b6e; }
.bks-tab--all{ --c:#a3afc6; --rgb:160,180,220; }

.bks-grad-gold{ background:linear-gradient(90deg,#f7e3a1,#f5c542 var(--gs,50%),#e0975a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bks-grad-blue{ background:linear-gradient(90deg,#8fd6fb,#5bc3f9 50%,#2f6bff); -webkit-background-clip:text; background-clip:text; color:transparent; }

.bks-eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.bks-eyebrow--blue{ color:#5bc3f9; }
.bks-eyebrow--gold{ color:#f5c542; }
.bks-rule{ flex:none; width:28px; height:1px; background:currentColor; }
.bks-rule--blue{ background:#5bc3f9; }
.bks-h2{ margin-top:18px; color:#f4f7fc; font-size:clamp(32px,4.4vw,54px); font-weight:700; letter-spacing:-.035em; line-height:1.04; text-wrap:balance; }
.bks-intro{ max-width:560px; margin-top:16px; color:#a3afc6; font-size:16px; line-height:1.6; text-wrap:pretty; }
.bks-center{ text-align:center; }
.bks-intro--center{ margin-left:auto; margin-right:auto; }
.bks-label{ color:#6f7c96; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.bks-sec{ position:relative; max-width:1280px; margin:0 auto; padding:clamp(90px,11vw,150px) clamp(20px,4vw,48px) 40px; }

/* ===== Buttons ===== */
.bks-btn{ display:inline-flex; align-items:center; min-height:52px; padding:0 26px; border-radius:12px; font-size:15px; font-weight:600; transition:transform .35s var(--bks-ease),box-shadow .35s; }
.bks .bks-btn--gold{ background:linear-gradient(180deg,#f7d97a,#f5c542 55%,#d9a52a); color:#1a1204; font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 36px -8px rgba(245,197,66,.5); }
.bks .bks-btn--blue{ background:linear-gradient(180deg,#4a80ff,#2f6bff); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 32px rgba(47,107,255,.4); }
.bks .bks-btn--red{ background:linear-gradient(180deg,#f0474a,#c81f22); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 32px rgba(232,40,43,.35); }
.bks .bks-btn--hero{ padding:0 28px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 36px -8px rgba(245,197,66,.55); }
.bks a.bks-btn[href]:hover{ transform:translateY(-1px); }
.bks .bks-btn--gold:hover{ color:#1a1204; }
.bks .bks-btn--blue:hover,.bks .bks-btn--red:hover{ color:#fff; }
/* No checkout link yet: the same button, inert ("Coming soon"). */
.bks .bks-btn[aria-disabled="true"]{ cursor:default; }
.bks-link{ font-size:15px; font-weight:600; }
.bks-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:32px; }

/* ===== 1. Hero ===== */
.bks-hero{
  position:relative; max-width:1280px; margin:0 auto;
  padding:calc(var(--bks-navh) + clamp(40px,7vw,90px)) clamp(20px,4vw,48px) clamp(60px,8vw,110px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:56px; align-items:center;
}
.bks-hero > .flash-banner{ grid-column:1/-1; margin:0; padding:0; }
/* The prototype's glow, run out to the screen's left edge and below the hero so it
   fades out instead of ending on the section's box (.bks clips it). */
.bks-hero-glow{ position:absolute; top:0; right:0; bottom:-30%; left:calc(50% - 50vw); background:radial-gradient(ellipse 45% 46% at 0% 54%,rgba(47,107,255,.24),transparent 70%); pointer-events:none; }
.bks-hero-text{ position:relative; max-width:600px; }
.bks-h1{ margin-top:22px; color:#f4f7fc; font-size:clamp(48px,6.6vw,92px); font-weight:700; letter-spacing:-.045em; line-height:.95; }
.bks-h1 .bks-grad-gold{ --gs:40%; }
.bks-tagline{ margin-top:22px; color:#f4f7fc; font-size:clamp(19px,1.8vw,23px); font-weight:600; letter-spacing:-.015em; line-height:1.35; }
.bks-hero-lede{ max-width:520px; margin-top:18px; color:#d6deeb; font-size:17px; line-height:1.6; text-wrap:pretty; }
@media (max-width:760px){
  .bks-hero{ padding-top:clamp(40px,7vw,90px); }
}

/* ===== The book stages (hero, bundle): 660px wide, scaled by --k ===== */
.bks-stage{ --k:1; position:relative; min-width:0; height:calc(var(--sh) * var(--k)); }
.bks-stage--hero{ --sh:500px; }
.bks-stage--bundle{ --sh:480px; }
.bks-stage-in{ position:absolute; left:50%; top:0; width:660px; height:var(--sh); margin-left:-330px; transform:scale(var(--k)); transform-origin:50% 0; }
@media (max-width:699px){ .bks-stage{ --k:.87; } }
@media (max-width:619px){ .bks-stage{ --k:.75; } }
@media (max-width:539px){ .bks-stage{ --k:.63; } }
@media (max-width:459px){ .bks-stage{ --k:.54; } }
@media (max-width:399px){ .bks-stage{ --k:.48; } }
@media (max-width:359px){ .bks-stage{ --k:.42; } }
.bks-ring{ position:absolute; left:50%; top:50%; width:var(--s); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; }
.bks-ring--gold{ border:1px solid rgba(245,197,66,.18); }
.bks-stage--bundle .bks-ring--gold{ border-color:rgba(245,197,66,.2); }
.bks-ring--dash{ border:1px dashed rgba(91,195,249,.12); }
.bks-stage-glow{ position:absolute; left:50%; top:50%; width:640px; height:440px; transform:translate(-50%,-50%); background:radial-gradient(circle at 50% 50%,rgba(245,197,66,.16),rgba(47,107,255,.08) 40%,transparent 66%); }
.bks-slot{ position:absolute; left:50%; z-index:1; }
.bks-slot--hero-l{ top:44px; transform:translateX(-128%); }
.bks-slot--hero-r{ top:44px; transform:translateX(28%); }
.bks-slot--hero-c{ top:14px; transform:translateX(-50%); z-index:2; }
.bks-slot--bun-l{ top:50%; transform:translate(-118%,-46%); }
.bks-slot--bun-r{ top:50%; transform:translate(18%,-46%); }
.bks-slot--bun-c{ top:50%; transform:translate(-50%,-52%); z-index:2; }

/* ===== The 3D book (partials/_book3d.html) =====
   --w, --h, --d: the book's width, height and depth; --ry its resting turn, --ryh
   the turn under the pointer. Every face and the spine's type are shares of them
   (the prototype's 367 × 551 × 40 book: the spine type is 9px / 19px there). */
.bks-b3d{ position:relative; width:var(--w); height:var(--h); perspective:1800px; }
.bks-b3d-shadow{ position:absolute; left:4%; right:-6%; bottom:calc(var(--h) * -.062); height:calc(var(--h) * .083); border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.85),transparent 70%); filter:blur(8px); }
.bks-b3d-box{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateY(var(--ry)) rotateX(3deg); transition:transform .8s var(--bks-ease); }
.bks-b3d:hover .bks-b3d-box{ transform:rotateY(var(--ryh)) rotateX(3deg) translateY(-10px); }
.bks-b3d-back{ position:absolute; inset:0; transform:translateZ(calc(var(--d) / -2)) rotateY(180deg); border-radius:4px 2px 2px 4px; background:#0a1426; }
/* The page block: always the RIGHT edge. */
.bks-b3d-pages{ position:absolute; top:3px; bottom:3px; left:calc(50% - (var(--d) - 2px) / 2); width:calc(var(--d) - 2px); transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px)); background:repeating-linear-gradient(90deg,#f1f3f6 0 1px,#c9ced8 1px 2px),#e6e9ef; box-shadow:inset 0 0 14px rgba(0,0,0,.35); }
/* The spine: always the LEFT edge. */
.bks-b3d-spine{ position:absolute; top:0; bottom:0; left:calc(50% - var(--d) / 2); width:var(--d); overflow:hidden; transform:rotateY(-90deg) translateZ(calc(var(--w) / 2)); background:#0d1a33; }
.bks .bks-b3d-spine-img{ position:absolute; left:0; top:0; width:auto; max-width:none; height:100%; filter:brightness(.4) saturate(1.1) blur(1px); }
.bks-b3d-spine-shade{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(255,255,255,.08) 45%,rgba(0,0,0,.55)); }
.bks-b3d-spine-title{ position:absolute; left:0; right:0; top:calc(var(--h) * .04); bottom:calc(var(--h) * .127); display:flex; align-items:center; gap:calc(var(--h) * .0127); writing-mode:vertical-rl; font-family:"Inter",sans-serif; line-height:1; white-space:nowrap; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.bks-b3d-sm{ font-size:calc(var(--h) * .01633); font-weight:700; letter-spacing:.14em; }
.bks-b3d-lg{ font-size:calc(var(--h) * .03448); font-weight:900; font-style:italic; letter-spacing:.01em; }
.bks .bks-b3d-logo{ position:absolute; left:50%; bottom:calc(var(--h) * .0327); width:calc(var(--h) * .058); height:auto; transform:translateX(-50%); }
.bks-b3d-front{ position:absolute; inset:0; overflow:hidden; transform:translateZ(calc(var(--d) / 2)); border-radius:2px 5px 5px 2px; box-shadow:0 0 0 1px rgba(255,255,255,.05); }
.bks .bks-b3d-cover{ display:block; width:100%; height:100%; object-fit:cover; }
.bks-b3d-crease{ position:absolute; top:0; bottom:0; left:0; width:calc(var(--w) * .06); background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.18) 35%,rgba(0,0,0,.12) 60%,transparent); }
.bks-b3d-gloss{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%); }

/* ===== 2. Stats ===== */
.bks-stats{ max-width:1280px; margin:0 auto; padding:20px clamp(20px,4vw,48px); }
.bks-stats-row{ display:flex; flex-wrap:wrap; gap:28px 0; }
.bks-stat{ flex:1 1 220px; padding:4px 28px; }
.bks-stat:nth-child(2){ border-left:1px solid rgba(245,197,66,.3); }
.bks-stat:nth-child(3){ border-left:1px solid rgba(91,195,249,.35); }
.bks-stat:nth-child(4){ border-left:1px solid rgba(160,180,220,.2); }
.bks-stat-n{ color:#f4f7fc; font-size:clamp(40px,4.6vw,60px); font-weight:600; letter-spacing:-.045em; line-height:1; }
.bks-stat-n.bks-grad-gold,.bks-stat-n.bks-grad-blue{ color:transparent; }
.bks-stat p{ max-width:200px; margin-top:10px; color:#a3afc6; font-size:14px; line-height:1.45; }
.bks-hairline{ height:1px; margin-top:36px; background:linear-gradient(90deg,rgba(245,197,66,.6),rgba(160,180,220,.18) 50%,rgba(91,195,249,.6)); }
@media (max-width:720px){
  .bks-stat{ padding:4px 0; text-align:center; }
  .bks-stat:nth-child(n){ border-left-width:0; }
  .bks-stat p{ margin-left:auto; margin-right:auto; }
}

/* ===== 3. The books ===== */
.bks-vol{ position:relative; margin-top:60px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:40px 64px; align-items:center; }
.bks-center + .bks-vol{ margin-top:80px; }
.bks-vol--flip .bks-vol-art{ order:2; }
.bks-vol--flip .bks-vol-text{ order:1; }
/* The book column: 440px of room, scaled by --k below 480px. */
.bks-vol-art{ --k:1; position:relative; min-width:0; min-height:calc(620px * var(--k)); display:flex; align-items:center; justify-content:center; }
@media (max-width:479px){ .bks-vol-art{ --k:.86; } }
@media (max-width:419px){ .bks-vol-art{ --k:.77; } }
@media (max-width:379px){ .bks-vol-art{ --k:.68; } }
@media (max-width:339px){ .bks-vol-art{ --k:.63; } }
.bks-vol-glow{ position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(var(--rgb),.26),rgba(var(--rgb),.05) 38%,transparent 64%); }
.bks-vol-ring{ position:absolute; left:50%; top:50%; width:min(480px,92%); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(var(--rgb),.22); }
.bks-vol-book{ position:relative; transform:scale(var(--k)); margin:calc(551px * (var(--k) - 1) / 2) calc(367px * (var(--k) - 1) / 2); }
.bks-vol-eyebrow{ color:var(--t); font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.bks-vol-title{ margin-top:12px; color:#f4f7fc; font-size:clamp(34px,3.8vw,48px); font-weight:700; letter-spacing:-.04em; line-height:1; }
.bks-vol-sub{ margin-top:10px; color:#6f7c96; font-size:15px; }
.bks-vol-desc{ max-width:540px; margin-top:20px; color:#a3afc6; font-size:16px; line-height:1.65; text-wrap:pretty; }
.bks-points{ display:flex; flex-direction:column; gap:11px; margin-top:22px; color:#d6deeb; font-size:14.5px; line-height:1.45; }
.bks-points li{ display:flex; gap:12px; align-items:baseline; }
.bks-points li::before{ content:""; flex:none; width:7px; height:7px; background:var(--c); transform:translateY(-2px) rotate(45deg); }
.bks-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.bks-chips li{ display:flex; align-items:center; min-height:28px; padding:0 12px; border:1px solid rgba(var(--rgb),.3); border-radius:999px; background:rgba(var(--rgb),.06); color:#e6ebf5; font-size:13px; font-weight:500; line-height:1; white-space:nowrap; }
.bks-buy{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:30px; padding-top:26px; border-top:1px solid rgba(160,180,220,.14); }
.bks-note{ color:#6f7c96; font-size:13px; }
.bks .bks-upsell{ display:inline-flex; margin-top:14px; color:#f5c542; font-size:14px; font-weight:600; transition:color .3s; }
.bks .bks-upsell:hover{ color:#f7e3a1; }
/* One column: title -> book -> body. The text dissolves (display:contents) so its
   two halves sit either side of the book. */
@media (max-width:999px){
  .bks-hero-text,.bks-vol-text,.bks-bundle-text{ display:contents; }
  .bks-hero-head,.bks-vol-head,.bks-bundle-head{ order:-1; }
  .bks-hero .bks-stage,.bks-vol .bks-vol-art,.bks-vol--flip .bks-vol-art,.bks-bundle .bks-stage{ order:0; }
  .bks-hero-body,.bks-vol-body,.bks-bundle-body{ order:1; }
  .bks-hero-head,.bks-hero-body{ position:relative; max-width:600px; }
}

/* ===== 4. Preview gallery ===== */
.bks-inside{ --glow:rgba(91,195,249,.16); }
.bks-inside--gold{ --glow:rgba(245,197,66,.14); }
.bks-inside--red{ --glow:rgba(232,40,43,.16); }
.bks-inside-glow{ position:absolute; left:50%; top:58%; width:1200px; height:700px; transform:translate(-50%,-50%); background:radial-gradient(ellipse 30% 45% at 50% 50%,var(--glow),transparent 70%); pointer-events:none; }
.bks-inside-top{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px 40px; }
.bks-inside-h2{ max-width:760px; }
.bks-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.bks-tab{ display:flex; align-items:center; gap:8px; min-height:38px; padding:0 14px; border:1px solid rgba(160,180,220,.16); border-radius:999px; background:transparent; color:#a3afc6; font-size:13px; font-weight:600; cursor:pointer; transition:color .3s,border-color .3s,background .3s; }
.bks-tab:hover{ color:#fff; }
.bks-tab[aria-pressed="true"]{ border-color:rgba(91,195,249,.45); background:rgba(91,195,249,.1); color:#f4f7fc; }
.bks-tab-dot{ width:7px; height:7px; border-radius:50%; background:var(--c); }
.bks-tab-n{ color:#6f7c96; font-weight:500; }

/* Without the script: a row of pages you scroll sideways, each with its caption. */
.bks-cf{ position:relative; margin-top:56px; outline:none; }
.bks-cf:focus-visible{ outline:2px solid rgba(91,195,249,.6); outline-offset:6px; border-radius:8px; }
.bks-cf-list{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 18px; }
.bks-cf-slide{ flex:none; width:clamp(240px,29vw,400px); scroll-snap-align:center; }
.bks-cf-page{ position:relative; display:block; aspect-ratio:612/792; overflow:hidden; border-radius:6px; background:#0B0B0F; box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06); }
.bks-cf-page::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.1),transparent 30%,transparent 72%,rgba(255,255,255,.04)); pointer-events:none; }
.bks .bks-cf-page img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; }
.bks-cf-cap{ margin-top:14px; color:#a3afc6; font-size:13px; line-height:1.45; }
/* With the script (.is-cf): the coverflow. books.js sets each page's transform,
   brightness and stacking from its distance to the centre one. */
.bks-cf.is-cf{ height:clamp(380px,46vw,600px); perspective:1600px; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.bks-cf.is-cf .bks-cf-list{ display:block; overflow:visible; padding:0; }
.bks-cf.is-cf .bks-cf-slide{ position:absolute; left:50%; top:0; transform:translateX(-50%); transition:transform .7s var(--bks-ease),opacity .5s,filter .5s; -webkit-box-reflect:below 6px linear-gradient(transparent 78%,rgba(255,255,255,.1)); }
.bks-cf.is-cf .bks-cf-cap{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.bks-cf.is-cf .bks-cf-slide.is-filtered{ display:none; }
.bks-cf-page{ cursor:zoom-in; }
.bks-cf-slide.is-side .bks-cf-page{ cursor:pointer; }
.bks-cf-arrow{ position:absolute; top:44%; z-index:50; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; border:1px solid rgba(160,180,220,.22); background:rgba(5,8,15,.7); color:#f4f7fc; font-size:20px; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:border-color .3s,background .3s; }
.bks-cf-arrow:hover{ border-color:#5bc3f9; background:rgba(91,195,249,.12); }
.bks-cf-arrow:disabled{ opacity:.35; cursor:default; }
.bks-cf-arrow--prev{ left:0; }
.bks-cf-arrow--next{ right:0; }
.bks-cf-meta{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 40px; align-items:end; margin-top:48px; }
.bks-cf-where{ color:var(--t); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; transition:color .4s; }
.bks-cf-title{ margin-top:8px; color:#f4f7fc; font-size:clamp(22px,2.4vw,30px); font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.bks-cf-count{ display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums; }
.bks-cf-num{ color:#f4f7fc; font-size:34px; font-weight:600; letter-spacing:-.04em; }
.bks-cf-total{ color:#6f7c96; font-size:15px; }
.bks-cf-bar{ grid-column:1/-1; position:relative; height:2px; overflow:hidden; background:rgba(160,180,220,.12); }
.bks-cf-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#f5c542,#5bc3f9); transition:width .6s var(--bks-ease); }
.bks-cf-thumbs{ position:relative; display:flex; gap:12px; margin-top:22px; padding:10px 2px 14px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#23252D transparent; }
.bks-cf-thumb{ position:relative; flex:none; width:62px; aspect-ratio:612/792; padding:0; border:0; border-radius:4px; overflow:hidden; background:#0B0B0F; cursor:pointer; opacity:.45; box-shadow:0 10px 20px -8px rgba(0,0,0,.8); transition:opacity .35s var(--bks-ease),transform .35s var(--bks-ease),box-shadow .35s var(--bks-ease); }
.bks-cf-thumb:hover{ opacity:1; }
.bks-cf-thumb.is-on{ opacity:1; transform:translateY(-4px); box-shadow:0 0 0 2px var(--t),0 10px 20px -8px rgba(0,0,0,.8); }
.bks .bks-cf-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* The lightbox. */
.bks-lb{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:4vh 4vw; background:rgba(3,6,12,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.bks-lb-page{ position:relative; height:min(88vh,1100px); aspect-ratio:612/792; max-width:92vw; overflow:hidden; border-radius:8px; background:#0B0B0F; box-shadow:0 60px 120px -30px #000; }
.bks .bks-lb-page img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.bks-lb-btn{ position:absolute; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; border:1px solid rgba(160,180,220,.25); background:rgba(5,8,15,.7); color:#fff; font-size:22px; cursor:pointer; }
.bks-lb-btn:hover{ border-color:#5bc3f9; }
.bks-lb-prev{ left:3vw; top:50%; transform:translateY(-50%); }
.bks-lb-next{ right:3vw; top:50%; transform:translateY(-50%); }
.bks-lb-close{ right:3vw; top:3vh; width:46px; height:46px; font-size:18px; }
.bks-lb-cap{ position:absolute; left:0; right:0; bottom:2.5vh; color:#a3afc6; font-size:13px; text-align:center; font-variant-numeric:tabular-nums; }
html.bks-lb-open{ overflow:hidden; }

/* ===== 5. Bundle ===== */
.bks-bundle-glow{ position:absolute; left:50%; top:55%; width:1100px; height:640px; transform:translate(-50%,-50%); background:radial-gradient(ellipse 35% 50% at 34% 50%,rgba(245,197,66,.13),transparent 70%),radial-gradient(ellipse 35% 50% at 70% 50%,rgba(47,107,255,.18),transparent 70%); pointer-events:none; }
.bks-bundle-grid{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:48px 64px; align-items:center; }
.bks-bundle-intro{ max-width:500px; }
.bks-bundle-facts{ margin-top:10px; color:#f4f7fc; font-size:14px; font-weight:600; letter-spacing:.02em; }
.bks-plist{ display:flex; flex-direction:column; max-width:500px; margin-top:30px; }
.bks-plist-row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid rgba(160,180,220,.12); }
.bks-plist-row:last-child{ border-bottom:1px solid rgba(160,180,220,.12); }
.bks-plist-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }
.bks-plist-name{ flex:1; color:#d6deeb; font-size:15px; }
.bks-plist-price{ color:#6f7c96; font-size:14px; }
.bks-bprice{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px 20px; margin-top:28px; }
.bks-bprice-main{ display:flex; flex-direction:column; }
.bks-bprice-n{ margin-top:6px; font-size:64px; font-weight:600; letter-spacing:-.045em; line-height:1; }
.bks-bprice-side{ display:flex; flex-direction:column; gap:6px; padding-bottom:6px; }
.bks-bprice-was{ color:#6f7c96; font-size:15px; }
.bks-save{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; color:#2bd17e; font-size:14px; font-weight:600; }
.bks-save-pill{ padding:3px 9px; border-radius:999px; background:rgba(43,209,126,.12); box-shadow:inset 0 0 0 1px rgba(43,209,126,.4); }
.bks-buy--bundle{ margin-top:28px; padding-top:0; border-top:0; }

/* ===== 6. Where to start ===== */
.bks-series-h2{ max-width:760px; }
.bks-steps-wrap{ position:relative; margin-top:60px; }
.bks-steps-curve{ position:absolute; left:0; top:0; width:100%; height:clamp(0px,calc(100vw - 760px),200px); pointer-events:none; }
.bks-steps{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:40px 36px; }
.bks-step{ transition:transform .4s var(--bks-ease); }
.bks-step:nth-child(2){ padding-top:clamp(0px,calc(100vw - 760px),90px); }
.bks-step:nth-child(3){ padding-top:clamp(0px,calc(100vw - 760px),20px); }
.bks-step:hover{ transform:translateY(-6px); }
.bks-step-n{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--c); background:#05080f; color:var(--t); font-size:14px; font-weight:700; box-shadow:0 0 0 6px rgba(var(--rgb),.08); }
.bks-step--red .bks-step-n{ box-shadow:0 0 0 6px rgba(232,40,43,.1); }
.bks-step h3{ margin-top:18px; color:#fff; font-size:20px; font-weight:600; letter-spacing:-.015em; }
.bks-step p{ margin-top:10px; color:#d6deeb; font-size:15px; line-height:1.6; }

/* ===== 7. Authors ===== */
.bks-authors-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:40px 64px; margin-top:60px; }
.bks-author{ display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px; }
.bks-author > div:last-child{ flex:1 1 220px; }
.bks-author-pic{ position:relative; flex:none; width:180px; height:220px; }
.bks-author-glow{ position:absolute; inset:0; }
.bks-author--gold .bks-author-glow{ background:radial-gradient(circle at 50% 50%,rgba(245,197,66,.3),transparent 66%); }
.bks-author--blue .bks-author-glow{ background:radial-gradient(circle at 50% 50%,rgba(47,107,255,.34),transparent 66%); }
.bks .bks-author-pic img{ position:relative; width:100%; height:100%; object-fit:contain; object-position:50% 100%; -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 98%); mask-image:linear-gradient(180deg,#000 70%,transparent 98%); }
.bks-author-role{ font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.bks-author--gold .bks-author-role{ color:#f5c542; }
.bks-author--blue .bks-author-role{ color:#5bc3f9; }
.bks-author-name{ margin-top:10px; color:#f4f7fc; font-size:32px; font-weight:700; letter-spacing:-.04em; line-height:1; }
.bks-author-bio{ margin-top:12px; color:#a3afc6; font-size:15px; line-height:1.6; }

/* ===== 8. FAQ ===== */
.bks-faq-sec{ max-width:900px; }
.bks-faq-h2{ font-size:clamp(30px,4vw,46px); line-height:1.06; }
.bks-faq{ margin-top:40px; border-bottom:1px solid rgba(160,180,220,.12); }
.bks-faq-item{ border-top:1px solid rgba(160,180,220,.12); }
.bks-faq-item summary{ display:flex; align-items:center; gap:20px; min-height:64px; padding:16px 0; color:#d6deeb; font-size:17px; font-weight:600; letter-spacing:-.01em; list-style:none; cursor:pointer; transition:color .2s; }
.bks-faq-item summary::-webkit-details-marker{ display:none; }
.bks-faq-item summary:hover,.bks-faq-item[open] summary{ color:#f4f7fc; }
.bks-faq-q{ flex:1; font:inherit; color:inherit; letter-spacing:inherit; }
.bks-faq-sign{ flex:none; color:#5bc3f9; font-size:22px; font-weight:400; line-height:1; }
.bks-faq-sign::before{ content:"+"; }
.bks-faq-item[open] .bks-faq-sign{ color:#f5c542; }
.bks-faq-item[open] .bks-faq-sign::before{ content:"\2212"; }
.bks-faq-a{ display:flex; flex-direction:column; gap:12px; max-width:720px; padding:0 0 24px; }
.bks-faq-a p{ color:#a3afc6; font-size:15.5px; line-height:1.65; text-wrap:pretty; }

/* ===== 9. Final CTA ===== */
.bks-final{ position:relative; overflow:hidden; padding:clamp(110px,13vw,180px) clamp(20px,4vw,48px) clamp(90px,10vw,140px); text-align:center; }
.bks-final-glow{ position:absolute; left:50%; top:50%; width:1100px; height:600px; transform:translate(-50%,-50%); background:radial-gradient(ellipse 35% 50% at 32% 50%,rgba(245,197,66,.14),transparent 70%),radial-gradient(ellipse 35% 50% at 68% 50%,rgba(47,107,255,.2),transparent 70%); pointer-events:none; }
.bks-final-h2{ position:relative; color:#f4f7fc; font-size:clamp(44px,7vw,96px); font-weight:700; letter-spacing:-.045em; line-height:.95; text-wrap:balance; }
.bks-final-h2 span{ background:linear-gradient(90deg,#f5c542,#e0975a 40%,#5bc3f9 70%,#2f6bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bks-final-sub{ position:relative; max-width:560px; margin:22px auto 0; color:#a3afc6; font-size:17px; line-height:1.6; }
.bks-final-links{ position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:20px 48px; margin-top:48px; }
/* Once they no longer fit on one row: one column, centred as a group and lined up
   on the left inside it, so the four discs sit under each other (owner, 2026-10-30:
   wrapped rows each centred on their own width left the discs zig-zagging). */
@media (max-width:959px){
  .bks-final-links{ display:grid; grid-template-columns:auto; justify-content:center; justify-items:start; gap:22px; }
}
.bks .bks-final-link{ display:flex; align-items:center; gap:14px; color:#f4f7fc; text-align:left; transition:transform .4s var(--bks-ease),color .3s; }
.bks .bks-final-link:hover{ color:#fff; transform:translateY(-2px); }
.bks-disc{ display:grid; place-items:center; flex:none; width:56px; height:56px; border-radius:50%; box-shadow:0 0 0 2px #05080f,0 0 0 3px var(--c); color:var(--t); font-family:"Orbitron",sans-serif; font-size:20px; font-weight:800; }
.bks-final-link--all .bks-disc{ background:linear-gradient(180deg,#f7d97a,#f5c542 55%,#d9a52a); box-shadow:0 0 0 2px #05080f,0 0 0 3px #f5c542,0 12px 34px -6px rgba(245,197,66,.5); color:#1a1204; font-size:16px; }
.bks-final-name{ display:block; font-size:17px; font-weight:600; }
.bks-final-price{ display:block; margin-top:2px; color:#6f7c96; font-size:14px; }
.bks-final-link--all .bks-final-price{ color:#f5c542; font-weight:600; }

/* ===== Reduced motion: nothing turns, lifts or glides ===== */
@media (prefers-reduced-motion:reduce){
  .bks *,.bks *::before,.bks *::after{ transition:none !important; }
  .bks-b3d:hover .bks-b3d-box{ transform:rotateY(var(--ry)) rotateX(3deg); }
  .bks a.bks-btn[href]:hover,.bks-step:hover,.bks .bks-final-link:hover,.bks-cf-thumb.is-on{ transform:none; }
  .bks-cf-list{ scroll-behavior:auto; }
}