/* Lettertypes staan op de eigen site (fonts/), zodat bezoekers niets naar Google of Fontshare sturen.
   Cal Sans: SIL Open Font License. Satoshi: ITF Free Font License, zelf hosten is toegestaan. Zie fonts/LICENTIES.md */
@font-face{font-family:"Cal Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cal-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cal Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cal-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/satoshi-400.woff2) format("woff2")}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/satoshi-500.woff2) format("woff2")}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/satoshi-700.woff2) format("woff2")}

:root{
  /* letters */
  --head:"Cal Sans","Satoshi",system-ui,sans-serif;         /* display: koppen en cijfers */
  --body:"Satoshi",system-ui,-apple-system,sans-serif;      /* alle tekst */
  --hd-sat:"Satoshi",system-ui,-apple-system,sans-serif;    /* alias, zelfde letter */

  /* merkkleuren */
  --deep:#0F231B;          /* donkergroen, vlakken */
  --deep-2:#16301F;        /* donkergroen, lichter */
  --brand:#0A7D43;         /* merkgroen, knoppen en accenten */
  --brand-h:#086B39;       /* merkgroen, hover */
  --amber:#EFAE4D;         /* oranje, iets doffer dan de aankondigingsbalk */
  --sage:#A5D3B6;          /* saliegroen vlak */
  --mint:#E4F6EB;          /* lichtgroene tint */
  --tint:#F3FBF6;          /* zeer lichte tint */

  /* neutraal */
  --ink:#0A0A0A; --text:#374151; --muted:#6B7280; --sub:#757575; --faint:#69727C;
  --line:#E5E7EB; --soft:#F5F5F5; --hair:#ECEEF2;

  /* functioneel */
  --ok:#0A7D43; --blue:#4285F4; --green:#22C55E; --red:#C8262B;

  /* vorm */
  --r-btn:10px; --r-card:18px; --r-pill:999px;
  --brand2:#16B364;

  --page-top:72px;   /* ruimte tussen menubalk en paginatitel op binnenpagina's */
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3,.h{font-family:var(--head);font-weight:400;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
h2{font-size:40px;text-align:center}
.sub{font-size:22px;line-height:1.45;color:var(--sub);text-align:center;max-width:720px;margin:20px auto 0}
section{padding:110px 0}
.drawer.open{display:block}

/* hero */
.hero{padding:150px 0 0;text-align:center}
.hero h1{font-size:70px;line-height:1.04;max-width:820px;margin:0 auto;text-wrap:balance}
.hero .lead{font-size:22px;line-height:1.45;color:var(--sub);max-width:560px;margin:22px auto 0;text-wrap:balance}
.hero .btn{margin-top:36px}
.hero-visual{position:relative;max-width:640px;margin:36px auto 0}
.serp{position:relative;z-index:2;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.05);text-align:left;padding:18px 18px 0;font-family:Roboto,Arial,var(--body)}
.serp .hand{position:absolute;top:-16px;left:calc(50% + 214px);width:86px;z-index:3}
.serp-row{display:flex;align-items:center;gap:14px}
.serp-bar{display:flex;align-items:center;gap:12px;height:48px;border:1px solid #DFE1E5;border-radius:999px;padding:0 16px;box-shadow:0 1px 6px rgba(32,33,36,.12);font-size:16px;color:#202124;max-width:420px;flex:1;min-width:0}
.serp-tools{display:flex;align-items:center;gap:12px;flex:none}
.ext-ico{width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid #E4E6EA;box-shadow:0 1px 2px rgba(0,0,0,.05);display:grid;place-items:center}
.serp-bar .sep{width:1px;height:24px;background:#DADCE0}
.serp-bar .q{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.serp-bar svg{flex:none}
.serp-body{padding:18px 8px 0;border-top:1px solid #EBEBEB;margin-top:16px}
.serp-site{display:flex;align-items:center;gap:12px}
.serp-fav{width:28px;height:28px;flex:none;border-radius:50%;background:#fff;border:1px solid #E3E5E8;display:grid;place-items:center}
.serp-site b{display:block;font-weight:400;font-size:14px;color:#202124}
.serp-site small{font-size:12px;color:#5F6368}
.serp-title{font-size:20px;color:#1A0DAB;margin-top:8px}
.serp-snip{font-size:14px;color:#4D5156;line-height:1.55;margin-top:6px;max-width:520px}
.serp-fade{height:70px;margin-top:-48px;background:linear-gradient(rgba(255,255,255,0),#fff 60%)}

/* story */
.story{padding:110px 0 72px}
.story p{font-family:var(--head);font-size:44px;line-height:1.5;letter-spacing:-.02em;word-spacing:.06em;color:var(--ink);text-align:center;max-width:820px;margin:0 auto 40px}
.story p:last-child{margin-bottom:0}
.story .ic{display:inline-grid;place-items:center;vertical-align:middle;width:60px;height:60px;margin:0 6px;position:relative;top:-5px}
.story .ic svg{width:54px;height:54px}

/* chart */
.gsc{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-family:Roboto,Arial,var(--body);margin-top:56px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.gsc-top{display:flex;border-bottom:1px solid var(--line);position:relative}
.gsc-cell{width:180px;padding:24px 20px 20px;border-right:1px solid var(--line);position:relative}
.gsc-cell small{display:flex;align-items:center;gap:7px;font-size:13px;color:#5F6368}
.gsc-cell strong{display:block;font-weight:400;font-size:32px;line-height:1;margin-top:12px;color:rgba(0,0,0,.54)}
.gsc-cell.on small,.gsc-cell.on strong{color:#fff}
.gsc-cell.c1{background:#2568DB}.gsc-cell.c2{background:var(--brand)}
.gsc-cell .cb{width:14px;height:14px;border:1.5px solid currentColor;border-radius:3px;display:grid;place-items:center}
.gsc-cell .cb svg{width:9px;height:9px}
.gsc-cell .qm{position:absolute;right:10px;bottom:10px;width:14px;height:14px;border:1.3px solid #5F6368;color:#5F6368;border-radius:50%;font-size:9px;display:grid;place-items:center}
.gsc-cell.on .qm{border-color:#fff;color:#fff}
.gsc-sel{margin-left:auto;align-self:center;margin-right:16px;white-space:nowrap;flex-shrink:0;border:1px solid #747775;border-radius:6px;padding:6px 10px 6px 14px;font-size:14px;color:#1F1F1F;display:flex;gap:6px;align-items:center}
.gsc-chart{position:relative;padding:22px 16px 16px}
.gsc-chart svg{width:100%;height:auto}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:72px}
.step{text-align:center}
.step-art{height:200px;display:grid;place-items:center;position:relative;margin-bottom:28px}
.step h3{font-size:30px}
.step p{font-size:18px;color:var(--sub);max-width:320px;margin:10px auto 0}
.mini{background:#fff;border:1px solid #EEF0F3;border-radius:14px;box-shadow:0 12px 30px rgba(16,20,35,.08)}
.mini-input{width:250px;padding:16px}
.mini-input .ph{height:10px;width:130px;border-radius:5px;background:#D9DBE0}
.mini-input .fld{display:flex;align-items:center;gap:8px;margin-top:16px;background:#F3F4F6;border-radius:8px;padding:9px 12px;font-size:13px;color:var(--ink)}
.mini-input .fld i{width:1.5px;height:14px;background:var(--ink);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.mini-input .go{margin:10px 0 0 auto;width:56px;height:20px;border-radius:999px;background:#2B2E38;position:relative}
.docs{position:relative;width:170px;height:170px}
.doc{position:absolute;left:18px;top:0;width:150px;height:140px;padding:16px;background:#fff}
.doc:nth-child(1){transform:rotate(-12deg) translate(-14px,8px);opacity:.5}
.doc:nth-child(2){transform:rotate(-6deg) translate(-7px,4px);opacity:.8}
.doc .ln{height:6px;border-radius:3px;background:#E1E3E8;margin-bottom:9px}
.doc .ln.s{width:60%}
.yesno{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.yesno span{width:36px;height:36px;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(16,20,35,.12);font-weight:700}
.yesno .no{color:#111}.yesno .yes{color:var(--brand)}
.mini-chart{width:280px;padding:16px}
.mini-chart .kpis{display:flex;gap:14px;margin-bottom:8px}
.mini-chart .kpis div{flex:1}
.mini-chart .kpis .ph{height:7px;border-radius:4px;background:#E1E3E8;width:70%}
.mini-chart .kpis b{display:block;color:var(--brand);font-size:10px;margin-top:5px;font-weight:600}

/* features */
.feat-head{max-width:820px;margin:0 auto 48px;text-align:center}
.feat-head h2{text-align:center;font-size:40px;margin-top:8px;text-wrap:balance}

/* publish */
.publish{overflow:hidden}
.publish .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.publish h2{text-align:left;font-size:44px}
.publish .lead{font-size:22px;color:var(--sub);line-height:1.5;margin-top:32px;max-width:560px}
.callout{display:flex;align-items:center;gap:20px;background:var(--soft);border-radius:18px;padding:16px 24px 16px 16px;margin-top:40px;max-width:520px}
.callout svg{width:76px;height:76px;flex:none}
.callout small{display:block;font-size:14px;color:#677079}
.callout b{display:block;font-weight:500;font-size:16px;color:var(--ink);margin-top:4px}
.shot{position:relative}
.dash{width:100%;max-width:none;transform:translateX(clamp(0px,3.2vw,46px));background:#F1F4F7;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 30px 80px rgba(16,20,35,.12);-webkit-mask-image:linear-gradient(#000 62%,transparent 100%);mask-image:linear-gradient(#000 62%,transparent 100%)}
.dsh-top{display:flex;align-items:center;gap:10px;padding:4px 4px 16px}
.dsh-ico{width:32px;height:32px;flex:none;border-radius:10px;background:#fff;display:grid;place-items:center}
.dsh-site{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.dsh-pill{flex:none;font-size:11.5px;font-weight:700;color:#08532D;background:#DCF1E4;border-radius:999px;padding:5px 11px}
.dsh-chips{margin-left:auto;display:flex;gap:8px}
.dsh-chip{display:inline-flex;align-items:center;gap:7px;height:33px;padding:0 13px;background:#fff;border-radius:10px;font-size:12.5px;font-weight:600;color:#3F4A54;white-space:nowrap}
.dsh-chev{flex:none;color:#7B848E}
.dsh-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dsh-kpi{background:#fff;border-radius:14px;padding:15px 16px 13px}
.dsh-kpi>span{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.dsh-val{display:flex;align-items:baseline;gap:8px;margin-top:7px}
.dsh-kpi b{font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.dsh-up,.dsh-dn{font-style:normal;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.dsh-up{color:var(--brand)}
.dsh-dn{color:#C8262B}
.dsh-spark{display:block;width:100%;height:34px;margin-top:11px}
.dsh-spark path{vector-effect:non-scaling-stroke}
.dsh-tbl{margin-top:12px;background:#fff;border-radius:16px;overflow:hidden}
.dsh-bar{display:flex;align-items:center;gap:10px;padding:14px 16px}
.dsh-search{flex:1;max-width:230px;display:flex;align-items:center;gap:8px;height:33px;padding:0 13px;background:#F6F8F9;border-radius:10px;font-size:12.5px;font-weight:500;color:#9AA1AB}
.dsh-btn{margin-left:auto;flex:none;display:inline-flex;align-items:center;height:35px;padding:0 17px;background:var(--brand);color:#fff;border-radius:10px;font-size:12.5px;font-weight:700;white-space:nowrap}
.dash table{width:100%;border-collapse:collapse;table-layout:auto}
.dash th{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#9AA1AB;text-align:left;padding:9px 16px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);white-space:nowrap}
.dash td{padding:0 16px;height:46px;font-size:13px;border-bottom:1px solid #F4F6F5;white-space:nowrap}
.dash tr:last-child td{border-bottom:0}
.dash .mid{text-align:center}
.dash .num{text-align:right;font-weight:600;color:#39424B;font-variant-numeric:tabular-nums}
.dash .pos{text-align:center;font-weight:600;color:#39424B;font-variant-numeric:tabular-nums}
.dsh-t{font-weight:600;color:var(--ink)}
.dsh-kw{color:var(--muted);font-size:12.5px}
.dsh-st{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 11px}
.st-live{background:#DCF1E4;color:#08532D}
.st-plan{background:#E7EEFB;color:#2A4CA8}
.st-wait{background:#FBEFD5;color:#8A5B00}
.dsh-sc{display:inline-grid;place-items:center;min-width:40px;height:25px;border-radius:8px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.sc-hi{background:#DCF1E4;color:#08532D}
.sc-md{background:#FBEFD5;color:#8A5B00}
.float{position:absolute;background:#fff;border:1.5px solid var(--brand);border-radius:16px;padding:16px 18px;box-shadow:0 12px 32px rgba(17,24,39,.10)}
.float.ok{right:auto;left:62%;top:52px;width:250px;border-color:var(--line)}
.float.ok small{font-size:12px;color:var(--sub)}
.float.ok b{display:block;font-weight:600;font-size:14px;color:var(--ink);margin-top:2px;line-height:1.3}
.float.ok .yn{display:flex;gap:8px;margin-top:12px}
.float.ok .yn span{flex:1;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:14px}
.float.ok .yn .n{background:var(--soft);color:var(--ink)}
.float.ok .yn .y{background:var(--brand);color:#fff}

/* compare */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare table{width:100%;max-width:980px;min-width:640px;margin:56px auto 0;border-collapse:separate;border-spacing:0;font-size:17px}
.compare th{font-weight:500;font-size:20px;color:var(--ink);padding:24px 12px;text-align:center;font-family:var(--body)}
.compare th:first-child,.compare td:first-child{text-align:left;width:38%;padding-left:12px}
.compare td{padding:20px 12px;border-top:1px solid var(--line);text-align:center;color:var(--ink)}
.compare td:first-child{color:var(--ink)}
.compare .hl{background:#F3FBF6;width:160px}
.compare th.hl{border:2px solid #86D6A8;border-bottom:0;border-radius:16px 16px 0 0}
.compare td.hl{border-left:2px solid #86D6A8;border-right:2px solid #86D6A8}
.compare tr:last-child td.hl{border-bottom:2px solid #86D6A8;border-radius:0 0 16px 16px}
.compare td .row-sub{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.yes,.no{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%}
.yes{background:var(--green)}.no{background:var(--red)}
.half{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#D1D5DB}
.sum{margin:160px auto 0;max-width:1040px}
.sum h3{font-size:40px;text-wrap:balance}
.sum p{font-size:19px;color:var(--text);line-height:1.55;margin-top:14px}
.sum p b{font-weight:600;color:var(--ink)}

.mk-row b{flex:none;font-weight:700}



/* team */
.team{text-align:center}
.founders{display:flex;justify-content:center;gap:24px;margin-top:48px}
.founder{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:18px;padding:16px 28px 16px 16px;text-align:left}
.founder .av{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #fff;box-shadow:0 0 0 1px #E5E7EB,0 6px 16px rgba(16,20,35,.10)}
.founder b{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.founder small{display:block;font-size:18px;color:var(--sub);margin-top:2px}
.team .txt{max-width:560px;margin:48px auto 0;text-align:left;font-size:19px;line-height:1.55;color:var(--sub)}
.team .txt p+p{margin-top:20px}
.team .txt strong{color:var(--ink);font-weight:500}
.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:64px auto 0;max-width:800px}
.promise div{border:1px solid #ECEEF2;border-radius:16px;padding:24px 16px}
.promise b{display:block;font-family:var(--head);font-weight:400;font-size:44px;letter-spacing:-.03em;color:var(--ink);line-height:1}
.promise span{display:block;font-size:16px;color:var(--sub);margin-top:10px}

/* faq */
.faq-list{max-width:760px;margin:56px auto 0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
details{border-top:1px solid var(--line)}
details:first-child{border-top:0}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 32px;font-size:18px;font-weight:500;line-height:1.4;color:var(--ink);cursor:pointer}
summary::-webkit-details-marker{display:none}
summary svg{flex:none;transition:transform .2s}
details[open] summary svg{transform:rotate(45deg)}
details div{padding:0 32px 26px;font-size:17px;color:var(--sub);line-height:1.6;max-width:680px}

/* final */
.final{padding:88px 0 0;text-align:center;position:relative;overflow:hidden}
.final h2{font-size:48px}
.final .sub{font-size:24px}
.final .hd-btn{margin-top:32px;position:relative;z-index:4;height:60px;padding:0 40px;font-size:19px;border-radius:10px}
.final .container{padding-bottom:56px}
.sky{position:relative;height:var(--sky-h,430px);margin-top:0}
.sky-back,.sky-front{position:absolute;top:0;bottom:0;left:50%;height:100%;transform:translateX(-50%);width:max(100%,calc(var(--sky-h,430px) * 1440 / 430));max-width:none}
/* de wolken houden hun verhouding: op smalle schermen vallen de zijkanten weg in plaats van dat ze platgedrukt worden */
.sky-front{z-index:2;pointer-events:none}
.sky-hold{position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:420px;z-index:1}
.sky-mascot{display:block;width:100%;height:auto}
.final .sky-cta{position:absolute;left:5.5%;top:0;width:89%;height:23.5%;display:flex;align-items:center;justify-content:center;
  font-family:var(--hd-sat);font-weight:700;font-size:22px;letter-spacing:-.005em;color:#fff;text-align:center;line-height:1.15;
  background:none;border:0;border-radius:12px;margin:0;padding:0 8px;z-index:2;transition:transform .15s;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.final .sky-cta:hover{transform:scale(1.03)}
.final .sky-cta:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* footer */
footer{background:var(--soft);padding:56px 0 28px;font-family:var(--hd-sat)}
.f-brand{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.f-logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.f-logo img{width:34px;height:auto;flex:none}
.f-trust{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 18px;transition:border-color .15s,box-shadow .15s}
.f-trust:hover{border-color:#C7D0D8;box-shadow:0 2px 8px rgba(16,20,35,.06)}
.f-trust svg{width:26px;height:26px;flex:none}
.f-trust b{display:block;font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.f-trust small{display:block;font-size:13px;color:var(--sub);margin-top:2px}

.f-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:44px}
.f-cols h4{font-family:var(--hd-sat);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:14px}
.f-cols a,.f-cols p{display:block;font-size:15px;color:#677079;margin-bottom:6px}
.f-cols a{padding:4px 0}
.f-cols a:hover{color:var(--ink)}
.fbot{display:flex;justify-content:space-between;gap:16px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:#677079}

@media (max-width:1024px){
  .hero h1{font-size:60px}
  .story p{font-size:38px}
  .publish .wrap{grid-template-columns:1fr}
  .shot{display:grid;gap:16px}
  .dash{width:100%;transform:none}
  .float{position:static;width:auto;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  .float.ok{order:2}
  .f-cols{grid-template-columns:1fr 1fr}
  .f-cols a{padding:9px 0;margin-bottom:0}
  .promise{grid-template-columns:1fr 1fr}
  .feat-head{grid-template-columns:1fr}
}
@media (max-width:820px){
  section{padding:80px 0}
  h2,.publish h2,.sum h3,.feat-head h2{font-size:32px}
  .sub{font-size:19px}
  .hero{padding-top:140px}
  .hero h1{font-size:44px}
  .hero .lead{font-size:19px}
  .serp .hand{width:58px;top:-12px;left:calc(50% + 104px)}
  .serp-bar{max-width:calc(100% - 70px)}
  .serp-bar .sep,.serp-bar svg:nth-of-type(3),.serp-bar svg:nth-of-type(4){display:none}
  .serp-tools{display:none}
  .story p{font-size:30px;margin-bottom:32px}
  .story .ic{width:40px;height:40px}.story .ic svg{width:32px;height:32px}
  .steps{grid-template-columns:1fr;gap:56px}
  .gsc-top{flex-wrap:wrap}
  .gsc-cell{width:50%}
  .gsc-sel{display:none}
  .compare th{font-size:15px;padding:16px 6px}
  .compare td{padding:16px 6px;font-size:15px}
  .compare .hl{width:auto}
  .founders{flex-direction:column;align-items:stretch}
  .promise{grid-template-columns:1fr 1fr}
  .promise b{font-size:38px}
  .final h2{font-size:34px}
  .final .hd-btn{height:54px;padding:0 30px;font-size:17px}
  .sky{--sky-h:270px}
  .sky-hold{width:300px;top:-32px}
  .final .sky-cta{font-size:17px}
  .f-cols{grid-template-columns:1fr 1fr}
  .fbot{flex-direction:column}
  .f-brand{gap:28px}
  .f-cols{gap:24px;margin-top:48px}
  summary{padding:20px 20px;font-size:16px}
  details div{padding:0 20px 20px}
}
.js .mascot .wave{animation:wave 3.2s ease-in-out infinite}
.js .mascot .eyes{animation:blink 5.5s infinite}
@keyframes wave{0%,100%{transform:rotate(0)}18%{transform:rotate(-9deg)}36%{transform:rotate(4deg)}54%{transform:rotate(-7deg)}72%{transform:rotate(2deg)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.serp{min-height:278px}
.serp-view:not(.is-on){display:none}
.js .serp-view.is-on{animation:viewIn .45s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.serp-switch{display:flex;gap:4px;background:#F1F2F4;border-radius:999px;padding:4px;width:max-content;margin:20px auto 0;position:relative;z-index:3}
.serp-switch button{padding:8px 20px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s}
.serp-switch button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.serp-view.chat{font-family:var(--body);padding:44px 0 22px}
.chat-user{margin:6px 0 0 auto;width:max-content;max-width:82%;background:#F1F2F4;border-radius:18px;padding:12px 16px;font-size:15px;line-height:1.4;color:#111}
.chat-ans{display:flex;gap:12px;margin-top:20px}
.chat-av{width:30px;height:30px;border-radius:50%;background:#0A0A0A;display:grid;place-items:center;flex:none}
.chat-ans p{font-size:15px;line-height:1.65;color:#222}
.chat-ans mark{background:#DDF5E6;color:#0B6B3A;border-radius:6px;padding:1px 7px;font-weight:600}
.chat-ans sup{font-size:11px;font-weight:700;color:#0B8A4A;margin-left:2px}
.chat-src{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chat-src span{display:inline-flex;align-items:center;gap:7px;border:1px solid #E5E7EB;border-radius:999px;padding:5px 12px;font-size:13px;color:#4B5563}
.chat-src b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px}

/* ---- reveal + tellers */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .gsc-chart svg{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.35,.55,.2,1) .35s}
.js .gsc.in .gsc-chart svg{clip-path:inset(0 0 0 0)}

/* ---- demo */
.demo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;max-width:1040px;margin:64px auto 0}
.demo-grid>*{min-width:0}
.deck{display:flex;flex-direction:column;align-items:center}
.deck-stack{position:relative;width:100%;max-width:520px;height:352px;touch-action:pan-y}
.dcard{position:absolute;inset:0;background:#fff;border:1px solid #ECEEF2;border-radius:24px;padding:26px 28px;box-shadow:0 20px 50px rgba(16,20,35,.08);display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s,box-shadow .3s;user-select:none;will-change:transform}
.dcard[data-d="1"]{transform:translateY(24px) scale(.94);box-shadow:0 10px 30px rgba(16,20,35,.05)}
.dcard[data-d="2"]{transform:translateY(46px) scale(.88);opacity:.75;box-shadow:none}
.dcard[data-d="0"]{cursor:grab}
.dcard.drag{transition:none;cursor:grabbing}
.dcard.out-r{transform:translateX(130%) rotate(14deg)!important;opacity:0}
.dcard.out-l{transform:translateX(-130%) rotate(-14deg)!important;opacity:0}
.dcard.out-u{transform:translateY(-70%) scale(.92)!important;opacity:0}
.dc-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dc-badge{font-size:13px;font-weight:600;color:var(--muted)}
.dc-kd{display:inline-flex;align-items:center;gap:7px;border:1px solid;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:600}
.dc-kd i{width:7px;height:7px;border-radius:50%;background:currentColor}
.dc-kd.e{color:#15803D;border-color:#86D6A8;background:#F3FBF6}
.dc-kd.m{color:#A16207;border-color:#F2D48A;background:#FFFBEB}
.dc-kd.h{color:#C2410C;border-color:#F6B98F;background:#FFF5ED}
.dc-title{font-size:27px;line-height:1.15;margin-top:18px}
.dc-x{font-size:16px;color:var(--sub);line-height:1.55;margin-top:12px}
.dc-meta{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid #F0F1F4}
.dc-meta small{display:block;font-size:12px;color:var(--faint);font-weight:500}
.dc-meta b{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-top:2px}
.stamp{position:absolute;top:20px;font-weight:800;font-size:15px;letter-spacing:.06em;border:3px solid;border-radius:10px;padding:3px 12px;opacity:0;pointer-events:none}
.stamp.y{right:24px;color:var(--brand);transform:rotate(8deg)}
.stamp.n{left:24px;color:#C8262B;transform:rotate(-8deg)}
.deck-actions{display:flex;gap:28px;margin-top:68px;position:relative;z-index:2}
.dbtn{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #E5E7EB;box-shadow:0 8px 20px rgba(16,20,35,.08);transition:transform .15s,box-shadow .15s,background .15s}
.dbtn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 14px 26px rgba(16,20,35,.12)}
.dbtn:active{transform:scale(.96)}
.dbtn.no{color:#E5484D}.dbtn.yes{color:#fff;background:var(--green);border-color:var(--green);box-shadow:0 10px 24px rgba(34,197,94,.35)}
.dbtn[disabled]{opacity:.4;pointer-events:none}
.deck-hint{font-size:13px;color:var(--faint);margin-top:16px}
.dcard.done{align-items:center;justify-content:center;text-align:center;gap:10px}
.dcard.done .big{width:64px;height:64px;border-radius:50%;background:var(--mint);color:#0B8A4A;display:grid;place-items:center}
.dcard.done h3{font-size:28px}
.dcard.done p{font-size:16px;color:var(--sub);max-width:340px}
.dcard.done button{margin-top:10px;height:44px;padding:0 22px;border-radius:999px;border:1.5px solid var(--brand);font-weight:600;font-size:15px;color:var(--ink);background:#fff}
.dcard.done button:hover{background:#F3FBF6}
.week{background:#fff;border:1px solid #ECEEF2;border-radius:22px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.week-head{display:flex;justify-content:space-between;align-items:center;font-size:17px;color:var(--ink)}
.week-head b{font-weight:600}
.week-head span{font-size:13px;font-weight:600;color:#076536;background:var(--mint);border-radius:999px;padding:3px 10px}
#weekList{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:18px}
#weekList li{min-width:0}
#weekList li{display:flex;align-items:center;gap:12px;min-height:46px;border-radius:12px;border:1.5px dashed #E1E4E9;padding:0 12px;font-size:14px;color:var(--faint);transition:background .3s,border-color .3s,color .3s}
#weekList li .day{font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;letter-spacing:.01em;flex:none;width:68px}
#weekList li .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#weekList li.on{border:1.5px solid #BFE6CF;background:#F3FBF6;color:var(--ink);font-weight:500;animation:pop .45s cubic-bezier(.2,.9,.3,1.3)}
#weekList li.on .day{color:#0B8A4A}
#weekList li svg{flex:none;color:var(--brand)}
@keyframes pop{0%{transform:scale(.94);opacity:.4}100%{transform:none;opacity:1}}
.progress{height:6px;border-radius:99px;background:#F0F1F4;margin-top:18px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0B8A4A,#3DD68C);border-radius:99px;transition:width .5s}
.week-note{font-size:12.5px;color:var(--faint);margin-top:14px;line-height:1.5}
@media (max-width:820px){
  .demo-grid{grid-template-columns:1fr;gap:56px;margin-top:48px}
  .deck-stack{height:392px}
  .dc-title{font-size:23px}
  .dc-meta{grid-template-columns:1fr 1fr}
  .dc-meta div:first-child{grid-column:1/-1}
  .serp-switch{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.dcard,.progress i{transition:none}}

/* hero: app-schermen */
.screens{width:100vw;margin:64px 0 0 calc(50% - 50vw);overflow:hidden;position:relative;padding:14px 0 30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.screens-track{display:flex;gap:24px;width:max-content;animation:screens 48s linear infinite}
.screens:hover .screens-track{animation-play-state:paused}
.screens img{height:356px;width:500px;flex:none;filter:drop-shadow(0 12px 30px rgba(16,20,35,.07))}
.screens img.echt{width:auto;border-radius:16px;border:1px solid #E6E8EC;background:#F5F5F5;filter:none}
@keyframes screens{to{transform:translateX(calc(-50% - 12px))}}
.hero-visual{margin-top:52px}
@media (max-width:820px){.screens{margin-top:44px}.screens img{height:260px;width:365px}.hero-visual{margin-top:56px}}
@media (prefers-reduced-motion:reduce){.screens-track{animation:none;transform:translateX(-220px)}}

/* ===== V1-hero (header + hero) ===== */
:root{--hd-brand:var(--brand);--hd-brand-h:var(--brand-h)}
.hd-wrap{max-width:1440px;margin:0 auto;padding:0 64px}
.hd-top{position:sticky;top:0;z-index:60;background:#fff;padding-top:12px;font-family:var(--hd-sat)}
.hd-announce{display:flex;align-items:center;justify-content:center;position:relative;background:#FBA61C;border-radius:4px;height:40px;font-size:14px;color:#101423;padding:0 48px;text-align:center}
.hd-announce b{font-weight:600}
.hd-announce button{position:absolute;right:4px;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:0;display:grid;place-items:center}
.hd-nav{display:flex;align-items:center;height:64px}
.hd-logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-.02em;color:#101423}
.hd-logo img{width:32px;height:auto;flex:none}
.hd-menu{display:flex;gap:30px;margin-left:40px;font-size:16px;color:#101423}
.hd-menu a{display:flex;align-items:center;gap:6px}
.hd-menu a:hover{color:var(--hd-brand)}
.hd-nav-r{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:16px;color:#101423}
.hd-lang{position:relative}
.hd-lang>summary{display:flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:10px;background:#F4F6F8;font-size:13px;font-weight:600;color:#3F4A54;cursor:pointer;list-style:none;user-select:none;transition:background .15s}
.hd-lang>summary::-webkit-details-marker{display:none}
.hd-lang>summary:hover{background:#EAEEF1}
.hd-lang>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hd-lang-chev{flex:none;color:#7B848E;transition:transform .15s}
.hd-lang[open]>summary{background:#EAEEF1}
.hd-lang[open] .hd-lang-chev{transform:rotate(180deg)}
.hd-lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:172px;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:6px;box-shadow:0 12px 32px rgba(17,24,39,.12);z-index:60}
.hd-lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text);white-space:nowrap}
.hd-lang-menu a:hover{background:var(--soft);color:var(--ink)}
.hd-lang-menu a.is-on{font-weight:600;color:var(--ink)}
.hd-lang-menu a.is-on::after{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat}
@media (prefers-reduced-motion:reduce){.hd-lang-chev{transition:none}}
.hd-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;border-radius:var(--r-btn);font:500 16px/22px var(--hd-sat);border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s}
.hd-nav .hd-btn{height:40px}
.hd-main{background:var(--hd-brand);color:#fff}
.hd-main:hover{background:var(--hd-brand-h)}
.hd-line{background:#fff;color:#1D1D26;border-color:#1D1D26}
.hd-line:hover{background:#F4F5F7}
.hd-burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:0;place-items:center;margin-right:-10px}
.hd-drawer{display:none;border-top:1px solid var(--line);padding:8px 0 20px}
.hd-drawer.open{display:block}
.hd-drawer a{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;color:#101423}
.hd-drawer .hd-btn{display:flex;width:100%;margin-top:16px;border:0;color:#fff}
.hd-hero{padding:100px 0 0;overflow:hidden;font-family:var(--hd-sat)}
.hd-hero h1{text-align:center;font-family:var(--hd-sat);font-size:68px;line-height:1.08;font-weight:600;letter-spacing:-1.8px;color:#1D1D26;max-width:1000px;margin:0 auto}
.hd-lead{text-align:center;font-size:22px;line-height:32px;color:#3F4147;max-width:900px;margin:26px auto 0}
.hd-ctas{display:flex;justify-content:center;gap:12px;margin-top:40px}
.hd-nocard{text-align:center;font-size:14px;color:#3F4147;margin-top:24px}
.hd-hero .screens{width:100%;margin:64px 0 0;padding:44px 0 56px}
section[id]{scroll-margin-top:40px}
#analyses{scroll-margin-top:16px;padding-top:0}
.stage{padding:64px 0 24px;text-align:center}
.stage .hero-visual{margin-top:0}
@media (max-width:1100px){.hd-menu{display:none}.hd-wrap{padding:0 32px}}
@media (max-width:820px){.dsh-kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dash{padding:12px;border-radius:16px}.dsh-chips,.dsh-search{display:none}.dash th:nth-child(2),.dash td:nth-child(2),.dash th:nth-child(5),.dash td:nth-child(5),.dash th:nth-child(6),.dash td:nth-child(6){display:none}.dash th,.dash td{white-space:normal}.dash td{height:auto;padding:11px 12px}.dash th,.dash td{padding:9px 12px}}
@media (max-width:760px){
  .hd-wrap{padding:0 16px}
  /* op mobiel scrolt de aankondiging weg, de menubalk blijft staan */
  .hd-top{position:sticky;top:calc(-1 * var(--hd-annc, 0px))}
  .hd-announce{font-size:12.5px;height:auto;padding:8px 40px 8px 12px;text-align:left;justify-content:flex-start}
  .hd-login,.hd-nav .hd-btn,.hd-lang{display:none}
  .hd-burger{display:grid}
  .hd-hero{padding:48px 0 0}
  .hd-hero h1{font-size:34px;line-height:40px;letter-spacing:-.6px}
  .hd-lead{font-size:18px;line-height:27px;margin-top:18px}
  .hd-ctas{flex-direction:column;align-items:stretch}
  .hd-hero .screens{margin-top:44px}
  .stage{padding-top:48px}
}

/* 3D-mascotte (PNG/WebP uit ChatGPT) */
.mascot-img{--w:320px;display:block;width:var(--w);height:auto;margin:0 auto calc(var(--w) * -.06);position:relative;left:36px;z-index:3;pointer-events:none;user-select:none}
.callout img{width:72px;height:auto;flex:none}
@media (max-width:820px){.mascot-img{--w:230px;left:20px}}

/* ===== stappen met horizontale scroll ===== */
.ss{position:relative}
.ss-scroll{height:420vh}
.ss-sticky{position:sticky;top:0;height:100vh;min-height:780px;display:flex;flex-direction:column;overflow:hidden}
.ss-head{width:100%;padding-top:clamp(116px,14vh,150px);flex:none}
.ss-head h2{text-align:left;max-width:16ch}
.ss-sub{font-size:19px;line-height:1.5;color:var(--sub);max-width:52ch;margin:16px 0 26px}
.ss-viewport{flex:1;display:flex;align-items:center;overflow:hidden}
.ss-rail{--ss-off:clamp(22px,4.4vh,52px);display:flex;align-items:center;width:max-content;padding:0 8vw;will-change:transform}
.ss-card{position:relative;flex:none;width:352px;background:#fff;border:1px solid #ECEEF2;border-radius:22px;box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden}
.ss-card.high{transform:translateY(calc(var(--ss-off) * -1))}
.ss-card.low{transform:translateY(var(--ss-off))}
.ss-vis{position:relative;border-bottom:1px solid #ECEEF2;padding:76px 24px 20px}
.ss-vis.v-mint{background:#E9F6EE}
.ss-vis.v-sage{background:#E4F0EA}
.ss-vis.v-lav{background:#EEF4FB}
.ss-vis.v-cream{background:#FBF3E4}
.ss-num{position:absolute;top:10px;left:18px;font-family:var(--head);font-size:54px;line-height:1.12;letter-spacing:-.04em;color:var(--deep);opacity:.3;pointer-events:none}
.ss-mascot{position:absolute;right:14px;top:10px;width:58px;height:58px}
.ss-mock{position:relative;width:100%;min-height:118px;background:#fff;border:1px solid #E3EAE5;border-radius:12px;padding:11px 13px;box-shadow:0 2px 10px rgba(15,35,27,.06)}
.mk-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink)}
.mk-up{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:700;color:var(--brand)}
.mk-spark{display:block;width:100%;height:52px;margin:7px 0 4px}
.mk-legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}
.mk-q{font-size:12px;font-weight:600;color:var(--ink);line-height:1.35}
.mk-a{font-size:11.5px;line-height:1.5;color:#4B5560;margin-top:6px}
.mk-a mark{background:#DCF1E4;color:#08532D;font-weight:600;padding:0 2px;border-radius:3px}
.mk-tag{display:inline-flex;align-items:center;gap:4px;margin-top:9px;font-size:10.5px;font-weight:600;color:#3F4A54;background:#F2F5F8;border-radius:999px;padding:3px 8px}
.mk-rows{padding:5px 13px}
.mk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:11.5px;color:#39424B}
.mk-row+.mk-row{border-top:1px solid #EFF2F0}
.mk-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-miss,.mk-have{flex:none;font-size:10px;font-weight:700;border-radius:999px;padding:3px 7px}
.mk-miss{color:#8A5B00;background:#FBEFD5}
.mk-have{color:#08532D;background:#DCF1E4}
.mk-bar{flex:none;width:84px;height:6px;border-radius:99px;background:#EDF1EE;overflow:hidden}
.mk-bar span{display:block;height:100%;border-radius:99px;background:var(--brand)}
.mk-dup{height:96px;display:flex;align-items:center;justify-content:center}
.mk-pg{position:absolute;width:78px;height:58px;border-radius:8px;background:#fff;border:1px solid #DDE5E0;box-shadow:0 2px 8px rgba(15,35,27,.08);background-image:linear-gradient(#E7EDE9,#E7EDE9),linear-gradient(#E7EDE9,#E7EDE9),linear-gradient(#E7EDE9,#E7EDE9);background-size:46px 5px,54px 5px,34px 5px;background-position:12px 14px,12px 26px,12px 38px;background-repeat:no-repeat}
.mk-pg:first-child{transform:translate(-26px,-8px) rotate(-5deg)}
.mk-pg:nth-child(2){transform:translate(26px,8px) rotate(4deg)}
.mk-kw{position:relative;font-size:10px;font-weight:700;color:#8A5B00;background:#FBEFD5;border-radius:999px;padding:4px 9px;z-index:2}
.mk-chips{display:flex;flex-wrap:wrap;gap:6px;padding:11px}
.mk-chips span,.mk-chips b{font-size:10.5px;font-weight:600;color:#3F4A54;background:#F2F5F8;border:1px solid #E7ECEF;border-radius:999px;padding:4px 9px}
.mk-chips b{color:var(--brand);background:#E9F6EE;border-color:#D3EBDD}
.ss-txt{padding:20px 24px 26px;min-height:152px}
.ss-txt h3{font-family:var(--body);font-weight:600;font-size:20px;letter-spacing:-.01em;text-wrap:balance}
.ss-txt p{font-size:15px;line-height:1.55;color:var(--sub);margin-top:10px}
.ss-line{flex:none;width:210px;height:120px;position:relative}
.ss-line.flip{transform:scaleY(-1)}
.ss-line svg{position:absolute;inset:0;width:100%;height:100%}
.ss-line path{stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ss-fill{stroke-dasharray:1000;stroke-dashoffset:1000}

@media (max-width:1024px),(prefers-reduced-motion:reduce){
  .ss-scroll{height:auto}
  .ss-sticky{position:static;height:auto;min-height:0;overflow:visible;padding-bottom:80px}
  .ss-head{padding-top:80px;width:auto}
  .ss-head h2{text-align:center;max-width:none;margin:0 auto}
  .ss-sub{text-align:center;margin-left:auto;margin-right:auto}
  .ss-viewport{overflow:visible;margin-top:34px}
  .ss-rail{flex-direction:column;align-items:stretch;width:100%;max-width:520px;margin:0 auto;padding:0 16px;transform:none!important;gap:44px}
  .ss-card{width:auto;transform:none!important}
  .ss-num{font-size:46px}
  .ss-line{display:none}
}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--ink);font:600 15px/1 var(--hd-sat);padding:14px 18px;border-radius:0 0 10px 0;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.skip:focus{left:0}

/* ===== abonnementen ===== */
.pricing{font-family:var(--hd-sat)}
.pr-box{display:grid;grid-template-columns:1fr 1fr;max-width:940px;margin:56px auto 0;background:#fff;border:1px solid #E7EAEE;border-radius:4px;overflow:hidden}
.pr-col{padding:44px 44px 48px;display:flex;flex-direction:column}
.pr-col+.pr-col{border-left:1px solid #E7EAEE}
.pr-col-alt{background:#F7FBF8}
.pr-name{font-family:var(--hd-sat);font-size:15px;font-weight:600;color:var(--hd-brand)}
.pr-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 9px;margin-top:16px}
.pr-price span{flex-basis:100%;font-size:14px;color:#677079;margin-bottom:2px}
.pr-price b{font-family:var(--head);font-weight:400;font-size:60px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.pr-price i{font-style:normal;font-size:15px;color:#677079}
.pr-sub{font-size:17px;line-height:1.5;color:var(--text);margin-top:18px;padding-bottom:22px;border-bottom:1px solid #E7EAEE}
.pr-feats{list-style:none;margin-top:22px;display:grid;gap:13px;align-content:start;flex:1}
.pr-feats li{position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:var(--text)}
.pr-feats li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;border-left:2px solid var(--hd-brand);border-bottom:2px solid var(--hd-brand);transform:rotate(-45deg)}
.pr-cta{margin-top:32px;align-self:flex-start;padding:0 30px}
.pr-adds{max-width:940px;margin:56px auto 0}
.pr-adds-h{font-size:15px;font-weight:600;color:#69727C}
.pr-adds dl{margin-top:16px;border-top:1px solid #E7EAEE}
.pr-row{display:grid;grid-template-columns:200px 1fr auto;align-items:baseline;gap:20px;padding:18px 2px;border-bottom:1px solid #E7EAEE}
.pr-row dt{font-size:17px;font-weight:600;color:var(--ink)}
.pr-d{font-size:16px;color:#677079}
.pr-p{font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
.pr-note{max-width:940px;margin:26px auto 0;font-size:15px;line-height:1.6;color:#677079}
.pr-note a{color:var(--hd-brand);text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){
  .pr-box{grid-template-columns:1fr;margin-top:40px}
  .pr-col{padding:32px 24px 36px}
  .pr-col+.pr-col{border-left:0;border-top:1px solid #E7EAEE}
  .pr-price b{font-size:48px}
  .pr-cta{align-self:stretch;justify-content:center}
  .pr-row{grid-template-columns:1fr auto;gap:4px 16px}
  .pr-d{grid-column:1/-1;order:3}
}

/* ===== prijspagina ===== */
.pp-light{background:#fff;color:var(--text);padding:var(--page-top) 0 120px;font-family:var(--body)}
.pp-h1{font-family:var(--head);font-weight:400;font-size:clamp(38px,5vw,72px);line-height:1;letter-spacing:-.025em;color:var(--ink);text-align:left;margin:0}
.pp-h1 span{color:#87948C}
.pp-grid{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,340px) minmax(0,340px);column-gap:32px}
.pp-top{align-items:start;margin-top:72px}
.pp-cards{display:contents}
.pp-claim{font-size:32px;line-height:1.15;letter-spacing:-.02em;color:#4B5563;font-weight:500;max-width:19ch;margin:0}

.pp-card{position:relative;border-radius:22px;padding:30px 28px 32px;min-height:356px;color:#12251B;display:flex;flex-direction:column}
.pp-a{background:var(--amber)}
.pp-b{background:var(--sage)}
.pp-card h2{font-family:var(--body);font-weight:700;font-size:30px;letter-spacing:-.02em;color:#12251B;text-align:left}
.pp-for{font-size:16px;line-height:1.4;margin-top:8px;margin-bottom:28px;color:#2A3E33}
.pp-left{display:flex;flex-direction:column;align-items:flex-start}
.pp-period{display:inline-flex;gap:4px;margin-top:32px;padding:4px;max-width:100%;background:#F1F3F2;border-radius:12px}
.pp-period button{font:inherit;font-size:14.5px;font-weight:600;color:var(--sub);background:none;border:0;border-radius:9px;padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .15s,color .15s}
.pp-period button:hover{color:var(--ink)}
.pp-period button.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,35,27,.12)}
.pp-period button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pp-period em,.ck-period em{font-style:normal;font-size:12px;font-weight:700;color:#08532D;background:#DCF1E4;border-radius:999px;padding:3px 8px}
.pp-period-note{font-size:14px;color:var(--muted);margin-top:10px}
.pp-year{margin:-24px 0 24px;font-size:14px;font-weight:600;color:#2A3E33}
.pp-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;font-family:var(--head);font-weight:400;font-size:56px;line-height:1;letter-spacing:-.03em;margin:auto 0 32px;color:#12251B}
.pp-van{flex-basis:100%;font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0;color:#2A3E33;margin-bottom:8px}
.pp-pm{font-family:var(--body);font-size:15px;color:#2A3E33}
.pp-pop{position:absolute;top:-13px;left:28px;background:var(--deep);color:#fff;font-size:13px;font-weight:600;border-radius:var(--r-pill);padding:5px 13px;white-space:nowrap}
.pp-btn{display:flex;align-items:center;justify-content:center;height:52px;margin-top:0;border-radius:var(--r-btn);background:var(--deep);color:#fff;font-weight:600;font-size:16px;transition:background .15s}
.pp-btn:hover{background:var(--deep-2)}

.pp-table{margin-top:112px}
.pp-thead,.pp-row{align-items:center}
.pp-thead{padding-bottom:20px;border-bottom:1px solid #DFE4E1}
.pp-thead h2{font-family:var(--body);font-weight:700;font-size:26px;letter-spacing:-.01em;color:var(--ink);text-align:left}
.pp-th{font-size:15px;font-weight:600;color:var(--ink);text-align:center}
.pp-row{padding:26px 0;border-bottom:1px solid #E7EBE8}
.pp-row p{font-size:16px;font-weight:600;line-height:1.45;color:var(--ink)}
.pp-row div{display:grid;place-items:center}
.pp-yes{width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.pp-ghost{width:34px;height:34px;border-radius:50%;border:1px solid #D8DEDA}
.pp-yes.is-a{background:var(--amber)}
.pp-yes.is-b{background:var(--sage)}
.pp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.pp-adds{margin-top:112px;background:var(--soft);border-radius:16px;padding:30px 28px 10px}
.pp-adds h2{font-family:var(--body);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--ink);text-align:left;padding-bottom:16px}
.pp-add{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(0,340px);align-items:baseline;column-gap:22px;padding:17px 0;border-top:1px solid #E4E8E5}
.pp-add-n{font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.pp-add-d{font-size:16px;color:#5F6870}
.pp-add-p{font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;text-align:right}
.pp-add-p span{font-weight:500;color:#5F6870;margin-left:5px}
.pp-note{margin-top:30px;font-size:15px;line-height:1.6;color:#5F6870;max-width:70ch}
.pp-note a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

@media (max-width:1180px){
  .pp-grid{grid-template-columns:minmax(160px,1fr) minmax(0,1fr) minmax(0,1fr);column-gap:22px}
}
@media (max-width:980px){
  .pp-top.pp-grid{grid-template-columns:1fr;row-gap:28px;margin-top:44px}
  .pp-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .pp-claim{font-size:26px;max-width:28ch}
}
@media (max-width:820px){
  .pp-light{padding-bottom:72px}
  .pp-cards{display:grid;grid-template-columns:1fr;gap:34px}
  .pp-for{min-height:0}
  .pp-table{margin-top:64px}
  .pp-thead.pp-grid,.pp-row.pp-grid{grid-template-columns:minmax(0,1fr) 44px 44px;column-gap:10px}
  .pp-yes,.pp-ghost{width:28px;height:28px}
  .pp-adds{padding:24px 18px 6px;margin-top:72px}
  .pp-thead h2,.pp-adds h2{font-size:22px}
  .pp-row p{font-size:15px}
  .pp-th{font-size:12px}
  .pp-add{grid-template-columns:1fr auto;gap:4px 14px}
  .pp-add-d{grid-column:1/-1;order:3}
}

/* ===== bestelflow ===== */
.ck{padding:var(--page-top) 0 110px;font-family:var(--body)}
.ck-head{max-width:1312px;margin:0 auto}
.ck-head h1{font-family:var(--head);font-weight:400;font-size:clamp(32px,3.6vw,46px);line-height:1.06;letter-spacing:-.025em;color:var(--ink);text-align:left}
.ck-steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;font-size:15px;color:#5F6870}
.ck-steps li{display:flex;align-items:center;gap:10px}
.ck-steps span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;background:#E9ECEF;color:#5B646E}
.ck-steps .is-done{color:var(--brand)}
.ck-steps .is-done span{background:var(--mint);color:var(--brand)}
.ck-steps .is-now{color:var(--ink);font-weight:600}
.ck-steps .is-now span{background:var(--brand);color:#fff}

.ck-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start;margin-top:48px}
.ck-main{min-width:0}
.ck-block{border:0;border-top:1px solid var(--hair);padding:0 0 34px}
.ck-block:first-child{border-top:0;padding-top:0}
.ck-block-last{padding-bottom:0}
.ck-block legend{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:20px}
.ck-n{width:28px;height:28px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600;flex:none}
.ck-opt{font-size:13px;font-weight:500;color:#5F6870}

.ck-period{display:inline-flex;gap:4px;padding:4px;max-width:100%;background:#F1F3F2;border-radius:12px;margin-bottom:16px}
.ck-period label{position:relative;cursor:pointer}
.ck-period input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ck-period span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--sub);white-space:nowrap;transition:background .15s,color .15s}
.ck-period label:hover span{color:var(--ink)}
.ck-period input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,35,27,.12)}
.ck-period input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.ck-plans{display:grid;gap:14px}
.ck-plan,.ck-add{position:relative;display:flex;align-items:flex-start;gap:14px;border:1.5px solid var(--line);border-radius:var(--r-card);padding:18px 20px;cursor:pointer;transition:border-color .15s,background .15s}
.ck-plan:hover,.ck-add:hover{border-color:#C9D2CC}
.ck-plan input,.ck-add input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:var(--brand)}
.ck-plan:has(input:checked),.ck-add:has(input:checked){border-color:var(--brand);background:var(--tint)}
.ck-plan:has(input:focus-visible),.ck-add:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.ck-plan-in{display:grid;gap:4px}
.ck-plan-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ck-plan-top b{font-size:19px;font-weight:600;color:var(--ink)}
.ck-plan-top i{font-style:normal;font-size:15px;color:#677079}
.ck-plan-d{font-size:15px;line-height:1.5;color:#677079}

.ck-adds{display:grid;gap:12px}
.ck-add-in{display:grid;gap:3px;flex:1}
.ck-add-in b{font-size:17px;font-weight:600;color:var(--ink)}
.ck-add-in span{font-size:15px;color:#677079}
.ck-add-p{font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;align-self:center}
.ck-add-t{display:flex;align-items:center;gap:8px}
.ck-tip{position:relative;display:inline-flex}
.ck-i{position:relative;width:20px;height:20px;flex:none;padding:0;border:1.5px solid #B9C4BC;border-radius:50%;background:#fff;color:#4B5A51;font-family:var(--body);font-size:11px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:help;transition:border-color .15s,color .15s}
.ck-i::before{content:"";position:absolute;inset:-8px;border-radius:50%}
.ck-i:hover{border-color:var(--brand);color:var(--brand)}
.ck-i:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ck-tip .ck-tip-b{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:272px;background:var(--deep);color:#F1F7F3;font-family:var(--body);font-size:13.5px;font-weight:400;line-height:1.5;text-align:left;padding:11px 13px;border-radius:10px;box-shadow:0 8px 24px rgba(15,35,27,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;z-index:6}
.ck-tip .ck-tip-b::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--deep)}
.ck-tip:hover .ck-tip-b,.ck-i:focus-visible+.ck-tip-b,.ck-tip[data-open] .ck-tip-b{opacity:1;visibility:visible}
@media (max-width:640px){
  .ck-tip{position:static}
  .pp-add,.ck-add{position:relative}
  .ck-tip .ck-tip-b{left:12px;right:12px;width:auto;transform:none;bottom:calc(100% - 6px)}
  .ck-tip .ck-tip-b::after{display:none}
}
@media (prefers-reduced-motion:reduce){.ck-tip .ck-tip-b{transition:none}}

.ck-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ck-field{display:grid;gap:7px;min-width:0;align-content:start}
.ck-wide{grid-column:1/-1}
.ck-field label{font-size:15px;font-weight:600;color:var(--ink)}
.ck-hint{font-size:14px;color:#5F6870;margin:-2px 0 0}
.ck-field input+.ck-hint{margin:0}
.ck-field input,.ck-field textarea{width:100%;font:400 16px/1.5 var(--body);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-btn);padding:13px 15px;transition:border-color .15s,box-shadow .15s}
.ck-field textarea{resize:vertical;min-height:110px}
.ck-field input::placeholder,.ck-field textarea::placeholder{color:#A6AEB6}
.ck-field input:focus,.ck-field textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(10,125,67,.14)}
.ck-field input[aria-invalid="true"]{border-color:var(--red)}
.ck-err{font-size:14px;font-weight:500;color:var(--red)}

.ck-check{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5;color:var(--text);cursor:pointer}
.ck-check input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:var(--brand)}
.ck-submit{margin-top:24px;height:54px;padding:0 32px;font-size:17px}
.ck-small{font-size:14px;color:#5F6870;margin-top:12px}

.ck-side{position:sticky;top:132px}
.ck-sum{background:var(--soft);border-radius:var(--r-card);padding:26px 24px}
.ck-sum h2{font-family:var(--body);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink);text-align:left;margin-bottom:18px}
.ck-line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:16px;color:var(--text);padding:9px 0;border-bottom:1px solid #E4E8E5}
.ck-line b{font-weight:600;color:var(--ink);white-space:nowrap}
.ck-line-add span{color:#5F6870}
.ck-total{border-bottom:0;margin-top:6px;padding-top:14px;border-top:1.5px solid #D9DFDB;font-size:17px}
.ck-total b{font-family:var(--head);font-weight:400;font-size:30px;letter-spacing:-.02em}
.ck-year{border-bottom:0;padding-top:2px;font-size:14.5px;color:var(--sub)}
.ck-year b{font-size:15.5px;font-weight:700;color:var(--ink)}
.ck-vat{font-size:13.5px;line-height:1.5;color:#5F6870;margin-top:10px}
.ck-usp{list-style:none;margin-top:18px;padding-top:16px;border-top:1px solid #E4E8E5;display:grid;gap:9px}
.ck-usp li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45;color:#5F6870}
.ck-usp li::before{content:"";position:absolute;left:2px;top:.36em;width:10px;height:6px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}

/* bedankpagina */
.ck-done{padding-bottom:120px}
.ck-steps-done{margin-top:0;justify-content:center}
.ck-steps-done+.dk{margin-top:28px}
.dk{max-width:680px;margin:0 auto;text-align:center}
.dk-mascot{width:230px;height:auto;margin:0 auto 6px}
.dk h1{font-family:var(--head);font-weight:400;font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.dk-lead{font-size:19px;line-height:1.55;color:var(--sub);margin-top:14px}
.dk-card{text-align:left;background:var(--soft);border-radius:var(--r-card);padding:24px;margin-top:34px}
.dk-card h2{font-family:var(--body);font-weight:600;font-size:18px;color:var(--ink);text-align:left;margin-bottom:14px}
.dk-rows{margin-top:16px;display:grid;gap:9px}
.dk-rows div{display:flex;justify-content:space-between;gap:16px;font-size:15px}
.dk-rows dt{color:#677079}
.dk-rows dd{color:var(--ink);font-weight:500;text-align:right;overflow-wrap:anywhere}
.dk-next{counter-reset:d;list-style:none;text-align:left;margin-top:34px;display:grid;gap:14px}
.dk-next li{counter-increment:d;position:relative;padding-left:44px;font-size:16px;line-height:1.55;color:#677079}
.dk-next li b{color:var(--ink);font-weight:600}
.dk-next li::before{content:counter(d);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--brand);display:grid;place-items:center;font-size:14px;font-weight:600}
.dk-mail{font-size:15px;color:#5F6870;margin-top:30px}
.dk-mail a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.dk-back{margin:22px auto 0;width:max-content}

@media (max-width:980px){
  .ck-grid{grid-template-columns:1fr;gap:34px}
  .ck-side{position:static;order:-1}
  .ck-side .ck-usp{display:none}
  .ck-steps{flex-wrap:nowrap;gap:14px;font-size:13.5px;margin-top:18px}
  .ck-steps li{gap:7px;white-space:nowrap}
  .ck-steps span{width:22px;height:22px;font-size:12px}
}
@media (max-width:820px){
  .ck{padding:var(--page-top) 0 80px}
  .ck-grid{margin-top:32px}
  .ck-fields{grid-template-columns:1fr}
  .ck-block legend{font-size:19px}
  .ck-submit{width:100%}
  .ck-steps{gap:8px 18px;font-size:14px}
  .dk-mascot{width:180px}
}

/* Tekstpagina's: voorwaarden en privacy */
.legal{padding:var(--page-top) 0 96px}
.legal .container{max-width:760px}
.legal h1{font-size:44px;text-align:left;text-wrap:balance}
.legal-lead{font-size:20px;line-height:1.55;color:var(--sub);margin-top:18px}
.legal h2{font-family:var(--body);font-weight:600;font-size:21px;letter-spacing:-.01em;text-align:left;color:var(--ink);margin:40px 0 0}
.legal p{font-size:17px;line-height:1.65;color:var(--text);margin-top:14px}
.legal p b{font-weight:600;color:var(--ink)}
.legal a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.legal-date{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.todo{color:#8A5B00;font-weight:700;border-bottom:2px dotted #D9A93F}
.todo-block{background:#FBEFD5;color:#6B4700;border-radius:12px;padding:14px 16px;font-size:15px}
@media (max-width:760px){.legal{padding:var(--page-top) 0 72px}.legal h1{font-size:34px}.legal-lead{font-size:18px}}


/* ---------- Blogoverzicht ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bi{padding:var(--page-top) 0 56px}
.bi h1{font-size:60px;line-height:1.04;text-align:left;max-width:15ch;text-wrap:balance}
.bi-lead{font-size:19px;line-height:1.6;color:var(--sub);margin-top:20px;max-width:56ch}
.bi-feats{display:grid;grid-template-columns:1.85fr 1fr;gap:22px;margin-top:48px}
.bi-feat{position:relative;display:block;height:420px;border-radius:24px;overflow:hidden;background:var(--deep)}
.bi-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bi-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,26,18,0) 25%,rgba(9,26,18,.9) 100%)}
.bi-feat-txt{position:absolute;left:0;right:0;bottom:0;padding:30px 32px;display:flex;flex-direction:column;align-items:flex-start}
.bi-feat-txt b{font-family:var(--head);font-weight:400;font-size:24px;line-height:1.15;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.bi-feat.is-groot .bi-feat-txt b{font-size:34px;max-width:22ch}
.bi-feat-ex{margin-top:10px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:58ch}
.bi-more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:15px;font-weight:600;color:#fff}
.bi-more svg{transition:transform .15s}
.bi-feat:hover img{transform:scale(1.04)}
.bi-feat:hover .bi-more svg{transform:translateX(3px)}
.bi-feat:focus-visible{outline:3px solid var(--brand);outline-offset:4px}

.bi-list{padding:24px 0 110px}
.bi-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.bi-tabs{display:flex;flex-wrap:wrap;gap:6px}
.bi-tab{font:inherit;font-size:14.5px;font-weight:600;color:var(--sub);background:none;border:0;border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .15s,color .15s}
.bi-tab:hover{background:var(--soft);color:var(--ink)}
.bi-tab.is-on{background:var(--ink);color:#fff}
.bi-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.bi-count{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.bi-rows{list-style:none;margin:0;padding:0}
.bi-row a{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:26px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.bi-row img{width:132px;height:88px;object-fit:cover;border-radius:12px;display:block}
.bi-row-txt b{display:block;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink);transition:color .15s}
.bi-row-txt span{display:block;margin-top:6px;font-size:15px;line-height:1.55;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bi-row-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:13.5px;color:var(--muted);white-space:nowrap}
.bi-row-meta em{font-style:normal;font-size:13px;font-weight:600;color:var(--brand);background:var(--mint);border-radius:999px;padding:4px 10px}
.bi-row a:hover b{color:var(--brand)}
.bi-row a:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:8px}
@media (max-width:1100px){.bi-feats{grid-template-columns:1fr}.bi-feat{height:360px}}
@media (max-width:760px){
  .bi{padding:var(--page-top) 0 28px}
  .bi h1{font-size:36px}
  .bi-lead{font-size:16.5px}
  .bi-feats{margin-top:28px}
  .bi-feats{gap:14px}
  .bi-feat{height:240px;border-radius:18px}
  .bi-feat:not(.is-groot){display:none}
  .bi-feat-txt{padding:20px}
  .bi-feat.is-groot .bi-feat-txt b,.bi-feat-txt b{font-size:21px}
  .bi-feat-ex{display:none}
  .bi-more{margin-top:10px}
  .bi-list{padding-top:12px}
  .bi-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .bi-tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
  .bi-tabs::-webkit-scrollbar{display:none}
  .bi-tab{white-space:nowrap}
  .bi-row a{grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:start;padding:18px 0}
  .bi-row img{width:88px;height:66px;border-radius:10px}
  .bi-row-txt b{font-size:16px}
  .bi-row-txt span{font-size:14.5px;color:#6B7280;margin-top:4px;-webkit-line-clamp:2}
  .bi-row-meta{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;margin-top:-4px;font-size:12.5px}
}
/* uitgelichte artikelen niet dubbel in de lijst onder "Alles" */
.bi-rows.is-alles .bi-row[data-feat]{display:none}
@media (max-width:760px){.bi-rows.is-alles .bi-row[data-feat="2"]{display:block}}
@media (prefers-reduced-motion:reduce){.bi-feat img{transition:none}}

/* ---------- Artikelpagina ---------- */
.ar-wrap{max-width:1440px;margin:0 auto;padding:0 64px}
.ar-hero{padding:var(--page-top) 0 0}
.ar-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--muted)}
.ar-crumb a{color:var(--muted);display:inline-block;padding:12px 0;margin:-12px 0}
.ar-crumb a:hover{color:var(--brand)}
.ar-crumb [aria-current]{color:var(--ink)}
.ar-hero h1{font-size:44px;line-height:1.08;text-align:left;margin-top:18px;max-width:22ch;text-wrap:balance}
.ar-media{position:relative;margin:34px 0 0;height:440px;border-radius:24px;overflow:hidden;background:var(--deep)}
.ar-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ar-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,26,18,.9) 0%,rgba(9,26,18,.8) 34%,rgba(9,26,18,.4) 56%,rgba(9,26,18,0) 78%)}
.ar-over{position:absolute;left:0;bottom:0;padding:40px 44px;max-width:620px;color:#fff}
.ar-meta{display:grid;grid-template-columns:auto 1fr;gap:9px 28px;margin:0}
.ar-meta div{display:contents}
.ar-meta dt{font-size:13.5px;font-weight:500;align-self:center}
.ar-meta div:nth-child(1) dt{color:#F3C77A}
.ar-meta div:nth-child(2) dt{color:#9FD9B6}
.ar-meta div:nth-child(3) dt{color:#F2A5A0}
.ar-meta div:nth-child(4) dt{color:#A9C8F0}
.ar-meta dd{font-size:15px;font-weight:600;color:#fff;margin:0}
.ar-excerpt{font-size:17px;line-height:1.6;color:rgba(255,255,255,.92);margin-top:22px}

.ar-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start;padding-top:64px;padding-bottom:96px}
.ar-col{position:relative;padding-left:72px;max-width:760px;min-width:0}
.ar-rail{position:absolute;left:17px;top:0;bottom:0;width:2px;border-radius:2px;background:#D5DDD8}
.ar-progress{position:absolute;left:0;top:0;width:2px;height:0;border-radius:2px;background:var(--brand)}
.ar-intro p{font-size:19.5px;line-height:1.62;color:var(--ink)}
.ar-intro p+p{margin-top:18px}
.ar-sec{position:relative;margin-top:60px;padding:0}
.ar-num{position:absolute;left:-72px;top:-3px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#fff;border:1px solid #D5DDD8;color:#5F6B64;font-size:12px;font-weight:700;letter-spacing:.02em;transition:background .25s,border-color .25s,color .25s;font-variant-numeric:tabular-nums}
.ar-num.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.ar-sec h2{font-family:var(--body);font-weight:700;font-size:28px;line-height:1.22;letter-spacing:-.02em;color:var(--ink);text-align:left;text-wrap:balance;scroll-margin-top:130px}
.ar-sec p{font-size:17.5px;line-height:1.72;color:#3E4A44;margin-top:16px}
.ar-ul{list-style:none;margin-top:18px}
.ar-ul li{position:relative;padding-left:22px;font-size:17.5px;line-height:1.65;color:#3E4A44}
.ar-ul li+li{margin-top:10px}
.ar-ul li::before{content:"";position:absolute;left:3px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.ar-tabel{position:relative;z-index:1;margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ar-tabel table{width:100%;border-collapse:collapse;font-size:15.5px}
.ar-tabel th{text-align:left;font-weight:700;color:var(--ink);padding:13px 16px;background:#F5F8F6;border-bottom:1px solid var(--line);white-space:nowrap}
.ar-tabel td{padding:13px 16px;color:#3E4A44;border-bottom:1px solid #EEF2EF;vertical-align:top}
.ar-tabel tr:last-child td{border-bottom:0}

.ar-side{position:sticky;top:130px}
.ar-toc h2{font-family:var(--body);font-weight:700;font-size:16px;color:var(--ink);text-align:left}
.ar-toc ol{list-style:none;margin:14px 0 0;padding:0;border-left:2px solid #D5DDD8}
.ar-toc a{display:flex;gap:12px;padding:9px 0 9px 16px;margin-left:-2px;border-left:2px solid transparent;font-size:14.5px;line-height:1.4;color:var(--text);transition:color .15s,border-color .15s}
.ar-toc a span{flex:none;font-size:12px;font-weight:700;color:#6F7B74;padding-top:1px;font-variant-numeric:tabular-nums}
.ar-toc a:hover{color:var(--ink)}
.ar-toc a.is-on{color:var(--ink);font-weight:600;border-left-color:var(--brand)}
.ar-toc a.is-on span{color:var(--brand)}
.ar-card{margin-top:32px;background:var(--mint);border-radius:20px;padding:24px}
.ar-card img{width:44px;height:44px;display:block}
.ar-card b{display:block;margin-top:12px;font-size:17px;font-weight:700;color:var(--ink)}
.ar-card p{font-size:14.5px;line-height:1.55;color:#34463B;margin-top:6px}
.ar-card .hd-btn{margin-top:18px;width:100%;justify-content:center}

.ar-next{background:#F4F7F5;padding:80px 0 96px}
.ar-next-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.ar-next-head h2{font-size:34px;text-align:left}
.ar-next-head a{display:inline-flex;align-items:center;gap:7px;padding:12px 0;margin:-12px 0;font-size:15.5px;font-weight:600;color:var(--brand)}
.ar-next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.ar-next-card{position:relative;display:block;aspect-ratio:4/3.3;border-radius:20px;overflow:hidden;background:var(--deep)}
.ar-next-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ar-next-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,26,18,0) 30%,rgba(9,26,18,.88) 100%)}
.ar-next-txt{position:absolute;left:0;right:0;bottom:0;padding:24px}
.ar-next-txt b{display:block;font-size:19px;line-height:1.3;font-weight:700;color:#fff;text-wrap:balance}
.ar-next-card:hover img{transform:scale(1.04)}

@media (max-width:1100px){
  .ar-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .ar-side{position:static;display:none}
}
@media (max-width:760px){
  .ar-wrap{padding:0 16px}
  .ar-hero h1{font-size:28px;max-width:none;margin-top:12px}
  .ar-media{height:auto;border-radius:18px;margin-top:18px;background:var(--deep)}
  .ar-media img{position:relative;height:200px}
  .ar-scrim{display:none}
  .ar-over{position:relative;padding:13px 16px;max-width:none}
  /* op mobiel: datum · categorie, daaronder de leestijd */
  .ar-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
  .ar-meta div{display:flex;align-items:center}
  .ar-meta div:nth-child(2){display:none}
  .ar-meta div+div::before{content:"\00B7";color:rgba(255,255,255,.55);margin:0 9px;font-weight:700}
  /* leestijd op een eigen regel, zodat er nooit een losse stip vooraan een regel staat */
  .ar-meta div:nth-child(4){flex-basis:100%}
  .ar-meta div:nth-child(4)::before{content:none}
  .ar-meta dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .ar-meta dd{font-size:13.5px;font-weight:600;margin:0}
  .ar-excerpt{display:none}
  .ar-layout{padding-top:28px;padding-bottom:64px}
  .ar-col{padding-left:40px}
  .ar-rail{left:13px}
  .ar-num{left:-40px;width:28px;height:28px;border-radius:8px;font-size:11px;top:0;font-variant-numeric:tabular-nums}
  .ar-intro p{font-size:17px}
  .ar-sec{margin-top:44px}
  .ar-sec h2{font-size:22px}
  .ar-sec p,.ar-ul li{font-size:16.5px}
  /* de tabel valt over het lijntje heen en dekt het af */
  .ar-tabel{position:relative;z-index:1;margin-left:-40px;width:calc(100% + 40px);overflow:visible;background:#fff}
  .ar-tabel table{font-size:14px;width:100%}
  .ar-tabel th{white-space:normal}
  .ar-tabel th,.ar-tabel td{padding:10px;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 6 6;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6;overflow-wrap:break-word}
  .ar-tabel th:last-child,.ar-tabel td:last-child{-webkit-hyphens:manual;hyphens:manual;white-space:nowrap}
  .ar-next-card{aspect-ratio:auto;height:200px}
  .ar-next{padding:56px 0 64px}
  .ar-next-head h2{font-size:28px}
  .ar-next-grid{grid-template-columns:1fr;gap:16px}
}
@media (prefers-reduced-motion:reduce){.ar-num,.ar-next-card img{transition:none}}

@media (max-width:760px){:root{--page-top:40px}}
@media (max-width:400px){.pp-period button,.ck-period span{padding:9px 11px;font-size:13.5px}.pp-period em,.ck-period em{font-size:12px;padding:2px 7px}}

/* lange woorden in koppen (zoals "Zoekwoordkannibalisatie") breken op smalle telefoons netjes af */
@media (max-width:480px){
  h1,h2,h3,.bi-row-txt b,.bi-feat-txt b,.ar-next-txt b,.ar-toc a{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 6 6;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6;overflow-wrap:break-word}
}

/* kleinste telefoons: de drie verhaalzinnen passen dan net niet op 30px */
@media (max-width:360px){.story p{font-size:26px}.story .ic{width:34px;height:34px;margin:0 4px}.story .ic svg{width:28px;height:28px}}

/* Vergelijkingstabel past op telefoon: alle drie de kolommen tegelijk in beeld, niet zijwaarts vegen */
@media (max-width:560px){
  .compare table{min-width:0;margin-top:40px;table-layout:fixed}
  .compare th:first-child,.compare td:first-child{width:auto;padding-left:4px;padding-right:8px;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 6 6;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6;overflow-wrap:break-word}
  .compare th:not(:first-child),.compare td:not(:first-child){width:54px;padding-left:2px;padding-right:2px}
  .compare th{font-size:13px;line-height:1.25;padding-top:14px;padding-bottom:14px}
  .compare th.hl img{width:34px!important}
  .compare td{padding-top:14px;padding-bottom:14px;font-size:14.5px;line-height:1.35}
  .compare td .row-sub{font-size:12.5px;line-height:1.35}
  .compare .yes,.compare .no,.compare .half{width:26px;height:26px}
}

/* Demo-hint: op aanraakschermen geen pijltjestoetsen noemen */
.hint-touch{display:none}
@media (hover:none) and (pointer:coarse){.hint-muis{display:none}.hint-touch{display:inline}}

/* Korte labels nooit over twee regels (gevonden met de BREEKT-check in tools/audit.js) */
.dc-kd,.dc-badge,.ck-add-t b,.gsc-cell small{white-space:nowrap}
.dc-top{flex-wrap:wrap;row-gap:8px}
.dc-meta{grid-template-columns:1fr 1fr}
.dc-meta div:first-child{grid-column:1/-1}
@media (max-width:560px){
  .compare th{white-space:nowrap;font-size:12px}
  .compare th:not(:first-child),.compare td:not(:first-child){width:60px}
}
@media (max-width:400px){
  .f-cols{column-gap:16px}
  .f-cols a,.f-cols p{font-size:14px}
}
@media (max-width:360px){
  .gsc-cell{padding:18px 12px 16px}
  .gsc-cell small{font-size:12px;gap:5px}
  .ck-steps{gap:10px;font-size:12.5px}
  .ck-steps li{gap:5px}
  .ck-add-p{font-size:15px}
}

/* ---------- Rekenhulp: Wat levert het op? (opbrengst.html) ---------- */
.ob-lead{font-size:clamp(19px,1.9vw,24px);line-height:1.45;color:var(--text);max-width:720px;margin-top:28px}
.ob-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:32px;align-items:start;margin-top:56px}
.ob-form{position:sticky;top:132px;display:grid;gap:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.ob-field{display:grid;gap:8px;border:0;min-width:0}
.ob-field>span,.ob-field legend{font-size:15px;font-weight:600;color:var(--ink);padding:0;margin-bottom:8px}
.ob-field>span{margin-bottom:0}
.ob-field input[type=text],.ob-field select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #D5DAD7;border-radius:12px;padding:13px 14px;min-height:50px}
.ob-field select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23374151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center}
.ob-field input:focus-visible,.ob-field select:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.ob-seg{display:flex;gap:4px;padding:4px;background:#F1F3F2;border-radius:12px}
.ob-seg label{flex:1;position:relative}
.ob-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ob-seg span{display:grid;place-items:center;min-height:42px;padding:0 8px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--sub);text-align:center;white-space:nowrap;transition:background .15s,color .15s}
.ob-seg input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,35,27,.12)}
.ob-seg input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.ob-go{width:100%;justify-content:center;min-height:50px;font-size:16px}

.ob-res{display:grid;gap:16px;scroll-margin-top:88px}
/* Tot iemand zijn website invult: cijfers wazig, met een korte aanwijzing */
.ob-main-v,.ob-stat b,.ob-stat small,#obBars{transition:filter .6s ease}
.heeft-js .ob-res.is-wazig .ob-main-v{filter:blur(16px);user-select:none}
.heeft-js .ob-res.is-wazig .ob-stat b,.heeft-js .ob-res.is-wazig .ob-stat small,.heeft-js .ob-res.is-wazig #obBars{filter:blur(9px);user-select:none}
.ob-wazig-tip{display:none}
.ob-mist{margin:0 0 -4px;font-size:14.5px;font-weight:600;color:#C8262B}
.ob-field.is-mist input[type=text],.ob-field.is-mist .ob-seg{box-shadow:0 0 0 2px #C8262B;border-radius:12px}
.heeft-js .ob-res.is-wazig .ob-wazig-tip{display:block;margin-top:14px;font-size:17px;line-height:1.5;color:#fff;font-weight:600}
.heeft-js .ob-res.is-wazig .ob-main-s{display:none}
.ob-res.is-flash .ob-main{animation:obFlash .6s ease}
@keyframes obFlash{0%{transform:scale(.985)}100%{transform:none}}
.ob-main{background:var(--deep);color:#fff;border-radius:var(--r-card);padding:32px 32px 30px}
.ob-main-k{font-size:15px;font-weight:600;color:#A5D3B6}
.ob-main-v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:10px}
.ob-main-v b{font-family:var(--head);font-weight:400;font-size:clamp(56px,7vw,88px);line-height:1;letter-spacing:-.02em}
.ob-main-v span{font-size:17px;color:#CFE3D7}
.ob-main-s{font-size:15.5px;line-height:1.55;color:#CFE3D7;margin-top:14px;max-width:560px}
.ob-main-s b{color:#fff;font-weight:600;overflow-wrap:anywhere}
.ob-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ob-stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;display:grid;gap:6px;align-content:start}
.ob-stat span{font-size:13.5px;font-weight:600;color:var(--muted)}
.ob-stat b{font-family:var(--head);font-weight:400;font-size:clamp(26px,2.4vw,32px);line-height:1.05;color:var(--ink);white-space:nowrap}
.ob-stat small{font-size:13px;color:var(--muted);line-height:1.4}
.ob-stat-hl{background:var(--mint);border-color:#CDEBD8}
.ob-stat-hl em{font-style:normal;font-weight:700;color:var(--brand)}
.ob-chart{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 16px}
.ob-chart-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ob-chart-top b{font-size:16px;font-weight:600;color:var(--ink)}
.ob-chart-top span{font-size:13.5px;color:var(--muted)}
.ob-chart svg{display:block;width:100%;height:160px}
.ob-chart svg rect{transition:y .5s ease,height .5s ease}
.ob-chart-x{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:8px}
.ob-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ob-card{border-radius:16px;padding:24px}
.ob-card h3{font-family:var(--body);font-size:19px;font-weight:700;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.ob-card p{font-size:15.5px;line-height:1.55;color:var(--text);margin-top:8px}
.ob-card p b{color:var(--ink);font-weight:700;white-space:nowrap}
.ob-creme{background:#FDF6E3}.ob-mint{background:var(--mint)}.ob-blauw{background:#EAF4FD}
.ob-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:#fff}
.ob-cta p{font-size:16px;line-height:1.5;color:var(--text);flex:1 1 280px}
.ob-cta p b{color:var(--ink);overflow-wrap:anywhere}
.ob-cta-b{display:flex;gap:10px;flex-wrap:wrap}
.ob-how{margin-top:40px;border-top:1px solid var(--line);padding-top:24px}
.ob-how summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:15px;font-weight:600;color:var(--ink);transition:border-color .15s}
.ob-how summary:hover{border-color:#B9D9C5}
.ob-how summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ob-how summary::-webkit-details-marker{display:none}
.ob-how summary svg{color:var(--muted);transition:transform .2s}
.ob-how[open] summary svg{transform:rotate(180deg)}
.ob-how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.ob-how-item{display:grid;gap:6px;align-content:start;background:#F7F8F7;border-radius:16px;padding:20px}
.ob-how-item b{font-family:var(--head);font-weight:400;font-size:28px;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.ob-how-item span{font-size:14.5px;line-height:1.5;color:var(--text)}
.ob-how-item em{font-style:normal;font-weight:600;color:var(--ink)}
.ob-how-p{margin-top:14px;font-size:14.5px;color:var(--muted)}
@media (max-width:900px){.ob-how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.ob-how-grid{grid-template-columns:minmax(0,1fr)}.ob-how-item{padding:16px 18px}.ob-how-item b{font-size:24px}}
@media (max-width:1180px){.ob-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .ob-grid{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .ob-form{position:static}
}
@media (max-width:620px){
  .ob-form{padding:20px}
  .ob-main{padding:24px 22px}
  .ob-duo{grid-template-columns:1fr}
  .ob-card{padding:20px}
  .ob-cta{padding:20px}
  .ob-cta-b,.ob-cta-b .hd-btn{width:100%;justify-content:center}
  .ob-stat{padding:16px 14px 14px}
  .ob-stat b{font-size:26px}
}
@media (max-width:360px){.ob-seg span{font-size:13px;padding:0 4px}.ob-stat b{font-size:23px}}

.sum .sum-link{margin-top:12px;font-size:17px}
.sum .sum-link a{color:var(--brand);font-weight:600;text-decoration:none;border-bottom:1.5px solid #B9D9C5;padding-bottom:1px}
.sum .sum-link a:hover{border-color:var(--brand)}
.ob-herkend{margin-top:-12px;font-size:14px;line-height:1.45;color:var(--brand);background:var(--tint);border:1px solid #CDEBD8;border-radius:10px;padding:9px 12px}
.ob-herkend b{font-weight:700}
.ob-herkend.is-fout{color:#B42318;background:#FEF3F2;border-color:#FDD3CF}

/* Blogoverzicht: titel even groot en op dezelfde hoogte als Abonnementen en Opbrengst */
.bi .pp-h1{font-size:clamp(38px,5vw,72px);line-height:1;max-width:none;text-wrap:balance}
.bi .pp-h1+.bi-lead{font-size:clamp(19px,1.9vw,24px);line-height:1.45;color:var(--text);max-width:720px;margin-top:28px}
/* Bestellen: taal van de blogs en extra talen */
.ck-talen{margin-top:20px;display:grid;gap:10px}
.ck-talen-t{font-size:16px;font-weight:600;color:var(--ink)}
.ck-talen-t span{font-weight:500;font-size:14px;color:var(--muted);margin-left:6px}
.ck-talen-opt{display:flex;gap:10px;flex-wrap:wrap}
.ck-talen-opt label{position:relative;cursor:pointer}
.ck-talen-opt input{position:absolute;opacity:0;width:1px;height:1px}
.ck-talen-opt span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-weight:600;color:var(--sub);background:#fff;transition:border-color .15s,background .15s,color .15s}
.ck-talen-opt span::before{content:"";width:18px;height:18px;border-radius:5px;border:1.5px solid #B9C4BC;background:#fff center/12px no-repeat;flex:none}
.ck-talen-opt input:checked+span{border-color:var(--brand);background:var(--tint);color:var(--ink)}
.ck-talen-opt input:checked+span::before{border-color:var(--brand);background-color:var(--brand);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
.ck-talen-opt input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.ck-add-extra{display:grid;grid-template-columns:120px 1fr;gap:12px;margin:-4px 0 4px;padding:14px 16px;border-radius:14px;background:var(--tint);border:1px solid #CDEBD8}
.ck-add-extra label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.ck-add-extra select,.ck-add-extra input{width:100%;font:400 16px/1.4 var(--body);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px}
.ck-add-extra select:focus-visible,.ck-add-extra input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
@media (max-width:420px){.ck-add-extra{grid-template-columns:1fr}.ck-talen-t span{display:block;margin:2px 0 0}}
.ck-add-extra select{appearance:none;-webkit-appearance:none;padding-right:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23374151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center}

/* Rekenhulp: zoekbaar brancheveld */
.ob-field>label{font-size:15px;font-weight:600;color:var(--ink)}
.ob-combo{position:relative}
.ob-combo input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #D5DAD7;border-radius:12px;padding:13px 40px 13px 14px;min-height:50px}
.ob-combo input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.ob-combo input::placeholder{color:#9AA3AB}
.ob-combo-pijl{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#374151;pointer-events:none;transition:transform .15s}
.ob-combo input[aria-expanded="true"]+.ob-combo-pijl{transform:translateY(-50%) rotate(180deg)}
.ob-lijst{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-height:320px;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(15,35,27,.14)}
.ob-lijst li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:9px;font-size:15px;color:var(--ink);cursor:pointer}
.ob-lijst li small{font-size:12.5px;color:var(--muted);text-align:right;flex:none;max-width:48%}
.ob-lijst li:hover,.ob-lijst li.is-actief{background:var(--tint)}
.ob-lijst li[aria-selected="true"]{font-weight:600}
.ob-lijst li[aria-selected="true"] span::after{content:" ✓";color:var(--brand)}
.ob-lijst .ob-lijst-leeg{color:var(--muted);font-size:14px;line-height:1.45}
@media (max-width:420px){.ob-lijst li{flex-direction:column;gap:2px}.ob-lijst li small{text-align:left;max-width:none}}
/* de FAQ-regel "details div" niet laten doorwerken in het rekenblok */
.ob-how .ob-how-grid{padding:0;max-width:none;font-size:inherit;color:inherit;line-height:inherit}
.ob-how .ob-how-item{max-width:none;font-size:inherit;line-height:normal}
/* stappenbalk: de wisselende woorden (Bevestigen/Betalen/Betaald) zijn tekst, geen genummerd rondje */
.ck-steps li span[data-modus],.ck-steps li span[data-dank]{display:inline;width:auto;height:auto;border-radius:0;background:none;color:inherit;font-size:inherit;font-weight:inherit}

/* Aankondigingsbalk is een echte link naar het artikel over AI-zoekmachines */
.hd-announce a{color:inherit;text-decoration:none;display:inline-block;padding:10px 0;margin:-10px 0}
.hd-announce a:hover span,.hd-announce a:hover{text-decoration:underline;text-underline-offset:3px}
.hd-announce a:focus-visible{outline:2px solid #101423;outline-offset:2px;border-radius:4px}
/* Koppen in Cal Sans staan van zichzelf erg krap: iets meer ruimte tussen de woorden */
h1,h2,h3,.h,.pp-h1,.bi-feat-txt b,.promise b,.ob-how-item b,.ob-stat b{word-spacing:.08em}

/* Drie kaarten "Een groot deel van je SEO uit handen": gelijk beeldvlak bovenin, tekst eronder */
.fx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fx-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.fx-vis{height:230px;display:flex;align-items:center;justify-content:center;padding:24px}
.fx-mint{background:#E8F5EC}.fx-blauw{background:#EAF2FB}.fx-creme{background:#FBF4E4}
.fx-mock{width:100%;max-width:300px;background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(15,35,27,.06),0 8px 24px rgba(15,35,27,.07);padding:14px 16px;font-family:var(--body)}
.fx-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:8px}
.fx-head b{font-size:13.5px;font-weight:700;color:var(--ink)}
.fx-head span{font-size:12px;color:var(--muted)}
.fx-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #EEF1EF;font-size:13px;color:#39424B}
.fx-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-row i{font-style:normal;font-weight:600;color:var(--ink)}
.fx-row em{font-style:normal;flex:none;font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px}
.fx-ok{color:#0B6B3A;background:#DCF1E4}.fx-mid{color:#8A5B00;background:#FBEFD5}
.fx-tag{color:#3F4A54;background:#F1F4F6}
.fx-doc .fx-h{display:block;font-size:14px;font-weight:700;line-height:1.35;color:var(--ink)}
.fx-doc p{margin-top:8px;font-size:12.5px;line-height:1.55;color:#4B5560}
.fx-doc u{text-decoration:none;color:#1D5FD1;border-bottom:1.5px solid #9DBDF2}
.fx-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid #EEF1EF;font-size:12px;color:var(--muted)}
.fx-meta em{font-style:normal;font-weight:600;color:#0B6B3A}
.fx-txt{padding:26px 28px 30px}
.fx-txt h3{font-family:var(--body);font-weight:600;font-size:21px;letter-spacing:-.01em;word-spacing:normal}
.fx-txt p{font-size:16.5px;line-height:1.6;color:#5F6870;margin-top:10px}
@media (max-width:1024px){.fx{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto}.fx-vis{height:236px}}
@media (max-width:820px){.sum{margin-top:96px}}

/* Homepage: korte verwijzing naar de rekenhulp (vervangt het blok "Maak de besparing concreet") */
.sum.sum-kort{margin-top:96px;max-width:1040px}
.sk{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--deep);border-radius:24px;padding:40px 44px}
.sum .sk h3{font-size:32px;line-height:1.15;color:#fff}
.sum .sk p{font-size:18px;line-height:1.55;color:#CFE3D7;margin-top:10px;max-width:580px}
.sum .sk p b{font-weight:600;color:#A5E3BD;white-space:nowrap}
.sk-btn{flex:none;height:52px;padding:0 26px}
.sk .sk-btn{background:#fff;color:var(--deep);border-color:#fff}
.sk .sk-btn:hover{background:#E4F6EB;border-color:#E4F6EB}
.sk .sk-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:760px){
  .sum.sum-kort{margin-top:72px}
  .sk{flex-direction:column;align-items:flex-start;gap:22px;padding:28px 24px}
  .sum .sk h3{font-size:26px}
  .sum .sk p{font-size:16.5px}
  .sk-btn{width:100%}
}

/* Zes analyses zonder beweging op desktop: raster van 3 in plaats van één smalle kolom */
@media (min-width:1025px) and (prefers-reduced-motion:reduce){
  .ss-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;gap:28px;padding:0 24px}
}

/* Afsluiter: vaste regelafbreking alleen op brede schermen, anders blijft er één woord alleen staan */
.final h2{text-wrap:balance}
@media (max-width:700px){.final h2 br{display:none}}
/* Footer op telefoon: tekstregels (Nijmegen, LinkedIn volgt) krijgen dezelfde afstand als de links */
@media (max-width:1024px){.f-cols p{padding:9px 0;margin-bottom:0}}
/* Koppen: regels gelijk verdelen, zodat er geen los woord op de laatste regel blijft staan */
h1,h2,h3,h4,.pp-h1{text-wrap:balance}
/* Lopende tekst: geen los woord op de laatste regel */
p,li,dd,figcaption,summary{text-wrap:pretty}
/* Telefoonnummers nooit over twee regels */
a[href^="tel:"]{white-space:nowrap}
/* Veegrijen op de telefoon (functiekaarten en zes analyses), met stippen eronder; zie js/veegrij.js */
.veeg-dots{display:none}
@media (max-width:760px){
  .fx{display:flex;max-width:none;margin:0 -24px;padding:2px 24px 6px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fx::-webkit-scrollbar{display:none}
  .fx-card{flex:0 0 86%;scroll-snap-align:start}
  .fx-vis{height:240px;padding:14px 10px}
  .fx-mock{padding:12px 12px}
  .fx-row{gap:7px;font-size:12.5px}
  .fx-row em{font-size:11px;padding:3px 7px}
  .fx-txt{padding:22px 20px 26px}
  .fx-txt h3{font-size:19px}
  .fx-txt p{font-size:16px}

  .ss-viewport{display:block;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ss-viewport::-webkit-scrollbar{display:none}
  .ss-rail{flex-direction:row;align-items:stretch;width:max-content;max-width:none;margin:0;padding:2px 24px 6px;gap:14px}
  .ss-card{width:calc((100vw - 48px) * .86);scroll-snap-align:start}
  .ss-sticky{padding-bottom:64px}

  .veeg-dots{display:flex;justify-content:center;gap:2px;margin-top:10px}
  .veeg-dots button{width:28px;height:28px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;border-radius:999px}
  .veeg-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:#CBD5CF;transition:width .2s,background-color .2s}
  .veeg-dots button[aria-current="true"]::before{width:22px;background:var(--brand)}
  .veeg-dots button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.veeg-dots button::before{transition:none}}
@media (max-width:374px){.fx-card{flex-basis:90%}.ss-card{width:calc((100vw - 48px) * .9)}.fx-row span{white-space:normal;overflow:visible;line-height:1.3}}
/* Zo begin je op de telefoon: elk plaatje op dezelfde afstand boven zijn eigen kop,
   en tussen de stappen meer ruimte dan binnen een stap */
@media (max-width:760px){
  .steps{margin-top:40px;gap:64px}
  .step-art{height:auto;margin-bottom:22px}
  .step .docs{height:164px;margin-bottom:12px}
  .step .yesno{bottom:0}
  .step .mini-input{width:min(250px,100%)}
  .step .mini-chart{width:min(280px,100%)}
  .step h3{font-size:24px}
  .step p{font-size:16.5px;margin-top:8px}
}
/* Foutpagina (404) */
.nf-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
/* Bedankpagina: vangnet als de bestelmail niet vanuit een mailprogramma verstuurd kon worden */
.dk-vangnet{text-align:left;background:#FEF6E0;border:1px solid #F3DFA8;border-radius:var(--r-card);padding:22px 24px;margin-top:30px}
.dk-vangnet h2{font-family:var(--body);font-weight:700;font-size:18px;color:var(--ink);text-align:left;word-spacing:normal}
.dk-vangnet p{font-size:15.5px;line-height:1.55;color:#4B4A3F;margin-top:8px}
.dk-vangnet p b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.dk-vangnet-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.dk-vangnet-knoppen .hd-btn{cursor:pointer}
.dk-vangnet-ok{min-height:1.4em;font-weight:600;color:var(--brand)!important}
.dk-vangnet-ok:empty{min-height:0;margin:0}
.dk-vangnet-opnieuw a{color:#6B5A1E;text-decoration:underline;text-underline-offset:3px}
@media (max-width:480px){.dk-vangnet{padding:20px 18px}.dk-vangnet-knoppen .hd-btn{flex:1 1 100%;justify-content:center}}
/* Demo: knop "Volgende week" tussen kruisje en vinkje, en het blokje met doorgeschoven onderwerpen */
.dbtn.later{width:auto;height:52px;align-self:center;display:inline-flex;align-items:center;gap:8px;padding:0 18px 0 15px;border-radius:999px;font:600 15px/1 var(--hd-sat);color:var(--ink);white-space:nowrap}
.dbtn.later svg{color:#8A5B00;flex:none}
.week-later{margin-top:14px;padding:12px 14px;border-radius:12px;background:#FBF4E4;border:1px solid #F1DFB5}
.week-later b{display:block;font-size:13px;font-weight:700;color:#6B4700}
.week-later ul{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:6px}
.week-later li{min-width:0;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:pop .45s cubic-bezier(.2,.9,.3,1.3)}
@media (max-width:480px){.deck-actions{gap:12px}.dbtn.later{padding:0 14px 0 12px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.week-later li{animation:none}}
@media (max-width:374px){.deck-actions{gap:10px}.dbtn:not(.later){width:56px;height:56px}.dbtn.later{height:46px;padding:0 13px}.dbtn.later svg{display:none}}

/* ---------- Quiz "Past Blogoogst bij jou?" (quiz.html, js/quiz.js) ---------- */
.qz-box{margin-top:48px;max-width:900px;background:#fff;border:1px solid var(--hair);border-radius:24px;padding:40px 44px 44px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.qz-kop{display:flex;justify-content:space-between;align-items:center;min-height:32px;font-size:15px;font-weight:500;color:var(--muted)}
.qz-terug{background:none;border:0;padding:6px 0;font:500 15px var(--body);color:var(--brand);cursor:pointer}
.qz-terug:hover{text-decoration:underline;text-underline-offset:3px}
.qz-balk{height:6px;border-radius:99px;background:#F0F1F4;margin-top:12px;overflow:hidden}
.qz-balk i{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width .35s}
.qz-vraag{border:0;margin:34px 0 0;padding:0;min-width:0}
.qz-vraag legend{padding:0;font-family:var(--head);font-weight:400;word-spacing:.08em;font-size:clamp(26px,3vw,36px);line-height:1.12;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.qz-opties{display:grid;gap:12px;margin-top:26px}
.qz-optie{display:flex;align-items:center;min-height:64px;padding:16px 22px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font:500 18px/1.35 var(--body);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.qz-optie:hover{border-color:#9FD9B8;background:#F6FCF8}
.qz-optie:focus-visible,.qz-terug:focus-visible,.qz-opnieuw:focus-visible{outline:3px solid rgba(10,125,67,.35);outline-offset:2px}
.qz-optie.is-gekozen{border-color:var(--brand);background:var(--mint)}
.qz-uit{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.qz-masc{display:block;width:150px;height:auto;margin-bottom:8px}
.qz-uit h2{margin:0 0 6px;font-family:var(--head);font-weight:400;word-spacing:.08em;font-size:clamp(28px,3.2vw,40px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);text-align:left;outline:0}
.qz-uit-l p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--text)}
.qz-advies{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:18px;background:var(--mint)}
.qz-niet .qz-advies{background:var(--soft)}
.qz-pakket{font-family:var(--head);font-weight:400;word-spacing:.08em;font-size:30px;line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.qz-prijs{font-size:16px;color:var(--text)}
.qz-waarom{margin-bottom:8px;font-size:15.5px;line-height:1.5;color:var(--text)}
.qz-advies .hd-btn{width:100%}
.qz-opnieuw{align-self:center;margin-top:4px;background:none;border:0;padding:6px 0;font:500 15px var(--body);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qz-noscript{font-size:17px;line-height:1.6;color:var(--text)}
@media (max-width:820px){
  .qz-box{margin-top:32px;padding:26px 20px 30px;border-radius:20px}
  .qz-uit{grid-template-columns:minmax(0,1fr);gap:28px}
  .qz-optie{min-height:58px;padding:14px 18px;font-size:16.5px}
  .qz-masc{width:120px}
}
/* quiz: website, branche en extra blokken in de uitslag */
.qz-legend{display:block;font-family:var(--head);font-weight:400;word-spacing:.08em;font-size:clamp(26px,3vw,36px);line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.qz-hint{margin-top:10px;font-size:16px;line-height:1.5;color:var(--muted)}
.qz-site-rij{display:flex;gap:10px;margin-top:22px}
.qz-site-rij input{flex:1;min-width:0;height:56px;padding:0 18px;border:1.5px solid var(--line);border-radius:14px;font:400 18px var(--body);color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.qz-site-rij input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(10,125,67,.14)}
.qz-site-rij input[aria-invalid="true"]{border-color:#C8262B}
.qz-site-rij .hd-btn{height:56px;padding:0 26px}
.qz-fout{margin-top:10px;font-size:15px;color:#B42318}
.qz-overslaan{margin-top:16px;background:none;border:0;padding:6px 0;font:500 15px var(--body);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qz-overslaan:focus-visible{outline:3px solid rgba(10,125,67,.35);outline-offset:2px}
.qz-chips{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qz-chips .qz-optie{min-height:56px;padding:12px 16px;font-size:16px}
.qz-blok{margin-top:30px;padding-top:24px;border-top:1px solid var(--hair)}
.qz-blok h3{font-family:var(--body);font-weight:700;font-size:18px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.qz-blok p{margin-top:8px}
.qz-link{display:inline-flex;gap:6px;margin-top:12px;font-weight:600;font-size:16px;color:var(--brand)}
.qz-link:hover{text-decoration:underline;text-underline-offset:3px}
.qz-blogs{list-style:none;display:grid;gap:8px;margin-top:14px;padding:0}
.qz-blogs li{display:flex;align-items:center;gap:14px;min-height:52px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;font-size:16px;font-weight:500;color:var(--ink);background:#fff}
.qz-blogs li svg{flex:none;color:var(--brand)}
@media (max-width:820px){
  .qz-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qz-site-rij{flex-direction:column}
  .qz-site-rij input{flex:none}
  .qz-site-rij .hd-btn{width:100%}
  .qz-blogs li{align-items:flex-start}
  .qz-blogs li svg{margin-top:2px}
}
.pp-quiz{margin-top:18px;font-size:16px;line-height:1.5;color:var(--text)}
.pp-quiz a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.qz-box.is-uitslag{max-width:1180px}
.qz-box.is-uitslag .qz-uit{grid-template-columns:minmax(0,1fr) 340px;gap:56px}
.qz-advies{position:sticky;top:112px}
@media (max-width:820px){.qz-box.is-uitslag .qz-uit{grid-template-columns:minmax(0,1fr);gap:28px}.qz-advies{position:static}}
/* quiz: meerdere antwoorden, eigen cijfers en "Wat voor jou kan werken" */
.qz-meer{gap:14px}
.qz-vakje{flex:none;display:grid;place-items:center;width:24px;height:24px;border:1.5px solid #C9D0CB;border-radius:7px;background:#fff;color:#fff;transition:background .15s,border-color .15s}
.qz-vink{opacity:0;transition:opacity .15s}
.qz-meer.is-gekozen .qz-vakje{background:var(--brand);border-color:var(--brand)}
.qz-meer.is-gekozen .qz-vink{opacity:1}
.qz-verder{margin-top:20px;min-width:160px}
.qz-verder:disabled{opacity:.45;cursor:not-allowed}
.qz-cijfer-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.qz-cijfer-rij label{display:grid;gap:8px;font-size:15px;font-weight:600;color:var(--ink)}
.qz-cijfer-rij input{height:56px;padding:0 18px;border:1.5px solid var(--line);border-radius:14px;font:400 18px var(--body);color:var(--ink);background:#fff;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
.qz-cijfer-rij input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(10,125,67,.14)}
.qz-cijfer-knoppen{display:flex;align-items:center;gap:22px;margin-top:20px}
.qz-cijfer-knoppen .qz-overslaan{margin-top:0}
.qz-cijfer-knoppen .hd-btn{min-width:160px}
.qz-werkt{list-style:none;display:grid;gap:10px;margin-top:14px;padding:0}
.qz-werkt li{padding:16px 18px;border-radius:14px;background:var(--mint)}
.qz-werkt b{display:block;font-size:17px;font-weight:700;color:var(--ink)}
.qz-werkt span{display:block;margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--text)}
.qz-uit-l p.qz-noot{font-size:15.5px;color:var(--muted)}
.qz-blok + .qz-noot{margin-top:26px}
@media (max-width:820px){
  .qz-cijfer-rij{grid-template-columns:minmax(0,1fr)}
  .qz-cijfer-knoppen{flex-direction:column;align-items:stretch;gap:8px}
  .qz-verder{width:100%}
}
.qz-vraag legend:focus,.qz-uit h2:focus{outline:0}
.qz-uit-knoppen{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.qz-uit-knoppen .qz-opnieuw{margin-top:0}

/* Vloeiende overgang tussen pagina's van de site (Chrome, Edge, Safari 18+); andere browsers laden gewoon.
   De menubalk heeft een eigen naam, zodat hij blijft staan terwijl de inhoud overvloeit. */
@view-transition{navigation:auto}
.hd-top{view-transition-name:kop}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Smalle telefoons: lange vetgedrukte zinnen mogen afbreken, "Alle artikelen" blijft heel,
   en in het voorbeeld met zoekwoordkansen maakt het zoekvolume plaats voor het zoekwoord */
@media (max-width:520px){.sum .sk p b{white-space:normal}}
.ar-next-head a{white-space:nowrap;flex:none}
@media (max-width:360px){.fx-row i{display:none}}
/* rekenhulp: bandbreedte als hoofdgetal, net als in de brochure */
.ob-main-v b{font-size:clamp(46px,5.6vw,76px)}
.ob-main-v i{font-style:normal;font-family:var(--head);font-size:clamp(26px,2.6vw,36px);color:#CFE3D7}
.ob-main-v{align-items:baseline;column-gap:12px}
/* pakkettentabel: groepskoppen en iets compactere rijen */
.pp-group{padding:34px 0 10px;border-bottom:1px solid #DFE4E1}
.pp-group h3{font-family:var(--body);font-weight:700;font-size:15px;color:var(--muted);text-align:left;letter-spacing:0}
.pp-row{padding:20px 0}


/* pakketten: toelichting onder een regel en per abonnement */
.pp-row p .pp-noot{display:block;margin-top:4px;font-size:15px;font-weight:500;line-height:1.5;color:var(--muted)}
.pp-row div .pp-cel-sub{display:block;margin-top:6px;font-size:12.5px;font-weight:600;line-height:1.3;color:#076536;text-align:center}
.pp-row div:has(.pp-cel-sub){display:flex;flex-direction:column;align-items:center}
@media (max-width:820px){.pp-row div .pp-cel-sub{display:none}}
@media (min-width:821px){.pp-row p .pp-noot-m{display:none}}


/* ---- Zes analyses: de mascotte loopt over een pad van tegels ---- */
.pad{padding:0;overflow-x:clip;background:#fff}
.pad-scroll{position:relative}
.pad-scroll.is-pin{height:calc(100vh + 6 * 48vh)}
.pad-scroll.is-pin .pad-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:76px}
.pad-sticky{padding:72px 0}
.pad-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:40px;align-items:center;width:100%}
.pad-links h2{text-align:left;font-size:48px;line-height:1.04;max-width:13ch}
.pad-sub{font-size:19px;line-height:1.5;color:var(--sub);max-width:44ch;margin-top:16px}
.pad-info{position:relative;min-height:330px;margin-top:0}
.pad-stop{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(18px);transition:opacity .2s ease,transform .3s ease;pointer-events:none}
.pad-stop.is-on{opacity:1;transform:none;pointer-events:auto;transition:opacity .4s ease .18s,transform .6s cubic-bezier(.2,.8,.2,1) .18s}
.pad-stop h3{font-family:var(--head);font-weight:400;font-size:50px;line-height:1.02;letter-spacing:-.035em;color:var(--ink);max-width:13ch}
.pad-stop>p{font-size:19px;line-height:1.5;color:var(--sub);max-width:38ch;margin-top:16px}
.pad-snip{position:relative;max-width:440px;margin-top:22px;background:#fff;border:1px solid #E5E7EB;border-radius:18px;padding:12px 18px;box-shadow:0 1px 2px rgba(15,35,27,.04),0 18px 40px rgba(15,35,27,.08)}
.pad-m{position:absolute;z-index:2;height:auto;pointer-events:none;opacity:0;transform:translateY(30px);transition:opacity .3s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.is-on .pad-m{opacity:1;transform:none;transition-delay:.25s}
.pad-m-duim{width:118px;right:22px;bottom:calc(100% - 10px)}
.pad-m-wijs{width:126px;right:22px;bottom:calc(100% - 10px)}
.pad-m-juich{width:150px;right:-128px;bottom:-14px}
.pad-zw,.pad-bl,.pad-cp{list-style:none;margin:0;padding:0}
.pad-zw li,.pad-bl li,.pad-cp li{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:15.5px;font-weight:500;color:var(--ink)}
.pad-zw li+li,.pad-bl li+li,.pad-cp li+li{border-top:1px solid #EEF1EF}
.pad-zw span,.pad-bl span,.pad-cp span{flex:1;min-width:0}
.pad-zw em{font-style:normal;color:#9CA3AF;text-decoration:line-through;font-variant-numeric:tabular-nums}
.pad-zw svg{width:15px;height:15px;fill:none;stroke:#9CA3AF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pad-zw b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:14px;font-variant-numeric:tabular-nums}
.pad-vraag{margin:4px 0 0 auto;width:max-content;max-width:90%;background:#F3F4F6;border-radius:16px 16px 4px 16px;padding:9px 14px;font-size:15px;font-weight:500;color:var(--ink)}
.pad-antw{display:flex;gap:10px;align-items:flex-start;margin:12px 0 4px;font-size:15.5px;line-height:1.55;color:#1F2937}
.pad-antw img{flex:none;width:28px;height:28px;padding:5px;border-radius:50%;background:#F3F4F6}
.pad-antw mark{background:var(--kiem,#E4F6EB);color:#076536;border-radius:6px;padding:1px 6px;font-weight:700}
.pad-bl b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.pad-bl b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pad-bl .ja{background:#E4F6EB;color:var(--brand)}
.pad-bl .nee{background:#FBF4E4;color:#C98418}
.pad-cp i{flex:none;width:90px;height:8px;border-radius:99px;background:#EEF2EF;overflow:hidden}
.pad-cp s{display:block;height:100%;width:0;border-radius:99px;background:var(--brand);transition:width .9s cubic-bezier(.2,.8,.2,1) .2s}
.is-on .pad-cp s{width:var(--w)}
.pad-cp em{flex:none;width:44px;text-align:right;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.pad-ka{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0}
.pad-ka span{border:1px dashed #D4DBD7;border-radius:10px;padding:7px 11px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:line-through}
.pad-ka b{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;border-radius:999px;padding:7px 13px 7px 9px;font-size:14px;font-weight:700}
.pad-ka b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pad-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0}
.pad-chips span{display:inline-flex;align-items:center;gap:7px;border:1px solid #E5E7EB;border-radius:999px;padding:7px 12px;font-size:14px;font-weight:600;color:var(--ink)}
.pad-dots{display:flex;gap:6px;margin-top:26px}
.pad-dots button{width:30px;height:30px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}
.pad-dots button::before{content:"";width:9px;height:9px;border-radius:99px;background:#D3DBD6;transition:width .25s,background-color .25s}
.pad-dots button[aria-selected="true"]::before{width:26px;background:var(--brand)}
.pad-dots button:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:8px}

/* het bord: zachte tegels van bovenaf, zoals Madde; op ware grootte opgebouwd, dus scherp */
.pad-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pad-bord{position:relative;height:min(620px,calc(100vh - 140px));display:grid;place-items:center}
.pad-vlak{position:relative}
.pad-raster,.pad-lijn{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.pad-raster path{fill:none;stroke:#E8EBE9;stroke-width:2;shape-rendering:crispEdges}
.pad-t{--til:0;position:absolute;background:linear-gradient(160deg,#FFFFFF 0%,#F3F5F4 100%);
  box-shadow:inset 0 0 0 1px rgba(15,35,27,.06),inset 0 -3px 0 rgba(15,35,27,.035),0 1px 1px rgba(15,35,27,.06),0 6px 10px rgba(15,35,27,.06),0 16px 24px -6px rgba(15,35,27,.10);
  transform:translateY(calc(var(--til) * -5px));transition:transform .3s cubic-bezier(.2,.8,.2,1),background .5s,box-shadow .5s}
.pad-t.is-bereikt{background:linear-gradient(160deg,#13A158 0%,#0A7D43 60%,#086B39 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.16),0 1px 1px rgba(10,85,45,.2),0 8px 14px rgba(10,85,45,.18),0 18px 28px -6px rgba(10,85,45,.30)}
.pad-t.is-hier{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.16),0 0 0 7px rgba(10,125,67,.12),0 18px 28px -6px rgba(10,85,45,.30)}
.pad-t.is-sprong{animation:padTegel .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes padTegel{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-16px) scale(1.06)}62%{transform:translateY(2px) scale(.97,1.02)}100%{transform:translateY(0) scale(1)}}
.pad-groen{fill:none;stroke:#0A7D43;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pad-loper{position:absolute;left:0;top:0;z-index:3;will-change:transform}
.pad-loper img{position:absolute;left:calc(var(--tegel,72px) * -.55);top:calc(var(--tegel,72px) * -1.28);width:calc(var(--tegel,72px) * 1.1);max-width:none;height:auto;filter:drop-shadow(0 6px 8px rgba(15,35,27,.18));transform-origin:50% 100%}
.pad-loper.is-links img{transform:scaleX(-1)}
.pad-loper i{position:absolute;left:-20px;top:-8px;width:40px;height:12px;border-radius:50%;background:rgba(15,35,27,.18);filter:blur(2px)}
.pad-loper.is-lopen img{animation:padHup .3s ease-in-out infinite alternate}
.pad-loper.is-lopen.is-links img{animation-name:padHupL}
.pad-loper.is-sprong img{animation:padSprong .6s cubic-bezier(.3,1.4,.5,1)}
.pad-loper.is-sprong.is-links img{animation-name:padSprongL}
@keyframes padHup{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-10px) rotate(5deg)}}
@keyframes padHupL{from{transform:scaleX(-1) translateY(0) rotate(-5deg)}to{transform:scaleX(-1) translateY(-10px) rotate(5deg)}}
@keyframes padSprong{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-46px) scale(1.04) rotate(-6deg)}70%{transform:translateY(0) scale(1.06,.92)}100%{transform:translateY(0) scale(1)}}
@keyframes padSprongL{0%{transform:scaleX(-1) translateY(0)}35%{transform:scaleX(-1) translateY(-46px) rotate(-6deg)}70%{transform:scaleX(-1) translateY(0) scale(1.06,.92)}100%{transform:scaleX(-1) translateY(0)}}

@media (max-width:1024px){
  .pad-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .pad-links{display:contents}
  .pad-links h2{order:1}
  .pad-bord{order:3;height:min(400px,calc(100vw - 8px));margin-top:24px;width:100%}
  .pad-info{order:4;margin-top:4px;min-height:360px}
  .pad-dots{order:5;margin-top:8px;justify-content:center}
  .pad-stop h3{font-size:32px}
  .pad-stop>p{font-size:17px}
  .pad-m-duim{width:96px}.pad-m-wijs{width:104px}
  .pad-m-juich{width:110px;right:-6px;bottom:calc(100% - 4px)}
}
/* Telefoon en tablet: het pad blijft staan terwijl je scrolt, net als op de computer.
   Bord, bolletjes en uitleg staan samen in het midden van het scherm; de hoogte van de
   uitleg zet het script op de hoogste stap. Past het voorbeeld er niet bij, dan valt het weg (pad-compact). */
@media (max-width:1024px){
  .pad-scroll.is-pin{height:calc(100svh + 6 * 55svh)}
  .pad-scroll.is-pin .pad-sticky{height:100svh;padding:64px 0 8px;align-items:center}
  .pad-scroll.is-pin .pad-grid{width:100%}
  .pad-scroll.is-pin .pad-bord{order:2;height:clamp(200px,36svh,330px);margin-top:0}
  .pad-scroll.is-pin .pad-dots{display:flex;order:3;margin-top:0}
  .pad-scroll.is-pin .pad-info{order:4;min-height:0;margin-top:6px}
  .pad-scroll.is-pin .pad-stop h3{font-size:26px}
  .pad-scroll.is-pin .pad-stop>p{font-size:16px;margin-top:8px}
  .pad-scroll.is-pin .pad-snip{margin-top:14px}
  .pad-scroll.is-pin .pad-cta{top:50%;transform:translate(-50%,calc(-50% + 16px));box-shadow:0 10px 30px rgba(15,35,27,.28)}
  .pad-scroll.is-pin.is-oogst .pad-cta{transform:translate(-50%,-50%)}
  .pad-scroll.is-pin.pad-krap .pad-stop h3{font-size:24px}
  .pad-scroll.is-pin.pad-krap .pad-stop>p{font-size:15px;margin-top:6px}
  .pad-scroll.is-pin.pad-krap .pad-snip{margin-top:10px;padding:8px 14px}
  .pad-scroll.is-pin.pad-krap .pad-snip li:nth-child(n+3),.pad-scroll.is-pin.pad-krap .pad-chips>:nth-child(n+4){display:none}
  .pad-scroll.is-pin.pad-krap .pad-antw span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pad-scroll.is-pin.pad-compact .pad-snip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pad-stop,.pad-m,.pad-t,.pad-cp s,.pad-loper{transition:none!important}
  .pad-loper img{animation:none!important}
}
@media (min-width:1025px) and (prefers-reduced-motion:reduce){.pad-info{min-height:360px}}
.pad-info{min-height:470px}
.pad-plek{cursor:pointer}

/* zes analyses: iconen op de bereikte tegels, de oogst-finale en het meekantelen */
.pad-vlak{transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.pad-ic{position:absolute;left:50%;top:50%;width:44%;height:44%;overflow:visible;transform:translate(-50%,-50%) scale(.4);opacity:0;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.is-bereikt .pad-ic{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.15s}
.pad-vrucht{position:absolute;right:-12%;top:-16%;width:30%;height:30%;z-index:2;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE2A3 0,#FFC24A 30%,#EFAE4D 62%,#D98E26 100%);
  box-shadow:0 4px 8px rgba(160,95,10,.35);opacity:0;transform:translateY(10px) scale(.2);transition:opacity .25s,transform .5s cubic-bezier(.3,1.7,.5,1)}
.pad-vrucht::before{content:"";position:absolute;left:46%;top:-30%;width:42%;height:34%;border-radius:0 80% 0 80%;background:linear-gradient(135deg,#5EE59A,#0B8A4A);transform:rotate(-12deg)}
.is-oogst .is-bereikt .pad-vrucht{opacity:1;transform:none;transition-delay:calc(var(--k) * .09s + .1s)}
.is-oogst .pad-groen{animation:padGloed 1.6s ease-in-out .3s 2}
@keyframes padGloed{50%{stroke:#EFAE4D;stroke-width:7}}
.is-oogst .pad-loper .pad-hoofd{animation:padFeest .9s cubic-bezier(.3,1.5,.5,1) .2s 2}
@keyframes padFeest{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-38px) rotate(-10deg) scale(1.06)}55%{transform:translateY(0) scale(1.08,.9)}75%{transform:translateY(-12px) rotate(8deg)}}
.is-oogst .pad-loper.is-links .pad-hoofd{animation-name:padFeestL}
@keyframes padFeestL{0%,100%{transform:scaleX(-1)}30%{transform:scaleX(-1) translateY(-38px) rotate(-10deg) scale(1.06)}55%{transform:scaleX(-1) scale(1.08,.9)}75%{transform:scaleX(-1) translateY(-12px) rotate(8deg)}}
.pad-cta{position:absolute;left:50%;top:calc(100% + 30px);transform:translate(-50%,16px);white-space:nowrap;opacity:0;pointer-events:none;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 26px;border-radius:999px;background:var(--brand);color:#fff;font-weight:700;font-size:17px;text-decoration:none;box-shadow:0 14px 30px rgba(10,125,67,.3);transition:opacity .35s,transform .5s cubic-bezier(.3,1.5,.5,1),background .2s;z-index:4}
.pad-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pad-cta:hover{background:var(--brand-h,#086B39)}
.is-oogst .pad-cta{opacity:1;transform:translate(-50%,0);pointer-events:auto;transition-delay:.7s}
@media (prefers-reduced-motion:reduce){.pad-vlak,.pad-ic,.pad-vrucht,.pad-cta{transition:none}.is-oogst .pad-groen{animation:none}}

/* prijzen: de twee kaarten, wit voor Begin en bosgroen voor Pro */
.pp-card{background:#fff;border:1px solid #E5E7EB;border-radius:26px;padding:34px 30px 30px;box-shadow:0 1px 2px rgba(15,35,27,.04),0 24px 50px -18px rgba(15,35,27,.16)}
.pp-a{background:#fff}
.pp-b{background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:0 30px 60px -20px rgba(15,35,27,.45)}
.pp-b h2,.pp-b .pp-price{color:#fff}
.pp-b .pp-for,.pp-b .pp-pm,.pp-b .pp-year{color:rgba(255,255,255,.72)}
.pp-for{margin-bottom:22px}
.pp-pop{top:-14px;left:30px;font-size:13px;font-weight:700;padding:6px 14px}
.pp-a .pp-pop{background:#F1F3F2;color:var(--ink);box-shadow:inset 0 0 0 1px #E5E7EB}
.pp-b .pp-pop{background:var(--amber);color:#12251B}
.pp-incl{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:11px}
.pp-incl li{display:flex;align-items:flex-start;gap:11px;font-size:16px;line-height:1.4;font-weight:500}
.pp-incl svg{flex:none;width:20px;height:20px;padding:4px;border-radius:50%;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.pp-a .pp-incl svg{background:#E4F6EB;stroke:var(--brand)}
.pp-b .pp-incl svg{background:rgba(255,255,255,.12);stroke:var(--amber)}
.pp-b .pp-incl li{color:#fff}
.pp-a .pp-btn{background:var(--deep)}
.pp-b .pp-btn{background:var(--amber);color:#12251B}
.pp-b .pp-btn:hover{background:#F4BE6A}
.pp-yes.is-a{background:#EEF1EF}
.pp-top .pp-card{align-self:stretch}

/* hero: afspeelknop voor de video, links van de demoknop */
.hd-play{width:46px;height:46px;flex:none;align-self:center;border-radius:50%;border:1px solid #1D1D26;padding:0;cursor:pointer;display:grid;place-items:center;background:#fff;color:var(--hd-brand,#0A7D43);transition:transform .2s,background .2s}
.hd-play svg{width:20px;height:20px;fill:currentColor;display:block}
.hd-play:hover{transform:scale(1.06);background:#F4F7F5}
.hd-play:focus-visible{outline:2px solid var(--hd-brand,#0A7D43);outline-offset:4px}
.vid{margin:auto;border:0;padding:0;background:transparent;width:min(1100px,calc(100vw - 32px));max-width:none;overflow:visible}
.vid::backdrop{background:rgba(15,35,27,.78);backdrop-filter:blur(4px)}
.vid video{display:block;width:100%;aspect-ratio:16/9;border-radius:18px;background:#0F231B;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.vid-x{position:absolute;right:0;top:-54px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.vid-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media (max-width:700px){.hd-ctas .hd-play{align-self:center}}
/* de afspeelknop telt niet mee bij het centreren: de twee knoppen staan precies in het midden, de afspeelknop ernaast */
.hd-ctas .hd-play{margin-left:-58px}
@media (max-width:700px){.hd-ctas .hd-play{margin-left:0}}
@media (max-width:1100px) and (min-width:821px){.hd-hero h1{font-size:54px}}
.pad-t.is-hier .pad-vrucht{display:none}

/* pakkettabel: schakelaar "Alleen de verschillen" en een kop die blijft staan */
.pp-thead{position:sticky;top:0;z-index:20;background:#fff;padding-top:14px;transition:box-shadow .2s}
.pp-thead.is-vast{box-shadow:0 12px 20px -14px rgba(15,35,27,.25)}
.pp-th-l{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px}
.pp-th{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.pp-th b{font-size:17px;font-weight:700;color:var(--ink)}
.pp-th-p{font-size:14px;font-weight:500;color:var(--muted)}
.pp-btn.pp-th-btn{height:34px;margin-top:8px;padding:0 16px;font-size:14px;border-radius:999px}
.pp-th.is-pro .pp-th-btn{background:var(--amber);color:#12251B}
.pp-schakel{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:4px 0;cursor:pointer;font:inherit;font-size:15px;font-weight:600;color:var(--ink)}
.pp-sw{position:relative;width:40px;height:24px;border-radius:999px;background:#D5DCD8;transition:background .2s}
.pp-sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.pp-schakel[aria-checked="true"] .pp-sw{background:var(--brand)}
.pp-schakel[aria-checked="true"] .pp-sw::after{transform:translateX(16px)}
.pp-schakel:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:8px}
.alleen-verschil .pp-row.is-gelijk{display:none}
@media (max-width:820px){
  .pp-th b{font-size:13px}.pp-th-p{font-size:12px;line-height:1.2}.pp-btn.pp-th-btn{display:none}
  .pp-th-l h2{width:100%}
}

/* opbrengst: rustiger, één kolom van boven naar beneden */
.ob-stat-hl{background:var(--brand);border-color:var(--brand)}
.ob-stat-hl span,.ob-stat-hl small{color:rgba(255,255,255,.8)}
.ob-stat-hl b{color:#fff}
.ob-stat-hl em{color:#fff}
.ob-why{padding:8px 4px 0}
.ob-why h3{font-family:var(--head);font-weight:400;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.ob-why ul{list-style:none;margin:14px 0 0;padding:0}
.ob-why li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.ob-why li:first-child{border-top:0}
.ob-why i{flex:none;width:26px;height:26px;border-radius:50%;background:#E4F6EB;display:grid;place-items:center;margin-top:1px}
.ob-why i svg{width:15px;height:15px;fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ob-why p{font-size:16px;line-height:1.55;color:var(--text)}
.ob-why p b{color:var(--ink);font-weight:700}
.ob-why p em{font-style:normal;font-weight:700;color:var(--ink);white-space:nowrap}
.ob-cta{border:0;background:none;padding:6px 0 0;justify-content:flex-start}
.ob-cta p{font-size:15px;color:var(--muted)}
.ob-cta p a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.ob-cta{flex-direction:column;align-items:stretch}.ob-cta .hd-btn{width:100%;justify-content:center}}

/* ---- Quiz-uitslag: één heldere uitkomst, cijfers, wat werkt, eerste blogs ---- */
.qz-box.is-uitslag .qz-uit.qr{display:block}
.qr-held{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding:40px 44px 0;border-radius:28px;background:linear-gradient(160deg,#EAF7EF 0%,#F6FBF8 60%,#fff 100%);border:1px solid #DDEFE4;overflow:hidden}
.qr-held-t{padding-bottom:40px;max-width:640px}
.qr-label{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #CFE9D9;border-radius:999px;padding:6px 14px 6px 7px;font-size:14px;font-weight:700;color:#076536}
.qr-label i{width:22px;height:22px;border-radius:50%;background:var(--brand);display:grid;place-items:center}
.qr-label svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.qr-twijfel .qr-label,.qr-niet .qr-label{color:#7A4E07;border-color:#F1DFB8}
.qr-twijfel .qr-label i,.qr-niet .qr-label i{background:var(--amber)}
.qr .qr-held h2{margin:0;font-size:clamp(34px,4.2vw,54px);line-height:1.02;letter-spacing:-.03em}
.qr-held p{margin-top:14px;font-size:18px;line-height:1.55;color:var(--text)}
.qr-masc{display:block;width:210px;height:auto;margin-bottom:-6px}
.qr-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start;margin-top:40px}
.qr-blok{padding-top:30px;margin-top:30px;border-top:1px solid var(--hair)}
.qr-blok:first-child{padding-top:0;margin-top:0;border-top:0}
.qr-blok h3{font-family:var(--head);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.02em;color:var(--ink);word-spacing:.06em}
.qr-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.qr-tegel{border:1px solid var(--line);border-radius:18px;padding:20px 20px 18px;background:#fff;display:grid;gap:8px;align-content:start}
.qr-tegel b{font-family:var(--head);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.qr-tegel span{font-size:14px;line-height:1.45;color:var(--muted)}
.qr-tegel.is-geld{background:var(--deep);border-color:var(--deep)}
.qr-tegel.is-geld b{color:#fff}
.qr-tegel.is-geld span{color:rgba(255,255,255,.72)}
.qr-basis{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.qr-basis .qz-link{margin-top:0;margin-left:4px;font-size:14.5px}
.qr-nu{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--text)}
.qr-nu b{color:var(--ink)}
.qr-werkt{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin:18px 0 0;padding:0}
.qr-werkt li{display:flex;gap:14px;align-items:flex-start}
.qr-werkt i{flex:none;width:30px;height:30px;border-radius:10px;background:#E4F6EB;display:grid;place-items:center}
.qr-werkt i svg{width:16px;height:16px;fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.qr-werkt b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16.5px;line-height:1.35;color:var(--ink)}
.qr-werkt span{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--muted)}
.qr-pro{font-style:normal;font-size:12px;font-weight:700;color:#12251B;background:var(--amber);border-radius:999px;padding:2px 9px}
.qr-blogs{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0;padding:0}
.qr-blogs li{display:flex;flex-direction:column;gap:10px;min-height:150px;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,35,27,.04),0 14px 30px -18px rgba(15,35,27,.2);font-family:var(--head);font-size:19px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.qr-blogs small{align-self:flex-start;font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:0;color:#076536;background:#E4F6EB;border-radius:999px;padding:4px 10px}
.qr-weten ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.qr-weten li{position:relative;padding-left:18px;font-size:15px;line-height:1.55;color:var(--muted)}
.qr-weten li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:#C5D1CA}
.qr-weten h3{font-size:20px}
.qr-advies{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;gap:12px;box-shadow:0 2px 6px rgba(15,35,27,.04),0 30px 60px -28px rgba(15,35,27,.3);position:sticky;top:112px;overflow:hidden}
.qr-advies::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--brand)}
.qr-advies-k{font-size:13px;font-weight:700;color:var(--muted);text-transform:none}
.qr .qz-pakket{font-size:48px;line-height:1;letter-spacing:-.035em}
.qr .qz-prijs{font-size:16px;color:var(--muted)}
.qr .qz-prijs b{font-family:var(--head);font-weight:400;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.qr .qz-waarom{font-size:15px;line-height:1.55;color:var(--text);padding-bottom:6px;border-bottom:1px solid var(--hair);margin-bottom:6px}
@media (max-width:980px){
  .qr-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .qr-advies{position:static;order:-1}
  .qr-tegels,.qr-blogs{grid-template-columns:minmax(0,1fr)}
  .qr-blogs li{min-height:0}
}
@media (max-width:640px){
  .qr-held{grid-template-columns:minmax(0,1fr);padding:28px 22px 0;border-radius:22px}
  .qr-held-t{padding-bottom:0}
  .qr-masc{width:150px;justify-self:end;margin-top:-10px}
  .qr-werkt{grid-template-columns:minmax(0,1fr)}
  .qr .qz-pakket{font-size:40px}
}
.qr-tegels{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,.8fr)}
.qr-tegel.is-geld b{font-size:clamp(24px,2.3vw,30px)}
.qr-blok{padding-top:26px;margin-top:26px}
.qr-blok{padding-bottom:0}
.qr-tegels{grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,.7fr)}
.qr-tegel b{font-size:clamp(22px,2.1vw,28px)}