
:root{
 --color-navy:#1B3A6B;--color-navy-light:#4A6FA5;--color-navy-darker:#142C52;
 --color-link:#6B8FC9;--color-violet:#7B68EE;--color-white:#FFFFFF;
 --color-surface:#F5F5F5;--color-surface-2:#ECEFF3;--color-border:#D0D5DD;
 --dot-red:#FF272B;--dot-green:#24AD39;--dot-yellow:#FFBE1C;--logo-blue:#0084FE;
 --bg:var(--color-white);--bg-alt:var(--color-surface);--bg-dark:var(--color-navy);
 --text:#555F6E;--text-strong:var(--color-navy);--text-muted:#8A93A2;--text-invert:var(--color-white);
 --border:var(--color-border);--accent:var(--color-navy);
 --navy-soft:#EAF0F9;--violet-soft:#EEEBFE;--success:#24AD39;
 --font-display:'Thicccboi','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
 --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
 --fs-display:clamp(2.5rem,1.6rem + 3.6vw,3.5rem);--fs-h1:clamp(2rem,1.5rem + 2vw,2.75rem);
 --fs-h2:clamp(1.6rem,1.25rem + 1.4vw,2.5rem);--fs-h3:clamp(1.35rem,1.2rem + 0.5vw,1.75rem);
 --fs-h4:1.375rem;--fs-lead:1.25rem;--fs-base:1rem;--fs-sm:.875rem;--fs-xs:.8125rem;
 --lh-tight:1.1;--lh-heading:1.2;--lh-snug:1.4;--lh-body:1.6;
 --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extra:800;
 --ls-tight:-0.02em;--ls-normal:0;--ls-wide:0.12em;
 --space-1:.25rem;--space-2:.5rem;--space-3:1rem;--space-4:1.5rem;--space-5:3rem;--space-6:5rem;--space-7:7.5rem;
 --section-py:clamp(4rem,2.5rem + 5vw,7.5rem);
 --container-max:1160px;--container-narrow:760px;--container-pad:clamp(1.25rem,.5rem + 3vw,2.5rem);
 --radius-nav:6px;--radius-btn:8px;--radius-card:12px;--radius-pill:999px;
 --shadow-sm:0 1px 2px rgba(27,58,107,.06);--shadow-card:0 8px 24px rgba(27,58,107,.08);
 --shadow-lg:0 16px 40px rgba(27,58,107,.12);--shadow-btn:0 4px 12px rgba(27,58,107,.18);
 --ease:cubic-bezier(0.22,1,0.36,1);--dur-fast:140ms;--dur:220ms;--dur-slow:380ms;
 
 --f0:#24AD39;--f1:#1B3A6B;--f2:#4A6FA5;--f3:#0084FE;--f4:#7B68EE;
}

*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-heading);color:var(--text-strong);text-wrap:balance}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-py)}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--bg-dark);color:var(--text-invert)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--text-invert)}
.eyebrow{display:inline-block;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--color-navy-light)}
.section--dark .eyebrow{color:#9DB6DC}
.lead{font-size:var(--fs-lead);line-height:var(--lh-snug);font-weight:var(--fw-regular)}
.section-head{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-5);max-width:56ch}
.section-head--center{align-items:center;text-align:center;margin-inline:auto}
.section-head__title{font-size:var(--fs-h2);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-base);line-height:1;letter-spacing:var(--ls-normal);padding:.875rem var(--space-4);border-radius:var(--radius-btn);border:1px solid transparent;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn--primary{background:var(--color-navy);color:var(--text-invert)}
.btn--primary:hover{background:var(--color-navy-light);box-shadow:var(--shadow-btn);transform:translateY(-2px)}
.btn--primary:active{background:var(--color-navy-darker);box-shadow:none;transform:translateY(0)}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--color-navy)}
.btn--ghost:hover{border-color:var(--color-navy);background:var(--navy-soft)}
.btn--ghost:active{background:var(--color-surface-2)}
.btn--on-dark{background:var(--color-white);color:var(--color-navy)}
.btn--on-dark:hover{background:var(--navy-soft);box-shadow:var(--shadow-btn);transform:translateY(-2px)}
.btn--on-dark:active{transform:translateY(0);box-shadow:none}
.btn--ghost-dark{background:transparent;border-color:rgba(255,255,255,.4);color:var(--color-white)}
.btn--ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--blue{background:var(--logo-blue);color:#fff}
.btn--blue:hover{background:#0074E0;box-shadow:var(--shadow-btn);transform:translateY(-2px)}
.btn--blue:active{background:#0066C7;transform:translateY(0);box-shadow:none}
.btn--block{width:100%}
.btn--lg{padding:1.05rem var(--space-5);font-size:var(--fs-lead)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--navy-soft)}
.section--dark .btn:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.45)}

.hero{padding-block:clamp(3.5rem,2rem + 6vw,6rem)}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2rem,1rem + 4vw,5rem)}
.hero__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.hero__title{font-size:var(--fs-display);font-weight:var(--fw-extra);letter-spacing:var(--ls-tight);line-height:var(--lh-tight);color:var(--text-strong)}
.hero__title em{font-style:normal;color:var(--color-navy-light)}
.hero__lead{max-width:34ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.hero__media{position:relative}

.tag{display:inline-block;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.02em;padding:4px 11px;border-radius:var(--radius-pill);background:var(--navy-soft);color:var(--color-navy)}
.feat-list{display:flex;flex-direction:column;gap:var(--space-3)}
.feat-list li{display:flex;align-items:flex-start;gap:var(--space-3)}
.feat-list__check{flex:0 0 auto;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--navy-soft);color:var(--success);display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
.feat-list__check svg{width:14px;height:14px}
.feat-list--on-dark .feat-list__check{background:rgba(255,255,255,.16);color:#fff}
.card{display:flex;flex-direction:column;gap:var(--space-3);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{box-shadow:var(--shadow-card);transform:translateY(-4px)}
.card__title{font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--color-navy)}
.card__text{font-size:var(--fs-base);color:var(--text)}
.quote{display:flex;flex-direction:column;gap:var(--space-3);background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4)}
.quote__text{font-size:var(--fs-base);line-height:1.6;color:var(--text-strong)}
.quote__who{display:flex;align-items:center;gap:var(--space-3);margin-top:auto}
.quote__avatar{width:42px;height:42px;border-radius:var(--radius-pill);background:var(--navy-soft);color:var(--color-navy-light);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:.95rem;flex:0 0 auto}
.quote__name{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--color-navy)}
.quote__role{font-size:var(--fs-xs);color:var(--text-muted)}
.faq{max-width:760px;margin-inline:auto;display:flex;flex-direction:column}
.faq__item{border-bottom:1px solid var(--border)}
.faq__item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-4);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h4);color:var(--color-navy)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary .faq__icon{flex:0 0 auto;transition:transform var(--dur) var(--ease)}
.faq__item[open] summary .faq__icon{transform:rotate(45deg)}
.faq__answer{padding-bottom:var(--space-4);color:var(--text);font-size:var(--fs-base);line-height:1.65;max-width:62ch}
.cta__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4)}
.cta__title{font-size:var(--fs-h1);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);max-width:20ch}
.cta__lead{color:#C6D2E6;max-width:50ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-2)}

.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--border);color:var(--color-navy);background:#fff;cursor:pointer;transition:all var(--dur) var(--ease)}
.chip:hover{border-color:var(--color-navy)}
.chip[aria-current="true"]{background:var(--color-navy);color:#fff;border-color:var(--color-navy)}
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);align-items:stretch}
.pack{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);box-shadow:var(--shadow-card);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pack:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.pack__name-row{display:flex;align-items:center;gap:9px}
.pack__dot{width:9px;height:9px;border-radius:var(--radius-pill);flex:0 0 auto}
.pack__name{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.2rem;color:var(--color-navy)}
.pack__tag{font-size:.85rem;font-weight:var(--fw-semibold);color:var(--text-muted);margin-top:4px}
.pack__desc{font-size:.9rem;line-height:1.55;color:var(--text);margin-top:var(--space-3);text-wrap:pretty}
.pack__cta{width:100%;margin-top:auto}


.subnav{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 2px 8px rgba(27,58,107,.06)}
.subnav__inner{display:flex;align-items:center;gap:var(--space-4);overflow-x:auto;scrollbar-width:none;padding-block:10px}
.subnav__inner::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);padding:6px 2px;border-bottom:2px solid transparent;transition:color var(--dur) var(--ease);display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}
.subnav a:hover{color:var(--color-navy)}
.subnav a.subnav__accent{font-weight:800;color:var(--color-navy);border-bottom-color:var(--color-navy)}
.subnav a.subnav__accent:hover{color:var(--color-navy)}
.subnav a.btn{color:#fff;border-bottom:none;margin-left:0;margin-right:var(--space-2);padding:8px 14px;font-size:var(--fs-xs);flex-direction:row;align-items:center}
.subnav a.subnav__accent{margin-left:auto}
.subnav a.btn:hover{color:#fff}
/* Login hint label under Mijn bibliotheek tab (logged-out only, injected by JS) */
.subnav__login-hint{font-size:.62rem;font-weight:var(--fw-medium);color:var(--color-navy-light);line-height:1;letter-spacing:.01em;white-space:nowrap}

.stchip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-size:.72rem;font-weight:var(--fw-bold);letter-spacing:.02em;padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.stchip svg{width:11px;height:11px}
.st-gratis{background:#E5F6E8;color:#177828}
.st-av{background:var(--navy-soft);color:var(--color-navy)}
.st-soon{background:transparent;color:var(--text-muted);border:1px dashed var(--border)}
.st-next{background:var(--violet-soft);color:#5B48D6}
.lvl{display:inline-flex;align-items:center;font-family:var(--font-display);font-size:.72rem;font-weight:var(--fw-bold);padding:3px 10px;border-radius:var(--radius-pill);background:var(--violet-soft);color:#5B48D6;white-space:nowrap}
.fdot{width:9px;height:9px;border-radius:999px;display:inline-block;flex:0 0 auto}
.metaline{font-size:var(--fs-xs);color:var(--text-muted)}

.hero-shop .hero__lead{max-width:46ch}
.trustline{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-2)}
.trustline span{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-muted)}
.trustline svg{width:15px;height:15px;color:var(--success);flex:0 0 auto}
.shelf{position:relative;background:var(--navy-soft);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:var(--shadow-lg)}
.shelf__route{display:flex;align-items:flex-start;justify-content:space-between;position:relative;padding-top:4px}
.shelf__route::before{content:"";position:absolute;top:9px;left:12px;right:12px;height:2px;background:var(--color-navy-light);opacity:.35}
.shelf__stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}
.shelf__stop i{width:12px;height:12px;border-radius:999px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(27,58,107,.2);display:block}
.shelf__stop b{font-family:var(--font-display);font-size:.62rem;font-weight:var(--fw-bold);color:var(--color-navy);text-align:center;line-height:1.2}
.shelf__books{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.cover{position:relative;aspect-ratio:3/4;border-radius:8px;background:var(--color-navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:12px;box-shadow:var(--shadow-card);overflow:hidden}
.cover__fase{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:.6rem;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.cover__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:.74rem;line-height:1.3;text-wrap:balance;overflow-wrap:break-word}
.cover__foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cover__dots{display:flex;gap:4px}
.cover__dots i{width:5px;height:5px;border-radius:999px;display:block}
.cover__dots i:nth-child(1){background:var(--dot-red)}.cover__dots i:nth-child(2){background:var(--dot-green)}.cover__dots i:nth-child(3){background:var(--dot-yellow)}
.cover .stchip{padding:2px 8px;font-size:.6rem}
.cover--soon{background:#fff;color:var(--color-navy);border:1.5px dashed var(--color-navy-light)}
.cover--soon .cover__title{opacity:.75}
.cover--more{background:transparent;border:1.5px dashed var(--color-navy-light);color:var(--color-navy);align-items:center;justify-content:center;display:flex;text-align:center}
.cover--more b{font-family:var(--font-display);font-size:.85rem;line-height:1.3}
.cover--feature .cover__title{font-size:1.15rem}
.shelf__chip{position:absolute;top:-14px;right:18px;background:var(--color-navy);color:#fff;font-family:var(--font-display);font-size:.72rem;font-weight:var(--fw-bold);padding:7px 14px;border-radius:var(--radius-pill);box-shadow:var(--shadow-btn)}
.shelf__chip--br{top:auto;bottom:-14px;right:-10px}

.buyroutes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);align-items:stretch}
.buyroute{position:relative;display:flex;flex-direction:column;gap:var(--space-3);background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.buyroute:hover{box-shadow:var(--shadow-card);transform:translateY(-4px)}
.buyroute__kicker{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--color-navy-light)}
.buyroute__title{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--color-navy);font-family:var(--font-display)}
.buyroute .btn{margin-top:auto}
.buyroute--hi{background:var(--color-navy);border-color:var(--color-navy);color:#fff;box-shadow:0 18px 40px rgba(27,58,107,.22)}
.buyroute--hi .buyroute__kicker{color:#9DB6DC}
.buyroute--hi .buyroute__title{color:#fff}
.buyroute--hi p{color:rgba(255,255,255,.88)}
.buyroute__badge{position:absolute;top:-13px;left:var(--space-4);background:var(--dot-yellow);color:#1f1500;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:.72rem;letter-spacing:.03em;padding:5px 14px;border-radius:var(--radius-pill);box-shadow:0 6px 14px rgba(0,0,0,.16)}

.kies{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:start}
.kies__chips{display:flex;flex-direction:column;gap:var(--space-2)}
.kies__chip{display:flex;align-items:center;gap:var(--space-3);text-align:left;width:100%;font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--color-navy);background:#fff;border:1px solid var(--border);border-radius:var(--radius-btn);padding:13px var(--space-3);cursor:pointer;transition:all var(--dur) var(--ease)}
.kies__chip:hover{border-color:var(--color-navy)}
.kies__chip[aria-pressed="true"]{background:var(--color-navy);border-color:var(--color-navy);color:#fff}
.kies__chip svg{width:16px;height:16px;flex:0 0 auto;opacity:.6}
.kies__result{position:sticky;top:120px;background:var(--navy-soft);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4)}
.kies__panel{display:flex;flex-direction:column;gap:var(--space-3)}
.kies__panel[hidden]{display:none}
.kies__reco{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.kies__cta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}

.mroute{display:flex;flex-direction:column;gap:var(--space-4);position:relative;max-width:920px;margin-inline:auto}
.mroute::before{content:"";position:absolute;left:23px;top:28px;bottom:28px;width:2px;background:linear-gradient(var(--color-navy-light),var(--color-violet));opacity:.3}
.fase{position:relative;display:grid;grid-template-columns:48px 1fr;gap:var(--space-3)}
.fase__num{position:relative;z-index:1;width:48px;height:48px;border-radius:999px;background:#fff;border:2px solid var(--fase-accent,var(--color-navy));color:var(--fase-accent,var(--color-navy));font-family:var(--font-display);font-weight:var(--fw-extra);font-size:1.1rem;display:flex;align-items:center;justify-content:center}
.fase__card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);border-top:3px solid var(--fase-accent,var(--color-navy))}
.fase__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.fase__title{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--color-navy);margin-right:auto}
.fase__result{font-size:var(--fs-sm);color:var(--text-strong);background:var(--color-surface);border-radius:var(--radius-btn);padding:8px 12px}
.fase__result b{font-family:var(--font-display)}
.fase__books{display:flex;flex-direction:column;gap:6px;margin-top:var(--space-2)}
.fase__book{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);padding:7px 10px;border:1px solid var(--color-surface-2);border-radius:var(--radius-btn);background:var(--color-surface)}
.fase__book b{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--color-navy);margin-right:auto}
.fase__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-2)}

.premium{color:#fff;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-5);position:relative}
.premium h2,.premium h3{color:#fff}
.premium .eyebrow{color:#9DB6DC}
.premium__body{display:flex;flex-direction:column;gap:var(--space-3);position:relative;z-index:1}
.premium__body>p{color:#C6D2E6}
.premium__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-block:var(--space-2)}
.premium__stat b{display:block;font-family:var(--font-display);font-size:1.6rem;font-weight:var(--fw-extra);line-height:1}
.premium__stat span{font-size:var(--fs-xs);color:#C6D2E6}
.premium__side{position:relative;z-index:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-card);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);align-self:start}
.premium__side .metaline{color:#9DB6DC}
.pricebox{display:flex;flex-direction:column;gap:8px}
.pricebox__row{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--fs-sm);color:#C6D2E6;padding-bottom:8px;border-bottom:1px dashed rgba(255,255,255,.18)}
.pricebox__row b{font-family:var(--font-display);color:#fff}
.pricebox__row--save b{color:var(--dot-yellow)}
.premium .feat-list li{font-size:var(--fs-sm);color:rgba(255,255,255,.92)}
.golf{background:var(--color-surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-4)}
.golf__col b{font-family:var(--font-display);font-size:var(--fs-sm);color:var(--color-navy);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.golf__col p{font-size:var(--fs-xs);color:var(--text);line-height:1.5}

.pack__avail{font-size:var(--fs-xs);color:var(--text-muted);margin-top:6px}
.pack__books{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--space-3)}
.pack__books span{font-family:var(--font-display);font-size:.68rem;font-weight:var(--fw-semibold);padding:3px 8px;border-radius:var(--radius-pill);background:var(--color-surface);border:1px solid var(--color-surface-2);color:var(--text)}
.pack__value{display:flex;flex-direction:column;gap:3px;margin-top:var(--space-3);font-size:var(--fs-xs);color:var(--text-muted)}
.pack__value b{color:var(--color-navy)}
.libbanner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);background:var(--color-navy);color:#fff;border-radius:var(--radius-card);padding:var(--space-4) var(--space-5);margin-top:var(--space-4)}
.libbanner b{font-family:var(--font-display);font-size:var(--fs-h4)}
.libbanner p{font-size:var(--fs-sm);color:#C6D2E6;flex:1 1 320px}

.freegrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-5);align-items:center}
.freecover{position:relative;max-width:300px;margin-inline:auto}
.freegrid__title{margin-block:var(--space-2) var(--space-3)}
.freegrid .hero__actions{margin-top:var(--space-4)}
.freestats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-3)}
.freestat{background:#fff;border:1px solid var(--border);border-radius:var(--radius-btn);padding:12px 14px}
.freestat b{display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:var(--fw-extra);color:var(--color-navy);line-height:1.15}
.freestat span{font-size:var(--fs-xs);color:var(--text-muted)}
.freenote{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text-strong);background:var(--violet-soft);border-radius:var(--radius-btn);padding:10px 14px;margin-top:var(--space-3)}
.freenote svg{width:16px;height:16px;color:var(--color-violet);flex:0 0 auto}

.wbfilters{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.wbfilters .chips{align-items:center}
.wbfilters .chips>b{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-right:4px}
.wbgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.wbcard{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);border-top:3px solid var(--fase-accent,var(--color-navy));transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);position:relative}
.wbcard:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)}
.wbcard.is-hidden{display:none}
.wbcard__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.wbcard__fase{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:.7rem;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.wbcard__title{font-family:var(--font-display);font-size:1.05rem;font-weight:var(--fw-bold);color:var(--color-navy);line-height:1.3}
.wbcard__desc{font-size:var(--fs-sm);color:var(--text);flex:1 1 auto}
.wbcard__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wbcard__req{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-xs);color:#8A6D00;background:#FFF7DE;border-radius:var(--radius-btn);padding:8px 10px}
.wbcard__req svg{width:13px;height:13px;flex:0 0 auto;margin-top:2px}
.wbcard__in{font-size:var(--fs-xs);color:var(--text-muted)}
.wbcard__in b{color:var(--color-navy-light);font-weight:var(--fw-semibold)}
.wbcard__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);border-top:1px solid var(--color-surface-2);padding-top:12px;margin-top:2px}
.wbcard__price{font-family:var(--font-display);font-weight:var(--fw-extra);font-size:1.3rem;color:var(--color-navy)}
.wbcard__price small{font-size:.72rem;font-weight:var(--fw-semibold);color:var(--text-muted)}
.wbcard .btn{padding:.55rem 1rem;font-size:var(--fs-sm)}
.wbempty{text-align:center;color:var(--text-muted);padding:var(--space-5) 0;grid-column:1/-1}

.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden}
.cmp th,.cmp td{padding:13px 16px;font-size:var(--fs-sm);text-align:center;border-bottom:1px solid var(--color-surface-2)}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--text-strong);font-weight:var(--fw-semibold);width:34%}
.cmp thead th{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--color-navy);font-size:var(--fs-base);background:var(--color-surface);vertical-align:top}
.cmp thead th small{display:block;font-weight:var(--fw-medium);color:var(--text-muted);font-size:.72rem;margin-top:2px}
.cmp .hi{background:var(--navy-soft)}
.cmp thead th.hi{background:var(--color-navy);color:#fff}
.cmp thead th.hi small{color:#C6D2E6}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp .yes{color:var(--success)}.cmp .no{color:var(--text-muted);opacity:.6}
.cmp .yes svg,.cmp .no svg{width:16px;height:16px;display:inline-block;vertical-align:-3px}
.cmpbadge{display:inline-block;background:var(--dot-yellow);color:#1f1500;font-size:.65rem;font-weight:var(--fw-bold);font-family:var(--font-display);padding:2px 9px;border-radius:var(--radius-pill);margin-top:5px}

.dash-teaser{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4) var(--space-5)}
.dash-teaser p{flex:1 1 320px}

.chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:920px;margin-inline:auto}
.chain__node{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-navy);background:#fff;border:1px solid var(--border);border-radius:var(--radius-pill);padding:9px 16px}
.chain__node--end{background:var(--color-navy);color:#fff;border-color:var(--color-navy)}
.chain__arrow{color:var(--color-navy-light);opacity:.6;display:flex}
.chain__arrow svg{width:15px;height:15px}
.nietgenoeg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-5)}

.quote--ph .quote__avatar{background:var(--color-surface-2);color:var(--text-muted)}
.quote__phtag{font-family:var(--font-display);font-size:.65rem;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);background:var(--color-surface);padding:3px 9px;border-radius:var(--radius-pill);align-self:flex-start}

.dot-0{background:var(--f0)}.dot-1{background:var(--f1)}.dot-2{background:var(--f2)}.dot-3{background:var(--f3)}.dot-4{background:var(--f4)}
.acc-0{--fase-accent:var(--f0)}.acc-1{--fase-accent:var(--f1)}.acc-2{--fase-accent:var(--f2)}.acc-3{--fase-accent:var(--f3)}.acc-4{--fase-accent:var(--f4)}
.tag--start{align-self:flex-start}
.ico{display:inline-flex;flex:0 0 auto}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

@media (max-width:991px){
 .hero__inner{grid-template-columns:1fr;gap:var(--space-5)}
 .hero__media{order:-1;max-width:480px}
 .quote-grid{grid-template-columns:repeat(2,1fr)}
 .packs{grid-template-columns:repeat(2,1fr)}
 .subnav{top:0}
 .kies{grid-template-columns:1fr}
 .kies__result{position:static}
 .premium{grid-template-columns:1fr}
 .freegrid{grid-template-columns:1fr}
 .wbgrid{grid-template-columns:repeat(2,1fr)}
 .buyroutes{grid-template-columns:1fr}
 .buyroute--hi{order:-1}
 .buyroute__badge{top:var(--space-4);left:auto;right:var(--space-4)}
 .golf{grid-template-columns:1fr}
 .hero-shop .hero__media{order:1;max-width:none}
 .nietgenoeg{grid-template-columns:1fr}
 .shelf__books{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
 .subnav{top:0}
 .quote-grid{grid-template-columns:1fr}
 .packs{grid-template-columns:1fr}
 .cta__title{font-size:var(--fs-h2)}
 .wbgrid{grid-template-columns:1fr}
 .fase{grid-template-columns:38px 1fr}
 .fase__num{width:38px;height:38px;font-size:.95rem}
 .mroute::before{left:18px}
 .premium__stats{grid-template-columns:1fr 1fr}
 .shelf__books{grid-template-columns:repeat(2,1fr)}
 .shelf__books .cover:nth-child(2),.shelf__books .cover:nth-child(3){display:none}
 .cmp{min-width:640px}
}
@media (max-width:478px){
 .hero__actions,.cta__actions{width:100%}
 .hero__actions .btn,.cta__actions .btn{flex:1 1 auto}
}

/* ===== Bricks-conversie fixes (page-scoped) ===== */
html{font-size:100%!important;}                 /* rem-root reset: Bricks zet html op 62.5% */
#brx-content{overflow:clip!important}            /* Bricks sets overflow:hidden which breaks position:sticky — clip clips without creating a scroll container */
html.tws-builder [data-reveal]{opacity:1!important;transform:none!important;} /* builder: niet leeg */
[data-reveal].in{opacity:1!important;transform:none!important;} /* front-end: onze reveal wint van Bricks' gelaagde .bricks-lazy-hidden{opacity:0!important} (unlayered !important verslaat layered !important) */
.eyebrow.brxe-text-basic,.btn.brxe-text-basic,.invul__tag.brxe-text-basic,.quote__name.brxe-text-basic,.quote__avatar.brxe-text-basic,.media-ph__label.brxe-text-basic,.section-head__title.brxe-text-basic,.card__title.brxe-text-basic,.cta__title.brxe-text-basic,.hero__title.brxe-text-basic,.pack__name.brxe-text-basic,.step__num.brxe-text-basic,.stat__num.brxe-text-basic,.tag.brxe-text-basic,.product__title.brxe-text-basic,.shop-card__title.brxe-text-basic,.shop-card__price.brxe-text-basic,.price-now.brxe-text-basic,.price-badge.brxe-text-basic,.promo__badge.brxe-text-basic,.countdown__num.brxe-text-basic,.legal-eyebrow.brxe-text-basic,.fn-eyebrow.brxe-text-basic,.ov-sec-title.brxe-text-basic,.ov-step__num.brxe-text-basic,.ov-qr__dl.brxe-text-basic,.buyroute__kicker.brxe-text-basic,.buyroute__badge.brxe-text-basic,.buyroute__title.brxe-text-basic,.stchip.brxe-text-basic,.lvl.brxe-text-basic,.shelf__chip.brxe-text-basic,.cover__fase.brxe-text-basic,.cover__title.brxe-text-basic,.cover--more.brxe-text-basic,.fase__num.brxe-text-basic,.fase__title.brxe-text-basic,.wbcard__fase.brxe-text-basic,.wbcard__title.brxe-text-basic,.wbcard__price.brxe-text-basic,.chain__node.brxe-text-basic,.quote__phtag.brxe-text-basic,.chip.brxe-text-basic,.cmpbadge.brxe-text-basic,.premium__stat.brxe-text-basic,.freestat.brxe-text-basic,.golf__col.brxe-text-basic,.libbanner.brxe-text-basic,.shelf__stop.brxe-text-basic,.subnav a.brxe-text-basic,.pack__books span.brxe-text-basic{font-family:var(--font-display)!important;}

