/* ==========================================================================
   BV v3 design-laag (22-09-2026). Alleen actief met body.bv3.bv3d (inc/bv3-design.php).
   Eén primaire actiekleur (blauw), navy voor vlakken, groen alleen voor vinkjes, amber alleen voor plaats 1.
   Ritme 8/16/24/32/48/72 px; lopende tekst 16-18 px; kaarttitels 20-24 px.
   ========================================================================== */
html body.bv3.bv3d {
  --d-ink: #0B1B33;
  --d-body: #334155;
  --d-muted: #5B6B80;
  --d-line: #E3E8EF;
  --d-soft: #F6F8FB;
  --d-blue: #2563EB;
  --d-blue-d: #1D4ED8;
  --d-blue-s: #EEF4FF;
  --d-navy: #0F2A4A;
  --d-navy-2: #16365E;
  --d-green: #047857;
  --d-amber: #F59E0B;
  --d-r: 14px;
  --d-r-lg: 20px;
  --d-sh: 0 1px 2px rgba(11, 27, 51, .05), 0 4px 16px rgba(11, 27, 51, .06);
  --d-sh-2: 0 2px 6px rgba(11, 27, 51, .06), 0 16px 40px rgba(11, 27, 51, .10);
  background: #fff;
}

/* --------------------------------------------------------------------------
   Knoppen, labels, links
   ----------------------------------------------------------------------- */
html body.bv3.bv3d .bv3d-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px !important; border-radius: 12px !important; font: 700 16px/1.2 var(--b3-font) !important; text-decoration: none !important; border: 1.5px solid transparent !important; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, transform .15s; white-space: nowrap; box-shadow: none; }
html body.bv3.bv3d .bv3d-btn .bv3-ic { width: 18px; height: 18px; }
html body.bv3.bv3d .bv3d-btn--lg { min-height: 54px; padding: 0 26px !important; font-size: 17px !important; }
html body.bv3.bv3d .bv3d-btn--primary { background: var(--d-blue) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(37, 99, 235, .25) !important; }
html body.bv3.bv3d .bv3d-btn--primary:hover { background: var(--d-blue-d) !important; transform: translateY(-1px); }
html body.bv3.bv3d .bv3d-btn--ghost { background: #fff !important; color: var(--d-ink) !important; border-color: #CBD5E1 !important; }
html body.bv3.bv3d .bv3d-btn--ghost:hover { border-color: var(--d-blue) !important; color: var(--d-blue) !important; }
html body.bv3.bv3d .bv3d-btn--white { background: #fff !important; color: var(--d-navy) !important; }
html body.bv3.bv3d .bv3d-btn--white:hover { background: var(--d-blue-s) !important; }
html body.bv3.bv3d .bv3d-btn--onnavy { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, .45) !important; }
html body.bv3.bv3d .bv3d-btn--onnavy:hover { border-color: #fff !important; }
html body.bv3.bv3d .bv3d-btn:focus-visible, html body.bv3.bv3d a:focus-visible, html body.bv3.bv3d button:focus-visible, html body.bv3.bv3d summary:focus-visible { outline: 3px solid #93C5FD !important; outline-offset: 2px; }
html body.bv3.bv3d .bv3d-link { display: inline-flex !important; align-items: center; gap: 6px; color: var(--d-blue) !important; font-weight: 700; text-decoration: none !important; min-height: 44px; }
html body.bv3.bv3d .bv3d-link:hover { text-decoration: underline !important; }
html body.bv3.bv3d .bv3d-link .bv3-ic { width: 16px; height: 16px; }
html body.bv3.bv3d .bv3d-eyebrow { display: inline-block; font: 700 13px/1.2 var(--b3-font) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--d-blue) !important; margin: 0 0 10px; }
html body.bv3.bv3d .bv3d-eyebrow--pill { background: var(--d-blue-s); padding: 7px 12px; border-radius: 999px; font-size: 12px !important; }
html body.bv3.bv3d .bv3d-badge { display: inline-flex; align-items: center; font: 700 12px/1 var(--b3-font); letter-spacing: .04em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; background: var(--d-blue-s); color: #1E3A8A; white-space: nowrap; }
html body.bv3.bv3d .bv3d-badge--top { background: #FEF3C7; color: #92400E; }

/* Sectiekoppen (vervangt de blauwe streep) */
html body.bv3.bv3d .bv3d-head { max-width: 760px; margin: 0 auto 32px; }
html body.bv3.bv3d .bv3d-head--center { text-align: center; }
html body.bv3.bv3d .bv3d-head--left { margin-left: 0; text-align: left; }
html body.bv3.bv3d .bv3d-head .bv3d-head__title { font: 800 clamp(28px, 2.2vw + 14px, 40px)/1.15 var(--b3-font) !important; letter-spacing: -.025em !important; color: var(--d-ink) !important; margin: 0 0 12px !important; padding: 0 !important; text-align: inherit !important; max-width: none !important; }
html body.bv3.bv3d .bv3d-head .bv3d-head__title::before, html body.bv3.bv3d .bv3d-head .bv3d-head__title::after { content: none !important; display: none !important; }
html body.bv3.bv3d .bv3d-head .bv3d-head__intro { font-size: 17px !important; line-height: 1.6 !important; color: var(--d-muted) !important; margin: 0 auto !important; max-width: 680px !important; text-align: inherit !important; }

/* --------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------- */
html body.bv3.bv3d .bv3d-hero { background: radial-gradient(1200px 500px at 85% -10%, #E6EFFF 0%, rgba(230, 239, 255, 0) 60%), linear-gradient(180deg, #F8FAFE 0%, #fff 100%); padding: 56px 0 48px; border-bottom: 1px solid var(--d-line); }
html body.bv3.bv3d .bv3d-hero__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: center; }
html body.bv3.bv3d .bv3d-hero .bv3d-hero__title { font: 800 clamp(34px, 2.6vw + 16px, 54px)/1.08 var(--b3-font) !important; letter-spacing: -.035em !important; color: var(--d-ink) !important; margin: 6px 0 18px !important; padding: 0 !important; max-width: 16.5em !important; text-align: left !important; }
html body.bv3.bv3d .bv3d-hero .bv3d-hero__title em { font-style: normal; color: var(--d-blue); }
html body.bv3.bv3d .bv3d-hero .bv3d-hero__title-sub { display: block; font-size: .62em; font-weight: 700; letter-spacing: -.02em; color: #475569; margin-top: 10px; line-height: 1.2; }
html body.bv3.bv3d .bv3d-hero .bv3d-hero__lead { font-size: 18px !important; line-height: 1.6 !important; color: var(--d-body) !important; margin: 0 0 26px !important; max-width: 36em !important; text-align: left !important; }
html body.bv3.bv3d .bv3d-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
html body.bv3.bv3d .bv3d-hero__usps { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px 22px; }
html body.bv3.bv3d .bv3d-hero__usps li { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--d-body); padding: 0; margin: 0; }
html body.bv3.bv3d .bv3d-hero__usps .bv3-ic { width: 17px; height: 17px; color: var(--d-green); }

/* Top 3-kaart */
html body.bv3.bv3d .bv3d-top3 { background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-r-lg); box-shadow: var(--d-sh-2); padding: 20px; }
html body.bv3.bv3d .bv3d-top3__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 4px 14px; border-bottom: 1px solid var(--d-line); margin-bottom: 8px; }
html body.bv3.bv3d .bv3d-top3__title { font: 800 17px/1.2 var(--b3-font); color: var(--d-ink); }
html body.bv3.bv3d .bv3d-top3__date { font-size: 13px; color: var(--d-muted); }
html body.bv3.bv3d .bv3d-top3__list { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 6px; }
html body.bv3.bv3d .bv3d-top3__item { margin: 0; padding: 0; }
html body.bv3.bv3d .bv3d-top3 a.bv3d-top3__row, html body.bv3.bv3d .bv3d-top3 .bv3d-top3__row { display: grid !important; grid-template-columns: 28px 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 10px !important; border-radius: 12px; text-decoration: none !important; color: inherit !important; background: transparent; border: 1px solid transparent; margin: 0 !important; box-shadow: none !important; transform: none !important; }
html body.bv3.bv3d .bv3d-top3 a.bv3d-top3__row:hover { background: var(--d-soft); border-color: var(--d-line); }
html body.bv3.bv3d .bv3d-top3__item--best a.bv3d-top3__row { background: #FFFBEB; border-color: #FDE68A; }
html body.bv3.bv3d .bv3d-top3__rank { width: 28px; height: 28px; border-radius: 50%; background: #EEF2F7; color: var(--d-ink); display: flex; align-items: center; justify-content: center; font: 800 14px/1 var(--b3-font); }
html body.bv3.bv3d .bv3d-top3__item--best .bv3d-top3__rank { background: var(--d-amber); color: #1F1300; }
html body.bv3.bv3d .bv3d-top3__logo { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--d-line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
html body.bv3.bv3d .bv3d-top3__logo img { width: 36px !important; height: 36px !important; object-fit: contain; }
html body.bv3.bv3d .bv3d-top3__info { display: grid; gap: 2px; min-width: 0; }
html body.bv3.bv3d .bv3d-top3__name { font: 800 16px/1.2 var(--b3-font); color: var(--d-ink); }
html body.bv3.bv3d .bv3d-top3__fit { font-size: 13.5px; color: var(--d-muted); line-height: 1.3; }
html body.bv3.bv3d .bv3d-top3__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--d-body); }
html body.bv3.bv3d .bv3d-top3__rating { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
html body.bv3.bv3d .bv3d-top3__rating .bv3-ic { width: 14px; height: 14px; color: var(--d-amber); fill: var(--d-amber); }
html body.bv3.bv3d .bv3d-top3__cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--d-blue); color: #fff; font: 700 14px/1 var(--b3-font); white-space: nowrap; }
html body.bv3.bv3d .bv3d-top3 a.bv3d-top3__row:hover .bv3d-top3__cta { background: var(--d-blue-d); }
html body.bv3.bv3d .bv3d-top3__foot { padding: 12px 4px 0; border-top: 1px solid var(--d-line); margin-top: 8px; display: grid; gap: 2px; }
html body.bv3.bv3d .bv3d-top3__foot p { font-size: 13px !important; line-height: 1.45 !important; color: var(--d-muted) !important; margin: 0 !important; }

/* Vertrouwensstrook */
html body.bv3.bv3d .bv3d-trust { background: #fff; border-bottom: 1px solid var(--d-line); }
html body.bv3.bv3d .bv3d-trust__list { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding-top: 20px !important; padding-bottom: 20px !important; }
html body.bv3.bv3d .bv3d-trust__list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--d-body); margin: 0; padding: 0; }
html body.bv3.bv3d .bv3d-trust__list .bv3-ic { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--d-blue-s); color: var(--d-blue); }
html body.bv3.bv3d .bv3d-trust__list strong { color: var(--d-ink); }
html body.bv3.bv3d .bv3d-trust__list a { color: var(--d-ink) !important; font-weight: 700; text-decoration: underline !important; text-decoration-color: #BFD3FB !important; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Vergelijker
   ----------------------------------------------------------------------- */
html body.bv3.bv3d .comparison-sec { background: var(--d-soft); padding: 72px 0 !important; border-top: 0; }
html body.bv3.bv3d .comparison-sec .scroll_list_serv { max-height: none !important; overflow: visible !important; padding-right: 0 !important; margin: 16px 0 0 !important; }
html body.bv3.bv3d .comparison-sec .bv-compare { gap: 28px !important; }
html body.bv3.bv3d .comparison-sec .bv-compare__sidebar { background: #fff !important; border: 1px solid var(--d-line) !important; border-radius: var(--d-r-lg) !important; box-shadow: var(--d-sh) !important; padding: 22px 20px !important; }
@media (min-width: 992px) { html body.bv3.bv3d .comparison-sec .bv-compare__sidebar { position: sticky !important; top: calc(var(--b3-header-h) + 16px) !important; } }
html body.bv3.bv3d .comparison-sec .bv-compare__sidebar-title { font: 800 16px/1.2 var(--b3-font) !important; color: var(--d-ink) !important; margin: 0 0 14px !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--d-line) !important; }
html body.bv3.bv3d .comparison-sec .bv-compare__group-label { font: 700 12px/1.2 var(--b3-font) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--d-muted) !important; }
html body.bv3.bv3d .comparison-sec .feature-btn { min-height: 40px; border-radius: 10px !important; font-size: 15px !important; color: var(--d-body) !important; }
html body.bv3.bv3d .comparison-sec .feature-btn.active { background: var(--d-blue-s) !important; color: #1E3A8A !important; font-weight: 700 !important; }
html body.bv3.bv3d .bv3d-filter-label { display: block; font: 700 14px/1.3 var(--b3-font); color: var(--d-ink); margin: 0 0 6px; }
html body.bv3.bv3d .comparison-sec .filter-dropdown { min-height: 44px; border-radius: 10px !important; border-color: #CBD5E1 !important; font-size: 15px !important; color: var(--d-ink) !important; }
html body.bv3.bv3d .comparison-sec .bv-compare__reset { min-height: 44px; border-radius: 10px !important; font-weight: 700 !important; }
html body.bv3.bv3d .comparison-sec .bv-compare__results-head { padding: 0 0 14px !important; border-bottom: 1px solid var(--d-line) !important; margin: 0 !important; }
html body.bv3.bv3d .comparison-sec .bv-compare__count { font-size: 16px !important; color: var(--d-body) !important; }
html body.bv3.bv3d .comparison-sec .bv-compare__count strong { font-size: 22px !important; color: var(--d-ink) !important; }
html body.bv3.bv3d .comparison-sec #bvCompareSort { min-height: 44px; border-radius: 10px; }
html body.bv3.bv3d .comparison-sec .bv-compare__sidebar-toggle { min-height: 48px; border-radius: 12px !important; font-weight: 700 !important; background: #fff !important; border: 1px solid var(--d-line) !important; }

/* Besliskaart */
html body.bv3.bv3d #softwareList { display: grid; gap: 16px; }
html body.bv3.bv3d #softwareList > .bv3d-card { background: #fff !important; border: 1px solid var(--d-line) !important; border-radius: var(--d-r-lg) !important; box-shadow: var(--d-sh) !important; padding: 24px !important; margin: 0 !important; position: relative; overflow: visible; }
html body.bv3.bv3d #softwareList > .bv3d-card--top { border-color: #FCD34D !important; box-shadow: 0 0 0 1px #FDE68A, var(--d-sh) !important; }
html body.bv3.bv3d .bv3d-card__top { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: start; }
html body.bv3.bv3d .bv3d-card__logo { width: 64px; height: 64px; border-radius: 14px; border: 1px solid var(--d-line); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
html body.bv3.bv3d .bv3d-card__logo img { width: 52px !important; height: 52px !important; object-fit: contain; max-width: none !important; }
html body.bv3.bv3d .bv3d-card__titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
html body.bv3.bv3d .bv3d-card .bv3d-card__name { font: 800 22px/1.2 var(--b3-font) !important; letter-spacing: -.02em !important; color: var(--d-ink) !important; margin: 0 !important; padding: 0 !important; }
html body.bv3.bv3d .bv3d-card .bv3d-card__name::before, html body.bv3.bv3d .bv3d-card .bv3d-card__name::after { content: none !important; }
html body.bv3.bv3d .bv3d-card .bv3d-card__fit { font-size: 15px !important; color: var(--d-muted) !important; margin: 4px 0 8px !important; line-height: 1.4 !important; }
html body.bv3.bv3d .bv3d-card__scores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14.5px; color: var(--d-body); }
html body.bv3.bv3d .bv3d-score { display: inline-flex; align-items: baseline; gap: 5px; }
html body.bv3.bv3d .bv3d-score strong { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 26px; padding: 0 6px; border-radius: 7px; background: var(--d-navy); color: #fff; font-size: 14px; }
html body.bv3.bv3d .bv3d-users { display: inline-flex; align-items: center; gap: 6px; }
html body.bv3.bv3d .bv3d-card .star_box { display: inline !important; font-size: 14.5px !important; color: var(--d-body) !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body.bv3.bv3d .bv3d-card__price { text-align: right; min-width: 170px; }
html body.bv3.bv3d .bv3d-card__pricelbl { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--d-muted); margin-bottom: 4px; }
html body.bv3.bv3d .bv3d-card .vanaf-mnd { font: 800 19px/1.25 var(--b3-font) !important; color: var(--d-ink) !important; background: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; display: block !important; box-shadow: none !important; }
html body.bv3.bv3d .bv3d-card__facts { list-style: none; margin: 18px 0 0 !important; padding: 16px 0 0 !important; border-top: 1px solid var(--d-line); display: grid; gap: 9px; }
html body.bv3.bv3d .bv3d-card__facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px !important; line-height: 1.5 !important; color: var(--d-body) !important; margin: 0; padding: 0; background: none !important; }
html body.bv3.bv3d .bv3d-card__facts li::before { content: none !important; display: none !important; }
html body.bv3.bv3d .bv3d-card__facts .bv3-ic { width: 18px; height: 18px; color: var(--d-green); margin-top: 3px; }
html body.bv3.bv3d .bv3d-card__more { margin-top: 10px; }
html body.bv3.bv3d .bv3d-card__more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; font-weight: 700; color: var(--d-blue); list-style: none; }
html body.bv3.bv3d .bv3d-card__more > summary::-webkit-details-marker { display: none; }
html body.bv3.bv3d .bv3d-card__more > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
html body.bv3.bv3d .bv3d-card__more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
html body.bv3.bv3d .bv3d-card__more > summary span { font-weight: 500; color: var(--d-muted); }
html body.bv3.bv3d .bv3d-card__more .bv3d-card__facts { margin-top: 6px !important; padding-top: 6px !important; border-top: 0; }
html body.bv3.bv3d .bv3d-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--d-line); }
html body.bv3.bv3d .bv3d-card__actions .affiliate-cta-btn { min-width: 190px; }
html body.bv3.bv3d .bv3d-card__cmp { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 0 auto !important; padding: 0 12px; border-radius: 10px; border: 1px solid var(--d-line); font-weight: 600; color: var(--d-ink); cursor: pointer; }
html body.bv3.bv3d .bv3d-card__cmp .compare-select { width: 20px; height: 20px; margin: 0 !important; float: none !important; position: static !important; accent-color: var(--d-blue); cursor: pointer; }
html body.bv3.bv3d .bv3d-card__cmp:has(.compare-select:checked) { border-color: var(--d-blue); background: var(--d-blue-s); color: #1E3A8A; }
html body.bv3.bv3d .bv3d-card .bv3d-card__note { font-size: 13px !important; color: var(--d-muted) !important; margin: 10px 0 0 !important; line-height: 1.4 !important; }
html body.bv3.bv3d #softwareList .bv-skeleton-cards { display: grid; gap: 16px; }

/* Vergelijkbalk onderaan: compact, boven de consentbalk */
html body.bv3.bv3d .sticky-compare-btn { background: var(--d-navy) !important; padding: 12px 16px !important; gap: 16px; align-items: center; box-shadow: 0 -8px 24px rgba(11, 27, 51, .18) !important; }
html body.bv3.bv3d .sticky-compare-btn .compareSelected { font: 700 16px/1.3 var(--b3-font) !important; margin: 0 !important; color: #fff !important; }
html body.bv3.bv3d .sticky-compare-btn #compareButton { min-height: 44px; border-radius: 10px !important; background: #fff !important; color: var(--d-navy) !important; font-weight: 800 !important; }

/* --------------------------------------------------------------------------
   Top 5
   ----------------------------------------------------------------------- */
html body.bv3.bv3d .bv3-top5 { background: #fff; padding: 80px 0; }
html body.bv3.bv3d .bv3-top5__head { max-width: 780px; margin-bottom: 32px; }
html body.bv3.bv3d .bv3-top5__head h2 { font-size: clamp(28px, 2.2vw + 14px, 40px) !important; letter-spacing: -.025em !important; }
html body.bv3.bv3d .bv3-top5__item { border-radius: var(--d-r-lg); border-color: var(--d-line); box-shadow: var(--d-sh); grid-template-columns: 52px 230px minmax(0, 1fr) 230px; padding: 24px; }
html body.bv3.bv3d .bv3-top5__item--1 { border-color: #FCD34D; box-shadow: 0 0 0 1px #FDE68A, var(--d-sh-2); }
html body.bv3.bv3d .bv3d-t5brand { display: grid !important; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
html body.bv3.bv3d .bv3d-t5brand__logo { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--d-line); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
html body.bv3.bv3d .bv3d-t5brand__logo img { width: 40px !important; height: 40px !important; max-width: none !important; object-fit: contain; }
html body.bv3.bv3d .bv3d-t5brand__txt { display: grid; gap: 3px; }
html body.bv3.bv3d .bv3d-t5brand__name { font: 800 19px/1.2 var(--b3-font); color: var(--d-ink); letter-spacing: -.01em; }
html body.bv3.bv3d .bv3d-t5brand__score { font-size: 13.5px; color: var(--d-muted); }
html body.bv3.bv3d .bv3d-t5brand__score strong { color: var(--d-ink); }
html body.bv3.bv3d .bv3d-t5brand .bv3-top5__label { grid-column: 1 / -1; justify-self: start; text-transform: none; letter-spacing: 0; font-size: 13px; }

/* --------------------------------------------------------------------------
   Over ons + CTA
   ----------------------------------------------------------------------- */
html body.bv3.bv3d .bv3d-about { background: var(--d-soft); padding: 80px 0; border-top: 1px solid var(--d-line); }
html body.bv3.bv3d .bv3d-about__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
html body.bv3.bv3d .bv3d-about__text h2 { font: 800 clamp(28px, 2vw + 14px, 38px)/1.15 var(--b3-font) !important; letter-spacing: -.025em !important; color: var(--d-ink) !important; margin: 0 0 14px !important; padding: 0 !important; text-align: left !important; }
html body.bv3.bv3d .bv3d-about__text p { font-size: 17px !important; line-height: 1.7 !important; color: var(--d-body) !important; margin: 0 0 22px !important; text-align: left !important; }
html body.bv3.bv3d .bv3d-about__points { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 12px; }
html body.bv3.bv3d .bv3d-about__points li { margin: 0; padding: 0; }
html body.bv3.bv3d .bv3d-about__points a { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 18px !important; background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-r); text-decoration: none !important; color: var(--d-body) !important; box-shadow: var(--d-sh); transition: border-color .15s, transform .15s; }
html body.bv3.bv3d .bv3d-about__points a:hover { border-color: var(--d-blue); transform: translateY(-1px); }
html body.bv3.bv3d .bv3d-about__points .bv3-ic:first-child { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--d-blue-s); color: var(--d-blue); }
html body.bv3.bv3d .bv3d-about__points .bv3-ic:last-child { color: var(--d-muted); }
html body.bv3.bv3d .bv3d-about__points span { font-size: 15px; line-height: 1.45; }
html body.bv3.bv3d .bv3d-about__points strong { display: block; font-size: 16.5px; color: var(--d-ink); margin-bottom: 2px; }

html body.bv3.bv3d .bv3d-cta { padding: 0 0 8px; background: linear-gradient(180deg, var(--d-soft) 0 50%, #fff 50% 100%); }
html body.bv3.bv3d .bv3d-cta__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background: radial-gradient(600px 240px at 90% 0%, rgba(37, 99, 235, .45), rgba(37, 99, 235, 0)), var(--d-navy); border-radius: 24px; padding: 40px 44px; box-shadow: var(--d-sh-2); }
html body.bv3.bv3d .bv3d-cta__text h2 { font: 800 clamp(24px, 1.6vw + 14px, 32px)/1.2 var(--b3-font) !important; color: #fff !important; margin: 0 0 6px !important; padding: 0 !important; text-align: left !important; letter-spacing: -.02em !important; }
html body.bv3.bv3d .bv3d-cta__text p { color: #CBD5E1 !important; font-size: 17px !important; margin: 0 !important; text-align: left !important; }
html body.bv3.bv3d .bv3d-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Voordelen, stappen, blogs, FAQ (bestaande blokken, nieuwe stijl)
   ----------------------------------------------------------------------- */
html body.bv3.bv3d .Benefits { padding: 80px 0 56px !important; background: #fff; }
html body.bv3.bv3d .Benefits .benefit_box { height: 100%; text-align: left !important; display: flex; flex-direction: column; align-items: flex-start !important; gap: 14px; padding: 24px !important; border: 1px solid var(--d-line) !important; border-radius: var(--d-r-lg) !important; box-shadow: var(--d-sh) !important; background: #fff !important; }
html body.bv3.bv3d .Benefits .benefit_icon { width: 48px !important; height: 48px !important; border-radius: 12px !important; background: var(--d-blue-s) !important; color: var(--d-blue); display: flex !important; align-items: center; justify-content: center; margin: 0 !important; }
html body.bv3.bv3d .Benefits .benefit_icon .bv3-ic { width: 24px; height: 24px; }
html body.bv3.bv3d .Benefits .benefit_box p { font: 700 17px/1.4 var(--b3-font) !important; color: var(--d-ink) !important; text-align: left !important; margin: 0 !important; }

html body.bv3.bv3d .how-it-work { background: var(--d-soft) !important; padding: 80px 0 !important; }
html body.bv3.bv3d .how-it-work .bv-steps { gap: 20px !important; }
html body.bv3.bv3d .how-it-work .bv-step { border: 1px solid var(--d-line) !important; border-radius: var(--d-r-lg) !important; box-shadow: var(--d-sh) !important; text-align: left !important; padding: 28px 24px 24px !important; align-items: flex-start !important; }
html body.bv3.bv3d .how-it-work .bv-step__number { position: static !important; transform: none !important; margin: 0 0 14px !important; width: 40px !important; height: 40px !important; font-size: 15px !important; background: var(--d-navy) !important; box-shadow: none !important; border: 0 !important; }
html body.bv3.bv3d .how-it-work .bv-step__icon { display: none !important; }
html body.bv3.bv3d .how-it-work .bv-step h3 { font: 800 19px/1.3 var(--b3-font) !important; color: var(--d-ink) !important; text-align: left !important; margin: 0 0 8px !important; }
html body.bv3.bv3d .how-it-work .bv-step p { font-size: 15.5px !important; line-height: 1.6 !important; color: var(--d-body) !important; text-align: left !important; }
html body.bv3.bv3d .how-it-work .bv-steps::before, html body.bv3.bv3d .how-it-work .bv-step::before, html body.bv3.bv3d .how-it-work .bv-step::after { display: none !important; }

html body.bv3.bv3d .blog-sec { padding: 80px 0 56px !important; background: #fff; }
html body.bv3.bv3d .blog-sec .blog_box_section { position: relative; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--d-line) !important; border-radius: var(--d-r-lg) !important; box-shadow: var(--d-sh) !important; overflow: hidden; background: #fff !important; transition: box-shadow .15s, transform .15s; padding: 0 !important; }
html body.bv3.bv3d .blog-sec .blog_box_section:hover { box-shadow: var(--d-sh-2) !important; transform: translateY(-2px); }
html body.bv3.bv3d .blog-sec .blog_box_section > a { display: block; aspect-ratio: 16 / 7; overflow: hidden; }
html body.bv3.bv3d .blog-sec .blog_box_section .bv3-cover { width: 100%; height: 100%; display: block; }
html body.bv3.bv3d .blog-sec .blog_content { padding: 20px 22px 8px !important; flex: 1; }
html body.bv3.bv3d .blog-sec .blog_content .date { display: inline-block; background: none !important; padding: 0 !important; margin: 0 0 8px !important; font: 700 12.5px/1.2 var(--b3-font) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--d-muted) !important; }
html body.bv3.bv3d .blog-sec .bv3d-blog-title { font: 800 19px/1.35 var(--b3-font) !important; letter-spacing: -.01em !important; margin: 0 0 8px !important; padding: 0 !important; }
html body.bv3.bv3d .blog-sec .bv3d-blog-title a { color: var(--d-ink) !important; text-decoration: none !important; }
html body.bv3.bv3d .blog-sec .bv3d-blog-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
html body.bv3.bv3d .blog-sec .blog_box_section:hover .bv3d-blog-title a { color: var(--d-blue) !important; }
html body.bv3.bv3d .blog-sec .blog_content p { font-size: 15px !important; line-height: 1.55 !important; color: var(--d-body) !important; margin: 0 !important; }
html body.bv3.bv3d .blog-sec .bv3d-blog-more { padding: 4px 22px 18px; }

html body.bv3.bv3d .faq_sec { padding: 80px 0 !important; background: var(--d-soft) !important; }
html body.bv3.bv3d .faq_sec .new-accordion { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
html body.bv3.bv3d .faq_sec .accordion-item { border: 1px solid var(--d-line) !important; border-radius: var(--d-r) !important; overflow: hidden; background: #fff !important; box-shadow: none !important; margin: 0 !important; }
html body.bv3.bv3d .faq_sec .accordion-button { font: 700 17px/1.4 var(--b3-font) !important; color: var(--d-ink) !important; background: #fff !important; padding: 18px 22px !important; box-shadow: none !important; min-height: 60px; }
html body.bv3.bv3d .faq_sec .accordion-button:not(.collapsed) { color: var(--d-blue) !important; background: #fff !important; }
html body.bv3.bv3d .faq_sec .accordion-body { padding: 0 22px 20px !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--d-body) !important; }

/* --------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------- */
html body.bv3.bv3d .bv3-footbar { background: #0B2140; }
html body.bv3.bv3d .bv3-footbar__logo img { filter: brightness(0) invert(1); opacity: .95; }
html body.bv3.bv3d .bv3-footbar__in { grid-template-columns: 220px minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   Keuzehulp
   ----------------------------------------------------------------------- */
html body.bv3.bv3d .wizard-wrapper { background: linear-gradient(180deg, #F8FAFE 0%, #fff 420px); }
html body.bv3.bv3d .wizard-wrapper .keuzehulp-title { font: 800 clamp(32px, 2.4vw + 16px, 48px)/1.1 var(--b3-font) !important; letter-spacing: -.03em !important; color: var(--d-ink) !important; }
html body.bv3.bv3d .wizard-step h2 { font: 800 clamp(22px, 1vw + 16px, 28px)/1.25 var(--b3-font) !important; color: var(--d-ink) !important; }
html body.bv3.bv3d .wizard-step h2::before, html body.bv3.bv3d .wizard-step h2::after { content: none !important; display: none !important; }
html body.bv3.bv3d .wizard-options button { min-height: 56px; border-radius: 14px !important; border: 1.5px solid var(--d-line) !important; background: #fff !important; color: var(--d-ink) !important; font: 600 16px/1.3 var(--b3-font) !important; box-shadow: var(--d-sh) !important; transition: border-color .15s, background .15s; }
html body.bv3.bv3d .wizard-options button:hover, html body.bv3.bv3d .wizard-options button.active { border-color: var(--d-blue) !important; background: var(--d-blue-s) !important; color: #1E3A8A !important; }
html body.bv3.bv3d .wizard-progress { background: #E6ECF5 !important; border-radius: 99px !important; height: 8px !important; overflow: hidden; }
html body.bv3.bv3d .wizard-progress .progress-bar { background: var(--d-blue) !important; border-radius: 99px !important; }
html body.bv3.bv3d .wizard-back { min-height: 44px; border-radius: 10px !important; }
html body.bv3.bv3d .bv3d-kh-result { max-width: 1100px; margin: 0 auto; }
html body.bv3.bv3d .bv3d-kh-result .wizard-result-title { font: 800 clamp(26px, 1.6vw + 16px, 36px)/1.2 var(--b3-font) !important; color: var(--d-ink) !important; text-align: center !important; margin: 8px 0 10px !important; }
html body.bv3.bv3d .bv3d-kh-result__note { max-width: 760px; margin: 0 auto 24px !important; text-align: center !important; font-size: 15px !important; color: var(--d-muted) !important; line-height: 1.55 !important; }
html body.bv3.bv3d .bv3d-kh-result .wizard-results-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
html body.bv3.bv3d .bv3d-khcard { display: flex !important; flex-direction: column; gap: 12px; text-align: left !important; background: #fff !important; border: 1px solid var(--d-line) !important; border-radius: var(--d-r-lg) !important; box-shadow: var(--d-sh) !important; padding: 22px !important; }
html body.bv3.bv3d .bv3d-khcard--best { border-color: var(--d-blue) !important; box-shadow: 0 0 0 1px var(--d-blue), var(--d-sh-2) !important; }
html body.bv3.bv3d .bv3d-khcard__head { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
html body.bv3.bv3d .bv3d-khcard__rank { grid-column: 1 / -1; justify-self: start; font: 700 12px/1 var(--b3-font); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; background: var(--d-soft); color: var(--d-muted); margin-bottom: 6px; }
html body.bv3.bv3d .bv3d-khcard--best .bv3d-khcard__rank { background: var(--d-blue); color: #fff; }
html body.bv3.bv3d .bv3d-khcard__head img { width: 48px !important; height: 48px !important; object-fit: contain; border: 1px solid var(--d-line); border-radius: 12px; padding: 4px; margin: 0 !important; grid-row: span 2; }
html body.bv3.bv3d .bv3d-khcard h3 { font: 800 20px/1.2 var(--b3-font) !important; margin: 0 !important; color: var(--d-ink) !important; text-align: left !important; }
html body.bv3.bv3d .bv3d-khcard__fit { font-size: 14px !important; color: var(--d-muted) !important; margin: 0 !important; text-align: left !important; }
html body.bv3.bv3d .bv3d-khcard .bv3-match { font: 700 14px/1.3 var(--b3-font) !important; color: var(--d-green) !important; margin: 0 !important; }
html body.bv3.bv3d .bv3d-khcard__why { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; }
html body.bv3.bv3d .bv3d-khcard__why li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--d-body); margin: 0; padding: 0; }
html body.bv3.bv3d .bv3d-khcard__why .bv3-ic { width: 16px; height: 16px; margin-top: 2px; }
html body.bv3.bv3d .bv3d-khcard__why .is-ok .bv3-ic { color: var(--d-green); }
html body.bv3.bv3d .bv3d-khcard__why .is-no { color: var(--d-muted); }
html body.bv3.bv3d .bv3d-khcard__why .is-no .bv3-ic { color: #94A3B8; }
html body.bv3.bv3d .bv3d-khcard__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding-top: 12px; border-top: 1px solid var(--d-line); margin-top: auto; }
html body.bv3.bv3d .bv3d-khcard .rating { font-size: 14.5px !important; color: var(--d-body) !important; margin: 0 !important; display: inline-flex; align-items: center; gap: 6px; }
html body.bv3.bv3d .bv3d-khcard .price { font: 800 16px/1.3 var(--b3-font) !important; color: var(--d-ink) !important; margin: 0 !important; }
html body.bv3.bv3d .bv3d-khcard .wizard-btn { display: flex !important; align-items: center; justify-content: center; min-height: 50px; border-radius: 12px !important; background: var(--d-blue) !important; background-image: none !important; color: #fff !important; font: 700 16px/1 var(--b3-font) !important; border: 0 !important; box-shadow: 0 6px 18px rgba(37, 99, 235, .25) !important; text-decoration: none !important; margin: 0 !important; width: 100%; }
html body.bv3.bv3d .bv3d-khcard .wizard-btn:hover { background: var(--d-blue-d) !important; }
html body.bv3.bv3d .bv3d-khcard .bv3d-khcard__review { justify-content: center; margin: 0 !important; min-height: 44px; }
html body.bv3.bv3d .bv3d-kh-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 8px; }

/* --------------------------------------------------------------------------
   Responsief
   ----------------------------------------------------------------------- */
@media (max-width: 1199px) {
  html body.bv3.bv3d .bv3-top5__item { grid-template-columns: 48px minmax(0, 1fr) 220px; }
}
@media (max-width: 991px) {
  html body.bv3.bv3d .bv3d-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  html body.bv3.bv3d .bv3d-hero .bv3d-hero__title { max-width: 20em !important; }
  html body.bv3.bv3d .bv3d-top3 { max-width: 640px; }
  html body.bv3.bv3d .bv3d-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.bv3.bv3d .bv3d-about__grid { grid-template-columns: 1fr; gap: 28px; }
  html body.bv3.bv3d .bv3d-kh-result .wizard-results-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-hero { padding: 28px 0 32px; }
  html body.bv3.bv3d .bv3d-hero .bv3d-hero__title { font-size: clamp(29px, 7.4vw, 36px) !important; margin-bottom: 14px !important; }
  html body.bv3.bv3d .bv3d-hero .bv3d-hero__title-sub { font-size: .66em; margin-top: 8px; }
  html body.bv3.bv3d .bv3d-hero .bv3d-hero__lead { font-size: 16.5px !important; margin-bottom: 20px !important; }
  html body.bv3.bv3d .bv3d-hero__cta { display: grid; grid-template-columns: 1fr; }
  html body.bv3.bv3d .bv3d-hero__cta .bv3d-btn { width: 100%; }
  html body.bv3.bv3d .bv3d-hero__usps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  html body.bv3.bv3d .bv3d-hero__usps li { font-size: 14px; align-items: flex-start; }
  html body.bv3.bv3d .bv3d-top3 { padding: 14px; border-radius: 16px; }
  html body.bv3.bv3d .bv3d-top3 a.bv3d-top3__row, html body.bv3.bv3d .bv3d-top3 .bv3d-top3__row { grid-template-columns: 24px 40px minmax(0, 1fr); gap: 10px; padding: 10px 8px !important; }
  html body.bv3.bv3d .bv3d-top3__rank { width: 24px; height: 24px; font-size: 13px; }
  html body.bv3.bv3d .bv3d-top3__logo { width: 40px; height: 40px; }
  html body.bv3.bv3d .bv3d-top3__logo img { width: 32px !important; height: 32px !important; }
  html body.bv3.bv3d .bv3d-top3__cta { grid-column: 2 / -1; justify-content: center; min-height: 44px; }
  html body.bv3.bv3d .bv3d-trust__list { grid-template-columns: 1fr; gap: 12px; padding-top: 16px !important; padding-bottom: 16px !important; }
  html body.bv3.bv3d .bv3d-head { margin-bottom: 22px; }
  html body.bv3.bv3d .bv3d-head .bv3d-head__intro { font-size: 16px !important; }
  html body.bv3.bv3d .comparison-sec, html body.bv3.bv3d .bv3-top5, html body.bv3.bv3d .bv3d-about, html body.bv3.bv3d .Benefits, html body.bv3.bv3d .how-it-work, html body.bv3.bv3d .blog-sec, html body.bv3.bv3d .faq_sec { padding-top: 48px !important; padding-bottom: 48px !important; }
  html body.bv3.bv3d #softwareList > .bv3d-card { padding: 18px !important; }
  html body.bv3.bv3d .bv3d-card__top { grid-template-columns: 52px minmax(0, 1fr); gap: 12px 14px; }
  html body.bv3.bv3d .bv3d-card__logo { width: 52px; height: 52px; border-radius: 12px; }
  html body.bv3.bv3d .bv3d-card__logo img { width: 42px !important; height: 42px !important; }
  html body.bv3.bv3d .bv3d-card .bv3d-card__name { font-size: 20px !important; }
  html body.bv3.bv3d .bv3d-card__price { grid-column: 1 / -1; text-align: left; min-width: 0; display: flex; align-items: baseline; gap: 10px; background: var(--d-soft); border-radius: 10px; padding: 10px 12px; }
  html body.bv3.bv3d .bv3d-card__pricelbl { margin: 0; }
  html body.bv3.bv3d .bv3d-card .vanaf-mnd { font-size: 17px !important; }
  html body.bv3.bv3d .bv3d-card__facts li { font-size: 15px !important; }
  html body.bv3.bv3d .bv3d-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  html body.bv3.bv3d .bv3d-card__actions .affiliate-cta-btn { grid-column: 1 / -1; min-width: 0; width: 100%; }
  html body.bv3.bv3d .bv3d-card__actions .bv3d-btn--ghost { width: 100%; padding: 0 10px !important; font-size: 15px !important; }
  html body.bv3.bv3d .bv3d-card__cmp { margin: 0 !important; justify-content: center; }
  html body.bv3.bv3d .bv3-top5__item { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 16px; }
  html body.bv3.bv3d .bv3d-t5brand { grid-template-columns: 44px minmax(0, 1fr); }
  html body.bv3.bv3d .bv3d-t5brand__logo { width: 44px; height: 44px; }
  html body.bv3.bv3d .bv3d-cta__box { padding: 28px 22px; border-radius: 20px; }
  html body.bv3.bv3d .bv3d-cta__btns { display: grid; grid-template-columns: 1fr; width: 100%; }
  html body.bv3.bv3d .bv3d-cta__btns .bv3d-btn { width: 100%; }
  html body.bv3.bv3d .blog-sec .blog_box_section > a { aspect-ratio: 16 / 6; }
  html body.bv3.bv3d .bv3-footbar__in { grid-template-columns: 1fr; }
  html body.bv3.bv3d .bv-footer-hubs__grid { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; }
  html body.bv3.bv3d .bv-footer-hubs__about { grid-column: 1 / -1; }
  html body.bv3.bv3d .sticky-compare-btn { flex-wrap: wrap; }
  html body.bv3.bv3d .sticky-compare-btn .compareSelected { font-size: 14px !important; }
}
@media (max-width: 380px) {
  html body.bv3.bv3d .bv3d-hero__usps { grid-template-columns: 1fr; }
  html body.bv3.bv3d .bv3d-card__actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html body.bv3.bv3d .bv3d-btn, html body.bv3.bv3d .blog-sec .blog_box_section, html body.bv3.bv3d .bv3d-about__points a { transition: none; transform: none !important; }
}

/* ---- verfijningen na eerste visuele controle ---- */
html body.bv3.bv3d .bv3d-head .bv3d-head__title { display: block !important; }
html body.bv3.bv3d .bv3d-head .bv3d-eyebrow { display: block; }
html body.bv3.bv3d #softwareList.serv_program_list { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; border-radius: 0 !important; }
html body.bv3.bv3d .bv3d-card .bv3d-card__pricelbl { font: 700 12.5px/1.2 var(--b3-font) !important; letter-spacing: .06em !important; color: var(--d-muted) !important; text-transform: uppercase; }
html body.bv3.bv3d .bv3d-card .meer-info-btn.bv3d-btn { min-height: 48px !important; font-size: 15.5px !important; border-radius: 12px !important; line-height: 1.2 !important; width: auto; }
html body.bv3.bv3d .bv3d-card .bv3d-card__cmp span { font: 600 15.5px/1.2 var(--b3-font) !important; color: inherit !important; }
html body.bv3.bv3d .bv3d-top3__cta { font-size: 13.5px; padding: 0 12px; }
html body.bv3.bv3d .bv3d-card .star_box { white-space: nowrap; }
@media (max-width: 767px) { html body.bv3.bv3d .bv3d-card__scores { gap: 6px 12px; } html body.bv3.bv3d .bv3d-card .star_box { font-size: 13.5px !important; } }
/* Legacy (bv-v2 fixed) gebruikt section#mysoftware ... !important: hier met twee id's overschrijven. */
html body.bv3.bv3d section#mysoftware #softwareList.serv_program_list { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; border-radius: 0 !important; }
html body.bv3.bv3d section#mysoftware #softwareList > .serv_program_list.bv3d-card { background: #fff !important; border: 1px solid var(--d-line) !important; border-radius: var(--d-r-lg) !important; box-shadow: var(--d-sh) !important; padding: 24px !important; margin: 0 !important; }
html body.bv3.bv3d section#mysoftware #softwareList > .serv_program_list.bv3d-card--top { border-color: #FCD34D !important; box-shadow: 0 0 0 1px #FDE68A, var(--d-sh) !important; }
@media (max-width: 767px) { html body.bv3.bv3d section#mysoftware #softwareList > .serv_program_list.bv3d-card { padding: 18px !important; } }
html body.bv3.bv3d .bv3d-kh-result .wizard-result-title::before, html body.bv3.bv3d .bv3d-kh-result .wizard-result-title::after { content: none !important; display: none !important; }
html body.bv3.bv3d .bv3d-kh-result .wizard-result-title { display: block !important; padding: 0 !important; }
/* ACF-pagina's (Over ons, Privacy, Voorwaarden, Contact): leesbare kolom onder de nieuwe paginakop */
html body.bv3.bv3d .bv3d-pagehero { border-bottom: 1px solid var(--d-line); }
html body.bv3.bv3d section.privacy > .container, html body.bv3.bv3d .about-page-content > .container { max-width: 860px !important; }
html body.bv3.bv3d section.privacy p, html body.bv3.bv3d section.privacy li { font-size: 17px !important; line-height: 1.7 !important; color: var(--d-body) !important; }
html body.bv3.bv3d section.privacy h2, html body.bv3.bv3d section.privacy h3 { color: var(--d-ink) !important; letter-spacing: -.015em; }
/* Het blauwe streepje voor elke H2 (legacy style-css) past niet meer in het nieuwe systeem */
html body.bv3.bv3d h2::before { content: none !important; display: none !important; }
html body.bv3.bv3d h2:not(.accordion-header) { padding-left: 0 !important; }
html body.bv3.bv3d .bv3d-trust__list a { display: inline-block; padding: 4px 0; }

/* ---- ronde 2 (23-09-2026) ---- */
/* Logo: scherpe bron (822x110, 3x) */
html body.bv3.bv3d .bv3-header__logo img.bv3d-logo { height: 32px !important; width: auto !important; max-width: none !important; }
html body.bv3.bv3d .bv3-footbar__logo img.bv3d-logo { height: 30px !important; width: auto !important; filter: none !important; opacity: 1 !important; }
@media (max-width: 767px) { html body.bv3.bv3d .bv3-header__logo img.bv3d-logo { height: 24px !important; } }
@media (max-width: 374px) { html body.bv3.bv3d .bv3-header__logo img.bv3d-logo { height: 21px !important; } }
/* Vergelijkbalk hangt aan body (js) en staat vast onderaan */
html body.bv3.bv3d .sticky-compare-btn { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9990 !important; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
html body.bv3.bv3d .sticky-compare-btn[style*="display: block"] { display: flex !important; }
html body.bv3.bv3d .sticky-compare-btn .compareSelected::before, html body.bv3.bv3d .sticky-compare-btn .compareSelected::after { content: none !important; }
html body.bv3.bv3d.bv3-has-cmp { padding-bottom: 76px; }
html body.bv3.bv3d section#mysoftware .bv-compare { will-change: auto !important; }

/* Vergelijker: categorieën als duidelijke keuzeknoppen met zichtbare aan/uit-stand */
html body.bv3.bv3d section#mysoftware .tab_sec_tab { display: flex !important; flex-wrap: wrap; gap: 8px; border: 0 !important; margin: 8px 0 18px !important; padding: 0 !important; }
html body.bv3.bv3d section#mysoftware .tab_sec_tab .nav-item { margin: 0 !important; width: auto !important; }
html body.bv3.bv3d section#mysoftware .tab_sec_tab .feature-btn { display: inline-flex !important; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px !important; border: 1.5px solid #CBD5E1 !important; border-radius: 999px !important; background: #fff !important; color: var(--d-ink) !important; font: 600 14.5px/1 var(--b3-font) !important; width: auto !important; text-align: left; box-shadow: none !important; }
html body.bv3.bv3d section#mysoftware .tab_sec_tab .feature-btn::before { content: "" !important; display: inline-block !important; position: static !important; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #94A3B8; background: #fff; flex: none; transform: none !important; }
html body.bv3.bv3d section#mysoftware .tab_sec_tab .feature-btn:hover { border-color: var(--d-blue) !important; color: var(--d-blue) !important; }
html body.bv3.bv3d section#mysoftware .tab_sec_tab .feature-btn.active { background: var(--d-blue) !important; border-color: var(--d-blue) !important; color: #fff !important; }
html body.bv3.bv3d section#mysoftware .tab_sec_tab .feature-btn.active::before { border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
html body.bv3.bv3d section#mysoftware .bv-compare__group-label { display: block; margin-bottom: 2px; }
html body.bv3.bv3d .bv3d-filter-hint { font-size: 12.5px !important; line-height: 1.4 !important; color: var(--d-muted) !important; margin: 6px 0 0 !important; }
html body.bv3.bv3d section#mysoftware .serv_drop_box .row { display: grid !important; gap: 14px; margin: 0 !important; }
html body.bv3.bv3d section#mysoftware .serv_drop_box .row > div { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
html body.bv3.bv3d .bv-chips, html body.bv3.bv3d .bv-chip { font-size: 13px; }
html body.bv3.bv3d .bv-chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--d-blue-s); color: #1E3A8A; font-weight: 600; margin: 0 6px 6px 0; }
html body.bv3.bv3d .bv-compare__empty { background: #fff; border: 1px dashed #CBD5E1; border-radius: var(--d-r); padding: 22px; text-align: center; color: var(--d-body); font-size: 16px; }

/* Top 5: brede middenkolom, korte samenvatting, punten op één regel waar het past */
html body.bv3.bv3d .bv3-top5__item { grid-template-columns: 48px 220px minmax(0, 1fr) 200px; gap: 16px 24px; }
html body.bv3.bv3d .bv3-top5__body p { font-size: 15.5px !important; margin: 0 0 10px !important; color: var(--d-ink) !important; font-weight: 600; }
html body.bv3.bv3d .bv3-top5__body ul { gap: 6px; }
html body.bv3.bv3d .bv3-top5__body li { font-size: 15px; line-height: 1.4; }
html body.bv3.bv3d .bv3-top5__cta { gap: 8px; }
html body.bv3.bv3d .bv3-top5__cta .bv3-btn { min-height: 48px; border-radius: 12px !important; }
html body.bv3.bv3d .bv3-rank-note { font-size: 14px !important; color: var(--d-muted) !important; }

/* Blog: knop naar alle artikelen */
html body.bv3.bv3d .bv3d-blog-all { display: flex; justify-content: center; margin-top: 8px; }

/* Vergelijkpagina */
html body.bv3.bv3d .bv3d-h1-line { font-size: clamp(28px, 2.3vw + 8px, 38px) !important; letter-spacing: -.025em !important; max-width: none !important; }
@media (min-width: 1200px) { html body.bv3.bv3d .bv3d-h1-line { white-space: nowrap; } }
html body.bv3.bv3d .bv3-cmp-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
html body.bv3.bv3d .bv3-cmp-card { padding: 18px 16px; gap: 10px; border-radius: var(--d-r-lg); box-shadow: var(--d-sh); }
html body.bv3.bv3d .bv3-cmp-card__top { gap: 10px; min-width: 0; }
html body.bv3.bv3d .bv3-cmp-card h2 { font-size: 16.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html body.bv3.bv3d .bv3-cmp-card .bv3-rating { display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; white-space: nowrap; font-size: 13.5px; }
html body.bv3.bv3d .bv3-cmp-card .bv3-rating .bv3-stars { flex: none; }
html body.bv3.bv3d .bv3-cmp-card__price { white-space: nowrap; font-size: 15.5px !important; }
html body.bv3.bv3d .bv3-cmp-card .bv3-btn { white-space: nowrap; min-height: 44px; border-radius: 12px !important; }
html body.bv3.bv3d .bv3d-entry { background: var(--d-soft); border: 1px solid var(--d-line); border-radius: var(--d-r-lg); padding: 22px 24px; margin: 20px 0 8px; }
html body.bv3.bv3d .bv3d-entry h2 { font: 800 20px/1.3 var(--b3-font) !important; margin: 0 0 12px !important; }
html body.bv3.bv3d .bv3d-entry ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 24px; }
html body.bv3.bv3d .bv3d-entry li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--d-line); }
html body.bv3.bv3d .bv3d-entry li strong { color: var(--d-ink); }
html body.bv3.bv3d .bv3d-entry p { font-size: 13.5px !important; color: var(--d-muted) !important; margin: 10px 0 0 !important; }
html body.bv3.bv3d .bv3-cmp-table table { min-width: 0 !important; table-layout: fixed; }
html body.bv3.bv3d .bv3-cmp-table thead th:first-child, html body.bv3.bv3d .bv3-cmp-table tbody th { width: 30%; text-align: left; }
@media (max-width: 1100px) { html body.bv3.bv3d .bv3-cmp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3-cmp-cards { grid-template-columns: 1fr; gap: 10px; }
  html body.bv3.bv3d .bv3-cmp-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 14px; }
  html body.bv3.bv3d .bv3-cmp-card__top { grid-column: 1 / -1; }
  html body.bv3.bv3d .bv3-cmp-card .bv3-btn { grid-column: 1 / -1; }
  html body.bv3.bv3d .bv3-cmp-card .bv3-link { grid-column: 1 / -1; min-height: 40px; }
  html body.bv3.bv3d .bv3-cmp-card__price { text-align: right; }
  html body.bv3.bv3d .bv3-cmp-table th, html body.bv3.bv3d .bv3-cmp-table td { padding: 9px 4px !important; font-size: 12.5px !important; }
  html body.bv3.bv3d .bv3-cmp-table thead th { font-size: 11.5px !important; white-space: normal !important; word-break: break-word; hyphens: auto; line-height: 1.2; }
  html body.bv3.bv3d .bv3-cmp-table thead th:first-child, html body.bv3.bv3d .bv3-cmp-table tbody th { width: 34%; padding-left: 10px !important; }
  html body.bv3.bv3d .bv3d-entry { padding: 18px 16px; }
  html body.bv3.bv3d .bv3d-entry li { grid-template-columns: 1fr; gap: 2px; }
}

/* Tabellen in lopende tekst: nooit horizontaal scrollen. Breed op desktop, kaarten op mobiel. */
html body.bv3.bv3d .bv3-prose .bv3d-tbl, html body.bv3.bv3d .bv3d-page .bv3d-tbl { overflow: visible; }
html body.bv3.bv3d .bv3d-tbl table { min-width: 0 !important; width: 100% !important; table-layout: auto; }
html body.bv3.bv3d .bv3d-tbl th, html body.bv3.bv3d .bv3d-tbl td { white-space: normal !important; word-break: normal; overflow-wrap: anywhere; }
html body.bv3.bv3d .bv3d-tbl thead th { white-space: normal !important; }
@media (min-width: 1100px) {
  html body.bv3.bv3d .bv3d-page__prose .bv3d-tbl.bv3d-cols-4, html body.bv3.bv3d .bv3d-page__prose .bv3d-tbl.bv3d-cols-5, html body.bv3.bv3d .bv3d-page__prose .bv3d-tbl.bv3d-cols-6 { width: min(1100px, calc(100vw - 80px)); max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) { border: 0; background: none; border-radius: 0; }
  html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) table, html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) tbody, html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) tr, html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) td { display: block; width: 100% !important; }
  html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) thead, html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) tr:has(> th):not(:has(> td)) { display: none; }
  html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) tr { background: #fff !important; border: 1px solid var(--d-line); border-radius: 12px; padding: 4px 14px; margin: 0 0 10px; }
  html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) tbody tr:nth-child(even) td { background: none !important; }
  html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) td { border-top: 1px solid var(--d-line) !important; padding: 9px 0 !important; display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 10px; font-size: 14.5px !important; }
  html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) td:first-child { border-top: 0 !important; display: block; font-size: 16px !important; font-weight: 800; color: var(--d-ink); padding-top: 12px !important; }
  html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) td[data-label]:not(:first-child)::before { content: attr(data-label); font-weight: 600; color: var(--d-muted); font-size: 13px; line-height: 1.4; }
  html body.bv3.bv3d .bv3d-tbl.bv3d-cols-2 table { font-size: 14px; }
}

/* Inklapblokken (details) */
html body.bv3.bv3d .bv3d-acc { border: 1px solid var(--d-line); border-radius: var(--d-r); background: #fff; margin: 14px 0; }
html body.bv3.bv3d .bv3d-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; min-height: 56px; font: 700 17px/1.35 var(--b3-font); color: var(--d-ink); }
html body.bv3.bv3d .bv3d-acc > summary::-webkit-details-marker { display: none; }
html body.bv3.bv3d .bv3d-acc > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--d-blue); border-bottom: 2px solid var(--d-blue); transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
html body.bv3.bv3d .bv3d-acc[open] > summary::after { transform: rotate(-135deg); }
html body.bv3.bv3d .bv3d-acc > summary h2, html body.bv3.bv3d .bv3d-acc > summary h3 { margin: 0 !important; padding: 0 !important; font: inherit !important; font-size: inherit !important; color: inherit !important; display: inline !important; }
html body.bv3.bv3d .bv3d-acc > summary h2 { font-size: 19px !important; font-weight: 800 !important; }
html body.bv3.bv3d .bv3d-acc__body { padding: 0 20px 18px; }
html body.bv3.bv3d .bv3d-acc--sm > summary { font-size: 15.5px; min-height: 50px; padding: 12px 18px; background: var(--d-soft); border-radius: var(--d-r); }
html body.bv3.bv3d .bv3d-acc--sm[open] > summary { border-radius: var(--d-r) var(--d-r) 0 0; }
html body.bv3.bv3d .bv3d-acc--sm .bv3d-acc__body { padding-top: 12px; font-size: 15px; }
html body.bv3.bv3d .bv3d-acc--toc { margin: 0 0 20px; }
html body.bv3.bv3d .bv3d-acc--toc .bv3-toc ol { columns: 2; column-gap: 28px; margin: 0; padding-left: 18px; }
@media (max-width: 767px) { html body.bv3.bv3d .bv3d-acc--toc .bv3-toc ol { columns: 1; } html body.bv3.bv3d .bv3d-acc > summary { padding: 14px 16px; } html body.bv3.bv3d .bv3d-acc__body { padding: 0 16px 16px; } }

/* Gewone pagina's (v3/page.php) */
html body.bv3.bv3d .bv3d-page__wrap { max-width: 900px; padding-top: 28px; padding-bottom: 32px; }
html body.bv3.bv3d .bv3d-page .bv3d-pagehero h1 { font-size: clamp(28px, 2.4vw + 12px, 44px) !important; max-width: 22em !important; }
html body.bv3.bv3d .bv3d-page__prose { font-size: 17px; }
html body.bv3.bv3d .bv3d-page__prose .snel-antwoord, html body.bv3.bv3d .bv3-prose .snel-antwoord { background: var(--d-blue-s); border: 1px solid #D6E4FF; border-radius: var(--d-r-lg); padding: 20px 22px; margin: 0 0 24px; }
html body.bv3.bv3d .bv3-prose .snel-antwoord h2 { font-size: 19px !important; margin: 0 0 10px !important; }
html body.bv3.bv3d .bv3-prose .snel-antwoord ul { margin: 0 !important; padding-left: 18px !important; }
html body.bv3.bv3d .bv3-prose .snel-antwoord li { font-size: 15.5px !important; line-height: 1.55 !important; margin-bottom: 8px !important; }
html body.bv3.bv3d .bv3d-cta--inline { background: none; padding: 32px 0 0; }

/* Prijzenmatrix */
html body.bv3.bv3d .bv3d-matrix { margin: 0 0 28px; }
html body.bv3.bv3d .bv3d-matrix h2 { font: 800 clamp(22px, 1.4vw + 14px, 28px)/1.2 var(--b3-font) !important; color: var(--d-ink) !important; margin: 0 0 6px !important; }
html body.bv3.bv3d .bv3d-matrix__sub { font-size: 15px !important; color: var(--d-muted) !important; margin: 0 0 14px !important; }
html body.bv3.bv3d .bv3d-matrix__grid { border: 1px solid var(--d-line); border-radius: var(--d-r-lg); overflow: hidden; background: #fff; box-shadow: var(--d-sh); }
html body.bv3.bv3d .bv3d-matrix__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 210px; gap: 10px 20px; align-items: start; padding: 16px 20px; border-top: 1px solid var(--d-line); }
html body.bv3.bv3d .bv3d-matrix__row:first-child { border-top: 0; }
html body.bv3.bv3d .bv3d-matrix__row:nth-child(even) { background: var(--d-soft); }
html body.bv3.bv3d .bv3d-matrix__brand strong { display: block; font-size: 16.5px; color: var(--d-ink); }
html body.bv3.bv3d .bv3d-matrix__links { display: flex; gap: 12px; margin-top: 4px; }
html body.bv3.bv3d .bv3d-matrix__links a { font-size: 14px; font-weight: 600; color: var(--d-blue) !important; text-decoration: none !important; }
html body.bv3.bv3d .bv3d-matrix__links a:hover { text-decoration: underline !important; }
html body.bv3.bv3d .bv3d-matrix__plans { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 8px; }
html body.bv3.bv3d .bv3d-matrix__plans li { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--d-line); font-size: 14px; line-height: 1.3; }
html body.bv3.bv3d .bv3d-matrix__plans li span { color: var(--d-body); }
html body.bv3.bv3d .bv3d-matrix__plans li strong { color: var(--d-ink); white-space: nowrap; }
html body.bv3.bv3d .bv3d-matrix__plans li { max-width: 100%; flex-wrap: wrap; } /* KC-45 05-10-2026 */
html body.bv3.bv3d .bv3d-matrix__plans li strong { white-space: normal; } /* KC-45 */
html body.bv3.bv3d .bv3d-matrix__limit { font-size: 14px !important; line-height: 1.45 !important; color: var(--d-body) !important; margin: 0 !important; }
html body.bv3.bv3d .bv3d-matrix__limit span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--d-muted); margin-bottom: 2px; }
@media (max-width: 900px) {
  html body.bv3.bv3d .bv3d-matrix__row { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  html body.bv3.bv3d .bv3d-matrix__brand { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  html body.bv3.bv3d .bv3d-matrix__links { margin: 0; }
}

/* Keuzehulp (v3/page-keuzehulp-d.php) */
html body.bv3.bv3d .bv3d-kh__narrow { max-width: 820px; }
html body.bv3.bv3d .bv3d-kh__hero { background: linear-gradient(180deg, #F3F7FF 0%, #fff 100%); padding: 28px 0 8px; }
html body.bv3.bv3d .bv3d-kh__hero h1 { font: 800 clamp(30px, 2.4vw + 14px, 46px)/1.1 var(--b3-font) !important; letter-spacing: -.03em !important; color: var(--d-ink) !important; margin: 10px 0 12px !important; }
html body.bv3.bv3d .bv3d-kh__intro p { font-size: 17px !important; line-height: 1.6 !important; color: var(--d-body) !important; margin: 0 0 14px !important; }
html body.bv3.bv3d .bv3d-kh__usps { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 20px; }
html body.bv3.bv3d .bv3d-kh__usps li { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--d-body); margin: 0; }
html body.bv3.bv3d .bv3d-kh__usps .bv3-ic { width: 17px; height: 17px; color: var(--d-green); }
html body.bv3.bv3d .bv3d-kh__wiz { padding: 20px 0 40px; margin: 0 !important; max-width: none !important; background: none !important; }
html body.bv3.bv3d .bv3d-kh__card { background: #fff; border: 1px solid var(--d-line); border-radius: 24px; box-shadow: var(--d-sh-2); padding: 28px 32px 24px; }
html body.bv3.bv3d .bv3d-kh__progress { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-size: 14px; font-weight: 700; color: var(--d-muted); white-space: nowrap; }
html body.bv3.bv3d .bv3d-kh__bar { flex: 1; height: 8px; border-radius: 99px; background: #E6ECF5; overflow: hidden; }
html body.bv3.bv3d .bv3d-kh__bar i { display: block; height: 100%; background: var(--d-blue); border-radius: 99px; transition: width .25s; }
html body.bv3.bv3d .bv3d-kh__step h2 { font: 800 clamp(22px, 1vw + 16px, 28px)/1.25 var(--b3-font) !important; color: var(--d-ink) !important; margin: 0 0 16px !important; outline: none; }
html body.bv3.bv3d .bv3d-kh__hint { font-size: 15px !important; color: var(--d-muted) !important; margin: -8px 0 14px !important; }
html body.bv3.bv3d .bv3d-kh__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html body.bv3.bv3d .bv3d-kh__opt { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px; border: 1.5px solid var(--d-line); border-radius: 14px; background: #fff; color: var(--d-ink); font: 600 16px/1.3 var(--b3-font); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
html body.bv3.bv3d .bv3d-kh__opt::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #94A3B8; background: #fff; }
html body.bv3.bv3d .bv3d-kh__step[data-multi="1"] .bv3d-kh__opt::before { border-radius: 6px; }
html body.bv3.bv3d .bv3d-kh__opt:hover { border-color: var(--d-blue); background: #F8FAFF; }
html body.bv3.bv3d .bv3d-kh__opt.is-chosen, html body.bv3.bv3d .bv3d-kh__opt[aria-pressed="true"] { border-color: var(--d-blue); background: var(--d-blue-s); color: #1E3A8A; }
html body.bv3.bv3d .bv3d-kh__opt.is-chosen::before, html body.bv3.bv3d .bv3d-kh__opt[aria-pressed="true"]::before { border-color: var(--d-blue); background: var(--d-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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
html body.bv3.bv3d .bv3d-kh__go { margin-top: 18px; width: 100%; }
html body.bv3.bv3d .bv3d-kh__back { margin-top: 16px; background: none; border: 0; color: var(--d-blue); font: 700 15px/1 var(--b3-font); cursor: pointer; min-height: 44px; padding: 0; }
html body.bv3.bv3d .bv3d-kh__loading { text-align: center; font-size: 17px !important; color: var(--d-body) !important; padding: 40px 0; }
html body.bv3.bv3d .bv3d-kh__more { padding: 8px 0 40px; }
html body.bv3.bv3d .bv3d-kh__more .bv3-prose { font-size: 16.5px; }
html body.bv3.bv3d #wizard-results .bv3d-kh-result { padding-top: 8px; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-kh__card { padding: 20px 16px 16px; border-radius: 18px; }
  html body.bv3.bv3d .bv3d-kh__opts { grid-template-columns: 1fr; gap: 8px; }
  html body.bv3.bv3d .bv3d-kh__opt { min-height: 54px; font-size: 15.5px; }
  html body.bv3.bv3d .bv3d-kh__hero { padding-top: 18px; }
  html body.bv3.bv3d .bv3d-kh__intro p { font-size: 16px !important; }
}
html body.bv3.bv3d .bv3d-t5brand__name { font-size: 17.5px; white-space: nowrap; }
html body.bv3.bv3d .bv3-cmp-card .bv3d-rc { color: var(--d-muted); }
html body.bv3.bv3d .bv3d-tbl th, html body.bv3.bv3d .bv3d-tbl td { overflow-wrap: break-word !important; word-break: normal !important; hyphens: manual; }
html body.bv3.bv3d .bv3d-tbl td:first-child, html body.bv3.bv3d .bv3d-tbl th:first-child { white-space: nowrap !important; }
@media (max-width: 767px) { html body.bv3.bv3d .bv3d-tbl td:first-child, html body.bv3.bv3d .bv3d-tbl th:first-child { white-space: normal !important; } }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) td { display: block !important; padding: 8px 0 !important; }
  html body.bv3.bv3d .bv3d-tbl:not(.bv3d-cols-2) td[data-label]:not(:first-child)::before { display: block; margin-bottom: 2px; font-size: 12.5px; }
}

/* ---- mobiel opgeschoond (23-09) ---- */
html body.bv3.bv3d .bv3d-m-only { display: none !important; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-m-only { display: inline !important; }
  html body.bv3.bv3d li.bv3d-m-only { display: flex !important; }
  html body.bv3.bv3d .bv3d-d-only { display: none !important; }
  /* vergelijkerkaart: één kernpunt zichtbaar, de rest onder Alle details */
  html body.bv3.bv3d .bv3d-card > .bv3d-card__facts > li:nth-child(n+2) { display: none !important; }
  html body.bv3.bv3d .bv3d-card__facts { margin-top: 14px !important; padding-top: 12px !important; gap: 8px; }
  html body.bv3.bv3d .bv3d-card__fit { font-size: 14px !important; margin: 2px 0 6px !important; }
  html body.bv3.bv3d .bv3d-card__actions { margin-top: 12px; padding-top: 14px; }
  /* top 5: terug naar de mobiele opbouw */
  html body.bv3.bv3d .bv3-top5__item { grid-template-columns: 36px minmax(0, 1fr) !important; gap: 10px 12px !important; padding: 16px 14px !important; }
  html body.bv3.bv3d .bv3-top5__rank { grid-row: auto !important; width: 34px; height: 34px; font-size: 15px; }
  html body.bv3.bv3d .bv3-top5__brand { grid-column: 2 !important; grid-row: 1 !important; }
  html body.bv3.bv3d .bv3-top5__body, html body.bv3.bv3d .bv3-top5__cta { grid-column: 1 / -1 !important; grid-row: auto !important; }
  html body.bv3.bv3d .bv3-top5__body p { font-size: 15px !important; }
  html body.bv3.bv3d .bv3-top5__body li { font-size: 14.5px; }
  html body.bv3.bv3d .bv3-top5__body li:nth-child(n+3) { display: none; }
  html body.bv3.bv3d .bv3d-t5brand__name { white-space: normal; }
  /* voordelen 2x2, compact */
  html body.bv3.bv3d .Benefits .row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 !important; }
  html body.bv3.bv3d .Benefits .row > div { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  html body.bv3.bv3d .Benefits .benefit_box { padding: 16px !important; gap: 10px; }
  html body.bv3.bv3d .Benefits .benefit_icon { width: 40px !important; height: 40px !important; }
  html body.bv3.bv3d .Benefits .benefit_box p { font-size: 15px !important; }
  /* stappen compact: nummer naast de tekst */
  html body.bv3.bv3d .how-it-work .bv-steps { display: grid !important; gap: 10px !important; }
  html body.bv3.bv3d .how-it-work .bv-step { display: grid !important; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 16px !important; }
  html body.bv3.bv3d .how-it-work .bv-step__number { grid-row: span 2; margin: 0 !important; }
  html body.bv3.bv3d .how-it-work .bv-step h3 { font-size: 17px !important; margin: 0 0 4px !important; }
  html body.bv3.bv3d .how-it-work .bv-step p { font-size: 14.5px !important; margin: 0 !important; }
  /* trust-strook 2x2 */
  html body.bv3.bv3d .bv3d-trust__list { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  html body.bv3.bv3d .bv3d-trust__list li { font-size: 13.5px; align-items: flex-start; }
  html body.bv3.bv3d .bv3d-trust__list .bv3-ic { width: 30px; height: 30px; padding: 6px; }
  /* prijzenmatrix: lange bedragen mogen afbreken */
  html body.bv3.bv3d .bv3d-matrix__plans li { max-width: 100%; flex-wrap: wrap; }
  html body.bv3.bv3d .bv3d-matrix__plans li strong { white-space: normal; }
  /* blogkaarten lager beeld */
  html body.bv3.bv3d .blog-sec .blog_box_section > a { aspect-ratio: 16 / 5; }
}

/* Nooit horizontaal scrollen op paginaniveau (iOS Safari toont anders lege witruimte naast de pagina).
 * html: overflow-x hidden gaat naar de viewport (sticky header blijft werken); body: clip maakt geen scrollcontainer. */
html:has(> body.bv3d) { overflow-x: clip !important; }
html body.bv3.bv3d { overflow-x: clip !important; max-width: 100%; }
html body.bv3.bv3d .sticky-compare-btn { width: auto !important; box-sizing: border-box !important; }
html body.bv3.bv3d .bv3-search { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
html body.bv3.bv3d .bv3-search input[type="search"] { flex: 1 1 180px; min-width: 0; }
html body.bv3.bv3d .bv3-search .bv3-btn { flex: 0 0 auto; }

/* Brede tabellen: nooit afgekapt. Tablet (768-1099) ook als kaarten vanaf 5 kolommen; desktop eerste kolom mag afbreken bij 5+ kolommen; vangnet: scroll binnen het kader. */
html body.bv3.bv3d .bv3-prose .bv3d-tbl, html body.bv3.bv3d .bv3d-page .bv3d-tbl { overflow-x: auto; }
html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 td:first-child, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 td:first-child, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 th:first-child, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 th:first-child { white-space: normal !important; min-width: 7em; }
@media (min-width: 768px) and (max-width: 1099px) {
  html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 { border: 0; background: none; overflow: visible; }
  html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 table, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 tbody, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 tr, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 td,
  html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 table, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 tbody, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 tr, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 td { display: block; width: 100% !important; }
  html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 thead, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 thead,
  html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 tr:has(> th):not(:has(> td)), html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 tr:has(> th):not(:has(> td)) { display: none; }
  html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 tr, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 tr { background: #fff !important; border: 1px solid var(--d-line); border-radius: 12px; padding: 4px 16px; margin: 0 0 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 td, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 td { border-top: 1px solid var(--d-line) !important; padding: 8px 0 !important; background: none !important; }
  html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 td:first-child, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 td:first-child { grid-column: 1 / -1; border-top: 0 !important; font-size: 16px !important; font-weight: 800; color: var(--d-ink); padding-top: 12px !important; white-space: normal !important; }
  html body.bv3.bv3d .bv3d-tbl.bv3d-cols-5 td[data-label]:not(:first-child)::before, html body.bv3.bv3d .bv3d-tbl.bv3d-cols-6 td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-weight: 600; color: var(--d-muted); font-size: 12.5px; margin-bottom: 2px; }
}
@media (max-width: 767px) { html body.bv3.bv3d .bv3-cmp-table thead th { font-size: 12px !important; } html body.bv3.bv3d .bv3-cmp-table .bv3-tip { font-size: 12px !important; } }

/* ==========================================================================
 * 05-10-2026 Mobiele homepage, feedback Damon (punten 1, 2, 3, 5). Alleen opmaak; teksten, links en Sub ID's ongewijzigd.
 * ========================================================================== */
/* 3. Top 3: naam, doelgroep en sterren altijd links uitgelijnd (de infokolom kromp en schoof naar rechts). */
html body.bv3.bv3d .bv3d-top3__info { justify-self: stretch; width: 100%; text-align: left; }
/* Oorzaak: bv-v2.min.fixed.css zet a.bv-hero__preview-row met !important op "26px 1fr auto" (logo kreeg de vrije ruimte,
 * tekst de restkolom). De v3d-kolommen hier daarom ook met !important (hogere specificiteit wint). */
html body.bv3.bv3d .bv3d-top3 a.bv3d-top3__row, html body.bv3.bv3d .bv3d-top3 .bv3d-top3__row { grid-template-columns: 28px 44px minmax(0, 1fr) auto !important; }
/* 5. Kaarten: het extra uitklapblok voor mobiel is op desktop niet nodig. */
html body.bv3.bv3d .bv3d-card__more--monly { display: none; }
@media (max-width: 767px) {
  /* 1. Hero rustiger: geen label boven de kop, geen tweede alinea (de kop zegt het al), tweede knop als tekstlink. */
  html body.bv3.bv3d .bv3d-hero { padding: 20px 0 28px; }
  html body.bv3.bv3d .bv3d-hero .bv3d-eyebrow--pill { display: none; }
  html body.bv3.bv3d .bv3d-hero .bv3d-hero__title { margin: 0 0 18px !important; }
  html body.bv3.bv3d .bv3d-hero .bv3d-hero__lead { display: none; }
  html body.bv3.bv3d .bv3d-hero__cta { gap: 4px; margin-bottom: 18px; }
  html body.bv3.bv3d .bv3d-hero__cta .bv3d-btn--ghost { background: transparent !important; border-color: transparent !important; box-shadow: none !important; min-height: 44px; font-size: 16px !important; color: var(--d-blue) !important; text-decoration: underline; text-underline-offset: 3px; }
  /* 2. Drie USP's naast elkaar: vinkje boven, korte regel eronder, gecentreerd. */
  html body.bv3.bv3d .bv3d-hero__usps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html body.bv3.bv3d .bv3d-hero__usps li { flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 13px; line-height: 1.3; }
  html body.bv3.bv3d .bv3d-hero__usps .bv3-ic { width: 18px; height: 18px; }
  html body.bv3.bv3d .bv3d-top3 a.bv3d-top3__row, html body.bv3.bv3d .bv3d-top3 .bv3d-top3__row { grid-template-columns: 24px 40px minmax(0, 1fr) !important; }
  /* 5. Kaarten: punten (vaak prijzenrijen) niet open op de kaart, alles onder "Alle details". */
  html body.bv3.bv3d .bv3d-card > .bv3d-card__facts { display: none !important; }
  html body.bv3.bv3d .bv3d-card__more, html body.bv3.bv3d .bv3d-card__more--monly { display: block; margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--d-line); }
}
@media (max-width: 380px) {
  html body.bv3.bv3d .bv3d-hero__usps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body.bv3.bv3d .bv3d-hero__usps li { font-size: 12.5px; }
}

/* 05-10-2026 ronde 2 (Damon): hero-voordelen met eigen icoon, op mobiel groter; voordelen bovenaan de pakketkaart. */
html body.bv3.bv3d .bv3d-hero__usp-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--d-green); }
html body.bv3.bv3d .bv3d-hero__usp-ic .bv3-ic { width: 17px; height: 17px; }
html body.bv3.bv3d .bv3d-card__pros { list-style: none; margin: 16px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid var(--d-line); display: grid; gap: 8px; }
html body.bv3.bv3d .bv3d-card__pros li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; background: none !important; font-size: 15.5px !important; line-height: 1.45 !important; font-weight: 600; color: var(--d-ink) !important; }
html body.bv3.bv3d .bv3d-card__pros li::before { content: none !important; display: none !important; }
html body.bv3.bv3d .bv3d-card__pros .bv3-ic { width: 18px; height: 18px; color: var(--d-green); margin-top: 2px; flex: 0 0 auto; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-hero__usps { gap: 10px; }
  html body.bv3.bv3d .bv3d-hero__usps li { gap: 8px; font-size: 14px; font-weight: 600; color: var(--d-ink); line-height: 1.3; }
  html body.bv3.bv3d .bv3d-hero__usp-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--d-blue-s); color: var(--d-blue); }
  html body.bv3.bv3d .bv3d-hero__usp-ic .bv3-ic { width: 22px; height: 22px; }
  html body.bv3.bv3d .bv3d-card__pros { margin-top: 12px !important; padding-top: 12px !important; }
  html body.bv3.bv3d .bv3d-card__pros li { font-size: 15px !important; }
}
@media (max-width: 380px) { html body.bv3.bv3d .bv3d-hero__usps li { font-size: 13px; } }

/* 05-10-2026 ronde 3 (Damon): meer en vaster ritme tussen secties. Eén maat voor alle homepage-secties, meer lucht
 * tussen sectiekop en inhoud. Desktop 96 px (was 72-80, sommige 56 onder), mobiel 72 px (was 48). */
html body.bv3.bv3d .comparison-sec, html body.bv3.bv3d .bv3-top5, html body.bv3.bv3d .bv3d-about, html body.bv3.bv3d .Benefits,
html body.bv3.bv3d .how-it-work, html body.bv3.bv3d .blog-sec, html body.bv3.bv3d .faq_sec { padding-top: 96px !important; padding-bottom: 96px !important; }
html body.bv3.bv3d .bv3d-head, html body.bv3.bv3d .bv3-top5__head { margin-bottom: 48px; }
html body.bv3.bv3d .bv3d-cta { padding-bottom: 24px; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-hero { padding-bottom: 40px; }
  html body.bv3.bv3d .comparison-sec, html body.bv3.bv3d .bv3-top5, html body.bv3.bv3d .bv3d-about, html body.bv3.bv3d .Benefits,
  html body.bv3.bv3d .how-it-work, html body.bv3.bv3d .blog-sec, html body.bv3.bv3d .faq_sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  html body.bv3.bv3d .bv3d-head, html body.bv3.bv3d .bv3-top5__head { margin-bottom: 32px; }
  html body.bv3.bv3d .bv3d-about__text h2 { margin-bottom: 16px !important; }
  html body.bv3.bv3d .bv3d-cta { padding-bottom: 16px; }
}

/* 05-10-2026 ronde 4 (Damon): ruimte boven de titel, titel gecentreerd op mobiel, tweede titelregel zonder streepje,
 * en tactische ruimte binnen secties (belangrijkste onderdelen krijgen de meeste lucht). */
html body.bv3.bv3d .bv3d-hero .bv3d-hero__title-sub::first-letter { text-transform: uppercase; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-hero { padding-top: 44px; padding-bottom: 48px; }
  html body.bv3.bv3d .bv3d-hero .bv3d-hero__title { text-align: center !important; margin: 0 auto 28px !important; }
  html body.bv3.bv3d .bv3d-hero .bv3d-hero__title-sub { margin-top: 10px; }
  html body.bv3.bv3d .bv3d-hero__cta { margin-bottom: 28px; }
  html body.bv3.bv3d .bv3d-hero__grid { gap: 44px; }
  html body.bv3.bv3d .bv3d-top3__list { gap: 14px; }
  html body.bv3.bv3d .bv3d-trust__list { padding-top: 24px !important; padding-bottom: 24px !important; gap: 16px; }
  /* Kernonderdelen (pakketlijst, top 5) ruimer dan de informatieve secties. */
  html body.bv3.bv3d .comparison-sec, html body.bv3.bv3d .bv3-top5 { padding-top: 88px !important; padding-bottom: 88px !important; }
  html body.bv3.bv3d #softwareList, html body.bv3.bv3d .bv3-top5__list { gap: 24px; }
  html body.bv3.bv3d .bv3d-about__points { gap: 14px; }
  html body.bv3.bv3d .bv-steps { gap: 16px; }
  html body.bv3.bv3d .faq_sec .accordion { gap: 12px; }
  html body.bv3.bv3d .bv3d-cta { padding-top: 8px; padding-bottom: 32px; }
}

/* 05-10-2026 (Damon): één cijferhiërarchie. Klein oordeel-blokje voor Top 3, /vergelijken/ en keuzehulp. */
html body.bv3.bv3d .bv3d-score--sm { font-size: 13px; color: var(--d-body); }
html body.bv3.bv3d .bv3d-score--sm strong { min-width: 32px; height: 22px; font-size: 13px; border-radius: 6px; }
html body.bv3.bv3d .bv3-cmp-card .bv3d-score--sm { margin: 2px 0 0; }
html body.bv3.bv3d .bv3d-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
html body.bv3.bv3d .bv3d-top3__meta { flex-direction: column; align-items: flex-start; gap: 6px; }

/* BL-349 (06-10-2026) kostencalculator (js/bv-calc.js). Zonder JS blijft het blok leeg; tabel en rekenvoorbeeld blijven de bron. */
html body.bv3.bv3d .bv-calc.is-klaar { margin: 40px 0; padding: 28px; border: 1px solid var(--d-line); border-radius: var(--d-r-lg); background: var(--d-soft); box-shadow: var(--d-sh); }
html body.bv3.bv3d .bv-calc__kop { margin: 0 0 20px; font-size: 1.125rem; font-weight: 700; color: var(--d-ink); }
html body.bv3.bv3d .bv-calc__form { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px 20px; align-items: end; }
html body.bv3.bv3d .bv-calc__veld { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: .9375rem; font-weight: 600; color: var(--d-body); }
html body.bv3.bv3d .bv-calc__veld select,
html body.bv3.bv3d .bv-calc__veld input { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid var(--d-line); border-radius: 10px; background: #fff; font: inherit; font-weight: 500; color: var(--d-ink); }
html body.bv3.bv3d .bv-calc__bank { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9375rem; color: var(--d-body); }
html body.bv3.bv3d .bv-calc__bank[hidden] { display: none; }
html body.bv3.bv3d .bv-calc__bank input { width: 18px; height: 18px; margin: 0; }
html body.bv3.bv3d .bv-calc__uit { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--d-line); }
html body.bv3.bv3d .bv-calc__totaal { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.2; color: var(--d-ink); }
html body.bv3.bv3d .bv-calc__per { font-size: 1rem; font-weight: 500; color: var(--d-muted); }
html body.bv3.bv3d .bv-calc__cta { margin: 16px 0; }
html body.bv3.bv3d .bv-calc__noot { margin: 12px 0 0; font-size: .875rem; color: var(--d-muted); }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv-calc.is-klaar { padding: 24px 16px; }
  html body.bv3.bv3d .bv-calc__form { grid-template-columns: 1fr; }
  html body.bv3.bv3d .bv-calc__cta .bv3-btn { display: flex; width: 100%; justify-content: center; box-sizing: border-box; }
}

/* 07-10-2026 (verzoek Damon): proefperiode bij de instapprijs (bv3d_trial_tag). Rustig groen, geen knop. */
html body.bv3.bv3d .bv3d-trial { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.3 var(--b3-font); color: var(--d-green); white-space: nowrap; }
html body.bv3.bv3d .bv3d-trial .bv3-ic { width: 16px; height: 16px; flex: 0 0 16px; color: var(--d-green); }
html body.bv3.bv3d .bv3d-trial--sm { font-size: 13px; }
html body.bv3.bv3d .bv3d-trial--sm .bv3-ic { width: 14px; height: 14px; flex-basis: 14px; }
html body.bv3.bv3d .bv3d-card__trial { margin-top: 8px; }
html body.bv3.bv3d .bv3-cmp-card .bv3d-trial { margin: 2px 0 0; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-card__price { flex-wrap: wrap; }
  html body.bv3.bv3d .bv3d-card__trial { margin-top: 0; flex-basis: 100%; }
}

/* 07-10-2026 (akkoord Damon): kerngegevens-vakjes op de pakketkaart (inc/bv-kerngegevens.php). Rustig, gelijk voor elke leverancier. */
html body.bv3.bv3d .bv3d-kf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 16px; padding: 0; }
html body.bv3.bv3d .bv3d-kf--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body.bv3.bv3d .bv3d-kf--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.bv3.bv3d .bv3d-kf--n1 { grid-template-columns: minmax(0, 1fr); }
html body.bv3.bv3d .bv3d-kf__cell { background: var(--d-soft); border-radius: 10px; padding: 12px 14px; min-width: 0; }
html body.bv3.bv3d .bv3d-kf dt { margin: 0 0 4px; font: 600 12.5px/1.3 var(--b3-font); color: var(--d-muted); }
html body.bv3.bv3d .bv3d-kf dd { margin: 0; font: 700 15px/1.35 var(--b3-font); color: var(--d-ink); overflow-wrap: anywhere; }
html body.bv3.bv3d .bv3d-card__more--kf { display: block; }
html body.bv3.bv3d .bv3d-card__more--kf > summary .bv3d-d-only, html body.bv3.bv3d .bv3d-card__more--kf > summary .bv3d-m-only { display: none; }
@media (max-width: 1024px) {
  html body.bv3.bv3d .bv3d-kf, html body.bv3.bv3d .bv3d-kf--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-kf { gap: 8px; margin: 16px 0 12px; }
  html body.bv3.bv3d .bv3d-kf__cell { padding: 10px 12px; }
  html body.bv3.bv3d .bv3d-kf dd { font-size: 14px; }
}

/* 07-10-2026 (KC-48): sterrenbalk niet laten krimpen in de flex-rij; op 375 px werd hij 46-67 px (soms 0) i.p.v. 86 px, waardoor 4,2 sterren als 2,5 oogde. */
html body.bv3.bv3d .bv3d-users { flex-wrap: wrap; row-gap: 4px; }
html body.bv3.bv3d .bv3d-users .bv3-stars, html body.bv3 .bv3-rating .bv3-stars { flex: 0 0 86px; min-width: 86px; }

/* 08-10-2026 (fix, Claude Code): kaarten /vergelijken/. Mobiel stapelen i.p.v. het 2-koloms raster (de proefperiode-regel van 07-10
   schoof de paren op: score/sterren, prijs/proefperiode en de lijst overlapten). Beoordelingsregel mag afbreken (aantal reviews viel buiten de kaart). */
html body.bv3.bv3d .bv3-cmp-card .bv3-rating { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
html body.bv3.bv3d .bv3-cmp-card .bv3-rating .bv3d-rc { white-space: nowrap; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3-cmp-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  html body.bv3.bv3d .bv3-cmp-card__price { text-align: left; }
  html body.bv3.bv3d .bv3-cmp-card .bv3d-score--sm, html body.bv3.bv3d .bv3-cmp-card .bv3-rating, html body.bv3.bv3d .bv3-cmp-card .bv3d-trial { align-self: flex-start; }
}

/* 08-10-2026: proefperiode-regel in de smalle kaarten op /vergelijken/ mag afbreken (raakte de rand op 1440 px). */
html body.bv3.bv3d .bv3-cmp-card .bv3d-trial { white-space: normal; align-items: flex-start; }
html body.bv3.bv3d .bv3-cmp-card .bv3d-trial .bv3-ic { margin-top: 2px; }

/* ==========================================================================
   09-10-2026 (pakket 1 CRO prijzenpagina's, Claude Code): affiliate-CTA's in de paginatekst als echte knop.
   Alleen links die als losse regel in een alinea staan: <p><a class="btn-affiliate ...">, <p><a class="btn btn-primary">
   en <p class="bv-partner-cta"><a rel="sponsored">. Tekstlinks midden in een zin blijven tekstlinks.
   Stijl gelijk aan .bv3d-btn--primary (homepagekaart): 48 px hoog, blauw, wit, 12 px afgerond, op mobiel volle breedte.
   Specificiteit 0,4,4 en hoger, zodat "html body.bv3 .bv3-prose a" (0,2,3, bv-v3.css) en de regel voor a.btn.btn-primary
   in bv-run.css (0,4,3, BL-381) niet winnen. Tekst, href, rel en classes van de links veranderen niet (meting en GTM ongemoeid).
   ========================================================================== */
html body.bv3.bv3d .bv3-prose p > a.btn-affiliate,
html body.bv3.bv3d .bv3-prose p > a.btn.btn-primary,
html body.bv3.bv3d .bv3-prose p.bv-partner-cta > a[rel~="sponsored"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 22px !important;
  border-radius: 12px !important;
  border: 1.5px solid transparent !important;
  background: var(--d-blue) !important;
  color: #fff !important;
  font: 700 16px/1.25 var(--b3-font) !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .25) !important;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .15s;
}
html body.bv3.bv3d .bv3-prose p > a.btn-affiliate:visited,
html body.bv3.bv3d .bv3-prose p > a.btn.btn-primary:visited,
html body.bv3.bv3d .bv3-prose p.bv-partner-cta > a[rel~="sponsored"]:visited {
  color: #fff !important;
}
html body.bv3.bv3d .bv3-prose p > a.btn-affiliate:hover,
html body.bv3.bv3d .bv3-prose p > a.btn.btn-primary:hover,
html body.bv3.bv3d .bv3-prose p.bv-partner-cta > a[rel~="sponsored"]:hover {
  background: var(--d-blue-d) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
/* Ruimte rond de knop-alinea (alleen in browsers met :has; anders blijft de gewone alinea-afstand van 18 px). */
html body.bv3.bv3d .bv3-prose p:has(> a.btn-affiliate:only-child),
html body.bv3.bv3d .bv3-prose p:has(> a.btn.btn-primary:only-child),
html body.bv3.bv3d .bv3-prose p.bv-partner-cta:has(> a[rel~="sponsored"]:only-child) {
  margin: 4px 0 30px !important;
  line-height: 1.2 !important;
}
@media (max-width: 767px) {
  /* Volle breedte alleen als de knop het enige element in de alinea is; staat er nog een tekstlink achter
     (overzicht, SnelStart: "· alle SnelStart-pakketten uitgelegd"), dan blijft de knop zo breed als zijn tekst. */
  html body.bv3.bv3d .bv3-prose p > a.btn-affiliate:only-child,
  html body.bv3.bv3d .bv3-prose p > a.btn.btn-primary:only-child,
  html body.bv3.bv3d .bv3-prose p.bv-partner-cta > a[rel~="sponsored"]:only-child {
    width: 100%;
  }
  html body.bv3.bv3d .bv3-prose p > a.btn-affiliate,
  html body.bv3.bv3d .bv3-prose p > a.btn.btn-primary,
  html body.bv3.bv3d .bv3-prose p.bv-partner-cta > a[rel~="sponsored"] {
    padding: 12px 16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body.bv3.bv3d .bv3-prose p > a.btn-affiliate,
  html body.bv3.bv3d .bv3-prose p > a.btn.btn-primary,
  html body.bv3.bv3d .bv3-prose p.bv-partner-cta > a[rel~="sponsored"] {
    transition: none;
    transform: none !important;
  }
}

/* ==========================================================================
   11-10-2026 (CRO prijzenpagina's V2 t/m V7, Claude Code, akkoord Damon): samenvattingskaart (V3), knoppen in de prijzenmatrix (V4),
   cookiedialoog als onderbalk op schermen tot 600 px (V5, alleen met body.bv3d-cro-v5), sticky actiebalk op mobiel (V6),
   derde knop in de slot-CTA (V7). Zelfde kaarttaal als de homepagekaart, één blauw (--d-blue), geen nieuwe kleuren.
   Uitzetten: optie bv_cro_off (inc/bv3-design.php); zonder markup doet deze CSS niets.
   ========================================================================== */

/* V3: samenvattingskaart onder de hero (markup: inc/bv3-design.php, bv3d_price_card) */
html body.bv3.bv3d .bv3d-pcard { display: block; background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-r-lg); box-shadow: var(--d-sh); padding: 24px; margin: 0 0 32px; }
html body.bv3.bv3d .bv3d-pcard .bv3d-card__name { font: 800 22px/1.2 var(--b3-font) !important; letter-spacing: -.02em !important; color: var(--d-ink) !important; margin: 0 !important; padding: 0 !important; }
html body.bv3.bv3d .bv3d-pcard .bv3d-card__fit { font-size: 15px !important; line-height: 1.4 !important; color: var(--d-muted) !important; margin: 4px 0 8px !important; }
html body.bv3.bv3d .bv3d-pcard .bv3d-card__scores { font-size: 14.5px; color: var(--d-body); }
html body.bv3.bv3d .bv3d-pcard .star_box { display: inline !important; font-size: 14.5px !important; color: var(--d-body) !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; white-space: nowrap; }
html body.bv3.bv3d .bv3d-pcard .bv3d-pcard__src { font-size: 13px !important; line-height: 1.4 !important; color: var(--d-muted) !important; margin: 8px 0 0 !important; }
html body.bv3.bv3d .bv3d-pcard .bv3d-card__pricelbl { margin-bottom: 6px; }
html body.bv3.bv3d .bv3d-pcard .bv3d-card__trial { margin: 0; }
html body.bv3.bv3d .bv3d-pcard .bv3d-card__actions .affiliate-cta-btn { min-width: 220px; }
html body.bv3.bv3d .bv3d-pcard .bv3d-card__actions .bv3d-btn--ghost { min-height: 48px !important; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-pcard { padding: 18px; margin-bottom: 28px; }
  html body.bv3.bv3d .bv3d-pcard .bv3d-card__price { flex-wrap: nowrap; align-items: center; gap: 12px; }
  html body.bv3.bv3d .bv3d-pcard .bv3d-card__pricelbl { margin: 0; }
  html body.bv3.bv3d .bv3d-pcard .bv3d-card__trial { flex-basis: auto; white-space: normal; }
  html body.bv3.bv3d .bv3d-pcard .bv3d-card__actions { grid-template-columns: 1fr; }
  html body.bv3.bv3d .bv3d-pcard .bv3d-card__actions .bv3d-btn { width: 100%; }
}

/* V4: knop "Naar <merk>" per leveranciersrij in de prijzenmatrix (/prijzen-en-limieten/). Desktop: rechterkolom onder de limiet. */
html body.bv3.bv3d .bv3d-matrix__row { grid-template-areas: "brand plans limit" "brand plans cta"; }
html body.bv3.bv3d .bv3d-matrix__brand { grid-area: brand; }
html body.bv3.bv3d .bv3d-matrix__plans { grid-area: plans; }
html body.bv3.bv3d .bv3d-matrix__limit { grid-area: limit; }
html body.bv3.bv3d .bv3d-matrix .bv3d-matrix__cta.bv3d-btn { grid-area: cta; align-self: end; width: 100%; min-height: 44px; padding: 0 14px !important; font-size: 15px !important; box-shadow: none !important; }
html body.bv3.bv3d .bv3d-matrix .bv3d-matrix__cta.bv3d-btn:hover { box-shadow: 0 6px 18px rgba(37, 99, 235, .25) !important; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-matrix__row { grid-template-areas: "brand" "plans" "limit" "cta"; }
  html body.bv3.bv3d .bv3d-matrix .bv3d-matrix__cta.bv3d-btn { min-height: 48px; margin-top: 4px; }
}

/* V5: cookiedialoog op schermen tot 600 px als compacte onderbalk (zelfde drie keuzes en logica; alleen positie en maat).
   Specificiteit (1,5,2) boven de dialoogregel in bv-v3.css (1,3,2) en de dode mobiele regels in bv-run.css (1,2,1). */
@media (max-width: 600px) {
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent.bv3-consent:not([hidden]) { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none !important; width: 100% !important; max-width: none !important; max-height: 40vh !important; max-height: 40dvh !important; margin: 0 !important; padding: 14px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; gap: 10px !important; border-radius: 16px 16px 0 0 !important; border-bottom: 0 !important; box-shadow: 0 -12px 40px rgba(11, 27, 51, .22) !important; overflow: auto !important; }
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent .bv3-consent__title { font-size: 16px; line-height: 1.3; }
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent.bv3-consent p { font-size: 13.5px !important; line-height: 1.45 !important; }
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent .bv3-consent__btns { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; margin: 2px 0 0 !important; }
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent .bv3-consent__btns .bv3-btn { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-height: 44px !important; padding: 10px 12px !important; font-size: 15px !important; line-height: 1.2 !important; white-space: normal; }
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent .bv3-consent__btns .bv3-btn[data-consent="denied"] { order: 1; }
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent .bv3-consent__btns .bv3-btn[data-consent="granted"] { order: 2; }
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent .bv3-consent__btns .bv3-btn[data-consent-customize],
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent .bv3-consent__btns .bv3-btn[data-consent="save"] { flex-basis: 100% !important; order: 3; }
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent .bv3-consent__prefs { gap: 8px; padding-top: 10px; }
  html body.bv3.bv3d.bv3d-cro-v5 #bv3-consent .bv3-consent__opt { font-size: 13.5px; }
  html body.bv3.bv3d.bv3d-cro-v5.bv3-consent-open::after { background: rgba(11, 27, 51, .35); }
  html body.bv3.bv3d.bv3d-cro-v5.bv3-consent-open .bv-to-top { display: none !important; }
}

/* V6: sticky actiebalk, alleen mobiel (<768 px); js/bv-v3.js zet .is-on en body.bv3d-sticky-on. Desktop: nooit zichtbaar. */
html body.bv3.bv3d .bv3d-sticky { display: none; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9985; background: #fff; border-top: 1px solid var(--d-line); box-shadow: 0 -8px 24px rgba(11, 27, 51, .12); padding: 0 16px env(safe-area-inset-bottom, 0px); transform: translateY(110%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  html body.bv3.bv3d .bv3d-sticky.is-on { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }
  html body.bv3.bv3d .bv3d-sticky__in { display: flex; align-items: center; gap: 12px; min-height: 64px; }
  html body.bv3.bv3d .bv3d-sticky__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html body.bv3.bv3d .bv3d-sticky__text strong { font: 800 15px/1.2 var(--b3-font); color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body.bv3.bv3d .bv3d-sticky__text span { font: 600 12.5px/1.3 var(--b3-font); color: var(--d-green); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html body.bv3.bv3d .bv3d-sticky .bv3d-sticky__btn.bv3d-btn { flex: 0 1 auto; max-width: 58%; min-height: 44px; padding: 6px 14px !important; font-size: 14px !important; line-height: 1.15 !important; white-space: normal; text-align: center; box-shadow: none !important; }
  html body.bv3.bv3d.bv3d-sticky-on { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  html body.bv3.bv3d.bv3d-sticky-on .bv-to-top { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  html body.bv3.bv3d.bv3-consent-open .bv3d-sticky { visibility: hidden !important; transform: translateY(110%) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body.bv3.bv3d .bv3d-sticky { transition: none !important; }
}

/* V7: drie knoppen in de slot-CTA; op desktop onder de tekst (eigen regel), op mobiel al gestapeld. Partnerknop in dezelfde witte stijl. */
html body.bv3.bv3d .bv3d-cta--inline .bv3d-cta__btns--3 { flex-basis: 100%; }
html body.bv3.bv3d .bv3d-cta--inline .bv3d-cta__btns--3 .bv3d-btn { white-space: normal; text-align: center; }

/* Q3 12-10-2026 (Claude Code, toegankelijkheid): vinkje "Voeg <merk> toe aan vergelijking" in de softwarekaarten.
 * Het label .bv3d-card__cmp was al 44 px hoog, maar het vinkje zelf (input, Bootstrap-stijl met appearance: none, 20 x 20 px,
 * rand 2 px #2563EB uit style.css) is wat audits meten. Op mobiel krijgt de input een raakvlak van 44 x 44 px via een
 * doorzichtige rand van 12 px; de zichtbare box blijft 20 px: achtergrond en vinkje-icoon (Bootstrap) alleen in de
 * padding-box, de blauwe rand als inset-schaduw van 2 px met dezelfde ronding (buiten 16 - 12 = binnen 4 px, zoals nu).
 * De negatieve marge van 12 px houdt de lay-out gelijk: afstand tot de tekst en hoogte van het label veranderen niet.
 * Desktop (vanaf 768 px) ongewijzigd. Toetsenbordfocus: ring rond de 44 px-box (Bootstrap-focusgloed komt niet meer na een tik). */
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-card__cmp .compare-select {
    box-sizing: border-box; width: 44px; height: 44px; margin: -12px !important; padding: 0 !important; flex: none;
    border: 12px solid transparent !important; border-radius: 16px;
    background-clip: padding-box; background-origin: padding-box; background-size: 16px 16px;
    box-shadow: inset 0 0 0 2px #2563EB;
  }
  html body.bv3.bv3d .bv3d-card__cmp .compare-select:focus { box-shadow: inset 0 0 0 2px #2563EB; }
  html body.bv3.bv3d .bv3d-card__cmp .compare-select:focus-visible { box-shadow: inset 0 0 0 2px #2563EB, 0 0 0 3px rgba(13, 110, 253, .35); }
}

/* ==========================================================================
 * Q1/Q4/Q5 12-10-2026 (Claude Code, akkoord Damon): "Top 3 per situatie". Situatielabels als rustige pill (één blauw, geen
 * geel, geen rangnummers) in de homepage-hero (.bv3d-top3--sit), de keuzehulp bij gelijke stand (.bv3d-kh-result--tie) en op
 * /vergelijken/ (.bv3-cmp-card__sit). Ruimte blijft gelijk of groter; mobiel 375 en desktop 1440 gecontroleerd.
 * ======================================================================== */
html body.bv3.bv3d .bv3d-sit { display: flex; flex-wrap: wrap; gap: 6px; }
html body.bv3.bv3d .bv3d-sit__tag { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 10px; border-radius: 999px; background: var(--d-blue-s); color: #1E3A8A; font: 700 12px/1.2 var(--b3-font); letter-spacing: .02em; text-align: left; }
/* Hero: zonder rangkolom; de badge staat als eerste regel over de volle breedte van de rij, daaronder logo, tekst en knop.
   Elke rij dezelfde rustige rand, geen uitgelichte eerste rij. */
html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__list { gap: 10px; }
html body.bv3.bv3d .bv3d-top3--sit a.bv3d-top3__row, html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__row { grid-template-columns: 44px minmax(0, 1fr) auto !important; padding: 14px 12px !important; background: #fff; border-color: var(--d-line); }
html body.bv3.bv3d .bv3d-top3--sit a.bv3d-top3__row:hover { background: var(--d-soft); border-color: #CBD5E1; }
html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__info { gap: 3px; }
html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__sit { grid-column: 1 / -1; margin-bottom: 2px; }
/* Keuzehulp bij gelijke stand: badges op de plek van "Beste match"/"Alternatief", alle kaarten gelijk. */
html body.bv3.bv3d .bv3d-khcard__sit { grid-column: 1 / -1; margin-bottom: 8px; }
/* /vergelijken/: badge bovenaan de kaart, boven logo en naam. */
html body.bv3.bv3d .bv3-cmp-card__sit { margin-bottom: 2px; }
html body.bv3.bv3d .bv3d-order-note { margin-top: 10px !important; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-top3--sit a.bv3d-top3__row, html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__row { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 10px 12px; padding: 14px 12px !important; }
  html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__cta { grid-column: 1 / -1; }
  html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__list { gap: 14px; }
}

/* 12-10-2026 Claude Code: merknaam in keuzehulpkaart niet meer afbreken op het koppelteken ("e-" / "Boekhouden.nl"); te breed = onder het logo. */
html body.bv3 .bv3d-khcard__head { flex-wrap: wrap; }
html body.bv3 .bv3d-khcard__head h3 { white-space: nowrap; }
html body.bv3 .bv3d-khcard__head > * { min-width: 0; }
@media (min-width: 768px) { html body.bv3 .bv3d-khcard__head h3 { font-size: 18px; } }

/* ==========================================================================
 * P2/P3/P4 12-10-2026 (Claude Code, akkoord Damon): vaste voorkeur SnelStart, e-Boekhouden.nl en Jortt. Pills alleen voor die drie
 * (zelfde .bv3d-sit__tag als Q1/Q4/Q5); niet-aanraders krijgen een neutrale, kleinere geschikt-voor-tekst (.bv3d-sit--plain).
 * Homepagekaart: pill in de titelrij in plaats van "Beste keuze" (P2). "X vs Y"-pagina's: twee gelijke kaarten onder de hero in de
 * kaarttaal van de prijzen-kaart (.bv3d-pcard), naast elkaar vanaf 768 px en onder elkaar op mobiel (P3). Eén blauw, ruimte gelijk of ruimer.
 * ======================================================================== */
html body.bv3.bv3d .bv3d-sit--plain .bv3d-sit__fit { display: inline-flex; align-items: center; min-height: 24px; font: 600 12.5px/1.3 var(--b3-font); color: var(--d-muted); }
html body.bv3.bv3d .bv3d-card__titlerow .bv3d-card__sit { flex: 0 1 auto; }
html body.bv3.bv3d .bv3d-vs { margin: 0 0 32px; }
html body.bv3.bv3d .bv3d-vs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
html body.bv3.bv3d .bv3d-vscard { display: flex; flex-direction: column; margin: 0; min-width: 0; }
html body.bv3.bv3d .bv3d-vscard .bv3d-card__top { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
html body.bv3.bv3d .bv3d-vscard .bv3d-card__id { display: grid; gap: 8px; align-content: start; min-width: 0; }
html body.bv3.bv3d .bv3d-vscard .bv3d-card__scores { gap: 6px 12px; }
html body.bv3.bv3d .bv3d-vscard .bv3d-card__trial { margin: 0; white-space: normal; align-items: flex-start; }
html body.bv3.bv3d .bv3d-vscard .bv3d-card__trial .bv3-ic { margin-top: 2px; }
html body.bv3.bv3d .bv3d-vscard .bv3d-vscard__sit { margin-top: 2px; }
html body.bv3.bv3d .bv3d-vscard .bv3d-card__actions { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 1fr; gap: 10px; }
html body.bv3.bv3d .bv3d-vscard .bv3d-card__actions .bv3d-btn { width: 100%; min-width: 0; }
html body.bv3.bv3d .bv3d-vscard .bv3d-card__actions .affiliate-cta-btn { min-width: 0; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-vs { margin-bottom: 28px; }
  html body.bv3.bv3d .bv3d-vs__grid { grid-template-columns: 1fr; gap: 16px; }
  html body.bv3.bv3d .bv3d-vscard { padding: 18px; margin: 0; }
  html body.bv3.bv3d .bv3d-vscard .bv3d-card__top { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  html body.bv3.bv3d .bv3d-vscard .bv3d-card__logo { width: 56px; height: 56px; }
  html body.bv3.bv3d .bv3d-vscard .bv3d-card__logo img { width: 44px !important; height: 44px !important; }
}

/* ==========================================================================
 * D1/D2/D6 12-10-2026 (Claude Code, opdracht Damon): knoptekst met het aanbod, reviewscore met bron, secundaire knop op vs-kaart.
 * .bv3d-cta--offer = knop met "<Merk> <periode> gratis proberen": mag afbreken (max. 2 regels op mobiel), gecentreerd, zelfde hoogte.
 * .bv3d-score--src = "9,0 · 2.278 reviews op Trustpilot": bron in dezelfde regel, grijs, breekt netjes af op smalle kaarten.
 * ======================================================================== */
html body.bv3.bv3d .bv3d-btn.bv3d-cta--offer, html body.bv3.bv3d .bv3-btn.bv3d-cta--offer, html body.bv3.bv3d .bv3d-top3__cta.bv3d-cta--offer { white-space: normal !important; text-align: center; line-height: 1.2 !important; padding-top: 8px !important; padding-bottom: 8px !important; }
html body.bv3.bv3d .bv3-top5__cta .bv3-btn.bv3d-cta--offer { white-space: normal; }
html body.bv3.bv3d .bv3d-khcard .wizard-btn.bv3d-cta--offer { white-space: normal; text-align: center; line-height: 1.2 !important; padding: 8px 14px !important; }
html body.bv3.bv3d .bv3d-top3__cta.bv3d-cta--offer { min-height: 40px; padding-left: 14px !important; padding-right: 14px !important; }
html body.bv3.bv3d .bv3d-score--src { flex-wrap: wrap; align-items: center; gap: 4px 6px; }
html body.bv3.bv3d .bv3d-score--src strong { align-self: center; }
html body.bv3.bv3d .bv3d-score__src { font-size: 13px; line-height: 1.3; color: var(--d-muted); min-width: 0; }
html body.bv3.bv3d .bv3d-score__src::before { content: "\00b7\00a0"; }
/* Hero: de aanbod-pill mag niet de hele rij opeisen (grid-kolom auto); op 2 regels binnen 140 px, zodat score, bron en prijs ernaast passen. */
html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__cta.bv3d-cta--offer { max-width: 140px; line-height: 1.15 !important; }
html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__meta .bv3d-score--src { max-width: 100%; }
/* Top 5: op desktop staat de bron onder het cijfer (smalle merkkolom), zonder middelpuntje; geen icoon in de aanbodknop. */
html body.bv3.bv3d .bv3-top5__cta .bv3-btn.bv3d-cta--offer .bv3-ic { display: none; }
/* Hero: alle meta-onderdelen (score met bron, prijs, proefperiode) blijven binnen de infokolom; de proefperiode mag afbreken. */
html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__info > * { min-width: 0; max-width: 100%; }
html body.bv3.bv3d .bv3d-top3--sit .bv3d-trial--sm { white-space: normal; align-items: flex-start; }
html body.bv3.bv3d .bv3d-top3--sit .bv3d-trial--sm .bv3-ic { margin-top: 2px; }
html body.bv3.bv3d .bv3d-t5brand__score.bv3d-score--src { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
html body.bv3.bv3d .bv3-alt .bv3-rating.bv3d-score--src { flex-wrap: wrap; gap: 4px 6px; }
html body.bv3.bv3d .bv3-alt .bv3-rating.bv3d-score--src .bv3d-score__src { color: var(--b3-muted); }
html body.bv3.bv3d .bv3d-vscard .bv3d-card__actions .bv3d-vscard__cta--sec { box-shadow: none !important; }
/* Tablet (768-1100): de Top 5-knop stond in de smalle derde kolom (1fr, circa 138 px) terwijl de vierde (200 px) leeg bleef; hier drie kolommen
   zoals bv-v3.css bedoelt, zodat de aanbodtekst op 2 regels past. */
@media (min-width: 768px) and (max-width: 1100px) {
  html body.bv3.bv3d .bv3-top5__item { grid-template-columns: 48px minmax(0, 1fr) 200px; }
}
@media (min-width: 768px) {
  html body.bv3.bv3d .bv3d-t5brand__score.bv3d-score--src { display: grid; gap: 1px; }
  html body.bv3.bv3d .bv3d-t5brand__score.bv3d-score--src .bv3d-score__src::before { content: none; }
}
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-top3--sit .bv3d-top3__cta.bv3d-cta--offer, html body.bv3.bv3d .bv3d-top3__cta.bv3d-cta--offer { min-height: 44px; max-width: none; }
}
/* 12-10-2026 F1 (opdracht Damon): Top 5 zonder gele uitlichting van rij 1; alle rijen in dezelfde kaarttaal, rangnummer 1 gelijk aan de rest.
   In de merkkolom de situatielabels van de drie aanraders (.bv3d-sit, zelfde pills als Q1/Q4/Q5/P4) in plaats van het ACF-label.
   Alleen actief met .bv3-top5--f1 (bv_cro_off "f1" zet het uit). Ruimte ongewijzigd: geen padding of gap ingeleverd. */
html body.bv3.bv3d .bv3-top5--f1 .bv3-top5__item--1 { border-color: var(--d-line); box-shadow: var(--d-sh); }
html body.bv3.bv3d .bv3-top5--f1 .bv3-top5__item--1 .bv3-top5__rank { background: var(--b3-soft-2); color: var(--b3-ink); }
html body.bv3.bv3d .bv3-top5--f1 .bv3d-t5brand .bv3-top5__sit { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }

/* 12-10-2026 R2 (opdracht Damon): één hoofdactie in de hero. "Start de keuzehulp" is de enige gevulde knop; "Vergelijk zelf
 * pakketten" is op alle breedtes een tekstlink (.bv3d-hero__alt, zonder r2 weer de omlijnde knop). Ruimte rond de knoppen gelijk. */
html body.bv3.bv3d .bv3d-hero__cta { align-items: center; }
html body.bv3.bv3d .bv3d-hero__cta .bv3d-hero__alt { min-height: 54px; padding: 0 10px; font-size: 17px; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
html body.bv3.bv3d .bv3d-hero__cta .bv3d-hero__alt:hover { text-decoration-thickness: 2px; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-hero__cta .bv3d-hero__alt { justify-content: center; min-height: 44px; padding: 0; font-size: 16px; }
}

/* ==========================================================================
 * 12-10-2026 C1-C7 (Claude Code, design-feedback Damon: elk item binnen een component dezelfde elementen in dezelfde vorm).
 * Ruimte blijft gelijk of groter; gecontroleerd op 375, 768 en 1440.
 * ======================================================================== */

/* C4: het ene label in de prijzen-kaart; keuzehulp: label bovenaan (zoals bij gelijke stand), merknaam past naast het logo. */
html body.bv3.bv3d .bv3d-pcard__sit { margin: 2px 0 4px; }
@media (min-width: 768px) {
  html body.bv3.bv3d .bv3d-kh-result .bv3d-khcard__head { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; }
  html body.bv3.bv3d .bv3d-kh-result .bv3d-khcard__head img { width: 44px !important; height: 44px !important; }
  html body.bv3.bv3d .bv3d-kh-result .bv3d-khcard__head h3 { font-size: 17px !important; letter-spacing: -.01em; white-space: normal; }
}

/* C5: drie regels "Label: waarde" in de top 5; op mobiel alle drie zichtbaar (ze zijn kort). */
html body.bv3.bv3d .bv3-top5__body .bv3d-t5facts { gap: 8px; }
html body.bv3.bv3d .bv3-top5__body .bv3d-t5facts li { font-size: 15px; line-height: 1.45; color: var(--d-ink); font-weight: 600; }
html body.bv3.bv3d .bv3-top5__body .bv3d-t5facts__l { color: var(--d-muted); font-weight: 500; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3-top5__body .bv3d-t5facts li:nth-child(n+3) { display: flex; }
  html body.bv3.bv3d .bv3-top5__body .bv3d-t5facts li { font-size: 14.5px; }
}

/* C6: uitklapper "Alle pakketten en extra kosten" als rustige knop over de volle breedte: tekst links, aantal als grijze pill,
 * chevron rechts; zelfde hoogte (48 px) en hoekafronding (12 px) als de knoppen eronder; duidelijke focus- en open-staat. */
html body.bv3.bv3d .bv3d-card__more.bv3d-more { display: block; margin: 4px 0 0; padding: 0; border-top: 0; }
html body.bv3.bv3d .bv3d-more > summary { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--d-line); border-radius: 12px; background: #fff; color: var(--d-ink); font: 600 15px/1.3 var(--b3-font); cursor: pointer; list-style: none; transition: border-color .15s, background .15s; }
html body.bv3.bv3d .bv3d-more > summary::-webkit-details-marker { display: none; }
html body.bv3.bv3d .bv3d-more > summary::after { content: none; }
html body.bv3.bv3d .bv3d-more > summary:hover { border-color: #CBD5E1; background: var(--d-soft); }
html body.bv3.bv3d .bv3d-more > summary:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px; border-color: var(--d-blue); }
html body.bv3.bv3d .bv3d-more > summary .bv3d-more__txt { font-weight: 600; color: var(--d-ink); }
html body.bv3.bv3d .bv3d-more > summary .bv3d-more__n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--d-soft); border: 1px solid var(--d-line); color: var(--d-muted); font: 600 12.5px/1 var(--b3-font); }
html body.bv3.bv3d .bv3d-more > summary .bv3d-more__chev { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--d-muted); border-bottom: 2px solid var(--d-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; flex: 0 0 auto; }
html body.bv3.bv3d .bv3d-more[open] > summary { border-color: #CBD5E1; background: var(--d-soft); }
html body.bv3.bv3d .bv3d-more[open] > summary .bv3d-more__chev { transform: rotate(-135deg) translate(-2px, -2px); }
html body.bv3.bv3d .bv3d-more .bv3d-card__facts { margin: 14px 0 0 !important; padding: 0 4px !important; border-top: 0; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-card__more.bv3d-more { margin-top: 4px; padding-top: 0; border-top: 0; }
  html body.bv3.bv3d .bv3d-more > summary { font-size: 14.5px; padding: 0 14px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { html body.bv3.bv3d .bv3d-more > summary, html body.bv3.bv3d .bv3d-more__chev { transition: none; } }

/* C7: "Prijzen en limieten naast elkaar" (stijl van "Functies naast elkaar" op /vergelijken/). Desktop breder dan de tekstkolom
 * (max. 1200 px, gecentreerd), daaronder een horizontaal scrollbare tabel met vaste eerste kolom; de pagina zelf scrollt nooit opzij. */
html body.bv3.bv3d .bv3d-pmx { margin: 8px 0 72px; }
html body.bv3.bv3d .bv3d-pmx h2 { font: 800 clamp(22px, 1.4vw + 14px, 28px)/1.2 var(--b3-font) !important; color: var(--d-ink) !important; margin: 0 0 6px !important; }
html body.bv3.bv3d .bv3d-pmx__sub { font-size: 15px !important; color: var(--d-muted) !important; margin: 0 0 16px !important; max-width: 760px; }
html body.bv3.bv3d .bv3d-pmx__hint { display: none; font-size: 14px !important; color: var(--d-muted) !important; margin: 0 0 8px !important; }
html body.bv3.bv3d .bv3d-pmx__table { border-color: var(--d-line); border-radius: var(--d-r-lg); box-shadow: var(--d-sh); }
html body.bv3.bv3d .bv3d-pmx__table table { table-layout: fixed; min-width: 1000px !important; }
html body.bv3.bv3d .bv3d-pmx__table th, html body.bv3.bv3d .bv3d-pmx__table td { padding: 14px 12px !important; font-size: 14.5px !important; line-height: 1.4; vertical-align: top; overflow-wrap: anywhere; }
html body.bv3.bv3d .bv3d-pmx__table td { color: var(--d-ink); }
html body.bv3.bv3d .bv3d-pmx__table td.is-unk { color: var(--d-muted); }
html body.bv3.bv3d .bv3d-pmx__table thead th { white-space: normal !important; vertical-align: middle; font-size: 15px !important; hyphens: manual !important; word-break: normal !important; overflow-wrap: normal; }
html body.bv3.bv3d .bv3d-pmx__table thead th.is-nw { white-space: nowrap !important; }
html body.bv3.bv3d .bv3d-pmx__table tbody th { overflow-wrap: normal; hyphens: manual; }
html body.bv3.bv3d .bv3d-pmx__table thead th:first-child, html body.bv3.bv3d .bv3d-pmx__table tbody th { width: 150px; min-width: 0; }
html body.bv3.bv3d .bv3d-pmx__table tbody th { font-weight: 600; }
html body.bv3.bv3d .bv3d-pmx__table tbody tr:first-child td { font-weight: 800; font-size: 16px !important; }
html body.bv3.bv3d .bv3d-pmx__acts td, html body.bv3.bv3d .bv3d-pmx__acts th { vertical-align: middle; }
html body.bv3.bv3d .bv3d-pmx__acts td { padding: 16px 8px !important; }
html body.bv3.bv3d .bv3d-pmx .bv3d-pmx__btn.bv3d-btn { display: flex !important; width: 100%; min-height: 44px; padding: 0 8px !important; font-size: 14.5px !important; box-shadow: none !important; white-space: nowrap; }
html body.bv3.bv3d .bv3d-pmx .bv3d-pmx__btn.bv3d-btn--primary:hover { box-shadow: 0 6px 18px rgba(37, 99, 235, .25) !important; }
html body.bv3.bv3d .bv3d-pmx__lim { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--d-blue) !important; text-decoration: none !important; }
html body.bv3.bv3d .bv3d-pmx__lim:hover { text-decoration: underline !important; }
html body.bv3.bv3d .bv3d-pmx__legend { margin-top: 12px !important; font-size: 13.5px !important; }
html body.bv3.bv3d .bv3d-pmx__legend span { font-size: 13.5px !important; }
@media (min-width: 1100px) {
  /* zelfde linkerrand als de paginakop (bv3-wrap) */
  html body.bv3.bv3d .bv3d-pmx { width: min(1160px, calc(100vw - 64px)); margin-left: calc(50% - min(580px, 50vw - 32px)); }
  html body.bv3.bv3d .bv3d-pmx__sub { margin-bottom: 20px !important; }
  html body.bv3.bv3d .bv3d-pmx__table table { min-width: 0 !important; }
}
@media (max-width: 1099px) {
  html body.bv3.bv3d .bv3d-pmx__hint { display: block; }
  html body.bv3.bv3d .bv3d-pmx__table table { min-width: 1110px !important; }
}
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-pmx { margin-bottom: 56px; }
  html body.bv3.bv3d .bv3d-pmx__table table { min-width: 1110px !important; }
  html body.bv3.bv3d .bv3d-pmx__table th, html body.bv3.bv3d .bv3d-pmx__table td { padding: 12px 10px !important; font-size: 14px !important; }
  html body.bv3.bv3d .bv3d-pmx__table thead th { font-size: 14px !important; }
  html body.bv3.bv3d .bv3d-pmx__table thead th:first-child, html body.bv3.bv3d .bv3d-pmx__table tbody th { width: 130px; box-shadow: 1px 0 0 var(--d-line); }
  html body.bv3.bv3d .bv3d-pmx__acts td { padding: 14px 8px !important; }
  html body.bv3.bv3d .bv3d-pmx__table tbody tr:first-child td { font-size: 15px !important; }
}

/* C7: bestaande per-leverancier-matrix: elke rij één knop, verticaal gecentreerd (geen limietregel meer in de rechterkolom). */
html body.bv3.bv3d .bv3d-matrix--c7 .bv3d-matrix__row { grid-template-areas: "brand plans cta"; align-items: center; }
html body.bv3.bv3d .bv3d-matrix--c7 .bv3d-matrix__brand { align-self: start; }
html body.bv3.bv3d .bv3d-matrix--c7 .bv3d-matrix__cta.bv3d-btn { align-self: center; }
html body.bv3.bv3d .bv3d-matrix--c7 .bv3d-matrix__cta.bv3d-btn--ghost { box-shadow: none !important; }
@media (max-width: 900px) {
  html body.bv3.bv3d .bv3d-matrix--c7 .bv3d-matrix__row { grid-template-areas: "brand" "plans" "cta"; align-items: start; }
}

/* 13-10-2026 BL-426: SnelStart-CTA bovenaan /prijzen-en-limieten/ (bv3d_cta_top). Rustige witte regel in de kaartstijl van de site;
   de knop is de gewone primaire knop (.bv3d-btn--primary, 48 px). Op 375 px naam en proefperiode links onder elkaar, knop rechts,
   zodat het blok ongeveer 80 tot 92 px hoog is en boven de consentbalk eindigt. */
html body.bv3.bv3d .bv3d-ctatop { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 0 0 40px; padding: 16px 16px 16px 24px; background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-r-lg); box-shadow: var(--d-sh); }
html body.bv3.bv3d .bv3d-ctatop__id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; margin: 0 !important; padding: 0 !important; font: 400 16px/1.3 var(--b3-font) !important; color: var(--d-ink) !important; }
html body.bv3.bv3d .bv3d-ctatop__name { font: 800 17px/1.2 var(--b3-font) !important; color: var(--d-ink) !important; }
html body.bv3.bv3d .bv3d-ctatop .bv3d-trial { white-space: normal; align-items: flex-start; }
html body.bv3.bv3d .bv3d-ctatop .bv3d-trial .bv3-ic { margin-top: 1px; }
html body.bv3.bv3d .bv3d-ctatop__btn.bv3d-btn { flex: 0 0 auto; }
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-ctatop { gap: 12px; margin-bottom: 32px; padding: 14px 14px 14px 16px; }
  html body.bv3.bv3d .bv3d-ctatop__id { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* 14-10-2026 H2 (CRO-herstel, opdracht Damon): op mobiel de USP-rij onder de top 3, zodat de eerste partnerknop boven de vouw en de
   consentbalk staat. Alleen < 768 px en alleen met .bv3d-hero--h2 (bv_cro_off "h2" zet het uit); desktop en tablet ongewijzigd.
   De tekstkolom wordt op mobiel "display: contents", zodat kop, knoppen, top 3 en USP's één kolom vormen die met order wordt
   geschikt. Geen witruimte ingeleverd: knoppen tot top 3 = 28 + 16 = 44 px (de oude rasterafstand), top 3 tot USP's = 44 px. */
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3d-hero--h2 .bv3d-hero__grid { gap: 0; }
  html body.bv3.bv3d .bv3d-hero--h2 .bv3d-hero__text { display: contents; }
  html body.bv3.bv3d .bv3d-hero--h2 .bv3d-hero__grid > .bv3d-top3 { order: 1; margin-top: 16px; }
  html body.bv3.bv3d .bv3d-hero--h2 .bv3d-hero__usps { order: 2; margin-top: 44px; }
}

/* 15-10-2026 M1 (CRO-ronde, opdracht Damon): in de samenvattingskaart van /software/<slug>/ staat de toelichting bij de prijsrij
   (dd.bv3-dl__note uit v3/single-software.php) over de volle kaartbreedte en links uitgelijnd, in plaats van in de smalle rechterkolom
   naast het label. Geen witruimte ingeleverd: rij-afstand (9 px), marges en paddings van de kaart blijven gelijk; lettergrootte en
   kleur komen ongewijzigd uit ".bv3-dl dd small" (bv-v3.css). Uitzetten: bv_cro_off "m1" (dan staat de markup weer in de oude dd). */
html body.bv3.bv3d .bv3-dl dd.bv3-dl__note { grid-column: 1 / -1; text-align: left; }

/* ==========================================================================
   CRO prijzenpagina's knoppen 17-10-2026 (Claude Code)
   Affiliateknoppen in de paginatekst (.bv3-prose) van /<software>-pakketten-prijzen/ gelijk aan .bv3d-btn:
   48 px hoog, 12 px afgerond, 700, padding 12px 22px (mobiel 12px 14px). Bouwt voort op pakket 1 (09-10-2026, hierboven).
   1. Knoppen in p.bv-cta-alt (a.btn.btn-primary op MoneyMonk, a.bv3-btn op Visma) elk op een eigen regel onder de tekst,
      16 px ertussen, op desktop gelijke breedte (max 400 px), tot 767 px volle breedte.
   2. Twee losse knop-alinea's onder elkaar (p > a.btn-affiliate:only-child): 16 px ertussen, gelijke breedte.
   3. Minimaal 72 px (desktop) / 48 px (mobiel) van het knopblok tot de volgende H2 (marge klapt samen met de 42 px van de H2).
   Alles binnen .bv3-prose: header-, navigatie- en themaknoppen (.bv3-header__cta, .bv3-mnav, .bv3d-btn) vallen erbuiten.
   Specificiteit 0,5,4 en hoger wint van bv-run.css (0,4,3, BL-381) en van pakket 1 (0,5,4, eerder in dit bestand).
   Kleur, tekst, href, rel en classes ongewijzigd (meting en GTM ongemoeid). Terugdraaien: dit blok verwijderen.
   ========================================================================== */
html body.bv3.bv3d .bv3-prose p.bv-cta-alt > a.btn.btn-primary,
html body.bv3.bv3d .bv3-prose p.bv-cta-alt > a.bv3-btn,
html body.bv3.bv3d .bv3-prose p:has(> a.btn-affiliate:only-child) > a.btn-affiliate {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  min-height: 48px !important;
  padding: 12px 22px !important;
  border-radius: 12px !important;
  border-width: 1.5px !important;
  font: 700 16px/1.25 var(--b3-font) !important;
  white-space: normal !important;
  text-align: center;
}
html body.bv3.bv3d .bv3-prose p.bv-cta-alt > a.btn.btn-primary,
html body.bv3.bv3d .bv3-prose p.bv-cta-alt > a.bv3-btn {
  margin: 16px 0 0 !important;
}
/* Ruimte tot de volgende H2 en tussen gestapelde knop-alinea's */
html body.bv3.bv3d .bv3-prose p.bv-cta-alt:has(> a.btn.btn-primary, > a.bv3-btn),
html body.bv3.bv3d .bv3-prose p:has(> a.btn-affiliate:only-child):has(+ h2) {
  margin-bottom: 72px !important;
}
html body.bv3.bv3d .bv3-prose p:has(> a.btn-affiliate:only-child):has(+ p > a.btn-affiliate:only-child) {
  margin-bottom: 16px !important;
}
html body.bv3.bv3d .bv3-prose p:has(> a.btn-affiliate:only-child) + p:has(> a.btn-affiliate:only-child) {
  margin-top: 0 !important;
}
@media (max-width: 767px) {
  html body.bv3.bv3d .bv3-prose p.bv-cta-alt > a.btn.btn-primary,
  html body.bv3.bv3d .bv3-prose p.bv-cta-alt > a.bv3-btn,
  html body.bv3.bv3d .bv3-prose p:has(> a.btn-affiliate:only-child) > a.btn-affiliate {
    max-width: none;
    padding: 12px 14px !important;
    font-size: 15px !important;
  }
  html body.bv3.bv3d .bv3-prose p.bv-cta-alt:has(> a.btn.btn-primary, > a.bv3-btn),
  html body.bv3.bv3d .bv3-prose p:has(> a.btn-affiliate:only-child):has(+ h2) {
    margin-bottom: 48px !important;
  }
}