/* Btw-voorbereiding: de administratie verzameld, de verschillen naast elkaar. */

.vp-btw-page {
  --bv-paper: var(--vp-kaart, #fbf9f4);
  --bv-band: var(--vp-band, #f3f0e9);
  --bv-ink: var(--vp-navy, #1e3a5f);
  --bv-body: var(--vp-body, #263f5c);
  --bv-line: var(--vp-zachte-rand, #ded8cc);
  --bv-orange: var(--vp-accent-op-licht, #a5441a);
  --bv-orange-bright: #e66d36;
  --bv-teal: var(--vp-teal, #0fa48d);
  /* Zelfde afweging als op Kennisvragen: het heldere accent haalt op de warme
     band maar 2,80:1 en valt onder de 3:1 van WCAG 1.4.11. Het donkere accent
     haalt daar 5,36:1 en op papier 5,80:1, dus dat draagt de focusring. */
  --bv-focus: var(--bv-orange);
  --bv-shadow: 0 34px 70px -42px rgba(14, 24, 38, .58);
  background: var(--bv-paper);
  color: var(--bv-body);
  overflow-x: clip;
}

.vp-btw-page main {
  overflow: clip;
}

.vp-btw-page main > section {
  padding-block: clamp(72px, 7vw, 112px);
}

.vp-btw-page main > section > .container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.vp-btw-page h1,
.vp-btw-page h2,
.vp-btw-page h3,
.vp-btw-page p,
.vp-btw-page li,
.vp-btw-page dt,
.vp-btw-page dd {
  color: inherit;
}

.vp-btw-page h2 {
  margin: 0;
  color: var(--bv-ink);
  font-size: clamp(2.15rem, 3.3vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -1px;
  text-wrap: balance;
}

/* Alleen het volle-breedte moment draagt de grote homepagemaat. */
.vp-btw-page .vp-bv-flow-head h2 {
  font-size: clamp(2.4rem, 4.6vw, 4.3rem);
  line-height: 1.02;
}

.vp-btw-page h2 span {
  color: var(--bv-orange);
}

.vp-btw-page h3 {
  margin: 0;
  color: var(--bv-ink);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.18;
  letter-spacing: -.025em;
}

.vp-btw-page .vp-bv-lead {
  max-width: 650px;
  margin: 22px 0 0;
  color: var(--bv-body);
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.62;
}

.vp-btw-page main a:not(.app-button) {
  color: var(--bv-orange);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.vp-btw-page a:focus-visible,
.vp-btw-page button:focus-visible {
  outline: 3px solid var(--bv-focus);
  outline-offset: 4px;
}

/* Toneel van de hero ----------------------------------------------------
   De inhoudelijke secties tonen gerenderde diorama's uit images/btw-3d/.
   Alleen de hero bouwt zijn scene met deze laag op, zodat die scherp blijft
   op elke schermdichtheid en direct in beeld staat. */

.vp-bv-scene {
  --scene-height: 500px;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: var(--scene-height);
  border: 1px solid rgba(30, 58, 95, .1);
  border-radius: 34px;
  background:
    radial-gradient(circle at 58% 30%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 36%),
    linear-gradient(145deg, #f9f6ef, #eae4d9);
  box-shadow: inset 0 1px rgba(255, 255, 255, .9), var(--bv-shadow);
  perspective: 1050px;
  overflow: hidden;
}

.vp-bv-scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 11%;
  right: 8%;
  bottom: 8%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(30, 58, 95, .22), transparent 68%);
  filter: blur(15px);
  transform: rotateX(72deg);
}

.vp-bv-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 9%;
  right: 7%;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 109, 54, .15), transparent 68%);
  filter: blur(16px);
}

/* Hero ------------------------------------------------------------------ */

.vp-btw-page .vp-bv-hero {
  min-height: min(860px, 92svh);
  padding-block: clamp(150px, 13vw, 196px) clamp(84px, 8vw, 112px);
  display: flex;
  align-items: center;
}

.vp-btw-page .vp-bv-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  display: grid;
}

.vp-btw-page .vp-bv-hero-copy {
  width: auto;
  max-width: 620px;
  margin-inline: 0;
  min-width: 0;
  text-align: left;
}

.vp-btw-page.vp-homepage-canon.vp-x-kern .vp-bv-hero h1 {
  max-width: 14ch;
  margin: 0;
  color: var(--bv-ink);
  font-size: clamp(2.75rem, 3.9vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -2px;
  text-wrap: balance;
}

.vp-btw-page .vp-bv-hero h1 span {
  color: var(--bv-orange);
}

.vp-btw-page .vp-bv-hero-copy > p {
  max-width: 560px;
  margin: 28px 0 0;
  color: var(--bv-body);
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  line-height: 1.62;
}

.vp-btw-page .vp-bv-hero .button-div {
  flex-wrap: wrap;
  margin-top: 34px;
}

.vp-bv-hero-scene {
  --scene-height: 520px;
  transform: rotate(.6deg);
}

.vp-bv-hero-vloer {
  fill: rgba(30, 58, 95, .16);
}

.vp-bv-hero-scene .vp-tool-beeld {
  position: absolute;
  z-index: 0;
  inset: 0;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.vp-bv-hero-scene .vp-tool-beeld svg {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: visible;
}

/* De tafel waar de voorbereiding op ligt. */
.vp-bv-plank {
  position: absolute;
  z-index: 2;
  left: 14%;
  right: 14%;
  bottom: 16%;
  height: 18%;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  background: linear-gradient(154deg, #345877, #14273f 74%);
  box-shadow: inset 0 2px rgba(255, 255, 255, .16), -18px 30px 40px -27px rgba(14, 24, 38, .8);
  transform: rotateX(62deg) rotateZ(-3deg) translateZ(4px);
}

.vp-bv-plank::after {
  content: "";
  position: absolute;
  left: 12%;
  bottom: 26%;
  width: 40%;
  height: 8px;
  border-radius: 4px;
  background: var(--bv-orange-bright);
}

/* De administratie: een stapel vellen links. */
.vp-bv-hero-bron {
  position: absolute;
  z-index: 5;
  left: 4%;
  top: 13%;
  width: 26%;
  height: 30%;
  border: 1px solid rgba(30, 58, 95, .16);
  border-radius: 17px;
  background: linear-gradient(145deg, #fffdf8, #e6ded2);
  box-shadow:
    inset 0 1px white,
    9px -9px 0 -1px #efe8db,
    18px -18px 0 -2px #e6ddcd,
    -18px 27px 35px -26px rgba(14, 24, 38, .62);
  transform: rotateY(18deg) rotateZ(-8deg) translateZ(46px);
}

.vp-bv-hero-bron::before,
.vp-bv-hero-bron::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 18%;
  height: 6px;
  border-radius: 3px;
  background: #c8c0b4;
}

.vp-bv-hero-bron::before { top: 28%; }
.vp-bv-hero-bron::after { top: 50%; right: 42%; }

.vp-bv-hero-bron i {
  position: absolute;
  right: 14%;
  bottom: 17%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bv-orange-bright);
  box-shadow: 0 0 18px rgba(230, 109, 54, .6);
}

/* Het vergelijkvel: twee kolommen, één rij leest oranje. */
.vp-bv-hero-vel {
  position: absolute;
  z-index: 7;
  right: 6%;
  top: 8%;
  width: 46%;
  height: 62%;
  padding: 12% 6% 6%;
  border: 1px solid rgba(30, 58, 95, .15);
  border-radius: 19px;
  background: linear-gradient(148deg, #fffdf8, #e7dfd3);
  box-shadow: inset 0 1px white, -23px 32px 41px -29px rgba(14, 24, 38, .66);
  transform: rotateY(-12deg) rotateZ(3deg) translateZ(84px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18%;
  align-content: start;
  row-gap: 13%;
}

/* De kolomlijn in het midden. */
.vp-bv-hero-vel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24%;
  bottom: 14%;
  width: 4px;
  border-radius: 2px;
  background: rgba(30, 58, 95, .14);
}

/* De kop van het vel. */
.vp-bv-hero-vel::after {
  content: "";
  position: absolute;
  left: 13%;
  top: 11%;
  width: 46%;
  height: 8px;
  border-radius: 4px;
  background: #c6beb2;
}

.vp-bv-hero-vel span {
  height: 7px;
  border-radius: 4px;
  background: #c6beb2;
  display: block;
}

.vp-bv-hero-vel span:nth-child(2) { width: 82%; }
.vp-bv-hero-vel span:nth-child(4) { width: 74%; }
.vp-bv-hero-vel span:nth-child(6) { width: 86%; }

/* De rij die afwijkt. */
.vp-bv-hero-vel b {
  height: 9px;
  margin-top: -1px;
  border-radius: 4px;
  background: var(--bv-orange-bright);
  display: block;
}

.vp-bv-hero-vel b + b { width: 66%; }

.vp-bv-hero-vel i {
  position: absolute;
  right: 9%;
  top: 9%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bv-teal);
  box-shadow: 0 0 15px rgba(15, 164, 141, .72);
}

/* De ontbrekende post ligt er los onder. */
.vp-bv-hero-apart {
  position: absolute;
  z-index: 8;
  right: 10%;
  bottom: 7%;
  width: 20%;
  height: 16%;
  border: 3px solid rgba(165, 68, 26, .55);
  border-radius: 13px;
  background: linear-gradient(148deg, #f4efe6, #e3dccd);
  box-shadow: -14px 20px 28px -22px rgba(14, 24, 38, .6);
  transform: rotateZ(6deg) translateZ(96px);
}

.vp-bv-hero-apart::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 30%;
  right: 30%;
  height: 6px;
  border-radius: 3px;
  background: #b6ac9d;
}

.vp-bv-hero-apart::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 16%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bv-orange-bright);
}

/* Het spoor van de administratie naar het vel. */
.vp-bv-hero-spoor {
  position: absolute;
  z-index: 9;
  left: 33%;
  top: 42%;
  width: 12%;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bv-orange), var(--bv-orange-bright));
  transform: rotate(-7deg) translateZ(104px);
}

.vp-bv-hero-spoor::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-top: 4px solid var(--bv-orange-bright);
  border-right: 4px solid var(--bv-orange-bright);
  transform: translateY(-50%) rotate(45deg);
}

/* Diorama-beelden -------------------------------------------------------
   De verhouding staat in de CSS en niet alleen op het img-element, dus de
   plek van het beeld ligt vast voordat het bestand binnen is. `contain`
   houdt de scene ongerekt in elke container. */

.vp-bv-beeld {
  width: 100%;
  min-width: 0;
  margin: 0;
  aspect-ratio: 1448 / 1086;
  /* Het beeld draagt zelf een warm off-white vlak; het paneel krijgt exact
     die kleur, zodat er ook op de navy sectie geen rand omheen valt. */
  background: #fbf7f0;
  border-radius: 34px;
  box-shadow: 0 30px 60px -44px rgba(14, 24, 38, .5);
  overflow: hidden;
}

.vp-bv-source-section .vp-bv-beeld {
  box-shadow: 0 38px 70px -40px rgba(0, 0, 0, .72);
}

.vp-bv-beeld picture {
  display: block;
  width: 100%;
  height: 100%;
}

.vp-bv-beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.vp-bv-beeld--breed {
  aspect-ratio: 1870 / 841;
}

.vp-bv-beeld--feiten {
  width: min(100%, 460px);
  margin-inline: auto;
}

/* Hoofdverhaal ---------------------------------------------------------- */

.vp-bv-flow-section {
  background: var(--bv-paper);
}

.vp-bv-flow-head {
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
  gap: clamp(38px, 7vw, 100px);
  align-items: end;
  display: grid;
}

.vp-bv-flow-head .vp-bv-lead {
  margin: 0 0 7px;
}

.vp-bv-flow-board {
  margin-top: clamp(48px, 6vw, 82px);
  padding: clamp(26px, 4vw, 48px);
  border-radius: 32px;
  background: var(--bv-band);
}

.vp-bv-flow-copy {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 42px);
  margin-top: 36px;
  display: grid;
}

.vp-bv-flow-copy article {
  min-width: 0;
  padding-top: 21px;
  border-top: 2px solid rgba(30, 58, 95, .14);
}

.vp-bv-flow-copy article:nth-child(2) { border-color: rgba(165, 68, 26, .55); }
.vp-bv-flow-copy article:nth-child(3) { border-color: rgba(15, 164, 141, .55); }

.vp-bv-flow-copy p,
.vp-bv-source-list p,
.vp-bv-choice-list p,
.vp-bv-fit-copy p,
.vp-bv-faq p {
  margin: 11px 0 0;
  color: var(--bv-body);
  font-size: 1.06rem;
  line-height: 1.6;
}

/* Donker: wat Vastpilot inricht ----------------------------------------- */

.vp-bv-source-section {
  color: var(--bv-body);
  background: var(--bv-paper);
}

.vp-bv-source-grid {
  grid-template-columns: minmax(330px, .88fr) minmax(0, 1.12fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
  display: grid;
}

.vp-bv-source-section h2,
.vp-bv-source-section h3 { color: var(--bv-ink); }
.vp-bv-source-section h2 span { color: var(--bv-orange); }
.vp-bv-source-section .vp-bv-lead,
.vp-bv-source-section .vp-bv-source-list p { color: var(--bv-body); }

/* Vier punten als 2x2-raster in plaats van een lijst: halveert de scrolhoogte. */
.vp-bv-source-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(26px, 3vw, 44px);
  margin-top: 34px;
  display: grid;
}

.vp-bv-source-list article {
  padding: 19px 0 23px;
  border-top: 1px solid rgba(30, 58, 95, .16);
}

/* Keuze van de klant ---------------------------------------------------- */

.vp-bv-choice-section {
  background: var(--bv-paper);
}

.vp-bv-choice-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
  display: grid;
}

/* Vier stappen op een rij: nummer boven de zin. Onder 992px twee naast
   elkaar, onder 480px onder elkaar. */
.vp-bv-choice-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(26px, 3vw, 44px);
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  counter-reset: bv-keuze;
}

.vp-bv-choice-list li {
  padding: 17px 0 21px;
  border-top: 1px solid rgba(30, 58, 95, .16);
  counter-increment: bv-keuze;
}

.vp-bv-choice-list li::before {
  content: "0" counter(bv-keuze);
  color: var(--bv-orange);
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.04em;
  display: block;
}

.vp-bv-choice-list p { margin: 10px 0 0; }

.vp-bv-choice-link { margin-top: 28px; }

/* In de kopregels van keuze en wel/niet is het beeld begeleiding, geen
   hoofdmoment: kleiner houden scheelt schermhoogte. */
.vp-bv-choice-grid .vp-bv-beeld,
.vp-bv-fit-layout .vp-bv-beeld {
  width: min(100%, 380px);
  margin-inline: auto;
}

/* Voorwaarden ----------------------------------------------------------- */

.vp-bv-facts-section {
  background: var(--bv-band);
}

.vp-bv-facts-head {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  gap: clamp(42px, 8vw, 112px);
  align-items: center;
  display: grid;
}

/* Vier voorwaarden als 2x2-raster: kop boven tekst, twee naast elkaar.
   Dat scheelt de helft aan scrollen ten opzichte van de oude term/tekst-rijen. */
.vp-bv-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(36px, 6vw, 88px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
}

.vp-bv-facts > div {
  padding: 26px 0 30px;
  border-top: 1px solid rgba(30, 58, 95, .17);
}

.vp-bv-facts dt {
  color: var(--bv-ink);
  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 700;
}

.vp-bv-facts dd {
  margin: 12px 0 0;
  font-size: 1.06rem;
  line-height: 1.6;
}

.vp-bv-koppel-lijst {
  margin: 8px 0 0;
  padding-left: 20px;
}

.vp-bv-koppel-lijst li::marker { color: var(--bv-orange); }

/* Wel of niet ----------------------------------------------------------- */

.vp-bv-fit-section {
  background: var(--bv-paper);
}

.vp-bv-fit-layout {
  grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
  display: grid;
}

/* Wel en niet naast elkaar in plaats van onder elkaar. */
.vp-bv-fit-copy {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(26px, 3vw, 44px);
  margin-top: 38px;
  display: grid;
}

.vp-bv-fit-copy article {
  padding: 25px 0;
  border-top: 1px solid rgba(30, 58, 95, .17);
}

/* Vragen ---------------------------------------------------------------- */

.vp-bv-faq-section {
  background: var(--bv-band);
}

.vp-bv-faq-head {
  max-width: 780px;
}

.vp-bv-faq {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 7vw, 92px);
  margin-top: clamp(44px, 6vw, 72px);
  display: grid;
}

.vp-bv-faq article {
  min-width: 0;
  padding: 28px 0 32px;
  border-top: 1px solid rgba(30, 58, 95, .18);
}

.vp-bv-faq h3 {
  max-width: 28ch;
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
}

.vp-bv-faq p {
  max-width: 54ch;
}

/* Slot ------------------------------------------------------------------ */

.vp-btw-page .vp-bv-cta {
  padding-block: clamp(100px, 10vw, 148px);
  background: var(--bv-paper);
}

.vp-bv-cta-inner {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.vp-bv-cta-inner h2 {
  font-size: clamp(3rem, 6vw, 5.5rem);
}

.vp-bv-cta-inner p {
  max-width: 650px;
  margin: 26px auto 0;
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  line-height: 1.65;
}

.vp-bv-cta-inner .button-div {
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* ---------------------------------------------------------------------------
   Beweging bij onthulling. Deze regels hangen aan `.vp-anim-in`, de klasse die
   vp/anim.js pas zet zodra een blok in beeld komt, en aan `html.vp-anim-armed`,
   die alleen bestaat als er JavaScript draait en de bezoeker geen reduced
   motion heeft. Zonder een van beide staat de scene meteen in de eindstand.
   Elke keyframe eindigt daarom op exact de rusttransform hierboven.
   --------------------------------------------------------------------------- */

@keyframes vp-bv-vel-in {
  from { opacity: 0; transform: rotateY(-12deg) rotateZ(3deg) translateZ(84px) translateX(46px); }
  to { opacity: 1; transform: rotateY(-12deg) rotateZ(3deg) translateZ(84px) translateX(0); }
}

@keyframes vp-bv-apart-in {
  from { opacity: 0; transform: rotateZ(6deg) translateZ(96px) translateY(26px); }
  to { opacity: 1; transform: rotateZ(6deg) translateZ(96px) translateY(0); }
}

@keyframes vp-bv-spoor-in {
  from { opacity: 0; transform: rotate(-7deg) translateZ(104px) scaleX(.1); }
  to { opacity: 1; transform: rotate(-7deg) translateZ(104px) scaleX(1); }
}

html.vp-anim-armed .vp-bv-hero-scene.vp-anim-in .vp-bv-hero-vel {
  animation: vp-bv-vel-in 700ms var(--vp-anim-ease, ease) 420ms backwards;
}

html.vp-anim-armed .vp-bv-hero-scene.vp-anim-in .vp-bv-hero-apart {
  animation: vp-bv-apart-in 620ms var(--vp-anim-ease, ease) 640ms backwards;
}

html.vp-anim-armed .vp-bv-hero-scene.vp-anim-in .vp-bv-hero-spoor {
  transform-origin: left center;
  animation: vp-bv-spoor-in 520ms var(--vp-anim-ease, ease) 360ms backwards;
}

@media (hover: hover) and (pointer: fine) {
  .vp-bv-hero-scene,
  .vp-bv-beeld {
    transition: transform .35s ease;
  }

  .vp-bv-hero-scene:hover { transform: rotate(.6deg) translateY(-5px); }
  .vp-bv-beeld:hover { transform: translateY(-5px); }
}

@media (max-width: 991px) {
  .vp-btw-page .vp-bv-hero-grid,
  .vp-bv-source-grid,
  .vp-bv-choice-grid,
  .vp-bv-fit-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .vp-btw-page .vp-bv-hero-copy {
    max-width: 760px;
    text-align: center;
    margin-inline: auto;
  }

  .vp-btw-page.vp-homepage-canon.vp-x-kern .vp-bv-hero h1 {
    max-width: 18ch;
    margin-inline: auto;
  }

  .vp-btw-page .vp-bv-hero-copy > p {
    margin-inline: auto;
  }

  .vp-btw-page .vp-bv-hero .button-div {
    justify-content: center;
  }

  .vp-bv-flow-head,
  .vp-bv-facts-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .vp-bv-choice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vp-bv-flow-head .vp-bv-lead { margin-top: 22px; }}

@media (max-width: 767px) {
  .vp-btw-page main > section {
    padding-block: clamp(62px, 16vw, 88px);
  }

  .vp-btw-page .vp-bv-hero {
    min-height: auto;
    padding-top: 116px;
  }

  .vp-btw-page.vp-homepage-canon.vp-x-kern .vp-bv-hero h1 {
    max-width: 14ch;
    font-size: clamp(2.7rem, 11vw, 3.9rem);
  }

  .vp-bv-scene,
  .vp-bv-hero-scene {
    --scene-height: 430px;
  }

  .vp-bv-flow-copy,
  .vp-bv-faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .vp-bv-flow-board {
    padding: 18px;
  }

  .vp-bv-beeld--breed {
    aspect-ratio: 1448 / 1086;
  }

  .vp-bv-flow-copy {
    margin-top: 22px;
  }

  /* Onder 480px is er geen ruimte voor twee tekstkolommen; daarboven blijven
     de 2x2-rasters staan, zodat ook een smal scherm minder hoeft te scrollen. */
  .vp-bv-facts > div {
    padding: 20px 0 24px;
  }

  .vp-bv-source-list article {
    padding: 15px 0 19px;
  }

  .vp-bv-choice-list li {
    padding: 14px 0 18px;
  }}

@media (max-width: 479px) {
  /* Ook op telefoonbreedte twee kolommen: kleinere koppen en een smallere
     gutter houden de tekst leesbaar in een kolom van zo'n 150px. */
  .vp-bv-facts,
  .vp-bv-source-list,
  .vp-bv-choice-list,
  .vp-bv-fit-copy {
    column-gap: 18px;
  }

  .vp-bv-facts dt,
  .vp-bv-source-list h3,
  .vp-bv-fit-copy h3 {
    font-size: 1.12rem;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .vp-bv-facts dd,
  .vp-bv-source-list p,
  .vp-bv-choice-list p,
  .vp-bv-fit-copy p {
    font-size: .95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    hyphens: auto;
  }}

@media (max-width: 479px) {
  .vp-btw-page main > section > .container {
    padding-inline: 18px;
  }

  .vp-btw-page .vp-bv-hero-grid {
    gap: 34px;
  }

  .vp-btw-page .vp-bv-hero-copy > p,
  .vp-btw-page .vp-bv-lead,
  .vp-btw-page .vp-bv-cta-inner p {
    font-size: 1.02rem;
    line-height: 1.58;
  }

  .vp-btw-page .button-div > .app-button {
    width: 100%;
    justify-content: center;
  }

  .vp-bv-scene,
  .vp-bv-hero-scene {
    --scene-height: 345px;
    border-radius: 25px;
  }

  .vp-bv-hero-bron { left: 3%; width: 27%; }
  /* Op 320px duwt translateZ(84px) het vel voorbij de scenerand.
     Een vlakkere stand houdt het binnen; de keyframe hieronder eindigt op
     exact deze transform, zodat het vel na de onthulling niet verspringt. */
  .vp-bv-hero-vel {
    right: 4%;
    width: 50%;
    transform: rotateY(-8deg) rotateZ(2deg) translateZ(30px);
  }

  html.vp-anim-armed .vp-bv-hero-scene.vp-anim-in .vp-bv-hero-vel {
    animation-name: vp-bv-vel-mobiel-in;
  }

  .vp-bv-hero-apart {
    transform: rotateZ(6deg) translateZ(34px);
  }

  html.vp-anim-armed .vp-bv-hero-scene.vp-anim-in .vp-bv-hero-apart {
    animation-name: vp-bv-apart-mobiel-in;
  }

  .vp-bv-hero-spoor { left: 34%; width: 11%; }
  .vp-bv-plank { left: 9%; right: 10%; }

  .vp-bv-flow-board { margin-inline: -2px; }

  .vp-bv-choice-list li {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .vp-bv-faq article { padding-block: 24px 27px; }}

@keyframes vp-bv-vel-mobiel-in {
  from { opacity: 0; transform: rotateY(-8deg) rotateZ(2deg) translateZ(30px) translateX(30px); }
  to { opacity: 1; transform: rotateY(-8deg) rotateZ(2deg) translateZ(30px); }
}

@keyframes vp-bv-apart-mobiel-in {
  from { opacity: 0; transform: rotateZ(6deg) translateZ(34px) translateY(26px); }
  to { opacity: 1; transform: rotateZ(6deg) translateZ(34px); }
}

@media (max-width: 340px) {
  .vp-btw-page .vp-pilo-chat__prompt {
    display: none;
  }

  .vp-btw-page .vp-pilo-chat__launcher-wrap {
    width: 76px;
  }

  .vp-btw-page .vp-bv-hero .button-div > .app-button {
    width: calc(100% - 88px);
    margin-right: auto;
  }}

@media (prefers-reduced-motion: reduce) {
  .vp-btw-page *,
  .vp-btw-page *::before,
  .vp-btw-page *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .vp-btw-page [data-vp-anim] {
    opacity: 1 !important;
    transform: none !important;
  }}