/* ===== LANDING PAGE STYLES ===== */

/* ── Kopschaal van de leadpages ──
   Desktop 80 / 60 / 20, mobiel 55 / 45 / 20. De clamp schaalt daartussen mee:
   de bovengrens wordt rond 1430px gehaald, de ondergrens onder ~980px. */
.lp-hero h1 { font-size: clamp(55px, 5.6vw, 80px); }
.problem h2,
.lp-steps h2,
.lp-scenario h2,
.lp-benefits h2,
.lp-pricing h2,
.lp-faq h2,
.signup h2 { font-size: clamp(45px, 4.2vw, 60px); }
/* Vangnet voor lange samenstellingen: op 390px past een Duits woord als
   'Wasserschaden' niet in één regel van 45px en duwde het de hele pagina
   opzij. Breekt alleen af als een woord écht niet past — bij de Nederlandse
   en Engelse koppen gebeurt er niets. */
.lp-hero h1, .problem h2, .lp-steps h2, .lp-pricing h2, .lp-faq h2, .signup h2,
.lp-pad-slot-titel { overflow-wrap: break-word; }
.lp-pad-tekst h3,
.lp-zonder-grid .step h3,
.lp-step h3,
.lp-benefit h3 { font-size: 20px; }
/* De compacte oranje cta-balk houdt een eigen maat; 60px past daar niet in.
   (Die balk staat nog op de elektricien- en installateurpagina.) */
.lp-cta-bar h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }

/* Hero override: single-column, no phone stack
   NOTE: .lp-hero is on the same div as .hero-grid, so use compound selector */
/* Geen eigen max-width: de hero gebruikt dezelfde 1240px-container als de rest
   van de pagina, zodat de h1 en de foto uitlijnen met de secties eronder. */
.hero-grid.lp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
/* De belofte-zin draagt de hero, dus die krijgt het zwaardere gewicht; de twee
   usp's eronder staan juist dunner zodat ze niet met de zin concurreren. */
.lp-hero .hero-sub {
  max-width: 540px;
  margin: 22px 0 0;
  font-family: var(--body);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
}
/* Vierkant in plaats van 4:3: op 4:3 bleef de foto lager dan de tekstkolom
   ernaast en viel hij weg. De min-height houdt hem ook op smallere schermen
   formaat. */
.lp-hero-img {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1/1;
  min-height: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,.14);
}
.lp-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* De schildersfoto is liggend en de compositie loopt van links (telefoon met
   de inkomende oproep) naar rechts (de schilder aan de muur). Een uitsnede uit
   het midden snijdt de telefoon aan. Selecteren op de bestandsnaam houdt het
   bij die ene foto — de andere vijf staan rechtop en hebben dit niet nodig. */
.lp-hero-img img[src$="Schilder-Qluzz-new.jpg"] { object-position: 22% center; }
/* Telefoon-stack in de hero: iets compacter dan in de oplossing-sectie */
.lp-hero .phones-stack { height: 520px; }
.lp-hero .phone-top { width: 224px; transform: translate(-64px, -70px) rotate(-6deg); }
.lp-hero .phone-bottom { width: 244px; transform: translate(54px, 70px) rotate(5deg); }

@media (max-width: 768px) {
  .hero-grid.lp-hero { grid-template-columns: 1fr; }
  /* De foto zakt in één kolom vanzelf onder de knop. Vierkant net als op
     desktop: de bronfoto staat rechtop (4:5) en een liggende uitsnede sneed
     de telefoon eraf — juist het punt van de foto. Hij staat onder de knop,
     dus de extra hoogte kost hier niets. */
  .lp-hero-img {
    margin-top: 32px;
    aspect-ratio: 1/1;
    min-height: 0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
  }
  .lp-hero .phones-stack { height: auto; padding: 8px 0 12px; }
  .lp-hero .phone-top { display: none; }
  .lp-hero .phones-stack .phone { position: relative; width: min(260px, 78vw); }
  .lp-hero .phone-bottom { transform: none; z-index: 1; }
}

/* Trust-badges binnen de hero (loodgieter): dezelfde vier punten als de losse
   .lp-trust-strook hieronder, maar direct onder de knop zodat de prijsbelofte
   in het eerste scherm meekomt. Zelfde tekstgrootte als de .hero-sub erboven,
   zodat de prijs en de opzegtermijn meelezen als onderdeel van de belofte in
   plaats van als kleine lettertjes. */
.lp-hero-trust {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px 32px;
  margin-top: 22px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--text);
  font-weight: 400;
}
/* Zelfde maatvoering als .signup-row: 15px tekst, 30px vinkje, 14px ertussen. */
.lp-hero-trust span { display: flex; align-items: center; gap: 14px; }
/* Zelfde vinkje als in het aanmeldblok (.signup-ico in style.css). */
.lp-hero-trust .check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(241, 90, 34, .15);
  color: var(--orange);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}

/* Trust strip */
.lp-trust {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.lp-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  justify-content: center;
  font-size: .88rem;
  color: var(--muted);
  font-weight: 500;
}
.lp-trust-row span { display: flex; align-items: center; gap: 6px; }
.lp-trust-row .check { color: var(--orange); font-weight: 700; font-size: 1rem; }

/* ── "Zonder Qluzz" (loodgieterpagina) ──
   Vervangt het paragraaf-plus-lijstje: vier gelijke blokken die je in één blik
   afscant, met de kosten van een gemiste oproep als focus. */

.lp-probleem-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--orange);
  margin: 0 0 14px;
}
.lp-probleem h2 { max-width: 20ch; }
/* Zelfde maat als de belofte-zin in de hero. Selector met twee klassen, anders
   wint `.problem p` uit style.css (clamp tot 19px) op specificiteit. */
.lp-probleem .lp-probleem-lead {
  color: rgba(255,255,255,.72);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.6;
  max-width: 54ch;
  margin: 16px 0 0;
}
/* De kaarten volgen .step / .steps-grid uit style.css (de vier stappen op de
   homepage): donkere kaart, groot vervaagd cijfer in de hoek. Hier alleen de
   afwijkingen — geen oranje uitgelicht blok, want alle vier zijn een nadeel. */
.lp-zonder-grid { margin-top: 48px; }
.lp-zonder-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(248,113,113,.16);
  color: #f87171;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
/* Ruimte voor twee regels reserveren, ook als een kop er maar één nodig heeft.
   Anders begint de tekst in elk blok op een andere hoogte. */
.lp-zonder-grid .step h3 { min-height: calc(2 * 1.05 * 20px); text-wrap: balance; }
/* Tussen deze breedtes staan de vier kaarten nog naast elkaar maar zijn ze zo
   smal dat de koppen drie regels nodig hebben. */
@media (min-width: 901px) and (max-width: 1200px) {
  .lp-zonder-grid .step h3 { min-height: calc(3 * 1.05 * 20px); }
}

/* Problem card — landing page variant (ul list inside dark card) */
.problem-card-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.4);
  margin: 4px 8px 10px;
}
.problem-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
}
.problem-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 12px;
  border-top: 1px solid var(--line-dark);
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.45;
}
.problem-list li:first-child { border-top: none; }
.problem-list li::before {
  content: '✕';
  color: #f87171;
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* How it works — landing variant */
.lp-steps { background: #fff; }
/* Twee kleuren op de pagina in plaats van drie: wit naast cream leest als een
   naad, niet als een bedoelde wissel. Alleen de loodgieterpagina (.lp-pad). */
.lp-steps:has(.lp-pad) { background: var(--cream); }
/* Alleen waar het slotblok staat (loodgieter) valt de onderpadding weg; de
   andere leadpages houden hun normale afsluiting. */
.lp-steps:has(.lp-pad-slot) { padding-bottom: 0; }
.lp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
}
.lp-step { display: flex; flex-direction: column; gap: 12px; }
.lp-step-nr {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lp-step h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.lp-step p  { font-size: .9rem; color: var(--muted); margin: 0; line-height: 1.55; }

/* Kop en introzin gecentreerd: het pad eronder is smal, links uitlijnen liet
   een groot gat aan de rechterkant achter. */
.lp-steps > .wrap > h2 { text-align: center; max-width: 28ch; margin: 0 auto; }
.lp-steps-sub {
  margin: 22px auto 0;
  font-family: var(--body);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  max-width: 58ch;
  text-align: center;
}

/* ── Het pad (loodgieterpagina) ──
   In plaats van drie losse kolommen met het dashboard er los onder: één
   verticale route van gemiste oproep naar ingevulde aanvraag, waarbij het
   dashboard de laatste halte is. De lijn tussen de bolletjes maakt zichtbaar
   dat het één doorlopend traject is. */
.lp-pad {
  list-style: none;
  padding: 0;
  margin: 48px auto 0;
  max-width: 720px;
}
.lp-pad-stap {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0 22px;
  padding-bottom: 40px;
}
/* De verbindingslijn loopt vanaf het midden van het bolletje naar de volgende
   halte — en na de laatste halte gewoon door, tot in het slotblok.
   ::before is de grijze rails, ::after de oranje vulling die meeloopt met het
   scrollen (klasse .bereikt via js/script.js). */
.lp-pad-stap::before,
.lp-pad-stap::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 46px;
  bottom: 0;
  width: 2px;
}
.lp-pad-stap::before { background: var(--border); }
.lp-pad-stap::after {
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.lp-pad-stap.bereikt::after { transform: scaleY(1); }
.lp-pad-nr {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background .4s, color .4s;
}
.lp-pad-stap.bereikt .lp-pad-nr { background: var(--orange); color: #fff; }

/* Zonder JS of met bewegingsvoorkeur uit: alles meteen in de eindstand. */
.geen-js .lp-pad-stap::after,
.geen-js .lp-draad::after,
.lp-pad-stap.bereikt::after { transform: scaleY(1); }
.geen-js .lp-draad::before { background: var(--orange); }
@media (prefers-reduced-motion: reduce) {
  .lp-pad-stap::after,
  .lp-draad::after { transform: scaleY(1); transition: none; }
  .lp-pad-nr { background: var(--orange); color: #fff; }
  .lp-draad::before { background: var(--orange); }
}
/* min-width:0 is nodig: zonder dat krijgt deze grid-kolom de min-content-breedte
   van het dashboard-venster mee en scrollt de hele pagina op mobiel horizontaal. */
.lp-pad-tekst { padding-top: 12px; min-width: 0; }
/* Kop en tekst allebei 15px Manrope; font-family expliciet, want de h3 pakt
   anders de display-font uit style.css. */
/* Zelfde stijl als de koppen in de zonder-blokken (.step h3): display-font,
   zwaar, strakke regelafstand. Alleen de kleur verschilt — witte achtergrond. */
.lp-pad-tekst h3 {
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--dark);
}
.lp-pad-tekst p {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
  max-width: 60ch;
}

/* Laatste halte: het dashboard zelf. Bewust géén afwijkende kopgrootte of
   zwaarder bolletje — alle vier de haltes zijn typografisch gelijk, anders
   valt het pad uit elkaar.
   De onderruimte is hier padding in plaats van marge op het slotblok, zodat de
   lijn er doorheen loopt en het blok raakt. */
.lp-pad-eind { padding-bottom: 100px; }

/* ── Telefoon bij halte 2 en 4 ──
   Markup is letterlijk overgenomen uit how-it-works.html, inclusief de
   qla-klassenamen; die pagina heeft z'n stijlen inline staan, dus wat de
   visual hier nodig heeft staat hieronder. Het toestel is 390x800 en wordt
   met --qs geschaald. */
.lp-fon {
  --qs: .72;
  position: relative;
  width: calc(390px * var(--qs));
  height: calc(800px * var(--qs));
  margin-top: 22px;
}
.lp-fon-schaal { position: absolute; top: 0; left: 0; transform: scale(var(--qs)); transform-origin: top left; }
.lp-fon .qla-motion { position: relative; }
.lp-fon .qla-screen { position: absolute; inset: 0; display: none; z-index: 10; }
.lp-fon .qla-screen.active { display: block; }
/* Animaties pas laten lopen als de telefoon in beeld komt (klasse via
   js/script.js); anders zijn ze al afgespeeld voor je er bent. */
.lp-fon:not(.speelt) *, .lp-fon:not(.speelt) *::before, .lp-fon:not(.speelt) *::after {
  animation-play-state: paused !important;
}

@keyframes qla-screenIn { from { opacity: 0; transform: scale(1.02) } to { opacity: 1; transform: none } }
@keyframes qla-fadeUp   { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes qla-cardPop  { from { opacity: 0; transform: translateY(26px) scale(.95) } to { opacity: 1; transform: none } }
@keyframes qla-slideDown{ from { opacity: 0; transform: translateY(-80px) scale(.94) } to { opacity: 1; transform: none } }
@keyframes qla-pingChip { 0% { box-shadow: 0 0 0 0 rgba(241,90,34,.5) } 70% { box-shadow: 0 0 0 10px rgba(241,90,34,0) } 100% { box-shadow: 0 0 0 0 rgba(241,90,34,0) } }
@keyframes qla-tapChipAppear { 0%,40% { opacity: 0; transform: translateY(8px) } 50%,80% { opacity: 1; transform: translateY(0) } 92%,100% { opacity: 0; transform: translateY(-8px) } }
@keyframes qla-tapRipple { 0%,54% { opacity: 0; transform: scale(.3) } 62% { opacity: .9; transform: scale(1) } 78% { opacity: 0; transform: scale(2.6) } 100% { opacity: 0; transform: scale(2.6) } }
@keyframes qla-tapLinkGlow { 0%,54% { background: transparent; box-shadow: none } 62% { background: rgba(255,255,255,.4); box-shadow: 0 0 0 8px rgba(255,255,255,.22) } 72% { background: rgba(255,255,255,.15); box-shadow: 0 0 0 2px rgba(255,255,255,.08) } 100% { background: transparent; box-shadow: none } }

/* Slot van het pad: zelfde boodschap als de losse oranje balk die hier eerst
   stond, maar nu als afsluiting binnen de sectie zodat het pad en de conclusie
   in elkaar overlopen. Uitgelijnd met de tekstkolom van de haltes. */
/* Het blok sluit de uitleg af en leidt naar de prijzen. Sectie en prijsblok
   hebben dezelfde achtergrond, dus er is geen grens meer om te overbruggen:
   de onderpadding van .lp-steps valt weg en .lp-pricing zet de ruimte eronder
   (zie daar), zodat het blok boven en onder evenveel lucht heeft.
   De ruimte erboven zit in .lp-pad-eind, want daar loopt de lijn doorheen. */
.lp-pad-slot {
  position: relative;
  z-index: 2;
  margin: 0;
  background: var(--dark);
  border-radius: 20px;
  padding: 44px 44px 46px;
  color: #fff;
  text-align: center;
  box-shadow: 0 24px 60px rgba(26,26,26,.22);
}
.lp-pad-slot-titel {
  /* Font-size komt uit style.css: dezelfde 68px als de andere sectiekoppen. */
  color: #fff;
  margin: 0 auto 14px;
  /* Breed genoeg voor twee regels; op 22ch werden het er drie. */
  max-width: 1100px;
  text-wrap: balance;
}
.lp-pad-slot-body {
  font-family: var(--body);
  font-size: 19px;
  color: rgba(255,255,255,.7);
  line-height: 1.55;
  margin: 0 auto 28px;
  /* Geen begrenzing op de breedte, wel balanceren: de zin loopt over twee
     regels en zonder dit blijft er één woord op de tweede achter. */
  max-width: none;
  text-wrap: balance;
}
.lp-pad-slot .btn { background: var(--orange); color: #fff; font-weight: 700; }
.lp-pad-slot .btn:hover { background: var(--orange-dark); }

/* ── De draad loopt door tot de prijs ──
   Het pad houdt niet op bij halte 4: de lijn loopt door tot ín het donkere
   blok en komt er onderaan weer uit, op weg naar de prijs. Het blok is dekkend
   en over de volle breedte, dus dat de lijn er links in gaat en in het midden
   uit komt zie je niet — hij verdwijnt erachter en komt eruit. Zo blijft het
   één doorlopende route in plaats van twee losse secties.
   Vulling werkt hetzelfde als bij de haltes: .bereikt via js/script.js. */
.lp-draad {
  position: relative;
  width: 2px;
  height: 88px;
  margin: 0 auto;
  background: var(--border);
}
.lp-draad::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.lp-draad.bereikt::after { transform: scaleY(1); }
/* Eindpunt, in dezelfde taal als de bolletjes van het pad: hier land je. */
.lp-draad::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--border);
  transition: background .4s;
}
.lp-draad.bereikt::before { background: var(--orange); }

/* Mid-page CTA bar */
.lp-cta-bar {
  background: var(--orange);
  padding: 56px 0;
  text-align: center;
}
.lp-cta-bar h2 { color: #fff; margin: 0 0 8px; }
.lp-cta-bar p { color: rgba(255,255,255,.88); margin: 0 0 28px; font-size: 1rem; }
.lp-cta-bar .btn { background: #fff; color: var(--orange); font-weight: 700; }
.lp-cta-bar .btn:hover { background: var(--cream); }

/* SMS scenario */
.lp-scenario { background: var(--cream); padding: 80px 0; }
.lp-scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.lp-scenario-tekst h2 { margin-bottom: 16px; }
.lp-scenario-tekst p  { color: var(--muted); line-height: 1.6; }
.lp-sms-bubble {
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 4px 32px rgba(0,0,0,.09);
  max-width: 380px;
  width: 100%;
}
.lp-sms-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.lp-sms-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lp-sms-meta { display: flex; flex-direction: column; }
.lp-sms-from  { font-weight: 600; font-size: .85rem; }
.lp-sms-label { font-size: .75rem; color: var(--muted); }
.lp-sms-text  { font-size: .9rem; line-height: 1.6; color: var(--dark); }
.lp-sms-time  { font-size: .75rem; color: var(--muted); margin-top: 10px; text-align: right; }

/* Benefits */
.lp-benefits { padding: 80px 0; background: #fff; }
.lp-benefit h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.lp-benefit p  { font-size: .87rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* Prijsblok op de leadpage. De bovenruimte sluit aan op de andere inhoudssecties. */
.lp-pricing {
  background: var(--cream);
  padding: 80px 0 130px;
}
.lp-pricing .pricing-head h2 { max-width: 22ch; margin: 0 auto; }
.lp-pricing .pricing-head .lead { font-size: 19px; }
/* De prijskaarten zelf (.lp-prijzen, .lp-prijs*) staan in style.css: ze worden
   ook op de homepage en de prijzenpagina gebruikt, en die laden landing.css
   niet. Hier blijft alleen de sectie-styling van de leadpage staan. */

/* Vaste CTA-balk op mobiel: verschijnt zodra de hero uit beeld is en verdwijnt
   weer bij het aanmeldformulier (zie js/script.js). Op desktop nooit zichtbaar. */
.lp-sticky-cta { display: none; }

/* FAQ block on landing pages */
.lp-faq { background: var(--cream); }
.lp-faq h2 { margin-bottom: 12px; text-align: center; }
.lp-faq .faq-intro { text-align: center; margin-bottom: 40px; }

/* ── Affiliate-pagina ──
   De pagina gebruikt verder dezelfde lp-onderdelen als de branchepagina's;
   dit zijn de drie afwijkingen die daar niet in zitten. */

/* Het aanmeldformulier staat in de hero in plaats van in het donkere
   aanmeldblok. De schaduw van .form-card is voor die donkere achtergrond
   gemaakt en is te zwaar op cream; deze is gelijk aan die van .lp-hero-img,
   zodat de kaart net zo op de hero ligt als de foto op de andere pagina's. */
.aff-form-card { box-shadow: 0 24px 64px rgba(0,0,0,.14); }
.aff-form-kop {
  font-family: var(--display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--dark);
  margin: 0 0 4px;
}
.aff-form-sub {
  font-family: var(--body);
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
}

/* Particulier/zakelijk. Hergebruikt .dash-tabs uit style.css, maar dat is
   inline-flex voor de dashboardmockup; hier moeten de twee knoppen samen de
   kaartbreedte vullen. */
.aff-type-switch { display: flex; width: 100%; margin-bottom: 16px; }
.aff-type-switch .dash-tab { flex: 1; text-align: center; cursor: pointer; border: 0; font: inherit; font-weight: 700; font-size: 14px; }

/* Het zakelijke blok is een tweede .form-grid, dus zonder deze marge zouden
   de bedrijfsvelden tegen het IBAN-veld aan plakken. [hidden] wint hier van
   de display:grid van .form-grid. */
.aff-zakelijk { margin-top: 16px; }
.aff-zakelijk[hidden] { display: none; }

/* De btw-, KOR- en factuurteksten gaan over Nederlandse regels, dus die
   horen alleen op /nl. Alle talen komen uit dezelfde root-HTML, dus het staat
   overal in de opmaak en wordt hier verborgen. Bewust alléén verbergen en niet
   ook display zetten voor NL: dan houdt een .field zijn eigen flex-kolom. */
html:not([lang="nl"]) .aff-nl { display: none; }

/* De KOR-vraag is een ja/nee-keuze in dezelfde vorm als de particulier/
   zakelijk-switch, zodat het formulier één interactiepatroon houdt. */
.aff-kor-switch { display: flex; width: 100%; margin-top: 2px; }
.aff-kor-switch .dash-tab { flex: 1; text-align: center; cursor: pointer; border: 0; font: inherit; font-weight: 700; font-size: 14px; }

/* Akkoordverklaringen. Bewust kleine tekst naast een normale checkbox: het is
   een juridische bevestiging, geen instelling die om nadruk vraagt. */
.aff-akkoord {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #555;
  cursor: pointer;
}
.aff-akkoord input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--orange);
  cursor: pointer;
}
.aff-akkoord[hidden] { display: none; }

/* Optionele promotievragen achter een uitklapper: uitgeklapt zou de kaart in
   de hero onwerkbaar lang worden. */
.aff-optioneel { margin-top: 18px; border-top: 1px solid #e5e0d8; padding-top: 14px; }
.aff-optioneel summary {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  list-style: none;
}
.aff-optioneel summary::-webkit-details-marker { display: none; }
.aff-optioneel summary::after { content: ' +'; color: var(--orange); }
.aff-optioneel[open] summary::after { content: ' –'; }
.aff-optioneel .form-grid { margin-top: 14px; }

/* Kleine voetnoot onder het rekenvoorbeeld, op de donkere sectie. */
.aff-btw-noot {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

/* Rekenvoorbeeld: dezelfde donkere kaarten als .steps-grid, maar met drie
   kolommen in plaats van vier en een bedrag boven de kop. De min-height van
   .step is er voor het grote vervaagde cijfer op de homepage; deze kaarten
   hebben dat niet en zouden er alleen een gat aan overhouden. */
.aff-reken-grid { grid-template-columns: repeat(3, 1fr); margin-top: 48px; }
.aff-reken-grid .step { min-height: 0; }
.aff-bedrag {
  font-family: var(--display);
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--orange);
}

/* Drie voordelen als tekstblokjes naast elkaar. align-items:start houdt de
   koppen op één lijn ook als de teksten verschillend lang zijn. */
.aff-ontvangst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
  align-items: start;
}

/* Responsive — tablet */
@media (max-width: 900px) {
  .lp-scenario-grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-sms-bubble    { max-width: 100%; }
}

/* Vaste CTA-balk — alleen op mobiel */
@media (max-width: 768px) {
  .lp-sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150;
    background: var(--orange);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1rem;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0,0,0,.14);
    transform: translateY(100%);
    transition: transform .25s ease;
  }
  .lp-sticky-cta.zichtbaar { transform: translateY(0); }
  /* Ruimte onder de footer zodat de balk hem niet afdekt. Die ruimte hoort in
     de footer zelf te zitten en niet in de body, anders zie je onder het
     donkere blok een streepje in de body-kleur. */
  body:has(.lp-sticky-cta) footer { padding-bottom: 108px; }
  /* Cookiebanner (linksonder, z-index 9000) boven de balk houden. */
  body:has(.lp-sticky-cta) .ck-banner { bottom: 84px; }
}

/* Responsive — mobile */
@media (max-width: 640px) {
  .lp-steps-grid    { grid-template-columns: 1fr; gap: 28px; }
  .lp-cta-bar       { padding: 40px 0; }
  .lp-trust-row     { gap: 8px 20px; font-size: .82rem; }
  .lp-scenario      { padding: 56px 0; }
  .lp-benefits      { padding: 56px 0; }
  .lp-steps:has(.lp-pad-slot) { padding-bottom: 0; }
  .lp-zonder-grid   { margin-top: 32px; }
  /* Eén kolom: de kaarten staan onder elkaar, dus er valt niets uit te lijnen.
     De gereserveerde twee regels lieten hier alleen een gat achter onder de
     koppen die op één regel passen. Ook de kaarten mogen meekrimpen. */
  .lp-zonder-grid .step h3 { min-height: 0; }
  .lp-zonder-grid .step    { min-height: 0; padding: 24px 22px 26px; }
  .lp-pad           { margin-top: 32px; }
  .lp-pad-stap      { grid-template-columns: 38px 1fr; gap: 0 16px; padding-bottom: 32px; }
  /* Rails én vulling verschuiven mee met het kleinere bolletje; alleen de
     ::before verplaatsen gaf twee lijnen naast elkaar. */
  .lp-pad-stap::before,
  .lp-pad-stap::after { left: 18px; top: 38px; }
  .lp-pad-nr        { width: 38px; height: 38px; font-size: .95rem; }
  .lp-pad-tekst     { padding-top: 6px; }
  /* Kleiner toestel: bij .72 past hij niet meer in de smallere tekstkolom. */
  .lp-fon           { --qs: .58; }
  /* Kop en introzin links op smalle schermen: gecentreerde tekst over meerdere
     regels leest daar rommelig. */
  .lp-steps > .wrap > h2 { text-align: left; max-width: none; margin: 0; }
  .lp-steps-sub          { text-align: left; margin-left: 0; }
  /* Kleinere overlap op mobiel: het blok is hier relatief hoog. */
  /* Links uitlijnen zoals de sectiekop: op 36px wordt een gecentreerde kop in
     een gepadde kaart anders zes korte regels. */
  .lp-pad-slot       { margin: 0; padding: 30px 24px 32px; border-radius: 16px; text-align: left; }
  /* De kop erft de 45px van .lp-steps h2. Deze zin is lang en staat in een
     gepadde kaart, dus daar werden het vijf regels van bijna een halve
     schermhoogte. Een eigen maat: kleiner dan de sectiekop erboven, want dit
     is een kaarttitel, geen nieuwe sectie. Twee klassen in de selector, anders
     wint .lp-steps h2 (klasse + element) alsnog van deze regel. */
  .lp-pad-slot .lp-pad-slot-titel { font-size: clamp(28px, 8vw, 32px); }
  .lp-pad-slot-titel { max-width: none; margin-left: 0; }
  .lp-pad-slot-body  { font-size: 17px; max-width: none; margin-left: 0; }
  /* Kortere aanloop naar en van het blok; de lijn erdoorheen blijft hetzelfde. */
  .lp-pad-eind      { padding-bottom: 56px; }
  .lp-draad         { height: 56px; }
  .lp-pricing       { padding-top: 56px; }
  /* Onder deze breedte passen twee badges niet meer naast elkaar. */
  .lp-hero-trust    { grid-template-columns: 1fr; gap: 10px; }
  /* De drie rekenkaarten onder elkaar; .steps-grid staat op deze breedte al op
     één kolom, maar de affiliate-grid overschrijft dat hierboven. */
  .aff-reken-grid     { grid-template-columns: 1fr; margin-top: 32px; }
  .aff-ontvangst-grid { grid-template-columns: 1fr; gap: 28px; }
  .aff-bedrag         { font-size: 44px; }
}

/* ============================================================
   HOME 2.0 — secties die alleen op de homepage staan
   Volgorde: voorbeeld-sms, overzichtskaarten, kanalen, providers.
   ============================================================ */

/* ---------- Voorbeeld-sms ---------- */
/* Sluit direct aan op de hero: die heeft al onderpadding, dus hier geen
   bovenpadding. Zelfde cream, zodat de kaart erin lijkt te zweven. */
.home-proef { background: var(--cream); }
.proef-kaart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: clamp(28px, 3.4vw, 46px);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 70px -30px rgba(27, 23, 18, .28);
}
/* Alleen de maat afwijken: gewicht, letterspatiëring en regelhoogte komen
   uit de gedeelde kopstijl in style.css. */
.proef-tekst h2 { font-size: clamp(28px, 2.6vw, 36px); }
.proef-tekst p { margin-top: 12px; color: var(--muted); font-size: 1rem; line-height: 1.6; }

.proef-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.proef-veld { display: flex; flex-direction: column; gap: 7px; }
.proef-veld label { font-size: .82rem; font-weight: 700; color: var(--text); }
.proef-veld input {
  width: 100%;
  padding: 15px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  font: 500 1rem var(--body);
  color: var(--text);
}
.proef-veld input:focus-visible { outline: none; border-color: var(--orange); }
/* Standaardmaat uit style.css; alleen het uitgeschakelde uiterlijk is hier nieuw. */
.proef-form .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Honeypot: buiten beeld, maar niet display:none — sommige bots slaan
   verborgen velden over en vullen alleen wat "zichtbaar" is. */
.proef-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.proef-status {
  grid-column: 1 / -1;
  min-height: 1.2em;
  font-size: .85rem;
  font-weight: 600;
  color: var(--red);
}
.proef-status--ok { color: var(--green); }

/* ---------- Overzichtskaarten ---------- */
/* Geen max-width: de harde regeleindes in de tekst bepalen de vorm. */
.home-rust > .wrap > h2 { max-width: none; }
.rust-sub {
  margin-top: 20px;
  max-width: 46ch;
  color: rgba(255, 255, 255, .72);
  font-size: 1.05rem;
  line-height: 1.65;
}
.rust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 52px;
}
.rust-kaart {
  padding: 26px 26px 28px;
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
}
.rust-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(241, 90, 34, .16);
  color: var(--orange);
}
.rust-ico svg { width: 19px; height: 19px; }
.rust-kaart h3 {
  margin-top: 20px;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.rust-kaart p { margin-top: 9px; color: rgba(255, 255, 255, .66); font-size: .95rem; line-height: 1.6; }

/* ---------- Kanalen ---------- */
/* Wit tussen twee cream-secties: dit blok gaat over iets anders dan de
   gemiste oproep, en die wissel mag je zien. */
.home-kanalen { background: #fff; }
.home-kanalen h2 { margin-top: 14px; max-width: none; }
.kanalen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
}
.kanaal {
  padding: 26px;
  border-radius: 18px;
  background: var(--dark);
  color: #fff;
}
.kanaal h3 {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.kanaal p {
  margin-top: 14px;
  color: rgba(255, 255, 255, .66);
  font-size: .95rem;
  font-style: italic;
  line-height: 1.6;
}
.home-kanalen > .wrap > .btn { display: inline-flex; margin-top: 36px; }

/* ---------- Eigen nummer + providers ---------- */
.home-provider { background: var(--cream); }
.provider-grid {
  display: grid;
  /* Tekstkolom iets ruimer dan de logo's, zoals in het ontwerp: anders valt
     de laatste kopregel uiteen. minmax(0,…) omdat een fr-kolom anders niet
     onder zijn eigen inhoud krimpt en de pagina op 320px opzij duwt. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
/* De kop breekt op zijn eigen <br>'s; balanceren zou die indeling weer
   overrulen en losse woorden naar beneden duwen. */
.provider-tekst h2 { text-wrap: wrap; }
.provider-tekst h2 { margin-top: 14px; max-width: none; }
.provider-tekst p { margin-top: 22px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.provider-tekst p strong { color: var(--text); }
.provider-tekst .btn { display: inline-flex; margin-top: 28px; }
.provider-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
}
.provider-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: 26px;
  background: #fff;
  border-radius: 18px;
}
/* Alle logo's even zwaar laten wegen ondanks verschillende beeldverhoudingen. */
.provider-logos img { max-height: 46px; width: auto; object-fit: contain; }

/* ---------- Taalvlag in de nav ---------- */
.taalwissel--nav .taalcompact summary {
  border: 1.5px solid rgba(0, 0, 0, .12);
  border-radius: 9px;
  padding: 6px 8px;
}
.taalwissel--nav .taalcompact summary:hover { border-color: var(--orange); }

@media (max-width: 900px) {
  .rust-grid, .kanalen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-grid { grid-template-columns: 1fr; gap: 40px; }
  .provider-tekst h2 { max-width: none; }
  .provider-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .provider-logos li { min-height: 96px; padding: 18px; }
}

@media (max-width: 768px) {
  .proef-kaart { grid-template-columns: 1fr; gap: 26px; }
  .home-rust > .wrap > h2 { max-width: none; }
}

@media (max-width: 640px) {
  .proef-form { grid-template-columns: 1fr; align-items: stretch; }
  .proef-form .btn { width: 100%; }
  .rust-grid, .kanalen-grid { grid-template-columns: 1fr; }
  .provider-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-kanalen > .wrap > .btn, .provider-tekst .btn { width: 100%; text-align: center; }
}

/* Onder ~360px passen de langste labels niet meer op één regel. Alleen daar
   mag de tekst afbreken; overal elders blijven knoppen bewust op één regel. */
@media (max-width: 360px) {
  .hero .float-pill {
    white-space: normal;
    border-radius: 18px;
    line-height: 1.4;
  }
  .lp-pad-slot .btn,
  .home-kanalen .btn,
  .provider-tekst .btn,
  .proef-form .btn { white-space: normal; }
}

/* Harde regeleindes in de koppen volgen het ontwerp op desktop. Op mobiel
   zouden ze losse woorden op een eigen regel duwen, dus daar zetten we ze uit
   en laat de tekst gewoon natuurlijk afbreken. */
@media (max-width: 640px) {
  /* display:none haalt ook de woordafstand weg ('door.Jij'); het regeleinde
     vervangen door een spatie houdt de woorden uit elkaar. */
  .hero h1 br,
  .home-rust h2 br,
  .home-kanalen h2 br,
  .provider-tekst h2 br,
  .signup h2 br { content: ""; }
  .hero h1 br::after,
  .home-rust h2 br::after,
  .home-kanalen h2 br::after,
  .provider-tekst h2 br::after,
  .signup h2 br::after { content: " "; }
}

/* ---------- Sectieruimte en knoppen: gelijktrekken ---------- */
/* Elke sectie op de homepage begint en eindigt met dezelfde ruimte. Zonder
   deze regel houdt .lp-steps zijn onderpadding van 0 (bedoeld voor de draad
   op de leadpages, die hier niet staat). */
.lp-steps#hoe { padding: clamp(72px, 10vw, 130px) 0; }
/* Sluit strak op de hero aan: die levert de ruimte erboven al. */
.home-proef { padding-top: 0; }
/* De hero sluit met dezelfde maat af als de rest. */
.hero { padding-bottom: clamp(72px, 10vw, 130px); }

/* Alle knoppen in de nieuwe secties krijgen de maat en het lettertype van
   'Start gratis' uit de prijstabel (.lp-prijs-btn): 50px hoog, radius 12px,
   0.95rem in het display-lettertype. */
.home-cta .btn,
.home-cta .btn-lijn,
.proef-form .btn,
.home-kanalen > .wrap > .btn,
.provider-tekst .btn,
.lp-pad-slot .btn {
  height: 50px;
  padding: 0 26px;
  border-radius: 12px;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: normal;
}

.cream.pricing { padding-bottom: clamp(36px, 5vw, 65px); }
.home-provider { padding-top: clamp(36px, 5vw, 65px); }