:root{
  --bg:#FFFDFB; --ink:#232019; --muted:#6E6862; --line:#EAE3DA; --cream:#F8F3EC;
  --accent:#C4552D; --accent-soft:#FBEDE6; --accent-line:#F3DCD0;
  --green:#0F6B4F; --green-soft:#E7F3EE;
  --sh-sm:0 1px 2px rgba(35,32,25,.05);
  --sh:0 4px 20px rgba(35,32,25,.06);
  --sh-lg:0 18px 50px rgba(35,32,25,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
@media(max-width:700px){section{padding:64px 0}}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:200;text-decoration:none;font-weight:600}
.skip:focus{left:0}

/* ── ticker ── */
.ticker{background:var(--ink);color:#F8F3EC;font-size:12.5px;font-weight:600;letter-spacing:.4px;padding:10px 0;overflow:hidden;white-space:nowrap}
.ticker div{display:inline-block;animation:slide 32s linear infinite}
.ticker span{padding:0 26px;opacity:.9}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── nav ── */
header{position:sticky;top:0;z-index:50;background:rgba(255,253,251,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:.2s}
header.stuck{border-color:var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.logo{font-size:24px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none}
.logo .mark{display:block;flex:none}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}
@media(max-width:900px){.nav-links a:not(.btn){display:none}}
.btn{padding:12px 22px;border-radius:99px;font-weight:600;text-decoration:none;font-size:15px;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:.16s;white-space:nowrap}
.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--sh-sm)}
.btn-dark:hover{background:#3a352c;transform:translateY(-1px);box-shadow:var(--sh)}
.btn-line{border-color:var(--line);color:var(--ink);background:#fff}
.btn-line:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-lg{padding:15px 28px;font-size:16px}

/* ── breadcrumbs ── */
.crumbs{padding:22px 0 0;font-size:14px;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs li:not(:last-child):after{content:"›";padding-left:8px;color:#BFB6AB}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

/* ── hero + page head ── */
.hero{padding:70px 0 0;text-align:center}
.pagehead{padding:52px 0 8px;max-width:760px}
.pagehead h1{margin-bottom:18px}
.pagehead .lead{margin-bottom:0}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--green-soft);color:var(--green);border-radius:99px;padding:7px 16px;font-size:13.5px;font-weight:600;margin-bottom:26px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blip 2s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}
h1{font-size:clamp(38px,6.2vw,68px);line-height:1.05;letter-spacing:-2.6px;font-weight:800;margin-bottom:22px}
.hero .sub{font-size:20px;color:var(--muted);max-width:620px;margin:0 auto 34px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.micro{font-size:14px;color:#9C948B;margin-bottom:54px}

/* ── call visual ── */
.stage{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:stretch;margin-bottom:26px}
@media(max-width:880px){.stage{grid-template-columns:1fr}}
.callcard{background:linear-gradient(155deg,#2b241d 0%,#4a3a2c 55%,#6d4f38 100%);border-radius:24px;padding:32px;color:#fff;position:relative;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--sh-lg)}
.callcard:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(196,85,45,.5),transparent 68%);top:-130px;right:-110px}
.ct{position:relative;z-index:2}
.ct .st{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);padding:6px 13px;border-radius:99px;font-size:12.5px;font-weight:600;margin-bottom:18px}
.ct .st i{width:6px;height:6px;border-radius:50%;background:#7DDC9A;animation:pulse 1.6s ease-in-out infinite}
.transcript{position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;min-height:186px}
.line{max-width:82%;padding:11px 15px;border-radius:14px;font-size:14.5px;line-height:1.45;opacity:0;transform:translateY(6px);animation:pop .45s cubic-bezier(.2,.8,.2,1) forwards}
.line.g{background:rgba(255,255,255,.13);border-bottom-left-radius:4px;align-self:flex-start}
.line.a{background:#fff;color:var(--ink);border-bottom-right-radius:4px;align-self:flex-end;font-weight:500}
@keyframes pop{to{opacity:1;transform:none}}
.typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.eq{display:flex;gap:3px;align-items:flex-end;height:20px;position:relative;z-index:2;margin-top:18px}
.eq i{width:3px;background:rgba(255,255,255,.75);border-radius:3px;animation:bar 1.05s ease-in-out infinite}
@keyframes bar{0%,100%{height:5px}50%{height:20px}}
.wave{width:100%;height:56px;display:block;margin-top:14px;opacity:.9}
.wacard{background:var(--cream);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--sh)}
.wahead{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:16px}
.wahead b{color:var(--green)}
.msg{background:#fff;border-radius:15px 15px 15px 5px;padding:14px 16px;box-shadow:var(--sh-sm);font-size:14.5px;margin-bottom:10px;line-height:1.5;opacity:0;transform:translateX(10px);animation:slidein .5s cubic-bezier(.2,.8,.2,1) forwards}
.msg.static{opacity:1;transform:none;animation:none}
@keyframes slidein{to{opacity:1;transform:none}}
.msg strong{color:var(--green);display:block;margin-bottom:3px}
.msg .t{color:#A8A096;font-size:11.5px;margin-top:8px}
@media (prefers-reduced-motion:reduce){
  .line,.msg{animation:none;opacity:1;transform:none}
  .ticker div,.eq i,.pill i,.ct .st i,.typing i{animation:none}
  html{scroll-behavior:auto}
}

.trust{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:14.5px;padding-bottom:16px}
.trust b{color:var(--ink);font-weight:700}

/* ── headings ── */
.center{text-align:center}
.eyebrow{color:var(--accent);font-weight:700;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:12px}
h2{font-size:clamp(28px,4vw,44px);letter-spacing:-1.7px;font-weight:800;margin-bottom:16px;line-height:1.12}
.lead{color:var(--muted);font-size:18.5px;max-width:640px;margin-bottom:46px}
.center .lead{margin-left:auto;margin-right:auto}

/* ── features ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:40px}}
.feats{display:grid;gap:4px}
.feat{padding:20px 22px;border-radius:16px;transition:.16s;border:1px solid transparent}
.feat:hover{background:#fff;border-color:var(--line);box-shadow:var(--sh-sm)}
.feat h3{font-size:18.5px;margin-bottom:5px;display:flex;align-items:center;gap:10px}
.feat h3 em{font-style:normal;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.feat p{color:var(--muted);font-size:16px;padding-left:36px}

/* ── steps ── */
.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.s3{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--sh-sm);position:relative}
.sn{width:36px;height:36px;border-radius:11px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:16px;font-size:15px}
.s3 h3{font-size:18.5px;margin-bottom:7px}
.s3 p{color:var(--muted);font-size:15.5px}
.s3 .tm{position:absolute;top:26px;right:26px;font-size:12.5px;color:var(--accent);font-weight:700;background:var(--accent-soft);padding:4px 11px;border-radius:99px}

/* ── rekenvoorbeeld ── */
.calc{background:#fff;border:1px solid var(--line);border-radius:24px;padding:38px;box-shadow:var(--sh);max-width:760px;margin:0 auto}
.calcrows{list-style:none;display:grid;gap:0}
.calcrows li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.calcrows li:last-child{border-bottom:0}
.calcrows .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.calcrows li.sum{border-top:2px solid var(--ink);border-bottom:0;margin-top:6px;padding-top:18px;font-size:19px}
.calcrows li.sum .v{color:var(--accent);font-size:26px;letter-spacing:-1px}
.assume{font-size:14px;color:#9C948B;margin-top:20px;line-height:1.6}

/* ── koppelingen ── */
.integ{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
.ig{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px 18px;display:flex;align-items:center;gap:13px;transition:.16s}
.ig:hover{border-color:#d9cec1;transform:translateY(-2px);box-shadow:var(--sh)}
.ig img{width:30px;height:30px;border-radius:7px;object-fit:contain;flex-shrink:0}
.ig .fb{width:30px;height:30px;border-radius:7px;background:var(--cream);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.ig b{display:block;font-size:15px;line-height:1.3}
.ig span{font-size:12.5px;color:var(--muted);display:block}
.ig.first{background:var(--accent-soft);border-color:var(--accent-line)}
.ig.first span{color:var(--accent);font-weight:600}

/* ── talen ── */
.langs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:880px;margin:0 auto;list-style:none}
.langs li{background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 15px;font-size:14px;color:var(--muted);font-weight:500}
.langs li.key{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600}

/* ── prijzen ── */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:18px;margin-bottom:26px;align-items:start}
.tier{background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px;display:flex;flex-direction:column;box-shadow:var(--sh-sm)}
.tier.hot{border:2px solid var(--accent);box-shadow:var(--sh-lg);position:relative;padding-top:38px}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:6px 15px;border-radius:99px;white-space:nowrap;letter-spacing:.3px}
.tier h3{font-size:14px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.9px}
.amt{font-size:46px;font-weight:800;letter-spacing:-2.4px;margin:8px 0 2px;line-height:1}
.amt small{font-size:16px;color:var(--muted);font-weight:500;letter-spacing:0}
.who2{color:var(--muted);font-size:15px;margin-bottom:20px}
.incl{list-style:none;margin:0 0 24px;flex:1}
.incl li{padding:9px 0;font-size:15.5px;display:flex;gap:11px;align-items:flex-start;line-height:1.45}
.check{color:var(--green);font-weight:800;flex-shrink:0}
.compare{color:var(--muted);font-size:15.5px;line-height:1.7}
.compare b{color:var(--ink)}

/* ── faq ── */
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0;box-shadow:var(--sh-sm)}
.faq summary{cursor:pointer;padding:20px 24px;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--accent);font-weight:800;font-size:22px;line-height:1;flex:none}
.faq details[open] summary:after{content:"−"}
.faq .a{padding:0 24px 22px;color:var(--muted);font-size:16px}
.faq .a p+p{margin-top:12px}

/* ── prose ── */
.prose{max-width:720px}
.prose h2{font-size:26px;letter-spacing:-.9px;margin:44px 0 12px}
.prose h3{font-size:19px;margin:28px 0 8px}
.prose p,.prose li{color:var(--muted);font-size:16.5px}
.prose p+p{margin-top:14px}
.prose ul{margin:14px 0 0 22px}
.prose li{padding:4px 0}
.prose strong{color:var(--ink)}

/* ── final cta ── */
.final{background:var(--ink);border-radius:28px;padding:64px 40px;text-align:center;color:#F8F3EC;margin-bottom:40px}
.final h2{color:#fff;margin-bottom:14px}
.final p{color:rgba(248,243,236,.72);font-size:18.5px;max-width:540px;margin:0 auto 30px}
.final .btn-line{background:transparent;border-color:rgba(248,243,236,.25);color:#F8F3EC}
.final .btn-line:hover{border-color:#F8F3EC}
.final .btn-dark{background:#fff;color:var(--ink)}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding:44px 0 56px;margin-top:80px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr;gap:28px}}
.fgrid h2{font-size:13px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:12px}
.fgrid ul{list-style:none;display:grid;gap:8px}
.fgrid a{color:var(--muted);text-decoration:none;font-size:15px}
.fgrid a:hover{color:var(--ink);text-decoration:underline}
.fabout{color:var(--muted);font-size:15px;max-width:320px}
.fbot{border-top:1px solid var(--line);margin-top:36px;padding-top:22px;color:#9C948B;font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ── 404 ── */
.nf{text-align:center;padding:110px 0 60px}
.nf .code{font-size:clamp(72px,14vw,150px);font-weight:800;letter-spacing:-6px;color:var(--accent-soft);line-height:1}
.nf h1{margin-top:-18px}
.nflinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;max-width:760px;margin:38px auto 0;text-align:left}
.nflinks a{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;text-decoration:none;color:var(--ink);box-shadow:var(--sh-sm);transition:.16s;display:block}
.nflinks a:hover{border-color:#d9cec1;transform:translateY(-2px);box-shadow:var(--sh)}
.nflinks b{display:block;font-size:16.5px;margin-bottom:4px}
.nflinks span{color:var(--muted);font-size:14.5px}

/* ── proefgesprek: taalkeuze ── */
.langpick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:840px;margin:0 auto}
@media(max-width:720px){.langpick{grid-template-columns:1fr}}
.langcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 24px 26px;
  box-shadow:var(--sh-sm);cursor:pointer;text-align:left;font:inherit;color:var(--ink);
  display:grid;gap:5px;transition:.16s}
.langcard:hover:not([disabled]){border-color:#d9cec1;transform:translateY(-2px);box-shadow:var(--sh)}
.langcard[disabled]{opacity:.4;cursor:default;box-shadow:none}
.langcard.is-on{border:2px solid var(--accent);box-shadow:var(--sh-lg);padding:27px 23px 25px}
.langcard.is-on[disabled]{opacity:1}
.lc-flag{width:44px;height:44px;border-radius:13px;background:var(--accent-soft);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
  letter-spacing:.5px;margin-bottom:10px}
.langcard.is-on .lc-flag{background:var(--accent);color:#fff}
.lc-name{font-size:20px;font-weight:700;letter-spacing:-.3px}
.lc-sub{color:var(--muted);font-size:15px}
.proefstatus{text-align:center;color:var(--muted);font-size:16px;max-width:560px;
  margin:26px auto 0;min-height:24px;padding-bottom:6px}
@media(prefers-reduced-motion:reduce){.langcard:hover:not([disabled]){transform:none}}

/* ── contactformulier (Netlify Forms) ── */
.form{display:grid;gap:16px;max-width:520px}
.form .row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.form .row{grid-template-columns:1fr}}
.form label{display:grid;gap:6px}
.form .lbl{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.form input,.form select,.form textarea{
  font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  width:100%;transition:border-color .15s ease,box-shadow .15s ease;
}
.form textarea{min-height:96px;resize:vertical;line-height:1.5}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.form .hint{font-size:13.5px;color:var(--muted);font-weight:400;margin-top:-2px}
.form button{align-self:start;margin-top:4px}
.form .req{color:var(--accent);font-weight:700}

/* ── btw-vermelding bij de pakketten ── */
.tier .vat{font-size:13px;color:var(--muted);margin:-10px 0 14px;letter-spacing:.01em}
.vatnote{margin-top:14px;color:var(--muted)}

/* ── plakkende knop op de telefoon ── */
.mcta{display:none}
@media(max-width:700px){
  .mcta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,253,251,.95);
    backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--line);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  }
  .mcta .btn{display:flex;width:100%;justify-content:center}
  body{padding-bottom:78px}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .mcta{backdrop-filter:none}
}

/* ── correcties ──────────────────────────────────────────────────────────
   .nav stond na .wrap in dit bestand en overschreef met `padding:16px 0`
   de zijmarge van .wrap. Daardoor plakte de hele koptekst tegen de rand van
   het scherm, op de telefoon zichtbaar als een knop die eraf loopt. Alleen
   de verticale marge zetten laat de zijmarge van .wrap intact. */
.nav{padding-top:16px;padding-bottom:16px;padding-left:24px;padding-right:24px}

/* Ruimere raakvlakken in de voettekst op een telefoon: die links stonden
   17 pixels hoog onder elkaar, te krap voor een duim. */
@media(max-width:760px){
  .fgrid ul{gap:2px}
  .fgrid ul a{display:inline-block;padding:9px 0}
}

/* Op hele smalle toestellen (iPhone SE, 320px) paste de knop in de koptekst
   net niet. Iets kleiner zetten in plaats van hem eraf laten lopen. */
@media(max-width:380px){
  .nav{padding-left:16px;padding-right:16px}
  .nav-links .btn{padding:10px 14px;font-size:14px}
  .logo{font-size:21px}
}

/* Kruimelpad iets ruimer aan te tikken op een telefoon. */
@media(max-width:700px){
  .crumbs a{display:inline-block;padding:6px 0}
}

/* ── schuifregelaars in de rekenhulpen ── */
.sliders{display:grid;gap:26px;margin-bottom:30px}
.sl label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:16.5px;margin-bottom:12px;font-weight:500}
.sl .out{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);
  font-size:19px;white-space:nowrap;letter-spacing:-.3px}
.sl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;display:block;
  background:transparent;height:28px;cursor:pointer;margin:0;
}
.sl input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;background:var(--accent-line)}
.sl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--accent);border:3px solid #fff;box-shadow:var(--sh-sm);margin-top:-10px}
.sl input[type=range]::-moz-range-track{
  height:6px;border-radius:99px;background:var(--accent-line)}
.sl input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--accent);
  border:3px solid #fff;box-shadow:var(--sh-sm)}
.sl input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:99px}
.sl .hint{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5}

/* ── pakketadvies op de prijzenpagina ── */
.advies{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.advies>div{border:1px solid var(--line);border-radius:14px;padding:15px 12px;
  text-align:center;transition:background .15s ease,border-color .15s ease}
.advies>div.on{border:2px solid var(--accent);background:var(--accent-soft);padding:14px 11px}
.advies b{display:block;font-size:16px;margin-bottom:2px}
.advies span{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pmatch{text-align:center;margin-top:18px;font-size:17px;font-weight:600}
@media(max-width:520px){
  .advies{grid-template-columns:1fr;gap:9px}
  .advies>div{display:flex;justify-content:space-between;align-items:baseline;text-align:left;gap:12px}
  .advies b{margin-bottom:0}
  .calc{padding:26px 20px}
  .sl label{flex-direction:column;gap:4px}
}

/* Iets meer hoogte om de schuifknop met een duim te pakken. */
@media(max-width:700px){
  .sl input[type=range]{height:36px}
  .sl input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-11px}
  .sl input[type=range]::-moz-range-thumb{width:22px;height:22px}
}

/* ── uitklapmenu op de telefoon ──────────────────────────────────────────
   Onder 900px werden alle navigatielinks verborgen en kwam er niets voor
   in de plaats: je kon alleen nog via de voettekst naar een andere pagina.
   Een <details> lost dat op en werkt ook zonder JavaScript. */
.mnav{display:none;position:relative}
@media(max-width:900px){
  .nav-links{display:none}
  .mnav{display:block}
}
.mnav>summary{
  list-style:none;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-right:-10px;border-radius:12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary::marker{content:""}
.mnav>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bars{position:relative}
.bars,.bars::before,.bars::after{
  display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .18s ease,background-color .18s ease}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-7px}
.bars::after{top:7px}
.mnav[open]>summary .bars{background:transparent}
.mnav[open]>summary .bars::before{transform:translateY(7px) rotate(45deg)}
.mnav[open]>summary .bars::after{transform:translateY(-7px) rotate(-45deg)}

.mnav-panel{
  position:absolute;right:-6px;top:calc(100% + 14px);
  min-width:258px;background:var(--bg);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--sh-lg);padding:10px;
  display:grid;gap:1px;z-index:70;
}
.mnav-panel a:not(.btn){
  display:block;padding:13px 14px;border-radius:12px;
  text-decoration:none;color:var(--ink);font-size:16.5px;font-weight:500;
}
.mnav-panel a:not(.btn):hover{background:var(--cream)}
.mnav-panel a[aria-current="page"]{color:var(--accent);font-weight:700}
.mnav-panel .btn{margin-top:9px;width:100%;justify-content:center}

/* De plakkende knop onderaan moet onder de balk blijven, niet erboven. */
.mcta{z-index:40}