/* ============================================================
   Menno Henselmans site redesign, book page, concept v4 (VOM)
   Full dark edition, blue accent. Minimum readable text: 16px.
   Shared design system inherited from home/about/contact pages.
   ============================================================ */
:root{
  --bg:#0a0a0c; --bg-alt:#0f0f13; --bg-soft:#101015;
  --surface:#141519; --surface-2:#1b1d23; --surface-hi:#202229;
  --ink:#f4f5f7; --ink-soft:#c8cdd6; --ink-mute:#a8adb5;
  --accent:#2f86f0; --accent-2:#6aa3ee; --accent-deep:#1f5fc0;
  /* De knopvulling is losgetrokken van de merkkleur: wit op #2674d2 haalde 4,66
     en op de hover #3a8bef zelfs 3,43, onder de wettelijke vloer. De identiteits-
     blauw --accent blijft ongewijzigd voor randen, gloed en grote tekst. */
  --accent-btn:#1b529b; --accent-btn-hi:#205ead;
  --link:#9cc4f7;
  --warm:#f5b929; --success:#34d27b; --tp:#00b67a;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.17);
  --r-btn:9px; --r-card:14px; --r-lg:20px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --container:1180px;
  --shadow-card:0 1px 0 rgba(255,255,255,.03), 0 18px 44px rgba(0,0,0,.45);
  --shadow-hi:0 2px 0 rgba(255,255,255,.04), 0 30px 70px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(47,134,240,.25), 0 18px 60px rgba(31,95,192,.35);
  --paper:#f6f1e6; --paper-ink:#2a2620;
}
*{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth; font-size:16px}
img,svg{max-width:100%; display:block}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:1.0625rem; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:'Hanken Grotesk',sans-serif; color:#fff; line-height:1.08; letter-spacing:-.02em; margin:0; text-wrap:balance}
h1{font-size:clamp(2.5rem, 1.8rem + 3.1vw, 3.85rem); font-weight:800; letter-spacing:-.025em; text-wrap:balance}
h2{font-size:clamp(2rem, 1.4rem + 2.2vw, 2.9rem); font-weight:700}
h3{font-size:1.3rem; font-weight:700; letter-spacing:-.01em}
p{margin:0; text-wrap:pretty}
a{color:var(--link); text-decoration:none}
strong{font-weight:700}
em{font-style:normal; color:#fff; font-weight:600}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.section{padding:88px 0}
.section--alt{background:var(--bg-alt)}
@media(max-width:760px){.section{padding:48px 0}}
.eyebrow{display:inline-flex; align-items:center; gap:11px; font-size:1rem; font-weight:600; color:var(--accent-2); margin-bottom:20px}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); border-radius:2px}
.hl{position:relative; color:#fff; white-space:nowrap; background:linear-gradient(100deg,var(--accent-2),#a9c9f5 55%,var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hl::after{content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.1em; border-radius:99px; background:linear-gradient(90deg,var(--accent-deep),var(--accent),#7db0f4); opacity:.95}
/* Zonder margin-bottom plakte het blok eronder tegen de kop. Zelfde maat als
   .buy-head, zodat elke gecentreerde kop op de pagina dezelfde lucht krijgt. */
.center-head{margin-left:auto; margin-right:auto; text-align:center; max-width:720px; margin-bottom:38px}
.center-head .eyebrow{justify-content:center}
.center-head p{color:var(--ink-soft); font-size:1.16rem; margin-top:12px}

/* Trustpilot mark */
.tp{display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--ink-soft); font-size:1rem; white-space:nowrap}
.tp-sq{display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; flex:none}
.tp-sq svg{width:18px; height:18px; fill:var(--tp)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:14px 26px; font-family:'Inter',sans-serif; font-weight:600; font-size:1.0625rem; border-radius:var(--r-btn); border:1.5px solid transparent; cursor:pointer; transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); text-decoration:none}
.btn .arw{transition:transform .18s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--accent-btn); color:#fff; box-shadow:0 10px 30px rgba(38,116,210,.35)}
.btn-primary:hover{background:var(--accent-btn-hi); transform:translateY(-2px); box-shadow:0 16px 40px rgba(38,116,210,.5)}
.btn-primary:active{transform:translateY(0); box-shadow:none}
.btn-primary:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.btn-ghost{background:transparent; color:#fff; border-color:var(--border-2)}
.btn-ghost:hover{border-color:var(--accent-2); background:rgba(255,255,255,.04)}
.btn-ghost:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.btn-lg{min-height:56px; padding:16px 30px; font-size:1.12rem}
.textlink{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--accent-2); font-size:1rem}
.textlink:hover{color:#bcd6fb; text-decoration:underline; text-underline-offset:3px}
.textlink .arw{transition:transform .18s var(--ease)}
.textlink:hover .arw{transform:translateX(3px)}
.textlink:focus-visible,.brand:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px; border-radius:5px}
.skip{position:absolute; left:-9999px; top:0; z-index:200}
.skip:focus{left:16px; top:16px; padding:12px 18px; background:#fff; color:#0a0a0c; border-radius:var(--r-btn); font-weight:700}

/* NAV */
.nav{position:sticky; top:0; z-index:80; background:rgba(10,10,12,.72); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid transparent; transition:border-color .2s, background .2s, box-shadow .2s}
.nav.scrolled{border-bottom-color:var(--border); background:rgba(10,10,12,.92); box-shadow:0 10px 30px rgba(0,0,0,.5)}
.nav-in{display:flex; align-items:center; gap:14px; height:72px; max-width:var(--container); margin:0 auto; padding:0 24px; transition:height .2s var(--ease)}
.nav.scrolled .nav-in{height:62px}
.brand{display:inline-flex; align-items:center; font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:1.28rem; color:#fff; letter-spacing:-.02em; white-space:nowrap}
.brand span{color:var(--accent-2)}
.brand-logo{height:40px; width:auto; display:block}
.nav.scrolled .brand-logo{height:34px; transition:height .2s var(--ease)}
.drawer .brand-logo{height:26px}
.footer .brand-logo{height:40px}
.nav-links{display:flex; align-items:center; flex:0 0 auto; gap:0; margin:0 auto 0 10px; padding:0; list-style:none}
.nav-links>li{position:relative}
.nav-links .has-menu{display:flex; align-items:stretch}
.nav-links a,.nav-links .menu-btn{display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); font-family:inherit; font-weight:500; font-size:1rem; padding:10px 11px; border-radius:9px; background:none; border:none; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s}
.nav-links a:hover,.nav-links .menu-btn:hover,.nav-links .menu-btn[aria-expanded="true"]{background:rgba(255,255,255,.06); color:#fff}
.nav-links a[aria-current="page"]{color:#fff; background:rgba(47,134,240,.14)}
.nav-links a:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--accent-2); outline-offset:1px}
.menu-btn .chev{transition:transform .2s var(--ease)}
.has-menu:hover .menu-btn .chev,.menu-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-links .menu-link{padding-right:5px; border-radius:9px 0 0 9px}
.nav-links .menu-toggle{padding-left:2px; padding-right:10px; margin-left:0; gap:0; border-radius:0 9px 9px 0}
.has-menu:hover .menu-link,.has-menu:hover .menu-toggle,.has-menu:focus-within .menu-link,.has-menu:focus-within .menu-toggle{background:rgba(255,255,255,.06); color:#fff}
.mega{position:absolute; top:calc(100% + 4px); left:0; transform:translateY(6px); min-width:240px; background:#101116; border:1px solid var(--border-2); border-radius:14px; padding:10px; box-shadow:var(--shadow-hi); opacity:0; visibility:hidden; transition:opacity .16s var(--ease), transform .16s var(--ease); z-index:90}
.mega::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px}
.mega.wide{min-width:320px}
.mega--right{left:auto; right:0}
.has-menu:hover .mega,.has-menu:focus-within .mega,.mega.open{opacity:1; visibility:visible; transform:translateY(0)}
.mega a{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:11px 13px; border-radius:9px; color:var(--ink-soft); font-size:1rem; font-weight:500; text-align:left}
.mega a:hover{background:rgba(255,255,255,.06); color:#fff}
.mega a small{color:var(--ink-mute); font-size:1rem; font-weight:400}
.mega a[aria-current="page"]{background:rgba(47,134,240,.12); color:#fff}
.mega .lang-row{display:grid; grid-template-columns:1fr 1fr; gap:2px}
.mega .mega-sep{height:1px; background:var(--border); margin:7px 6px}
.nav-cta{margin-left:6px; white-space:nowrap}
.nav-burger{display:none; align-items:center; justify-content:center; width:46px; height:46px; margin-left:auto; border:1px solid var(--border-2); border-radius:10px; background:rgba(255,255,255,.04); color:#fff; cursor:pointer}
.nav-burger:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
@media(max-width:1180px){.nav-links,.nav-cta{display:none} .nav-burger{display:inline-flex}}

/* DRAWER */
.drawer{position:fixed; inset:0 0 0 auto; width:min(420px,92vw); background:#0c0d11; border-left:1px solid var(--border-2); transform:translateX(100%); transition:transform .26s var(--ease); z-index:120; display:flex; flex-direction:column; padding:20px 20px 28px; overflow-y:auto}
.drawer.open{transform:none}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.drawer-close{width:44px; height:44px; border-radius:10px; border:1px solid var(--border-2); background:rgba(255,255,255,.04); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center}
.drawer-close:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.drawer .acc{border-top:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center}
.drawer .acc-link{flex:1 1 auto; min-width:0; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.12rem; padding:16px 4px; text-decoration:none}
.drawer .acc-link:hover{color:var(--accent-2)}
.drawer .acc-q{flex:0 0 auto; width:auto; min-width:44px; min-height:44px; text-align:left; background:none; border:none; color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.12rem; padding:16px 12px; display:flex; justify-content:center; align-items:center; cursor:pointer}
.drawer .acc-q .pm{transition:transform .2s var(--ease); color:var(--accent-2)}
.drawer .acc-q[aria-expanded="true"] .pm{transform:rotate(45deg)}
.drawer .acc-p{flex-basis:100%; max-height:0; overflow:hidden; transition:max-height .26s var(--ease)}
.drawer .acc-p a{display:block; padding:10px 8px; color:var(--ink-soft); font-size:1rem; font-weight:500}
.drawer .acc-p a:hover{color:#fff}
.drawer .direct{display:block; color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.12rem; padding:16px 4px; border-top:1px solid var(--border)}
.drawer .direct[aria-current="page"]{color:var(--accent-2)}
.drawer .btn{margin-top:18px; width:100%}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .26s; z-index:110}
.scrim.open{opacity:1; visibility:visible}

/* HERO */
.bhero{position:relative; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--border)}
.bhero::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(ellipse 52% 48% at 84% 16%, rgba(47,134,240,.22), transparent 60%), radial-gradient(ellipse 46% 50% at 2% 100%, rgba(31,95,192,.16), transparent 62%)}
.bhero::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(ellipse 80% 75% at 60% 35%,#000 30%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 80% 75% at 60% 35%,#000 30%,transparent 78%)}
.bhero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; padding:52px 24px 50px}
.bhero h1{margin-bottom:16px}
.bhero-sub{font-size:1.2rem; color:var(--ink-soft); max-width:46ch; margin-bottom:20px}
.bhero-quote{display:flex; gap:16px; align-items:center; padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 14px 14px 0; margin-bottom:20px; max-width:48ch}
.bhero-quote img{width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--border-2)}
.bhero-quote p{color:#fff; font-size:1.08rem; line-height:1.45}
.bhero-quote cite{display:block; margin-top:7px; font-style:normal; color:var(--ink-mute); font-size:1rem; font-weight:600}
.bhero-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:26px}
.bhero-rail{display:flex; flex-wrap:wrap; gap:10px 24px; padding-top:16px; border-top:1px solid var(--border); max-width:52ch}
/* Op een telefoon vielen deze drie feiten in een ongelijke tweeregelige brei.
   Onder elkaar lezen ze als een lijstje en staan de bolletjes recht onder elkaar. */
@media(max-width:560px){
  .bhero-rail{flex-direction:column; gap:11px}
  .bhero-rail span{font-size:1.02rem}
}
.bhero-rail span{display:inline-flex; align-items:center; gap:9px; font-size:1rem; color:var(--ink-mute)}
.bhero-rail .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-2); flex:none}
.bhero-rail b{color:var(--ink-soft); font-weight:700}

/* CSS 3D hardcover, cover stays pixel-perfect (no AI distortion) */
.bhero-media{position:relative; display:flex; justify-content:center}
.book3d-stage{position:relative; width:312px; height:428px; perspective:1850px; display:flex; align-items:center; justify-content:center}
.book3d-stage::after{content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:268px; height:36px; background:radial-gradient(ellipse, rgba(0,0,0,.62), transparent 72%); filter:blur(8px); z-index:0}
.book3d{position:relative; width:0; height:0; transform-style:preserve-3d; transform:rotateX(5deg) rotateY(-28deg) scale(1.16); transition:transform .6s var(--ease); z-index:1}
.bhero-media:hover .book3d{transform:rotateX(4deg) rotateY(-18deg) scale(1.16)}
.book3d .bf{position:absolute; left:0; top:0; backface-visibility:hidden}
.book3d .b-front{width:264px; height:392px; transform:translate(-50%,-50%) translateZ(19px); border-radius:2px 6px 6px 2px; overflow:hidden; box-shadow:inset -18px 0 34px -18px rgba(0,0,0,.55)}
.book3d .b-front img{width:100%; height:100%; object-fit:cover; display:block}
.book3d .b-back{width:264px; height:392px; transform:translate(-50%,-50%) rotateY(180deg) translateZ(19px); background:#141d28; border-radius:6px 2px 2px 6px}
.book3d .b-spine{width:38px; height:392px; transform:translate(-50%,-50%) rotateY(-90deg) translateZ(132px); background:linear-gradient(90deg,#0c141d,#1d2d40 58%,#0c141d)}
.book3d .b-edge{width:38px; height:392px; transform:translate(-50%,-50%) rotateY(90deg) translateZ(132px); background:repeating-linear-gradient(90deg,#efe9db,#efe9db 1px,#d8d1c0 2px,#efe9db 3px)}
.book3d .b-top{width:264px; height:38px; transform:translate(-50%,-50%) rotateX(90deg) translateZ(196px); background:repeating-linear-gradient(90deg,#efe9db,#efe9db 1px,#dcd5c5 2px,#efe9db 3px)}
.book3d .b-bottom{width:264px; height:38px; transform:translate(-50%,-50%) rotateX(-90deg) translateZ(196px); background:#cfc8b8}
.book-amz{position:absolute; top:-12px; right:-6px; z-index:4; background:#fff; border-radius:12px; padding:9px 12px; box-shadow:0 12px 26px rgba(0,0,0,.5); transform:rotate(4deg)}
.book-amz img{width:104px; height:auto; display:block}
@media(max-width:960px){
  .bhero-in{grid-template-columns:1fr; gap:32px; padding:36px 24px 34px}
  .bhero-media{order:-1}
  .bhero-sub,.bhero-quote,.bhero-rail{max-width:none}
}
@media(max-width:600px){
  /* De hero was op de telefoon 1604px hoog en duwde alles onder de vouw. De twee
     knoppen staan nu naast elkaar, het citaat blijft een rij en het boek is
     kleiner. */
  .bhero-actions{flex-direction:row; align-items:stretch; gap:10px}
  .bhero-actions .btn{width:auto; flex:1 1 0; min-width:0; justify-content:center; padding-left:12px; padding-right:12px; font-size:1.04rem; white-space:nowrap}
  /* Naast elkaar past "Get the book" niet met pijl erbij: op 390px brak het label
     over twee regels. De pijl is versiering, het label niet. */
  .bhero-actions .btn .arw{display:none}
  .book3d-stage{transform:scale(.72); margin:-60px 0}
  .bhero-quote{flex-direction:row; text-align:left; align-items:center; gap:13px}
}

/* FEATURED IN */
.cred{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:30px 0}
.cred-lbl{text-align:center; font-size:1rem; color:var(--ink-mute); font-weight:600; margin-bottom:20px; padding:0 24px}
/* Zelfde behandeling als op de cursuspagina: op een breed scherm een nette rij,
   op een telefoon een doorlopende band met een vervaagde rand. Zonder dat brak de
   rij in drie rommelige regels, en het waren de LOGO's die dat deden, niet de
   ruimte. De tweede set staat er alleen voor de doorloop en is voor schermlezers
   verborgen. */
.marquee{position:relative; overflow:hidden}
.marquee-track{display:flex; align-items:center; justify-content:center; gap:20px 40px; width:100%; padding:0 24px; flex-wrap:wrap}
.marquee-track .dup{display:none}
@keyframes bk-scrollx{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media(max-width:900px){
  .marquee{mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .marquee-track{flex-wrap:nowrap; justify-content:flex-start; width:max-content; gap:54px; padding:0; animation:bk-scrollx 22s linear infinite}
  .marquee-track .dup{display:block}
  .marquee-track img{height:26px}
  .marquee-track .l-mw{height:19px}
}
.marquee-track img{width:auto; max-width:190px; object-fit:contain; filter:brightness(0) invert(1); opacity:.82; transition:opacity .2s}
.marquee-track img:hover{opacity:1}
.marquee-track .l-huff{height:25px}
.marquee-track .l-times{height:28px}
.marquee-track .l-mw{height:20px}
.marquee-track .l-jeff{height:26px}
.marquee-track .badge-pill{display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:var(--r-pill); border:1px solid var(--border-2); background:rgba(255,255,255,.04); color:var(--ink-soft); font-size:1rem; font-weight:600; white-space:nowrap}
.marquee-track .badge-pill svg{width:17px; height:17px; fill:var(--warm)}

/* GENERIC narrative blocks (Menno's voice) */
.narr-in{display:grid; grid-template-columns:.94fr 1.06fr; gap:52px; align-items:center}
.narr-copy .eyebrow{margin-bottom:18px}
.narr-copy h2{margin-bottom:20px}
.narr-copy p{color:var(--ink-soft); font-size:1.14rem; margin-bottom:18px; max-width:54ch}
.narr-copy p strong{color:#fff; font-weight:600}
.narr-copy p:last-child{margin-bottom:0}
.loop-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px 32px; box-shadow:var(--shadow-card)}
.loop-card .lc-lbl{display:block; font-family:'Hanken Grotesk'; font-weight:700; color:#fff; font-size:1.16rem; margin-bottom:18px}
.loop-list{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:12px}
.loop-list li{position:relative; padding-left:32px; color:var(--ink-soft); font-size:1.06rem; line-height:1.45}
.loop-list li::before{content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%; background:rgba(245,185,41,.14); border:1px solid rgba(245,185,41,.4)}
.loop-list li::after{content:""; position:absolute; left:6.5px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--warm)}
.loop-card .lc-foot{display:flex; align-items:center; gap:11px; padding-top:20px; border-top:1px solid var(--border); color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.08rem}
.loop-card .lc-foot svg{color:var(--warm); flex:none}
@media(max-width:860px){.narr-in{grid-template-columns:1fr; gap:34px} .narr-copy p{max-width:none}}

/* brain split visual */
.brain-fig{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px}
.brain-col{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow-card)}
.brain-col .bi{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.brain-col.old .bi{background:rgba(245,185,41,.13); border:1px solid rgba(245,185,41,.34); color:var(--warm)}
.brain-col.new .bi{background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2)}
.brain-col h3{color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.12rem; margin-bottom:10px}
.brain-col p{color:var(--ink-soft); font-size:1.02rem; margin:0}
.brain-vs{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:46px; height:46px; border-radius:50%; background:#0d0f14; border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; font-family:'Hanken Grotesk'; font-weight:800; color:var(--ink-mute); font-size:1rem}
@media(max-width:560px){.brain-fig{grid-template-columns:1fr} .brain-vs{display:none}}

/* DISCOVER */
.disc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px}
.dcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-card)}
.dcard .ic{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); margin-bottom:16px}
.dcard h3{color:#fff; margin-bottom:14px; font-size:1.18rem}
.dcard ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.dcard li{position:relative; padding-left:26px; color:var(--ink-soft); font-size:1.02rem; line-height:1.4}
.dcard li::before{content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%; border:2px solid var(--accent-2); background:rgba(47,134,240,.18)}
.disc-more{margin-top:22px; display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap; background:linear-gradient(120deg,#15171d,#101218); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 28px; text-align:center}
.disc-more b{color:#fff; font-family:'Hanken Grotesk'; font-weight:800; font-size:1.3rem}
.disc-more span{color:var(--ink-soft); font-size:1.06rem}
@media(max-width:920px){.disc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.disc-grid{grid-template-columns:1fr}}

/* ============================================================
   LOOK INSIDE: interactive single-leaf page-turn preview
   ============================================================ */
.look{position:relative; overflow:hidden; background:radial-gradient(ellipse 54% 60% at 16% 0%, rgba(47,134,240,.16), transparent 60%), linear-gradient(180deg,#0c0e13,#0a0a0c)}
.look .container{position:relative; z-index:1}
.look-in{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center}
.look-copy h2{margin-bottom:16px}
.look-copy p{color:var(--ink-soft); font-size:1.14rem; margin-bottom:18px; max-width:46ch}
.look-tipbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.look-tipbar .tipchip{display:inline-flex; align-items:center; gap:8px; font-size:1rem; color:var(--ink-soft); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:8px 15px}
.look-tipbar .tipchip svg{color:var(--accent-2); flex:none}
.flip-wrap{display:flex; flex-direction:column; align-items:center; gap:18px}
.flip-stage{position:relative; width:100%; max-width:380px; aspect-ratio:520/758; perspective:2200px}
.flip-pages{position:absolute; inset:0; transform-style:preserve-3d}
.leaf{position:absolute; inset:0; transform-origin:left center; transition:transform .7s var(--ease); transform-style:preserve-3d; border-radius:3px 7px 7px 3px; box-shadow:6px 8px 26px rgba(0,0,0,.5); cursor:pointer; will-change:transform}
.leaf.cover-leaf{cursor:pointer}
.leaf .pg{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:3px 7px 7px 3px; overflow:hidden}
.leaf .pg-front{background:var(--paper)}
.leaf .pg-back{transform:rotateY(180deg); background:#efe7d6}
.leaf.flipped{transform:rotateY(-178deg)}
.leaf .cover-img{width:100%; height:100%; object-fit:cover; display:block}
/* paper page content */
/* Heette .page en dat is een van de klassen die WordPress op de BODY zet.
   Daardoor kreeg de hele pagina position:absolute, 30px 26px padding en een
   verloop als achtergrond zodra hij in WordPress draaide. Op preview.php was
   dat onzichtbaar, want die heeft geen WordPress-body. Nooit een generieke
   klassenaam gebruiken die WordPress ook uitdeelt. */
.bkpage{position:absolute; inset:0; padding:30px 26px; color:var(--paper-ink); font-family:'Inter',serif; display:flex; flex-direction:column; background:linear-gradient(90deg, rgba(0,0,0,.07), transparent 7%)}
.bkpage .pg-eyebrow{font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1rem; letter-spacing:.04em; text-transform:none; color:#9c7a2e; margin-bottom:12px}
.bkpage h5{font-family:'Hanken Grotesk',sans-serif; font-weight:800; color:#211d17; font-size:1.34rem; line-height:1.12; margin:0 0 14px}
.bkpage p{font-size:1rem; line-height:1.5; color:#3a352c; margin:0 0 10px}
.bkpage .pg-num{margin-top:auto; align-self:center; font-size:1rem; color:#a99c80; font-variant-numeric:tabular-nums}
.bkpage.title-pg{align-items:center; justify-content:center; text-align:center}
.bkpage.title-pg .tp-h{font-family:'Hanken Grotesk',sans-serif; font-weight:800; color:#211d17; font-size:1.7rem; line-height:1.06; margin-bottom:14px}
.bkpage.title-pg .tp-sub{font-size:1rem; color:#524b3f; max-width:24ch; margin-bottom:22px}
.bkpage.title-pg .tp-rule{width:54px; height:2px; background:#caa64e; margin-bottom:20px}
.bkpage.title-pg .tp-author{font-family:'Hanken Grotesk',sans-serif; font-weight:700; color:#2e2a22; font-size:1.04rem}
.flip-controls{display:flex; align-items:center; gap:14px}
.flip-controls button{width:48px; height:48px; border-radius:50%; border:1px solid var(--border-2); background:var(--surface); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s, transform .15s}
.flip-controls button:hover:not(:disabled){border-color:var(--accent-2); background:rgba(255,255,255,.07)}
.flip-controls button:disabled{opacity:.35; cursor:not-allowed}
.flip-controls button:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.flip-counter{font-size:1rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:78px; text-align:center}
.flip-hint{font-size:1rem; color:var(--ink-mute)}
/* Op de telefoon stond het bladerboek boven zijn eigen kop, en daaronder kwam
   dezelfde uitnodiging nog een keer: een link "Open full-size reader" onder het
   boek en een knop "Open reader" in de tekst. De kop gaat nu voorop en er
   blijft een knop over. */
@media(max-width:860px){
  .look-in{grid-template-columns:1fr; gap:28px}
  .look-copy p{max-width:none}
  .flip-wrap{order:0}
  .look-tipbar{justify-content:flex-start}
  #openReaderAlt{display:none}
}

/* ============================================================
   TABLE OF CONTENTS: expandable per chapter
   ============================================================ */
.toc-wrap{max-width:880px; margin:30px auto 0; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card)}
.toc-ch{border-bottom:1px solid var(--border); background:var(--surface)}
.toc-ch:last-child{border-bottom:none}
.toc-ch-btn{width:100%; display:flex; align-items:center; gap:16px; text-align:left; background:none; border:none; cursor:pointer; padding:22px 24px; font-family:inherit; transition:background .15s}
.toc-ch-btn:hover{background:rgba(255,255,255,.03)}
.toc-ch-btn:focus-visible{outline:2px solid var(--accent-2); outline-offset:-2px}
.toc-ch-btn .ch-n{flex:none; width:42px; height:42px; border-radius:11px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--link); font-family:'Hanken Grotesk'; font-weight:800; font-size:1.16rem; display:flex; align-items:center; justify-content:center}
.toc-ch-btn .ch-t{flex:1; min-width:0}
.toc-ch-btn .ch-t b{display:block; color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.16rem; line-height:1.2}
.toc-ch-btn .ch-t span{display:block; color:var(--ink-mute); font-size:1rem; margin-top:3px}
.toc-ch-btn .pm{flex:none; color:var(--accent-2); transition:transform .25s var(--ease)}
.toc-ch-btn[aria-expanded="true"] .pm{transform:rotate(45deg)}
.toc-panel{max-height:0; overflow:hidden; transition:max-height .35s var(--ease)}
.toc-panel-in{padding:2px 24px 22px 82px}
.toc-panel ul{list-style:none; margin:0; padding:0; display:grid; gap:1px}
.toc-panel li{color:var(--ink-soft); font-size:1.02rem; line-height:1.4; padding:7px 0; border-top:1px solid rgba(255,255,255,.05)}
.toc-panel li:first-child{border-top:none}
.toc-panel li.sub{padding-left:22px; color:var(--ink-mute); font-size:1rem}
.toc-allbtn{display:flex; justify-content:center; margin-top:22px}
@media(max-width:600px){.toc-panel-in{padding:2px 20px 20px 22px}}

/* REVIEWS */
.rev-score{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:34px}
/* Op de telefoon stonden het cijfer en de sterren scheef naast elkaar. Onder
   elkaar en gecentreerd leest het als een blok. */
@media(max-width:600px){
  .rev-score{flex-direction:column; gap:10px; margin-bottom:28px}
  .rev-score .meta{text-align:center}
}
.rev-score .big{font-family:'Hanken Grotesk'; font-weight:800; font-size:3rem; color:#fff; line-height:1; font-variant-numeric:tabular-nums}
.rev-score .meta{text-align:left}
.rev-score .stars{margin-bottom:6px}
.rev-score .meta span:not(.stars){display:block; color:var(--ink-soft); font-size:1.02rem}
.stars{display:inline-flex; gap:3px}
.stars svg{width:19px; height:19px; fill:var(--warm)}
/* Deels gevulde ster: de score is 4,6 en dat mag niet als vijf volle sterren staan. */
.stars .star-part{position:relative; display:inline-block; width:19px; height:19px; flex:none}
.stars .star-part svg{position:absolute; top:0; left:0}
.stars .star-part .s-bg{fill:rgba(255,255,255,.22)}
.stars .star-part .s-fg{clip-path:inset(0 40% 0 0)}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.rcard-q{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-card)}
.rcard-q .stars{margin-bottom:13px}
.rcard-q .rh{font-family:'Hanken Grotesk'; font-weight:700; color:#fff; font-size:1.1rem; margin-bottom:10px}
.rcard-q blockquote{margin:0 0 22px; color:var(--ink-soft); font-size:1.04rem; line-height:1.58}
.rcard-q .who{display:flex; align-items:center; gap:13px; margin-top:auto}
.rcard-q .who .av{width:44px; height:44px; border-radius:50%; flex:none; border:1px solid var(--border-2); object-fit:cover; background:linear-gradient(150deg,var(--accent-deep),var(--accent-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Hanken Grotesk'; font-weight:800; font-size:1.05rem}
.rcard-q .who b{display:block; color:#fff; font-size:1.02rem}
.rcard-q .who small{color:var(--ink-mute); font-size:1rem}
.rcard-q .vbadge{display:inline-flex; align-items:center; gap:5px; margin-left:auto; font-size:1rem; color:var(--success); font-weight:600; flex:none}
@media(max-width:920px){.rev-grid{grid-template-columns:1fr}}

/* PITCH (worth a thousand dollars) */
.pitch{position:relative; overflow:hidden; background:radial-gradient(ellipse 58% 60% at 82% -10%, rgba(47,134,240,.2), transparent 60%), linear-gradient(180deg,#0c0e13,#0a0a0c)}
.pitch-in{max-width:760px; margin:0 auto; text-align:center; position:relative; z-index:1}
.pitch-in h2{margin-bottom:20px}
.pitch-in p{color:var(--ink-soft); font-size:1.16rem; margin-bottom:18px}
.pitch-in p strong{color:#fff; font-weight:600}
.pitch-calc{display:inline-flex; flex-direction:column; gap:6px; margin:8px auto 0; padding:22px 30px; background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg); box-shadow:var(--shadow-card)}
.pitch-calc b{font-family:'Hanken Grotesk'; font-weight:800; color:#fff; font-size:2.2rem; line-height:1; font-variant-numeric:tabular-nums}
.pitch-calc span{color:var(--ink-soft); font-size:1.02rem}

/* TWO TYPES */
.types-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto}
.tcol{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-card)}
.tcol.win{border-color:rgba(47,134,240,.4); background:linear-gradient(180deg,#16191f,#121319)}
.tcol .tlabel{display:inline-flex; align-items:center; gap:9px; font-size:1rem; font-weight:700; padding:6px 13px; border-radius:var(--r-pill); margin-bottom:16px}
.tcol.lose .tlabel{color:var(--ink-soft); background:rgba(255,255,255,.05)}
.tcol.win .tlabel{color:#fff; background:var(--accent-btn)}
.tcol p{color:var(--ink-soft); font-size:1.08rem; line-height:1.55}
.tcol p strong{color:#fff; font-weight:600}
.types-ask{text-align:center; font-family:'Hanken Grotesk'; font-weight:800; color:#fff; font-size:clamp(1.5rem,1.1rem+1.6vw,2rem); margin-top:34px}
@media(max-width:700px){.types-grid{grid-template-columns:1fr}}

/* ============================================================
   BUY SECTION (format mockups + region selector)
   ============================================================ */
.buy{position:relative; overflow:hidden; background:radial-gradient(ellipse 56% 60% at 82% -6%, rgba(47,134,240,.2), transparent 60%), linear-gradient(180deg,#0c0e13,#0a0a0c)}
.buy .container{position:relative; z-index:1}
.buy-head{max-width:680px; margin:0 auto 38px; text-align:center}
.buy-head .eyebrow{justify-content:center}
.buy-head h2{margin-bottom:12px}
.buy-head p{color:var(--ink-soft); font-size:1.14rem}
.buy-panel{max-width:920px; margin:0 auto; background:linear-gradient(160deg,#11141b,#0d0f14); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-hi)}
.buy-step-lbl{display:flex; align-items:center; gap:11px; font-family:'Hanken Grotesk'; font-weight:700; color:#fff; font-size:1.12rem; margin-bottom:18px}
.buy-step-lbl .n{width:26px; height:26px; border-radius:50%; background:var(--accent-btn); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; flex:none}

/* Tier 1: format cards with mockups */
.fmt-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
/* grid- en flexkinderen krimpen niet onder hun min-content zonder deze regel.
   Zonder min-width:0 werd .fmt 443px breed in een cel van 261px en stond de
   prijs buiten beeld op elke telefoon smaller dan 430px. */
.fmt-grid>*{min-width:0}
.ftext{display:flex; flex-direction:column; align-items:center; flex:1 1 auto; min-width:0; width:100%}
.fmt{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-card); padding:18px 16px 18px; cursor:pointer; font-family:inherit; transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease)}
.fmt:hover{border-color:var(--border-2); transform:translateY(-3px)}
.fmt:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px}
.fmt[aria-pressed="true"]{border-color:var(--accent); background:rgba(47,134,240,.1); box-shadow:var(--glow)}
.fmt .mk-wrap{height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.fmt .fname{font-family:'Hanken Grotesk'; font-weight:700; color:#fff; font-size:1.1rem; margin-bottom:4px}
.fmt .fdesc{color:var(--ink-mute); font-size:1rem; line-height:1.3; margin-bottom:12px}
.fmt .fprice{margin-top:auto; font-family:'Hanken Grotesk'; font-weight:800; color:#fff; font-size:1.16rem; font-variant-numeric:tabular-nums}
.fmt .fprice small{display:block; font-family:'Inter'; font-weight:500; font-size:1rem; color:var(--ink-mute); margin-top:2px}
.fmt .ftick{position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; display:none; align-items:center; justify-content:center}
.fmt[aria-pressed="true"] .ftick{display:flex}
@media(max-width:820px){.fmt-grid{grid-template-columns:1fr 1fr}}
/* Onder 560px staat elk formaat op een eigen rij: beeld links, tekst rechts.
   Grens op 560 en niet 420, want 430px-telefoons vielen daar buiten. */
@media(max-width:560px){
  .fmt-grid{grid-template-columns:1fr}
  .fmt{flex-direction:row; gap:16px; text-align:left; align-items:center; padding:14px 16px}
  .fmt .mk-wrap{height:118px; width:110px; flex:none; margin-bottom:0}
  .fmt .mk-wrap .mk{transform:scale(.78)}
  .ftext{align-items:flex-start; text-align:left; width:auto}
  .fmt .fdesc{margin-bottom:8px}
  .fmt .fprice{margin-top:0}
}

/* --- CSS product mockups (use the real cover, no distortion). Each format reads differently at a glance: a glowing screen, a phone player, a thin softcover, a thick hardcover. --- */
.mk{position:relative}
/* EBOOK: cover on a glowing tablet screen */
.mk-ebook{position:relative; width:118px; height:154px; border-radius:14px; background:linear-gradient(155deg,#2d3038,#121419); border:1px solid rgba(255,255,255,.18); padding:7px; box-shadow:0 16px 30px rgba(0,0,0,.55)}
.mk-ebook .scr{position:relative; width:100%; height:100%; border-radius:8px; overflow:hidden; background:#0e0f13}
.mk-ebook .scr img{width:100%; height:100%; object-fit:cover}
.mk-ebook .scr::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg, rgba(255,255,255,.32), rgba(255,255,255,.06) 34%, rgba(255,255,255,0) 52%)}
.mk-ebook::before{content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.28); box-shadow:0 0 0 2px rgba(255,255,255,.08)}
/* AUDIOBOOK: phone now-playing */
.mk-audio{position:relative; width:108px; height:154px; border-radius:18px; background:linear-gradient(155deg,#23262e,#0d0f13); border:1px solid rgba(255,255,255,.16); padding:12px 9px; box-shadow:0 16px 30px rgba(0,0,0,.55); display:flex; flex-direction:column; align-items:center}
.mk-audio::before{content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:34px; height:4px; border-radius:99px; background:rgba(255,255,255,.18)}
.mk-audio .art{width:70px; height:70px; border-radius:9px; overflow:hidden; margin:8px 0 10px; box-shadow:0 6px 14px rgba(0,0,0,.5)}
.mk-audio .art img{width:100%; height:100%; object-fit:cover}
.mk-audio .wave{display:flex; align-items:flex-end; gap:2.5px; height:20px; margin-bottom:10px}
.mk-audio .wave i{width:3px; border-radius:2px; background:var(--accent-2)}
.mk-audio .wave i:nth-child(1){height:8px}.mk-audio .wave i:nth-child(2){height:14px}.mk-audio .wave i:nth-child(3){height:20px}.mk-audio .wave i:nth-child(4){height:11px}.mk-audio .wave i:nth-child(5){height:16px}.mk-audio .wave i:nth-child(6){height:7px}.mk-audio .wave i:nth-child(7){height:12px}
.mk-audio .play{width:32px; height:32px; border-radius:50%; background:var(--accent-btn); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 6px 14px rgba(38,116,210,.45)}
.mk-audio .play svg{width:14px; height:14px; margin-left:2px}
/* PAPERBACK: thin, flexible softcover, slight angle, thin paper edge, no board */
.mk-paper{width:128px; height:158px; perspective:780px; display:flex; align-items:center; justify-content:center}
.mk-paper .b{position:relative; width:0; height:0; transform-style:preserve-3d; transform:rotateY(-17deg); transition:transform .5s var(--ease)}
.fmt:hover .mk-paper .b{transform:rotateY(-11deg)}
.mk-paper .bf{position:absolute; left:0; top:0; backface-visibility:hidden}
.mk-paper .pb-front{width:102px; height:150px; transform:translate(-50%,-50%) translateZ(3px); border-radius:1px 4px 4px 1px; overflow:hidden; box-shadow:inset -8px 0 15px -9px rgba(0,0,0,.4), 7px 10px 22px rgba(0,0,0,.45)}
.mk-paper .pb-front img{width:100%; height:100%; object-fit:cover; display:block}
.mk-paper .pb-back{width:102px; height:150px; transform:translate(-50%,-50%) rotateY(180deg) translateZ(3px); background:#e9e3d3; border-radius:4px 1px 1px 4px}
.mk-paper .pb-edge{width:6px; height:150px; transform:translate(-50%,-50%) rotateY(90deg) translateZ(51px); background:repeating-linear-gradient(90deg,#f3eee2,#f3eee2 1px,#dcd5c4 2px,#f3eee2 3px)}
/* HARDCOVER: thick, rigid, centered, board overhang, dark spine board */
.mk-hard{width:134px; height:160px; perspective:820px; display:flex; align-items:center; justify-content:center}
.mk-hard .b{position:relative; width:0; height:0; transform-style:preserve-3d; transform:rotateX(3deg) rotateY(-26deg); transition:transform .5s var(--ease)}
.fmt:hover .mk-hard .b{transform:rotateX(2deg) rotateY(-17deg)}
.mk-hard .bf{position:absolute; left:0; top:0; backface-visibility:hidden}
.mk-hard .hb-front{width:104px; height:154px; transform:translate(-50%,-50%) translateZ(10px); border-radius:1px 5px 5px 1px; overflow:hidden; box-shadow:inset -11px 0 20px -10px rgba(0,0,0,.5), 8px 11px 24px rgba(0,0,0,.5)}
.mk-hard .hb-front img{width:100%; height:100%; object-fit:cover; display:block}
.mk-hard .hb-back{width:104px; height:154px; transform:translate(-50%,-50%) rotateY(180deg) translateZ(10px); background:#16202c; border-radius:5px 1px 1px 5px}
.mk-hard .hb-spine{width:20px; height:154px; transform:translate(-50%,-50%) rotateY(-90deg) translateZ(52px); background:linear-gradient(90deg,#0b1119,#1d2d40 58%,#0b1119)}
.mk-hard .hb-edge{width:20px; height:150px; transform:translate(-50%,-50%) rotateY(90deg) translateZ(52px); background:repeating-linear-gradient(90deg,#efe9db,#efe9db 1px,#d6cfbe 2px,#efe9db 3px)}
.mk-hard .hb-top{width:104px; height:20px; transform:translate(-50%,-50%) rotateX(90deg) translateZ(77px); background:repeating-linear-gradient(90deg,#efe9db,#efe9db 1px,#dcd5c5 2px,#efe9db 3px)}

/* Tier 2: reveal panel */
.buy-tier2{margin-top:8px; max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
.buy-tier2-in{padding-top:30px; margin-top:30px; border-top:1px solid var(--border)}
.t2-digital .cur-toggle{display:inline-flex; padding:4px; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:var(--r-pill); margin-bottom:20px}
.t2-digital .cur-toggle button{font-family:inherit; font-weight:600; font-size:1rem; color:var(--ink-soft); background:none; border:none; border-radius:var(--r-pill); padding:8px 20px; cursor:pointer; transition:background .15s, color .15s}
.t2-digital .cur-toggle button[aria-pressed="true"]{background:var(--accent-btn); color:#fff}
.t2-digital .cur-toggle button:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.t2-digital .dig-row{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--r-card); padding:22px 24px}
.t2-digital .dig-price{font-family:'Hanken Grotesk'; font-weight:800; font-size:2.2rem; color:#fff; line-height:1; font-variant-numeric:tabular-nums}
.t2-digital .dig-meta b{display:block; color:#fff; font-size:1.08rem}
.t2-digital .dig-meta span{color:var(--ink-mute); font-size:1rem}
.t2-digital .dig-row .btn{white-space:nowrap}
.t2-note{display:flex; align-items:flex-start; gap:11px; margin-top:18px; font-size:1rem; color:var(--ink-soft)}
.t2-note svg{color:var(--accent-2); flex:none; margin-top:2px}
@media(max-width:600px){.t2-digital .dig-row{grid-template-columns:1fr; text-align:center; gap:14px} .t2-digital .dig-row .btn{width:100%}}
.t2-print .country-lbl{font-size:1.04rem; color:var(--ink-soft); margin-bottom:16px}
.country-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:10px; margin-bottom:24px}
.country-grid>*{min-width:0}
.cbtn{display:flex; align-items:center; gap:11px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-btn); padding:13px 15px; cursor:pointer; font-family:inherit; font-size:1.02rem; font-weight:600; color:var(--ink-soft); text-align:left; transition:border-color .15s, color .15s, background .15s}
.cbtn:hover{border-color:var(--border-2); color:#fff}
.cbtn:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.cbtn[aria-pressed="true"]{border-color:var(--accent); color:#fff; background:rgba(47,134,240,.1)}
.cbtn .flag{font-size:1.3rem; line-height:1; flex:none}
.print-checkout{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--r-card); padding:20px 24px}
.print-checkout .pc-meta b{display:block; color:#fff; font-size:1.12rem; font-family:'Hanken Grotesk'; font-weight:700}
.print-checkout .pc-meta span{color:var(--ink-mute); font-size:1rem}
.print-checkout .btn{white-space:nowrap}
.print-checkout.is-empty .pc-cta{display:none}
.print-checkout.is-empty .pc-meta b{color:var(--ink-mute); font-family:'Inter'; font-weight:500; font-size:1.04rem}
@media(max-width:600px){.country-grid{grid-template-columns:1fr 1fr; gap:8px} .cbtn{padding:12px 11px; gap:8px} .print-checkout{grid-template-columns:1fr; text-align:center} .print-checkout .btn{width:100%}}
@media(max-width:560px){.buy-panel{padding:20px 16px}}

/* guarantee strip */
.guarantee{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; max-width:920px; margin:26px auto 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:24px 28px; box-shadow:var(--shadow-card)}
.guarantee .gi{width:54px; height:54px; border-radius:14px; background:rgba(52,210,123,.12); border:1px solid rgba(52,210,123,.32); color:var(--success); display:flex; align-items:center; justify-content:center; flex:none}
.guarantee b{color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.16rem; display:block; margin-bottom:4px}
.guarantee p{color:var(--ink-soft); font-size:1.04rem}
@media(max-width:560px){.guarantee{grid-template-columns:1fr; text-align:center; justify-items:center}}

/* AUTHOR */
/* Deze sectie zit niet in een .container en had daardoor als enige geen
   zijmarge op de telefoon: de tekst raakte de schermrand. */
.author-in{display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center; max-width:880px; margin:0 auto; padding:0 24px}
.author-in .avatar{width:130px; height:130px; border-radius:50%; object-fit:cover; border:2px solid var(--border-2); flex:none}
.author-in h2{font-size:clamp(1.7rem,1.3rem+1.4vw,2.2rem); margin-bottom:14px}
.author-in p{color:var(--ink-soft); font-size:1.1rem; margin-bottom:16px; max-width:60ch}
.author-in p strong{color:#fff; font-weight:600}
@media(max-width:620px){.author-in{grid-template-columns:1fr; text-align:center; justify-items:center} .author-in p{max-width:none}}

/* FAQ */
.faq-head{max-width:580px; margin-bottom:38px}
.faq-head h2{margin-bottom:11px}
.faq-head p{color:var(--ink-soft); font-size:1.1rem}
.faq-list{max-width:840px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:24px 46px 24px 0; position:relative; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.18rem; color:#fff; letter-spacing:-.01em}
.faq-q:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:4px}
.faq-q .pm{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:24px; height:24px; transition:transform .2s var(--ease); color:var(--accent-2)}
.faq-q[aria-expanded="true"] .pm{transform:translateY(-50%) rotate(45deg)}
.faq-a{overflow:hidden; max-height:0; transition:max-height .28s var(--ease)}
.faq-a-in{padding:0 46px 26px 0; color:var(--ink-soft); font-size:1.06rem; line-height:1.65}
.faq-a-in a{font-weight:600}

/* FINAL CTA */
.final{position:relative; overflow:hidden; background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(47,134,240,.2), transparent 60%), linear-gradient(180deg,#0c0e13,#0a0a0c)}
.final-in{max-width:680px; margin:0 auto; text-align:center; position:relative; z-index:1}
.final-in h2{margin-bottom:16px; font-size:clamp(2rem,1.4rem+2.4vw,3rem)}
.final-in p{color:var(--ink-soft); font-size:1.2rem; margin-bottom:30px}

/* FOOTER */
.footer{background:#08080a; color:var(--ink-soft); padding:70px 0 32px; border-top:1px solid var(--border)}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr; gap:34px; align-items:start; padding-bottom:36px; border-bottom:1px solid var(--border); margin-bottom:38px}
.footer-top>*{min-width:0}
.footer .brand{color:#fff; font-size:1.4rem; display:block; margin-bottom:14px}
.footer .brand span{color:var(--accent-2)}
.footer .tag{font-size:1.02rem; color:var(--ink-mute); max-width:42ch; margin-bottom:20px}
.footer-trust{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.trust-pill{display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r-pill); padding:8px 15px; font-size:1rem; font-weight:600; color:var(--ink-soft)}
.trust-pill svg{width:16px; height:16px}
.foot-news{display:flex; gap:10px; max-width:420px}
.foot-news input{flex:1; min-width:0; font-size:1.0625rem; padding:13px 15px; border-radius:var(--r-btn); border:1.5px solid var(--border-2); background:rgba(255,255,255,.05); color:#fff; font-family:inherit}
.foot-news input::placeholder{color:var(--ink-mute)}
.foot-news input:focus-visible{outline:3px solid var(--accent-2); outline-offset:1px}
.foot-news .btn{flex:none; min-height:48px; padding:12px 20px}
.foot-news{flex-wrap:wrap}
.foot-news .msg{flex:1 0 100%; min-height:22px; margin:2px 0 0; font-size:1rem; color:var(--ink-soft)}
.foot-news .msg.ok{color:#a8f0c4}
.foot-news .msg.err{color:#ffc0c0}
.foot-news-lbl{font-size:1rem; color:var(--ink-soft); margin-bottom:10px; font-weight:600}
.footer-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding-bottom:38px; border-bottom:1px solid var(--border)}
.footer h5{font-family:'Hanken Grotesk'; font-weight:700; color:#fff; font-size:1.04rem; margin:0 0 16px}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.footer a{color:var(--ink-mute); font-size:1rem}
.footer a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:26px; flex-wrap:wrap}
.footer-bottom .legal{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.footer-bottom small,.footer-bottom .legal a{color:var(--ink-mute); font-size:1rem}
.social{display:flex; gap:10px}
.social a{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:background .15s, color .15s}
.social a:hover{background:var(--accent-btn); color:#fff}
.social a:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.social svg{width:19px; height:19px}
@media(max-width:880px){.footer-top{grid-template-columns:1fr} .footer-cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-cols{grid-template-columns:1fr}}

.concept{position:fixed; left:10px; bottom:14px; z-index:130; background:rgba(16,17,22,.82); color:var(--ink-mute); font-size:1rem; font-weight:600; padding:5px 12px; border-radius:var(--r-pill); border:1px solid var(--border); backdrop-filter:blur(8px)}
.concept b{color:#fff}
/* Vaste koopbalk, op elk formaat. Komt op zodra de hero voorbij is en gaat weer
   weg zodra de koopsectie zelf in beeld staat, anders dekt hij af waar hij
   naar wijst. Buiten beeld geparkeerd met translateY, niet met display:none,
   zodat de overgang loopt. */
.mcta{position:fixed; left:0; right:0; bottom:0; z-index:100; padding:11px 15px calc(11px + env(safe-area-inset-bottom)); background:rgba(10,10,12,.9); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-top:1px solid var(--border-2); box-shadow:0 -12px 30px rgba(0,0,0,.45); transform:translateY(112%); visibility:hidden; transition:transform .34s var(--ease), visibility .34s var(--ease)}
.mcta.is-on{transform:translateY(0); visibility:visible}
.mcta-in{max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px}
.mcta-meta{display:none; flex-direction:column; gap:2px; min-width:0}
.mcta-meta b{color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.08rem; line-height:1.25}
.mcta-meta>span{color:var(--ink-soft); font-size:1rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mcta .btn{flex:none; min-height:48px}
@media(min-width:601px){.mcta-meta{display:flex}}
@media(max-width:600px){.mcta .btn{width:100%}}
.concept{bottom:calc(78px + env(safe-area-inset-bottom))}

.reveal{transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal{opacity:0; transform:translateY(16px)}
.reveal.in{opacity:1; transform:none}
.rv-off .reveal{opacity:1 !important; transform:none !important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1 !important; transform:none !important}
  .leaf{transition:none !important}
  /* De algemene regel hierboven zet elke animatie op haar EINDstand. Voor de
     logoband is dat halverwege weggeschoven. Daarom hier expliciet terug naar
     de stilstaande rij. */
  .marquee-track{animation:none !important; width:100% !important; flex-wrap:wrap; justify-content:center; padding:0 24px}
  .marquee-track .dup{display:none !important}
  .marquee{mask-image:none; -webkit-mask-image:none}
}

/* ============================================================
   BOOK READER MODAL (Amazon-style full-page preview)
   ============================================================ */
.rdr-overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.88); opacity:0; visibility:hidden; transition:opacity .22s var(--ease), visibility .22s; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.rdr-overlay.open{opacity:1; visibility:visible}
.rdr-panel{position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; padding:20px 16px 20px; max-height:100dvh; max-width:100vw}
.rdr-img-wrap{position:relative; display:flex; align-items:center; justify-content:center; height:calc(100dvh - 130px); max-height:860px}
.rdr-img-wrap img{display:block; max-height:100%; max-width:min(700px, 90vw); width:auto; height:auto; border-radius:4px; box-shadow:0 8px 40px rgba(0,0,0,.7); object-fit:contain; background:#f6f1e6; transition:opacity .18s}
.rdr-img-wrap img.loading{opacity:.4}
.rdr-close{position:fixed; top:18px; right:18px; width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); background:rgba(20,21,25,.9); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.4rem; line-height:1; z-index:210; transition:background .15s, border-color .15s}
.rdr-close:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4)}
.rdr-close:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.rdr-controls{display:flex; align-items:center; gap:20px}
.rdr-btn{width:50px; height:50px; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); background:rgba(20,21,25,.85); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s, transform .15s}
.rdr-btn:hover:not(:disabled){background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); transform:scale(1.06)}
.rdr-btn:disabled{opacity:.28; cursor:not-allowed}
.rdr-btn:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.rdr-counter{color:rgba(255,255,255,.7); font-size:1rem; min-width:90px; text-align:center; font-variant-numeric:tabular-nums}
.rdr-hint{color:var(--ink-mute); font-size:1rem; margin-top:-4px}
@media(max-width:600px){
  .rdr-img-wrap{height:calc(100dvh - 120px)}
  .rdr-img-wrap img{max-width:96vw}
  .rdr-close{top:10px; right:10px; width:38px; height:38px; font-size:1.2rem}
}

/* canonical nav-search styles */
/* Hier stond `.nav-links,.nav-cta,.nav-search-btn{display:none}` zonder media-
   query. Daardoor was het menu op ELKE breedte verborgen en verscheen de
   hamburger pas onder 1180px: boven die grens had de pagina dus helemaal geen
   navigatie. De juiste, wel ingekaderde regel staat verderop. */
.nav-search-btn{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border:1px solid var(--border-2); border-radius:10px; background:rgba(255,255,255,.04); color:var(--ink-soft); cursor:pointer; transition:color .15s, border-color .15s, background .15s}

.nav-search-btn:hover,.nav-search-btn[aria-expanded="true"]{color:#fff; border-color:var(--accent-2); background:rgba(255,255,255,.06)}

.nav-search-btn:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}

.nav-search{position:absolute; left:0; right:0; top:100%; z-index:85; background:rgba(10,10,12,.97); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--border-2); box-shadow:0 18px 44px rgba(0,0,0,.5); padding:18px 0}

.nav-search[hidden]{display:none}

.nav-search-form{display:flex; align-items:center; gap:12px; max-width:var(--container); margin:0 auto; padding:0 24px}

.nss-field{position:relative; flex:1; min-width:0; display:flex}

.nss-field .nss-ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-mute); display:flex; pointer-events:none}

.nss-field input{flex:1; min-width:0; font-family:inherit; font-size:1.0625rem; padding:15px 16px 15px 46px; border-radius:var(--r-btn); border:1.5px solid var(--border-2); background:rgba(255,255,255,.06); color:#fff}

.nss-field input::placeholder{color:var(--ink-mute)}

.nss-field input:focus-visible{outline:3px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2)}

.nav-search-form .btn{flex:none}

.nss-close{flex:none; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-2); border-radius:10px; background:rgba(255,255,255,.04); color:var(--ink-soft); cursor:pointer; transition:color .15s, border-color .15s}

.nss-close:hover{color:#fff; border-color:var(--accent-2)}

.nss-close:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.nav-search{position:fixed; top:0; z-index:150; padding:14px 0 16px; box-shadow:0 18px 50px rgba(0,0,0,.7)}
.nav-search-form .btn{display:none}
@media(max-width:1180px){.nav-links,.nav-cta,.nav-search-btn{display:none}.nav-burger{display:inline-flex}}
@media(max-width:600px){.nav-search{position:fixed; top:0; z-index:150; padding:14px 0 16px; box-shadow:0 18px 50px rgba(0,0,0,.7)}.nav-search-form .btn{display:none}}
.rev-score .meta .src{color:#C9CFD8; text-decoration:underline; text-underline-offset:3px}
.rev-score .meta .src:hover{color:#fff}

/* ---- Leesfragment ---------------------------------------------------------
   De zes scans zijn beeld zonder tekstlaag: precies de inhoudelijkste plek van
   de pagina was onleesbaar voor zoekmachines en AI-assistenten, en op een
   telefoon ook slecht leesbaar voor een mens. Dit blok zet dezelfde woorden als
   echte tekst neer. De papierkleur is die van de boekpagina's zelf, zodat het
   leest als het boek en niet als nog een verkoopblok. */
.excerpt{margin-top:56px}
.excerpt-head{max-width:62ch; margin-bottom:26px}
.excerpt-head h3{font-size:1.42rem; margin-bottom:10px}
.excerpt-head p{color:var(--ink-soft); font-size:1.06rem; line-height:1.62; text-wrap:pretty}
.sheet{background:var(--paper); color:var(--paper-ink); border-radius:var(--r-card);
  padding:34px 38px; box-shadow:var(--shadow-card); max-width:70ch}
.sheet + .sheet{margin-top:20px}
.sheet-src{display:block; font-size:1rem; font-weight:700; letter-spacing:.03em;
  color:#524b42; margin-bottom:16px}
.sheet p{font-size:1.06rem; line-height:1.72; text-wrap:pretty; color:var(--paper-ink)}
.sheet p + p{margin-top:16px}
.excerpt-foot{margin-top:22px; color:var(--ink-mute); font-size:1rem; max-width:62ch}
@media(max-width:640px){
  .excerpt{margin-top:40px}
  .sheet{padding:26px 22px}
  .sheet p{font-size:1.02rem}
}