/* =====================================================================
   ZekerMobiel — home-v2.css
   Nieuwe homepage-secties (combi-indeling, operator-goedgekeurd).
   Geladen NA styles.css en ALLEEN op index.html.
   Alles is gescoped onder .home-v2 (op <main>) zodat de bestaande live
   header/topbar/footer en alle andere pagina's onaangetast blijven.
   Hergebruikte live-secties (usp-band, segment-grid, section--dark,
   stats-band, brandbar, info-card, faq-list, tp-invite) worden NIET
   opnieuw gestyled — die komen uit styles.css. Alleen echt nieuwe
   onderdelen (hero-drieluik, populaire grid-verfijning, keuzehulp,
   vergelijker, reviews-slider, vergoeding-kaarten) staan hier.
   ===================================================================== */

/* ---- lokale tokens (combi-palet; accentgroen == live #2C8C61) -------- */
.home-v2{
  --accent:#2c8c61;
  --cta:#1f6b4c;
  --cta-h:#17563c;
  --deep:#122a1f;
  --wash:#eaf4ef;
  --wash2:#d8ece0;
  --warm-bg:#f4f9f6;
  --placeholder:#f3ede4;
  --ink:#14181c;
  --body:#33413b;
  --muted:#54615a;
  --line:#e4ebe7;
  --line2:#d3ded7;
  --card:#ffffff;
  --radius:14px;
  --radius-lg:20px;
  --radius-sm:11px;
  --shadow:0 1px 2px rgba(18,42,31,.05),0 6px 18px rgba(18,42,31,.07);
  --shadow-h:0 3px 8px rgba(18,42,31,.08),0 16px 34px rgba(18,42,31,.14);
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
/* horizontale pagina-overflow uitsluiten (o.a. de vergelijker-tabel scrollt
   binnen .cmp-scroll; clip vangt eventueel uitlopende breedte op mobiel op).
   clip laat position:sticky intact (in tegenstelling tot hidden). */
.home-v2{overflow-x:clip}
.home-v2 .cmp-scroll{max-width:100%}

/* ---- sectie-koppen (kicker + h2 + "bekijk alle"-link) --------------- */
.home-v2 .sec-head{max-width:760px;margin-bottom:18px}
.home-v2 .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.home-v2 .sec-head.row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.home-v2 .kicker{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cta);margin-bottom:12px}
.home-v2 .sec-head h2{font-size:clamp(26px,3.2vw,38px);line-height:1.14;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.home-v2 .sec-head p{margin-top:12px;color:var(--muted);font-size:18px;line-height:1.55}
.home-v2 .seeall{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:16px;color:var(--cta);white-space:nowrap;text-decoration:none}
.home-v2 .seeall:hover{text-decoration:underline;text-underline-offset:3px}
.home-v2 .seeall svg{width:17px;height:17px}

/* card-knoppen net iets compacter dan de standaard site-knop
   (operator-smaak: "knoppen nét kleiner dan je denkt", op één baseline)
   fixronde 0307-nacht: nóg een tikje kleiner (40->38px), foto's juist groter */
.home-v2 .pcard .button--small,
.home-v2 .kh-pcard .button--small{min-height:38px;padding:0 14px;font-size:15px}

/* ============ HERO-DRIELUIK ============ */
.home-v2 .hero{padding:22px 0 6px}
.home-v2 .hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.home-v2 .hero-main{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--placeholder);min-height:420px;box-shadow:var(--shadow)}
.home-v2 .hero-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-v2 .hero-main .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,26,19,.84) 0%,rgba(10,26,19,.56) 42%,rgba(10,26,19,.12) 74%,rgba(10,26,19,0) 100%)}
.home-v2 .hero-copy{position:relative;max-width:510px;padding:24px 32px;color:#fff}
.home-v2 .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:13.5px;line-height:1.3;padding:7px 13px;border-radius:99px;margin-bottom:10px}
.home-v2 .hero-eyebrow svg{width:15px;height:15px;color:#8ce0b4}
.home-v2 .hero-copy h1{color:#fff;font-size:clamp(28px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.home-v2 .hero-copy p{font-size:18px;line-height:1.45;color:#eaf3ee;margin-bottom:12px;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.home-v2 .hero-btns{display:flex;flex-wrap:wrap;gap:12px}.home-v2 .hero-price{margin-bottom:8px}.home-v2 .hero-trust{margin-top:10px}.home-v2 .hero-btns .button{min-height:50px;padding:12px 22px;font-size:16.5px}
.home-v2 .hero-side{display:grid;grid-template-rows:1fr 1fr;gap:18px}
.home-v2 .flank{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:217px;background:var(--placeholder);box-shadow:var(--shadow);display:block;color:#fff;text-decoration:none}
.home-v2 .flank img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.home-v2 .flank:hover img{transform:scale(1.05)}
.home-v2 .flank .fscrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,26,19,.86) 0%,rgba(10,26,19,.32) 55%,rgba(10,26,19,.08) 100%)}
.home-v2 .flank .fcopy{position:absolute;left:0;right:0;bottom:0;padding:20px 22px}
.home-v2 .flank h3{font-size:21px;font-weight:800;margin-bottom:3px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.home-v2 .flank p{font-size:18px;color:#e6f1ea;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.home-v2 .flank .fgo{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:700;font-size:15px;color:#bff0d5}
.home-v2 .flank .fgo svg{width:16px;height:16px}
/* 18-07: hoofdfoto-compositie desktop — venster links zodat de rijder
   rechts van de tekstkolom vrijkomt (rijder staat links-van-midden in bron). */
@media (min-width:641px){
  .home-v2 .hero-main img{object-position:0% 50%}
}

/* ============ POPULAIRE GRID (verfijnd, 12) ============ */
.home-v2 .pop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.home-v2 .pcard{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.home-v2 .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:var(--line2)}
.home-v2 .pcard__media{position:relative;aspect-ratio:1/1;display:grid;place-items:center;background:var(--placeholder);overflow:hidden;text-decoration:none}
.home-v2 .pcard__media.loaded{background:#fff}
.home-v2 .pcard__media img{width:96%;height:96%;object-fit:contain;opacity:0;transition:opacity .25s}
.home-v2 .pcard__media.loaded img{opacity:1}
/* kleine voorraad-regel (fixronde 0307-nacht): één rustig signaal, geen badge-explosie */
.home-v2 .pstock{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--cta);margin-bottom:10px}
.home-v2 .pstock i{width:8px;height:8px;border-radius:50%;background:#2fa270;box-shadow:0 0 0 3px rgba(47,162,112,.15)}
.home-v2 .pbadge{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;padding:5px 11px;border-radius:99px;letter-spacing:.02em;box-shadow:0 2px 6px rgba(18,42,31,.2)}
.home-v2 .pbadge.proef{background:#fff;color:var(--cta);border:1.5px solid var(--wash2)}
.home-v2 .pcard__body{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
.home-v2 .pcard__merk{font-size:12.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.home-v2 .pcard__title{font-size:18px;font-weight:800;margin:3px 0 5px;line-height:1.25}
.home-v2 .pcard__title a{color:var(--ink);text-decoration:none}
.home-v2 .pcard__title a:hover{color:var(--cta)}
.home-v2 .pcard__tag{font-size:18px;color:var(--muted);margin-bottom:13px;flex:1;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.home-v2 .pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.home-v2 .pcard__price small{display:block;font-size:12.5px;color:var(--muted);line-height:1;font-weight:600}
.home-v2 .pcard__price b{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.01em}

/* ============ KEUZEHULP ============ */
.home-v2 .kh-card{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px clamp(16px,3.4vw,32px) 28px}
.home-v2 .kh-progress{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:16px}
.home-v2 .kh-dot{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.home-v2 .kh-dot.on{background:var(--cta);box-shadow:0 0 0 4px rgba(31,107,76,.16)}
.home-v2 .kh-q{font-size:clamp(21px,2.4vw,27px);text-align:center;margin-bottom:4px;color:var(--deep);font-weight:800;line-height:1.15}
.home-v2 .kh-hint{text-align:center;color:var(--muted);font-size:18px;margin-bottom:18px}
.home-v2 .kh-opts{display:flex;flex-direction:column;gap:10px}
.home-v2 .kh-opts.duo,.home-v2 .kh-opts.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.home-v2 .kh-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:#fff;border:2px solid var(--line2);border-radius:12px;padding:12px 15px;min-height:60px;cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s,transform .1s}
.home-v2 .kh-opt:hover{border-color:var(--accent);background:var(--wash);box-shadow:var(--shadow)}
.home-v2 .kh-opt:active{transform:translateY(1px)}
.home-v2 .kh-opt .ic{flex:0 0 42px;height:42px;border-radius:11px;background:var(--wash);display:grid;place-items:center;color:var(--cta)}
.home-v2 .kh-opt .ic svg{width:22px;height:22px}
.home-v2 .kh-opt .lbl{min-width:0}
.home-v2 .kh-opt .lbl b{display:block;font-size:18px;font-weight:800;line-height:1.2}
.home-v2 .kh-opt .lbl small{display:block;font-size:15px;font-weight:500;color:var(--muted);margin-top:2px}
.home-v2 .kh-opt .pijl{margin-left:auto;color:var(--accent);flex:0 0 auto}
.home-v2 .kh-back-row{margin-top:22px;display:flex;justify-content:center}
.home-v2 .kh-back{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;font-size:16px;font-weight:700;font-family:inherit;background:#fff;color:var(--cta);border:1.5px solid var(--cta);border-radius:var(--radius-sm);cursor:pointer}
.home-v2 .kh-back:hover{background:var(--wash)}
.home-v2 .kh-reskop{text-align:center;margin-bottom:6px}
.home-v2 .kh-reskop h3{font-size:clamp(22px,2.6vw,30px);color:var(--deep);font-weight:800}
.home-v2 .kh-reskop p{color:var(--muted);font-size:17px;margin-top:6px}
.home-v2 .kh-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0 4px}
.home-v2 .kh-pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .18s,border-color .18s}
.home-v2 .kh-pcard:hover{box-shadow:var(--shadow-h);border-color:var(--line2)}
.home-v2 .kh-pcard__media{aspect-ratio:4/3.2;display:grid;place-items:center;background:var(--placeholder);overflow:hidden}
.home-v2 .kh-pcard__media.loaded{background:#fff}
.home-v2 .kh-pcard__media img{width:94%;height:94%;object-fit:contain;opacity:0;transition:opacity .25s}
.home-v2 .kh-pcard__media.loaded img{opacity:1}
.home-v2 .kh-pcard__b{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.home-v2 .kh-pcard__merk{font-size:12.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.home-v2 .kh-pcard__nm{font-size:17px;font-weight:800;line-height:1.25;margin-top:3px;color:var(--ink)}
.home-v2 .kh-pcard__pr{font-size:20px;font-weight:800;color:var(--deep);margin:8px 0 12px}
.home-v2 .kh-pcard .button{margin-top:auto}

/* ============ VERGELIJKER ============ */
.home-v2 .cmp-legend{display:inline-flex;align-items:center;gap:9px;background:var(--wash);color:var(--cta);font-weight:600;font-size:15px;padding:9px 14px;border-radius:10px;margin-top:14px}
.home-v2 .cmp-legend svg{width:18px;height:18px;flex:0 0 auto}
.home-v2 .cmp-scroll{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow-x:auto;overflow-y:hidden;background:#fff;box-shadow:var(--shadow-h);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.cmp-hint{display:none;margin:10px 2px 0;text-align:center;font-size:14.5px;font-weight:600;color:var(--muted)}
.home-v2 .cmp-scroll::-webkit-scrollbar{height:9px}
.home-v2 .cmp-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.home-v2 .compare{display:grid;grid-template-columns:172px repeat(3,minmax(0,1fr));min-width:0}
.home-v2 .ccell{padding:15px 18px;border-bottom:1px solid var(--line);min-width:0}
.home-v2 .ccell.ccol{border-left:1px solid var(--line)}
.home-v2 .ccell.is-last{border-bottom:0}
.home-v2 .clabel{background:var(--wash);font-weight:700;color:var(--body);font-size:14.5px;display:flex;align-items:center;position:sticky;left:0;z-index:3}
.home-v2 .ccorner{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.home-v2 .ccorner-t{font-size:15px;font-weight:800;color:var(--ink)}
.home-v2 .ccorner-s{font-size:13px;font-weight:600;color:var(--muted)}
.home-v2 .chead{display:flex;flex-direction:column}
.home-v2 .chead .ctitle{font-size:17.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.home-v2 .chead .csub{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.35}
.home-v2 .cselect-wrap{position:relative;margin-top:14px}
.home-v2 .cselect{width:100%;height:46px;border:1.5px solid var(--line2);border-radius:11px;background:#fff;padding:0 40px 0 14px;font:600 14.5px/1 var(--ff);color:var(--ink);cursor:pointer;appearance:none;-webkit-appearance:none;transition:border-color .18s;text-overflow:ellipsis}
.home-v2 .cselect:hover{border-color:var(--accent)}
.home-v2 .cselect-ic{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none}
.home-v2 .cbox{aspect-ratio:4/3;background:var(--placeholder);border-radius:12px;display:grid;place-items:center;overflow:hidden}
.home-v2 .cbox.loaded{background:#fff}
.home-v2 .cbox img{width:94%;height:94%;object-fit:contain;opacity:0;transition:opacity .25s}
.home-v2 .cbox.loaded img{opacity:1}
.home-v2 .cname{margin-top:12px}
.home-v2 .cname b{display:block;font:700 12px/1 var(--ff);letter-spacing:.06em;text-transform:uppercase;color:var(--cta)}
.home-v2 .cname span{display:block;font-weight:700;font-size:16px;line-height:1.3;margin-top:4px;overflow-wrap:anywhere}
.home-v2 .cprijs{font-weight:800;font-size:22px;color:var(--ink)}
.home-v2 .cval{font-weight:600;font-size:17px;color:var(--ink)}
.home-v2 .cval.mut{font-weight:500;color:var(--muted)}
.home-v2 .cmp-flag{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font:700 12px/1 var(--ff);color:var(--cta);background:var(--wash);padding:6px 11px;border-radius:999px}
.home-v2 .cmp-flag svg{width:14px;height:14px}
.home-v2 .cpts{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.home-v2 .cpts li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.35;color:var(--body)}
.home-v2 .cpts svg{width:19px;height:19px;color:var(--accent);margin-top:1px;flex:0 0 auto}
/* fixronde 0307-nacht: vergelijker-knoppen op dezelfde schaal als de rest van
   de home (46px-lijn van selects/kh-back/rv-btn) — niet de zware 54px-basisknop */
.home-v2 .cbtn{width:100%;min-height:46px;padding:10px 18px;font-size:16px}
.home-v2 .col-flash{animation:hv2-colFlash .55s ease}
@keyframes hv2-colFlash{from{background:var(--wash2)}to{background:transparent}}

/* ============ REVIEWS-SLIDER ============ */
.home-v2 .rv-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.home-v2 .rv-brand{display:inline-flex;align-items:center;gap:12px}
.home-v2 .rv-brand img{height:26px;width:auto}
.home-v2 .rv-tpstars{display:inline-flex;gap:2px}
.home-v2 .rv-tpstar{width:22px;height:22px;background:#00b67a;display:inline-flex;align-items:center;justify-content:center;border-radius:3px}
.home-v2 .rv-tpstar svg{width:15px;height:15px;color:#fff;fill:#fff}
.home-v2 .rv-note{font-size:13.5px;color:var(--muted);font-style:italic}
.home-v2 .rv-nav{display:flex;gap:10px}
.home-v2 .rv-btn{width:46px;height:46px;border-radius:var(--radius-sm);border:1.5px solid var(--line2);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .18s,border-color .18s,opacity .18s}
.home-v2 .rv-btn:hover{border-color:var(--accent);background:var(--wash)}
.home-v2 .rv-btn:disabled{opacity:.4;cursor:default}
.home-v2 .rv-btn svg{width:20px;height:20px}
.home-v2 .rv-viewport{overflow:hidden;margin-top:12px}
.home-v2 .rv-track{display:flex;gap:20px;will-change:transform;transition:transform .6s cubic-bezier(.4,0,.2,1);touch-action:pan-y}
.home-v2 .rv-card{flex:0 0 calc((100% - 40px)/3);min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.home-v2 .rv-card__stars{display:inline-flex;gap:2px}
.home-v2 .rv-card__stars .rv-tpstar{width:20px;height:20px}
.home-v2 .rv-card__title{font-size:17px;font-weight:800;color:var(--ink)}
.home-v2 .rv-card__body{color:var(--body);font-size:15.5px;line-height:1.55;flex:1}
.home-v2 .rv-card__who{display:flex;align-items:center;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--line)}
.home-v2 .rv-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--placeholder);flex:0 0 auto}
.home-v2 .rv-card__name{font-weight:700;font-size:16px;color:var(--ink);line-height:1.2}
.home-v2 .rv-card__meta{font-size:14px;color:var(--muted)}
/* fixronde 0307-nacht: senioren-leesbaarheid (>=18px leestekst), uit-sterren,
   initialen-avatars (Trustpilot-stijl, eerlijk: geen stockgezichten), gemiddelde
   naast de sterren en een SECUNDAIRE invite-regel onder de slider */
.home-v2 .rv-card__title{font-size:18.5px}
.home-v2 .rv-card__body{font-size:18px;line-height:1.6}
.home-v2 .rv-tpstar.off{background:#d6dcd9}
.home-v2 .rv-avatar--init{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:19px}
.home-v2 .rv-avg{font-weight:700;font-size:16.5px;color:var(--ink);margin-left:2px}
.home-v2 .rv-invite-mini{margin-top:20px;text-align:center;font-size:16.5px;color:var(--muted)}
.home-v2 .rv-invite-mini a{color:var(--cta);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* .tp-invite heeft display:flex in styles.css — dat wint van [hidden]; hard afdwingen */
.home-v2 .tp-invite[hidden]{display:none!important}
/* segment-tegels op de home: 4:3-vak past beter bij de (vierkant/liggend
   gepinde) witte productfoto's -> product GROOT op één wit vlak */
.home-v2 .segment-card__media{aspect-ratio:4/3}
.home-v2 .segment-card__media.has-photo img{padding:6px}

/* ============ VERGOEDING & BETALEN (3 kaarten) ============ */
.home-v2 .vb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.home-v2 .vb-grid .info-card{display:flex;flex-direction:column}
.home-v2 .vb-grid .info-card h3{font-size:21px;margin-bottom:8px;color:var(--deep)}
.home-v2 .vb-grid .info-card p{flex:1;color:var(--body);font-size:18px;line-height:1.55;margin-bottom:14px}
.home-v2 .vb-grid .info-card .button{margin-top:auto;align-self:flex-start}

/* ============ SEO-BLOK ============ */
.home-v2 .info-lead{max-width:76ch;color:var(--body);font-size:18px;line-height:1.62;margin-top:12px}
.home-v2 .info-close{max-width:78ch;color:var(--muted);font-size:18px;line-height:1.6;margin-top:24px}
.home-v2 .info-close a{color:var(--cta);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ============ FAQ TERUGBEL-REGEL (echte lead-form via forms.js) ======= */
.home-v2 .faq-callback{max-width:880px;margin:20px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 22px;display:flex;align-items:center;justify-content:center;gap:12px 20px;flex-wrap:wrap}
.home-v2 .faq-callback__txt{font-weight:800;font-size:17px;color:var(--deep);flex:0 0 auto;margin:0}
.home-v2 .faq-callback__form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex:1 1 460px;justify-content:flex-end}
.home-v2 .faq-callback__form input{flex:1 1 180px;min-width:0;height:46px;padding:0 14px;font-size:16px;font-family:inherit;color:var(--ink);border:1.5px solid var(--line2);border-radius:var(--radius-sm);background:#fff}
.home-v2 .faq-callback__form input::placeholder{color:#6b7671}
.home-v2 .faq-callback__form input:focus{outline:none;border-color:var(--accent)}
.home-v2 .faq-callback__form .button{flex:0 0 auto}
.home-v2 .faq-callback__form .form-status{flex:1 1 100%;margin:2px 0 0}

/* ============ MERKENBAND — hergebruik live .brandbar, MAAR
   operator-smaak: GEEN hover-pauze (live pauzeert wel). Overschrijf. ==== */
.home-v2 .brandbar:hover .brandbar__track{animation-play-state:running}

/* ============ RESPONSIVE (alleen de nieuwe secties) ============ */
@media (max-width:1080px){
  .home-v2 .pop-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .home-v2 .kh-res{grid-template-columns:1fr}
  .home-v2 .rv-card{flex-basis:calc((100% - 20px)/2)}
}
@media (max-width:900px){
  .home-v2 .hero-grid{grid-template-columns:1fr}
  .home-v2 .hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .home-v2 .hero-main{min-height:400px}
}
@media (max-width:760px){
  .home-v2 .pop-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .home-v2 .rv-card{flex-basis:100%}
  .home-v2 .pcard__foot{flex-direction:column;align-items:stretch;gap:8px}
  .home-v2 .pcard__foot .button{width:100%;justify-content:center}
  .home-v2 .compare{grid-template-columns:128px repeat(3,minmax(150px,1fr));min-width:632px}
  .home-v2 .ccell.ccol{display:flex;flex-direction:column;justify-content:center;gap:6px}
  .home-v2 .cselect{font-size:13.5px;height:42px;padding:0 32px 0 12px}
  .home-v2 .cmp-hint{display:block}
}
@media (max-width:640px){
  .home-v2 .hero-copy{padding:32px 22px}
  .home-v2 .hero-grid{gap:12px}
  .home-v2 .hero-side{grid-template-columns:1fr 1fr;gap:12px}
  .home-v2 .flank{min-height:148px}
  .home-v2 .flank p{display:none}
  .home-v2 .flank .fcopy{padding:12px 14px}
  .home-v2 .flank .fcopy h2{font-size:17px}
  .home-v2 .flank .fgo{margin-top:4px;font-size:13.5px}
  .home-v2 .hero-main .scrim{background:linear-gradient(90deg,rgba(10,26,19,.84) 0%,rgba(10,26,19,.56) 42%,rgba(10,26,19,.12) 74%,rgba(10,26,19,0) 100%),linear-gradient(0deg,rgba(10,26,19,.82) 0%,rgba(10,26,19,.35) 34%,rgba(10,26,19,0) 60%)}
  .home-v2 .hero-eyebrow{font-size:13px;padding:5px 10px;gap:5px}
  .hero-trust{display:grid;grid-template-columns:1fr;gap:8px}
  .brandbar{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .home-v2 .kh-opts.duo,.home-v2 .kh-opts.grid2{grid-template-columns:1fr}
  .home-v2 .faq-callback{flex-direction:column;align-items:stretch;gap:10px}
  .home-v2 .faq-callback__form{justify-content:stretch}
}
@media (max-width:420px){
  .home-v2 .pop-grid{grid-template-columns:1fr}
}

/* Mobiel-polish 2026-07-05 (addendum #4): "Vergoeding & betalen"-kaarten stapelen
   op mobiel/tablet; bleven 3-koloms waardoor tekst letter-voor-letter brak. */
@media (max-width:900px){ .home-v2 .vb-grid{grid-template-columns:1fr;gap:16px} }

/* === Z7-A11Y (accessibility fixes, additive/override-only) === */
/* contrast: brand label green -> darker in-palette green (>=4.5:1 on white) */
.home-v2 .pcard__merk,.home-v2 .kh-pcard__merk{color:var(--green-600)}
/* heading-order: hero flank h3->h2 keeps the original h3 look */
.home-v2 .flank .fcopy h2{font-size:21px;font-weight:800;line-height:1.12;letter-spacing:-.315px;margin:0 0 3px}

/* CONV-37: Klarna in-3 anker als eigen regel onder de foot (prijs+knop blijven op 1 rij); scoped op #acc-grid zodat bestseller-cards ongemoeid blijven */
#acc-grid .pcard__fin{display:block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--muted,#59626d)}

/* ZM site-ronde-1807: herkomstregel bron-reviews op de homepage */
.home-v2 .rv-herkomst{font-size:15.5px;color:var(--muted);margin:2px 0 14px;max-width:860px}
.home-v2 .rv-card__meta{font-size:14.5px}

/* ============================================================================
   A5B punt 2 (21-07): "Toppers per type" leesbaar op mobiel.
   GEMETEN op 390px (Playwright, isMobile): .cmp-scroll had scrollWidth 632 vs
   clientWidth 360 met een vaste 128px-labelkolom + 3x 168px modelkolommen.
   Kolom 2 stond op x=311 (53% afgesneden), kolom 3 op x=479 (volledig buiten
   beeld) - je zag feitelijk 1 van de 3 modellen en de veeg-hint hielp niet.

   Oplossing = pure CSS, alleen in dit mobiele blok (desktop >640px onaangeroerd,
   geen JS/HTML-wijziging, dus ook geen minify-keten voor home-v2.fixed.min.js):
   - de modelkolom schaalt mee met de container (calc(100% - 128px) = 232px op
     390px breed): EEN volledige kolom past naast de labelkolom, met ~24px van
     de volgende kolom als veeg-hint.
   - scroll-snap-type:x mandatory + scroll-snap-align:start op de modelcellen,
     met scroll-padding-left gelijk aan de sticky labelkolom, zodat elke veeg
     netjes op een hele kolom uitkomt i.p.v. halverwege.
   - labelkolom 104px met kleinere letter/padding zodat "Topsnelheid" en
     "Actieradius" op een regel blijven; de hoekcel houdt alleen zijn titel.
   ============================================================================ */
@media (max-width:640px){
  .home-v2 .cmp-scroll{scroll-snap-type:x mandatory;scroll-padding-left:104px;overscroll-behavior-x:contain}
  .home-v2 .compare{grid-template-columns:104px repeat(3,calc(100% - 128px));min-width:0}
  .home-v2 .ccell{padding:14px 13px}
  .home-v2 .ccell.ccol{scroll-snap-align:start}
  .home-v2 .ccell.clabel{padding:12px 10px;font-size:13.5px;line-height:1.25}
  .home-v2 .ccorner-t{font-size:12.5px;line-height:1.2}
  .home-v2 .ccorner-s{display:none}
}