/* =========================================================
   Marketing Helden: componenten voor alle pagina's
   Bouwt voort op base.css (goedgekeurde homepage, huisstijl v2.0 "Warm donker").
   ========================================================= */

/* ---------- header: navigatie, dropdown, mobiel menu ---------- */
.nav{gap:24px}
.nav .menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
.nav .menu > li{position:relative}
.nav .menu a,.nav .menu .dd-btn{display:inline-flex;align-items:center;gap:6px;color:var(--on-dark-soft);text-decoration:none;font:500 var(--fs-md) var(--f-body);padding:10px 11px;border-radius:8px;background:none;border:0;cursor:pointer;min-height:44px}
.nav .menu a:hover,.nav .menu .dd-btn:hover,.nav .menu a[aria-current="page"],.nav .menu .dd-btn.is-current{color:var(--on-dark)}
.nav .menu a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--amber);border-radius:0}
.dd-btn svg{transition:transform .15s}
.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;background:var(--night-2);border:1px solid var(--line-dark);border-radius:12px;padding:8px;list-style:none;margin:0;box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.dd a{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:2px!important;padding:10px 12px!important;width:100%}
.dd a span{font-size:var(--fs-xs);color:var(--on-dark-soft)}
.dd a:hover{background:#322D27}
.nav .contact-link{color:var(--on-dark-soft);text-decoration:none;font-size:var(--fs-md);font-weight:500;padding:10px 6px}
.nav .contact-link:hover{color:var(--on-dark)}
.menu-toggle{display:none;position:relative;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;padding:0;margin-left:-10px;color:var(--on-dark);cursor:pointer}
.menu-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m-icons{display:none}
.m-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--on-dark);text-decoration:none}
.m-ico:hover{background:#322D27}
.m-ico.wa{color:#25D366}
.mobile-panel{display:none}
@media (max-width:1180px){
  .nav{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;height:64px}
  .nav .menu-wrap,.nav .menu,.nav .contact-link,.nav > .btn{display:none}
  .menu-toggle{display:inline-flex;justify-self:start}
  .nav .logo{justify-self:center}
  .nav .logo img{height:26px;width:auto}
  .m-icons{display:flex;justify-self:end;gap:2px;margin-right:-10px}
  .mobile-panel{display:block;position:fixed;inset:calc(64px + env(safe-area-inset-top,0px)) 0 0 0;background:var(--night);overflow-y:auto;z-index:49;padding-block:16px 40px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .mobile-panel[hidden]{display:none!important}
  .mobile-panel ul{list-style:none;margin:0;padding:0}
  .mobile-panel li a{display:flex;justify-content:space-between;padding:15px 4px;border-bottom:1px solid var(--line-dark);color:var(--on-dark);text-decoration:none;font:600 var(--fs-lg) var(--f-body)}
  .mobile-panel .sub a{font-weight:500;font-size:var(--fs-ui);color:var(--on-dark-soft);padding-left:18px}
  .mobile-panel .label{display:block;font-size:var(--fs-xs);color:var(--on-dark-mute);padding:20px 4px 6px;font-weight:600}
  .mobile-panel .btn{width:100%;justify-content:center;margin-top:24px;background:var(--amber);color:var(--night)}
  body.menu-open{overflow:hidden}
}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:var(--fs-sm);color:var(--on-dark-soft);margin-bottom:22px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--soft)}
.crumbs a{color:var(--on-dark-soft)}
.crumbs [aria-current]{color:var(--on-dark)}

/* ---------- pagina-hero (subpagina's) ---------- */
.page-hero h1{max-width:20ch}
.page-hero .lede{max-width:62ch}
.page-hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.page-hero .price-tag{display:inline-flex;align-items:baseline;gap:8px;margin-top:26px;border:1px solid var(--line-dark);border-radius:12px;padding:12px 18px}
.page-hero .price-tag b{font-family:var(--f-head);font-weight:800;font-size:var(--fs-3xl);color:var(--amber);letter-spacing:-.02em}
.page-hero .price-tag span{font-size:var(--fs-sm);color:var(--on-dark-soft)}
.page-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:900px){.page-hero-grid{grid-template-columns:1fr}}

/* ---------- algemene tekstblokken ---------- */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.split2 > *{min-width:0}
.stack{display:flex;flex-direction:column;gap:18px}
.band.dark .stack p{color:var(--on-dark-soft)}
@media (max-width:860px){.split2{grid-template-columns:1fr}}
.prose{max-width:70ch}
.prose h2{font-size:clamp(26px,2.8vw,34px);margin:48px 0 14px}
.prose h3{font-size:var(--fs-xl);margin:30px 0 10px}
.prose p,.prose li{font-size:var(--fs-base);line-height:1.7}
.prose p+p{margin-top:14px}
.prose ul,.prose ol{padding-left:22px;display:flex;flex-direction:column;gap:6px}
.prose a{color:var(--ink);text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose strong{color:var(--ink)}
.note{font-size:var(--fs-sm);color:var(--soft);border-left:3px solid var(--rule);padding-left:14px}
.band.dark .note{color:var(--on-dark-soft);border-left-color:var(--line-dark)}

/* ---------- inbegrepen / niet inbegrepen ---------- */
.incl{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.incl > div{border-radius:var(--r-card);padding:30px;min-width:0}
.incl .yes{background:var(--paper);border:1px solid var(--rule)}
.incl .no{background:transparent;border:1px dashed var(--rule)}
.incl h3{font-size:var(--fs-lg);margin-bottom:16px}
.incl ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.incl li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:var(--fs-ui);line-height:1.45;color:var(--ink)}
.incl .yes li::before{content:"✓";color:var(--ok);font-weight:700}
.incl .no li::before{content:"–";color:var(--soft);font-weight:700}
.incl .no li{color:var(--body)}
@media (max-width:820px){.incl{grid-template-columns:1fr}}

/* ---------- vier pakketkaarten ---------- */
.p4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.pk{display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:26px 24px;min-width:0}
.pk .who{font-size:var(--fs-xs);font-weight:600;color:var(--ink)}
.pk h3{font-size:var(--fs-xl)}
.pk .fit{margin:-6px 0 0;font:500 var(--fs-2xs)/1.4 var(--f-mono);color:var(--soft)}
.pk.feat .fit{color:var(--on-dark-soft)}
.pk .amt{font-family:var(--f-head);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.pk .amt small{display:block;font-family:var(--f-body);font-weight:500;font-size:var(--fs-xs);letter-spacing:0;color:var(--soft);margin-top:8px}
.pk .diff{font-size:var(--fs-md);line-height:1.5;color:var(--body);padding-bottom:14px;border-bottom:1px solid var(--rule)}
.pk ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pk li{display:grid;grid-template-columns:16px 1fr;gap:8px;font-size:var(--fs-sm);line-height:1.45;color:var(--ink)}
.pk li::before{content:"✓";color:var(--ok);font-weight:700}
.pk .go{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:10px}
.pk .go .btn{justify-content:center}
.pk .go a.more{font-size:var(--fs-sm);font-weight:600;color:var(--ink);text-align:center}
.pk.feat{background:var(--night);border-color:var(--night);color:var(--on-dark-soft);position:relative;box-shadow:0 30px 60px -36px rgba(29,27,24,.7)}
.pk.feat h3,.pk.feat .amt,.pk.feat li{color:var(--on-dark)}
.pk.feat .who{color:var(--amber)}
.pk.feat .amt small,.pk.feat .diff{color:var(--on-dark-soft)}
.pk.feat .diff{border-bottom-color:var(--line-dark)}
.pk.feat li::before{color:var(--amber)}
.pk.feat .btn-primary{background:var(--amber);color:var(--night)}
.pk.feat .go a.more{color:var(--amber)}
.pk.feat .flag{position:absolute;top:-12px;left:24px;background:var(--amber);color:var(--night);font-size:var(--fs-2xs);font-weight:700;padding:5px 11px;border-radius:999px}
.p4-foot{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;align-items:baseline;border-top:1px solid var(--rule);padding-top:20px;font-size:var(--fs-md)}
.p4-foot a{font-weight:600;color:var(--ink)}
@media (max-width:1100px){.p4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.p4{grid-template-columns:1fr}.pk.feat{order:-1}}

/* ---------- vergelijkingstabel ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper)}
table.cmp{border-collapse:collapse;width:100%;min-width:760px;font-size:var(--fs-md)}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
table.cmp thead th{font-family:var(--f-head);font-size:var(--fs-ui);color:var(--ink);background:var(--cream-2)}
table.cmp thead th.feat{background:var(--night);color:var(--on-dark)}
table.cmp td.feat{background:#F6F0E4}
table.cmp tbody th{font-weight:600;color:var(--ink);width:26%}
table.cmp td{color:var(--body)}
table.cmp .y{color:var(--ok);font-weight:700}
table.cmp .n{color:var(--soft)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}

/* ---------- funnelflow (5 stappen) ---------- */
.flow{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:f}
.flow li{position:relative;padding:22px 22px 22px 0;display:flex;flex-direction:column;gap:8px;min-width:0}
.flow li::before{counter-increment:f;content:counter(f);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--amber);color:var(--night);font:700 var(--fs-ui) var(--f-head);margin-bottom:6px;position:relative;z-index:1}
.flow li::after{content:"";position:absolute;top:42px;left:44px;right:4px;height:2px;background:repeating-linear-gradient(90deg,var(--line-dark) 0 8px,transparent 8px 14px)}
.flow li:last-child::after{display:none}
.flow strong{font-family:var(--f-head);font-size:var(--fs-xl);color:var(--on-dark)}
.flow span{font-size:var(--fs-md);color:var(--on-dark-soft);line-height:1.5}
@media (max-width:900px){.flow{grid-template-columns:1fr}.flow li{padding:0 0 26px 58px}.flow li::before{position:absolute;left:0;top:0}.flow li::after{left:19px;top:44px;bottom:2px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line-dark) 0 8px,transparent 8px 14px)}}

/* ---------- vier fasen ---------- */
.phases{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.phases li{padding:24px 24px 4px 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.phases li+li{padding-left:24px;border-left:1px solid var(--rule)}
.phases .n{font-family:var(--f-head);font-weight:800;font-size:var(--fs-md);color:var(--ink)}
.phases h3{font-size:var(--fs-xl)}
.phases p{font-size:var(--fs-md)}
.phases .out{font-size:var(--fs-sm);color:var(--soft);margin-top:auto}
@media (max-width:900px){.phases{grid-template-columns:1fr 1fr}.phases li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:560px){.phases{grid-template-columns:1fr}.phases li,.phases li+li{padding:20px 0;border-left:0;border-bottom:1px solid var(--rule)}}
.band.dark .phases{border-top-color:var(--line-dark)}.band.dark .phases li+li{border-left-color:var(--line-dark)}.band.dark .phases .n{color:var(--amber)}.band.dark .phases h3{color:var(--on-dark)}
@media (max-width:560px){.band.dark .phases li,.band.dark .phases li+li{border-bottom-color:var(--line-dark)}}

/* ---------- drie leadroutes ---------- */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.path{background:var(--night-2);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:26px;min-width:0}
.band:not(.dark) .path{background:var(--paper);border-color:var(--rule)}
.path h3{font-size:var(--fs-lg);margin-bottom:6px}
.path .intent{font-size:var(--fs-sm);color:var(--on-dark-soft);margin-bottom:18px}
.band:not(.dark) .path .intent{color:var(--soft)}
.path ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.path li{position:relative;padding:0 0 16px 26px;font-size:var(--fs-md);color:var(--on-dark)}
.band:not(.dark) .path li{color:var(--ink)}
.path li::before{content:"";position:absolute;left:4px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.path li::after{content:"";position:absolute;left:8px;top:18px;bottom:2px;width:1px;background:var(--line-dark)}
.band:not(.dark) .path li::after{background:var(--rule)}
.path li:last-child{padding-bottom:0}
.path li:last-child::after{display:none}
.path li.client{color:var(--amber)}
.band:not(.dark) .path li.client{color:var(--ink);font-weight:600}
.path li.client::before{background:transparent;border:2px solid var(--amber);width:7px;height:7px}
@media (max-width:900px){.paths{grid-template-columns:1fr}}

/* ---------- zeven stappen + routekeuze ---------- */
.route-pick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 34px}
.route-pick button{font:600 var(--fs-md) var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:11px 18px;cursor:pointer;min-height:44px}
.route-pick button[aria-pressed="true"]{background:var(--night);color:var(--cream);border-color:var(--night)}
.route-pick button:hover{border-color:var(--ink)}
.route-sum{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:22px 26px;margin-bottom:28px;display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:baseline}
.route-sum b{font-family:var(--f-head);font-size:var(--fs-3xl);color:var(--ink);letter-spacing:-.02em}
.route-sum p{font-size:var(--fs-ui)}
@media (max-width:640px){.route-sum{grid-template-columns:1fr}}
.steps7{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.steps7 > li{display:grid;grid-template-columns:64px 1fr;gap:24px;position:relative;padding-bottom:34px}
.steps7 > li::after{content:"";position:absolute;left:27px;top:58px;bottom:6px;width:2px;background:var(--rule)}
.steps7 > li:last-child::after{display:none}
.steps7 .mk{width:56px;height:56px;border-radius:50%;background:var(--night);color:var(--amber);display:grid;place-items:center;font:800 var(--fs-xl) var(--f-head)}
.steps7 h3{font-size:var(--fs-2xl);margin:12px 0 8px}
.steps7 p{font-size:var(--fs-ui);max-width:66ch}
.steps7 .var{margin-top:12px;background:#F6F0E4;border-left:3px solid var(--amber);padding:12px 16px;border-radius:0 8px 8px 0;font-size:var(--fs-md);color:var(--ink);max-width:66ch}
.steps7 .var b{color:var(--ink)}
.steps7 .out{margin-top:10px;font-size:var(--fs-sm);color:var(--soft)}
.steps7 .out b{color:var(--ink)}
@media (max-width:560px){.steps7 > li{grid-template-columns:44px 1fr;gap:16px}.steps7 .mk{width:44px;height:44px;font-size:var(--fs-base)}.steps7 > li::after{left:21px;top:46px}}

/* ---------- dashboard demo ---------- */
.demo-flag{display:inline-flex;align-items:center;gap:8px;background:#3A2E14;color:#F2C46B;border:1px solid #6B5320;font:600 var(--fs-2xs) var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:6px}
.band:not(.dark) .demo-flag{background:#FFF3D6;color:#7A5410;border-color:#E8C77A}
.dash{background:#F7F4EE;color:var(--ink);border-radius:18px;overflow:hidden;border:1px solid var(--rule-soft);box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.dash-top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:16px 22px;background:var(--paper);border-bottom:1px solid var(--rule-soft)}
.dash-top .title{display:flex;flex-direction:column;gap:2px}
.dash-top .title b{font-family:var(--f-head);font-size:var(--fs-lg)}
.dash-top .title span{font-size:var(--fs-xs);color:var(--soft)}
.dash-ctrl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.seg-tabs{display:inline-flex;background:var(--cream-2);border-radius:999px;padding:3px}
.seg-tabs button{font:600 var(--fs-sm) var(--f-body);border:0;background:none;color:var(--body);padding:8px 14px;border-radius:999px;cursor:pointer;min-height:36px}
.seg-tabs button[aria-selected="true"]{background:var(--night);color:var(--cream)}
.dash-ctrl select{font:500 var(--fs-sm) var(--f-body);border:1px solid var(--rule);border-radius:999px;padding:8px 14px;background:#fff;color:var(--ink);min-height:36px}
.dash-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:16px}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--rule-soft);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi span{font-size:var(--fs-2xs);color:var(--soft);font-weight:600}
.kpi b{font-family:var(--f-head);font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;font-size:var(--fs-2xs);color:var(--soft)}
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.panel{background:#fff;border:1px solid var(--rule-soft);border-radius:12px;padding:16px 18px;min-width:0}
.panel h3,.panel h4{margin:0 0 10px;font:700 var(--fs-md) var(--f-head);color:var(--ink)}
.panel .sum{font-size:var(--fs-2xs);color:var(--soft);margin-top:8px}
.chart-svg{width:100%;height:auto;display:block}
.bars{display:flex;flex-direction:column;gap:10px}
.bars .row{display:grid;grid-template-columns:110px 1fr 44px;gap:10px;align-items:center;font-size:var(--fs-xs)}
.bars .track{height:10px;background:#EFE9DD;border-radius:5px;overflow:hidden}
.bars .track i{display:block;height:100%;background:var(--navy);border-radius:5px}
.bars .row b{text-align:right;font-variant-numeric:tabular-nums}
.fun{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.fun div{background:#EEF1F6;border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.fun div:nth-child(1){background:var(--ink);color:#fff}
.fun div:nth-child(2){background:#3C5280;color:#fff}
.fun div:nth-child(3){background:#5873A5;color:#fff}
.fun div:nth-child(4){background:#C9D3E6}
.fun span{font-size:var(--fs-2xs);font-weight:600;opacity:.9}
.fun b{font:800 var(--fs-lg) var(--f-head);font-variant-numeric:tabular-nums}
.worklog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.worklog li{display:grid;grid-template-columns:18px 1fr auto;gap:8px;font-size:var(--fs-xs);align-items:baseline}
.worklog li::before{content:"✓";color:var(--ok);font-weight:700}
.worklog em{font-style:normal;font-size:var(--fs-2xs);color:var(--soft)}
.prio{margin:0;padding-left:18px;font-size:var(--fs-xs);display:flex;flex-direction:column;gap:6px}
.dash-foot{font-size:var(--fs-2xs);color:var(--soft);padding:0 22px 18px}
@media (max-width:980px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.dash-grid{grid-template-columns:1fr}}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.fun{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-top,.dash-body{padding-left:14px;padding-right:14px}.bars .row{grid-template-columns:84px 1fr 36px}}
.dash-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:700px){.dash-mini{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- marketingcheck wizard ---------- */
.wiz{background:var(--paper);border:1px solid var(--rule);border-radius:18px;padding:clamp(22px,4vw,40px);max-width:820px}
.wiz-progress{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.wiz-progress .lbl{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--soft);font-weight:600}
.wiz-progress .trk{height:6px;background:var(--cream-2);border-radius:3px;overflow:hidden}
.wiz-progress .trk i{display:block;height:100%;background:var(--amber);transition:width .25s}
.wiz fieldset{border:0;margin:0 0 26px;padding:0}
.wiz legend{font-family:var(--f-head);font-weight:700;font-size:var(--fs-xl);color:var(--ink);margin-bottom:6px;padding:0}
.wiz .help{font-size:var(--fs-sm);color:var(--soft);margin-bottom:14px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opts label{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--rule);background:#fff;border-radius:12px;padding:14px 16px;cursor:pointer;font-size:var(--fs-md);color:var(--ink);line-height:1.4;min-height:52px}
.opts label:hover{border-color:var(--soft)}
.opts label:has(input:checked){border-color:var(--ink);background:var(--cream);box-shadow:inset 0 0 0 1px var(--ink)}
.opts input{margin-top:3px;accent-color:var(--navy);flex:none;width:18px;height:18px}
.opts small{display:block;font-size:var(--fs-xs);color:var(--soft);margin-top:2px}
@media (max-width:600px){.opts{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label,.field .lab{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.field .opt{font-weight:400;color:var(--soft)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],.field textarea,.field select{font:400 var(--fs-ui) var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:10px;padding:13px 14px;width:100%;min-width:0}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid var(--amber);outline-offset:1px;border-color:var(--ink)}
.field .err{font-size:var(--fs-sm);color:var(--err);display:none}
.field.has-err input,.field.has-err textarea,.field.has-err select{border-color:var(--err)}
.field.has-err .err{display:block}
.fs-err{font-size:var(--fs-sm);color:var(--err);margin-top:8px;display:none}
fieldset.has-err .fs-err{display:block}
.check-inline{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-md);color:var(--body)}
.check-inline input{margin-top:3px;width:18px;height:18px;accent-color:var(--navy)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:600px){.grid2{grid-template-columns:1fr}}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:22px;margin-top:8px}
.wiz-nav .btn[hidden]{display:none}
.result{background:var(--night);color:var(--on-dark-soft);border-radius:14px;padding:26px 28px;margin-bottom:26px}
.result .k{font-size:var(--fs-sm);color:var(--amber);font-weight:600}
.result h3{color:var(--on-dark);font-size:clamp(24px,2.6vw,32px);margin:6px 0 8px}
.result p{color:var(--on-dark-soft)}
.result .links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px}
.result .links a{color:var(--amber);font-weight:600}
.form-status{border-radius:12px;padding:16px 18px;font-size:var(--fs-md);line-height:1.5;margin-top:16px}
.form-status.demo{background:#FFF3D6;border:1px solid #E8C77A;color:#5A3E08}
.form-status.err{background:#FBE9E6;border:1px solid #E5B4AA;color:#7A2414}
.form-card{background:var(--paper);border:1px solid var(--rule);border-radius:18px;padding:clamp(22px,4vw,36px)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- concept-banner (juridisch, noindex) ---------- */
.concept{background:#FFF3D6;border-bottom:1px solid #E8C77A;color:#5A3E08;font-size:var(--fs-md)}
.concept .wrap{padding-block:14px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.concept b{font-weight:700}
.todo{display:inline-block;background:#FFF3D6;border:1px dashed #C99A3A;color:#5A3E08;font-size:var(--fs-sm);padding:2px 8px;border-radius:6px}

/* ---------- kennisbank ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:26px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--body);min-width:0;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--ink);transform:translateY(-2px)}
.card .cat{font-size:var(--fs-xs);font-weight:600;color:var(--ink)}
.card h3{font-size:var(--fs-xl);color:var(--ink)}
.card p{font-size:var(--fs-md)}
.card .rd{margin-top:auto;font-weight:600;color:var(--ink);font-size:var(--fs-md)}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* ---------- voor wie: twee routes ---------- */
.routes2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:40px}
.route{border-radius:var(--r-card);padding:32px;display:flex;flex-direction:column;gap:14px;min-width:0}
.route.main{background:var(--night);color:var(--on-dark-soft)}
.route.main h3{color:var(--on-dark)}
.route.alt{background:var(--paper);border:1px solid var(--rule)}
.route h3{font-size:var(--fs-2xl)}
.route ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-md)}
.route .btn{align-self:flex-start;margin-top:auto}
.route.main .btn-primary{background:var(--amber);color:var(--night)}
@media (max-width:820px){.routes2{grid-template-columns:1fr}}

/* ---------- content + tracking ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.duo > div{display:flex;flex-direction:column;gap:14px;min-width:0;border-top:2px solid var(--ink);padding-top:22px}
.duo .lnk{font-weight:600;color:var(--ink)}
@media (max-width:820px){.duo{grid-template-columns:1fr}}

/* ---------- slot-CTA ---------- */
.cta-band{background:var(--night);color:var(--on-dark-soft)}
.cta-band .inner{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.cta-band h2{color:var(--on-dark)}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.cta-band .btn-primary{background:var(--amber);color:var(--night)}
.cta-band .btn-ghost{color:var(--on-dark);border-color:var(--line-dark)}
@media (max-width:820px){.cta-band .inner{grid-template-columns:1fr}.cta-band .acts{justify-content:flex-start}}

/* ---------- footer ---------- */
footer.site-foot{background:var(--night);color:var(--on-dark-soft);border-top:1px solid var(--line-dark);padding-block:56px 32px;font-size:var(--fs-md)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-grid h2{font:700 var(--fs-md) var(--f-head);color:var(--on-dark);margin:0 0 12px;letter-spacing:0}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot-grid a{color:var(--on-dark-soft);text-decoration:none}
.foot-grid a:hover{color:var(--on-dark);text-decoration:underline}
.foot-brand img{height:30px;width:auto;margin-bottom:16px}
.foot-brand p{font-size:var(--fs-sm);max-width:34ch}
.foot-base{margin-top:40px;padding-top:20px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:var(--fs-xs);color:var(--on-dark-mute)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- hulpklassen ---------- */
.mt0{margin-top:0}.mt24{margin-top:24px}.mt40{margin-top:40px}
.center{text-align:center}
.lnk-arrow{font-weight:600;color:var(--ink);text-decoration:none}
.lnk-arrow:hover{text-decoration:underline}
.band.dark .lnk-arrow{color:var(--amber)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--amber);color:var(--night);padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:12px}
.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}
.wiz legend[tabindex],.wiz h3[tabindex]{outline:none}
.split2.form-layout{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);gap:clamp(28px,4vw,64px)}
@media (max-width:960px){.split2.form-layout{grid-template-columns:1fr}}
.form-layout aside .btn{white-space:normal;text-align:left}
.wiz fieldset,.wiz .opts,.wiz .opts label{min-width:0}
.opts label{overflow-wrap:anywhere}
@media (max-width:420px){.wiz{padding:20px 16px}}
/* header: rustiger op 1180-1440 px */
.nav .menu a,.nav .menu .dd-btn{white-space:nowrap;padding:10px 9px;font-size:var(--fs-sm)}
.nav > .btn{white-space:nowrap}
.nav .contact-link{white-space:nowrap}
@media (max-width:1360px){.nav{gap:16px}.nav img{height:28px}}
/* kruimelpad: niet de pill-stijl van .page-hero nav overnemen */
.page-hero nav.crumbs{display:block;margin-top:0}
.page-hero .crumbs a{border:0;padding:0;border-radius:0;font-size:var(--fs-sm);color:var(--on-dark-soft);text-decoration:underline;text-underline-offset:3px}
.page-hero .crumbs a:hover{color:var(--amber)}
/* hero-kop iets compacter: langere kop dan de oude */
.hero h1{font-size:clamp(42px,5.6vw,80px)}
.opts label span{display:block}
.foot-contact{font-style:normal;margin-top:18px;font-size:var(--fs-sm);line-height:1.7;color:var(--on-dark-soft)}
.foot-contact a{color:var(--on-dark)}
.contact-card{font-style:normal;display:flex;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:20px 22px}
.contact-card p{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-ui);color:var(--ink)}
.contact-card span{font-size:var(--fs-xs);font-weight:600;color:var(--soft)}
.contact-card a{color:var(--ink);font-weight:600}

/* ---------- leadsvergelijking ---------- */
.leads-cmp table.cmp{min-width:560px}
.band.dark .leads-cmp{border-color:var(--line-dark)}
.leads-cmp td.feat{font-weight:600;color:var(--ink)}

/* ---------- rekenhulp ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;border-radius:18px;overflow:hidden;border:1px solid var(--rule);background:var(--paper)}
.calc-in{padding:clamp(20px,3vw,32px)}
.calc-hint{font-size:var(--fs-sm);color:var(--soft);margin-bottom:16px}
.calc-out{background:var(--night);color:var(--on-dark-soft);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:18px}
.calc-out .k{color:var(--amber);font-weight:600;font-size:var(--fs-sm)}
.calc-out dl{margin:0;display:flex;flex-direction:column;gap:14px}
.calc-out dl div{border-bottom:1px solid var(--line-dark);padding-bottom:12px}
.calc-out dt{font-size:var(--fs-sm);color:var(--on-dark-soft)}
.calc-out dd{margin:4px 0 0;font:800 clamp(28px,3vw,38px)/1 var(--f-head);color:var(--on-dark);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-out dl div:last-child dd{color:var(--amber)}
.calc-sum{font-family:var(--f-head);font-weight:700;font-size:var(--fs-lg);line-height:1.35;color:var(--on-dark)}
.calc-note{font-size:var(--fs-xs);color:var(--on-dark-mute);margin-top:auto}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* ---------- cases ---------- */
.case-facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;border:1px solid var(--line-dark);border-radius:var(--r-card);padding:22px}
.case-facts dt{font-size:var(--fs-xs);color:var(--on-dark-mute);font-weight:600}
.case-facts dd{margin:2px 0 0;color:var(--on-dark);font-size:var(--fs-md)}
.case-points .src{font-family:var(--f-mono);font-size:var(--fs-2xs);color:var(--on-dark-mute)}
.case-tbl .tot th,.case-tbl .tot td{font-weight:700;color:var(--ink);background:var(--cream-2)}
.case-tbl{min-width:520px}
.field input[type=number]{font:400 var(--fs-ui) var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:10px;padding:13px 14px;width:100%;min-width:0;font-variant-numeric:tabular-nums}
.field input[type=number]:focus{outline:3px solid var(--amber);outline-offset:1px;border-color:var(--ink)}
.calc .grid2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media (max-width:600px){.calc .grid2{grid-template-columns:1fr}}

/* ---------- casekaart (herbruikbaar) ---------- */
.ccard{background:var(--paper);color:var(--body);border:1px solid var(--rule);border-radius:20px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:22px}
.band.dark .ccard{box-shadow:0 30px 60px -36px rgba(0,0,0,.6);border-color:transparent}
.ccard h3{font-size:clamp(22px,2.2vw,28px);color:var(--ink);margin-bottom:8px}
.ccard-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:var(--fs-2xs);font-weight:600;color:var(--ink);background:var(--cream-2);border-radius:999px;padding:5px 11px}
.chip-concept{background:#FFF3D6;color:#7A5410;border:1px dashed #C99A3A}
.ccard-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,3vw,40px);align-items:start}
.ccard-text p{font-size:var(--fs-ui)}
.ccard-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cm{background:#fff;border:1px solid var(--rule-soft);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cm b{font:800 clamp(30px,3vw,42px)/1 var(--f-head);color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cm-long b{font-size:clamp(24px,2.1vw,32px);white-space:nowrap}
.cm span{font-size:var(--fs-xs);line-height:1.4;color:var(--body)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);font-weight:600;margin-top:auto;padding-top:6px}
.st::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.st-ok{color:var(--ok)}.st-ok::before{background:var(--ok)}
.st-check{color:#8A5A0B}.st-check::before{background:#E0A43A}
.spark{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:20px;border-bottom:1px solid var(--rule);padding-bottom:2px}
.spark span{flex:1;background:var(--navy);border-radius:3px 3px 0 0;min-height:4px}
.spark span:last-child{background:var(--amber)}
.spark-lbl{font-size:var(--fs-2xs)!important;color:var(--soft);margin-top:6px}
.ccard-link{font-weight:600;color:var(--ink);text-decoration:none}
.ccard-link:hover{text-decoration:underline}
@media (max-width:980px){.ccard-main{grid-template-columns:1fr}}
@media (max-width:560px){.ccard-metrics{grid-template-columns:1fr}}
/* casepagina */
.case-kort{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.band.dark .case-kort .cm{background:var(--night-2);border-color:var(--line-dark)}
.band.dark .case-kort .cm b{color:var(--amber)}
.band.dark .case-kort .cm span{color:var(--on-dark-soft)}
.band.dark .st-ok{color:#7FC79F}.band.dark .st-ok::before{background:#7FC79F}
.band.dark .st-check{color:#F2C46B}
@media (max-width:760px){.case-kort{grid-template-columns:1fr}}
.chan-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:12px}
.chan{font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;color:var(--ink);background:var(--cream-2);border-radius:6px;padding:5px 10px}
.band.dark .chan{background:#26314A;color:#C9D4E6}

/* ---------- rekenhulp v2 ---------- */
.calc2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);border-radius:20px;overflow:clip;border:1px solid var(--rule);background:var(--paper)}
.calc-steps{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;gap:14px}
.cstep{border:0;border-top:1px solid var(--rule);margin:0;padding:22px 0 4px;min-width:0}
.cstep:first-of-type{border-top:0;padding-top:4px}
.cstep legend{display:flex;align-items:center;gap:12px;font:700 var(--fs-lg) var(--f-head);color:var(--ink);padding:0;margin-bottom:14px}
.cn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--night);color:var(--amber);font:800 var(--fs-sm) var(--f-head);flex:none}
.unit{display:flex;align-items:stretch;border:1px solid var(--rule);border-radius:10px;background:#fff;overflow:hidden}
.unit span{display:grid;place-items:center;padding:0 12px;background:var(--cream-2);color:var(--soft);font-weight:600}
.unit input[type=number]{border:0!important;border-radius:0!important;outline-offset:-3px}
.unit:focus-within{outline:3px solid var(--amber);outline-offset:1px}
.fh{font-size:var(--fs-xs);color:var(--soft)}
.cres{font-size:var(--fs-md);color:var(--body);margin-top:4px}
.cres b{font:800 var(--fs-xl) var(--f-head);color:var(--ink);font-variant-numeric:tabular-nums}
.field input[type=range]{width:100%;accent-color:var(--navy);height:32px;cursor:pointer}
.field output{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.cfunnel{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.cfunnel div{position:relative;height:30px;background:var(--cream-2);border-radius:8px;overflow:hidden}
.cfunnel i{position:absolute;inset:0 auto 0 0;background:#D6DEEC;border-radius:8px;min-width:6px;transition:width .2s}
.cfunnel div:nth-child(2) i{background:#B3C1DC}
.cfunnel div:nth-child(3) i{background:#8FA3C9}
.cfunnel span{position:relative;z-index:1;display:block;line-height:30px;padding-left:12px;font-size:var(--fs-xs);font-weight:600;color:var(--ink)}
.cstack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--cream-2);margin:6px 0 4px}
.cstack i{display:block;height:100%;background:var(--navy);transition:width .2s}
.cstack i.fee{background:var(--amber)}
.calc-result{background:var(--night);color:var(--on-dark-soft);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:18px;position:relative}
.calc-result .k{color:var(--amber);font-weight:600;font-size:var(--fs-sm)}
.calc-result .big{display:flex;flex-direction:column;gap:4px}
.calc-result .big span{font:800 clamp(56px,6vw,84px)/1 var(--f-head);color:var(--on-dark);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.calc-result .big small{font-size:var(--fs-ui);color:var(--on-dark-soft)}
.calc-result .calc-sum{font:700 var(--fs-lg)/1.35 var(--f-head);color:var(--on-dark)}
.cmax{border:1px solid var(--line-dark);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.cmax span{font-size:var(--fs-sm)}
.cmax b{font:800 36px/1.05 var(--f-head);color:var(--amber);font-variant-numeric:tabular-nums}
.cmax small{font-size:var(--fs-xs);line-height:1.45}
.cuitleg summary{cursor:pointer;color:var(--on-dark);font-weight:600;font-size:var(--fs-md)}
.cuitleg p{font-size:var(--fs-sm);margin-top:8px;color:var(--on-dark-soft)}
.cuitleg b{color:var(--on-dark)}
@media (min-width:861px){.calc-result{position:sticky;top:90px;align-self:start}}
@media (max-width:860px){.calc2{grid-template-columns:1fr}}
.kpis.kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.kpis.kpis-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- mobiele vaste CTA-balk ---------- */
.mbar{display:none}
@media (max-width:700px){
  .mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(29,27,24,.96);border-top:1px solid var(--line-dark);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .mbar .btn{flex:1;justify-content:center;padding:12px 14px;font-size:var(--fs-md)}
  .mbar .btn-primary{background:var(--amber);color:var(--night)}
  .mbar .btn-ghost{flex:0 0 auto;color:var(--on-dark);border-color:var(--line-dark)}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  body.menu-open .mbar{display:none}
}
@media (max-width:600px){.hero{padding-top:36px}.hero .hero-copy{gap:20px}.hero .from{font-size:var(--fs-sm)}}
/* hero compacter: CTA boven de vouw op 1280x800 en 1440x900 */
.hero{padding-block:clamp(36px,4.5vw,64px) 0}
.hero h1{font-size:clamp(40px,4.4vw,64px);line-height:1}
.hero .hero-copy{gap:22px}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.col-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:26px 24px}
.col-card h3{font-size:var(--fs-xl);margin-bottom:6px}
.col-card ul{margin:0}
@media (max-width:820px){.cols2{grid-template-columns:1fr}}

/* e-mailmarketing */
.inbox{background:var(--cream);border-radius:var(--r-card);padding:22px;color:var(--ink);box-shadow:0 30px 60px -36px rgba(0,0,0,.6);transform:rotate(-1deg)}
.inbox-k{font:500 var(--fs-2xs)/1.4 var(--f-mono);color:var(--soft);margin:0 0 12px;text-transform:uppercase;letter-spacing:.04em}
.inbox ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.inbox li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.inbox li:first-child{border-top:0;padding-top:0}
.inbox li span{font:500 var(--fs-2xs)/1.6 var(--f-mono);color:var(--ink)}
.inbox li b{display:block;font-size:var(--fs-md);line-height:1.35;color:var(--ink)}
.inbox li em{display:block;font-style:normal;font-size:var(--fs-xs);line-height:1.45;color:var(--soft);margin-top:2px}
.route-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:28px 26px;transition:border-color .15s,transform .15s}
.route-card:hover{border-color:var(--navy);transform:translateY(-2px)}
.duo > .route-card{border-top:1px solid var(--rule);padding-top:28px}
.route-card .k{font-size:var(--fs-xs);font-weight:600;color:var(--ink)}
.route-card h2{font-size:clamp(24px,2.4vw,32px)}
.route-card .lnk{margin-top:auto;font-weight:600;color:var(--ink)}
.flows{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.flows > div{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:6px}
.flows b{font-family:var(--f-head);font-size:var(--fs-lg);color:var(--ink)}
.flows span{font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
@media (max-width:900px){.flows{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.flows{grid-template-columns:1fr}.inbox{transform:none}}

/* werkwijze: eerste 90 dagen */
.plan-h{font-size:var(--fs-xl);margin:8px 0 16px}
.plan-h + .weeks{margin-top:0}
.weeks{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:wk}
.wk,.mcard{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.wk-live{border-color:var(--navy);box-shadow:inset 0 3px 0 var(--navy)}
.wk-n{display:flex;align-items:center;gap:8px;font:500 var(--fs-2xs)/1.4 var(--f-mono);color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
.live{font:600 var(--fs-2xs)/1 var(--f-body);text-transform:none;letter-spacing:0;color:#fff;background:var(--navy);border-radius:999px;padding:4px 8px}
.wk h4,.mcard h4{font-family:var(--f-head);font-size:var(--fs-lg);line-height:1.25;color:var(--ink);margin:0}
.wk ul,.mcard ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:var(--fs-sm);line-height:1.45}
.jij{margin-top:auto;padding-top:10px;border-top:1px dashed var(--rule);font-size:var(--fs-xs);color:var(--soft)}
.tmonths{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
.mix{margin:0;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:22px 24px}
.mix figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-bottom:16px}
.mix figcaption b{font-family:var(--f-head);font-size:var(--fs-lg);color:var(--ink)}
.mix figcaption span{font-size:var(--fs-xs);color:var(--soft)}
.mix-row{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:12px;margin-bottom:10px}
.mix-m{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.mix-bar{display:flex;gap:2px;height:22px}
.mix-bar .seg{min-width:4px}
.mix-bar .seg:first-child{border-radius:4px 0 0 4px}
.mix-bar .seg:last-child{border-radius:0 4px 4px 0}
.mix-legend{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--fs-xs);color:var(--body)}
.mix-legend li{display:flex;align-items:center;gap:7px}
.mix-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.mix-table{margin-top:14px;font-size:var(--fs-sm)}
.mix-table summary{cursor:pointer;font-weight:600;color:var(--ink)}
.mix-table .table-wrap{margin-top:10px}
.shift{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px 40px;margin-top:40px;padding-top:32px;border-top:2px solid var(--ink)}
.shift h3{font-size:var(--fs-2xl)}
.shift ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.shift .note{grid-column:1/-1;margin-top:8px}
@media (max-width:1200px){.weeks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.weeks{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.weeks,.tmonths,.shift{grid-template-columns:1fr}.mix-row{grid-template-columns:1fr;gap:6px}}

.sheet-head .sheet-h{font-size:var(--fs-2xl);color:var(--ink);letter-spacing:-.02em}
.hero-sub .crumbs{margin-bottom:18px}

/* review 4 nov */
.calc-cta{display:inline-block;margin-top:14px;font-weight:600;color:var(--amber);text-decoration:none}
.calc-cta:hover{text-decoration:underline}
.pick-hint{margin:0 0 18px;font-size:var(--fs-md);color:var(--soft)}
.pick-hint a{font-weight:600;color:var(--ink)}
.vs2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs-col{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:14px}
.vs-col.feat{border-color:var(--night);box-shadow:inset 0 3px 0 var(--amber)}
.vs-k{font-family:var(--f-head);font-weight:800;font-size:var(--fs-lg);color:var(--ink)}
.vs-flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vs-flow li{font-size:var(--fs-sm);font-weight:600;padding:8px 12px;border-radius:999px;background:var(--cream-2);color:var(--body)}
.vs-flow li.us{background:var(--night);color:var(--cream)}
.vs-flow li+li::before{content:"→";margin-right:8px;color:var(--soft);font-weight:400}
.vs-flow li.us+li::before,.vs-flow li+li.us::before{color:var(--soft)}
.vs-col p{margin:0;font-size:var(--fs-md)}
.vs-dot{display:inline-block;width:12px;height:12px;border-radius:99px;background:var(--night);vertical-align:-1px;margin-right:4px}
.calc-example{margin-top:16px;background:var(--cream-2);border-radius:10px;padding:14px 16px;font-size:var(--fs-md)}
@media (max-width:760px){.vs2{grid-template-columns:1fr}}

/* homepage: vast aanspreekpunt */
.direct{display:grid;grid-template-columns:1fr 1.1fr;gap:24px clamp(32px,5vw,72px);align-items:start}
.band.dark .kicker-dark{font-size:var(--fs-sm);font-weight:600;color:var(--amber);margin:0 0 10px}
.direct-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.direct-list li{position:relative;padding-left:22px;color:var(--on-dark-soft)}
.direct-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:99px;background:var(--amber)}
.direct-card{margin-top:10px;border:1px solid var(--line-dark);border-radius:var(--r-card);padding:22px 24px;display:grid;gap:14px}
.direct-name{margin:0;display:flex;flex-direction:column;gap:2px}
.direct-name b{font-family:var(--f-head);font-size:var(--fs-2xl);color:var(--on-dark);letter-spacing:-.02em}
.direct-name span{font-size:var(--fs-sm);color:var(--on-dark-soft)}
.direct-acts{display:flex;flex-wrap:wrap;gap:10px}
.band.dark .direct-acts .btn-primary{background:var(--amber);color:var(--night)}
.band.dark .direct-acts .btn-ghost{color:var(--on-dark);border-color:var(--line-dark)}
.direct-meta{margin:0;font-size:var(--fs-sm);color:var(--on-dark-soft)}
.direct-meta a{color:var(--on-dark-soft)}
@media (max-width:820px){.direct{grid-template-columns:1fr}}

.steps7 .when{display:inline-block;margin-top:12px;font:500 var(--fs-2xs)/1.4 var(--f-mono);color:var(--ink);background:var(--cream-2);border-radius:999px;padding:4px 10px;text-transform:uppercase;letter-spacing:.03em}
.steps7 .when + h3{margin-top:8px}
.route-pm{display:block;font-size:var(--fs-xs);color:var(--soft);margin-bottom:4px}

/* lokale pagina */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.svc{display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:22px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.svc:hover{border-color:var(--navy);transform:translateY(-2px)}
.svc h3{font-size:var(--fs-xl);margin:0}
.svc p{margin:0;font-size:var(--fs-md)}
.svc .lnk{margin-top:auto;padding-top:6px;font-weight:600;color:var(--ink);font-size:var(--fs-md)}
.lokaal h2{font-size:clamp(26px,2.6vw,34px)}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* contrastfixes (Lighthouse 4 nov) */
.cta-band .lede{color:var(--on-dark-soft)}
.dash .panel h3{color:var(--ink)}
.ccard .st-ok,.st-ok{color:var(--ok)}
.ccard .st-check{color:#8A5A0B}
.cmp .n{color:var(--soft)}
.band.dark .ccard .st-ok{color:var(--ok)}.band.dark .ccard .st-ok::before{background:var(--ok)}
.band.dark .ccard .st-check{color:#8A5A0B}
.band:not(.dark) .case-label{color:#8A5A0B}

/* juridische pagina's */
.legal{max-width:76ch}
.legal h2{font-size:clamp(22px,2.2vw,28px);margin-top:40px}
.legal h3{font-size:var(--fs-lg);margin-top:26px}
.legal ol,.legal ul{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.legal ol li::marker{font-weight:600;color:var(--soft)}
.legal .legal-tbl td,.legal .legal-tbl th{font-size:var(--fs-sm);vertical-align:top}
.foot-legal a{color:inherit}

/* klantlogo's (homepage) */
.logos{background:var(--cream);padding-block:28px 30px;border-bottom:1px solid var(--rule)}
.logos-h{font:500 var(--fs-xs)/1.4 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--soft);text-align:center;margin:0 0 18px}
.logo-row{list-style:none;margin:0 auto;padding:0;max-width:920px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px clamp(28px,3.4vw,52px)}
.logo-row li{flex:0 0 auto;display:flex;align-items:center}
.logo-row img{display:block;height:var(--h,34px);width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.logo-row img:hover{filter:none;opacity:1}
.logo-row:focus-visible{outline:2px solid var(--navy);outline-offset:6px;border-radius:8px}
@media (max-width:900px){
  .logo-row{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:36px;padding:4px 16px 10px;margin:0 -16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .logo-row li{scroll-snap-align:start;flex:0 0 auto;max-width:none}
  .logo-row img{height:calc(var(--h,34px)*.8)}
}
@media (prefers-reduced-motion:reduce){.logo-row img{transition:none}}

/* cookiebanner (alleen actief met tracking) */
.cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:640px;background:var(--night);color:var(--on-dark-soft);border:1px solid var(--line-dark);border-radius:var(--r-card);box-shadow:0 24px 60px -24px rgba(0,0,0,.55)}
.cc-in{padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px}
.cc-t{font-size:var(--fs-xl);color:var(--on-dark);margin:0}
.cc-t:focus{outline:none}
.cc-d{font-size:var(--fs-sm);line-height:1.55;margin:0}
.cc-d a{color:var(--amber)}
.cc-prefs{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line-dark);padding-top:12px}
.cc-opt{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:var(--fs-sm);align-items:start}
.cc-opt b{display:block;color:var(--on-dark)}
.cc-opt input{width:18px;height:18px;margin-top:2px;accent-color:var(--amber)}
.cc-acts{display:flex;flex-wrap:wrap;gap:8px}
.cc-btn{flex:1 1 auto;justify-content:center;background:transparent;color:var(--on-dark);border:1px solid var(--on-dark-soft);font-size:var(--fs-sm);min-height:44px}
.cc-btn:hover,.cc-btn:focus-visible{background:var(--on-dark);color:var(--night)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:560px){.cc{left:8px;right:8px;bottom:8px}.cc-acts{flex-direction:column}}

/* werkwijze: tijdlijn eerste 90 dagen (geen percentages) */
.tl{margin-bottom:28px}
.tl-sub{font-size:var(--fs-md);color:var(--soft);margin:0 0 18px;max-width:72ch}
.tl-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;position:relative}
.tl-row::before{content:"";position:absolute;left:24px;right:24px;top:22px;height:2px;background:var(--rule)}
.tl-m{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.tl-dot{position:relative;z-index:1;width:44px;height:44px;border-radius:99px;background:var(--night);color:var(--amber);display:grid;place-items:center;font:800 var(--fs-lg) var(--f-head)}
.tl-m:first-child .tl-dot{background:var(--amber);color:var(--night)}
.tl-body{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.tl-k{font:500 var(--fs-2xs)/1.4 var(--f-mono);color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
.tl-body h3{font-family:var(--f-head);font-size:var(--fs-lg);line-height:1.25;color:var(--ink);margin:0}
.tl-mijl{align-self:flex-start;font-size:var(--fs-xs);font-weight:600;color:#fff;background:var(--navy);border-radius:999px;padding:5px 10px}
.tl-body ul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.tl-body li{display:grid;grid-template-columns:16px 1fr;gap:8px;font-size:var(--fs-sm);line-height:1.45;color:var(--ink)}
.tl-body li::before{content:"✓";color:var(--ok);font-weight:700}
.tl-altijd{margin:16px 0 0;font-size:var(--fs-sm);color:var(--body)}
.wk-detail{margin-top:10px}
.wk-detail summary{cursor:pointer;list-style:none}
.wk-detail summary::-webkit-details-marker{display:none}
.wk-detail summary .plan-h{display:inline-flex;align-items:center;gap:8px;max-width:100%;overflow-wrap:normal;hyphens:manual}
.wk-detail summary .plan-h::after{content:"▾";letter-spacing:0;flex:none;font-size:var(--fs-sm);color:var(--soft);transition:transform .2s}
.wk-detail:not([open]) summary .plan-h::after{transform:rotate(-90deg)}
@media (max-width:820px){
  .tl-row{grid-template-columns:1fr;gap:12px}
  .tl-row::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
  .tl-m{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
}
.concept-publiek{background:var(--cream-2);color:var(--body);font-size:var(--fs-sm)}

/* Kennisbank-artikelen uit WordPress: wat de editor kan maken (afbeeldingen, citaten, tabellen, knoppen) */
.art-meta{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--soft);margin:0 0 28px}
.art-cover{margin:0 0 32px;border-radius:var(--r-card);overflow:hidden;background:var(--cream-2)}
.art-cover img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}
.prose > :first-child{margin-top:0}
.prose p{margin:0}
.prose p + p,.prose ul + p,.prose ol + p,.prose figure + p,.prose blockquote + p,.prose table + p{margin-top:14px}
.prose p + ul,.prose p + ol{margin-top:12px}
.prose img{max-width:100%;height:auto;border-radius:12px}
.prose figure{margin:28px 0}
.prose figcaption{font-size:var(--fs-sm);color:var(--soft);margin-top:8px}
.prose blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:3px solid var(--navy);font-size:var(--fs-lg);color:var(--ink)}
.prose blockquote p{font-size:inherit}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:var(--fs-ui)}
.prose th,.prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--soft);border-bottom:1.5px solid var(--ink)}
.prose .wp-block-table{overflow-x:auto;margin:24px 0}
.prose .wp-block-table table{margin:0}
.prose .wp-block-button__link{display:inline-flex;background:var(--ink);color:var(--cream);padding:13px 22px;border-radius:var(--r-btn);text-decoration:none;font-weight:600}
.prose .wp-block-embed iframe,.prose iframe{max-width:100%}
.prose .note{font-size:var(--fs-sm);color:var(--soft);margin-top:28px}
.kb-leeg{max-width:60ch}

/* Lees verder: links naar kennisbankartikelen op dienstpagina's (alleen gepubliceerde artikelen) */
.lv-band{padding-block:clamp(28px,4vw,48px)}
.lees-verder{max-width:860px;border-left:3px solid var(--navy);padding:4px 0 4px 22px}
.lees-verder .lv-lead{margin:0 0 10px;color:var(--ink);font-weight:600}
.lees-verder ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.lees-verder li{margin:0}
.lees-verder a{color:var(--ink);font-weight:600}
.lees-verder a::after{content:" →"}
.lees-verder a:hover{color:var(--ink)}
.band.dark .lees-verder{border-left-color:var(--amber)}
.band.dark .lees-verder .lv-lead{color:var(--on-dark)}
.band.dark .lees-verder a{color:var(--amber)}
.lv-tag{display:inline-block;margin-left:6px;font:500 var(--fs-2xs) var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#8a5a12;background:#F7E3C2;border-radius:4px;padding:1px 6px;vertical-align:2px}
.card-concept{border-style:dashed}
.card-concept .cat{color:#8a5a12}
/* lange samenstellingen in koppen (bijv. advertentiecontent) mogen op smalle schermen afbreken */
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5;overflow-wrap:break-word}
/* header desktop: past binnen 1200 px, ook met de knop "Gratis marketingcheck" */
@media (min-width:1181px){.nav{gap:14px}.nav .menu a,.nav .menu .dd-btn{padding:10px 7px}}
.nots.nots-1{grid-template-columns:1fr;gap:0}
.nots.nots-1 li{padding:12px 0;border-bottom:1px solid var(--rule)}
.nots.nots-1 li:last-child{border-bottom:0}

/* Strakker ritme (4 nov, avond): minder witruimte tussen blokken, en geen dubbele witruimte als twee
   blokken met dezelfde achtergrond op elkaar volgen */
.band{padding-block:clamp(56px,7vw,96px)}
.sec-head{margin-bottom:36px}
.band:not(.mist):not(.dark):not(.cta-band) + .band:not(.mist):not(.dark):not(.cta-band),
.band.mist + .band.mist{padding-top:clamp(8px,1.5vw,20px)}
.band.lv-band + .band:not(.mist):not(.dark):not(.cta-band){padding-top:clamp(24px,3vw,40px)}


/* ================= design-pass 5 nov: critique-punten ================= */
/* Vergelijkingstabel: op mobiel per vraag gestapeld, zodat "Eigen aanvraag" altijd in beeld is */
@media (max-width:640px){
  .leads-cmp{overflow:visible;border:0;background:none;border-radius:0}
  .leads-cmp table.cmp{min-width:0;font-size:var(--fs-md)}
  .leads-cmp table.cmp,.leads-cmp tbody,.leads-cmp tr,.leads-cmp th,.leads-cmp td{display:block;width:auto}
  .leads-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .leads-cmp tbody{display:flex;flex-direction:column;gap:12px}
  .leads-cmp tr{background:var(--paper);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
  .leads-cmp table.cmp tbody th{width:auto;padding:16px 16px 8px;border:0;font-family:var(--f-head);font-size:var(--fs-base);line-height:1.3}
  .leads-cmp table.cmp td{border:0;padding:4px 16px 14px;background:none}
  .leads-cmp td::before{content:attr(data-l);display:block;font:600 var(--fs-2xs)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-bottom:3px}
  .leads-cmp table.cmp td.feat{background:var(--night);color:var(--on-dark);padding-top:12px;font-weight:600}
  .leads-cmp td.feat::before{color:var(--amber)}
  .band.dark .leads-cmp tr{border-color:var(--line-dark)}
}

/* Pakketkaarten: rijen lijnen uit over de kaarten heen, knoppen op een hoogte */
@supports (grid-template-rows:subgrid){
  @media (min-width:601px){
    .p4{row-gap:16px}
    .p4 > .pk{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:14px}
    .pk .go{margin-top:0;align-self:start}
  }
}
.pk .go .btn{width:100%;padding-inline:12px;text-align:center;font-size:var(--fs-md)}

/* FAQ: kop en "andere vraag" links, vragen rechts */
.faq-grid{display:grid;gap:8px}
.faq-grid .faq{margin-top:24px}
.faq-more{margin-top:14px;font-size:var(--fs-md);color:var(--soft);max-width:34ch}
.faq-more a{color:var(--ink);font-weight:600}
@media (min-width:901px){
  .faq-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:64px;align-items:start}
  .faq-side{position:sticky;top:96px}
  .faq-grid .faq{margin-top:0;max-width:none}
  .faq-grid .faq details:first-child summary{padding-top:6px}
  .faq-grid .faq details:first-child summary::after{top:1px}
}
.band.mist .faq-more,.band .faq-more{color:var(--soft)}
.faq-group + .faq-group{margin-top:clamp(40px,5vw,72px)}
.faq-group h2{font-size:clamp(28px,3vw,40px)}

/* Marketingcheck: compacte kop, formulier sneller in beeld */
.page-hero.compact{padding-block:clamp(32px,4vw,56px)}
.page-hero.compact h1{font-size:clamp(34px,4.4vw,58px)}
.page-hero.compact + #check-sectie{padding-top:clamp(32px,4vw,56px)}

/* Mobiele balk: pas zichtbaar als de knop in de kop uit beeld is, weg bij de afsluitende CTA */
@media (max-width:700px){
  .mbar{transform:translateY(110%);visibility:hidden;transition:transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
  body.mbar-on .mbar{transform:none;visibility:visible;transition:transform var(--dur-base) var(--ease-out),visibility 0s}
}

/* ================= motion (licht, functioneel; alles uit bij beweging beperken) ================= */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:var(--rv-d,0s)}
.flow li.rv{transform:translateY(10px)}
.flow li.rv::after{transform:scaleX(0);transform-origin:left center}
.flow li.rv.in::after{transform:none;transition:transform .5s var(--ease-out);transition-delay:calc(var(--rv-d,0s) + .2s)}
@media (max-width:900px){.flow li.rv::after{transform:scaleY(0);transform-origin:top center}}
@media print{.rv{opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){.rv,.flow li.rv::after{opacity:1!important;transform:none!important}}

/* klikbare kaarten: hover-lift alleen waar een muis is, met schaduw */
@media (hover:hover){
  .card,.route-card,.svc{transition:border-color var(--dur-fast),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
  .card:hover,.route-card:hover,.svc:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(29,27,24,.45)}
}
@media (hover:none){.card:hover,.route-card:hover,.svc:hover{transform:none}}

/* FAQ klapt soepel open waar de browser dat kan */
@supports (interpolate-size:allow-keywords){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .3s var(--ease-out),content-visibility .3s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* 5 nov: design-critique en motion-skills (GSAP-, toegankelijkheids- en micro-interactieprincipes, zonder library).
   Alleen transform en opacity, alles achter "geen voorkeur voor minder beweging". */
@media (min-width:821px){
  .direct{grid-template-areas:"head text" "card text";grid-template-rows:auto 1fr}
  .direct > .stack:first-child{grid-area:head}
  .direct > .stack:nth-child(2){grid-area:text}
  .direct > .direct-card{grid-area:card;align-self:start;margin-top:8px}
}
.band.dark + .band.dark{padding-top:clamp(8px,1.5vw,20px)}
@media (prefers-reduced-motion:no-preference){
  /* kaart in de kop: vinkjes worden een voor een gezet, daarna de stempel */
  .sheet-wrap.mv .sheet li .chk{display:inline-block;opacity:0;transform:scale(.4)}
  .sheet-wrap.mv.play .sheet li .chk{animation:mh-chk .38s var(--ease-out) both;animation-delay:calc(.15s + var(--i,0) * 90ms)}
  .sheet-wrap.mv .stamp{opacity:0}
  .sheet-wrap.mv.play .stamp{animation:mh-stamp .5s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(.35s + var(--n,7) * 90ms)}
  @keyframes mh-chk{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
  @keyframes mh-stamp{from{opacity:0;transform:rotate(14deg) scale(1.45)}to{opacity:1;transform:rotate(6deg) scale(1)}}
  /* case: staafjes groeien vanaf de basislijn als het blok in beeld komt */
  .ccard.rv .spark span{transform:scaleY(0);transform-origin:bottom}
  .ccard.rv.in .spark span{transform:none;transition:transform .7s var(--ease-out);transition-delay:calc(.25s + var(--i,0) * 80ms)}
}
@media print{.sheet-wrap.mv .sheet li .chk,.sheet-wrap.mv .stamp{opacity:1!important;transform:none!important;animation:none!important}.ccard .spark span{transform:none!important}}

/* 5 nov: toegankelijkheidsaudit (WCAG 2.1 AA) */
.calc-result .calc-note a,.band.dark .calc-note a{color:var(--amber)}
.fun div:nth-child(-n+3) span{opacity:1}
.pk .go a.more{display:inline-block;padding-block:6px}

/* 5 nov: design-critique ronde 2. Twee koppen naast elkaar concurreerden op volle h2-grootte */
.duo > div > h2,#kosten .split2 h2{font-size:clamp(26px,2.8vw,36px);line-height:1.1}
.pk .amt small{line-height:1.35}

/* 5 nov: aanmelden voor marketingtips */
.tips{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,5vw,72px);align-items:center}
.tips-k{font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin:0}
.tips .stack h2{font-size:clamp(26px,2.8vw,36px);line-height:1.1}
.tips-form{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:24px}
.tips-form .btn{width:100%;justify-content:center}
.field-check label{display:flex;gap:10px;align-items:flex-start;font-weight:500;line-height:1.45;cursor:pointer}
.field-check input[type=checkbox]{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--navy)}
.field-check input[type=checkbox]:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.field.field-check.has-err label{color:var(--err)}
.tips-note{font-size:var(--fs-xs);color:var(--soft);margin:12px 0 0}
.tips-note a{color:var(--ink)}
.tips-form .form-status{margin-top:12px}
@media (max-width:820px){.tips{grid-template-columns:1fr}}
.form-status.ok{background:#E7F2EC;border:1px solid #B9D8C6;color:#1F4D36}

/* 5 nov: casetabellen op mobiel als kaartjes per maand (geen horizontaal scrollen) */
@media (max-width:600px){
  table.cmp.case-tbl{min-width:0}
  table.cmp.case-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.cmp.case-tbl,table.cmp.case-tbl tbody{display:block;width:100%}
  table.cmp.case-tbl tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:14px 16px;border-bottom:1px solid var(--rule)}
  table.cmp.case-tbl tr:last-child{border-bottom:0}
  table.cmp.case-tbl th[scope=row]{grid-column:1/-1;width:auto;padding:0;border:0;font-size:var(--fs-md);background:none}
  table.cmp.case-tbl td{display:block;padding:0;border:0;background:none}
  table.cmp.case-tbl tr.tot{background:var(--cream-2)}
  table.cmp.case-tbl td::before{content:attr(data-l);display:block;font:500 var(--fs-2xs)/1.4 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--soft);margin-bottom:2px}
}

/* 5 nov (masterprompt fase 3): kleine afwerking van interacties */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.dd a{transition:background-color var(--dur-fast)}
.nav .menu a,.nav .menu .dd-btn{transition:color var(--dur-fast)}
@media (prefers-reduced-motion:no-preference){
  .dd:not([hidden]){animation:mh-dd .18s var(--ease-out)}
  @keyframes mh-dd{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* klantnaam en logo bij cases */
.klant-logo{display:block;height:auto;width:auto}
.case-klant{display:inline-flex;background:#fff;border-radius:12px;padding:12px 18px;margin:0 0 14px}
.case-klant .klant-logo{height:40px}
.ccard-klant{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.ccard-klant .klant-logo{height:30px;max-width:46vw;object-fit:contain;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:8px 12px;box-sizing:content-box}
.ccard-klant span{font:600 var(--fs-md)/1.2 var(--f-body,inherit)}
@media (max-width:640px){.case-klant .klant-logo{height:30px;width:auto}}

/* klantlogo's als doorschuivende rij (alleen met JS en zonder "beweging beperken") */
.logo-slider.is-slider{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-slider.is-slider .logo-row{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;max-width:none;margin:0;padding:6px 0;overflow:visible;scroll-snap-type:none;animation:mh-logos 60s linear infinite;will-change:transform}
.logo-slider.is-slider .logo-row li{margin-right:clamp(40px,5vw,72px);scroll-snap-align:none}
.logo-slider.is-slider:hover .logo-row,.logo-slider.is-slider.is-off .logo-row{animation-play-state:paused}
@keyframes mh-logos{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:900px){.logo-slider.is-slider .logo-row{padding:4px 0;margin:0}.logo-slider.is-slider .logo-row li{margin-right:40px}}

/* Strak raster voor kop + tekst: dezelfde kolommen, dezelfde kopmaat, eerste regel op een lijn */
.split2,.direct{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:first baseline}
.split2.form-layout{align-items:start}
.split2 > h2,.split2 > .stack > h2,.direct > .stack > h2{font-size:clamp(30px,3.1vw,42px);line-height:1.08;letter-spacing:-.03em;max-width:18ch}
.split2 > .lede,.split2 > .stack > .lede,.direct .lede{font-size:var(--fs-lg,19px);line-height:1.55;margin:0}
.split2 > p,.split2 > .stack > p{margin:0}
.kick-row{margin:0 0 18px;display:block}
.band.dark .kick-row{color:var(--amber)}
.direct{row-gap:28px}
@media (max-width:860px){.split2,.direct{grid-template-columns:1fr;align-items:start}.split2 > h2,.split2 > .stack > h2,.direct > .stack > h2{max-width:none}}

/* links: donkere tekst met amberkleurige onderstreping (geen blauw meer in tekst en links) */
a{text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px}
.lnk-arrow,.ccard-link,.lnk,.card .rd,.pk .go a.more,.p4-foot a,.pick-hint a,.faq-more a,.contact-card a,.tips-note a,.lees-verder a,.plans-more a{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:4px}
.lnk-arrow:hover,.ccard-link:hover,.lnk:hover,.card:hover .rd,.pk .go a.more:hover,.p4-foot a:hover,.pick-hint a:hover,.faq-more a:hover,.contact-card a:hover,.tips-note a:hover,.lees-verder a:hover,.plans-more a:hover,a:hover{text-decoration-color:currentColor}
.ccard-text h2,.ccard-text h3{font-size:clamp(28px,2.8vw,38px);line-height:1.1;letter-spacing:-.03em;margin:0 0 16px}

/* ================= Landingspagina's voor advertenties (/lp/...) ================= */
.lp-head .nav{justify-content:space-between}
.lp-head-acts{display:flex;align-items:center;gap:22px;margin-left:auto}
.lp-tel{display:inline-flex;gap:8px;align-items:baseline;color:var(--on-dark-soft);text-decoration:none;font-size:var(--fs-md);min-height:44px;align-items:center}
.lp-tel b{color:var(--on-dark);font-weight:600}
.lp-tel:hover b{color:var(--amber)}
.lp-head .btn{margin-left:0}
@media (max-width:700px){.lp-tel-t{display:none}.lp-head .btn{display:none}.lp-tel b{font-size:var(--fs-ui)}}
.lp-foot{padding-block:36px 96px}
.lp-foot-in{display:flex;flex-direction:column;gap:10px;font-size:var(--fs-sm)}
.lp-foot a{color:var(--on-dark-soft)}
.lp-foot a:hover{color:var(--on-dark)}
.lp-foot b{color:var(--on-dark)}
.lp-foot .small{color:var(--on-dark-mute)}

/* hero */
.lp-hero{padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,88px)}
.lp-hero .page-hero-grid{grid-template-columns:1.15fr .85fr;align-items:center}
.lp-eyebrow{font:500 var(--fs-xs)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--amber);margin:0 0 18px}
.lp-hero h1{font-size:clamp(34px,4.2vw,58px);max-width:20ch;line-height:1.03;hyphens:none}
.lp-hero .lede{max-width:54ch}
.lp-price{display:flex;align-items:center;gap:16px;margin-top:28px}
.lp-price b{font-family:var(--f-head);font-weight:800;font-size:clamp(40px,4.4vw,56px);line-height:1;color:var(--amber);letter-spacing:-.03em}
.lp-price span{font-size:var(--fs-sm);line-height:1.45;color:var(--on-dark-soft);border-left:1px solid var(--line-dark);padding-left:16px}
.lp-hero .cta{margin-top:28px}
.lp-ticks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--fs-sm);color:var(--on-dark-soft)}
.lp-ticks li{position:relative;padding-left:22px}
.lp-ticks li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg) translateY(-2px)}
.lp-ladder{background:var(--night-2);border:1px solid var(--line-dark);border-radius:20px;padding:clamp(22px,3vw,34px)}
.lp-ladder h2{font:500 var(--fs-xs)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-soft);margin:0 0 22px}
.lp-ladder ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.lp-ladder li{position:relative;padding:0 0 24px 46px;min-width:0}
.lp-ladder li:last-child{padding-bottom:0}
.lp-ladder li::before{content:"";position:absolute;left:11px;top:26px;bottom:-2px;width:2px;background:var(--line-dark)}
.lp-ladder li:last-child::before{display:none}
.lp-ladder li::after{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;border:2px solid var(--amber);background:var(--night-2)}
.lp-ladder li.end::after{background:var(--amber)}
.lp-ladder strong{display:block;font-family:var(--f-head);font-size:var(--fs-xl);color:var(--on-dark);line-height:1.25}
.lp-ladder span{display:block;font-size:var(--fs-sm);color:var(--on-dark-soft);margin-top:2px}
.lp-ladder li{animation:lp-in .6s var(--ease-out) both;animation-delay:calc(var(--i,0)*.12s + .15s)}
@keyframes lp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:900px){.lp-hero .page-hero-grid{grid-template-columns:1fr}.lp-hero h1{max-width:20ch}}

/* problemen */
.lp-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lp-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:12px;min-width:0}
.lp-card .num{font:500 var(--fs-xs)/1 var(--f-mono);letter-spacing:.06em;color:var(--soft)}
.lp-card h3{font-size:var(--fs-xl)}
.lp-card p{font-size:var(--fs-md)}
.lp-card.hov{transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.lp-card.hov:hover{transform:translateY(-3px);border-color:var(--ink)}
@media (max-width:900px){.lp-three{grid-template-columns:1fr}}

/* route-visual (advertentie tot opdracht) */
.lp-route{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.lp-route>li{position:relative;padding:0 18px 0 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.lp-route>li::before{content:attr(data-n);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--amber);color:var(--night);font:800 var(--fs-ui) var(--f-head);position:relative;z-index:1}
.lp-route>li::after{content:"";position:absolute;left:52px;right:8px;top:21px;height:2px;background:repeating-linear-gradient(90deg,var(--amber) 0 8px,transparent 8px 14px);opacity:.55;background-size:14px 2px;animation:lp-dash 1.2s linear infinite}
.lp-route>li:last-child::after{display:none}
@keyframes lp-dash{to{background-position:14px 0}}
.lp-route h3{font-size:var(--fs-xl);color:var(--on-dark);margin-top:8px}
.lp-route p{font-size:var(--fs-md);color:var(--on-dark-soft);line-height:1.5}
.lp-route .who{display:inline-block;align-self:flex-start;font:500 var(--fs-2xs)/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line-dark);border-radius:99px;padding:6px 10px;color:var(--on-dark-soft)}
.lp-route .who.us{border-color:var(--amber);color:var(--amber)}
.lp-under{margin-top:36px;border:1px dashed var(--line-dark);border-radius:14px;padding:16px 20px;display:flex;gap:14px;align-items:baseline;color:var(--on-dark-soft);font-size:var(--fs-md)}
.lp-under b{color:var(--on-dark);white-space:nowrap}
.lp-diff{margin-top:20px;font-size:var(--fs-md);color:var(--on-dark-soft);max-width:78ch}
.lp-diff a{color:var(--on-dark)}
@media (max-width:900px){
  .lp-route{grid-template-columns:1fr;gap:0}
  .lp-route>li{padding:0 0 28px 62px}
  .lp-route>li::before{position:absolute;left:0;top:0}
  .lp-route>li::after{left:21px;right:auto;top:44px;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--amber) 0 8px,transparent 8px 14px);animation:none}
  .lp-route h3{margin-top:0;padding-top:8px}
  .lp-under{flex-direction:column;gap:4px}
}

/* productie en pakketinhoud */
.lp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--ink);margin-bottom:44px}
.lp-stats>div{padding:22px 22px 6px 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.lp-stats>div+div{padding-left:22px;border-left:1px solid var(--rule)}
.lp-stats b{font:800 clamp(44px,5vw,68px)/1 var(--f-head);letter-spacing:-.04em;color:var(--ink)}
.lp-stats span{font-size:var(--fs-md);color:var(--body);line-height:1.4}
.lp-stats small{font-size:var(--fs-sm);color:var(--soft)}
@media (max-width:900px){.lp-stats{grid-template-columns:1fr 1fr}.lp-stats>div:nth-child(3){padding-left:0;border-left:0}.lp-stats>div:nth-child(n+3){border-top:1px solid var(--rule);margin-top:14px;padding-top:20px}}
.lp-six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lp-six .lp-card{background:var(--paper)}
.lp-six .lp-card h3{font-size:var(--fs-lg)}
@media (max-width:900px){.lp-six{grid-template-columns:1fr}}
.lp-six-note{margin-top:28px;max-width:78ch;font-size:var(--fs-md);color:var(--body)}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:34px}
.lp-cta-row p{font-size:var(--fs-md);color:var(--body);margin-right:8px}

/* stappen */
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:s}
.lp-steps li{position:relative;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;min-width:0;counter-increment:s}
.lp-steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--cream);font:800 var(--fs-ui) var(--f-head)}
.lp-steps h3{font-size:var(--fs-xl)}
.lp-steps p{font-size:var(--fs-md)}
.lp-steps li:last-child{background:var(--night);border-color:var(--night)}
.lp-steps li:last-child h3{color:var(--on-dark)}
.lp-steps li:last-child p{color:var(--on-dark-soft)}
.lp-steps li:last-child::before{background:var(--amber);color:var(--night)}
@media (max-width:1000px){.lp-steps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.lp-steps{grid-template-columns:1fr}}

/* tracking */
.lp-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}
.lp-track li{position:relative;padding:0 14px 0 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.lp-track li::before{content:"";display:block;width:44px;height:44px;border-radius:50%;background:var(--amber);position:relative;z-index:1}
.lp-track li.cond::before{background:var(--night);border:2px dashed var(--amber)}
.lp-track li::after{content:"";position:absolute;left:52px;right:6px;top:21px;height:2px;background:var(--line-dark)}
.lp-track li:last-child::after{display:none}
.lp-track strong{font:700 var(--fs-lg) var(--f-head);color:var(--on-dark);margin-top:6px}
.lp-track span{font-size:var(--fs-sm);color:var(--on-dark-soft);line-height:1.45}
.lp-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:26px;font-size:var(--fs-sm);color:var(--on-dark-soft)}
.lp-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--amber);vertical-align:-1px;margin-right:8px}
.lp-legend i.c{background:transparent;border:2px dashed var(--amber)}
@media (max-width:700px){
  .lp-track{grid-template-columns:1fr}
  .lp-track li{padding:0 0 22px 62px}
  .lp-track li::before{position:absolute;left:0;top:0}
  .lp-track li::after{left:21px;right:auto;top:44px;bottom:0;width:2px;height:auto}
  .lp-track strong{margin-top:0;padding-top:8px}
}
.lp-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,88px);align-items:start}
.lp-split>*{min-width:0}
@media (max-width:900px){.lp-split{grid-template-columns:1fr}}

/* prijs en vergelijking */
.lp-prijsgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:start}
.lp-prijsgrid>*{min-width:0}
.lp-prijskaart{background:var(--night);color:var(--on-dark-soft);border-radius:20px;padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:14px}
.lp-prijskaart .k{font:500 var(--fs-xs)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.lp-prijskaart .p{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lp-prijskaart .p b{font:800 clamp(48px,5vw,64px)/1 var(--f-head);color:var(--on-dark);letter-spacing:-.04em}
.lp-prijskaart .p span{font-size:var(--fs-md)}
.lp-prijskaart ul{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-md)}
.lp-prijskaart li{position:relative;padding-left:24px}
.lp-prijskaart li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:6px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.lp-prijskaart .btn{align-self:flex-start}
.lp-table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.lp-table caption{text-align:left;font:700 var(--fs-lg) var(--f-head);color:var(--ink);padding-bottom:14px}
.lp-table th,.lp-table td{text-align:left;vertical-align:top;padding:14px 14px 14px 0;border-top:1px solid var(--rule)}
.lp-table thead th{border-top:0;border-bottom:2px solid var(--ink);font:700 var(--fs-md) var(--f-head);color:var(--ink)}
.lp-table tbody th{font-weight:600;color:var(--ink);width:26%}
.lp-table td.big{background:var(--paper);padding-left:14px;font-weight:500;color:var(--ink)}
.lp-table thead th.big{padding-left:14px;background:var(--paper)}
@media (max-width:900px){
  .lp-prijsgrid{grid-template-columns:1fr}
  .lp-table thead{display:none}
  .lp-table,.lp-table tbody,.lp-table tr,.lp-table th,.lp-table td{display:block;width:100%}
  .lp-table tr{border-top:1px solid var(--rule);padding:14px 0}
  .lp-table th,.lp-table td{border:0;padding:3px 0}
  .lp-table tbody th{width:auto;font-family:var(--f-head);font-size:var(--fs-lg)}
  .lp-table td::before{content:attr(data-l) ": ";font-weight:700;color:var(--ink)}
  .lp-table td.big{background:transparent;padding-left:0}
}

/* aanvraagformulier */
.lp-form-band .lp-split{align-items:start}
.lp-form-band h2{max-width:14ch}
.lp-next{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:n}
.lp-next li{position:relative;padding-left:44px;color:var(--on-dark-soft);counter-increment:n;font-size:var(--fs-ui)}
.lp-next li::before{content:counter(n);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--amber);color:var(--amber);display:grid;place-items:center;font:700 var(--fs-sm) var(--f-head)}
.lp-direct{margin-top:26px;font-size:var(--fs-md);color:var(--on-dark-soft)}
.lp-direct a{color:var(--on-dark)}
.lp-form-band .form-card{background:var(--paper)}
.lp-form-band .form-card h3{margin-bottom:18px;font-size:var(--fs-xl)}
.lp-form-band .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:600px){.lp-form-band .grid2{grid-template-columns:1fr}}
.lp-alt{margin-top:18px;font-size:var(--fs-sm);color:var(--soft)}
@media (prefers-reduced-motion:reduce){.lp-route>li::after,.lp-ladder li{animation:none!important}}

.lp-route>li::before,.lp-track li::before,.lp-steps li::before,.lp-next li::before,.lp-ladder li::before,.lp-ladder li::after{box-sizing:border-box}
.lp-prijskaart .btn-primary{background:var(--amber);color:var(--night)}
.lp-prijskaart .btn-primary:hover{background:#F2B65A}
.lp-form-band .form-card h3{color:var(--ink)}
.lp-alt{color:var(--on-dark-soft)}
.lp-alt a{color:var(--on-dark)}
.lp-form-band .form-card .small{color:var(--soft)}
.lp-form-band .form-card a{color:var(--ink)}
.lp-table caption{display:block;width:100%}
.lp-route.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.lp-route.c4{grid-template-columns:1fr}}
.lp-six.lp-cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.lp-six.lp-cols2{grid-template-columns:1fr}}
.lp-six .num{font:500 var(--fs-xs)/1 var(--f-mono);letter-spacing:.06em;color:var(--soft)}
/* twee kanalen naast elkaar */
.lp-kanalen{display:grid;grid-template-columns:1fr 56px 1fr;gap:0;align-items:stretch}
.lp-kanaal{background:var(--night-2);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:12px;min-width:0}
.lp-kanaal.g{border-top:3px solid var(--amber)}
.lp-kanaal.m{border-top:3px solid var(--on-dark-soft)}
.lp-kn{font:500 var(--fs-xs)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.lp-kanaal.m .lp-kn{color:var(--on-dark-soft)}
.lp-kanaal h3{color:var(--on-dark);font-size:var(--fs-2xl)}
.lp-kanaal p{font-size:var(--fs-ui);color:var(--on-dark-soft)}
.lp-kanaal ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:var(--fs-md);color:var(--on-dark-soft)}
.lp-kanaal li{position:relative;padding-left:22px}
.lp-kanaal li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:99px;background:var(--amber)}
.lp-plus{display:grid;place-items:center;font:800 var(--fs-3xl) var(--f-head);color:var(--amber)}
.lp-midden{margin-top:22px;border:1px dashed var(--line-dark);border-radius:14px;padding:16px 20px;color:var(--on-dark-soft);font-size:var(--fs-md)}
.lp-midden b{color:var(--on-dark)}
@media (max-width:800px){.lp-kanalen{grid-template-columns:1fr}.lp-plus{padding:6px 0}}
.lp-overzicht{list-style:none;margin:0;padding:0;max-width:760px}
.lp-overzicht li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--rule);flex-wrap:wrap}
.lp-overzicht a{font:700 var(--fs-lg) var(--f-head)}
.lp-overzicht span{font-size:var(--fs-sm);color:var(--soft)}