: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;
  
  --f0:#24AD39;--f1:#1B3A6B;--f2:#4A6FA5;--f3:#0084FE;--f4:#7B68EE;
  
  --font-display:'Thicccboi','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-h1:clamp(2rem,1.5rem + 2vw,2.75rem);--fs-h2:clamp(1.6rem,1.25rem + 1.4vw,2.5rem);
  --fs-h4:1.375rem;--fs-lead:1.25rem;--fs-base:1rem;--fs-sm:.875rem;--fs-xs:.8125rem;
  --lh-heading:1.2;--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;
  --section-py:clamp(4rem,2.5rem + 5vw,7.5rem);
  --container-max:1160px;--container-pad:clamp(1.25rem,.5rem + 3vw,2.5rem);
  
  --radius-nav:6px;--radius-btn:8px;--radius-card:12px;--radius-pill:999px;
  
  --shadow-card:0 8px 24px rgba(27,58,107,.08);--shadow-btn:0 4px 12px rgba(27,58,107,.18);
  
  --ease:cubic-bezier(0.22,1,0.36,1);--dur:220ms;
}


*,*::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}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--color-navy-light)}
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}
[hidden]{display:none !important}
@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)}
.section{padding-block:var(--section-py)}
.section--alt{background:var(--bg-alt)}
.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)}
.metaline{font-size:var(--fs-xs);color:var(--text-muted)}
.ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}


.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);color:var(--text-invert);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);color:var(--color-navy)}
.btn--ghost:active{background:var(--color-surface-2)}
.btn--blue{background:var(--logo-blue);color:#fff}
.btn--blue:hover{background:#0074E0;color:#fff;box-shadow:var(--shadow-btn);transform:translateY(-2px)}
.btn--blue:active{background:#0066C7;transform:translateY(0);box-shadow:none}
.btn--sm{display:inline-flex;align-items:center;gap:7px;padding:.5rem .95rem;font-size:var(--fs-sm)}
.btn--sm svg{width:15px;height:15px}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--navy-soft)}


.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-own{background:#E3F1FF;color:#0063C4}
.st-done{background:#E5F6E8;color:#177828}
.st-next{background:var(--violet-soft);color:#5B48D6}
.fdot{width:9px;height:9px;border-radius:999px;display:inline-block;flex:0 0 auto}
.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)}
.tag--demo{background:#FFF7DE;color:#8A6D00}
.acct-head .eyebrow{display:block}
.acct-head__title{display:inline-block;margin-right:14px;vertical-align:middle}
.acct-head__login{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;background:var(--color-navy);color:#fff;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;padding:8px 16px;border-radius:999px;text-decoration:none;transition:background .2s ease}
.acct-head__login svg{width:15px;height:15px}
.acct-head__login:hover{background:#12294f;color:#fff}


.dash__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.dash__stat{background:var(--color-surface);border-radius:var(--radius-btn);padding:12px 14px}
.dash__stat b{display:block;font-family:var(--font-display);font-size:1.2rem;font-weight:var(--fw-extra);color:var(--color-navy);line-height:1.2}
.dash__stat span{font-size:var(--fs-xs);color:var(--text-muted)}
.dash__bars{display:flex;flex-direction:column;gap:12px}
.dbar{display:grid;grid-template-columns:170px 1fr auto;align-items:center;gap:var(--space-3);font-size:var(--fs-sm)}
.dbar>b{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--color-navy);display:flex;align-items:center;gap:8px}
.dbar__track{height:8px;border-radius:999px;background:var(--color-surface-2);overflow:hidden;position:relative}
.dbar__own{position:absolute;inset:0 auto 0 0;background:var(--color-navy-light);opacity:.35;border-radius:999px}
.dbar__done{position:absolute;inset:0 auto 0 0;background:var(--success);border-radius:999px}
.dbar>span{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap}
.upgrade{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);background:var(--violet-soft);border:1px solid #DCD5FB;border-radius:var(--radius-card);padding:var(--space-4)}
.upgrade__body{flex:1 1 320px}
.upgrade__body b{font-family:var(--font-display);color:var(--color-navy)}
.upgrade__price{text-align:right}
.upgrade__price small{display:block;font-size:var(--fs-xs);color:var(--text-muted)}
.upgrade__price b{font-family:var(--font-display);font-size:1.5rem;font-weight:var(--fw-extra);color:var(--color-navy)}


.acct-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.acct-head__avatar{width:54px;height:54px;border-radius:999px;background:var(--navy-soft);color:var(--color-navy);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.acct-head__text{flex:1 1 260px;min-width:260px}
.acct-head__title{font-family:var(--font-display);font-size:clamp(1.55rem,3vw,2.1rem);font-weight:var(--fw-extra);color:var(--color-navy);letter-spacing:var(--ls-tight);line-height:1.15}
.acct{display:grid;grid-template-columns:236px minmax(0,1fr);gap:var(--space-4);align-items:start}
.acct__nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-2)}
.acct__nav a{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text);padding:10px 12px;border-radius:var(--radius-btn);text-align:left}
.acct__nav a:hover{background:var(--color-surface);color:var(--color-navy)}
.acct__nav a[aria-current="true"]{background:var(--navy-soft);color:var(--color-navy)}
.acct__nav svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.acct__nav hr{border:0;border-top:1px solid var(--color-surface-2);margin:4px 10px}
.acct__main{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.acct-block{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);scroll-margin-top:96px}
.acct-block__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--space-3)}
.acct-block__title{font-family:var(--font-display);font-size:1.22rem;font-weight:var(--fw-bold);color:var(--color-navy);letter-spacing:var(--ls-tight)}
.nextstep{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-surface-2);border-radius:var(--radius-card);padding:var(--space-4)}
.nextstep__body{flex:1 1 300px}
.nextstep__body b{font-family:var(--font-display);color:var(--color-navy)}
.dl{display:flex;flex-direction:column}
.dl__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);padding:13px 0;border-top:1px solid var(--color-surface-2)}
.dl__row:first-child{border-top:0;padding-top:0}
.dl__num{width:36px;height:36px;border-radius:8px;color:#fff;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:.82rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dl__body{flex:1 1 260px;display:flex;flex-direction:column;gap:2px}
.dl__body b{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--color-navy);line-height:1.3}
.table-scroll{overflow-x:auto}
.orders{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.orders th{text-align:left;font-family:var(--font-display);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);font-weight:var(--fw-bold);padding:0 10px 9px;border-bottom:1px solid var(--border);white-space:nowrap}
.orders td{padding:12px 10px;border-bottom:1px solid var(--color-surface-2);vertical-align:middle;color:var(--text);white-space:nowrap}
.orders td:first-child{white-space:normal;min-width:230px}
.orders b{font-family:var(--font-display);color:var(--color-navy)}
.addr-card{background:var(--color-surface);border-radius:var(--radius-btn);padding:var(--space-3) var(--space-4);font-size:var(--fs-sm);line-height:1.75;max-width:420px}
.addr-card b{font-family:var(--font-display);color:var(--color-navy)}
.tlink{color:var(--color-navy-light);font-weight:var(--fw-semibold);font-size:var(--fs-sm);font-family:var(--font-body)}
.tlink:hover{color:var(--color-navy);text-decoration:underline}
.auth-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-3)}
.auth-row--sep{border-top:1px solid var(--color-surface-2);padding-top:var(--space-3)}


.form{display:flex;flex-direction:column;gap:var(--space-3)}
.form__field{display:flex;flex-direction:column;gap:6px}
.form__label{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-navy)}
.form__input{font-family:var(--font-body);font-size:var(--fs-base);color:var(--text-strong);padding:.8rem var(--space-3);border:1px solid var(--border);border-radius:var(--radius-btn);background:#fff;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);width:100%}
.form__input:focus{outline:none;border-color:var(--color-navy);box-shadow:0 0 0 3px var(--navy-soft)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}


[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){
 .dash__stats{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
 .acct{grid-template-columns:1fr}
 .acct__nav{position:static;flex-direction:row;overflow-x:auto;padding:6px;gap:4px}
 .acct__nav hr{display:none}
 .acct__nav a{white-space:nowrap;padding:9px 12px}
 .acct-block{padding:var(--space-4)}
}
@media (max-width:767px){
 .dbar{grid-template-columns:1fr;gap:6px}
 .dbar>span{order:3}
 .form__row{grid-template-columns:1fr}
}

/* ===== Login banner (logged-out only, injected via JS) ===== */
.lib-login-banner{background:var(--navy-soft);border-bottom:2px solid rgba(74,111,165,.25);padding:var(--space-3) 0;width:100%}
.lib-login-banner__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
.lib-login-banner__text{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-strong);margin:0;flex:1 1 280px}
.lib-login-banner .btn--primary{flex:0 0 auto;white-space:nowrap}

/* ===== Bricks-conversie fixes (page-scoped) ===== */
html{font-size:100%!important;}                 /* rem-root reset: Bricks zet html op 62.5% */
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,.dl__num.brxe-text-basic,.stchip.brxe-text-basic,.tag--demo.brxe-text-basic,.form__label.brxe-text-basic,.acct-block__title.brxe-text-basic,.acct-head__title.brxe-text-basic,.acct__nav.brxe-text-basic,.dash__stat.brxe-text-basic,.upgrade__price.brxe-text-basic,.nextstep__body.brxe-text-basic,.dbar.brxe-text-basic{font-family:var(--font-display)!important;}