/* Keuringskalender: stijl voor de website (index.html en keurders.html). De app en het rapport gebruiken alleen styles.css.
   Signatuur: de keuringssticker (geel, gestippelde ring), panelen met een kalenderraster, Bricolage Grotesque voor koppen. */
:root{
  --display:'Bricolage Grotesque','Mona Sans',"Helvetica Neue",Arial,sans-serif;
  --panel:#E4F0EA; --panel-2:#F3F7F5; --panel-line:#D5E2DB; --sticker:#FFD861; --sticker-ink:#1D201F; --r-btn:14px;
  --vink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
  --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
body{background:#fff;overflow-x:clip}
.wrap{max-width:1160px}
h1,h2,h3{font-family:var(--display);font-optical-sizing:auto}
.btn{border-radius:var(--r-btn)}
.btn.big{min-height:54px;padding:0 26px}
.site-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(12px)}
.site-top nav{display:flex;gap:2px;align-items:center}
.site-top nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:600;padding:8px 13px;border-radius:10px}
.site-top nav a:hover{background:var(--panel-2);color:var(--ink)}
@media (max-width:820px){.site-top nav a.hide-m{display:none}}
section.block{padding:64px 0}
section.block h2{font-size:clamp(28px,3.6vw,44px);font-weight:700;letter-spacing:-0.03em;line-height:1.05}
section.block .intro{font-size:16.5px;color:var(--ink-2);max-width:60ch;margin-top:12px;line-height:1.55}
section.block>.kicker,section.block>h2,section.block>.intro,.price-head>div>.kicker,.price-head>div>h2,.price-head>div>.intro{text-align:center;margin-left:auto;margin-right:auto}
section.block>h2,.price-head>div>h2{max-width:22ch;margin-top:14px!important}
section.block>.kicker,.price-head>div>.kicker,#hoe>.reveal:first-child>.kicker,.band>.wrap>.kicker,.final>.kicker{display:flex;width:max-content;max-width:100%}
/* De kicker is een klein stickertje: gestippelde ring, geel puntje. */
.kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 9px;border-radius:999px;background:var(--surface);border:1px dashed var(--accent);color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.25}
.kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sticker);flex-shrink:0}
/* Zachte panelen: afgerond, iets ingesprongen, zoals een tabblad in een ordner. */
#catalogus,#sectoren,#vertrouwen,#keurders,#voorwie,#aanmelden,.kp #hoe{background:var(--panel-2);border-radius:28px;padding:56px 40px;margin:6px 0}
@media (max-width:640px){#catalogus,#sectoren,#vertrouwen,#keurders,#voorwie,#aanmelden,.kp #hoe{padding:40px 18px;border-radius:20px}}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- sticker ---------- */
.stk{width:132px;height:132px;border-radius:50%;background:var(--sticker);color:var(--sticker-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;box-shadow:0 16px 36px rgba(29,32,31,.2);position:relative;flex-shrink:0}
.stk::before{content:"";position:absolute;inset:7px;border:2px dashed rgba(29,32,31,.35);border-radius:50%}
.stk span{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.stk b{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-0.03em;line-height:.95}
.stk small{font-size:9px;font-weight:600;color:rgba(29,32,31,.7);max-width:92px;line-height:1.2}
@keyframes zweef{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(-10deg) translateY(-8px)}}
.stk.zweef{animation:zweef 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.stk.zweef{animation:none}}

/* ---------- hero: paneel met kalenderraster, daaronder de app op desktop en telefoon ---------- */
.hero{padding:10px 0 0}
.hero .panel{position:relative;background:var(--panel);border-radius:32px;padding:64px 40px 290px;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.hero .panel::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(15,127,115,.18) 1px,transparent 1.6px);background-size:22px 22px;-webkit-mask-image:linear-gradient(#000 30%,transparent 90%);mask-image:linear-gradient(#000 30%,transparent 90%);pointer-events:none}
.hero-top{position:relative;text-align:center;max-width:1000px;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(38px,5.8vw,78px);font-weight:800;letter-spacing:-0.035em;line-height:1;margin-top:22px}
.hero h1 .rot{display:inline-grid;justify-items:start;color:var(--accent);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.hero h1 .rot-w{grid-area:1/1;white-space:nowrap}
.hero h1 .rot-w.in{animation:rot-in .5s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .rot-w.out{animation:rot-out .45s ease both}
@keyframes rot-in{from{opacity:0;transform:translateY(.55em)}to{opacity:1;transform:none}}
@keyframes rot-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-.55em)}}
.hero .lede{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--ink-2);max-width:60ch;margin-top:20px}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.hero .cta .btn svg{margin-left:2px}
.hero .proof{display:flex;gap:8px 22px;flex-wrap:wrap;justify-content:center;margin-top:22px;font-size:13.5px;color:var(--ink-2)}
.hero .proof span{display:flex;align-items:center;gap:7px}
.hero .proof svg{color:var(--ok)}
.ticker{position:relative;width:calc(100% + 80px);margin:36px -40px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:8px;width:max-content;animation:ticker 90s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;width:auto}}
.tk{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--panel-line);font-size:13px;font-weight:500;white-space:nowrap;color:var(--ink-2)}
.tk svg{color:var(--ok);flex-shrink:0}
.hero .shots{position:relative;z-index:1;margin:-240px auto 0;width:min(100%,1120px);padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 262px;align-items:end}
.hero .shots .stk{position:absolute;left:-30px;top:-64px;z-index:3;transform:rotate(-10deg)}
.window{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(29,32,31,.18);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#F4F6F5;border-bottom:1px solid var(--line)}
.win-bar .dots{display:flex;gap:6px}
.win-bar .dots i{width:10px;height:10px;border-radius:50%;background:#D8DDD9}
.win-bar .url{flex:1;text-align:center;font-size:12px;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 12px;max-width:360px;margin:0 auto}
.screen{height:540px;display:flex;flex-direction:column;text-align:left;background:var(--bg)}
.dv-top{display:flex;align-items:center;gap:14px;padding:8px 16px;background:#fff;border-bottom:1px solid var(--line);min-height:56px}
.dv-switch{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:600;font-size:13.5px;color:var(--ink)}
.dv-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.dv-body{display:grid;grid-template-columns:180px minmax(0,1fr);flex:1;min-height:0}
.dv-side{background:#fff;border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:3px}
.dv-side .nav-item{font-size:13.5px;min-height:40px}
.dv-main{padding:20px 22px 40px;display:flex;flex-direction:column;gap:12px;min-width:0}
.dv-main h3{font-size:24px;letter-spacing:-0.03em;margin-top:2px}
.dv-main #demo{display:flex;flex-direction:column;gap:12px}
.dv-main .score-card{padding:14px 18px;gap:16px}
.dv-facts{display:none}
.dv-facts div{display:flex;flex-direction:column;gap:3px}
.dv-facts .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.dv-facts b{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-0.02em}
.dv-grp{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 2px 0}
.dv-main .caption{background:var(--ink);color:#fff;font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px;white-space:nowrap}
.dv-main .row{transition:background .5s;gap:12px;min-height:56px}
.dv-main .row .tag{flex-shrink:0}
.dv-main .row.flash{background:var(--ok-soft)}
.dv-main .ring circle:last-child{transition:stroke-dasharray .9s ease,stroke .5s}
.dv-main .num b{transition:color .4s}
.phone{position:relative;z-index:2;margin:0 0 -26px -20px;width:262px;background:#151A18;border-radius:36px;padding:10px;box-shadow:0 30px 70px rgba(29,32,31,.28)}
.phone::before{content:"";position:absolute;left:50%;top:18px;width:72px;height:20px;border-radius:999px;background:#151A18;transform:translateX(-50%);z-index:3}
.ph-screen{background:var(--bg);border-radius:28px;overflow:hidden;height:460px;display:flex;flex-direction:column;gap:10px;padding:46px 12px 12px;text-align:left}
.ph-top{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px;padding:0 2px}
.ph-top .iconbtn{width:36px;height:36px}
.ph-screen .score-card{padding:12px;gap:12px}
.ph-screen .score-card .num b{font-size:24px}
.ph-screen .row{min-height:50px;padding:7px 10px;gap:10px}
.ph-screen .row .ic{width:30px;height:30px}
.ph-screen .row .ttl{font-size:12.5px}
.ph-screen .row .sb{font-size:11px}
@media (max-width:1000px){.dv-facts{display:none}.hero .shots{grid-template-columns:1fr}.phone{display:none}}
@media (max-width:760px){
  .hero .panel{padding:40px 20px 210px;border-radius:24px}
  .hero .shots{margin-top:-180px;padding:0 6px}
  .hero .shots .stk{display:none}
  .screen{height:440px}
  .dv-body{grid-template-columns:1fr}
  .dv-side,.dv-switch{display:none}
  .dv-main{padding:14px 12px 24px}
  .dv-main .caption,.dv-main .row .tag{display:none}
  .ticker{width:calc(100% + 40px);margin:28px -20px 0}
}
@media (max-width:520px){.dv-top .wordmark b{display:none}.dv-main .score-card{flex-direction:column;align-items:flex-start}}

/* ---------- herken je dit ---------- */
.pain{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:28px}
.pain div{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px}
.pain div b{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-0.01em;line-height:1.2}
.pain div span{color:var(--ink-2);font-size:13.5px;line-height:1.45}
.pain .q{font-family:var(--display);font-size:34px;line-height:.8;color:var(--accent);font-weight:800}

/* ---------- feitenband: donker paneel, cijfers in stickergeel ---------- */
.band{background:var(--accent-deep);color:#fff;padding:60px 0;border-radius:32px;margin:6px 12px}
@media (max-width:640px){.band{border-radius:20px;margin:6px 6px;padding:44px 0}}
.band>.wrap>h2{color:#fff;text-align:center;max-width:22ch;margin:14px auto 0;font-size:clamp(28px,3.6vw,44px)!important;font-weight:700!important;letter-spacing:-0.03em!important}
.band .kicker{background:transparent;border-color:rgba(255,255,255,.45);color:#fff!important}
.band .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:36px}
.band .fact{border-top:2px solid rgba(255,255,255,.18);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.band .fact b{font-family:var(--display);font-size:46px;font-weight:800;letter-spacing:-0.04em;line-height:1;color:var(--sticker)}
.band .fact p{color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.5}
.band .fact small{font-size:11.5px;color:rgba(255,255,255,.5)}

/* ---------- hoe het werkt: zes compacte kaarten met een stukje app dat onderaan wegloopt ---------- */
#hoe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#hoe>.reveal:first-child{grid-column:1/-1;margin-bottom:8px;display:flex;flex-direction:column;align-items:center;text-align:center}
#hoe>.reveal:first-child h2{max-width:22ch;margin-top:14px}
#hoe>.reveal:first-child .intro{max-width:60ch}
.tour{display:flex;flex-direction:column;gap:12px;padding:22px 22px 0;background:var(--panel-2);border:1px solid var(--panel-line);border-radius:20px;overflow:hidden}
.tour .t-text{display:flex;flex-direction:column;align-items:flex-start}
.tour .t-text .kicker{padding:4px 9px 4px 7px;font-size:10.5px}
.tour h3{font-size:19px;font-weight:700;letter-spacing:-0.02em;line-height:1.15;margin-top:10px!important}
.tour p{color:var(--ink-2);font-size:13.5px;line-height:1.5;margin-top:8px}
.tour ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
.tour li{background:#fff;border:1px solid var(--panel-line);border-radius:999px;padding:4px 9px;font-size:11.5px;line-height:1.3;color:var(--ink-2)}
.t-mock{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.tour .t-mock{margin-top:auto;border-bottom:0;border-radius:14px 14px 0 0;max-height:210px;overflow:hidden;position:relative;box-shadow:0 -8px 24px rgba(29,32,31,.05)}
.tour .t-mock::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(rgba(243,247,245,0),var(--panel-2));pointer-events:none}
.tour .t-mock .btn{pointer-events:none}
.tour .t-mock>*{flex-shrink:0}
.tour .tri button{width:36px;height:36px;font-size:12px}
.tour .qrow{min-height:54px;padding:8px 10px}
.tour .qrow .ttl{font-size:13.5px}
.tour .row{min-height:52px;padding:8px 10px}
@media (max-width:1000px){#hoe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){#hoe{grid-template-columns:1fr}}
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.timeline div{background:var(--surface-2);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:2px}
.timeline b{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-0.02em}
.timeline small{font-size:10.5px;color:var(--ink-2);line-height:1.25}
.timeline div.hot{background:var(--bad-soft)} .timeline div.hot b{color:var(--bad)}
.timeline div.warm{background:var(--warn-soft)} .timeline div.warm b{color:var(--warn)}
.scanline{position:relative;overflow:hidden}
.scanline::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);opacity:.7;animation:scan 2.6s linear infinite}
@keyframes scan{from{top:0}to{top:100%}}
@media (prefers-reduced-motion:reduce){.scanline::after{animation:none;display:none}}
.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mini div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:2px}
.mini b{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-0.02em}
.mini small{font-size:11px;color:var(--ink-2)}

/* ---------- catalogus ---------- */
.cat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:26px;justify-content:center}
.cat-tabs button{min-height:38px;padding:0 14px;border:1px solid var(--panel-line);border-radius:10px;background:#fff;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.cat-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat-tabs button .n{font-size:12px;opacity:.7}
.cat-list{margin-top:14px;background:#fff;border:1px solid var(--panel-line);border-radius:16px;overflow:hidden}
.cat-item{border-bottom:1px solid var(--surface-2)}
.cat-item:last-child{border-bottom:0}
.cat-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 16px;min-height:50px}
.cat-item summary::-webkit-details-marker{display:none}
.cat-item summary b{font-size:14.5px;font-weight:600}
.cat-item summary .f{font-size:12.5px;color:var(--ink-2)}
.cat-item .body{padding:0 16px 14px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.cat-item .body b{color:var(--ink)}
@media (max-width:640px){.cat-item summary{grid-template-columns:minmax(0,1fr) auto}.cat-item summary .f{display:none}}

/* ---------- gratis check ---------- */
.check-box{background:#fff;border:1px solid var(--panel-line);border-radius:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);margin-top:28px;overflow:hidden}
.check-box .left{padding:22px;display:flex;flex-direction:column;gap:16px;border-right:1px solid var(--panel-line)}
.check-box .right{padding:22px;background:var(--panel-2);display:flex;flex-direction:column;gap:12px;position:sticky;top:76px;align-self:start}
@media (max-width:860px){.check-box{grid-template-columns:1fr}.check-box .left{border-right:0;border-bottom:1px solid var(--panel-line)}.check-box .right{position:static}}
.qlist{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.bigcount{font-family:var(--display);font-size:56px;font-weight:800;letter-spacing:-0.04em;line-height:1}
.bigcount small{display:block;font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:0;margin-top:6px}
.percat{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.percat div{display:flex;justify-content:space-between;border-bottom:1px solid var(--panel-line);padding:5px 0}
.reslist{display:flex;flex-direction:column;gap:5px;max-height:260px;overflow:auto;font-size:13px}
.reslist div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--surface-2)}

/* ---------- vergelijking ---------- */
.compare{margin-top:28px;background:#fff;border:1px solid var(--panel-line);border-radius:16px;overflow:hidden}
.compare table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.compare th{font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:11px 16px;border-bottom:1px solid var(--line-2);background:var(--panel-2)}
.compare th.us{color:var(--accent)}
.compare td{padding:11px 16px;border-bottom:1px solid var(--surface-2);vertical-align:top;color:var(--ink-2)}
.compare td:first-child{color:var(--ink);font-weight:600}
.compare td.us{background:#EEF6F3;color:var(--ink)}
.compare tr:last-child td{border-bottom:0}
.comparewrap{overflow-x:auto}

/* ---------- sectoren ---------- */
.sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:28px}
.sectors button{background:#fff;border:1px solid var(--panel-line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;text-align:left;width:100%}
.sectors button:hover{border-color:var(--accent)}
.sectors b{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-0.01em}
.sectors span{font-size:12.5px;color:var(--ink-2)}
.sectors .n{font-size:12px;font-weight:600;color:var(--accent)}

/* ---------- vertrouwen ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:28px}
.trust div{background:#fff;border:1px solid var(--panel-line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:6px}
.trust .ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.trust b{font-family:var(--display);font-size:15.5px;font-weight:700}
.trust span{font-size:13.5px;color:var(--ink-2);line-height:1.5}

/* ---------- prijzen ---------- */
.price-head{display:flex;flex-direction:column;align-items:center;gap:22px}
.billing{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--panel-line);border-radius:12px;background:#fff;flex-shrink:0}
.billing button{min-height:38px;padding:0 16px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s}
.billing button.on{background:var(--ink);color:#fff}
.billing .save{font-weight:700;font-size:10.5px;padding:3px 7px;border-radius:999px;background:var(--ok-soft);color:var(--ok)}
.billing button.on .save{background:rgba(255,255,255,.14);color:#8FD9AE}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:32px;align-items:stretch}
@media (max-width:1000px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiers{grid-template-columns:1fr}}
.tier{position:relative;background:var(--panel-2);border:1px solid var(--panel-line);border-radius:20px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:14px}
.tier .name{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-0.015em;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tier .tagline{font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding:4px 8px;border-radius:999px;background:var(--accent-soft);white-space:nowrap}
.tier .for{color:var(--ink-2);font-size:13.5px;line-height:1.45;min-height:3em}
.tier .price{display:flex;flex-direction:column;gap:5px;padding:2px 0}
.tier .amount{display:flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:800;letter-spacing:-0.04em;line-height:1;flex-wrap:wrap}
.tier .amount b{font-size:40px}
.tier .amount span{font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:0}
.tier .per{font-size:12.5px;color:var(--ink-3);line-height:1.4;min-height:2.8em}
.tier ul{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--panel-line);display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.4}
.tier li{display:flex;gap:9px;align-items:flex-start}
.tier li::before{content:"";flex-shrink:0;width:15px;height:15px;margin-top:3px;background:var(--ok);-webkit-mask:var(--vink) center/contain no-repeat;mask:var(--vink) center/contain no-repeat}
.tier li.inh{color:var(--ink-3);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.tier li.inh::before{background:var(--ink-3);-webkit-mask-image:var(--plus);mask-image:var(--plus)}
.tier .btn{margin-top:auto}
.tier.featured{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep);box-shadow:0 24px 50px rgba(10,63,58,.22)}
@media (min-width:1001px){.tier.featured{transform:translateY(-8px)}}
.tier.featured .for,.tier.featured .per,.tier.featured .amount span{color:rgba(255,255,255,.72)}
.tier.featured ul{border-top-color:rgba(255,255,255,.14)}
.tier.featured li::before{background:#8FD9AE}
.tier.featured li.inh{color:rgba(255,255,255,.6)} .tier.featured li.inh::before{background:rgba(255,255,255,.6)}
.tier.featured .btn.primary{background:var(--sticker);color:var(--sticker-ink)} .tier.featured .btn.primary:hover{background:#F5CB4A}
.tier .ribbon{position:absolute;top:-13px;left:20px;background:var(--sticker);color:var(--sticker-ink);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;box-shadow:0 6px 14px rgba(29,32,31,.14)}
.assure{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:20px;font-size:13px;color:var(--ink-2);justify-content:center}
.assure span{display:inline-flex;align-items:center;gap:7px}
.assure svg{color:var(--ok);flex-shrink:0}
.ledger{margin-top:36px;background:var(--accent-deep);color:#fff;border-radius:24px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);overflow:hidden;position:relative}
@media (max-width:860px){.ledger{grid-template-columns:1fr}}
.ledger .l{padding:36px 32px;display:flex;flex-direction:column;gap:10px;border-right:1px solid rgba(255,255,255,.12)}
@media (max-width:860px){.ledger .l{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}}
.ledger .l b{font-family:var(--display);font-size:clamp(48px,6vw,76px);font-weight:800;letter-spacing:-0.05em;line-height:1;color:var(--sticker)}
.ledger .l span{font-size:15px;color:rgba(255,255,255,.78);line-height:1.5;max-width:30ch}
.ledger .kicker{background:transparent;border-color:rgba(255,255,255,.45);color:#fff!important;width:max-content}
.ledger .r{padding:22px 32px 26px;display:flex;flex-direction:column}
.ledger .r .h{font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:8px 0 8px}
.ledger .item{display:grid;grid-template-columns:124px minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
@media (max-width:560px){.ledger .item{grid-template-columns:1fr;gap:4px}}
.ledger .item b{font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-0.03em;color:#8FD9AE;white-space:nowrap}
.ledger .item span{font-size:14px;line-height:1.45;color:rgba(255,255,255,.85)}
.ledger .payoff{margin-top:auto;padding-top:16px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-0.01em;line-height:1.3}
.discounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:12px}
.discounts div{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.discounts b{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-0.03em;color:var(--accent);line-height:1.1}
.discounts span{font-size:13px;color:var(--ink-2);line-height:1.4}
.discounts div.start{border-color:transparent;background:var(--sticker)} .discounts div.start b,.discounts div.start span{color:var(--sticker-ink)}
.matrix{margin-top:12px;border:1px solid var(--panel-line);border-radius:16px;background:#fff;overflow:hidden}
.matrix summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;font-weight:600;font-size:15px}
.matrix summary::-webkit-details-marker{display:none}
.matrix summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:20px}
.matrix[open] summary::after{content:"–"}
.matrix .tw{overflow-x:auto;border-top:1px solid var(--panel-line)}
.matrix table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:700px}
.matrix th{font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:11px 14px;background:var(--panel-2);border-bottom:1px solid var(--line-2);width:15%}
.matrix th:first-child{text-align:left;width:auto}
.matrix th.us{color:var(--accent)}
.matrix td{padding:9px 14px;border-bottom:1px solid var(--surface-2);text-align:center;color:var(--ink-2);vertical-align:middle}
.matrix td:first-child{text-align:left;color:var(--ink);font-weight:500}
.matrix td.us{background:#EEF6F3;color:var(--ink);font-weight:600}
.matrix td.sec{background:#FAFBF8;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:8px 14px;font-weight:700}
.matrix svg{display:inline-block;vertical-align:middle;color:var(--ok)}
.matrix .no{color:var(--line-2);font-family:var(--mono)}

/* ---------- keurders-teaser, faq, slot, voet ---------- */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;align-items:center;margin-top:4px}
.two .kicker{width:max-content;max-width:100%}
.two h2{margin-top:14px}
section.block.faq{margin-left:auto;margin-right:auto}
.faq details{border-bottom:1px solid var(--panel-line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:8px;color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:70ch}
.final{position:relative;background:var(--accent);color:#fff;border-radius:28px;padding:56px 40px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;margin:12px 0 36px}
.final .kicker{background:transparent;border-color:rgba(255,255,255,.5);color:#fff!important}
.final h2{color:#fff;font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-0.035em;line-height:1}
.final p{color:rgba(255,255,255,.85);font-size:16.5px;max-width:50ch}
.final .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.final .stk{position:absolute;right:26px;top:-34px;transform:rotate(8deg);width:112px;height:112px}
.final .stk b{font-size:24px}
@media (max-width:760px){.final{padding:44px 20px}.final .stk{right:10px;top:-30px;width:88px;height:88px}.final .stk b{font-size:19px}.final .stk small{display:none}}
footer.site{border-top:1px solid var(--panel-line);padding:28px 0 44px;font-size:13px;color:var(--ink-3);display:flex;flex-direction:column;gap:8px}
footer.site a{color:var(--ink-2)}
.stickycta{display:none}
@media (max-width:760px){.stickycta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;gap:8px;transform:translateY(120%);transition:transform .3s}.stickycta.show{transform:none}.stickycta .btn{flex:1}}

/* ---------- keurderspagina ---------- */
.kp-hero{position:relative;background:var(--panel);border-radius:32px;padding:56px 48px;margin-top:10px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;overflow:hidden}
.kp-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(15,127,115,.18) 1px,transparent 1.6px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000);mask-image:linear-gradient(90deg,transparent 40%,#000);pointer-events:none}
.kp-hero>*{position:relative}
.kp-hero .kicker{width:max-content;max-width:100%}
.kp-hero h1{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-0.035em;line-height:1;margin-top:16px}
.kp-hero h1 em{font-style:normal;color:var(--accent)}
.kp-hero .lede{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:50ch;margin-top:18px}
.kp-hero .assure{justify-content:flex-start;margin-top:20px}
@media (max-width:900px){.kp-hero{grid-template-columns:1fr;gap:28px;padding:36px 22px;border-radius:24px}}
.kp-mock{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(29,32,31,.14);padding:18px;display:flex;flex-direction:column;gap:12px;width:100%;max-width:460px;justify-self:end}
@media (max-width:900px){.kp-mock{justify-self:stretch;max-width:none}}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px}
@media (max-width:860px){.steps3{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--panel-line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px}
.step .n{font-family:var(--display);font-size:36px;font-weight:800;letter-spacing:-0.05em;color:var(--accent);line-height:1}
.step h3{font-size:18px;font-weight:700;letter-spacing:-0.02em}
.step p{color:var(--ink-2);font-size:13.5px;line-height:1.5}
.step .m{margin-top:auto;border:1px solid var(--surface-2);border-radius:12px;overflow:hidden;background:#fff}
.kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:28px}
.kinds div{background:#fff;border:1px solid var(--panel-line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.kinds b{font-family:var(--display);font-size:15.5px;font-weight:700;letter-spacing:-0.01em}
.kinds span{font-size:13px;color:var(--ink-2);line-height:1.45}
.kp-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
@media (max-width:760px){.kp-tiers{grid-template-columns:1fr}}
.founder{margin-top:12px;background:var(--sticker);border-radius:18px;padding:18px 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:var(--sticker-ink)}
.founder b{font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-0.01em}
.founder span{color:rgba(29,32,31,.8);font-size:14px;line-height:1.45;flex:1 1 320px}
.founder .btn.secondary{background:var(--sticker-ink);color:#fff;border-color:var(--sticker-ink)}
.signup{background:#fff;border:1px solid var(--panel-line);border-radius:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);margin-top:28px;overflow:hidden}
@media (max-width:860px){.signup{grid-template-columns:1fr}}
.signup .info{padding:26px;background:var(--accent-deep);color:#fff;display:flex;flex-direction:column;gap:12px}
.signup .info h3{color:#fff;font-size:24px;font-weight:800;letter-spacing:-0.03em}
.signup .info p{color:rgba(255,255,255,.8);font-size:14.5px;line-height:1.5}
.signup .info ul{margin:0;padding-left:1.1em;color:rgba(255,255,255,.85);font-size:14px;line-height:1.6}
.signup form{padding:26px;display:flex;flex-direction:column;gap:14px}
.signup .done{padding:40px 28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.signup .done .ic{width:52px;height:52px;border-radius:16px;background:var(--ok-soft);color:var(--ok);display:flex;align-items:center;justify-content:center}
.signup .done h3{font-size:22px;font-weight:800;letter-spacing:-0.02em}
.signup .done p{color:var(--ink-2);font-size:14.5px;line-height:1.5;max-width:46ch}