/* VergeLabs Media Library — site design system.
   Grammar shared with vergelabs.nl (perk register): OT Sono, paper ground tinted toward the accent,
   1px hairlines, 28px radii, one accent, film grain. The accent is four numbers on :root; the admin
   theme setting overrides them (see /api/theme.css). Everything else derives. */

@font-face{font-family:"OTSono";font-weight:400;font-display:swap;src:url(/fonts/OTSono-Regular.woff2) format("woff2")}
@font-face{font-family:"OTSono";font-weight:500;font-display:swap;src:url(/fonts/OTSono-Medium.woff2) format("woff2")}
@font-face{font-family:"OTSono";font-weight:600;font-display:swap;src:url(/fonts/OTSono-Semibold.woff2) format("woff2")}

:root{
  /* accent: cobalt #2846A8 as hue / saturation / lightness, plus the hue the paper is tinted toward */
  --ah:226;--as:62%;--al:41%;--th:226;
  --accent:hsl(var(--ah) var(--as) var(--al));
  --accent-dark:hsl(var(--ah) var(--as) calc(var(--al) - 11%));
  --accent-light:hsl(var(--ah) var(--as) calc(var(--al) + 9%));
  --soft:hsl(var(--ah) min(var(--as),45%) 91%);
  --soft-text:hsl(var(--ah) min(calc(var(--as) + 5%),55%) 24%);
  --page:hsl(var(--th) 30% 98%);
  --hero:hsl(var(--th) 45% 93%);
  --band:hsl(var(--th) 40% 88%);
  --surface:hsl(var(--th) 28% 95%);
  --surface-h:hsl(var(--th) 28% 92%);
  --tile-active:hsl(var(--th) 28% 90%);
  --ah2:calc(var(--ah) + 150);--ah3:calc(var(--ah) - 60);
  --accent-2:hsl(var(--ah2) 72% 56%);--soft-2:hsl(var(--ah2) 70% 92%);--soft-text-2:hsl(var(--ah2) 60% 30%);
  --accent-3:hsl(var(--ah3) 48% 44%);--soft-3:hsl(var(--ah3) 45% 91%);--soft-text-3:hsl(var(--ah3) 50% 24%);
  --white:#fff;
  --ink:hsl(var(--th) 10% 7%);
  --n50:hsl(var(--th) 5% 27%);
  --n60:hsl(var(--th) 4% 42%);
  --n70:hsl(var(--th) 4% 52%);
  --n80:hsl(var(--th) 14% 80%);
  --dark:hsl(var(--ah) 42% 12%);
  --dark-2:hsl(var(--ah) 38% 17%);
  --dark-card:hsl(var(--ah) 40% 15%);
  --ok-bg:#D6FFEF;--ok:#007D4B;--warn-bg:#FDE7ED;--warn:#D20F46;
  --font:"OTSono",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --r-m:28px;--r-s:18px;--r-xs:8px;--max:1300px;--ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{background:var(--page);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
h4,h5,h6{letter-spacing:-.01em;line-height:1.2}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
strong,b{font-weight:500}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--soft);color:var(--soft-text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layout ---------- */
.container{max-width:var(--max);margin:0 auto;padding-inline:48px}
@media (min-width:1396px){.container{padding-inline:0}}
.container--s{max-width:900px}
.container--m{max-width:1080px}
.blok{padding-block:120px 0}
.blok--strak{padding-block:80px 0}
.blok--eind{padding-bottom:120px}
.center{text-align:center}
.intro{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.intro--links{align-items:flex-start;text-align:left;margin:0}
.h-l{font-size:clamp(38px,4.2vw,58px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.h-m{font-size:clamp(34px,3.8vw,52px);line-height:1.07;letter-spacing:-.03em;text-wrap:balance}
.h-s{font-size:28px;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.h-xs{font-size:22px;line-height:1.25;letter-spacing:-.02em}
.lead{font-size:20px;line-height:1.45;color:var(--n60);text-wrap:pretty}
.body{font-size:17px;color:var(--n60)}
.klein{font-size:14px;color:var(--n60)}
.label{font-size:13px;line-height:1;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--n60)}
.label--accent{color:var(--accent-dark)}
.nr{font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--accent-dark)}
.hairline{border-top:1px solid var(--n80)}
.stapel{display:flex;flex-direction:column;gap:18px}
.rijtje{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.prose p{font-size:18px;line-height:1.6;color:var(--n50)}
.prose p+p{margin-top:16px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink)}

/* ---------- buttons, links, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:12px;background:var(--accent);color:var(--white);font-size:15px;font-weight:500;white-space:nowrap;border:1px solid var(--accent);transition:background .15s,border-color .15s;cursor:pointer;box-shadow:0 10px 24px -16px var(--accent)}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--white)}
.btn svg{width:14px;height:14px;flex:none}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--n80);box-shadow:none}
.btn--outline:hover{background:var(--surface);color:var(--ink);border-color:var(--n80)}
.btn--ink{background:var(--dark);border-color:var(--dark);box-shadow:none}
.btn--ink:hover{background:var(--dark-2);border-color:var(--dark-2)}
.btn--ghost{background:transparent;color:var(--white);border-color:rgb(255 255 255/.6);box-shadow:none}
.btn--ghost:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--wit{background:var(--white);color:var(--ink);border-color:var(--white);box-shadow:none}
.btn--wit:hover{background:var(--surface);border-color:var(--surface);color:var(--ink)}
.btn--s{height:38px;padding:0 16px;font-size:14px;border-radius:10px}
.btn--xs{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.link{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link svg{width:12px;height:12px}
.link:hover{color:var(--accent-dark)}
.pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--n80);background:var(--white);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--n50);white-space:nowrap}
.pill b{font-size:14px;font-weight:500}
.pill--photo{background:transparent;color:var(--white);border-color:rgb(255 255 255/.6)}
.pill--accent{background:var(--soft);border-color:transparent;color:var(--soft-text)}
.pill--aan{background:var(--dark);border-color:var(--dark);color:var(--white)}
.chip{display:inline-block;border-radius:999px;padding:5px 10px;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:var(--surface);color:var(--n50);white-space:nowrap;line-height:1.2}
.chip--accent{background:var(--soft);color:var(--soft-text)}
.chip--ok{background:var(--ok-bg);color:var(--ok)}
.chip--warn{background:var(--warn-bg);color:var(--warn)}
.chip--dark{background:var(--dark);color:var(--white)}
.chip--wit{background:var(--white);box-shadow:inset 0 0 0 1px var(--n80)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chev{width:14px;height:14px}

/* ---------- nav ---------- */
.navwrap{position:sticky;top:0;z-index:50;padding:24px 30px 0;pointer-events:none}
.nav{pointer-events:auto;max-width:1380px;margin:0 auto;height:74px;background:var(--surface);border-radius:50px;padding:0 40px;display:flex;align-items:center;gap:24px;box-shadow:0 1px 0 rgb(20 20 15/.06),0 8px 24px -20px rgb(20 20 15/.25);position:relative}
.logo{display:flex;align-items:center;gap:12px;white-space:nowrap}
.logo .mark{height:28px;width:auto;display:block;flex:none}
.logo small{font-size:12px;color:var(--n60);letter-spacing:0;line-height:1.1;font-weight:400;padding-left:12px;border-left:1px solid var(--n80)}
.nav .links{display:flex;gap:26px;margin-left:56px;font-size:15.5px;font-weight:500}
.nav .links a{position:relative;padding:6px 0}
.nav .links a:hover{color:var(--accent-dark)}
.nav .links a .aan{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);border-radius:1px;display:block}
.nav .spacer{flex:1}
.nav .acct{position:relative}
.nav .acct>button{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--n80);font-size:15px;font-weight:500}
.nav .acct>button:hover{background:var(--white)}
.nav .menu{position:absolute;right:0;top:calc(100% + 10px);width:240px;background:var(--white);border-radius:16px;box-shadow:inset 0 0 0 1px var(--n80),0 30px 50px -30px rgb(20 20 15/.5);padding:8px;z-index:5;display:flex;flex-direction:column}
.nav .menu p{font-size:12.5px;color:var(--n60);padding:10px 12px 8px;border-bottom:1px solid var(--n80);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis}
.nav .menu a,.nav .menu button{display:block;text-align:left;padding:9px 12px;border-radius:8px;font-size:14.5px;font-weight:500}
.nav .menu a:hover,.nav .menu button:hover{background:var(--surface)}
.nav .menu button.uit{color:var(--warn)}
.burger{width:44px;height:44px;display:none;place-items:center;border-radius:50%;margin-left:-8px;position:relative;flex:none}
.burger i{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease)}
.burger i:nth-child(1){top:18px}
.burger i:nth-child(2){top:25px}
.burger[aria-expanded="true"] i:nth-child(1),.burger.aan i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2),.burger.aan i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.mega{pointer-events:auto;max-width:1380px;margin:12px auto 0;background:var(--dark);border-radius:var(--r-m);padding:28px 32px 32px;color:var(--white);display:flex;flex-direction:column;gap:4px}
.mega a,.mega button{display:block;text-align:left;font-size:18px;font-weight:500;padding:10px 0;color:var(--white);border-bottom:1px solid rgb(255 255 255/.1)}
.mega a:hover,.mega button:hover{color:var(--accent-light)}
.mega .btn{margin-top:18px;border-bottom:0;text-align:center;justify-content:center}
.scrim{position:fixed;inset:0;background:rgb(20 20 15/.28);backdrop-filter:blur(14px);z-index:40}

/* ---------- hero ---------- */
.hero{background:var(--hero);margin-top:-98px;padding-top:120px;position:relative;overflow:hidden}
.hero .intro{gap:18px}
.hero .h-l{max-width:26ch}
.hero .sub{font-size:17px;color:var(--n60);max-width:640px;text-align:center;text-wrap:pretty}
.hero .cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.hero .fine{font-size:13px;color:var(--n70)}
.launch{display:inline-flex;align-items:center;gap:12px;background:var(--white);border-radius:999px;padding:6px 14px 6px 6px;font-size:13.5px;color:var(--n50);box-shadow:inset 0 0 0 1px var(--n80);flex-wrap:wrap;justify-content:center}
.launch .chip{background:var(--accent);color:var(--white)}
.launch a{font-weight:500;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.product{margin-top:56px;position:relative;height:400px;overflow:hidden}
.tableau{position:relative;width:1280px;max-width:100%;margin:0 auto;height:100%;transform:scale(.86);transform-origin:top center}
.tablet{position:absolute;left:0;top:0;width:860px;height:560px;background:#101010;border-radius:26px;padding:13px 13px 0;box-shadow:inset 0 0 0 2px #3b3b37,0 40px 70px -50px rgb(20 20 15/.7)}
.tablet::before{content:"";position:absolute;left:50%;top:12px;width:122px;height:22px;transform:translateX(-50%);background:#101010;border-radius:0 0 14px 14px;z-index:2}
.tablet::after{content:"";position:absolute;left:calc(50% + 22px);top:18px;width:6px;height:6px;border-radius:50%;background:#222a36;box-shadow:inset 0 0 0 1.5px #3b3b37;z-index:3}
.tablet .scr{background:var(--white);border-radius:14px 14px 0 0;height:100%;overflow:hidden;display:flex;flex-direction:column}
.libhead{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--n80)}
.tablet .libhead{padding-top:30px}
.libhead h4{font-size:17px;letter-spacing:-.02em}
.libhead h4 small{font-size:11.5px;color:var(--n60);margin-left:8px;letter-spacing:0}
.kn{margin-left:auto;display:flex;gap:8px}
.kn span{font-size:11px;padding:6px 10px;border:1px solid var(--n80);border-radius:4px;background:var(--white);white-space:nowrap}
.kn span.d{background:var(--dark);color:var(--white);border-color:var(--dark)}
.libbody{display:grid;grid-template-columns:200px 1fr;flex:1;min-height:0}
.mappen{border-right:1px solid var(--n80);padding:20px 14px;font-size:12px;background:var(--surface)}
.mappen .label{font-size:10px;margin-bottom:10px}
.mappen li{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:8px;color:var(--n50);gap:8px}
.mappen li span{color:var(--n70);font-size:11px}
.mappen li.sel{background:var(--dark);color:var(--white)}
.mappen li.sel span{color:rgb(255 255 255/.7)}
.mappen li.kind{padding-left:22px}
.mappen li.drop{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--ink);background:var(--white)}
.mappen ul{margin-bottom:18px}
.werk{padding:16px 24px}
.filters{display:flex;gap:8px;font-size:11px}
.filters span{padding:6px 10px;border:1px solid var(--n80);border-radius:4px;color:var(--n50);white-space:nowrap}
.filters span.zoek{flex:1;color:var(--n70)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.grid .t{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--white);border:1px solid var(--n80)}
.grid .t img{width:100%;height:100%;object-fit:cover}
.grid .t .ok{position:absolute;right:6px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;font-size:10px;font-weight:600}
.grid .t .dup{position:absolute;left:6px;bottom:6px}
.ghost{position:absolute;left:156px;top:150px;width:84px;height:84px;border-radius:10px;overflow:hidden;transform:rotate(-6deg);box-shadow:0 0 0 3px var(--white),0 24px 40px -20px rgb(20 20 15/.7);z-index:3}
.ghost img{width:100%;height:100%;object-fit:cover}
.ghost i{position:absolute;right:-2px;top:-2px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--white);font-size:11px;font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 2px var(--white)}
.phone{position:absolute;z-index:3;left:800px;top:56px;width:232px;height:420px;background:#141413;border-radius:46px;padding:8px;box-shadow:inset 0 0 0 2px #4a4a45,inset 0 0 0 4px #1f1f1d,0 40px 70px -46px rgb(20 20 15/.8)}
.phone::before{content:"";position:absolute;left:50%;top:18px;width:84px;height:24px;transform:translateX(-50%);background:#0a0a0a;border-radius:13px;z-index:2}
.phone::after{content:"";position:absolute;left:calc(50% + 28px);top:26px;width:8px;height:8px;border-radius:50%;background:#1d2636;box-shadow:inset 0 0 0 2px #2a2a28;z-index:3}
.phone .zijknop{position:absolute;left:-3px;top:120px;width:3px;height:48px;border-radius:2px 0 0 2px;background:#3a3a36}
.phone .scr2{background:var(--surface);border-radius:38px;height:100%;padding:50px 14px 14px;font-size:11px;overflow:hidden}
.scr2 .datum{color:var(--n60);font-size:10px}
.scr2 h6{font-size:15px;margin-top:4px}
.scr2 .kaart{margin-top:12px;border:1px solid var(--n80);border-radius:10px;padding:10px;background:var(--white)}
.scr2 .kaart .r{display:flex;justify-content:space-between;align-items:center;color:var(--n60)}
.scr2 .kaart .tag{font-size:9px;padding:3px 6px;border-radius:3px;background:var(--accent);color:var(--white)}
.scr2 .kaart b{display:block;font-size:12px;margin-top:6px;line-height:1.3;color:var(--ink);min-height:32px}
.scr2 .kaart small{display:block;font-size:10px;color:var(--n60);margin-top:4px}
.scr2 .kaart .bar{margin-top:10px;height:26px;border-radius:6px;background:var(--accent);color:var(--white);font-size:10px;font-weight:500;display:flex;align-items:center;justify-content:center}
.scr2 .foto{width:100%;height:60px;border-radius:6px;object-fit:cover;margin-top:8px}
.scr2 .skel{height:8px;border-radius:4px;background:var(--n80);margin-top:8px}
.scr2 .skel+.skel{width:70%}
.side{position:absolute;width:300px;background:var(--white);border-radius:14px;box-shadow:inset 0 0 0 1px var(--n80),0 30px 50px -30px rgb(20 20 15/.6);font-size:12px;z-index:2;padding:16px 18px}
.side .r{display:flex;justify-content:space-between;align-items:center;color:var(--n60);font-size:11px;gap:8px}
.side.file{left:980px;top:300px}
.side.file ul{margin-top:10px}
.side.file li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--n80);color:var(--n50)}
.side.file li:last-child{border-bottom:0}
.side.file li i{display:inline-block;width:12px;height:9px;border-radius:2px;background:var(--n80);margin-right:8px}
.side.file li.acc i{background:var(--accent)}
.side .acties{margin-top:12px;display:flex;gap:8px;align-items:center}
.k{font-size:11px;padding:6px 10px;border:1px solid var(--n80);border-radius:6px;white-space:nowrap;background:var(--white);display:inline-block}
.k.d{background:var(--dark);color:var(--white);border-color:var(--dark)}
.k.a{background:var(--accent);color:var(--white);border-color:var(--accent)}
.band{background:var(--band);height:76px;display:flex;align-items:center}
.hero--vol .band{flex:none;position:relative;z-index:5}
.band .kop{flex:none;padding:0 40px 0 48px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--n60);border-right:1px solid rgb(20 20 15/.12);height:32px;display:flex;align-items:center}
.band .loop{flex:1;overflow:hidden;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee{display:flex;width:max-content;gap:56px;animation:mq 75s linear infinite;font-size:14.5px;font-weight:500;color:var(--n50);white-space:nowrap}
.marquee>span{display:inline-flex;gap:56px}
.marquee .lg{display:inline-flex;align-items:center;gap:12px}
.marquee .lg img{width:26px;height:26px;border-radius:6px;object-fit:contain}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- panels, wells, cards ---------- */
.well{background:var(--surface);border-radius:var(--r-m);padding:32px;display:grid;place-items:center;min-height:400px;overflow:hidden;position:relative}
.well--klein{min-height:0;padding:24px}
.paneel{background:var(--white);border-radius:14px;box-shadow:inset 0 0 0 1px var(--n80),0 2px 0 rgb(20 20 15/.03),0 34px 60px -40px rgb(20 20 15/.55);font-size:12.5px;width:100%;max-width:560px}
.paneel .kop{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--n80);gap:12px}
.paneel .kop h5{font-size:15px}
.paneel .kop small{color:var(--n60);font-size:11px;margin-left:8px}
.paneel .in{padding:18px 20px}
.paneel .in+.in{border-top:1px solid var(--n80)}
.veld{margin-top:12px}
.veld small{display:block;font-size:10.5px;color:var(--n60);margin-bottom:5px}
.veld div,.veld span.v{display:block;border:1px solid var(--n80);border-radius:6px;padding:8px 10px;font-size:12px;line-height:1.45;background:var(--white)}
.acties{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}
.acties .rest{margin-left:auto;color:var(--n60);font-size:11px}
.lijst li{display:grid;grid-template-columns:1fr auto;gap:12px;padding:9px 0;border-bottom:1px solid var(--n80);align-items:center;font-size:12.5px}
.lijst li:last-child{border-bottom:0}
.lijst li span:last-child{color:var(--n60)}
.lijst li i{display:inline-block;width:14px;height:11px;border-radius:2px;background:var(--n80);margin-right:10px;vertical-align:-1px}
.lijst li.acc i{background:var(--accent)}
.vraag{display:inline-block;background:var(--soft);color:var(--soft-text);border-radius:10px 10px 2px 10px;padding:8px 12px;font-weight:500;font-size:12px;float:right;max-width:80%;margin-top:14px}
.antwoord{clear:both;padding-top:10px;color:var(--n60);font-size:12px}
.uitleg{background:var(--surface);border-radius:8px;padding:10px 12px;margin-top:12px;font-size:11.5px;color:var(--n50);line-height:1.5}
.zoekveld{display:flex;align-items:center;gap:10px;border:1px solid var(--n80);border-radius:999px;padding:8px 14px}
.zoekveld b{font-size:13px}
.zoekveld span{margin-left:auto;color:var(--n60);font-size:11px}
.hits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.hits>div{position:relative}
.hits img{aspect-ratio:1;width:100%;object-fit:cover;border-radius:8px}
.hits>div.top img{outline:2px solid var(--accent);outline-offset:2px}
.hits b{display:block;font-size:11px;margin-top:8px}
.hits small{display:block;font-size:10.5px;color:var(--n60)}
.hits .pct{position:absolute;top:8px;left:8px;background:var(--white);border-radius:999px;padding:3px 7px;font-size:10px;font-weight:500}
.kopie{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--n80)}
.kopie:last-of-type{border-bottom:0}
.kopie img{width:52px;height:52px;border-radius:6px;object-fit:cover}
.kopie b{display:block;font-size:12px}
.kopie small{display:block;color:var(--n60);font-size:11px}
.kopie.stil{opacity:.55}
.tegels{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px}
.tegels>div{background:var(--surface);border-radius:10px;padding:14px 14px 12px}
.tegels b{display:block;font-size:24px;letter-spacing:-.03em;line-height:1}
.tegels span{display:block;font-size:11px;color:var(--n60);margin-top:6px}
.tegels>div.acc{background:var(--soft)}
.tegels>div.acc b{color:var(--soft-text)}
.regels{margin-top:22px;border-top:1px solid var(--n80)}
.regels li{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--n80)}
.regels li b{font-size:13px}
.regels li span{color:var(--n60)}
.regels li em{font-style:normal;color:var(--ink)}
.toast{margin-top:18px;background:var(--soft);border-radius:10px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.toast small{color:var(--soft-text);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.toast p{font-size:12.5px;margin-top:2px;color:var(--ink)}
.toast a,.toast button{font-size:12px;font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.voortgang{height:8px;border-radius:4px;background:var(--n80);overflow:hidden}
.voortgang i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.schakel{display:inline-flex;width:34px;height:20px;border-radius:10px;background:var(--accent);position:relative;flex:none}
.schakel::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--white)}
.schakel.uit{background:var(--n80)}
.schakel.uit::after{right:auto;left:2px}
.kaart{background:var(--surface);border-radius:var(--r-m);padding:28px 24px 32px;display:flex;flex-direction:column;gap:12px;transition:background .2s,transform .25s var(--ease)}
.kaart:hover{background:var(--surface-h)}
.kaart h3{font-size:24px;letter-spacing:-.02em;line-height:1.2}
.kaart p{font-size:15.5px;color:var(--n60)}
.kaart .mini{height:150px;margin:-8px 0 18px}
.kaart .mini svg{width:100%;height:100%}
.kaart--wit{background:var(--white);box-shadow:inset 0 0 0 1px var(--n80)}
.kaart--wit:hover{background:var(--white)}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vier{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rand{border-left:1px solid var(--n80);padding-left:24px}
.callout{background:var(--soft);border-radius:16px;padding:24px 28px;display:flex;flex-direction:column;gap:10px}
.callout .label{color:var(--soft-text)}
.callout p{font-size:17px;line-height:1.55;color:var(--ink)}
.donker{background:var(--dark);color:rgb(255 255 255/.8);border-radius:var(--r-m);padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:56px}
.donker h2,.donker h3{color:var(--white)}
.donker .label{color:rgb(255 255 255/.55)}
.donker .l{display:flex;flex-direction:column;gap:18px;align-self:start;align-items:flex-start}
.donker .stroom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.donker .stap{background:var(--dark-card);border-radius:16px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px}
.donker .stap b{color:var(--white);font-size:15px;display:block}
.donker .stap p{font-size:14px;line-height:1.5}
.donker .stap .nr{color:rgb(255 255 255/.55)}
.donker a{color:var(--white)}
.donker p a{text-decoration:underline;text-underline-offset:3px}
.lovedby{background:var(--surface);border-radius:var(--r-m);padding:34px 40px;display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.lovedby h3{font-size:26px;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.lovedby p{font-size:15.5px;color:var(--n60)}

/* ---------- rows ---------- */
.rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:72px;padding-block:72px;border-top:1px solid var(--n80);align-items:center}
.rij.rechtsom{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.rij.rechtsom .tekst{order:2}
.intro+.rij{margin-top:56px}
.tekst{display:flex;flex-direction:column;gap:18px}
.tekst h2,.tekst h3{font-size:36px;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.tekst p{font-size:17px;line-height:1.55;color:var(--n50)}
.vinkjes{display:flex;flex-direction:column;gap:8px}
.vinkjes li{display:flex;gap:10px;font-size:15.5px;color:var(--n50);line-height:1.45}
.vinkjes li span:first-child{color:var(--accent-dark);font-weight:600;flex:none}
.stat{display:flex;gap:14px;align-items:baseline}
.stat b{font-size:34px;line-height:1;letter-spacing:-.03em;font-weight:500}
.stat span{font-size:14px;color:var(--n60)}
.stats{display:flex;gap:32px;flex-wrap:wrap}
.detail{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;padding:28px 32px;background:var(--surface);border-radius:var(--r-s)}
.detail>div{display:flex;gap:12px;font-size:15.5px;line-height:1.5;color:var(--n50)}
.detail>div>span{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:9px}
.detail strong{color:var(--ink)}
.meer{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:14px;font-weight:500;padding:10px 16px;border-radius:999px;border:1px solid var(--n80);background:var(--white)}
.meer:hover{background:var(--surface)}
.meer span{font-size:16px;line-height:1;color:var(--accent-dark)}
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stapkaart{background:var(--surface);border-radius:var(--r-m);padding:28px 24px 32px;display:flex;flex-direction:column;gap:10px}
.stapkaart .nr{font-size:13px}
.stapkaart b{font-size:22px;letter-spacing:-.02em;line-height:1.2;font-weight:500;display:block;margin-top:auto}
.stapkaart p{font-size:15px;color:var(--n60)}
.rooster{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rooster>div{padding:20px 22px;background:var(--surface);border-radius:var(--r-s);display:flex;flex-direction:column;gap:6px}
.rooster>div>div:first-child{font-size:16px;font-weight:500;line-height:1.3}
.rooster>div>div:last-child{font-size:14px;color:var(--n60);line-height:1.5}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--n80);max-width:900px;margin-inline:auto}
.faq>div{border-bottom:1px solid var(--n80)}
.faq button{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;padding:22px 0;font-size:20px;letter-spacing:-.02em;line-height:1.3;text-align:left;font-weight:500}
.faq button span{width:28px;height:28px;border-radius:50%;border:1px solid var(--n80);display:grid;place-items:center;font-size:16px;color:var(--accent-dark);flex:none}
.faq p{font-size:16px;color:var(--n60);margin:-6px 0 22px;max-width:64ch}
.faq p a{text-decoration:underline;text-underline-offset:3px}

/* ---------- pricing ---------- */
.plannen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.plan{background:var(--surface);border-radius:var(--r-m);padding:28px 24px;display:flex;flex-direction:column;gap:10px;position:relative;transition:background .2s}
.plan.uit{box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--white)}
.plan .naam{font-size:22px;font-weight:500;letter-spacing:-.02em}
.plan .voor{font-size:14px;color:var(--n60)}
.plan .prijs{font-size:44px;line-height:1;letter-spacing:-.03em;font-weight:500;margin-top:10px}
.plan .prijs small{font-size:15px;letter-spacing:0;color:var(--n60);margin-left:6px;font-weight:400}
.plan .incl{font-size:13.5px;color:var(--accent-dark);font-weight:500;min-height:20px}
.plan .btn{margin-top:8px}
.plan ul{margin-top:12px;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--n50);padding-top:16px;border-top:1px solid var(--n80)}
.plan ul li{display:flex;gap:10px}
.plan ul li span:first-child{color:var(--accent-dark);font-weight:600;flex:none}
.plan .hoek{position:absolute;top:-12px;left:24px}
.tabel{display:grid;grid-template-columns:2fr repeat(4,.6fr);font-size:15px;border-top:1px solid var(--n80)}
.tabel>div{padding:14px 12px;border-bottom:1px solid var(--n80);display:flex;align-items:center}
.tabel>div:not(:nth-child(5n+1)){justify-content:center;color:var(--n50)}
.tabel .kop{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--n60);background:var(--surface)}
.tabel .kop:first-child{border-radius:12px 0 0 0}
.tabel .kop:nth-child(5){border-radius:0 12px 0 0}
.tabel .dot{color:var(--accent)}
.tabel .dash{color:var(--n80);line-height:1}
.tabel span.note{color:var(--n60);font-size:13px;margin-left:4px}
.tabelwrap{overflow-x:auto}
.calc{background:var(--white);border-radius:var(--r-m);padding:32px;box-shadow:inset 0 0 0 1px var(--n80);display:flex;flex-direction:column;gap:14px}
.calc .kopje{font-size:22px;letter-spacing:-.02em;font-weight:500}
.calc .keuze{display:flex;gap:8px;flex-wrap:wrap}
.calc .keuze button{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--n80);font-size:14px;font-weight:500}
.calc .keuze button.aan{background:var(--dark);color:var(--white);border-color:var(--dark)}
.calc .regel{display:flex;justify-content:space-between;font-size:14.5px;color:var(--n60)}
.calc .regel b{color:var(--ink);font-size:15px}
.calc input[type=range]{width:100%;accent-color:var(--accent)}
.calc .schaal{display:flex;justify-content:space-between;font-size:12px;color:var(--n70);margin-top:-6px}
.calc .toggle{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--surface);font-size:14.5px;text-align:left}
.calc .toggle .chip{margin-left:auto}
.calc .uitkomst{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:16px;border-top:1px solid var(--n80)}
.calc .uitkomst>div>div:first-child{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--n60);font-weight:500}
.calc .uitkomst>div>div:last-child{font-size:34px;letter-spacing:-.03em;line-height:1.1;margin-top:6px}
.calc .noot{font-size:13.5px;color:var(--n60)}
.aanbod{background:var(--surface);border-radius:var(--r-m);padding:40px 44px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.aanbod h2{font-size:32px;letter-spacing:-.03em;line-height:1.1}
.aanbod p{font-size:16px;color:var(--n50);line-height:1.55}
.aanbod--donker{background:var(--dark);color:rgb(255 255 255/.8)}
.aanbod--donker h2{color:var(--white)}
.aanbod--donker p{color:rgb(255 255 255/.8)}
.aanbod--donker .label{color:rgb(255 255 255/.55)}

/* ---------- docs ---------- */
.docs{display:grid;grid-template-columns:260px minmax(0,1fr);gap:64px;padding-block:56px 120px}
.docs aside{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:22px}
.docs aside .label{margin-bottom:-8px}
.docs aside input{width:100%;height:42px;border-radius:12px;border:1px solid var(--n80);background:var(--white);padding:0 14px;font-size:14.5px}
.docs aside input:focus{border-color:var(--accent);outline:0}
.docs aside .hits-doc{display:flex;flex-direction:column;gap:2px;background:var(--white);border-radius:12px;box-shadow:inset 0 0 0 1px var(--n80);padding:6px}
.docs aside .hits-doc a{padding:8px 10px;border-radius:8px;font-size:14px}
.docs aside .hits-doc a:hover{background:var(--surface)}
.docs aside .hits-doc span{padding:8px 10px;font-size:13.5px;color:var(--n60)}
.docs aside nav{display:flex;flex-direction:column;gap:2px}
.docs aside nav a{padding:9px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--n60)}
.docs aside nav a:hover{color:var(--ink);background:var(--surface)}
.docs aside nav a.aan{background:var(--dark);color:var(--white)}
.docs aside .op{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--n80);margin-left:12px}
.docs aside .op a{padding:6px 14px;font-size:14px;color:var(--n60)}
.docs aside .op a:hover{color:var(--ink)}
.docs article{max-width:760px;display:flex;flex-direction:column;gap:22px}
.docs article h1{font-size:clamp(32px,3.4vw,44px);line-height:1.08;letter-spacing:-.03em}
.docs article h2{font-size:26px;letter-spacing:-.02em;line-height:1.2;margin-top:28px;scroll-margin-top:130px}
.docs article p,.docs article li{font-size:17px;line-height:1.6;color:var(--n50)}
.docs article p a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.docs article strong{color:var(--ink)}
.feiten{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feiten>div{background:var(--surface);border-radius:14px;padding:16px 20px}
.feiten>div>div:first-child{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--n60)}
.feiten>div>div:last-child{font-size:17px;margin-top:4px}
.streep li{display:flex;gap:12px}
.streep li span:first-child{color:var(--accent-dark);flex:none}
.stapjes{display:flex;flex-direction:column;gap:14px}
.stapjes>div{display:grid;grid-template-columns:32px 1fr;gap:16px;align-items:start}
.stapjes>div>span{width:32px;height:32px;border-radius:50%;background:var(--dark);color:var(--white);display:grid;place-items:center;font-size:13px;font-weight:500}
.notitie{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 1px var(--n80);font-size:15px;flex-wrap:wrap}
.notitie .rijtje{gap:8px}
.kaartjes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kaartjes>div{background:var(--surface);border-radius:14px;padding:18px 20px}
.kaartjes>div>div:first-child{font-weight:500;font-size:15.5px;margin-bottom:6px}
.kaartjes>div p{font-size:15px!important;color:var(--n60)!important;line-height:1.5!important}
.volgende{margin-top:16px;padding:22px 26px;border-radius:16px;background:var(--soft);display:flex;flex-direction:column;gap:6px}
.volgende .label{color:var(--soft-text)}
.volgende a{font-size:18px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.schakels{display:flex;flex-direction:column;gap:0;background:var(--white);border-radius:14px;box-shadow:inset 0 0 0 1px var(--n80)}
.schakels>div{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:14px 18px;border-bottom:1px solid var(--n80);align-items:start}
.schakels>div:last-child{border-bottom:0}
.schakels>div.kop{grid-template-columns:1fr auto;align-items:center;background:var(--surface);border-radius:14px 14px 0 0}
.schakels b{display:block;font-size:15px}
.schakels small{display:block;font-size:13.5px;color:var(--n60);margin-top:2px}
.grafiek{background:var(--white);border-radius:14px;box-shadow:inset 0 0 0 1px var(--n80);padding:20px 22px}
.grafiek .kop{display:flex;justify-content:space-between;font-size:14px;color:var(--n60);margin-bottom:12px}
.grafiek .kop b{color:var(--ink);font-size:18px}
.grafiek .staven{display:flex;align-items:flex-end;gap:6px;height:90px}
.grafiek .staven i{flex:1;background:var(--soft);border-radius:4px 4px 0 0;display:block}
.grafiek .staven i.hoog{background:var(--accent)}
.grafiek .as{display:flex;justify-content:space-between;font-size:12px;color:var(--n70);margin-top:8px}
.kosten li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--n80);font-size:16px}
.kosten li span:last-child{color:var(--accent-dark);font-weight:500;white-space:nowrap}
.nullen{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nullen>div{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--surface);border-radius:14px;padding:18px 20px}
.nullen>div>div:first-child{font-size:34px;letter-spacing:-.03em;line-height:1;color:var(--accent-dark)}

/* ---------- changelog ---------- */
.release{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;padding-block:48px;border-top:1px solid var(--n80)}
.release .versie{display:flex;flex-direction:column;gap:8px;align-items:flex-start;position:sticky;top:120px;align-self:start}
.release .versie>div:first-child{font-size:34px;letter-spacing:-.03em;line-height:1}
.release .versie>div:first-child span{font-size:16px;color:var(--n60);letter-spacing:0}
.release .versie .naam{font-size:17px;color:var(--n50)}
.release .items{display:flex;flex-direction:column;gap:18px}
.release .items>div{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start}
.release .items p{font-size:16.5px;line-height:1.55;color:var(--n50)}
.roadmap{background:var(--surface);border-radius:var(--r-m);padding:44px 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px}
.roadmap .lijn>div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--n80);align-items:center}
.roadmap .lijn>div:last-child{border-bottom:0}
.roadmap .lijn b{display:block;font-size:16px}
.roadmap .lijn small{display:block;font-size:14px;color:var(--n60)}
.roadmap p a{text-decoration:underline;text-underline-offset:3px}

/* ---------- guides / articles ---------- */
.tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tabs .label{margin-right:8px}
.tabs a{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--n80);display:inline-flex;align-items:center;font-size:14.5px;font-weight:500}
.tabs a.aan{background:var(--dark);color:var(--white);border-color:var(--dark)}
.artikel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;padding-block:56px;border-top:1px solid var(--n80)}
.artikel>h2{font-size:30px;letter-spacing:-.03em;line-height:1.1;position:sticky;top:120px;align-self:start;text-wrap:balance}
.artikel .prose{display:flex;flex-direction:column;gap:18px}
.artikel .prose p+p{margin-top:0}
.kort{background:var(--white);border-radius:var(--r-m);padding:32px 36px;box-shadow:inset 0 0 0 1px var(--n80);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.kort p{font-size:18px;line-height:1.5}
.vergelijk{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1fr;font-size:15px;border-top:1px solid var(--n80);min-width:760px}
.vergelijk>div{padding:14px 14px;border-bottom:1px solid var(--n80);color:var(--n50);line-height:1.4}
.vergelijk>div:nth-child(5n+1){color:var(--ink);font-weight:500}
.vergelijk>div:nth-child(5n+2){background:var(--soft);color:var(--soft-text)}
.vergelijk .kop{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--n60)}
.voorna{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.voorna .lbl{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--n60);margin-bottom:12px}
.mockje{background:var(--white);border-radius:14px;box-shadow:inset 0 0 0 1px var(--n80);padding:16px;font-size:12px;position:relative;overflow:hidden}
.mockje .kop{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--n80);margin-bottom:12px;font-weight:500}
.mockje .kop span:last-child{color:var(--n60);font-weight:400}
.mockje .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.mockje .thumbs img{aspect-ratio:1;border-radius:6px;object-fit:cover;width:100%}
.mockje .tree{display:flex;flex-direction:column;gap:4px}
.mockje .tree>div{display:flex;justify-content:space-between;padding:5px 8px;border-radius:6px;background:var(--surface);color:var(--n50)}
.mockje .tree>div span:last-child{color:var(--n70)}
.mockje.kapot .tree{position:absolute;left:100px;top:70px;width:140px;transform:rotate(-2deg);box-shadow:0 10px 20px -10px rgb(0 0 0/.3);background:var(--white);padding:6px;border-radius:8px}
.mockje.kapot .kapje{position:absolute;right:16px;bottom:16px;width:140px;background:var(--white);box-shadow:0 0 0 1px var(--n80);padding:10px;border-radius:8px}
.mockje.kapot .kapje div+div{height:8px;border-radius:4px;background:var(--n80);margin-top:8px}
.mockje .waarschuw{position:absolute;left:16px;bottom:16px}
.gerelateerd{display:flex;gap:20px;flex-wrap:wrap;align-items:center;padding-block:40px;border-top:1px solid var(--n80)}
.gerelateerd a{font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ---------- support ---------- */
.steun{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.steun>div{background:var(--surface);border-radius:var(--r-m);padding:36px;display:flex;flex-direction:column;gap:14px}
.steun>div.uit{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--accent)}
.steun h2{font-size:26px;letter-spacing:-.02em;line-height:1.2;word-break:break-word}
.steun p{font-size:16px;color:var(--n50);line-height:1.55}
.steun .box{background:var(--surface);border-radius:14px;padding:16px 18px;margin-top:6px}
.steun .box>div:first-child{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--n60);margin-bottom:6px}
.steun .box p{font-size:15px}
.voordat>div{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--n80)}
.voordat>div:last-child{border-bottom:0}
.voordat b{display:block;font-size:18px;letter-spacing:-.02em;font-weight:500}
.voordat small{display:block;font-size:15px;color:var(--n60);margin-top:4px;line-height:1.5}

/* ---------- legal ---------- */
.wet{display:flex;flex-direction:column;gap:0;max-width:820px}
.wet>div{display:grid;grid-template-columns:48px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--n80)}
.wet>div>span{font-size:13px;color:var(--accent-dark);font-weight:500;padding-top:6px}
.wet>div>div>div:first-child,.wet h3{font-size:20px;letter-spacing:-.02em;font-weight:500;margin-bottom:8px}
.wet p{font-size:16.5px;line-height:1.6;color:var(--n50)}
.wet p a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.wet .sub>div{padding:14px 0;border-top:1px solid var(--n80)}
.wet .sub .chip{margin-bottom:6px}

/* ---------- footer ---------- */
.fvoet{margin-top:96px;background:var(--accent);color:var(--white);border-radius:var(--r-m) var(--r-m) 0 0;padding-block:48px 0;overflow:hidden}
.fvoet .contact{display:flex;gap:40px;align-items:baseline;padding-bottom:22px;border-bottom:1px solid rgb(255 255 255/.25);flex-wrap:wrap}
.fvoet .contact h5{font-size:22px;letter-spacing:-.02em;color:var(--white)}
.fvoet .contact a{font-size:18px}
.fvoet .kolommen{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;padding-block:48px 64px}
.fvoet h6{font-size:18px;margin-bottom:16px;color:var(--white)}
.fvoet li,.fvoet .kolommen a{font-size:17px;margin-bottom:10px;display:block}
.fvoet .kolommen a:hover{text-decoration:underline;text-underline-offset:3px}
.fvoet .over{font-size:16px;color:rgb(255 255 255/.85);max-width:32ch;line-height:1.5;margin-top:14px}
.fvoet .woord{font-size:200px;line-height:1.2;letter-spacing:-.03em;font-weight:500;white-space:nowrap;display:flex;width:max-content;gap:120px;animation:mq 40s linear infinite;color:var(--ink)}
.fvoet .woord span{display:inline-flex;gap:120px}
.onderste{padding-block:40px 32px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;align-items:start}
.onderste .logo .mark{height:34px}
.onderste p{font-size:15px;margin-top:14px;color:var(--n50)}
.onderste li{font-size:15px;margin-bottom:8px}
.onderste .fine{grid-column:1/-1;font-size:12.5px;color:var(--n60);margin-top:12px;line-height:1.5}

/* ---------- app pages (cart, checkout, account, admin) ---------- */
.app{padding-block:48px 120px}
.app .kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.app .kop h1{font-size:clamp(30px,3.2vw,40px);letter-spacing:-.03em;line-height:1.08}
.app .twee{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;gap:32px}
.vak{background:var(--white);border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--n80);padding:32px}
.vak--zacht{background:var(--surface);box-shadow:none}
.vak h2{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.vak h3{font-size:18px;letter-spacing:-.02em}
.vak+.vak{margin-top:20px}
.formveld{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.formveld label{font-size:13px;font-weight:500;color:var(--n50)}
.formveld input,.formveld select,.formveld textarea{height:46px;border-radius:12px;border:1px solid var(--n80);background:var(--white);padding:0 14px;font-size:15.5px;width:100%}
.formveld textarea{height:auto;min-height:120px;padding:12px 14px;resize:vertical}
.formveld input:focus,.formveld select:focus,.formveld textarea:focus{border-color:var(--accent);outline:0;box-shadow:0 0 0 3px var(--soft)}
.formveld small{font-size:13px;color:var(--n60)}
.fout{background:var(--warn-bg);color:var(--warn);border-radius:12px;padding:12px 16px;font-size:14.5px}
.goed{background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:12px 16px;font-size:14.5px}
.optie{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px 18px;border-radius:16px;border:1px solid var(--n80);background:var(--white);cursor:pointer;align-items:center;text-align:left;width:100%}
.optie.aan{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--soft)}
.optie b{display:block;font-size:16px}
.optie small{display:block;font-size:14px;color:var(--n60);margin-top:2px}
.optie .prijs{font-size:20px;letter-spacing:-.02em;font-weight:500;white-space:nowrap}
.optie+.optie{margin-top:10px}
.totaal{display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--n50)}
.totaal>div{display:flex;justify-content:space-between;gap:16px}
.totaal>div.eind{border-top:1px solid var(--n80);padding-top:12px;font-size:20px;color:var(--ink);font-weight:500}
.tabs-app{display:flex;gap:6px;padding:6px;background:var(--surface);border-radius:999px;width:max-content;max-width:100%;overflow-x:auto}
.tabs-app a,.tabs-app button{height:38px;padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--n60);white-space:nowrap;display:inline-flex;align-items:center}
.tabs-app .aan{background:var(--white);color:var(--ink);box-shadow:0 1px 0 rgb(20 20 15/.06)}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi>div{background:var(--surface);border-radius:16px;padding:18px 20px}
.kpi b{display:block;font-size:30px;letter-spacing:-.03em;line-height:1;font-weight:500}
.kpi span{display:block;font-size:13px;color:var(--n60);margin-top:8px}
.kpi>div.acc{background:var(--soft)}
.kpi>div.acc b{color:var(--soft-text)}
table.data{width:100%;border-collapse:collapse;font-size:14.5px}
table.data th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--n60);padding:10px 12px;border-bottom:1px solid var(--n80)}
table.data td{padding:12px;border-bottom:1px solid var(--n80);vertical-align:top;color:var(--n50)}
table.data td:first-child{color:var(--ink)}
table.data tr:hover td{background:var(--surface)}
.tabelwrap table.data{min-width:640px}
.leeg{padding:40px;text-align:center;color:var(--n60);background:var(--surface);border-radius:var(--r-s);font-size:15px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;box-shadow:0 0 0 2px transparent;transition:box-shadow .15s}
.swatch.aan{box-shadow:0 0 0 2px var(--ink)}


/* ---------- marks, not pills: one device for every label, tag and tick, the brand square ---------- */
.chip,.pill{display:inline-flex;align-items:center;gap:8px;height:auto;padding:0;border:0;border-radius:0;background:none;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--n50);line-height:1.2;white-space:nowrap}
.chip::before,.pill::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--n80);flex:none;box-shadow:inset 0 0 0 1px rgb(20 20 15/.12)}
.pill b{display:none}
.chip--accent,.pill--accent{color:var(--accent-dark)}
.chip--accent::before,.pill--accent::before,.pill--aan::before{background:var(--accent);box-shadow:none}
.pill--aan{color:var(--ink)}
.chip--ok{color:var(--ok)}.chip--ok::before{background:var(--ok);box-shadow:none}
.chip--warn{color:var(--warn)}.chip--warn::before{background:var(--warn);box-shadow:none}
.chip--dark{color:var(--ink)}.chip--dark::before{background:var(--ink);box-shadow:none}
.chip--wit,.pill--photo{color:var(--white)}.chip--wit::before,.pill--photo::before{background:var(--white);box-shadow:none}
.donker .chip,.aanbod--donker .chip,.donker .label,.aanbod--donker .label{color:rgb(255 255 255/.85)}
.donker .chip::before,.aanbod--donker .chip::before{background:var(--white);box-shadow:none}
.paneel .chip,.side .chip,.scr2 .chip,.mockje .chip{font-size:10px}
.grid .t .dup,.mockje .waarschuw,.hits .pct{background:var(--white);border-radius:4px;padding:3px 6px;box-shadow:0 1px 0 rgb(20 20 15/.08)}
.grid .t .dup::before{width:7px;height:7px}
.launch{background:none;box-shadow:none;border-radius:0;padding:10px 0;border-top:1px solid var(--n80);border-bottom:1px solid var(--n80);gap:16px}
.launch .chip{color:var(--accent-dark);background:none}.launch .chip::before{background:var(--accent);box-shadow:none}
.plan .hoek{position:static;margin-bottom:4px}
.plan.uit{box-shadow:inset 0 0 0 1px var(--n80)}
.plan.uit .naam::after{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--accent);margin-top:10px}
.tabel .dot,.tabel .dash{font-size:0;line-height:0}
.tabel .dot::before,.tabel .dash::before{content:"";width:12px;height:12px;border-radius:3px;display:block}
.tabel .dot::before{background:var(--accent)}
.tabel .dash::before{box-shadow:inset 0 0 0 1px var(--n80)}
.faq button span{width:auto;height:auto;border:0;font-size:24px;line-height:1;color:var(--accent-dark)}
.detail>div>span{width:9px;height:9px;border-radius:2px;margin-top:8px}
.demo .status i{border-radius:2px}
.stapjes>div{grid-template-columns:36px 1fr}
.stapjes>div>span{width:auto;height:auto;border-radius:0;background:none;color:var(--accent-dark);font-size:13px;letter-spacing:.06em;justify-content:start;padding-top:6px;position:relative}
.stapjes>div>span::after{content:"";position:absolute;left:0;bottom:-2px;width:14px;height:2px;border-radius:1px;background:var(--accent)}
.tabs{gap:22px}
.tabs a{height:auto;padding:6px 0;border:0;border-radius:0;border-bottom:2px solid transparent;color:var(--n60)}
.tabs a.aan{background:none;color:var(--ink);border-bottom-color:var(--accent)}
.tabs a:hover{color:var(--ink)}
.tabs-app{background:none;border-radius:0;padding:0;gap:22px;border-bottom:1px solid var(--n80)}
.tabs-app a,.tabs-app button{height:auto;padding:10px 0;border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs-app .aan{background:none;box-shadow:none;border-bottom-color:var(--accent)}
.meer{border:0;background:none;padding:0;border-radius:0;text-decoration:underline;text-underline-offset:4px;gap:8px}
.meer:hover{background:none;color:var(--accent-dark)}
.calc .keuze button{border-radius:8px;padding:0 12px}
.calc .keuze button:has(.pill--aan){background:var(--dark);border-color:var(--dark)}
.calc .keuze button:has(.pill--aan) .pill{color:var(--white)}
.calc .keuze button:has(.pill--aan) .pill::before{background:var(--white)}
.zoekveld{border-radius:8px}
.swatch{border-radius:10px}
.ghost i{border-radius:6px}
.grid .t .ok{border-radius:4px}
.kpi>div,.tegels>div{border-radius:10px}
.nav .acct>button span{display:none}
.nav .acct>button::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);display:block}

/* ---------- home hero: text left, the product right, one viewport on every screen ---------- */
.hero--vol{height:100vh;min-height:560px;display:flex;flex-direction:column;overflow:hidden;padding-top:clamp(84px,12vh,120px)}
.hero--vol .launch{display:block;border:0;padding:0;margin:0 0 2px;font-size:clamp(12px,1.5vh,13.5px);line-height:1.5;color:var(--n60);max-width:52ch}
.hero--vol .launch>span,.hero--vol .launch>a{display:inline}
.hero--vol .launch .chip{display:inline-flex;margin-right:10px;vertical-align:1px}
.hero--vol .launch a{color:var(--accent-dark);margin-left:8px;text-decoration:underline;text-underline-offset:3px}
.hero--vol .kop2{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;gap:clamp(24px,3vw,48px);padding-left:max(48px,calc((100vw - var(--max))/2))}
.hero--vol .tekstkolom{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,2vh,20px);max-width:600px;text-align:left}
.hero--vol .tekstkolom .h-l{font-size:clamp(30px,min(3.9vw,6vh),60px);max-width:14ch;text-wrap:balance}
.hero--vol .tekstkolom .sub{font-size:clamp(14px,1.9vh,17.5px);line-height:1.5;text-align:left;max-width:52ch;color:var(--n60)}
.hero--vol .tekstkolom .label{font-size:clamp(11px,1.4vh,13px)}
.hero--vol .tekstkolom .cta{justify-content:flex-start}
.hero--vol .btn{height:clamp(38px,5vh,46px)}
.hero--vol .fijn{display:flex;flex-wrap:wrap;gap:4px 18px}
.hero--vol .fine{font-size:clamp(11px,1.4vh,13px)}
.hero--vol .product{height:100%;min-height:0;min-width:0;display:flex;align-items:flex-end;justify-content:flex-start;overflow:visible}
.hero--vol .tableau{--tw:880;--th2:480;position:relative;width:880px;max-width:none;height:560px;flex:none;transform:scale(var(--tscale,.8)) translateY(16px);transform-origin:left bottom}
.hero--vol .laag{position:absolute;translate:calc(var(--px,0) * var(--dx,0px)) calc(var(--py,0) * var(--dy,0px));animation:rijs .9s var(--ease) both}
.hero--vol .l1{left:0;top:20px;--dx:5px;--dy:4px;animation-delay:.05s}
.hero--vol .l2{left:620px;top:36px;--dx:14px;--dy:10px;animation-delay:.35s;z-index:3}
.hero--vol .l3{left:548px;top:330px;--dx:9px;--dy:7px;animation-delay:.6s;z-index:2}
.hero--vol .tablet{position:relative;left:auto;top:auto;width:760px;height:520px}
.hero--vol .libbody{grid-template-columns:190px 1fr}
.hero--vol .phone{position:relative;left:auto;top:auto;animation:zweef 7s 1.4s ease-in-out infinite}
.hero--vol .side.file{position:relative;left:auto;top:auto;width:230px;animation:zweef 8s 2.2s ease-in-out infinite reverse}
.hero--vol .ghost{left:430px;top:250px;animation:sleep 11s 2.4s var(--ease) infinite}
.hero--vol .mappen li.drop{animation:landt 11s 2.4s ease infinite}
.hero--vol .grid .t .ok{animation:pop .5s var(--ease) both;animation-delay:calc(1s + var(--i,0) * .18s)}
.hero--vol .grid .t:nth-child(1) .ok{--i:0}.hero--vol .grid .t:nth-child(4) .ok{--i:1}.hero--vol .grid .t:nth-child(11) .ok{--i:2}.hero--vol .grid .t:nth-child(15) .ok{--i:3}
@keyframes rijs{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:none}}
@keyframes zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes sleep{0%,8%{transform:rotate(-6deg) translate(0,0);opacity:1}38%{transform:rotate(-2deg) translate(-296px,-14px);opacity:1}46%{transform:rotate(0deg) translate(-296px,-14px) scale(.6);opacity:0}47%,100%{transform:rotate(-6deg) translate(0,0);opacity:0}80%{opacity:0}92%{opacity:1;transform:rotate(-6deg) translate(0,0)}}
@keyframes landt{0%,30%{box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--white)}40%,50%{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--soft);background:var(--soft)}60%,100%{box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--white)}}
@media (prefers-reduced-motion:reduce){.hero--vol .laag,.hero--vol .phone,.hero--vol .side.file,.hero--vol .ghost,.hero--vol .mappen li.drop,.hero--vol .grid .t .ok{animation:none;translate:0 0}}
@media (max-width:1100px){.hero--vol .kop2{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
@media (max-width:900px){
  .hero--vol .kop2{grid-template-columns:1fr;align-items:start;gap:16px;padding-inline:24px;padding-left:24px}
  .hero--vol .tekstkolom{max-width:none}
  .hero--vol .tekstkolom .h-l{max-width:16ch;font-size:clamp(28px,5.2vw,44px)}
  .hero--vol .product{justify-content:center;align-items:flex-end;overflow:hidden;height:auto;flex:1;min-height:100px;width:100%;max-width:100%}
  .hero--vol .tableau{--tw:760;--th2:470;width:760px;transform-origin:center bottom;transform:scale(var(--tscale,.8)) translateY(28px)}
  .hero--vol .kop2{display:flex;flex-direction:column}
  .hero--vol .tekstkolom{flex:none}
}
@media (max-width:600px){
  .hero--vol{padding-top:88px}
  .hero--vol .tekstkolom{gap:10px}
  .hero--vol .tekstkolom .h-l{font-size:clamp(24px,7vw,30px)}
  .hero--vol .tekstkolom .sub{font-size:14px;line-height:1.4}
  .hero--vol .cta{flex-direction:row;flex-wrap:wrap;gap:8px}
  .hero--vol .cta .btn{width:auto;height:38px;font-size:14px;padding:0 14px}
  .hero--vol .fine{font-size:11px}
  .hero--vol .tableau{--tw:760}
  .hero--vol .l2,.hero--vol .l3{display:none}
}


/* ---------- inner-page heroes: typographic, the headline large on the left, the lead set low on the right ---------- */
.hero--tekst{padding-bottom:72px}
.hero--tekst .container,.hero--tekst-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px 64px;align-items:end;padding-top:24px}
.hero--tekst .links,.hero--tekst-in .links{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero--tekst .links .h-l,.hero--tekst-in .links .h-l{font-size:clamp(44px,5.6vw,80px);line-height:.98;letter-spacing:-.035em;max-width:13ch}
.hero--tekst .rechts,.hero--tekst-in .rechts{padding-bottom:10px}
.hero--tekst .rechts .lead,.hero--tekst-in .rechts .lead{font-size:clamp(17px,1.35vw,20px);max-width:44ch;text-align:left}
.wijzer{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 32px;margin-top:24px;padding-top:22px;border-top:1px solid var(--n80)}
.wijzer a{display:inline-flex;align-items:center;gap:10px;padding:8px 0;font-size:15px;font-weight:500;color:var(--n50)}
.wijzer a:hover{color:var(--ink)}
.wijzer .nr{font-size:12px}
.hero--tekst-in{padding-top:48px}
.featkop{scroll-margin-top:120px}
.tabel .dot,.tabel .dash{font-size:15px;line-height:1.5}
@media (max-width:900px){.hero--tekst .container,.hero--tekst-in{grid-template-columns:1fr;gap:20px}.hero--tekst .links .h-l,.hero--tekst-in .links .h-l{font-size:clamp(36px,8.5vw,52px)}.wijzer{gap:0 20px}}


/* ---------- life: the companion hues in use ---------- */
.chip--free,.pill--free{color:var(--soft-text-3)}.chip--free::before,.pill--free::before{background:var(--accent-3);box-shadow:none}
.chip--warm{color:var(--soft-text-2)}.chip--warm::before{background:var(--accent-2);box-shadow:none}
.stapkaart:nth-child(1){background:var(--soft)}.stapkaart:nth-child(2){background:var(--soft-3)}.stapkaart:nth-child(3){background:var(--soft-2)}.stapkaart:nth-child(4){background:var(--surface)}
.stapkaart:nth-child(2) .nr{color:var(--soft-text-3)}.stapkaart:nth-child(3) .nr{color:var(--soft-text-2)}
.plan:nth-child(1){background:var(--soft-3)}.plan:nth-child(1) ul li span:first-child{color:var(--soft-text-3)}
.plan.uit{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--accent)}
.plan:nth-child(4){background:var(--soft-2)}.plan:nth-child(4) ul li span:first-child{color:var(--soft-text-2)}
.rij:nth-of-type(4n+2) .well{background:var(--soft-3)}
.rij:nth-of-type(4n+3) .well{background:var(--soft)}
.rij:nth-of-type(4n+4) .well{background:var(--soft-2)}
.twee .rand:nth-child(1) h3::after{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--accent-3);margin-top:12px}
.twee .rand:nth-child(2) h3::after{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--accent);margin-top:12px}
.tegels>div:nth-child(2){background:var(--soft-3)}.tegels>div:nth-child(2) b{color:var(--soft-text-3)}
.tegels>div:nth-child(5).acc{background:var(--soft)}
.kaartjes>div:nth-child(2){background:var(--soft-3)}.kaartjes>div:nth-child(3){background:var(--soft-2)}
.nullen>div:nth-child(2){background:var(--soft-3)}.nullen>div:nth-child(2)>div:first-child{color:var(--soft-text-3)}
.feiten>div:nth-child(2){background:var(--soft-2)}
.steun>div:first-child{background:var(--soft-3)}
.roadmap{background:var(--soft-3)}
.aanbod{background:var(--soft-2)}
.lovedby{background:var(--soft)}
.callout{background:var(--soft-3)}.callout .label{color:var(--soft-text-3)}
.rooster>div:nth-child(4n+1){background:var(--soft)}.rooster>div:nth-child(4n+2){background:var(--soft-3)}.rooster>div:nth-child(4n+3){background:var(--soft-2)}
.band{background:var(--band)}
.scr2 .kaart .tag{background:var(--accent-2)}
.scr2 .kaart .bar{background:var(--accent)}
.ghost i{background:var(--accent-2)}
.grid .t .ok{background:var(--soft-3);color:var(--soft-text-3)}
.kn span.d{background:var(--accent);border-color:var(--accent)}
.side .k.a{background:var(--accent-2);border-color:var(--accent-2)}
/* the illustrations */
.illo{width:100%;height:auto;display:block}
.illo .laag{animation:ilrise .8s var(--ease) both;animation-delay:calc(.15s + var(--i,0) * .1s);transform-box:fill-box;transform-origin:center}
@keyframes ilrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.illo .laag{animation:none}}
.hero--illo{padding-bottom:56px}
.hero--illo .container{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px 56px;align-items:center;padding-top:16px}
.hero--illo .links{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero--illo .links .h-l{font-size:clamp(40px,4.6vw,64px);line-height:1;letter-spacing:-.035em;max-width:14ch}
.hero--illo .links .lead{font-size:clamp(16px,1.3vw,19px);max-width:46ch;text-align:left}
.hero--illo .beeld{min-width:0}
.hero--illo .wijzer{grid-column:1/-1}
.hero--illo-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px 56px;align-items:center;padding-top:40px}
.hero--illo-in .links{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero--illo-in .links .h-l{font-size:clamp(34px,3.6vw,50px);line-height:1.04;letter-spacing:-.03em;max-width:18ch}
.hero--illo-in .links .lead{font-size:clamp(16px,1.25vw,18px);max-width:46ch;text-align:left}
.hero--illo-in .kort{padding:22px 24px;gap:10px}
@media (max-width:900px){.hero--illo-in{grid-template-columns:1fr;gap:24px}}
@media (max-width:900px){.hero--illo .container{grid-template-columns:1fr;gap:24px}.hero--illo .links .h-l{font-size:clamp(34px,8vw,48px)}}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------- responsive: big laptop 1440+, laptop 1280, iPad landscape 1024–1194, iPad portrait 768–834, phone ≤ 600 ---------- */
@media (max-width:1280px){
  .container{padding-inline:32px}
  .navwrap{padding:20px 20px 0}
  .nav{padding:0 28px}
  .nav .links{gap:20px;margin-left:36px;font-size:15px}
  .rij,.rij.rechtsom{gap:48px}
}
@media (max-width:1194px){
  .nav .links{display:none}
  .burger{display:grid}
  .nav .lang{display:none}
  .fvoet .kolommen{grid-template-columns:1fr 1fr}
  .plannen{grid-template-columns:1fr 1fr}
  .stappen,.vier,.rooster,.kpi{grid-template-columns:1fr 1fr}
  .tegels{grid-template-columns:repeat(3,1fr)}
  .donker{grid-template-columns:1fr;padding:44px}
  .roadmap{grid-template-columns:1fr;padding:36px}
}
@media (max-width:1024px){
  .docs{grid-template-columns:220px minmax(0,1fr);gap:40px}
  .release{grid-template-columns:200px minmax(0,1fr);gap:32px}
  .artikel{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px}
  .app .twee{grid-template-columns:1fr}
  .aanbod{grid-template-columns:1fr;padding:32px}
  .lovedby{grid-template-columns:1fr}
}
@media (max-width:900px){
  .container{padding-inline:24px}
  .blok{padding-block:88px 0}
  .h-l{font-size:clamp(34px,7vw,46px)}
  .h-m{font-size:clamp(30px,6vw,40px)}
  .hero{padding-top:112px}
  .rij,.rij.rechtsom{grid-template-columns:1fr;gap:28px;padding-block:56px}
  .rij.rechtsom .tekst{order:0}
  .tekst h2,.tekst h3{font-size:30px}
  .well{padding:16px;min-height:0}
  .paneel{max-width:none}
  .twee,.drie,.steun,.voorna,.nullen,.feiten{grid-template-columns:1fr}
  .kaartjes{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .donker .stroom{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr;gap:32px;padding-block:32px 88px}
  .docs aside{position:static}
  .docs aside .op{display:none}
  .docs aside>div:last-child{display:none}
  .release{grid-template-columns:1fr;gap:20px;padding-block:36px}
  .release .versie{position:static;flex-direction:row;align-items:baseline;gap:14px;flex-wrap:wrap}
  .release .items>div{grid-template-columns:1fr;gap:6px}
  .artikel{grid-template-columns:1fr;gap:20px;padding-block:40px}
  .artikel>h2{position:static}
  .onderste{grid-template-columns:1fr 1fr}
  .fvoet .woord{font-size:120px}
  .fvoet{margin-top:64px}
  .band .kop{padding:0 20px 0 24px}
  .phone{display:none}
  .side.file{display:none}
  .hits{grid-template-columns:repeat(2,1fr)}
  .tegels{grid-template-columns:repeat(2,1fr)}
  .regels li{grid-template-columns:1fr;gap:6px}
  .kopie{grid-template-columns:44px 1fr auto}
  .voordat>div{grid-template-columns:1fr}
  .wet>div{grid-template-columns:32px 1fr;gap:16px}
  .calc .uitkomst{grid-template-columns:1fr}
  .vak{padding:24px}
  .kpi{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .container{padding-inline:20px}
  .navwrap{padding:12px 12px 0}
  .nav{height:64px;padding:0 18px;gap:12px}
  .nav .btn--outline,.nav .acct,.logo small{display:none}
  .nav .btn{height:40px;padding:0 16px;font-size:14px}
  .hero{margin-top:-76px;padding-top:96px}
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .btn{width:100%}
  .launch{padding:8px 0;font-size:12px;gap:8px}
  .plannen,.stappen,.vier,.rooster,.kpi{grid-template-columns:1fr}
  .tegels{grid-template-columns:1fr 1fr}
  .onderste{grid-template-columns:1fr}
  .fvoet .kolommen{grid-template-columns:1fr}
  .fvoet .woord{font-size:80px}
  .faq button{font-size:17px;padding:18px 0}
  .tabel{grid-template-columns:1.6fr repeat(4,.6fr);font-size:13px}
  .tabel>div{padding:10px 6px}
  .grid{grid-template-columns:repeat(4,1fr)}
  .hits{grid-template-columns:1fr 1fr}
  .stat b{font-size:28px}
  .donker{padding:28px 24px}
  .aanbod{padding:24px}
  .aanbod h2{font-size:26px}
  .plan .prijs{font-size:38px}
  .docs article h2{font-size:22px}
  .release .versie>div:first-child{font-size:28px}
  .mega a,.mega button{font-size:16px}
}