/*
Theme Name: beste-seobureau
Theme URI: https://beste-seobureau.nl
Author: Rankmakers
Description: Thema voor beste-seobureau.nl. Blauw met paars accent, Bricolage Grotesque en Source Sans 3. Bevat SEO-configurator met prijsindicatie en aanvraagbeheer.
Version: 3.0.1
Requires at least: 6.5
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: bsb
*/

:root {
  --paper:#F5F6FB; --surface:#FFFFFF; --sunken:#F9FAFD; --line:#D9DDEA;
  --ink:#141B34; --muted:#525B76; --on-ink:#BCC3DA;
  --blue:#2453D6; --blue-deep:#16307F; --blue-soft:#E1E9FD;
  --violet:#6B3FE8; --violet-deep:#5228C4; --violet-soft:#ECE5FF;
  --danger:#B42318;
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Source Sans 3", system-ui, sans-serif;
  --r-sm:6px; --r-md:10px; --r-lg:18px; --r-xl:24px; --pill:999px;
  --shadow:0 10px 30px rgba(20,27,52,.25);
  --wrap:1180px; --gutter:24px;
}
@media (max-width:640px){ :root{ --gutter:16px; } }

/* ---------- basis ---------- */
html { scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none!important; animation:none!important; } }
body { background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:26px; -webkit-font-smoothing:antialiased; }
:where(h1,h2,h3,h4) { font-family:var(--display); color:var(--ink); letter-spacing:-.01em; text-wrap:balance; }
:where(p,li) { text-wrap:pretty; }
a { color:var(--blue); text-underline-offset:3px; }
a:hover { color:var(--blue-deep); }
:focus-visible { outline:3px solid var(--violet); outline-offset:3px; border-radius:4px; }
.wp-site-blocks { padding:0; }
.wp-site-blocks > * + * { margin-block-start:0; }
main.bsb-main > .entry-content > * , .bsb-page > * { margin-block-start:0; }
.bsb-wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); box-sizing:border-box; }
.screen-reader-text { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.bsb-mark { white-space:nowrap; background:linear-gradient(transparent 62%, var(--violet-soft) 62%); padding:0 .08em; }

/* ---------- knoppen ---------- */
.bsb-btn, .wp-block-button__link, .wp-element-button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:17px; line-height:22px;
  padding:14px 22px; border-radius:var(--pill); border:0; cursor:pointer;
  background:var(--blue); color:#fff; text-decoration:none; transition:background .15s, transform .15s;
}
.bsb-btn:hover, .wp-block-button__link:hover, .wp-element-button:hover { background:var(--blue-deep); color:#fff; }
.bsb-btn--accent, .is-style-accent .wp-block-button__link { background:var(--violet); }
.bsb-btn--accent:hover, .is-style-accent .wp-block-button__link:hover { background:var(--violet-deep); }
.bsb-btn--ghost, .is-style-outline .wp-block-button__link { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.bsb-btn--ghost:hover, .is-style-outline .wp-block-button__link:hover { background:var(--ink); color:#fff; }
.bsb-btn--sm { padding:10px 18px; font-size:15px; }
.bsb-btn[hidden], [hidden].wp-block-button__link { display:none!important; }

/* ---------- header ---------- */
.bsb-header { position:sticky; top:0; z-index:50; background:rgba(245,246,251,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.admin-bar .bsb-header { top:32px; }
@media (max-width:782px){ .admin-bar .bsb-header { top:0; } }
.bsb-header__in { display:flex; align-items:center; gap:24px; height:72px; }
.bsb-logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.bsb-logo svg { width:30px; height:30px; flex:none; }
.bsb-logo span { font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.02em; }
.bsb-logo span small { font-size:inherit; font-weight:500; color:var(--muted); }
.bsb-nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.bsb-nav a:not(.bsb-btn) { color:var(--ink); text-decoration:none; font-weight:600; font-size:16px; padding:8px 12px; border-radius:var(--pill); }
.bsb-nav a:not(.bsb-btn):hover { background:var(--blue-soft); color:var(--blue-deep); }
.bsb-nav .bsb-btn { margin-left:8px; }
.bsb-burger { display:none; margin-left:auto; background:none; border:1.5px solid var(--ink); border-radius:var(--pill); padding:8px 14px; font:600 15px var(--body); color:var(--ink); cursor:pointer; }
@media (max-width:900px){
  .bsb-burger { display:inline-flex; }
  .bsb-nav { display:none; position:absolute; left:0; right:0; top:72px; flex-direction:column; align-items:stretch; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:8px var(--gutter) 16px; }
  .bsb-nav.is-open { display:flex; }
  .bsb-nav a:not(.bsb-btn) { padding:14px 4px; border-radius:0; border-bottom:1px solid var(--line); }
  .bsb-nav .bsb-btn { margin:12px 0 0; }
}

/* ---------- secties ---------- */
.bsb-section { padding-block:88px; }
@media (max-width:640px){ .bsb-section { padding-block:64px; } }
.bsb-section--white { background:var(--surface); border-block:1px solid var(--line); }
.bsb-section { padding-inline:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); box-sizing:border-box; }
.bsb-section > .bsb-narrow { max-width:760px; margin-inline:auto!important; }
.bsb-grid > *, .bsb-narrow > :first-child { margin-block-start:0!important; }
.bsb-eyebrow { font-weight:600; font-size:15px; line-height:22px; color:var(--blue); margin:0 0 12px!important; }
.bsb-section h2 { font-size:clamp(28px,4.2vw,40px); line-height:1.1; font-weight:700; margin:0 0 16px!important; }
.bsb-section h3 { font-size:20px; line-height:26px; font-weight:700; }
.bsb-lead { color:var(--muted); font-size:19px; line-height:28px; max-width:680px; margin:0 0 32px!important; }

/* ---------- hero ---------- */
.bsb-hero { position:relative; overflow:hidden; padding-block:72px 64px; }
.bsb-hero::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, transparent 0 23px, rgba(217,221,234,.7) 23px 24px); mask-image:linear-gradient(to bottom, #000 0, transparent 70%); -webkit-mask-image:linear-gradient(to bottom, #000 0, transparent 70%); pointer-events:none; }
.bsb-hero > * { position:relative; }
.bsb-podium { position:absolute!important; right:max(var(--gutter), calc((100% - var(--wrap))/2 + var(--gutter))); top:40px; display:flex; align-items:flex-end; gap:8px; height:180px; padding:0!important; margin:0!important; width:auto!important; }
.bsb-podium i { display:block; width:64px; border-radius:var(--r-md); background:var(--blue); }
.bsb-podium i:nth-child(1){ height:110px; } .bsb-podium i:nth-child(2){ height:170px; background:linear-gradient(var(--violet) 0 28px, var(--blue-deep) 28px); } .bsb-podium i:nth-child(3){ height:80px; }
@media (max-width:1000px){ .bsb-podium { display:none!important; } }
.bsb-hero h1 { font-size:clamp(36px,6.4vw,64px); line-height:1.05; font-weight:800; letter-spacing:-.02em; margin:0 0 20px!important; max-width:820px; }
.bsb-hero .bsb-lead { margin-bottom:36px!important; }

/* zinsbouwer */
.bsb-zin { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px; max-width:980px; box-sizing:border-box; }
.bsb-zin__sentence { font-family:var(--display); font-size:clamp(22px,3vw,32px); line-height:1.6; font-weight:600; letter-spacing:-.01em; margin:0 0 24px; }
.bsb-zin select { font:inherit; color:var(--ink); background:linear-gradient(transparent 58%, var(--violet-soft) 58%); border:0; border-bottom:2px solid var(--violet); padding:0 28px 0 4px; margin:0 2px; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:linear-gradient(transparent 58%, var(--violet-soft) 58%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B3FE8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:0 0, right 4px center; max-width:100%; }
.bsb-zin__actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.bsb-zin__note { color:var(--muted); font-size:15px; margin-left:4px; }
@media (max-width:640px){ .bsb-zin { padding:20px; } .bsb-zin__actions .bsb-btn { width:100%; } }

/* vertrouwensbalk */
.bsb-trust { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.bsb-trust > div { padding:20px 24px; border-left:1px solid var(--line); }
.bsb-trust > div:first-child { border-left:0; }
.bsb-trust strong { display:block; font-family:var(--display); font-size:28px; line-height:32px; font-weight:800; }
.bsb-trust span { color:var(--muted); font-size:15px; line-height:22px; }
@media (max-width:760px){ .bsb-trust { grid-template-columns:1fr 1fr; } .bsb-trust > div:nth-child(3){ border-left:0; } .bsb-trust > div:nth-child(n+3){ border-top:1px solid var(--line); } }

/* ---------- ranglijst ---------- */
.bsb-rank { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.bsb-rank__head, .bsb-row { display:grid; grid-template-columns:56px minmax(0,2.2fr) minmax(0,2fr) minmax(0,1fr) auto; gap:24px; align-items:center; padding:16px 24px; }
.bsb-rank__head { background:var(--sunken); color:var(--muted); font-size:13px; line-height:18px; font-weight:600; border-bottom:1px solid var(--line); }
.bsb-row + .bsb-row { border-top:1px solid var(--line); }
.bsb-row__rank { font-family:var(--display); font-size:28px; font-weight:800; color:var(--muted); }
.bsb-row:first-child .bsb-row__rank, .bsb-row.is-first .bsb-row__rank { color:var(--blue); }
.bsb-row__name { display:flex; align-items:center; gap:14px; min-width:0; }
.bsb-row__logo { width:48px; height:48px; border-radius:var(--r-md); background:var(--blue-soft); color:var(--blue-deep); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:18px; flex:none; overflow:hidden; }
.bsb-row__logo img { width:100%; height:100%; object-fit:contain; background:#fff; }
.bsb-row__name strong { display:block; font-size:18px; line-height:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bsb-row__name span { color:var(--muted); font-size:15px; }
.bsb-tags { display:flex; flex-wrap:wrap; gap:6px; }
.bsb-tag { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:2px 8px; font-size:13px; line-height:18px; font-weight:600; color:var(--ink); }
.bsb-tag--paid { color:var(--muted); background:transparent; }
.bsb-row__price { font-size:15px; color:var(--muted); }
.bsb-row__price b { display:block; color:var(--ink); font-size:17px; }
.bsb-rank--plain .bsb-row { grid-template-columns:minmax(0,1fr) auto; }
.bsb-rank--plain .bsb-row > :nth-child(n+2) { grid-column:auto; }
.bsb-rank__foot { padding:16px 24px; background:var(--sunken); border-top:1px solid var(--line); color:var(--muted); font-size:15px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
@media (max-width:860px){
  .bsb-rank__head { display:none; }
  .bsb-row { grid-template-columns:40px 1fr; gap:8px 16px; padding:16px; }
  .bsb-row > :nth-child(n+3) { grid-column:2; }
  .bsb-row__rank { font-size:22px; }
}

/* ---------- steden ---------- */
.bsb-cities { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
@media (max-width:640px){ .bsb-cities { grid-template-columns:1fr 1fr; gap:8px; } .bsb-city { flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; } }
.bsb-city { display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 20px; text-decoration:none; color:var(--ink); transition:border-color .15s, background .15s; }
a.bsb-city:hover { border-color:var(--blue); background:var(--blue-soft); color:var(--ink); }
.bsb-city strong { font-family:var(--display); font-size:18px; font-weight:700; }
.bsb-city span { color:var(--muted); font-size:15px; white-space:nowrap; }

/* ---------- kaarten / methode / kosten / gids ---------- */
.bsb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.bsb-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; }
.bsb-card h3 { margin:12px 0 8px!important; }
.bsb-card p { margin:0; color:var(--muted); }
.bsb-num { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--blue-soft); color:var(--blue-deep); font-family:var(--display); font-weight:800; }
.bsb-price { font-family:var(--display); font-size:28px; line-height:32px; font-weight:800; color:var(--ink); margin:8px 0 4px!important; }
.bsb-note { color:var(--muted); font-size:15px; margin-top:16px!important; }
.bsb-checks { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.bsb-checks li { position:relative; padding:16px 20px 16px 56px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.bsb-checks li::before { content:""; position:absolute; left:20px; top:19px; width:20px; height:20px; border-radius:50%; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.bsb-checks strong { display:block; }

/* ---------- offerteblok ---------- */
.bsb-offer { background:var(--blue-deep); color:#fff; border-radius:var(--r-xl); padding:56px; display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start; }
.bsb-offer h2 { color:#fff!important; }
.bsb-offer p, .bsb-offer li { color:#D7DEF5; }
.bsb-offer ul { padding-left:20px; margin:16px 0 0; }
@media (max-width:900px){ .bsb-offer { grid-template-columns:1fr; padding:32px 20px; gap:28px; } }
.bsb-form { background:var(--surface); color:var(--ink); border-radius:var(--r-lg); padding:28px; }
.bsb-form__bar { height:6px; background:var(--violet-soft); border-radius:var(--pill); overflow:hidden; margin-bottom:8px; }
.bsb-form__bar i { display:block; height:100%; width:33%; background:var(--violet); border-radius:inherit; transition:width .25s; }
.bsb-form__step-label { font-size:13px; font-weight:600; color:var(--muted); margin:0 0 16px; }
.bsb-form fieldset { border:0; padding:0; margin:0; display:grid; gap:14px; }
.bsb-form fieldset[hidden] { display:none; }
.bsb-form legend { font-family:var(--display); font-size:22px; font-weight:700; margin-bottom:6px; padding:0; }
.bsb-form label { display:grid; gap:6px; font-weight:600; font-size:15px; }
.bsb-form label small { font-weight:400; color:var(--muted); }
.bsb-form input:not([type=checkbox]), .bsb-form select, .bsb-form textarea { font:400 17px/24px var(--body); color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:11px 12px; width:100%; box-sizing:border-box; }
.bsb-form input:focus, .bsb-form select:focus, .bsb-form textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.bsb-form .bsb-check { display:flex; gap:10px; align-items:flex-start; font-weight:400; }
.bsb-form .bsb-check input { width:18px; height:18px; margin-top:3px; accent-color:var(--blue); }
.bsb-form__nav { display:flex; justify-content:space-between; gap:12px; margin-top:20px; }
.bsb-form__nav .bsb-btn--ghost { padding-inline:18px; }
.bsb-form__msg { margin-top:12px; font-size:15px; }
.bsb-form__msg.is-error { color:var(--danger); }
.bsb-form__done { text-align:center; padding:24px 8px; }
.bsb-form__done h3 { font-size:24px; margin:12px 0 8px; }
.bsb-hp { position:absolute!important; left:-9999px!important; }

/* ---------- faq ---------- */
.bsb-faq .wp-block-details { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:0; margin:0 0 10px!important; }
.bsb-faq .wp-block-details summary { cursor:pointer; list-style:none; padding:18px 56px 18px 22px; font-family:var(--display); font-size:19px; font-weight:700; position:relative; }
.bsb-faq .wp-block-details summary::-webkit-details-marker { display:none; }
.bsb-faq .wp-block-details summary::after { content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font:400 26px var(--body); color:var(--blue); }
.bsb-faq .wp-block-details[open] summary::after { content:"–"; }
.bsb-faq .wp-block-details > :not(summary) { padding:0 22px 18px; margin:0; color:var(--muted); }

/* ---------- pagina's ---------- */
.bsb-page { max-width:calc(760px + 2*var(--gutter)); margin:0 auto; padding:56px var(--gutter) 88px; box-sizing:border-box; }
.bsb-page h1 { font-size:clamp(32px,5vw,48px); line-height:1.1; font-weight:800; margin:0 0 24px; }

/* ---------- footer ---------- */
.bsb-footer { background:var(--ink); color:var(--on-ink); padding:64px 0 32px; font-size:15px; }
.bsb-footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.bsb-footer .bsb-logo, .bsb-footer .bsb-logo span { color:#fff; }
.bsb-footer .bsb-logo span small { color:var(--on-ink); }
.bsb-footer h4 { color:#fff; font-size:16px; margin:0 0 12px; }
.bsb-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.bsb-footer a { color:var(--on-ink); text-decoration:none; }
.bsb-footer a:hover { color:#fff; text-decoration:underline; }
.bsb-footer__bottom { border-top:1px solid rgba(188,195,218,.2); margin-top:48px; padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
@media (max-width:760px){ .bsb-footer__grid { grid-template-columns:1fr 1fr; } .bsb-footer__grid > :first-child { grid-column:1/-1; } }

/* 1.0.2 */
.bsb-row__name > div { min-width:0; }
.bsb-card .bsb-price { color:var(--ink); }
.bsb-offer .bsb-form p, .bsb-offer .bsb-form li { color:var(--muted); }
.bsb-offer .bsb-form .bsb-form__msg.is-error { color:var(--danger); }
@media (max-width:640px){
  .bsb-zin__sentence { font-size:20px; line-height:1.7; }
  .bsb-row__name strong { white-space:normal; }
  .bsb-rank--plain .bsb-row { gap:12px; }
}
.bsb-form label:not(.bsb-check) { display:block; }
.bsb-form label:not(.bsb-check) > input, .bsb-form label:not(.bsb-check) > select, .bsb-form label:not(.bsb-check) > textarea { margin-top:6px; display:block; }

/* 1.1.0 */
.bsb-city { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; }
.bsb-city__top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.bsb-city small { color:var(--muted); font-size:13px; line-height:18px; }
.bsb-answer { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:var(--r-lg); padding:24px 28px; max-width:860px; margin-bottom:32px!important; }
.bsb-answer h2 { font-size:24px!important; line-height:30px; margin:0 0 8px!important; }
.bsb-answer p { margin:0; color:var(--ink); }
.bsb-answer p + p { margin-top:12px; }
.bsb-meta { color:var(--muted); font-size:15px; margin:-16px 0 24px!important; }
.bsb-types .bsb-card p strong { color:var(--ink); }
@media (max-width:640px){ .bsb-city__top { flex-direction:column; gap:0; } }

/* 2.0: configurator en diensten */
.bsb-config { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; }
.bsb-config__main { padding:32px; display:block; }
.bsb-config fieldset { border:0; padding:0; margin:0; display:grid; gap:14px; }
.bsb-config fieldset[hidden] { display:none; }
.bsb-config legend { font-family:var(--display); font-size:24px; line-height:30px; font-weight:700; margin-bottom:6px; padding:0; }
.bsb-config__hint { margin:-6px 0 0; color:var(--muted); font-size:15px; }
.bsb-config label:not(.bsb-choice):not(.bsb-check) { display:block; font-weight:600; font-size:15px; }
.bsb-config label small { font-weight:400; color:var(--muted); }
.bsb-config input:not([type=checkbox]):not([type=radio]), .bsb-config textarea { display:block; margin-top:6px; font:400 17px/24px var(--body); color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:11px 12px; width:100%; box-sizing:border-box; }
.bsb-config input:focus, .bsb-config textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.bsb-config .bsb-check { display:flex; gap:10px; align-items:flex-start; font-size:15px; }
.bsb-config .bsb-check input { width:18px; height:18px; margin-top:3px; accent-color:var(--blue); flex:none; }
.bsb-config__row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bsb-choices { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.bsb-choice { position:relative; display:block; cursor:pointer; }
.bsb-choice input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.bsb-choice span { display:block; height:100%; box-sizing:border-box; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:14px 16px 14px 46px; background:#fff; transition:border-color .15s, background .15s; position:relative; }
.bsb-choice span::before { content:""; position:absolute; left:16px; top:17px; width:18px; height:18px; border:1.5px solid var(--line); border-radius:50%; background:#fff; }
.bsb-choice input[type=checkbox] + span::before { border-radius:5px; }
.bsb-choice strong { display:block; font-size:17px; line-height:22px; }
.bsb-choice small { display:block; color:var(--muted); font-size:14px; line-height:20px; margin-top:2px; }
.bsb-choice:hover span { border-color:var(--blue); }
.bsb-choice input:checked + span { border-color:var(--blue); background:var(--blue-soft); }
.bsb-choice input:checked + span::before { border-color:var(--blue); background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; }
.bsb-choice input:focus-visible + span { outline:3px solid var(--violet); outline-offset:2px; }
.bsb-config__sum { background:var(--blue-deep); color:#fff; padding:32px 28px; }
.bsb-config__sum-label { margin:0 0 8px; font-size:13px; font-weight:600; color:#C9B8FF; }
.bsb-config__pkg { font-family:var(--display); font-size:26px; line-height:30px; font-weight:800; margin:0 0 6px; }
.bsb-config__price { margin:0 0 20px; color:#D7DEF5; }
.bsb-config__price b { color:#fff; font-family:var(--display); font-size:22px; }
.bsb-config__incl { list-style:none; padding:0; margin:0 0 20px; display:grid; gap:10px; }
.bsb-config__incl li { position:relative; padding-left:26px; color:#E4E9FA; font-size:15px; line-height:22px; }
.bsb-config__incl li::before { content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; background:var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat; }
.bsb-config__note { font-size:13px; line-height:19px; color:#AEB9E0; margin:0; }
.bsb-config .bsb-form__msg { margin:12px 0 0; font-size:15px; }
.bsb-config .bsb-form__msg.is-error { color:var(--danger); }
@media (max-width:900px){ .bsb-config { grid-template-columns:1fr; } .bsb-config__sum { order:-1; padding:20px; } .bsb-config__incl { display:none; } .bsb-config__main { padding:20px; } }
@media (max-width:640px){ .bsb-config__row { grid-template-columns:1fr; } .bsb-choices { grid-template-columns:1fr; } }

.bsb-services { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.bsb-services > * { margin:0!important; }
.bsb-service { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; }
.bsb-service h3 { margin:14px 0 8px!important; }
.bsb-service p { margin:0; color:var(--muted); }
.bsb-icon { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r-md); background:var(--blue-soft); }
.bsb-icon svg { width:22px; height:22px; stroke:var(--blue-deep); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.bsb-two { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.bsb-two > * { margin:0!important; }
@media (max-width:900px){ .bsb-two { grid-template-columns:1fr; gap:24px; } }
.bsb-steps { counter-reset:stap; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.bsb-steps li { counter-increment:stap; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; color:var(--muted); }
.bsb-steps li::before { content:counter(stap); display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--display); font-weight:800; margin-bottom:14px; }
.bsb-steps strong { display:block; color:var(--ink); font-family:var(--display); font-size:19px; margin-bottom:6px; }
.bsb-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bsb-plans > * { margin:0!important; }
.bsb-plan { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; display:flex; flex-direction:column; }
.bsb-plan.is-featured { border:2px solid var(--blue); position:relative; }
.bsb-plan.is-featured::after { content:"Meest gekozen"; position:absolute; top:-12px; left:24px; background:var(--blue); color:#fff; font-size:13px; font-weight:600; padding:2px 10px; border-radius:var(--pill); }
.bsb-plan h3 { margin:0 0 4px!important; font-size:22px!important; }
.bsb-plan .bsb-plan__for { color:var(--muted); font-size:15px; margin:0 0 16px; }
.bsb-plan .bsb-price { margin:0 0 16px!important; }
.bsb-plan .bsb-price small { font-family:var(--body); font-size:15px; font-weight:400; color:var(--muted); }
.bsb-plan ul { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:8px; flex:1; }
.bsb-plan li { position:relative; padding-left:26px; font-size:15px; line-height:22px; }
.bsb-plan li::before { content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat; }
@media (max-width:900px){ .bsb-plans { grid-template-columns:1fr; } }
.bsb-prose p { color:var(--ink); margin:0 0 16px!important; max-width:68ch; }
.bsb-prose h3 { margin:24px 0 8px!important; }
.bsb-prose p.bsb-eyebrow { color:var(--blue); }
@media (max-width:640px){ .bsb-trust strong { font-size:20px; line-height:26px; } .bsb-trust > div { padding:16px; } }

/* 2.1: conversie */
.bsb-hero-card { display:none; }
@media (min-width:1100px){
  .bsb-hero > :not(.bsb-hero-card) { max-width:660px; }
  .bsb-hero-card { display:block; position:absolute!important; top:72px; right:max(var(--gutter), calc((100% - var(--wrap))/2 + var(--gutter))); width:360px; box-sizing:border-box; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:28px; margin:0!important; box-shadow:0 18px 40px rgba(20,27,52,.08); }
}
.bsb-hero-card__label { margin:0 0 6px; font-size:13px; font-weight:600; color:var(--violet); }
.bsb-hero-card__title { margin:0 0 16px; font-family:var(--display); font-size:24px; line-height:28px; font-weight:800; }
.bsb-hero-card ul { list-style:none; padding:0; margin:0 0 20px; display:grid; gap:10px; }
.bsb-hero-card li { position:relative; padding-left:26px; font-size:15px; line-height:22px; }
.bsb-hero-card li::before, .bsb-ticks li::before { content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat; }
.bsb-hero-card .bsb-btn { width:100%; }
.bsb-ticks { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 18px; }
.bsb-ticks li { position:relative; padding-left:22px; font-size:15px; color:var(--muted); }
.bsb-calc { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bsb-calc > div { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; }
.bsb-calc strong { display:block; font-family:var(--display); font-size:36px; line-height:40px; font-weight:800; color:var(--blue); }
.bsb-calc span { font-size:15px; line-height:21px; color:var(--muted); }
.bsb-calc .bsb-note { grid-column:1/-1; margin:0!important; }
@media (max-width:640px){ .bsb-calc { grid-template-columns:1fr; } .bsb-calc > div { display:flex; gap:14px; align-items:center; padding:14px 16px; } .bsb-calc strong { font-size:28px; min-width:72px; } }
.bsb-cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:28px!important; color:var(--muted); font-size:15px; }
.bsb-config__trust { margin:10px 0 0; font-size:13px; color:var(--muted); }
.bsb-sticky-cta { display:none; }
@media (max-width:760px){
  .bsb-sticky-cta { display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:60; justify-content:center; padding:15px 20px; border-radius:var(--pill); background:var(--violet); color:#fff!important; font-weight:600; text-decoration:none; box-shadow:var(--shadow); transition:transform .2s, opacity .2s; }
  .bsb-sticky-cta.is-hidden { transform:translateY(120%); opacity:0; pointer-events:none; }
  .bsb-footer { padding-bottom:96px; }
}
.bsb-hero-card .bsb-btn { box-sizing:border-box; }

/* 2.3: vergelijkingstabel */
.bsb-compare { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.bsb-compare table { width:100%; border-collapse:collapse; font-size:15px; }
.bsb-compare th, .bsb-compare td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.bsb-compare thead th { background:var(--sunken); font-size:13px; color:var(--muted); }
.bsb-compare thead th:last-child, .bsb-compare td:last-child { background:var(--blue-soft); color:var(--blue-deep); font-weight:600; }
.bsb-compare tbody th { font-weight:600; }
.bsb-compare .bsb-note { padding:12px 14px; margin:0!important; }
@media (max-width:640px){ .bsb-compare th, .bsb-compare td { padding:10px 8px; font-size:14px; } }

/* 2.4 */
.bsb-plans--2 { grid-template-columns:repeat(2,1fr); max-width:820px; }
@media (max-width:900px){ .bsb-plans--2 { grid-template-columns:1fr; } }
.bsb-ticks--lg { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.bsb-ticks--lg li { font-size:17px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px 14px 44px; }
.bsb-ticks--lg li::before { left:16px; top:17px; }
.bsb-service a { display:inline-block; margin-top:6px; font-weight:600; }

/* 3.0 gids */
.bsb-toc { margin:0; padding-left:20px; display:grid; gap:10px; }
.bsb-toc li { font-size:15px; line-height:22px; color:var(--muted); }
.bsb-toc a { color:var(--ink); text-decoration:none; font-weight:600; }
.bsb-toc a:hover { color:var(--blue); text-decoration:underline; }
.bsb-compare--plain thead th:last-child, .bsb-compare--plain td:last-child { background:transparent; color:var(--ink); font-weight:600; }
.bsb-compare--plain { max-width:900px; }
.bsb-trustbar .bsb-answer { max-width:none; }
.bsb-hero-card .bsb-toc li { padding-left:0; }
.bsb-hero-card .bsb-toc li::before { display:none; }
.bsb-compare--plain thead th:last-child { background:var(--sunken); color:var(--muted); font-weight:600; }
.bsb-hero h1 { font-size:clamp(34px,5.4vw,56px); }