.vb {
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-24: 24px;
  --fs-36: 36px;
  --fs-48: 48px;
}


.lp-sectie { padding-top: 96px; padding-bottom: 96px; }
.lp-band { background: var(--white); }
.lp-kop {
  max-width: 20em;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--navy-900);
  text-wrap: pretty;
}
.lp-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 72px;
  align-items: start;
}
.lp-split .lp-kop { max-width: 12em; }
.lp-knoppen { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

.lp-slot::after { background: var(--navy-700); }
.lp-slot .dark-band__title { max-width: 16em; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; text-wrap: balance; }
.lp-slot .dark-band__sub { max-width: 34em; }
.lp-slot .lp-knoppen { margin-top: 32px; }
.lp-slot__bel { margin-top: 20px; max-width: 34em; font-size: 15px; line-height: 1.55; color: var(--navy-100); }


.vb-hero::after { content: none; }
.vb-hero .hero__title { max-width: 13.5em; text-wrap: balance; }
.vb-hero .hero__title .accent::after { content: none; }
.vb-hero .hero__sub { max-width: 28em; text-wrap: balance; }

.vb-uitkomsten {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}
.vb-uitkomsten li { display: flex; align-items: baseline; gap: 12px; font-size: var(--fs-18); line-height: 1.45; color: var(--navy-100); }
.vb-uitkomsten strong { font-weight: 600; color: var(--white); }
.vb-uitkomsten__stip {
  flex: none;
  position: relative;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: var(--caution-on-dark);
}
.vb-hero .hero__cta { margin-top: 32px; }
.vb-hero .hero__note { margin-top: 16px; font-size: var(--fs-14); line-height: 1.5; }

@media (min-width: 721px) {
  .vb-uitkomsten { order: 4; }
  .vb-held { order: 7; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero--dark > .vb-uitkomsten { animation: swReveal 520ms cubic-bezier(0.2, 0.7, 0.2, 1) 180ms backwards; }
  .hero--dark > .vb-held { animation: swRevealFeed 520ms cubic-bezier(0.2, 0.7, 0.2, 1) 360ms backwards; }
}

.vb-held {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: 44px auto -120px auto;
  text-align: left;
}
.vb-held .feed { margin: 0; max-width: none; box-shadow: none; }

.vb-voorbeeld { margin: 0 0 8px 0; font-size: var(--fs-13); font-weight: 500; line-height: 1.4; color: var(--ink-600); text-align: left; }
.vb-voorbeeld sup { margin-left: 1px; font-size: 0.75em; }
.vb-voorbeeld sup a { color: inherit; }
.vb-hero .vb-voorbeeld { color: var(--navy-100); }


.vb-scherm {
  container-type: inline-size;
  --rand: 20px;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-kaart);
  overflow: hidden;
  text-align: left;
}
.vb-scherm__kop {
  min-height: 48px;
  padding: 10px var(--rand);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.vb-scherm__titel { font-size: var(--fs-14); font-weight: 600; color: var(--ink-900); }
.vb-scherm__periode { margin-left: auto; font-size: var(--fs-13); color: var(--ink-600); }
.vb-scherm__periode sup { margin-left: 1px; font-size: 0.75em; }
.vb-scherm__periode sup a { color: inherit; }

.vb-tabel { width: calc(100% + 2 * var(--rand)); margin: 14px calc(-1 * var(--rand)) 0 calc(-1 * var(--rand)); font-size: var(--fs-13); }
.vb-tabel th {
  padding: 8px 0 8px 12px;
  text-align: left;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--ink-600);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: bottom;
}
.vb-tabel td { height: 44px; padding: 6px 0 6px 12px; border-bottom: 1px solid var(--line); color: var(--ink-900); vertical-align: middle; }
.vb-tabel th:first-child, .vb-tabel td:first-child { padding-left: var(--rand); }
.vb-tabel th:last-child, .vb-tabel td:last-child { padding-right: var(--rand); }
.vb-tabel tbody tr:last-child td { border-bottom: 0; }
.vb-tabel tfoot th, .vb-tabel tfoot td { height: 44px; border-top: 1px solid var(--line); border-bottom: 0; vertical-align: middle; }
.vb-tabel tfoot th { font-size: var(--fs-13); font-weight: 600; color: var(--ink-900); }
.vb-tabel tfoot td { font-weight: 600; }
.vb-tabel .num { text-align: right; }
.vb-tabel td.num { font-family: var(--font-mono); font-size: var(--fs-13); }
.vb-tabel .num--platform { color: var(--ink-600); }
.vb-tabel .num--telt { color: var(--navy-900); font-weight: 500; }
.vb-tabel tfoot .num--platform { font-weight: 500; }
.vb-tabel tfoot .num--telt { font-weight: 600; }
.vb-tabel .num--let-op { color: var(--caution-text); font-weight: 500; }
.vb-tabel__naam { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-900); white-space: nowrap; }
.vb-logo { flex: none; width: 16px; height: 16px; }
.vb-tabel__pad { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-900); white-space: nowrap; }
.vb-tabel tr.is-licht td { background: var(--navy-50); }

@container (max-width: 480px) {
  .vb-scherm__kop, .vb-tabel { --rand: 14px; }
  .vb-tabel th { padding-left: 8px; }
  .vb-tabel td { padding-left: 8px; }
}
@container (max-width: 300px) {
  .vb-scherm__kop, .vb-tabel { --rand: 12px; }
  .vb-tabel th, .vb-tabel td { padding-left: 6px; }
  .vb-tabel--attributie .vb-logo, .vb-tabel--kaart .vb-logo { display: none; }
}
@container (max-width: 680px) {
  .vb-tabel .vb-breed { display: none; }
  .vb-tabel--attributie th { white-space: normal; line-height: 1.3; }
  .vb-tabel--attributie .vb-tabel__naam { white-space: normal; line-height: 1.3; }
}

.vb-tabel--kaart { width: 100%; margin: 0; font-size: var(--fs-14); }
.vb-tabel--kaart th { padding-top: 10px; padding-bottom: 10px; font-size: var(--fs-13); }
.vb-tabel--kaart td { height: 48px; white-space: nowrap; }
.vb-tabel--kaart td.num { font-size: var(--fs-14); }
.vb-tabel--kaart .vb-tabel__naam { font-weight: 500; }
.vb-tabel--kaart .vb-tabel__pad { font-size: var(--fs-13); }
.vb-tabel__vink { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.vb-vink { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--positive); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }


.vb-strook { padding-top: 168px; padding-bottom: 40px; text-align: center; }
.vb-strook__rij { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 36px; }
.vb-strook__logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 32px; }
.vb-strook .dest { color: var(--ink-600); }
.vb-strook .dest .logo { filter: grayscale(1); opacity: 0.7; }
.vb-strook__noot { margin-top: 18px; font-size: var(--fs-13); color: var(--ink-600); }


#gap .lp-sectie { padding-bottom: 48px; }
.vb-kloof { max-width: 760px; margin: 36px 0 0 0; }
.vb-tabel--kloof { width: 100%; margin: 0; font-size: var(--fs-16); }
.vb-tabel--kloof thead th { padding-top: 10px; padding-bottom: 10px; background: var(--navy-50); }
.vb-tabel--kloof tbody th, .vb-tabel--kloof tfoot th {
  height: 52px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--ink-900);
  vertical-align: middle;
}
.vb-tabel--kloof td { height: 52px; }
.vb-tabel--kloof td.num { font-size: var(--fs-16); }
.vb-tabel--kloof tbody tr:last-child th { border-bottom: 0; }
.vb-tabel--kloof tr.is-stil th { color: var(--ink-600); }
.vb-tabel--kloof tfoot th { font-weight: 600; }
.vb-kloof__slot { margin-top: 20px; font-size: var(--fs-18); line-height: 1.5; font-weight: 500; color: var(--navy-900); }


.lp-rij { margin: 56px 0 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.lp-kolom { min-width: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.lp-icoon {
  display: block;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--navy-900);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-kolom__titel { margin-top: 18px; font-size: var(--fs-18); line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: var(--navy-900); text-wrap: pretty; }
.lp-kolom__getal { color: var(--caution-text); }
.lp-kolom__titel sup { margin-left: 1px; font-size: 0.6em; font-weight: 500; }
.lp-kolom__titel sup a { color: var(--ink-600); }
.lp-kolom__tekst { margin-top: 8px; font-size: var(--fs-16); line-height: 1.55; color: var(--ink-600); }


.vb #product { padding-top: 0; padding-bottom: 48px; }
.vb-attributie {
  padding-top: 48px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 72px;
  align-items: end;
}
.vb-attributie__kop { max-width: 11em; text-wrap: balance; }
.vb-attributie__brug { font-size: var(--fs-18); line-height: 1.5; font-weight: 500; color: var(--navy-900); }
.vb-telt { margin-top: 12px; display: grid; gap: 6px; }
.vb-telt div { font-size: var(--fs-16); line-height: 1.55; color: var(--ink-600); }
.vb-telt dt { display: inline; font-weight: 600; color: var(--navy-900); }
.vb-telt dd { display: inline; margin: 0; }
.vb-telt sup { font-size: 0.65em; font-weight: 500; color: var(--ink-600); }
.vb-attributie__beeld { grid-column: 1 / -1; margin: 16px 0 0 0; }
.vb-tabel--attributie { width: 100%; margin: 0; }
.vb-attributie__slot { margin-top: 16px; font-size: var(--fs-16); line-height: 1.55; color: var(--ink-600); }


.vb-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vb-drie { margin-top: 72px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 0; }
.vb-kaart { min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.vb-kaart__kop {
  font-family: var(--font-heading);
  font-size: var(--fs-24);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--navy-900);
}
.vb-kaart__tekst { margin-top: 8px; font-size: var(--fs-16); line-height: 1.5; color: var(--ink-600); }
.vb-kaart__beeld { margin: 24px 0 0 0; }


.vb-stappen .lp-sectie { padding-top: 72px; }
.vb-stappen__rij { margin: 40px 0 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vb-stap { min-width: 0; padding: 28px 28px 32px 28px; background: var(--navy-50); border-radius: var(--r-kaart); }
.vb-stap__num {
  font-family: var(--font-heading);
  font-size: var(--fs-48);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy-700);
}
.vb-stap__kop { margin-top: 24px; font-family: var(--font-heading); font-size: var(--fs-24); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--navy-900); }
.vb-stap__tekst { margin-top: 10px; font-size: var(--fs-16); line-height: 1.55; color: var(--ink-600); }


.vb-prijzen__sub { margin-top: 14px; font-size: var(--fs-18); line-height: 1.5; color: var(--ink-600); }
.vb-plannen { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vb-plan { display: flex; flex-direction: column; min-width: 0; padding: 24px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-kaart); }
.vb-plan--aanrader { border: 2px solid var(--navy-700); padding: 23px 21px; }
.vb-plan__naam { font-family: var(--font-heading); font-size: var(--fs-18); font-weight: 600; color: var(--navy-900); }
.vb-plan__voor { margin-top: 4px; min-height: 2.9em; font-size: var(--fs-14); line-height: 1.45; color: var(--ink-600); }
.vb-plan__prijs { margin-top: 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.vb-plan__bedrag { font-family: var(--font-heading); font-size: var(--fs-36); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--navy-900); white-space: nowrap; }
.vb-plan__per { font-size: var(--fs-14); line-height: 1.45; color: var(--ink-600); white-space: nowrap; }
.vb-plan__lijst { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.vb-plan__lijst li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 9px; align-items: start; font-size: var(--fs-14); line-height: 1.45; font-weight: 500; color: var(--ink-900); }
.vb-plan__lijst .vb-vink { margin-top: 1px; }
.vb-plan__lijst li.vb-plan__eigen { font-weight: 600; color: var(--navy-900); }
.vb-plan__lijst li.vb-plan__eigen + li:not(.vb-plan__eigen) { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.vb-plan__knop { margin-top: 24px; }

.vb-prijzen__klein { margin-top: 24px; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-600); }
.vb-prijzen__klein a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }


.vb-vragen .faq__list { margin-top: 0; }
.vb .faq__q { font-size: var(--fs-18); }


.vb-noten { background: var(--navy-950); }
.vb-noten__binnen { padding-top: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(58, 111, 181, 0.4); }
.vb-noten ol { margin: 0; padding-left: 18px; max-width: 64em; }
.vb-noten li { font-size: var(--fs-12); line-height: 1.6; color: rgba(233, 239, 248, 0.7); }
.vb-noten li::marker { color: rgba(233, 239, 248, 0.7); }
.vb-noten li + li { margin-top: 8px; }
.vb-noten__slot { margin-top: 14px; font-size: var(--fs-12); color: rgba(233, 239, 248, 0.7); }

.vb-slot__bel { margin-top: 16px; font-size: var(--fs-16); }
.vb-slot__bel a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.vb-slot__bel a:hover { color: var(--navy-100); }


@media (max-width: 1180px) {
  .vb-plannen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .lp-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
}

@media (max-width: 900px) {
  .lp-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-split .lp-kop { max-width: 20em; }
  .vb-attributie { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .vb-attributie__kop { max-width: 14em; }
  .vb-attributie__beeld { margin-top: 8px; }
  .vb-drie { margin-top: 56px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 48px; }
  .vb-kaart { display: flex; flex-direction: column; grid-row: auto; }
  .vb-kaart__beeld { max-width: 560px; width: 100%; }
  .vb-stappen__rij { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vb-stap { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 22px 22px 24px 22px; }
  .vb-stap__num { grid-row: 1 / span 2; font-size: var(--fs-36); }
  .vb-stap__kop { margin-top: 2px; font-size: var(--fs-18); }
  .vb-stap__tekst { margin-top: 6px; }
}

@media (max-width: 720px) {
  .lp-sectie { padding-top: 56px; padding-bottom: 56px; }
  .lp-knoppen { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .lp-knoppen .btn { width: 100%; }
  .lp-slot .lp-knoppen { margin-top: 28px; }
  .lp-slot .btn { min-height: 52px; }
  .lp-slot__bel { font-size: 14px; }

  .vb-hero .hero__kicker { display: block; margin-bottom: 12px; }
  .vb-uitkomsten { margin-top: 22px; gap: 10px; }
  .vb-uitkomsten li { font-size: var(--fs-16); gap: 10px; }
  .vb-hero .hero__cta { margin-top: 24px; }
  .vb-hero .hero__note { margin-top: 12px; font-size: var(--fs-13); }
  .vb-held { margin-top: 32px; margin-bottom: -48px; }
  .vb-held .feed__list { height: auto; min-height: 200px; }
  .vb-held .feed__list > .feed__row:nth-child(n+4) { display: none; }
  .vb-scherm__kop { padding-top: 8px; padding-bottom: 8px; }

  .vb-strook { padding-top: 88px; padding-bottom: 28px; }
  .vb-strook__rij { gap: 12px; }
  .vb-strook__logos { gap: 12px 20px; }

  #gap .lp-sectie { padding-bottom: 32px; }
  .vb-kloof { margin-top: 24px; }
  .vb-tabel--kloof, .vb-tabel--kloof tbody th, .vb-tabel--kloof tfoot th, .vb-tabel--kloof td.num { font-size: var(--fs-14); }
  .vb-tabel--kloof tbody th, .vb-tabel--kloof tfoot th, .vb-tabel--kloof td { height: 48px; }
  .vb-kloof__slot { margin-top: 16px; font-size: var(--fs-16); }
  .lp-rij { margin-top: 28px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-kolom { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 0 20px 0; }
  .lp-icoon { grid-row: 1 / span 2; width: 28px; height: 28px; }
  .lp-kolom__titel { margin-top: 2px; font-size: var(--fs-16); }
  .lp-kolom__tekst { margin-top: 4px; font-size: var(--fs-14); }

  .vb #product { padding-bottom: 32px; }
  .vb-attributie { padding-top: 32px; }
  .vb-attributie__brug { font-size: var(--fs-16); }
  .vb-telt div { font-size: var(--fs-14); }
  .vb-attributie__slot { margin-top: 12px; font-size: var(--fs-14); }
  .vb-drie { margin-top: 48px; row-gap: 40px; }
  .vb-kaart__kop { font-size: var(--fs-24); }
  .vb-kaart__tekst { font-size: var(--fs-16); }
  .vb-kaart__beeld { margin-top: 16px; }

  .vb-stappen .lp-sectie { padding-top: 48px; }
  .vb-stappen__rij { margin-top: 24px; }
  .vb-stap { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 20px 18px 22px 18px; }
  .vb-stap__num { font-size: var(--fs-36); }
  .vb-stap__tekst { font-size: var(--fs-16); }

  .vb-prijzen__sub { font-size: var(--fs-16); }
  .vb-plannen { margin-top: 24px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vb-plan { padding: 20px 18px; }
  .vb-plan--aanrader { padding: 19px 17px; }
  .vb-plan__voor { min-height: 0; }
  .vb-prijzen__klein { margin-top: 20px; }

  .vb .faq__q { font-size: var(--fs-16); }
  .vb .faq__a { font-size: var(--fs-14); }
  .vb-noten__binnen { padding-top: 32px; padding-bottom: 28px; }
}