/* ============================================================================
   Autocoach V3 — homepage redesign stylesheet
   ----------------------------------------------------------------------------
   Bronnen:
   - docs/design-v3/project/assets/colors_and_type.css (design tokens)
   - docs/design-v3/project/components/*.jsx (sectie layouts)
   - docs/design-v3/autocoach-v3-reference.png (visuele waarheid)

   Class-prefix: `ac-v3-` — voorkomt conflicten met bestaande productie-CSS
   (general.css, bootstrap, menco.css). Productie-styling blijft ongewijzigd.

   Loadvolgorde: laad na general.css en bootstrap, alleen op de V3-homepage-route
   (of overal als header/footer overal vernieuwd worden — zie .ctp).
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. Menco webfonts (5 weights + italics)
   ----------------------------------------------------------------------------
   Naast de bestaande productie `menco` (Bold-only, hashed) registreren we hier
   een aparte family `MencoV3` zodat we de complete weight-set kunnen gebruiken
   zonder de productie-typografie te raken. Bestanden staan in
   webroot/fonts/menco/Menco-*.otf (toegevoegd in feature/homepage-v3-redesign).
   ---------------------------------------------------------------------------- */

@font-face {
  font-family: "MencoV3";
  src: url("/fonts/menco/Menco-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MencoV3";
  src: url("/fonts/menco/Menco-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MencoV3";
  src: url("/fonts/menco/Menco-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MencoV3";
  src: url("/fonts/menco/Menco-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MencoV3";
  src: url("/fonts/menco/Menco-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* ----------------------------------------------------------------------------
   2. Design tokens — V3 brand system
   ----------------------------------------------------------------------------
   Brand color note: `--ac-v3-yellow` is #ffc62b (correct per brand guide).
   Niet #e2b333 — dat was een oude foutieve waarde in de Next.js prototype.
   ---------------------------------------------------------------------------- */

:root {
  /* Brand accents (~10% of surface) */
  --ac-v3-turquoise:        #00bbbb;
  --ac-v3-turquoise-light:  #e6f7f7;
  --ac-v3-turquoise-pale:   #e4f4f3;
  --ac-v3-turquoise-dark:   #009999;

  --ac-v3-yellow:           #ffc62b;  /* "De punt" — official brand yellow */
  --ac-v3-yellow-soft:      #fef6e0;
  --ac-v3-yellow-dark:      #e0a800;

  /* Neutrals (~90% of surface) */
  --ac-v3-white:            #ffffff;
  --ac-v3-gray-50:          #fafafa;
  --ac-v3-gray-100:         #f5f5f5;
  --ac-v3-gray-200:         #e5e5e5;
  --ac-v3-gray-300:         #ececec;
  --ac-v3-gray-400:         #a3a3a3;
  --ac-v3-gray-500:         #808285;
  --ac-v3-gray-600:         #6b6b6b;
  --ac-v3-gray-700:         #4a4a4a;
  --ac-v3-gray-800:         #333333;
  --ac-v3-black:            #1a1a1a;

  /* Tekstkleuren V3-secties (feedback Nick ronde 3 — "alles zwart, strak"):
     --ac-v3-body   = ALLE primaire tekst (koppen, body, bullets, vragen, prijs) → zwart.
     --ac-v3-muted  = lichtgrijs voor bijzaken: kleine notes/sublabels/prefixes/eyebrows
                      in/onder het formulier + "(optioneel)"-context. Placeholders houden
                      hun eigen lichtgrijs (rgba).
     (--ac-v3-body-strong staat ook op zwart; apart token zodat de prijs later eventueel
      weer los te highlighten is met één edit. TOGGLE grijze body: --ac-v3-body op #475569.) */
  --ac-v3-body:             #1a1a1a;
  --ac-v3-body-strong:      #1a1a1a;
  --ac-v3-muted:            #64748b;

  /* NL-plate yellow (kenteken-box) */
  --ac-v3-plate-yellow:     #ffcc00;
  --ac-v3-plate-blue:       #003399;

  /* Typography */
  --ac-v3-font-heading:     "MencoV3", "Plus Jakarta Sans", system-ui, sans-serif;
  --ac-v3-font-body:        "Inter", "Open Sans", system-ui, -apple-system, sans-serif;

  /* Radii — V3 uses subtle radii */
  --ac-v3-radius-sm:        4px;
  --ac-v3-radius:           8px;
  --ac-v3-radius-md:        10px;
  --ac-v3-radius-lg:        12px;
  --ac-v3-radius-xl:        14px;
  --ac-v3-radius-pill:      9999px;

  /* Shadows — minimal, never colored */
  --ac-v3-shadow-xs:        0 1px 2px rgba(0,0,0,0.04);
  --ac-v3-shadow-sm:        0 2px 6px rgba(0,0,0,0.08);
  --ac-v3-shadow-md:        0 6px 18px rgba(0,0,0,0.10);
  --ac-v3-shadow-lg:        0 14px 30px rgba(0,0,0,0.10);
  --ac-v3-shadow-xl:        0 24px 60px rgba(0,0,0,0.35);

  /* Motion */
  --ac-v3-ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --ac-v3-ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ----------------------------------------------------------------------------
   3. Base utilities (scoped — geen globale resets om productie niet te raken)
   ---------------------------------------------------------------------------- */

.ac-v3-root {
  font-family: var(--ac-v3-font-body);
  color: var(--ac-v3-black);
  background: var(--ac-v3-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html:has(.ac-v3-root) { scroll-behavior: smooth; }

.ac-v3-root *,
.ac-v3-root *::before,
.ac-v3-root *::after {
  box-sizing: border-box;
}

.ac-v3-root :focus-visible {
  outline: 2px solid var(--ac-v3-turquoise);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Base resets in :where() — geeft ze 0 specificity zodat élke BEM class wint
   bij cascade-conflicten (margin / color / font). Voorkomt de typische
   "waarom werkt mijn margin/color niet?"-bug die specifieke classes hadden.
   Note: GEEN `color` hier — laat heading-color erven van parent (.ac-v3-tile,
   .ac-v3-finalcta etc.), anders blokkeren tone-inheritance op tiles. */
.ac-v3-root :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ac-v3-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.ac-v3-root :where(p) {
  margin: 0;
  line-height: 1.55;
}

.ac-v3-root :where(a) {
  color: inherit;
  text-decoration: none;
}


.ac-v3-punt {
  color: var(--ac-v3-yellow);
  /* font-weight expliciet erven van h1/h2/h3 — sommige browsers behandelen
     span-color-overrides als nieuwe inline context en resetten weight subtiel
     (zeker voor `?` glyph). */
  font-weight: inherit;
}

/* Turquoise accent-woord in section-titels ("Jouw route naar de <accent>").
   Vervangt drie identieke inline styles (cleanup 2026-07-02). */
.ac-v3-accent {
  color: var(--ac-v3-turquoise);
  font-weight: 800;
}


/* ----------------------------------------------------------------------------
   4. Header (sticky nav)
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   3.5. Topbar (Upway-stijl) — donkere strip BOVEN de header
   ----------------------------------------------------------------------------
   Desktop: KV-rating links + 4 USPs naast elkaar rechts.
   Mobile: rating verborgen, USPs stacken in dezelfde slot en rotaten 3s. */

.ac-v3-topbar {
  background: #ffffff;
  color: #334155;
  font-size: 12.5px;
  line-height: 1.4;
}
.ac-v3-topbar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* kiyoh-stijl rating-pill: logo + platform-naam + score/10 + count.
   "Reviews" count is underlined als link-cue. */
.ac-v3-topbar__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s var(--ac-v3-ease);
}
/* Feedback AC.nl (Nick 29-06): rating is nu een container met losse KV/Google-
   links (.ac-v3-topbar__rating-source). Hover-kleur per link i.p.v. op de hele pill. */
.ac-v3-topbar__rating-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #334155;
  text-decoration: none;
  transition: color .15s var(--ac-v3-ease);
}
.ac-v3-topbar__rating-source:hover,
.ac-v3-topbar__rating-source:hover strong { color: var(--ac-v3-turquoise-dark, #0891b2); }
.ac-v3-topbar__rating-logo {
  display: inline-block;
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.ac-v3-topbar__rating-score {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.ac-v3-topbar__rating-score strong {
  font-weight: 700;
  color: #0f172a;
}
.ac-v3-topbar__rating-scale {
  font-size: 11px;
  color: #64748b;
}
.ac-v3-topbar__rating-sep {
  color: #94a3b8;
}
.ac-v3-topbar__rating-count {
  color: #64748b;
}
.ac-v3-topbar__rating-count strong {
  font-weight: 700;
  color: #0f172a;
}
.ac-v3-topbar__usps {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}
.ac-v3-topbar__usp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ac-v3-topbar__usp-icon {
  display: inline-flex;
  color: var(--ac-v3-turquoise-dark, #0891b2);
}
.ac-v3-topbar__usp-text {
  color: #475569;
}

/* Rotation-breakpoint omhoog naar 1180px: tablet en small-laptop hebben
   onvoldoende breedte voor alle 4 USPs + full rating naast elkaar.
   Drawer/hamburger blijft op 900px (touch- vs muis-input, andere UX-concern). */
@media (max-width: 1180px) {
  /* Tablet/small-laptop én mobile: rating + USP's delen 1 absolute-positioned
     slot. JS roteert elke 3s naar het volgende item (rating als 1e in de cycle —
     "9,8/10 uit X reviews", dan de USP's). Nick 18-06b: terug naar deze stijl. */
  .ac-v3-topbar__inner {
    padding: 0 20px;
    justify-content: center;
    position: relative;
    height: 32px;
    overflow: hidden;
  }
  .ac-v3-topbar__rating,
  .ac-v3-topbar__usps,
  .ac-v3-topbar__usp {
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .5s var(--ac-v3-ease), transform .5s var(--ac-v3-ease);
    pointer-events: none;
    white-space: nowrap;
  }
  .ac-v3-topbar__usps {
    /* Wrapper-container: laat de individuele USP's roteren, niet de container */
    position: static;
    opacity: 1;
    transform: none;
    transition: none;
    display: block;
    inset: auto;
    height: 100%;
    pointer-events: auto;
  }
  .ac-v3-topbar__rating[data-active="true"],
  .ac-v3-topbar__usp[data-active="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Compactere rating-info op mobile (geen platform-label) */
  
}
@media (prefers-reduced-motion: reduce) {
  .ac-v3-topbar__usp { transition: none; }
}
/* Safety net: kleine viewports krapper, font ietsje kleiner zodat
   rating-pill ("9,8/10 · 2.131 reviews") royaal past binnen de slot. */
@media (max-width: 480px) {
  .ac-v3-topbar { font-size: 11.5px; }
  .ac-v3-topbar__rating { gap: 6px; }
  .ac-v3-topbar__rating-logo { flex-basis: 16px; height: 16px; width: 16px; }
}


/* Autokopen-subdomein (2026-05-29): de V3-header wordt daar in een eigen
   .ac-v3-root gewrapt (voor de resets), maar die korte wrapper zou de sticky
   containing-block van .ac-v3-header beperken -> sticky pint los. display:
   contents laat de wrapper geen eigen box vormen: de .ac-v3-root-resets gelden
   nog voor de descendants (selectors matchen op het element in de DOM), maar
   .ac-v3-header krijgt zijn containing block tegen de pagina i.p.v. de wrapper.
   Op de marketing-pagina's (geen --sticky-pass) verandert er niets. */
.ac-v3-root--sticky-pass {
  display: contents;
}

/* Polish-iteratie 10 (2026-05-20 sessie-2): wrap-pattern voor de WebKit
   position:sticky+transform rendering-bug. iOS Safari (en Chrome iOS, zelfde
   engine) had glitchy slide-animations omdat transform op een sticky-element
   het sticky-gedrag verstoort. Nu: .ac-v3-header is sticky maar transparent
   en zonder padding (puur containment). .ac-v3-header__body draagt de
   background + padding + transform. De twee CSS-properties zitten op
   verschillende elementen → geen conflict. */
.ac-v3-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  padding: 0;
  /* Codex round 10 fix (2026-05-20 sessie-2): de wrap-pattern liet de
     transparente .ac-v3-header een invisible click-blocker zijn — sticky +
     z-index:50 betekende dat clicks op coordinaten y=0 tot header-height
     niet doorging naar content eronder. pointer-events: none laat de
     transparente ouder events doorpassen; .__body krijgt pointer-events
     auto terug zodat hamburger/logo/icons gewoon klikbaar zijn. */
  pointer-events: none;
}
.ac-v3-header__body {
  background: var(--ac-v3-white);
  padding: 12px 40px;
  transform: translate3d(0, 0, 0);
  transition: transform .25s var(--ac-v3-ease);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: auto;
}
/* Smart hide: data-hidden blijft op de header (JS-side onveranderd),
   CSS-rule targeteert het __body kind voor de daadwerkelijke transform.
   Wanneer hidden: ook pointer-events op __body uit (klikbaar offscreen
   element is ongewenst) + visibility-delayed-zodat-transition-zichtbaar. */
.ac-v3-header[data-hidden="true"] .ac-v3-header__body {
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
}
.ac-v3-header[data-hidden="false"] .ac-v3-header__body {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ac-v3-header__body { transition: none; }
}
.ac-v3-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ac-v3-header__left {
  display: flex;
  align-items: center;
  gap: 28px;
}
.ac-v3-header__logo img {
  height: 32px; /* iter6: logo groter (was 26px) */
  display: block;
  /* Optische centrering (2026-05-29): het "autocoach."-wordmark vult zijn box
     volledig (ascenders t/h + punt bovenin) maar de visuele massa (x-hoogte:
     a/u/o/c) ligt laag. Gemeten ink-zwaartepunt = 60.3% van de boxhoogte,
     ~10% onder het geometrische midden. Alles ernaast (mobiel: hamburger +
     whatsapp/bel; desktop: "Alle diensten" + nav-links + CTA's) staat op dat
     geometrische midden, dus het logo oogt te laag. translateY(-10%) tilt het
     zwaartepunt precies op die lijn. Procent = relatief aan de eigen hoogte,
     dus correct bij elke logohoogte (26/29/32px). Geverifieerd op test-www:
     zwaartepunt en buur-elementen op identieke y (mobiel 390px + desktop). */
  transform: translateY(-10%);
}

/* Mobile hamburger — hidden by default, visible <900px */
.ac-v3-header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  background: transparent;
  border: 0;
  border-radius: var(--ac-v3-radius);
  cursor: pointer;
  color: var(--ac-v3-black);
  transition: background .15s var(--ac-v3-ease);
}
.ac-v3-header__hamburger:hover { background: var(--ac-v3-gray-100); }
@media (max-width: 900px) {
  /* Polish-iteratie 10: padding op __body i.p.v. header (zie wrap-pattern). */
  .ac-v3-header__body { padding: 10px 16px; }
  .ac-v3-header__hamburger { display: inline-flex; }
  /* Iter6 (Bas): logo direct naast hamburger op mobile (was absolute-centered).
     Small gap tussen hamburger en logo, logo blijft groter en flow-positioned
     zodat het naast de hamburger staat. */
  .ac-v3-header__left { gap: 12px; }
  .ac-v3-header__logo img { height: 36px; }
}
@media (max-width: 380px) {
  .ac-v3-header__logo img { height: 28px; }
}

/* Mega-menu trigger */
.ac-v3-megamenu {
  position: relative;
}
.ac-v3-megamenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--ac-v3-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ac-v3-black);
  padding: 8px 4px;
}
.ac-v3-megamenu__trigger svg {
  transition: transform 0.2s var(--ac-v3-ease);
}
.ac-v3-megamenu[data-open="true"] .ac-v3-megamenu__trigger svg {
  transform: rotate(180deg);
}
.ac-v3-megamenu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--ac-v3-white);
  border: 1px solid var(--ac-v3-gray-300);
  border-radius: var(--ac-v3-radius-xl);
  box-shadow: 0 24px 48px rgba(0,0,0,0.12);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 560px;
  max-width: calc(100vw - 48px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.ac-v3-megamenu[data-open="true"] .ac-v3-megamenu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .15s, transform .15s;
}
/* Mega-menu tegel-grid (2026-05-29): platte 2-koloms grid van ALLE diensten,
   gekleurd icoon + naam + korte desc (zelfde visuele taal als de
   services_cross_link-tegels). De oude 3-koloms categorie-layout
   (.ac-v3-megamenu__group/__link*) is opgeruimd bij de cleanup 2026-07-02. */
.ac-v3-megamenu__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(248px, 1fr));
  gap: 2px 10px;
}
.ac-v3-megamenu__tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s var(--ac-v3-ease);
}
.ac-v3-megamenu__tile:hover { background: #f5fafa; }
.ac-v3-megamenu__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: 0 0 38px;
}
.ac-v3-megamenu__tile-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ac-v3-megamenu__tile-title {
  font-family: var(--ac-v3-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--ac-v3-black);
  line-height: 1.2;
}
.ac-v3-megamenu__tile-desc {
  font-size: 12px;
  color: var(--ac-v3-gray-600);
  line-height: 1.3;
  margin-top: 1px;
}
.ac-v3-megamenu__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ac-v3-turquoise-light);
  color: var(--ac-v3-turquoise-dark);
  text-decoration: none;
  transition: background .15s var(--ac-v3-ease);
}
.ac-v3-megamenu__cta:hover { background: #d8eeef; }
.ac-v3-megamenu__cta-text { font-size: 13.5px; }
.ac-v3-megamenu__cta-text strong { font-weight: 700; }

.ac-v3-header__nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ac-v3-black);
}

.ac-v3-header__utility {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-v3-header__cta-occasions {
  background: var(--ac-v3-white);
  color: var(--ac-v3-turquoise);
  border: 2px solid var(--ac-v3-turquoise);
  font-family: var(--ac-v3-font-heading);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s var(--ac-v3-ease);
}
.ac-v3-header__cta-occasions:hover {
  background: var(--ac-v3-turquoise-light);
}
.ac-v3-header__cta-coach {
  background: var(--ac-v3-turquoise);
  color: var(--ac-v3-white);
  font-family: var(--ac-v3-font-heading);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s var(--ac-v3-ease);
}
.ac-v3-header__cta-coach:hover {
  background: var(--ac-v3-turquoise-dark);
}

/* Hide utility cluster on smaller screens */
@media (max-width: 1180px) {
  .ac-v3-header__utility .ac-v3-kenteken--mini,
  .ac-v3-header__cta-occasions,
  .ac-v3-header .ac-v3-header__nav-link {
    display: none;
  }
}
@media (max-width: 900px) {
  .ac-v3-megamenu { display: none; }
  /* "Autocoach inschakelen"-CTA verbergen op mobile (zit al in drawer-footer).
     Geplaatst NA de basis-rule (.ac-v3-header__cta-coach { display: inline-flex })
     zodat de cascade hem overruled bij gelijke specificity. */
  .ac-v3-header__cta-coach { display: none; }
  /* Hele utility-cluster (kenteken-mini + occasions + coach) weg op mobile —
     mobile-cluster met KV-rating + chat + bel neemt de rechtskant over. */
  .ac-v3-header__utility { display: none; }
}

/* Mobile-only icon-cluster: KV-rating + chat + phone.
   Markup + visuele stijl geport van autokopen-portal voor consistency. */
.ac-v3-header__mobile-cluster {
  display: none;
}
/* Compacter dan autokopen-portal — V3 header heeft ook hamburger + logo
   links, dus width-budget op 375px is krap. Sizes hieronder zijn afgestemd
   op iPhone SE (360px) tot iPhone 12 (390px) zonder overflow. */
@media (max-width: 900px) {
  .ac-v3-header__mobile-cluster {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  /* Logo iets kleiner op mobile zodat de cluster rechts past */
  .ac-v3-header__logo img { height: 22px; }
}


.ac-v3-header__mobile-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--ac-v3-gray-300);
  background: var(--ac-v3-white);
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 36px;
}
.ac-v3-header__mobile-icon img {
  width: 18px;
  height: 18px;
  display: block;
}
/* WhatsApp-knop in turkoois (iter6: officieel WhatsApp-symbool ipv generiek
   chat-icoon). De whatsapp-white.svg is wit op transparant, dus de filter
   blijft brightness(0) invert(1) voor wit-op-turkoois. */
.ac-v3-header__mobile-icon--whatsapp {
  background: var(--ac-v3-turquoise);
  border-color: var(--ac-v3-turquoise);
}
.ac-v3-header__mobile-icon--whatsapp img {
  filter: brightness(0) invert(1);
  width: 20px;
  height: 20px;
}
/* Backward-compat: oude --chat selector blijft werken voor pagina's die nog
   niet zijn geüpgrade. */
.ac-v3-header__mobile-icon--chat {
  background: var(--ac-v3-turquoise);
  border-color: var(--ac-v3-turquoise);
}
.ac-v3-header__mobile-icon--chat img {
  filter: brightness(0) invert(1);
}
/* Op iPhone SE (≤400px): count weg om width-budget te halen */
@media (max-width: 400px) {
  
  .ac-v3-header__mobile-cluster { gap: 4px; }
  .ac-v3-header__mobile-icon { width: 34px; height: 34px; flex-basis: 34px; }
  /* Header zelf compacter: minder side-padding + kleinere hamburger zodat
     hamburger(34) + logo(~145) + cluster(~120) + padding(24) = 323 binnen
     360px viewport. */
  .ac-v3-header__body { padding: 10px 12px; }
  .ac-v3-header__left { gap: 4px; }
  .ac-v3-header__hamburger { width: 34px; height: 34px; margin-right: -4px; }
  .ac-v3-header__logo img { height: 26px; }
}
/* Ultra-smal (≤340px) of bij heel lange logo's: rating volledig verbergen */


/* Mobile header-finetuning (Nick 2026-05-29): logo "op ooghoogte" met het
   whatsapp-icoon + meer lucht tussen hamburger en logo. Bewust NA alle
   eerdere header-rules zodat dit blok de cascade wint (gelijke specificity,
   later in de bron). De negatieve hamburger margin-right (die het logo tegen
   de hamburger aantrok) gaat naar 0; logohoogte schaalt mee met de breedte
   (logo-SVG is 289x40 -> ~7.2x breder dan hoog), dus per breakpoint kleiner
   zodat "autocoach." nooit botst met de icon-cluster rechts.

   Breakpoints: de grote 32px alleen voor tablets/landscape (>=481px, ruim
   width-budget); ALLE telefoons (361-480px) krijgen 29px. Cutoff bewust op
   480 i.p.v. 400, want phones van 401-430px (Pixel 412, iPhone Plus/XR 414,
   Pro Max 430) vielen anders in de 32px-bucket net boven de 400-grens en
   hadden te krap budget naast de icon-cluster (Codex-review). Geverifieerd op
   test-www bij 340 / 360 / 390 / 401 / 430 / 481px: geen overflow, logo oogt
   even groot als de whatsapp-knop. */
@media (max-width: 900px) {
  .ac-v3-header__left { gap: 16px; }
  .ac-v3-header__hamburger { margin-right: 0; }
  /* Optische logo-lift (translateY) staat nu op de base-rule zodat hij ook
     op desktop geldt; hier alleen nog de hoogte per breakpoint. */
  .ac-v3-header__logo img { height: 32px; }
}
@media (max-width: 480px) {
  .ac-v3-header__left { gap: 12px; }
  .ac-v3-header__logo img { height: 29px; }
}
@media (max-width: 360px) {
  .ac-v3-header__left { gap: 8px; }
  .ac-v3-header__logo img { height: 26px; }
}


/* ----------------------------------------------------------------------------
   4.5. Mobile drawer (slide-in nav voor <900px)
   ---------------------------------------------------------------------------- */

.ac-v3-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear .3s;
}
.ac-v3-mobile-drawer[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.ac-v3-mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity .25s var(--ac-v3-ease);
}
.ac-v3-mobile-drawer[data-open="true"] .ac-v3-mobile-drawer__backdrop {
  opacity: 1;
}
.ac-v3-mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100vw;
  max-width: 100vw;
  background: var(--ac-v3-white);
  box-shadow: var(--ac-v3-shadow-xl);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s var(--ac-v3-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ac-v3-mobile-drawer[data-open="true"] .ac-v3-mobile-drawer__panel {
  transform: translateX(0);
}
.ac-v3-mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ac-v3-gray-200);
}
.ac-v3-mobile-drawer__logo img { height: 24px; display: block; }
.ac-v3-mobile-drawer__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--ac-v3-radius);
  cursor: pointer;
  color: var(--ac-v3-black);
}
.ac-v3-mobile-drawer__close:hover { background: var(--ac-v3-gray-100); }

.ac-v3-mobile-drawer__nav {
  flex: 1;
  padding: 8px 20px 12px;
}
/* Feedback AC.nl #6 (Nick 25-06): kenteken-Check bovenaan in het mobiele menu. */
.ac-v3-mobile-drawer__kenteken {
  /* Bas/Nick 29-06: kentekenbox staat nu ONDER de diensten → wat meer lucht erboven. */
  margin: 16px 0 14px;
}


.ac-v3-mobile-drawer__link {
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  transition: background .15s var(--ac-v3-ease);
}
.ac-v3-mobile-drawer__link:active { background: var(--ac-v3-gray-100); }


.ac-v3-mobile-drawer__divider {
  height: 1px;
  background: var(--ac-v3-gray-200);
  margin: 12px 0;
}
.ac-v3-mobile-drawer__sublink {
  display: block;
  padding: 12px 8px;
  margin: 0 -8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ac-v3-black);
  border-radius: 8px;
}
.ac-v3-mobile-drawer__sublink:active { background: var(--ac-v3-gray-100); }

/* Mobiel drawer: platte dienstenlijst met gekleurd icoon + naam + desc
   (2026-05-29, gelijk aan de desktop mega-menu tegels). De oude
   .ac-v3-mobile-drawer__group/__link* regels hierboven zijn nu ongebruikt. */
.ac-v3-mobile-drawer__services {
  display: flex;
  flex-direction: column;
}
.ac-v3-mobile-drawer__service {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 12px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ac-v3-mobile-drawer__service:active { background: var(--ac-v3-gray-100); }
.ac-v3-mobile-drawer__service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex: 0 0 40px;
}
.ac-v3-mobile-drawer__service-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.ac-v3-mobile-drawer__service-title {
  font-family: var(--ac-v3-font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--ac-v3-black);
  line-height: 1.2;
}
.ac-v3-mobile-drawer__service-desc {
  font-size: 12.5px;
  color: var(--ac-v3-gray-600);
  line-height: 1.3;
  margin-top: 1px;
}
.ac-v3-mobile-drawer__service-arrow {
  color: var(--ac-v3-gray-400);
  flex: 0 0 auto;
  display: inline-flex;
}

.ac-v3-mobile-drawer__footer {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--ac-v3-gray-200);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ac-v3-gray-50);
}

/* Feedback AC.nl (Nick 29-06): occasions-/inschakelen-CTA's verplaatst naar direct
   onder de kentekenbox (matcht desktop). Stapelen full-width met wat lucht eronder. */
.ac-v3-mobile-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}
/* Feedback AC.nl (Nick 29-06): direct-contact onderin — WhatsApp + bellen naast elkaar. */
.ac-v3-mobile-drawer__contact {
  display: flex;
  gap: 10px;
}
.ac-v3-mobile-drawer__contact-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--ac-v3-gray-200);
  background: #fff;
  color: var(--ac-v3-black);
  -webkit-tap-highlight-color: transparent;
}
.ac-v3-mobile-drawer__contact-btn:active { background: var(--ac-v3-gray-100); }
.ac-v3-mobile-drawer__contact-btn img { width: 18px; height: 18px; }
.ac-v3-mobile-drawer__contact-btn--whatsapp img {
  filter: invert(48%) sepia(86%) saturate(450%) hue-rotate(135deg);
}

/* Body scroll-lock when drawer open */
body[data-ac-v3-drawer-open="true"] { overflow: hidden; }


/* ----------------------------------------------------------------------------
   5. Kenteken plates (3 variants: hero, header-mini, FinalCTA-inline)
   ---------------------------------------------------------------------------- */

.ac-v3-kenteken {
  display: flex;
  align-items: stretch;
  background: var(--ac-v3-plate-yellow);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--ac-v3-shadow-sm);
  transition: box-shadow .2s var(--ac-v3-ease);
  /* Disable iOS/Android tap-highlight (grijs flash) op de plate */
  -webkit-tap-highlight-color: transparent;
}
.ac-v3-kenteken:focus-within {
  box-shadow: 0 0 0 3px rgba(0,187,187,0.25), var(--ac-v3-shadow-md);
}
/* Op mobile cleaner focus — geen externe ring die buiten de pill steekt */
@media (max-width: 768px) {
  .ac-v3-kenteken:focus-within {
    box-shadow: inset 0 0 0 2px rgba(0,187,187,0.45), var(--ac-v3-shadow-sm);
  }
}
.ac-v3-kenteken__input,
.ac-v3-kenteken__submit,
.ac-v3-kenteken__submit--icon-only {
  -webkit-tap-highlight-color: transparent;
}

/* Invalid state — shake-feedback bij te korte kenteken-submit */
.ac-v3-kenteken--invalid {
  animation: ac-v3-shake .35s var(--ac-v3-ease);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.45), var(--ac-v3-shadow-sm);
}
@keyframes ac-v3-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* Feedback AC.nl (Nick 09-07): de korte "te kort"-melding wordt nu als rode
   placeholder IN de box getoond (zie showKentekenError in autocoach_v3.js) i.p.v.
   een los element naast de form — dat werd als grid/flex-sibling ingevoegd en duwde
   o.a. de home-hero uit elkaar. Geen layout-verschuiving meer, kort en in de box. */
.ac-v3-kenteken--invalid .ac-v3-kenteken__input::placeholder {
  color: #b42a2a;
  opacity: 1;
}
.ac-v3-kenteken--invalid .ac-v3-kenteken__placeholder {
  color: #b42a2a;
}
.ac-v3-kenteken__flag {
  background: var(--ac-v3-plate-blue);
  width: 38px;
  flex: 0 0 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--ac-v3-white);
}
.ac-v3-kenteken__flag-stars {
  display: block;
  width: 22px;
  height: 14px;
}
.ac-v3-kenteken__flag-stars circle { fill: var(--ac-v3-plate-yellow); }
.ac-v3-kenteken__flag-text {
  font-family: Arial, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.ac-v3-kenteken__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  position: relative;
}
.ac-v3-kenteken__input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "MencoV3", system-ui, Arial;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.04em;
  padding: 0 14px;
  color: var(--ac-v3-black);
  text-transform: uppercase;
  min-width: 0;
}
.ac-v3-kenteken__input::placeholder {
  color: #7a5c00;
  opacity: 1;
  font-family: "MencoV3", system-ui, Arial;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ac-v3-kenteken__placeholder {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "MencoV3", system-ui, Arial;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #7a5c00;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}
.ac-v3-kenteken__placeholder::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 22px;
  background: #7a5c00;
  margin-left: 2px;
  vertical-align: middle;
  animation: ac-v3-blink 1s step-end infinite;
}
@keyframes ac-v3-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.ac-v3-kenteken__submit-wrap {
  display: flex;
  align-items: center;
  padding-right: 8px;
}
.ac-v3-kenteken__submit {
  background: transparent;
  color: var(--ac-v3-black);
  border: 2px solid var(--ac-v3-black);
  padding: 4px 5px 4px 18px;
  height: 44px;
  border-radius: var(--ac-v3-radius-pill);
  font-family: var(--ac-v3-font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .2s var(--ac-v3-ease);
}
.ac-v3-kenteken__submit:hover {
  background: rgba(26,26,26,0.08);
}
.ac-v3-kenteken__submit-arrow {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--ac-v3-radius-pill);
  background: var(--ac-v3-black);
  /* Feedback AC.nl (Nick 29-06): pijl WIT (was plate-geel) — alle kentekenboxen
     dezelfde stijl: zwarte cirkel + witte pijl, zoals het hoofdmenu. */
  color: var(--ac-v3-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Variant: full-height plate (hero) */
.ac-v3-kenteken--full {
  height: 60px;
}

/* Kentekenbox in de service-hero (kentekencheck). Vol-breedte binnen de
   hero-contentkolom met desktop-max; min-width:0 op de input-wrap zodat de
   flex-row kan krimpen i.p.v. shrink-wrappen → geen overflow op smalle
   telefoons (320-375px). (Codex-review 2026-05-29.) */
.ac-v3-task-hero__kenteken {
  width: 100%;
  max-width: 440px;
  margin-top: 4px;
}
.ac-v3-task-hero__kenteken .ac-v3-kenteken__input-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.ac-v3-task-hero__kenteken .ac-v3-kenteken__input { width: 100%; }
@media (max-width: 480px) {
  .ac-v3-task-hero__kenteken { max-width: 100%; }
}

/* --cta variant: de kenteken-box is de ENIGE hero-CTA met een tekst-knop.
   Lange labels ("Plan mijn aankoopkeuring" / "Plan keuring voor deze auto")
   passen niet comfortabel inline naast het kenteken-veld -> de knop wrapt
   altijd naar een full-width tweede rij onder de plaat (flag + input blijven
   rij 1). Eén consistente "plaat + CTA"-kaart op alle viewports; nooit een
   wrappend label. Geen DOM-wijziging nodig: flex-wrap + flex-basis:100%. */
.ac-v3-kenteken--cta.ac-v3-kenteken--full {
  flex-wrap: wrap;
  height: auto;
}
.ac-v3-kenteken--cta.ac-v3-kenteken--full .ac-v3-kenteken__flag { height: 52px; }
.ac-v3-kenteken--cta.ac-v3-kenteken--full .ac-v3-kenteken__input-wrap { height: 52px; }
.ac-v3-kenteken--cta.ac-v3-kenteken--full .ac-v3-kenteken__submit-wrap {
  flex: 1 0 100%;
  padding: 8px;
  border-top: 2px solid rgba(0, 0, 0, 0.12);
}
.ac-v3-kenteken--cta.ac-v3-kenteken--full .ac-v3-kenteken__submit {
  width: 100%;
  justify-content: center;
  height: 46px;
  white-space: nowrap;
}

/* Extern-link-icoon (bv. autoverzekering → Independer, opent in nieuw tabblad).
   Subtiel, inline naast het label. */
.ac-v3-ext-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.5;
}
.ac-v3-ext-icon svg { width: 0.85em; height: 0.85em; }

/* "Binnenkort"-badge naast service-links (importservice, autobeheer). */
.ac-v3-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #b45309;
  background: #fef3c7;
  border-radius: 999px;
  line-height: 1.6;
}
.ac-v3-badge--sm { font-size: 9px; padding: 0 5px; }

/* Variant: mini (header) — V3-design conform: simpele ronde zwarte arrow-button,
   géén Check-pill. Compact en past binnen header-hoogte van 36px.
   Bron: docs/design-v3/project/components/Sections.jsx:205-226 (MiniKenteken). */
.ac-v3-kenteken--mini {
  height: 36px;
  border-radius: 7px;
}
.ac-v3-kenteken--mini .ac-v3-kenteken__flag { width: 22px; flex: 0 0 22px; }
.ac-v3-kenteken--mini .ac-v3-kenteken__flag-stars { display: none; }
.ac-v3-kenteken--mini .ac-v3-kenteken__flag-text { font-size: 9px; }
.ac-v3-kenteken--mini .ac-v3-kenteken__input {
  font-size: 13px;
  padding: 0 8px;
  width: 96px;
  letter-spacing: 0.03em;
}

/* Icon-only submit (mini header-variant) — ronde zwarte cirkel met witte arrow */
.ac-v3-kenteken__submit--icon-only {
  border: 0;
  background: var(--ac-v3-black);
  color: var(--ac-v3-white);
  width: 24px;
  height: 24px;
  margin: 6px;
  padding: 0;
  border-radius: var(--ac-v3-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 24px;
  transition: background .15s var(--ac-v3-ease);
}
.ac-v3-kenteken__submit--icon-only:hover {
  background: var(--ac-v3-turquoise);
}
/* Feedback AC.nl (Nick 29-06): icon-only submit op de FULL-kentekenbox (mobiel menu) —
   geen 'Check'-pill/rand/tekst, alleen het ronde pijl-icoon (.__submit-arrow). */
.ac-v3-kenteken__submit--circle {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 0;
  height: auto;
}
/* Feedback AC.nl (Nick 29-06): geen turquoise focus-box rond de kentekenbox (oogde
   als een bug). De gele plaat is zelf al duidelijk; caret/typen geeft focus-feedback. */
.ac-v3-kenteken :focus-visible,
.ac-v3-kenteken:focus-visible {
  outline: none;
  outline-offset: 0;
}
/* Feedback AC.nl (Nick 29-06): kentekenbox-placeholder in het mobiele menu een tandje
   kleiner (20→16px) zodat 'check kenteken' rustiger oogt. */
.ac-v3-mobile-drawer__kenteken .ac-v3-kenteken__input,
.ac-v3-mobile-drawer__kenteken .ac-v3-kenteken__input::placeholder {
  font-size: 16px;
}

/* Variant: inline (FinalCTA) — strakker uitgelijnd met hero, 48px hoog (compromis).
   Submit-pill heeft zwarte rand + cirkel met gele arrow, exact zelfde family
   als hero zodat de drie kentekenboxen visueel "familieleden" zijn. */
.ac-v3-kenteken--inline {
  height: 48px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), var(--ac-v3-shadow-sm);
}
.ac-v3-kenteken--inline .ac-v3-kenteken__flag { width: 28px; flex: 0 0 28px; }
.ac-v3-kenteken--inline .ac-v3-kenteken__flag-stars { display: none; }
.ac-v3-kenteken--inline .ac-v3-kenteken__flag-text { font-size: 10px; }
.ac-v3-kenteken--inline .ac-v3-kenteken__input {
  font-size: 15px;
  padding: 0 12px;
}
.ac-v3-kenteken--inline .ac-v3-kenteken__submit-wrap { padding-right: 5px; }
.ac-v3-kenteken--inline .ac-v3-kenteken__submit {
  height: 36px;
  font-size: 12px;
  padding: 0 4px 0 12px;
  gap: 6px;
}
.ac-v3-kenteken--inline .ac-v3-kenteken__submit-arrow {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}
.ac-v3-kenteken--inline .ac-v3-kenteken__submit-arrow svg { width: 12px; height: 12px; }


/* ----------------------------------------------------------------------------
   6. Hero (split variant — V3 default)
   ---------------------------------------------------------------------------- */

.ac-v3-hero {
  position: relative;
  background: var(--ac-v3-white);
  overflow: hidden;
}
.ac-v3-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 40px 56px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  min-height: 600px;
}
.ac-v3-hero__title {
  font-family: var(--ac-v3-font-heading);
  font-size: clamp(42px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  font-weight: 700;
  color: var(--ac-v3-black);
  text-wrap: balance;
}
.ac-v3-hero__subtitle {
  font-size: 18px;
  color: var(--ac-v3-gray-700);
  margin: 0 0 40px;
  line-height: 1.6;
  max-width: 540px;
  text-wrap: pretty;
}
.ac-v3-hero__cta-cluster {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  min-width: 0;
}

.ac-v3-hero__btn {
  min-width: 0;
  padding: 14px 18px;
  border-radius: 10px;
  font-family: var(--ac-v3-font-heading);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all .2s var(--ac-v3-ease);
}
/* Within .ac-v3-hero__buttons row: each button takes equal width.
   Outside (in column cluster): full-width block-level. */

.ac-v3-hero__cta-cluster > .ac-v3-hero__btn {
  width: 100%;
}
/* Within .ac-v3-hero__row: button vult grid-cel, sync hoogte met kenteken */
.ac-v3-hero__row .ac-v3-hero__btn {
  width: 100%;
  height: 54px;
  padding: 0 18px;
}
/* Prominent primary CTA — Nick's keuze: "Autocoach inschakelen" als #1 lead-gen */
.ac-v3-hero__btn--hero {
  padding: 18px 22px;
  font-size: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,187,187,0.25);
}
.ac-v3-hero__btn--hero:hover {
  box-shadow: 0 12px 28px rgba(0,187,187,0.32);
  transform: translateY(-1px);
}
.ac-v3-hero__btn--secondary {
  background: var(--ac-v3-white);
  color: var(--ac-v3-turquoise);
  border: 2px solid var(--ac-v3-turquoise);
}
.ac-v3-hero__btn--secondary:hover {
  background: var(--ac-v3-turquoise-light);
}
.ac-v3-hero__btn--primary {
  background: var(--ac-v3-turquoise);
  color: var(--ac-v3-white);
  border: 2px solid var(--ac-v3-turquoise);
}
.ac-v3-hero__btn--primary:hover {
  background: var(--ac-v3-turquoise-dark);
  border-color: var(--ac-v3-turquoise-dark);
}

/* Hero-row — 50/50 layout met kenteken-box (links) en Bekijk N occasions (rechts).
   Onder de full-width Autocoach inschakelen primary. V3-indeling per Nick. */
.ac-v3-hero__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .ac-v3-hero__row { grid-template-columns: 1fr; }
}

/* Compacte hero-kenteken variant — kleiner dan --full, behoudt typewriter.
   In hero-row 50% width, dus de "Check"-pill moet meegroeien. */
.ac-v3-kenteken--hero-compact {
  height: 54px;
  border-radius: 10px;
  min-width: 0;
}
.ac-v3-kenteken--hero-compact .ac-v3-kenteken__flag {
  width: 32px;
  flex: 0 0 32px;
}
.ac-v3-kenteken--hero-compact .ac-v3-kenteken__flag-stars {
  width: 18px;
  height: 12px;
}
.ac-v3-kenteken--hero-compact .ac-v3-kenteken__flag-text { font-size: 10px; }
.ac-v3-kenteken--hero-compact .ac-v3-kenteken__input,
.ac-v3-kenteken--hero-compact .ac-v3-kenteken__placeholder {
  font-size: 16px;
  padding: 0 10px;
}
.ac-v3-kenteken--hero-compact .ac-v3-kenteken__placeholder::after {
  height: 16px;
}
.ac-v3-kenteken--hero-compact .ac-v3-kenteken__submit-wrap {
  padding-right: 5px;
}
.ac-v3-kenteken--hero-compact .ac-v3-kenteken__submit {
  height: 38px;
  font-size: 12px;
  padding: 0 4px 0 10px;
  gap: 5px;
}
.ac-v3-kenteken--hero-compact .ac-v3-kenteken__submit-arrow {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

/* Hero tertiary "verkopen/inruilen?" link — rustige micro-CTA onder de
   2 hero-buttons. Past bij "rustige expert"-tone, dekt de ~30% verkoop-funnel
   die anders alleen via Final-CTA / mega-menu te vinden was. */


/* "Bekend van" in hero (vervangt review-pills onder kenteken-row).
   Centraal uitgelijnd onder de hero-content met extra ademruimte
   tov de buttons erboven. */
.ac-v3-hero__bekendvan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  width: 100%;
}
.ac-v3-hero__bekendvan-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ac-v3-gray-400);
  text-transform: uppercase;
}
.ac-v3-hero__bekendvan-img {
  height: 28px;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 540px) {
  .ac-v3-hero__bekendvan { margin-top: 22px; gap: 8px; }
  .ac-v3-hero__bekendvan-label { font-size: 9px; }
  .ac-v3-hero__bekendvan-img { height: 22px; }
}

/* Review pills under CTA cluster */

.ac-v3-review-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ac-v3-white);
  border: 1px solid var(--ac-v3-gray-300);
  border-radius: var(--ac-v3-radius-pill);
  padding: 5px 11px 5px 9px;
  white-space: nowrap;
  transition: border-color .2s, transform .2s;
}
.ac-v3-review-pill:hover {
  border-color: var(--ac-v3-turquoise);
  transform: translateY(-1px);
}

.ac-v3-review-pill__score {
  font-family: var(--ac-v3-font-heading);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ac-v3-black);
}
.ac-v3-review-pill__count {
  font-size: 11.5px;
  color: var(--ac-v3-gray-600);
}


/* Hero photo */
.ac-v3-hero__photo {
  position: relative;
  border-radius: var(--ac-v3-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ac-v3-turquoise-pale);
  max-height: 580px;
}
.ac-v3-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .ac-v3-hero__inner {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 32px;
    min-height: 0;
  }
  .ac-v3-hero__photo { max-height: 420px; }
}


/* ----------------------------------------------------------------------------
   7. BekendVan strip
   ---------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   8. Section header (reused across multiple sections)
   ---------------------------------------------------------------------------- */

.ac-v3-section-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
.ac-v3-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ac-v3-turquoise);
  text-transform: uppercase;
}
.ac-v3-section-eyebrow--pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--ac-v3-turquoise-light);
  border-radius: var(--ac-v3-radius-pill);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.ac-v3-section-eyebrow--pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac-v3-turquoise);
}
/* Note: globale h-resets staan nu in :where() (0 specificity) — class wint nu
   sowieso. Geen `.ac-v3-root` prefix meer nodig. */
.ac-v3-section-title {
  font-family: var(--ac-v3-font-heading);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  margin: 0 auto;
  color: var(--ac-v3-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 760px;
}
.ac-v3-section-sub {
  font-size: 16px;
  color: var(--ac-v3-gray-700);
  /* margin: 0 auto zodat sub centreert binnen text-align:center parents
     (zonder dit blijft hij links bij max-width 620). Inline `margin-top` op
     spec. plekken in index.ctp overruled alleen de top-margin. */
  margin: 0 auto;
  max-width: 620px;
}


/* ----------------------------------------------------------------------------
   9. Services tiles (bento grid)
   ---------------------------------------------------------------------------- */

.ac-v3-services {
  background: var(--ac-v3-white);
  padding: 88px 40px 64px;
}
.ac-v3-services__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.ac-v3-services__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}
.ac-v3-services__head-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--ac-v3-turquoise);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ac-v3-services__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 175px 175px 145px;
  grid-template-areas:
    "hero hero aank aank"
    "hero hero zoek zoek"
    "s1   s2   s3   s4";
}
@media (max-width: 900px) {
  .ac-v3-services__grid {
    grid-template-columns: repeat(2, 1fr);
    /* Hero-row op auto i.p.v. 200px — voorkomt clipping van de 4 bullets +
       title + subtitle bij tablet-breakpoints. Andere tiles blijven fixed. */
    grid-template-rows: auto 150px 150px 140px 140px;
    grid-template-areas:
      "hero hero" "aank aank" "zoek zoek" "s1 s2" "s3 s4";
  }
}
@media (max-width: 540px) {
  .ac-v3-services__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas: "hero" "aank" "zoek" "s1" "s2" "s3" "s4";
  }
}

/* Tile base */
.ac-v3-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 20px;
  border-radius: var(--ac-v3-radius-lg);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ac-v3-ease), box-shadow .25s var(--ac-v3-ease);
  cursor: pointer;
}
.ac-v3-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--ac-v3-shadow-lg);
}
.ac-v3-tile__icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ac-v3-tile__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.ac-v3-tile__text {
  min-width: 0;
  flex: 1;
}
.ac-v3-tile__title {
  font-family: var(--ac-v3-font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 4px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.ac-v3-tile__sub {
  font-size: 13px;
  margin: 0;
  line-height: 1.45;
}
.ac-v3-tile__arrow {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--ac-v3-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
}
.ac-v3-tile__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--ac-v3-yellow);
  color: var(--ac-v3-black);
  font-family: var(--ac-v3-font-heading);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--ac-v3-radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Tile size variants */
.ac-v3-tile--hero {
  grid-area: hero;
  padding: 24px 26px;
  background: var(--ac-v3-turquoise);
  color: var(--ac-v3-white);
}
.ac-v3-tile--hero .ac-v3-tile__icon-box {
  width: 64px;
  height: 64px;
  border-radius: var(--ac-v3-radius-xl);
  background: rgba(255,255,255,0.18);
  color: var(--ac-v3-white);
}
.ac-v3-tile--hero .ac-v3-tile__title { font-size: 32px; color: var(--ac-v3-white); }
.ac-v3-tile--hero .ac-v3-tile__sub { font-size: 14px; color: var(--ac-v3-white); }
.ac-v3-tile--hero .ac-v3-tile__arrow {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: var(--ac-v3-white);
  color: var(--ac-v3-turquoise);
}
.ac-v3-tile--hero .ac-v3-tile__features {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ac-v3-tile--hero .ac-v3-tile__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ac-v3-white);
  font-weight: 500;
}
.ac-v3-tile--hero .ac-v3-tile__features li::before {
  content: "✓";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: var(--ac-v3-radius-pill);
  background: var(--ac-v3-yellow);
  color: var(--ac-v3-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}

.ac-v3-tile--large { padding: 20px 22px; }
.ac-v3-tile--large .ac-v3-tile__title { font-size: 20px; }

.ac-v3-tile--yellow {
  background: var(--ac-v3-yellow);
  color: var(--ac-v3-black);
}
.ac-v3-tile--yellow .ac-v3-tile__icon-box { background: rgba(255,255,255,0.45); color: var(--ac-v3-black); }
.ac-v3-tile--yellow .ac-v3-tile__sub { color: #4a3d10; }
.ac-v3-tile--yellow .ac-v3-tile__arrow { background: var(--ac-v3-black); color: var(--ac-v3-yellow); }

.ac-v3-tile--softteal {
  background: var(--ac-v3-turquoise-light);
  color: #0a4a4a;
}
.ac-v3-tile--softteal .ac-v3-tile__icon-box { background: var(--ac-v3-white); color: var(--ac-v3-turquoise); }
.ac-v3-tile--softteal .ac-v3-tile__sub { color: #3d6868; }
.ac-v3-tile--softteal .ac-v3-tile__arrow { background: var(--ac-v3-turquoise); color: var(--ac-v3-white); }

.ac-v3-tile--white {
  background: var(--ac-v3-white);
  color: var(--ac-v3-black);
  border: 1px solid var(--ac-v3-gray-200);
}
.ac-v3-tile--white .ac-v3-tile__icon-box { background: var(--ac-v3-turquoise-light); color: var(--ac-v3-turquoise); }
.ac-v3-tile--white .ac-v3-tile__sub { color: var(--ac-v3-gray-500); }
.ac-v3-tile--white .ac-v3-tile__arrow { background: var(--ac-v3-turquoise); color: var(--ac-v3-white); }


/* ----------------------------------------------------------------------------
   10. USPs (3 cards with team photos)
   ---------------------------------------------------------------------------- */

.ac-v3-usps {
  background: var(--ac-v3-white);
  padding: 72px 40px 88px;
}
.ac-v3-usps__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.ac-v3-usps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.ac-v3-usp {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--ac-v3-gray-50);
  border-radius: var(--ac-v3-radius-xl);
  padding: 22px;
  border: 1px solid var(--ac-v3-gray-300);
}
.ac-v3-usp__photo {
  position: relative;
  border-radius: var(--ac-v3-radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ac-v3-turquoise-light);
}
.ac-v3-usp__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ac-v3-usp__tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  color: var(--ac-v3-black);
  font-family: var(--ac-v3-font-heading);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--ac-v3-radius-pill);
  letter-spacing: 0.02em;
}
.ac-v3-usp__title {
  font-family: var(--ac-v3-font-heading);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--ac-v3-black);
  letter-spacing: -0.01em;
}
.ac-v3-usp__body {
  font-size: 14.5px;
  color: #5a5a5a;
  margin: 0;
  line-height: 1.55;
}


/* ----------------------------------------------------------------------------
   11. Road section (scroll-driven 8-step) — SVG-positioning + cards
   ---------------------------------------------------------------------------- */

.ac-v3-road {
  /* Polish-iteratie 2: bg wit i.p.v. gray-50. */
  background: var(--ac-v3-white);
  padding: 64px 24px 72px;
}
.ac-v3-road__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 40px;
}
/* Road-card link variant — voor de 7 klikbare stappen (stap 8 = eindresultaat,
   blijft div zonder hover). */
.ac-v3-road__card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ac-v3-road__card--link:hover {
  border-color: var(--ac-v3-turquoise);
  box-shadow: 0 8px 24px rgba(0, 187, 187, 0.16);
  transform: translateX(0) translateY(-1px);
}
.ac-v3-road__stage {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  /* height is set inline by JS based on step count */
}
.ac-v3-road__svg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 320px;
  overflow: visible;
}
.ac-v3-road__card {
  /* display: block expliciet voor de <a>-variant (7 van 8 cards zijn nu links).
     Zonder dit blijft een <a> default inline en negeert width:100% in
     mobile-collapse → cards stapelen niet correct. */
  display: block;
  position: absolute;
  width: 230px;
  background: var(--ac-v3-white);
  border: 1px solid var(--ac-v3-gray-200);
  border-radius: var(--ac-v3-radius-md);
  padding: 12px 14px;
  box-shadow: var(--ac-v3-shadow-xs);
  opacity: 0.6;
  transition: all .45s var(--ac-v3-ease);
}
.ac-v3-road__card[data-active="true"] {
  border: 2px solid var(--ac-v3-yellow);
  box-shadow: 0 8px 24px rgba(255,198,43,0.20);
  opacity: 1;
}
.ac-v3-road__card--left { left: 0; transform: translateX(-6px); }
.ac-v3-road__card--right { right: 0; transform: translateX(6px); }
/* Feest = laatste stap, centraal onderin (Nick 08-07). ALLEEN desktop: blijft in álle
   states gecentreerd (ook hover/active), zodat translateX(-50%) niet door de link-hover
   of de active-transform-reset wordt overschreven. Op mobiel NIET (anders schuift de
   full-width kaart bij touch/:hover met translateX(-50%) van het scherm af — Nick 08-07). */
@media (min-width: 761px) {
  .ac-v3-road__card--center,
  .ac-v3-road__card--center[data-active="true"],
  .ac-v3-road__card--center.ac-v3-road__card--link:hover {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}
.ac-v3-road__card[data-active="true"].ac-v3-road__card--left,
.ac-v3-road__card[data-active="true"].ac-v3-road__card--right {
  transform: translateX(0);
}
.ac-v3-road__card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ac-v3-road__step-num {
  width: 22px;
  height: 22px;
  border-radius: var(--ac-v3-radius-pill);
  background: var(--ac-v3-gray-200);
  color: var(--ac-v3-gray-600);
  font-size: 12px;
  font-weight: 800;
  font-family: var(--ac-v3-font-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: width .2s ease, height .2s ease, font-size .2s ease,
              background .2s ease, color .2s ease;
}
/* Polish-iteratie 2 (2026-05-20): active step-num groter zodat "Je bent hier" /
   "stap N" duidelijk leesbaar is — voorheen 20×20px / 11px, nu 32×32px / 15px. */
[data-active="true"] .ac-v3-road__step-num {
  width: 32px;
  height: 32px;
  font-size: 15px;
  background: var(--ac-v3-yellow);
  color: var(--ac-v3-black);
  box-shadow: 0 4px 12px rgba(255, 198, 43, 0.30);
}

/* ---- Twee-sporen roadmap (ALLEEN homepage: .ac-v3-road--split) ------------
   Scoped onder --split zodat de over-ons-tijdlijn (.ac-v3-road--timeline,
   zelfde basis-classes) ongemoeid blijft. */
.ac-v3-road--split .ac-v3-road__svg { width: 460px; }

/* Verspringen-fix (Nick 08-07): de resting-kaart krijgt óók een 2px-rand, zodat de
   active-state (2px turquoise/geel) de content-breedte niet verandert. Anders
   herwrapt de body-tekst tijdens het scrollen (bv. 'Verkocht!' → 'nemen' sprong
   naar regel 2). Kleur/only bij active; breedte blijft constant. */
.ac-v3-road--columns .ac-v3-road__card { border-width: 2px; }

/* Kolom-legenda boven de twee wegen (Bas 08-07): koop-titel links (geel),
   inruil/verkoop-titel rechts (turquoise), elk met een gekleurd stipje. */
.ac-v3-road--columns .ac-v3-road__legend {
  display: flex;
  justify-content: space-between;
  max-width: 720px;
  margin: 26px auto 0;
  padding: 0 6px;
}
.ac-v3-road__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ac-v3-font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ac-v3-black);
}
.ac-v3-road__legend-item::before {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.ac-v3-road__legend-item--koop::before   { background: var(--ac-v3-yellow, #ffc62b); }
.ac-v3-road__legend-item--inruil::before { background: var(--ac-v3-turquoise, #00bbbb); }

/* Inruil-kaart actief = turquoise (koop houdt de gele active-state hierboven). */
.ac-v3-road--split .ac-v3-road__card--inruil[data-active="true"] {
  border-color: var(--ac-v3-turquoise);
  box-shadow: 0 8px 24px rgba(0, 187, 187, 0.20);
}
.ac-v3-road--split .ac-v3-road__card--inruil[data-active="true"] .ac-v3-road__step-num {
  background: var(--ac-v3-turquoise);
  color: #fff;
}
/* Kleine niet-kleur-cue dat inruil-stappen optioneel zijn (op de 3 inruil-kaarten).
   Op mobiel in de flow (kaarten stapelen met gap → geen overlap-risico). */
.ac-v3-road--split .ac-v3-road__card-opt {
  display: inline-block;
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #009999;
}
/* Twee-kolom-layout (Bas 08-07): de 3 inruil-kaarten staan nu ver uit elkaar in
   hun eigen kolom, dus het Optioneel-label mag weer IN-FLOW onder de body (geen
   tekst-overlap meer). Het oude absolute-rechtsonder was nodig toen inruil-kaarten
   in de interleaved-layout dicht opeen lagen — die reden is vervallen. */
@media (min-width: 761px) {
  .ac-v3-road--columns .ac-v3-road__card-opt {
    position: static;
    right: auto;
    bottom: auto;
    margin-top: 7px;
  }
}

/* Actieve stip krijgt track-kleur (koop geel / inruil turquoise). */
.ac-v3-road--split .ac-v3-road__anchor[data-active="true"] > circle:not(.ac-v3-road__ping) { fill: var(--ac-v3-yellow); }
.ac-v3-road--split .ac-v3-road__anchor--inruil[data-active="true"] > circle:not(.ac-v3-road__ping) { fill: var(--ac-v3-turquoise); }
.ac-v3-road--split .ac-v3-road__anchor--inruil[data-active="true"] > text { fill: #fff; }

/* Ping: korte puls op ELKE stip zodra die actief wordt (Nick 08-07). Doordat de
   stippen in reisvolgorde in de DOM staan, pingt het om-en-om van boven naar beneden
   mee met de scroll (koop geel links, inruil turquoise rechts). */
.ac-v3-road--split .ac-v3-road__ping { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ac-v3-road--split .ac-v3-road__anchor[data-active="true"] .ac-v3-road__ping {
  animation: ac-road-ping .6s var(--ac-v3-ease) 1;
}
@keyframes ac-road-ping {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.9); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-v3-road--split .ac-v3-road__ping { animation: none !important; }
}

/* "Je bent hier"-badge: alleen op de active card op service-pages,
   gerendered door road_section.ctp (homepage rendert geen badge). */

.ac-v3-road__card-title {
  font-family: var(--ac-v3-font-heading);
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
  color: var(--ac-v3-black);
}
.ac-v3-road__card-body {
  font-size: 12.5px;
  color: #5a5a5a;
  margin: 0;
  line-height: 1.45;
}
/* Mijlpaal-body als bullets (Nick 06-07) — zelfde typografie als de body, compact
   in de tijdlijnkaart; witruimte alleen tússen de bullets. */
.ac-v3-road__card-bullets {
  margin: 0;
  padding-left: 16px;
  font-size: 12.5px;
  color: #5a5a5a;
  line-height: 1.45;
}
.ac-v3-road__card-bullets li { margin: 0 0 5px; }
.ac-v3-road__card-bullets li:last-child { margin-bottom: 0; }

/* Mobile: collapse to vertical list */
@media (max-width: 760px) {
  .ac-v3-road__svg { display: none; }
  .ac-v3-road__card {
    position: static;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 12px;
    opacity: 1;
    transform: none;
  }
  /* Polish-iteratie 6: stage-height-override op mobile. PHP rendert inline
     height (~800px) gebaseerd op SVG-path-berekening voor desktop; op mobile
     stacken cards en kunnen ze de fixed-height overshooten waardoor de
     laatste card visueel in de final-CTA-band hangt (overlap per Nick).
     auto + last-card margin: 0 verzekert een schone overgang. */
  .ac-v3-road__stage {
    height: auto !important;
  }
  .ac-v3-road__card:last-child {
    margin-bottom: 0;
  }
  /* Twee proces-kolommen op mobiel (Bas 08-07): koop-kaarten tegen de LINKERkant,
     inruil-kaarten tegen de RECHTERkant, beide smaller. Zo blijven de twee
     processen ook zonder de (verborgen) wegen visueel gescheiden. De 2e selector
     bij inruil = hogere specificiteit dan de gedeelde active-reset, zodat de
     rechts-uitlijning ook in de ACTIEVE staat behouden blijft. */
  .ac-v3-road--columns .ac-v3-road__card--left {
    width: 78%;
    max-width: 360px;
    margin: 0 auto 12px 0;
  }
  .ac-v3-road--columns .ac-v3-road__card--inruil,
  .ac-v3-road--columns .ac-v3-road__card--right.ac-v3-road__card--inruil[data-active="true"] {
    width: 78%;
    max-width: 360px;
    margin: 0 0 12px auto;
    transform: none;
  }
  /* Feest (laatste stap) = volle breedte, gecentreerd onderaan (Nick 08-07). */
  .ac-v3-road--columns .ac-v3-road__card--center {
    left: auto;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 12px;
    transform: none;
  }
  /* 'perfecte auto' samen op de tweede regel op mobiel (Nick 08-07). */
  .ac-v3-road--columns .ac-v3-section-title .ac-v3-accent { white-space: nowrap; }
  /* Regelafstand kaart-body iets compacter op mobiel (Bas: stond hoog). */
  .ac-v3-road--split .ac-v3-road__card-body { line-height: 1.35; }
  .ac-v3-road { padding-bottom: 32px; }
}


/* ----------------------------------------------------------------------------
   12. Reviews (marquee + scores bar)
   ---------------------------------------------------------------------------- */

/* Hero-reviews — Upway-stijl 2-koloms: trust-block links + review-carousel
   rechts met prev/next-pijltjes. 3 cards visible op desktop, 1 op mobile.
   Native horizontal scroll-snap + JS scrollBy() voor de buttons. */
.ac-v3-hero-reviews {
  background: var(--ac-v3-white);
  padding: 24px 0 32px;
}
.ac-v3-hero-reviews__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.ac-v3-hero-reviews__layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 900px) {
  .ac-v3-hero-reviews { padding: 24px 0; }
  .ac-v3-hero-reviews__inner { padding: 0 20px; }
  .ac-v3-hero-reviews__layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Trust block (links) */
/* WS4: compacte 2-regel trust-block — single-source voor homepage + service-
   pagina's (gedeeld partial _v3_trust_block.ctp). Ongescoped zodat beide call-
   sites identiek compact zijn.
   Regel 1 (.__headline): ★★★★★ "Uitstekend beoordeeld"
   Regel 2 (.__meta):     {X}+ reviews · 9,8/10 + KV-logo · 4,8/5 + Google-logo */
.ac-v3-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
/* Feedback AC.nl (Bas/Nick 29-06): .ac-v3-trust__headline / __stars / __label
   (globale ★-rij + "Uitstekend beoordeeld") verwijderd — was "te much". */
.ac-v3-trust__meta {
  /* Feedback AC.nl (Bas/Nick 29-06): compacte inline cijferregel — totaal-reviews
     vóóraan, dan Klantenvertellen · Google. Was 3-zone-grid met aantal-in-midden
     (verwijderd per Bas). Gedeeld partial → homepage + alle servicepagina's. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 14px;
  font-size: 14px; /* feedback Nick: iets groter (was 13px) */
  color: var(--ac-v3-gray-700);
}
.ac-v3-trust__total strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ac-v3-black);
}
.ac-v3-trust__source {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ac-v3-gray-700);
  transition: color .15s var(--ac-v3-ease);
}
.ac-v3-trust__source:hover {
  color: var(--ac-v3-turquoise);
}
.ac-v3-trust__source strong {
  font-family: var(--ac-v3-font-heading);
  font-size: 15px; /* feedback Nick: scores iets groter highlighten */
  font-weight: 700;
  color: var(--ac-v3-black);
}
.ac-v3-trust__source-scale {
  font-size: 11.5px;
  color: var(--ac-v3-gray-500);
}
.ac-v3-trust__logo {
  display: inline-block;
  height: 16px; /* feedback Nick: logo's iets groter (was 14px) */
  width: auto;
  vertical-align: middle;
  margin-left: 1px;
}


/* Carousel (rechts) */
.ac-v3-reviews-carousel {
  position: relative;
  min-width: 0;
}
.ac-v3-reviews-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.ac-v3-reviews-carousel__viewport::-webkit-scrollbar { display: none; }
.ac-v3-reviews-carousel__track {
  display: flex;
  gap: 12px;
  /* Feedback AC.nl (Nick 29-06): cards huggen hun eigen content-hoogte i.p.v.
     stretchen naar de hoogste kaart → module-hoogte beweegt mee met de tekst,
     geen lege witruimte onder korte reviews (combineert met author margin-top:6px). */
  align-items: flex-start;
}
/* Card-link variant: hover-state, behoud van card-layout */
.ac-v3-review-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .15s var(--ac-v3-ease), transform .15s var(--ac-v3-ease);
}
.ac-v3-review-card--link:hover {
  background: var(--ac-v3-gray-50);
  transform: translateY(-2px);
}
.ac-v3-reviews-carousel__track .ac-v3-review-card {
  /* 3 visible op desktop met 2× 12px gap = 24px */
  flex: 0 0 calc((100% - 24px) / 3);
  width: auto;
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .ac-v3-reviews-carousel__track .ac-v3-review-card {
    /* 1 visible op tablet/mobile */
    flex: 0 0 100%;
  }
}

/* Nav-buttons — staan NU binnen .ac-v3-trust (links onder de scores).
   Op desktop: direct onder de "9,8 KV · 4,8 Google"-row. Op mobile:
   gecentreerd onder de hele trust-block (zelfde layout). */
.ac-v3-reviews-carousel__nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.ac-v3-reviews-carousel__btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ac-v3-radius-pill);
  background: var(--ac-v3-white);
  border: 1.5px solid var(--ac-v3-gray-300);
  color: var(--ac-v3-black);
  cursor: pointer;
  transition: border-color .15s var(--ac-v3-ease), color .15s var(--ac-v3-ease), opacity .15s;
}
.ac-v3-reviews-carousel__btn:hover:not([disabled]) {
  border-color: var(--ac-v3-turquoise);
  color: var(--ac-v3-turquoise);
}
.ac-v3-reviews-carousel__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Prev = mirror van rechtswijzende arrow */
.ac-v3-reviews-carousel__btn[data-ac-v3-carousel-prev] svg {
  transform: scaleX(-1);
}

/* Bas 18-06b: nav als direct kind van de carrousel = subtiele, flankerende
   pijlen aan de zijkanten van de review-kaart (i.p.v. de nav-cluster bovenin
   de trust-block). Raakt alleen de servicepagina-carrousel; de homepage heeft
   z'n nav binnen de trust-block (eigen inline-markup) en blijft ongemoeid. */
.ac-v3-reviews-carousel > .ac-v3-reviews-carousel__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Bas/Nick 18-06b: pijlen in de zij-marge, weg van de review-content. Combineert
     met extra kaart-padding op mobiel (zie hieronder) zodat ze de tekst niet
     raken. Negatieve offset = grid-gap (desktop) / schermrand (mobiel). */
  left: -20px;
  right: -20px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.ac-v3-reviews-carousel > .ac-v3-reviews-carousel__nav .ac-v3-reviews-carousel__btn {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--ac-v3-gray-200, #e2e8f0);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14);
}
/* Uitgeschakelde pijl (begin/eind van de rij) verbergen i.p.v. half-zichtbaar —
   houdt layout (space-between) intact en geeft een nette affordance. */
.ac-v3-reviews-carousel > .ac-v3-reviews-carousel__nav .ac-v3-reviews-carousel__btn[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* Reviews compacter op mobiel. Het trust-block is sinds WS4 standaard al een
   compacte 2-regel-layout (ongescoped) — de oude horizontale row-override op
   .ac-v3-service-v2 is daarmee overbodig en verwijderd. */
@media (max-width: 900px) {
  .ac-v3-service-v2 .ac-v3-hero-reviews__layout { gap: 14px; }

  /* WS3 (feedback Nick): subtiele edge-chevrons op mobiel — schone, RECHTE chevron
     via inline-SVG (de eerdere CSS-border-chevron oogde scheef/"gek"). Niet breder
     maar iets hoger. De review-kaart wordt bijna schermbreed; de chevrons zitten in
     een smalle strook links/rechts (niet over de tekst). Alleen de flankerende
     service-variant; de homepage-nav (binnen de trust-block) blijft ongemoeid.
     Data-attributen + disabled-toggling intact (JS-hook); [disabled]→opacity:0
     verbergt de chevron netjes aan begin/eind. */
  .ac-v3-reviews-carousel > .ac-v3-reviews-carousel__nav { left: 0; right: 0; }
  .ac-v3-reviews-carousel > .ac-v3-reviews-carousel__nav .ac-v3-reviews-carousel__btn {
    /* Feedback Nick ronde 5: chevron iets van de schermrand én van de tekst af. De
       knop = de volledige zij-strook (30px = de card-lees-padding); de glyph staat
       GECENTREERD in die strook (geen flex-start/end meer) → ~6px lucht naar de rand
       én ~6px naar de review-tekst. */
    width: 30px;
    height: 56px;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .ac-v3-reviews-carousel > .ac-v3-reviews-carousel__nav .ac-v3-reviews-carousel__btn svg { display: none; }
  .ac-v3-reviews-carousel > .ac-v3-reviews-carousel__nav .ac-v3-reviews-carousel__btn::before {
    content: "";
    width: 18px;  /* feedback Nick: chevrons fors groter (≈2× breed, 2× hoog ≈ 4× zo groot) */
    height: 40px;
    background: center / contain no-repeat;
    opacity: 0.85;
  }
  .ac-v3-reviews-carousel > .ac-v3-reviews-carousel__nav .ac-v3-reviews-carousel__btn[data-ac-v3-carousel-next]::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2024'%20fill='none'%20stroke='%231e293b'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='3%205%209%2012%203%2019'/%3E%3C/svg%3E");
  }
  .ac-v3-reviews-carousel > .ac-v3-reviews-carousel__nav .ac-v3-reviews-carousel__btn[data-ac-v3-carousel-prev]::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2024'%20fill='none'%20stroke='%231e293b'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='9%205%203%2012%209%2019'/%3E%3C/svg%3E");
  }

  /* Feedback Nick ronde 3: review-carrousel VOLLEDIGE schermbreedte op mobiel.
     Breekt uit de 20px inner-padding (full-bleed) zodat de kaart de hele breedte
     pakt; de chevrons staan dan tegen de schermrand (nav left/right:0 hierboven). */
  .ac-v3-service-v2 .ac-v3-hero-reviews .ac-v3-reviews-carousel {
    margin-left: -20px;
    margin-right: -20px;
  }
  /* Kaart full-bleed → lees-padding = de 30px chevron-strook, zodat de gecentreerde
     glyph (~6-24px) ~6px lucht houdt naar de review-tekst (feedback Nick ronde 5:
     pijl stond letterlijk tegen de tekst). Tekst nog steeds ruim breed (full-bleed). */
  .ac-v3-service-v2 .ac-v3-review-card { padding-left: 30px; padding-right: 30px; }
}

.ac-v3-review-card {
  width: 320px;
  flex: 0 0 320px;
  background: var(--ac-v3-white);
  border-radius: var(--ac-v3-radius-lg);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ac-v3-review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ac-v3-review-card__stars {
  display: flex;
  gap: 2px;
  color: var(--ac-v3-yellow);
}

.ac-v3-review-card__title {
  font-family: var(--ac-v3-font-heading);
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
  color: var(--ac-v3-black);
  line-height: 1.2;
  /* Title max 2 regels, truncate met ellipsis als langer */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ac-v3-review-card__body {
  font-size: 13px;
  color: var(--ac-v3-gray-700);
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Author block-layout: naam op eigen regel (bold), plaats + datum eronder (gray). */
.ac-v3-review-card__author {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Feedback AC.nl (Bas/Nick 29-06, punt 3): naam vlak onder de quote i.p.v.
     vastgepind onderaan (was margin-top:auto → groot gat bij korte reviews). */
  margin-top: 6px;
  padding-top: 2px;
  font-size: 12.5px;
  line-height: 1.3;
}
.ac-v3-review-card__name {
  font-weight: 700;
  color: var(--ac-v3-black);
}
.ac-v3-review-card__meta {
  font-size: 11.5px;
  color: var(--ac-v3-gray-500);
}


/* ----------------------------------------------------------------------------
   13. Team strip (horizontal marquee)
   ---------------------------------------------------------------------------- */

.ac-v3-team {
  background: var(--ac-v3-gray-50);
  padding: 64px 0;
  overflow: hidden;
}
.ac-v3-team__head {
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 0 40px;
  text-align: center;
}
.ac-v3-team__marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ac-v3-team__track {
  display: flex;
  gap: 28px;
  width: fit-content;
  padding: 4px 0;
  animation: ac-v3-team-scroll 50s linear infinite;
}
.ac-v3-team__marquee:hover .ac-v3-team__track {
  animation-play-state: paused;
}
@keyframes ac-v3-team-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ac-v3-team__member {
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ac-v3-team__avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--ac-v3-radius-pill);
  border: 3px solid var(--ac-v3-yellow);
  overflow: hidden;
  background: var(--ac-v3-turquoise-light);
}
.ac-v3-team__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ac-v3-team__name {
  font-family: var(--ac-v3-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--ac-v3-black);
}
.ac-v3-team__role {
  font-size: 11px;
  color: #8a8a8a;
  text-align: center;
}


/* ----------------------------------------------------------------------------
   14. FAQ accordion
   ---------------------------------------------------------------------------- */

.ac-v3-faq {
  background: var(--ac-v3-white);
  padding: 88px 40px;
}
.ac-v3-faq__inner {
  max-width: 880px;
  margin: 0 auto;
}
.ac-v3-faq__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ac-v3-faq__item {
  background: var(--ac-v3-white);
  border: 1px solid var(--ac-v3-gray-200);
  border-radius: var(--ac-v3-radius-md);
  overflow: hidden;
  transition: background .2s var(--ac-v3-ease);
}
.ac-v3-faq__item[data-open="true"] {
  background: var(--ac-v3-gray-50);
}
.ac-v3-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--ac-v3-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--ac-v3-black);
}
.ac-v3-faq__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: var(--ac-v3-radius-pill);
  background: #f0f0f0;
  color: var(--ac-v3-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s var(--ac-v3-ease);
}
[data-open="true"] .ac-v3-faq__icon {
  background: var(--ac-v3-turquoise);
  color: var(--ac-v3-white);
}
.ac-v3-faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ac-v3-ease);
}
[data-open="true"] .ac-v3-faq__panel {
  max-height: 400px;
}
.ac-v3-faq__answer {
  padding: 0 22px 22px;
  font-size: 14.5px;
  color: var(--ac-v3-gray-700);
  margin: 0;
  line-height: 1.6;
}
.ac-v3-faq__more {
  display: block;
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ac-v3-turquoise);
}


/* ----------------------------------------------------------------------------
   15. Final CTA (turquoise)
   ---------------------------------------------------------------------------- */

.ac-v3-finalcta {
  background: var(--ac-v3-turquoise);
  padding: 96px 40px 104px;
  position: relative;
  overflow: hidden;
}
.ac-v3-finalcta::before,
.ac-v3-finalcta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
}
.ac-v3-finalcta::before {
  top: -100px;
  left: -50px;
  width: 280px;
  height: 280px;
  background: rgba(255,198,43,0.18);
}
.ac-v3-finalcta::after {
  bottom: -120px;
  right: -60px;
  width: 320px;
  height: 320px;
  background: rgba(255,255,255,0.10);
  filter: blur(30px);
}
.ac-v3-finalcta__inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  color: var(--ac-v3-white);
}
.ac-v3-finalcta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--ac-v3-radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ac-v3-white);
  margin-bottom: 22px;
}
.ac-v3-finalcta__title {
  font-family: var(--ac-v3-font-heading);
  font-size: clamp(36px, 4.8vw, 60px);
  font-weight: 800;          /* extra zwaar — eerder gaf 700 met huidige Menco te dunne H */
  letter-spacing: -0.025em;
  margin: 0 auto 20px;
  line-height: 1.05;
  color: var(--ac-v3-white);
  text-wrap: balance;
  text-align: center;
}
.ac-v3-finalcta__sub {
  font-size: 18px;
  color: rgba(255,255,255,0.92);
  margin: 0 auto 36px;       /* meer ruimte richting de 3 option-cards */
  max-width: 580px;
  line-height: 1.55;
  text-align: center;
}
.ac-v3-finalcta__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 920px;
  margin: 0 auto 22px;
}
@media (max-width: 720px) {
  .ac-v3-finalcta__grid { grid-template-columns: 1fr; }
}
.ac-v3-finalcta__option {
  background: var(--ac-v3-white);
  color: var(--ac-v3-black);
  border-radius: var(--ac-v3-radius-lg);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}
.ac-v3-finalcta__option-label {
  font-family: var(--ac-v3-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ac-v3-black);
}
.ac-v3-finalcta__option-action {
  padding: 12px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  font-family: var(--ac-v3-font-heading);
  font-weight: 700;
}
.ac-v3-finalcta__option-action--turquoise {
  background: var(--ac-v3-turquoise);
  color: var(--ac-v3-white);
}
.ac-v3-finalcta__option-action--yellow {
  background: var(--ac-v3-yellow);
  color: var(--ac-v3-black);
}
.ac-v3-finalcta__contact-row {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.ac-v3-finalcta__contact-sep {
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  font-weight: 700;
}
.ac-v3-finalcta__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ac-v3-white);
  font-size: 15px;
  font-weight: 600;
  transition: opacity .15s var(--ac-v3-ease);
}
.ac-v3-finalcta__phone {
  transition: color .15s var(--ac-v3-ease);
}
.ac-v3-finalcta__phone:hover { color: var(--ac-v3-yellow); }
.ac-v3-finalcta__phone svg,
.ac-v3-finalcta__whatsapp-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-block;
}
.ac-v3-finalcta__hours {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}


/* ----------------------------------------------------------------------------
   16. Footer (dark)
   ---------------------------------------------------------------------------- */

.ac-v3-footer {
  background: var(--ac-v3-black);
  padding: 64px 40px 28px;
  color: var(--ac-v3-white);
}
.ac-v3-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* brand | Diensten (2-koloms, breder) | Bedrijf. "Overige"-kolom verwijderd
     (2026-05-29): de diensten staan nu in 2 kolommen onder 1 kop. */
  grid-template-columns: 1.4fr 1.8fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) {
  .ac-v3-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* Diensten-kolom: 8 service-pagina's in 2 sub-kolommen (kolom-flow: 4 rijen,
   dan door naar kolom 2). Dubbele-class selector (.col.col--services) zodat
   de specificity (0,2,1) hoger is dan de generieke .ac-v3-footer__col ul
   (0,1,1) verderop in de bron -> deze grid wint van diens display:flex. */
.ac-v3-footer__col.ac-v3-footer__col--services ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: 1fr 1fr;
  gap: 9px 32px;
}
@media (max-width: 540px) {
  /* Op smalle telefoons terug naar 1 kolom zodat lange labels niet breken. */
  .ac-v3-footer__col.ac-v3-footer__col--services ul {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 540px) {
  /* 2-koloms-mobile: brand-blok full-width bovenaan, 3 menu-kolommen
     daaronder in 2-koloms grid (Diensten | Overige op rij 1, Bedrijf op rij 2). */
  .ac-v3-footer__inner { grid-template-columns: 1fr 1fr; }
  .ac-v3-footer__inner > div:first-child { grid-column: 1 / -1; }
}
.ac-v3-footer__logo {
  height: 24px;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
}
.ac-v3-footer__tagline {
  font-family: var(--ac-v3-font-heading);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--ac-v3-white);
}
.ac-v3-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.75);
}
.ac-v3-footer__contact a {
  color: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-v3-footer__contact-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ac-v3-footer__hours {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.ac-v3-footer__social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.ac-v3-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: var(--ac-v3-radius-pill);
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-v3-white);
  transition: background .2s;
}
.ac-v3-footer__social a:hover {
  background: var(--ac-v3-turquoise);
}
.ac-v3-footer__col h4 {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--ac-v3-yellow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ac-v3-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ac-v3-footer__col a {
  color: rgba(255,255,255,0.75);
  font-size: 13.5px;
  transition: color .15s;
}
.ac-v3-footer__col a:hover {
  color: var(--ac-v3-yellow);
}
.ac-v3-footer__bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.ac-v3-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.ac-v3-footer__legal a {
  color: inherit;
  transition: color .15s;
}
.ac-v3-footer__legal a:hover {
  color: var(--ac-v3-yellow);
}


/* ----------------------------------------------------------------------------
   17. Mobile sticky CTA-bar + kenteken-overlay
   ----------------------------------------------------------------------------
   Sticky-bar verschijnt na ~600px scroll en blijft onderaan zichtbaar tot
   de Final-CTA in beeld komt. Alleen op mobile (<=768px).

   Overlay is universeel — wordt geopend door alle
   [data-ac-v3-kenteken-trigger] knoppen (mid-page strip + sticky-bar). */

.ac-v3-mobile-cta {
  display: none; /* desktop hidden */
}
@media (max-width: 768px) {
  .ac-v3-mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid var(--ac-v3-gray-200);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
    transform: translateY(110%);
    transition: transform .25s var(--ac-v3-ease);
  }
  .ac-v3-mobile-cta[data-visible="true"] {
    transform: translateY(0);
  }
  body[data-ac-v3-overlay-open="true"] .ac-v3-mobile-cta {
    transform: translateY(110%);
  }
}
.ac-v3-mobile-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 8px;
  font-family: var(--ac-v3-font-heading);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  border: 1.5px solid transparent;
  cursor: pointer;
  min-width: 0;
  line-height: 1.2;
}
.ac-v3-mobile-cta__btn--ghost {
  background: var(--ac-v3-white);
  color: var(--ac-v3-black);
  border-color: var(--ac-v3-gray-200);
}
.ac-v3-mobile-cta__btn--secondary {
  background: var(--ac-v3-white);
  color: var(--ac-v3-turquoise);
  border-color: var(--ac-v3-turquoise);
}
.ac-v3-mobile-cta__btn--primary {
  background: var(--ac-v3-turquoise);
  color: var(--ac-v3-white);
  border-color: var(--ac-v3-turquoise);
}
.ac-v3-mobile-cta__icon {
  display: inline-flex;
  flex: 0 0 16px;
}
.ac-v3-mobile-cta__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 360px) {
  .ac-v3-mobile-cta__label { font-size: 11.5px; }
}

/* Kenteken overlay (modal) */
.ac-v3-kenteken-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear .25s;
}
.ac-v3-kenteken-overlay[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.ac-v3-kenteken-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 28, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .2s var(--ac-v3-ease);
}
.ac-v3-kenteken-overlay[data-open="true"] .ac-v3-kenteken-overlay__backdrop { opacity: 1; }

.ac-v3-kenteken-overlay__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -45%);
  width: min(480px, calc(100vw - 32px));
  background: var(--ac-v3-white);
  border-radius: var(--ac-v3-radius-xl);
  padding: 32px 24px 28px;
  box-shadow: var(--ac-v3-shadow-xl);
  opacity: 0;
  transition: transform .25s var(--ac-v3-ease), opacity .25s var(--ac-v3-ease);
}
.ac-v3-kenteken-overlay[data-open="true"] .ac-v3-kenteken-overlay__panel {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.ac-v3-kenteken-overlay__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: var(--ac-v3-radius);
  cursor: pointer;
  color: var(--ac-v3-gray-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ac-v3-kenteken-overlay__close:hover { background: var(--ac-v3-gray-100); color: var(--ac-v3-black); }
.ac-v3-kenteken-overlay__title {
  font-family: var(--ac-v3-font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ac-v3-black);
}
.ac-v3-kenteken-overlay__sub {
  font-size: 14px;
  color: var(--ac-v3-gray-700);
  margin: 0 0 20px;
  line-height: 1.5;
}

/* Body scroll-lock when overlay open */
body[data-ac-v3-overlay-open="true"] { overflow: hidden; }

/* Reserveer ruimte onderaan zodat content niet onder de sticky-bar valt */
@media (max-width: 768px) {
  .ac-v3-finalcta { padding-bottom: 88px; }
}


/* ----------------------------------------------------------------------------
   17. Payback section — "Verdient zich dubbel-en-dwars terug"
   ----------------------------------------------------------------------------
   Splitscreen "Zelf doen vs Met Autocoach" (calculator + quote-strip
   verwijderd, Bas-handoff DEV-070/071). Tussen USPs en Road in index.ctp. */

.ac-v3-payback {
  background: var(--ac-v3-white);
  padding: 72px 24px 88px;
}
.ac-v3-payback__inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* --- Splitscreen tabel --------------------------------------------------- */

.ac-v3-payback__split {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ac-v3-payback__split-col {
  border-radius: var(--ac-v3-radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.ac-v3-payback__split-col--alone {
  background: var(--ac-v3-gray-100, #f5f5f5);
  border: 1px solid var(--ac-v3-gray-200);
}
.ac-v3-payback__split-col--coach {
  background: var(--ac-v3-turquoise-light);
  border: 1px solid #b8e6e6;
  position: relative;
}
.ac-v3-payback__split-col--coach::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--ac-v3-radius-xl);
  border: 2px solid var(--ac-v3-turquoise);
  pointer-events: none;
  opacity: 0.18;
}
.ac-v3-payback__split-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.ac-v3-payback__split-col--alone .ac-v3-payback__split-eyebrow { color: var(--ac-v3-gray-500); }
.ac-v3-payback__split-col--coach .ac-v3-payback__split-eyebrow { color: var(--ac-v3-turquoise-dark); }
.ac-v3-payback__split-title {
  font-family: var(--ac-v3-font-heading);
  font-weight: 800;
  font-size: 24px;
  color: var(--ac-v3-black);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.ac-v3-payback__split-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ac-v3-payback__split-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ac-v3-gray-700);
}
.ac-v3-payback__split-mark {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  margin-top: 1px;
}
.ac-v3-payback__split-col--alone .ac-v3-payback__split-mark {
  background: var(--ac-v3-gray-300, #d1d5db);
  color: var(--ac-v3-gray-700);
}
.ac-v3-payback__split-col--coach .ac-v3-payback__split-mark {
  background: var(--ac-v3-turquoise);
  color: var(--ac-v3-white);
}
.ac-v3-payback__split-footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed currentColor;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  font-size: 12px;
}
.ac-v3-payback__split-col--alone .ac-v3-payback__split-footer { border-top-color: var(--ac-v3-gray-300, #d1d5db); }
.ac-v3-payback__split-col--coach .ac-v3-payback__split-footer { border-top-color: rgba(0, 153, 153, 0.3); }
.ac-v3-payback__split-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ac-v3-gray-500);
  margin-bottom: 2px;
}
.ac-v3-payback__split-stat-value {
  font-family: var(--ac-v3-font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--ac-v3-black);
}

/* --- Mobile overrides ---------------------------------------------------- */

@media (max-width: 900px) {
  .ac-v3-payback__split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .ac-v3-payback { padding: 48px 16px 56px; }
  .ac-v3-payback__split-col { padding: 22px 18px; }
  .ac-v3-payback__split-title { font-size: 20px; }
  .ac-v3-payback__split-footer { grid-template-columns: 1fr 1fr; gap: 14px; }
}


/* ============================================================================
   18. Mobile refinements — spacing/typografie/breakpoint-finetuning
   ============================================================================
   V3-aesthetic schalen naar smalle viewports zonder de premium-vibe te
   verliezen. Generieke 88px section-padding wordt 48px, hero CTAs blijven
   tap-friendly, kenteken-box krijgt extra compactheid <420px. */

@media (max-width: 768px) {
  /* Section padding — desktop 88px is overmatig op mobile */
  .ac-v3-services { padding: 56px 20px 40px; }
  .ac-v3-usps     { padding: 48px 20px 56px; }
  .ac-v3-reviews  { padding: 56px 16px; }
  .ac-v3-faq      { padding: 56px 20px; }
  
  .ac-v3-team     { padding: 48px 0; }
  .ac-v3-team__head { padding: 0 20px; margin-bottom: 24px; }
  .ac-v3-finalcta { padding: 56px 20px 88px; }
  .ac-v3-road     { padding: 48px 20px 56px; }

  /* Hero compact */
  .ac-v3-hero__inner { padding: 32px 20px 48px; gap: 24px; }
  .ac-v3-hero__title { margin: 0 0 20px; }
  .ac-v3-hero__subtitle { margin: 0 0 28px; }

  /* Hero photo iets kleiner op smal scherm — verbetert verhouding */
  .ac-v3-hero__photo { max-height: 380px; aspect-ratio: 5/4; }

  /* Section heads compacter */
  .ac-v3-section-head { margin-bottom: 28px; }

  /* Services bento — tag-position niet over de tile */
  .ac-v3-tile { padding: 16px 18px; }
  .ac-v3-tile--hero { padding: 20px 22px; }
  .ac-v3-tile--hero .ac-v3-tile__title { font-size: 26px; }

  /* USPs verticaal stack — was al, maar gap compacter */
  .ac-v3-usps__grid { gap: 16px; }
  .ac-v3-usp { padding: 18px; }
  .ac-v3-usp__title { font-size: 19px; }

  /* Reviews scores-bar — verticaal stack op smal scherm */
  
  

  /* Final CTA hierarchie */
  .ac-v3-finalcta__title { margin: 0 0 12px; }
  .ac-v3-finalcta__sub { margin: 0 auto 22px; font-size: 16px; }
  .ac-v3-finalcta__grid { gap: 10px; }

  /* Footer footprint smaller */
  .ac-v3-footer { padding: 48px 20px 24px; }
  .ac-v3-footer__inner { gap: 28px; }

  /* Sticky-bar tap-targets bigger (44px iOS guideline) */
  .ac-v3-mobile-cta__btn { padding: 12px 4px; min-height: 44px; }

  /* FAQ tap-targets */
  .ac-v3-faq__trigger { padding: 16px 18px; min-height: 56px; }
  .ac-v3-faq__answer { padding: 0 18px 18px; }

  /* Drawer panel zelfde aandacht voor tap-targets */
  .ac-v3-mobile-drawer__link { min-height: 56px; padding: 12px 8px; }
  .ac-v3-mobile-drawer__sublink { min-height: 48px; padding: 14px 8px; }
}

/* Smaller phones: extra tightening + iconen kleiner */
@media (max-width: 420px) {
  .ac-v3-hero__title { font-size: 36px; }
  .ac-v3-hero__btn--hero { padding: 16px 18px; font-size: 15px; }

  /* Hero compact kenteken op zeer smal scherm — placeholder past niet */
  .ac-v3-kenteken--hero-compact .ac-v3-kenteken__input,
  .ac-v3-kenteken--hero-compact .ac-v3-kenteken__placeholder {
    font-size: 14px;
    padding: 0 8px;
  }
  .ac-v3-kenteken--hero-compact .ac-v3-kenteken__submit {
    font-size: 11px;
    padding: 0 4px 0 8px;
  }
  .ac-v3-kenteken--hero-compact .ac-v3-kenteken__submit-arrow {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  /* Section titles iets kleiner */
  .ac-v3-services__head { gap: 16px; }
  .ac-v3-services__head-link { font-size: 13px; }

  /* Bekend-van logos schalen mee */
  
}

/* iPhone SE / extra smal — drawer past nog */
@media (max-width: 360px) {
  .ac-v3-mobile-drawer__panel { width: 100vw; max-width: 100vw; }
  .ac-v3-hero__inner { padding: 24px 16px 40px; }
}


/* ============================================================================
   19. V3 ServicePages — V2 service-template Elements (Blok 2 foundation)
   ============================================================================
   Styling voor de orchestrator-template service_default_v3.ctp en zijn 8
   Elements onder src/Template/Element/V3/ServicePages/. Eerst doel: V2
   aankoopkeuring herkenbaar V3 op staging, polish in vervolgcommits.

   Sectie-scope: .ac-v3-service-v2 wrapper rond het body van de pagina,
   waardoor we section-padding kunnen aansturen zonder per Element padding
   te dupliceren. */

.ac-v3-service-v2 {
  --ac-v3-svc-section-py: 64px;
  --ac-v3-svc-max-width:  1100px;
}

.ac-v3-service-v2 > section {
  padding: var(--ac-v3-svc-section-py) 24px;
  /* Polish-iteratie 2 (2026-05-20): default wit voor alle service-pagina-secties.
     Elementen die kleur willen (situation = yellow-soft, final-CTA = turquoise)
     overschrijven dit zelf via hun eigen Element-CSS. De voorheen actieve
     odd/even-striping (white/gray-50) zorgde voor onbedoeld grijs op reviews,
     process en road; Nick wil overal een clean witte achtergrond. */
  background: var(--ac-v3-white);
}


/* ---------- task_hero ---------- */

/* Codex round 7 fix (2026-05-20 sessie-2): !important verwijderd.
   Selector verhoogd naar .ac-v3-service-v2 > .ac-v3-task-hero (0,2,0)
   zodat hij netjes wint van .ac-v3-service-v2 > section (0,1,1) zonder
   important. Mobile-override @ regel ~5393 heeft dezelfde selector +
   later source-order = wint voor padding (gradient erft door). */
.ac-v3-service-v2 > .ac-v3-task-hero {
  background: linear-gradient(180deg, var(--ac-v3-turquoise-light) 0%, var(--ac-v3-white) 100%);
  padding-top: 64px;
  padding-bottom: 24px;
}

.ac-v3-task-hero__inner {
  max-width: var(--ac-v3-svc-max-width);
  margin: 0 auto;
}

/* Split-screen modifier: tekst links, formulier rechts (blueprint §9.1). */
.ac-v3-task-hero__inner--split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  /* Polish-iteratie 10 (2026-05-20 sessie-2): align-items stretch zodat
     .ac-v3-task-hero__content de volledige hoogte van form-side overneemt.
     Combineert met .content { display: flex; flex-direction: column } en
     .bekendvan { margin-top: auto } om de bekend-van strip exact tegen de
     form-bottom uit te lijnen. */
  align-items: stretch;
}

/* Full-width modifier (aankoopservice 2026-05-21): geen inline form-side,
   content gecentreerd op de pagina. Form leeft als aparte sectie laag op de
   pagina (lead_form_full element). */
.ac-v3-task-hero__inner--full {
  display: flex;
  justify-content: center;
}
.ac-v3-task-hero__inner--full .ac-v3-task-hero__content {
  align-items: center;
  text-align: center;
  max-width: 760px;
}
.ac-v3-task-hero__inner--full .ac-v3-task-hero__title,
.ac-v3-task-hero__inner--full .ac-v3-task-hero__subtitle {
  text-align: center;
}
/* Bullets in full-width modus: 2 koloms blijven, gecentreerd onder de tekst */
.ac-v3-task-hero__inner--full .ac-v3-task-hero__bullets {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
/* CTA-cluster: primary + secondary naast elkaar (full-modus) */
.ac-v3-task-hero__inner--full .ac-v3-task-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
/* Bekend-van strip in full-modus blijft gecentreerd onder de CTAs */
.ac-v3-task-hero__inner--full .ac-v3-task-hero__bekendvan {
  justify-content: center;
  margin-top: 28px;
}


.ac-v3-task-hero__content {
  max-width: 720px;
  /* Polish-iteratie 10: flex-column zodat .bekendvan met margin-top: auto
     naar de onderkant gepusht wordt (aligning met form-side bottom). */
  display: flex;
  flex-direction: column;
}

/* Solo secondary-CTA krijgt eigen ademruimte want de primaire-CTA-wrapper is
   verdwenen in split-screen layout (primary actie zit nu rechts als form). */
.ac-v3-task-hero__inner--split .ac-v3-task-hero__cta--secondary {
  margin-top: 24px;
}

.ac-v3-task-hero__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-v3-turquoise-dark);
  margin-bottom: 16px;
}

.ac-v3-task-hero__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--ac-v3-black);
}

.ac-v3-task-hero__subtitle {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ac-v3-gray-700, #4a4a4a);
  margin: 0 0 28px;
  max-width: 620px;
}

.ac-v3-task-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Polish-iteratie 3: gap iets compacter (10→8px verticaal) en lijnhoogte
     omlaag (default 1.5/1.6 → 1.3) zodat de bullets als één strak rooster
     ogen i.p.v. losse paragrafen. Icon van 14→16px voor betere visuele
     balans met de tekst. */
  gap: 8px 24px;
  max-width: 620px;
}

.ac-v3-task-hero__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ac-v3-gray-700, #4a4a4a);
}

/* Polish-iteratie 6 (2026-05-20 sessie-2): bullets-gap nog ruimer. Vorige
   iteratie was 8px mobile / 14px desktop; per Nick wil hij OP BEIDE meer
   verticale lucht tussen USPs. Nieuwe waarden: 12px mobile / 18px desktop. */
.ac-v3-task-hero__bullets {
  gap: 12px 24px;
}
@media (min-width: 901px) {
  .ac-v3-task-hero__bullets {
    gap: 18px 28px;
  }
}

.ac-v3-task-hero__bullet-icon {
  color: var(--ac-v3-turquoise);
  flex: 0 0 auto;
  display: inline-flex;
  /* 3px top-margin centreert het 16px icoon optisch onder de capital-line van
     de 16px/1.4 tekst (regelhoogte ~22.4px; capital ~12px hoog vanaf top). */
  margin-top: 3px;
}

/* Polish-iteratie 7: 'Bekend van'-strip onder de USPs op desktop. Mobile-
   hidden via media-query verderop (mobile-hero blijft compact).
   Polish-iteratie 9 (2026-05-20 sessie-2): logo's groter (28→40px), gap
   tussen label en logo's kleiner (10→4px), grayscale + lichte opacity
   zodat de strip minder visueel concurreert met form/CTA. */
.ac-v3-task-hero__bekendvan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  /* Polish-iteratie 11 follow-up (2026-05-20 sessie-3): bekend-van NIET meer
     pinnen op content-column-bottom. Nick wil strip los van form-hoogte —
     hij stond te laag als form korter was, te hoog als form langer werd (na
     "Meer details" open). Nu fixed margin-top onder de USPs: strip volgt
     natuurlijke flow links, form rechts doet z'n eigen ding op natural height.
     Grid align-items:stretch op de split-row blijft staan voor andere
     verticale-uitlijning-doeleinden, maar bekend-van staat er los van.
     Margin 36 naar 20 naar 0 — Nick wil strip nóg dichter op USPs, 0px
     leunt op de USP-grid row-gap voor de visuele ademruimte. */
  margin-top: 0;
  max-width: 620px;
}
.ac-v3-task-hero__bekendvan-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ac-v3-gray-400, #9ca3af);
  text-transform: uppercase;
}
.ac-v3-task-hero__bekendvan-img {
  height: 40px;
  max-width: 400px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter .2s ease, opacity .2s ease;
}
.ac-v3-task-hero__bekendvan:hover .ac-v3-task-hero__bekendvan-img {
  filter: grayscale(0);
  opacity: 1;
}
@media (max-width: 900px) {
  /* Polish-iteratie 13 (2026-05-21): strip is weer zichtbaar op mobile per
     Nick. ANWB Ledenvoordeel is een sterke trust-anchor om weg te laten
     vallen op mobile waar conversie het belangrijkst is. Compacter dan
     desktop: kleinere logo-hoogte + smaller max-width + iets ademruimte
     boven om af te scheiden van de USPs-grid eronder.
     Vervolg (2026-05-21 sessie-3): bekend-van label + img horizontaal
     centreren (align-items: center) en margin-top 18→8 per Nick (10px minder). */
  .ac-v3-task-hero__bekendvan {
    margin-top: 8px;
    padding-top: 0;
    align-items: center;
  }
  .ac-v3-task-hero__bekendvan-label {
    font-size: 9px;
  }
  .ac-v3-task-hero__bekendvan-img {
    height: 28px;
    /* (2026-05-21 final): nu .ac-v3-task-hero__content `min-width: 0` heeft
       kan de cell shrinken naar grid-cel-breedte en is parent-100% wél
       definitief. Eenvoudige max-width: 100% volstaat. */
    max-width: 100%;
  }
}

.ac-v3-task-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.ac-v3-task-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.ac-v3-task-hero__cta--primary {
  background: var(--ac-v3-turquoise);
  color: var(--ac-v3-white);
  box-shadow: 0 10px 24px -12px rgba(0, 187, 187, 0.6);
}

.ac-v3-task-hero__cta--primary:hover {
  background: var(--ac-v3-turquoise-dark);
  transform: translateY(-1px);
}

.ac-v3-task-hero__cta--secondary {
  background: transparent;
  color: var(--ac-v3-black);
  border: 1px solid var(--ac-v3-gray-300);
}

.ac-v3-task-hero__cta--secondary:hover {
  border-color: var(--ac-v3-black);
}



/* ---------- faq (V2 ServicePages variant — bestaande homepage .ac-v3-faq
       is voor de homepage section; deze nieuwe class scopes per service-page) */

.ac-v3-faq__inner {
  max-width: 800px;
  margin: 0 auto;
}

.ac-v3-faq__title {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 32px;
  color: var(--ac-v3-black);
}

.ac-v3-faq__list {
  display: grid;
  gap: 12px;
}

.ac-v3-faq__item {
  background: var(--ac-v3-white);
  border: 1px solid var(--ac-v3-gray-200);
  border-radius: 12px;
  overflow: hidden;
}

.ac-v3-faq__question {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ac-v3-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ac-v3-faq__question::-webkit-details-marker { display: none; }

.ac-v3-faq__chevron {
  transition: transform 0.2s ease;
  color: var(--ac-v3-turquoise);
  flex: 0 0 auto;
  display: inline-flex;
}

.ac-v3-faq__item[open] .ac-v3-faq__chevron {
  transform: rotate(180deg);
}

.ac-v3-faq__answer {
  padding: 0 22px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ac-v3-gray-700, #4a4a4a);
}

.ac-v3-faq__answer p { margin: 0 0 10px; }
.ac-v3-faq__answer p:last-child { margin-bottom: 0; }


/* ---------- lead_form ---------- */


.ac-v3-lead-form {
  display: grid;
  /* Polish-iteratie 7: form compacter (16→12px gap tussen rows) per Nick. */
  gap: 12px;
}


.ac-v3-lead-form .input,
.ac-v3-lead-form .form-group {
  display: grid;
  gap: 6px;
  margin: 0;
}

.ac-v3-lead-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ac-v3-black);
}

.ac-v3-lead-form .input input, .ac-v3-lead-form .input textarea{
  width: 100%;
  /* Polish-iteratie 7: input-height compacter (12→10px vertical padding,
     15→14.5px font) — bewaart 'lekker te tappen' tap-target maar voelt
     visueel minder log. */
  padding: 10px 14px;
  border: 1px solid var(--ac-v3-gray-300);
  border-radius: 10px;
  font-size: 14.5px;
  font-family: inherit;
  background: var(--ac-v3-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ac-v3-lead-form .input input:focus, .ac-v3-lead-form .input textarea:focus{
  outline: none;
  border-color: var(--ac-v3-turquoise);
  box-shadow: 0 0 0 3px var(--ac-v3-turquoise-light);
}


/* Preview-banner (zelfde voor section + inline variant). */


/* Inline variant: compacter form-card in de hero-form-side. Geen losse
   max-width want de form-side van de hero bepaalt al de breedte. */


/* ---------- lead_form: commit 1 compactness + kenteken-field + micro-links ---------- */

/* Utility: visueel verbergen, blijft toegankelijk voor screen-readers + crawlers.
   Gescoped naar .ac-v3-root zodat het op pagina's die autocoach_v3.css laden
   maar legacy-markup hebben (autokopen-subdomein) geen bestaande .sr-only-
   elementen buiten de V3-chrome raakt. */
.ac-v3-root .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Placeholder-styling: zelfde font-size als input, iets lichter */
.ac-v3-lead-form .input input::placeholder, .ac-v3-lead-form .input textarea::placeholder{
  color: var(--ac-v3-gray-500);
  opacity: 1;
  font-size: inherit;
}

/* Kenteken-veld: plate-yellow + blauwe NL-flag-strip. Geen <form>-wrapper
   (zou nested form geven binnen het lead-form). Pure visual reuse. */
.ac-v3-lead-form__kenteken-field {
  display: flex;
  align-items: stretch;
  background: var(--ac-v3-plate-yellow);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ac-v3-gray-300);
  height: 48px;
  width: 100%;
}

.ac-v3-lead-form__kenteken-flag {
  background: var(--ac-v3-plate-blue);
  width: 38px;
  flex: 0 0 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--ac-v3-white);
}

.ac-v3-lead-form__kenteken-flag-stars {
  display: block;
  width: 22px;
  height: 14px;
}

.ac-v3-lead-form__kenteken-flag-stars circle {
  fill: var(--ac-v3-plate-yellow);
}

.ac-v3-lead-form__kenteken-flag-text {
  font-family: Arial, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ac-v3-white);
}

.ac-v3-lead-form__kenteken-input {
  flex: 1;
  border: 0;
  background: transparent;
  /* Polish-iteratie 6: text-align center voelde "rechts van het midden"
     omdat de blauwe NL-flag links 38px van het frame opslokt. text-align
     left + grotere padding-left compenseert: tekst start visueel meer
     naar links van het midden van het hele kenteken-frame. */
  padding: 0 16px 0 24px;
  font-family: var(--ac-v3-font-heading, "MencoV3", system-ui, sans-serif);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-v3-black);
  text-align: left;
}

.ac-v3-lead-form__kenteken-input:focus {
  outline: none;
  background: rgba(255,255,255,0.4);
}

.ac-v3-lead-form__kenteken-input::placeholder {
  color: var(--ac-v3-gray-600, #6b7280);
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

/* "Meer details (optioneel)"-toggle */


/* Polish-iteratie 3 (2026-05-20 sessie-2): smoothe expand/collapse via
   max-height + opacity transitions i.p.v. instant hidden-attribuut. Per
   Nick's feedback voelde de toggle 'bam, bam' — nu vloeiend in ~320ms.
   Display blijft 'grid' om sub-grid layout van de inputs te behouden;
   overflow:hidden + max-height:0 verstoppen de inhoud bij closed-state.
   visibility:hidden voorkomt dat tab/screen-reader bij closed-state in
   de velden landen (a11y), met 0s delay bij open en 320ms bij close. */


/* ---------- Lead-form addon row (Aviloo upsell, polish-iteratie 11 sessie-3) ----------
   Compact rij met checkbox + label + info-tooltip. Visueel onderscheidend
   van de andere optionele velden via turquoise-light bg (signaalwaarde:
   "extra service"). Alleen gerendered binnen .ac-v3-lead-form__more-fields. */
.ac-v3-lead-form__addon {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--ac-v3-turquoise-light);
  border: 1px solid #cfeeef;
  border-radius: 12px;
}
.ac-v3-lead-form__addon-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ac-v3-black);
}
.ac-v3-lead-form__addon-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid var(--ac-v3-gray-400, #9ca3af);
  border-radius: 4px;
  background: var(--ac-v3-white);
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.ac-v3-lead-form__addon-checkbox:hover {
  border-color: var(--ac-v3-turquoise);
}
.ac-v3-lead-form__addon-checkbox:checked {
  background: var(--ac-v3-turquoise);
  border-color: var(--ac-v3-turquoise);
}
.ac-v3-lead-form__addon-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--ac-v3-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ac-v3-lead-form__addon-checkbox:focus-visible {
  outline: 2px solid var(--ac-v3-turquoise);
  outline-offset: 2px;
}
.ac-v3-lead-form__addon-text {
  display: inline;
}
.ac-v3-lead-form__addon-price {
  font-weight: 700;
  color: var(--ac-v3-turquoise-dark);
  white-space: nowrap;
}


/* (Anker-override voor de addon-tip is 2026-06-12 verwijderd: de popup is
   nu een fixed gecentreerde modal-kaart die aan het overflow:hidden-panel
   ontsnapt — flippen/right-anchoren is niet meer nodig.) */
@media (max-width: 480px) {
  .ac-v3-lead-form__addon {
    padding: 10px 12px;
    gap: 4px;
  }
  .ac-v3-lead-form__addon-label {
    font-size: 13.5px;
    gap: 8px;
  }
}


/* ===========================================================================
   Polish-iteratie 4 additions (2026-05-20 sessie-2) — resterend na cleanup
   2026-07-02: sticky-CTA scroll-driven visibility (data-visible) + hoogte.
   =========================================================================== */

/* ---------- mini-CTA onder FAQ ----------
   Polish-iteratie 6: compacter (was 8/56 padding-top/bottom, voelde
   'zwevend' onder de FAQ-lijst per Nick). Nu krapper aansluiten op FAQ
   einde + minder lucht voor de footer. */


/* ---------- sticky-CTA scroll-driven visibility + tighter ----------
   Polish-iteratie 4: was 'altijd zichtbaar op mobile' (display: flex via
   media query). Nu hidden by default; JS (initStickyServiceCTA) zet
   data-visible="true" zodra hero out-of-view EN final-CTA niet in-view.
   Voorkomt accidenteel-bellen tijdens scrollen + bovenaan/onderaan-pagina
   waar het sticky-element overbodig is. */
.ac-v3-sticky-cta {
  /* Padding iets tighter zodat bar minder hoog is */
  padding: 8px 14px 10px;
  /* Default: niet zichtbaar; JS zet data-visible="true" om te tonen.
     +36px extra zodat de bar én zijn top-schaduw volledig wegduiken (geen
     sliver onderaan bij de final-CTA / bovenaan de pagina). */
  transform: translate3d(0, calc(100% + 36px), 0);
  transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.ac-v3-sticky-cta[data-visible="true"] {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
/* ---------- report-preview carousel arrows (polish-iteratie 4) ---------- */


/* Prev-button gebruikt hetzelfde arrow-right icon, draaien via CSS. */


/* Auto-play state — visueel niets, JS leest data-autoplay om interval-timer
   te starten/pauzeren. Mouse-over op gallery pauzeert auto-play. */


@media (max-width: 900px) {
  /* Codex round 6 fix: mobile ComparisonBlock rules zijn samengevoegd in het
     LATER @media-block (lijn ~5020+) zodat ze niet overschreven worden door
     source-order. Hier alleen FAQ + nav-button overrides die niet conflicteren. */

  /* FAQ top-margin op mobile (polish-iteratie 4): boven de FAQ was bijna
     geen lucht tussen het turquoise final-CTA-blok en de FAQ-sectie.
     Geef de FAQ-sectie extra top-padding op mobile zodat het visueel los
     komt van de daarboven gelegen sectie. */
  .ac-v3-faq { padding-top: 40px; padding-bottom: 24px; }
  /* Polish-iteratie 6: mini-CTA mobile padding-bottom compacter (was 56→24px). */
  

  /* Carousel-nav iets compacter op mobile */
  

  /* Polish-iteratie 7: price-note móet op 1 regel passen incl. i-icon.
     Smaller font + krappere tooltip-trigger + ietsje meer ademruimte aan
     beide zijden voor centrering. Op iPhone SE-grootte (320px) blijft het
     dankzij white-space: nowrap zichtbaar via horizontal-scroll-fallback
     (acceptabel edge case voor ~3% van mobile devices). */
  
  
  
  
}

/* Vanafprijs-note boven submit */


/* Submit-disabled span voor preview-mode (geen <button type=submit> renderen,
   garandeert dat zelfs een JS-patch geen submission triggert) */


/* Micro-links onder submit: voorbeeldrapport + bel */


/* ---------- sticky_cta (mobile-only) ---------- */

.ac-v3-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ac-v3-white);
  /* Hairline-rand i.p.v. box-shadow: een blur-schaduw op een fixed bar wordt op
     iOS WebKit elke scroll-frame opnieuw geschilderd en is dé bron van het
     'trillen'. Een rand scheidt de bar zonder repaint. */
  border-top: 1px solid #e2e8f0;
  /* Volgorde: top right bottom left. Safe-area-insets staan klaar voor
     viewport-fit=cover; zonder cover zijn ze 0 en vangt de browser zelf de
     iPhone home-indicator-strook af. */
  padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left));
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 50;
  /* Statische GPU-laag (translate3d in de transform-states) houdt de bar als
     gecachte textuur. Géén will-change (dat ververst de laag elke frame) en
     géén box-shadow (repaint-bron) — beide voedden de jitter. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Default (bv. aankoopkeuring): primaire CTA + losse bel-knop ernaast. */
.ac-v3-sticky-cta__primary {
  flex: 1 1 auto;
  background: var(--ac-v3-turquoise);
  color: var(--ac-v3-white);
  padding: 12px 22px;
  border-radius: 10px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
}
/* Aankoopservice: bel-knop onderdrukt (zit in de header), dus 'Regel direct' is
   de enige knop -> gecentreerde pill met marge aan weerskanten. */
.ac-v3-sticky-cta__primary:only-child {
  flex: 0 1 auto;
  min-width: 60%;
}
.ac-v3-sticky-cta__phone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--ac-v3-white);
  color: var(--ac-v3-turquoise-dark);
  border: 1.5px solid var(--ac-v3-turquoise);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.ac-v3-sticky-cta__phone-icon {
  display: inline-flex;
  color: var(--ac-v3-turquoise);
  /* Eigen pixel-gesnapte laag tegen sub-pixel shimmer van het SVG op iOS. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}
.ac-v3-sticky-cta__phone-text {
  white-space: nowrap;
}





/* ---------- ServicePages mobile refinements ---------- */

@media (max-width: 900px) {
  .ac-v3-service-v2 { --ac-v3-svc-section-py: 48px; }
  .ac-v3-task-hero__title { font-size: 36px; }
  .ac-v3-task-hero__subtitle { font-size: 17px; }
  .ac-v3-task-hero__bullets { grid-template-columns: 1fr; }
  /* Compacte hero op mobiel: overflow-bullets (boven de config-limiet)
     verbergen zodat het formulier sneller in beeld komt. Desktop toont alles.
     Selector incl. `li` zodat hij wint van `.ac-v3-task-hero__bullets li`
     (display:flex, specificiteit 0,1,1). */
  .ac-v3-task-hero__bullets li.ac-v3-task-hero__bullet--mobile-hidden { display: none; }
  /* Polish-iteratie 13 vervolg #4 (2026-05-21): minmax(0, 1fr) i.p.v. 1fr
     omdat default 1fr expandeert naar minmax(auto, 1fr) — track-minimum is
     dan de min-content van het largest item, niet 0. Dat liet content-cell
     uitrekken naar 354px op een 312px inner. minmax(0, 1fr) forceert
     track-minimum: 0, dus cel = beschikbare ruimte (312). Definitieve fix
     voor de mobile bekend-van/content cell-overflow series. */
  .ac-v3-task-hero__inner--split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Polish-iteratie 13 vervolg #2 (2026-05-21): scope-correctie per Nick.
     Vorige iteraties centreerden alle hero-elementen op mobile, maar Nick
     wilde alleen de bekend-van strip centreren. Eyebrow, headline, subtitle,
     en USPs blijven links-uitgelijnd (default). Alleen .ac-v3-task-hero__bekendvan
     krijgt align-items:center voor label+logos horizontaal centreren (zie
     mobile-rule hierboven bij .__bekendvan).
     Vervolg #3: min-width: 0 op het grid-item .__content om de default
     grid-item-min-width-auto te overschrijven. Anders kan content niet
     shrinken onder z'n min-content (= img-width), wat de cell-overflow van
     354 op een 312px cell veroorzaakte. Standaard fix voor grid-items met
     intrinsic-sized children. */
  .ac-v3-task-hero__content { min-width: 0; }
  
  
  
  
  
  
  
  
  /* Polish-iteratie 8 (2026-05-20 sessie-2): card-cohesion (border + bg +
     box-shadow + padding) verwijderd per Nick — voelde te druk ("kaart-in-
     kaart-in-kaart" feel). Row blijft layout-mode-switch (flex column),
     visueel rustig (geen background, geen border, geen shadow). De cells +
     topic-pill behouden hun eigen styling. */
  
  
  /* Polish-iteratie 9 (2026-05-20 sessie-2): pill-vorm achtergrond verwijderd
     per Nick. Topic is nu plain centered tekst (geen turquoise-light bg, geen
     border-radius pil). Voelt rustiger samen met de transparent rows van
     iteratie 8. */
  
  
  
  /* Meer ademruimte tussen rijen nu de card-frames weg zijn, anders lopen
     de feature-groepen visueel in elkaar over. */
  
}

@media (max-width: 768px) {
  /* WS2: de servicepagina sticky bottom-CTA is op RENDER-niveau uitgeschakeld
     (service_default_v3.ctp rendert geen .ac-v3-sticky-cta meer), dus de
     gereserveerde .ac-v3-service-v2 padding-bottom:80px is verwijderd.
     De display:flex-show-rule blijft WEL staan: op mobiele VDP-pagina's rendert
     detail.ctp óók een .ac-v3-sticky-cta (data-ac-vdp-sticky) die hierop leunt
     (Codex P2 — anders verdween de VDP-bottombar). Op servicepagina's matcht
     deze regel nu niets meer (geen element in de DOM). */
  .ac-v3-sticky-cta { display: flex; }
}


/* ===========================================================================
   Polish-iteratie 2 additions (2026-05-20)
   - .ac-v3-tooltip       : prijs-disclaimer popover (* trigger + content)
   - .ac-v3-process-steps__cta-wrap / __cta : scroll-to-form button onderaan
                                              process-steps blok
   - .ac-v3-final-cta     : nieuwe final-CTA-sectie onderaan service-pagina's
                            (homepage-stijl turquoise volle bg, 2 option-cards)
   - mobile-hero compacter, mobile-FAQ font/line-height
   =========================================================================== */

/* ---------- tooltip-component (prijs-disclaimer) ---------- */
.ac-v3-tooltip {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
}
/* Polish-iteratie 3 (2026-05-20 sessie-2): trigger is turquoise i-icoon
   (was grijs sterretje). Tap-target 28×28px voldoet aan WCAG 2.5.5 (touch
   target ≥24px) en is duim-friendly op mobile. Visueel zit het icoon
   binnen die tap-zone als 16×16px met witte achtergrond. */
.ac-v3-tooltip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ac-v3-turquoise);
  vertical-align: middle;
  font: inherit;
  line-height: 1;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.ac-v3-tooltip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--ac-v3-turquoise);
  transition: color .15s ease, transform .15s ease;
}
.ac-v3-tooltip__trigger:hover {
  background: var(--ac-v3-turquoise-light);
}
.ac-v3-tooltip__trigger:hover .ac-v3-tooltip__icon,
.ac-v3-tooltip__trigger[aria-expanded="true"] .ac-v3-tooltip__icon {
  color: var(--ac-v3-turquoise-dark);
}
.ac-v3-tooltip__trigger[aria-expanded="true"] {
  background: var(--ac-v3-turquoise-light);
}
.ac-v3-tooltip__trigger:focus-visible {
  outline: 2px solid var(--ac-v3-turquoise);
  outline-offset: 2px;
}
/* I'tje-popup = modal-kaart (Nick 2026-06-12, DEV-040): zelfde stijl als de
   VDP info_modal — gecentreerde witte kaart met sluitknop en backdrop — i.p.v.
   het kleine zwarte anker-popover. span-prefix (0,1,1) zodat oude anker-
   overrides elders in de file (zelfde of lagere specificiteit) niet winnen.
   white-space: normal blijft nodig — parent price-note heeft nowrap die
   anders doorerft. JS-edge-detection is hiermee obsolete (positionPopup
   poetst alleen nog legacy inline-transforms weg). */
span.ac-v3-tooltip__popup {
  position: fixed;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%, -50%);
  z-index: 95;
  display: block;
  width: min(420px, calc(100vw - 48px));
  max-width: none;
  max-height: 70vh;
  overflow-y: auto;
  white-space: normal;
  padding: 20px 44px 16px 20px;
  background: var(--ac-v3-white);
  color: var(--ac-v3-black, #1a1a1a);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35);
  pointer-events: auto;
}
span.ac-v3-tooltip__popup::after { display: none; }
span.ac-v3-tooltip__popup[hidden] { display: none; }
/* Alinea's in lange tooltips (Nick 06-07): tekst met lege-regel-scheiding rendert als
   losse .ac-v3-tooltip__para block-spans; witruimte alleen TUSSEN de alinea's. */
span.ac-v3-tooltip__popup .ac-v3-tooltip__para { display: block; }
span.ac-v3-tooltip__popup .ac-v3-tooltip__para + .ac-v3-tooltip__para { margin-top: 0.7em; }
/* Optionele kop in de i-popup (Feedback AC.nl #9 / "Info button": opzet titel +
   tekst). Zelfde stijl als de subdomein-modaltitel (.portal-request-modal
   .modal-title) zodat de popup-opzet hoofddomein én subdomein identiek is. */
.ac-v3-tooltip__title {
  display: block;
  font-family: var(--ac-v3-font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ac-v3-black, #1a1a1a);
  margin: 0 0 6px;
}
/* Backdrop achter de open popup (door JS aangemaakt en getoond). */
.ac-v3-tooltip-backdrop {
  position: fixed;
  inset: 0;
  z-index: 94;
  /* Feedback AC.nl (Nick 29-06): i-popup dimde de hele sectie 'grijs' (oogde als bug).
     Backdrop nu vrijwel onzichtbaar (vangt nog wel klik-buiten-om-te-sluiten); de popup
     leest als losstaand via z'n eigen schaduw. */
  background: rgba(15, 23, 42, 0.08);
}
.ac-v3-tooltip-backdrop[hidden] { display: none; }
/* Sluitknop: altijd zichtbaar in de modal-kaart (JS injecteert 'm waar de
   markup-route 'm niet zelf rendert). */
.ac-v3-tooltip__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ac-v3-gray-100, #f1f5f9);
  color: var(--ac-v3-black, #1a1a1a);
  cursor: pointer;
}
.ac-v3-tooltip__close:hover { background: var(--ac-v3-gray-200, #e2e8f0); }
/* Brede 'Sluiten'-knop onderin de modal (Bas 18-06): náást het kruisje
   rechtsboven óók een duidelijke, duim-vriendelijke sluitknop. Door JS
   geïnjecteerd (zelfde route als het kruisje). Negatieve right-margin (-24px)
   compenseert de extra right-padding (44px) van de kaart zodat de knop
   symmetrisch (20/20) uitlijnt. */
.ac-v3-tooltip__close-wide {
  display: block;
  width: fit-content;
  min-width: 140px;
  /* Gecentreerd (Bas 18-06b). De kaart heeft asymmetrische padding (44px rechts
     voor het kruisje, 20px links); left:12px compenseert die 24px zodat de knop
     echt in het midden van de popup staat i.p.v. links. */
  margin: 16px auto 2px;
  position: relative;
  left: 12px;
  padding: 12px 28px;
  border: 0;
  border-radius: 10px;
  background: var(--ac-v3-turquoise, #00bbbb);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease;
}
.ac-v3-tooltip__close-wide:hover { background: var(--ac-v3-turquoise-dark, #009999); }
.ac-v3-tooltip__close-wide:focus-visible {
  outline: 2px solid var(--ac-v3-turquoise-dark, #009999);
  outline-offset: 2px;
}
/* Mobiele variant (Bas 18-06): GEEN bottom-sheet onderin meer. De bezoeker
   scrolt met de telefoon in de hand en wil de uitleg hóger in beeld. Boven het
   midden (top:16%), volle breedte met 12px marge. De grote Sluiten-knop is met
   de duim bereikbaar. (Vervangt de DEV-040 bottom-sheet uit 2026-06-11.) */
@media (max-width: 720px) {
  span.ac-v3-tooltip__popup {
    /* Nick 22-06b: verticaal gecentreerd (was top:16%), gelijk aan desktop én de
       subdomein-info-modal. Eén stramien voor alle 'i'-popups. (Vervangt de
       eerdere Bas top:16%-positie.) */
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    /* Feedback AC.nl (Nick 29-06): i-popup op mobiel iets smaller (was 100vw-24)
       zodat hij niet tot vlak tegen de schermranden loopt. */
    width: min(420px, calc(100vw - 40px));
    max-height: 80vh;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.35);
  }
}

/* ===========================================================================
   Subdomein info-popup (Portal Bootstrap-modal, info_modal.ctp) -> zelfde V3-
   kaart-stramien als de hoofddomein-tooltip hierboven (Nick 22-06b: 1 stramien,
   gecentreerde witte kaart, verticaal gecentreerd). De modal is via Bootstrap al
   modal-dialog-centered; deze overrides brengen alleen de LOOK gelijk.
   =========================================================================== */
.portal-request-modal .modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  color: var(--ac-v3-black, #1a1a1a);
  font-family: var(--ac-v3-font-body, inherit);
}
.portal-request-modal .modal-header {
  border-bottom: 0;
  padding: 20px 20px 0;
  align-items: flex-start;
}
.portal-request-modal .modal-title {
  font-family: var(--ac-v3-font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ac-v3-black, #1a1a1a);
}
.portal-request-modal .modal-body {
  padding: 12px 20px 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ac-v3-black, #1a1a1a);
  text-align: left;
}
.portal-request-modal .modal-body p { margin: 0 0 10px; }
/* Kruisje rechtsboven -> rond grijs knopje (gelijk aan .ac-v3-tooltip__close) */
.portal-request-modal .btn-close {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: var(--ac-v3-gray-100, #f1f5f9);
  opacity: 1;
  background-size: 12px;
}
.portal-request-modal .btn-close:hover { background-color: var(--ac-v3-gray-200, #e2e8f0); }
/* 'Sluiten'-knop onderin -> brede turquoise V3-knop (gelijk aan __close-wide) */
.portal-request-modal .modal-body .btn-primary {
  display: block;
  width: fit-content;
  min-width: 140px;
  margin: 16px auto 2px;
  padding: 12px 28px;
  border: 0;
  border-radius: 10px;
  background: var(--ac-v3-turquoise, #00bbbb);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.portal-request-modal .modal-body .btn-primary:hover { background: var(--ac-v3-turquoise-dark, #009999); }

/* ---------------------------------------------------------------------------
   VDP-voertuiginfo-modals (.step-row-info-modal: spec-rows + terugroepacties).
   Feedback AC.nl (Nick 29-06): gelijktrekken met de V3 info-popup-stijl
   (.portal-request-modal). Hadden default Bootstrap-look — hoge uitlijning (geen
   modal-dialog-centered → nu in de markup toegevoegd) + ruime regelafstand.
   Afwijkende structuur: titel (<h3>/<h5>) + close (<a class="close">) + Sluiten
   (<a class="btn-primary">) staan ALLE in .modal-body (geen .modal-header).
   --------------------------------------------------------------------------- */
.step-row-info-modal .modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35);
  color: var(--ac-v3-black, #1a1a1a);
  font-family: var(--ac-v3-font-body, inherit);
}
.step-row-info-modal .modal-body {
  position: relative;
  padding: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ac-v3-black, #1a1a1a);
  text-align: left;
}
.step-row-info-modal .modal-body h3,
.step-row-info-modal .modal-body h5 {
  font-family: var(--ac-v3-font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ac-v3-black, #1a1a1a);
  margin: 0 0 10px;
  padding-right: 32px; /* ruimte voor het kruisje rechtsboven */
}
.step-row-info-modal .modal-body p { margin: 0 0 10px; }
.step-row-info-modal .modal-body .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 50%;
  background: var(--ac-v3-gray-100, #f1f5f9);
  color: var(--ac-v3-black, #1a1a1a);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  opacity: 1;
  text-shadow: none;
}
.step-row-info-modal .modal-body .close:hover { background: var(--ac-v3-gray-200, #e2e8f0); }
.step-row-info-modal .modal-body .btn-primary {
  display: block;
  width: fit-content;
  min-width: 140px;
  margin: 16px auto 2px;
  padding: 12px 28px;
  border: 0;
  border-radius: 10px;
  background: var(--ac-v3-turquoise, #00bbbb);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.step-row-info-modal .modal-body .btn-primary:hover { background: var(--ac-v3-turquoise-dark, #009999); }

/* Subdomein info-trigger ('i') -> zelfde tap-target + hover als de hoofddomein
   V3-tooltip-trigger (.ac-v3-tooltip__trigger): 28×28 ronde duim-zone, turquoise
   hover-vlak, focus-ring. Compound .info-icon.portal-as-info scope't ALLEEN de
   info_modal-knop (Portal/info_modal.ctp). De filter-/voorselectie-.portal-as-info
   (zónder .info-icon) blijft ongemoeid; #specificaties houdt zijn eigen 18px-override.
   Feedback AC.nl #9 (Nick): i'tjes overal gelijk, ook in VDP. */
.info-icon.portal-as-info {
  width: 28px;
  height: 28px;
  margin: 0 0 0 4px;
  border-radius: 999px;
  color: var(--ac-v3-turquoise);
  vertical-align: middle;
  transition: background .15s ease, color .15s ease;
}
.info-icon.portal-as-info:hover { background: var(--ac-v3-turquoise-light); }
.info-icon.portal-as-info:focus-visible {
  outline: 2px solid var(--ac-v3-turquoise);
  outline-offset: 2px;
}
.info-icon.portal-as-info .info-icon-img { width: 16px; height: 16px; }

/* ---------- process_steps scroll-to-form CTA ---------- */


/* ---------- final_cta (turquoise-vol, 2 option-cards) ---------- */
/* Polish-iteratie 8 (2026-05-20 sessie-2): !important verwijderd; specificity
   verhoogd via parent-selector zodat de turquoise bg en padding netjes winnen
   van de service-v2-section-default zonder importance-hack. Padding kleiner
   per Nick (80/88 → 48/56). */
.ac-v3-service-v2 > .ac-v3-final-cta {
  background: var(--ac-v3-turquoise);
  padding: 48px 24px 56px;
  color: var(--ac-v3-white);
  text-align: center;
}
.ac-v3-final-cta__inner {
  max-width: var(--ac-v3-svc-max-width);
  margin: 0 auto;
}
.ac-v3-final-cta__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--ac-v3-white);
  margin: 0 0 18px;
}
.ac-v3-final-cta__title {
  font-family: var(--ac-v3-font-heading);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ac-v3-white);
}
.ac-v3-final-cta__title .ac-v3-punt { color: var(--ac-v3-yellow); }
.ac-v3-final-cta__subtitle {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 auto 36px;
  max-width: 580px;
}
.ac-v3-final-cta__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.ac-v3-final-cta__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 22px 20px;
  background: var(--ac-v3-white);
  color: var(--ac-v3-black);
  text-align: left;
  text-decoration: none;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.0);
  box-shadow: 0 18px 32px -22px rgba(0, 0, 0, 0.25);
  transition: transform .18s var(--ac-v3-ease), box-shadow .18s var(--ac-v3-ease);
}
.ac-v3-final-cta__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.30);
}
.ac-v3-final-cta__card--primary {
  background: var(--ac-v3-yellow);
}
.ac-v3-final-cta__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ac-v3-turquoise-light);
  color: var(--ac-v3-turquoise-dark);
  flex: 0 0 auto;
}
.ac-v3-final-cta__card--primary .ac-v3-final-cta__card-icon {
  background: rgba(0, 0, 0, 0.10);
  color: var(--ac-v3-black);
}
.ac-v3-final-cta__card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}
.ac-v3-final-cta__card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ac-v3-black);
  letter-spacing: -0.01em;
}
.ac-v3-final-cta__card-text {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ac-v3-gray-700, #4a4a4a);
}
.ac-v3-final-cta__card-cta {
  margin-top: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ac-v3-turquoise-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ac-v3-final-cta__card--primary .ac-v3-final-cta__card-cta {
  color: var(--ac-v3-black);
}
.ac-v3-final-cta__card-arrow {
  transition: transform .15s ease;
}
.ac-v3-final-cta__card:hover .ac-v3-final-cta__card-arrow {
  transform: translateX(3px);
}

/* ---------- Mobile refinements polish-iteratie 2 ---------- */
@media (max-width: 900px) {
  /* Polish-iteratie 7 (2026-05-20 sessie-2): de eerdere `.ac-v3-task-hero
     { padding-top: 4px }` rule had te lage specificiteit; `.ac-v3-service-v2
     > section { padding: 48px 24px }` overrulede hem. Hier nu via parent-
     selector zodat we WEL boven die 48px uitkomen. Tegelijkertijd ook
     padding-bottom op hero verkleind én reviews padding-top zodat de gap
     tussen form en reviews-block halveert. */
  /* Polish-iteratie 8 (2026-05-20 sessie-2): kleine marge terug bovenaan
     mobile-hero. Was 0 (te krap aansluitend op header-bar), nu 16px voor
     visuele ademruimte tussen header en eyebrow. */
  .ac-v3-service-v2 > .ac-v3-task-hero {
    padding-top: 20px;
    padding-bottom: 4px;
  }
  .ac-v3-service-v2 > .ac-v3-hero-reviews { padding-top: 16px; }
  .ac-v3-task-hero__eyebrow { margin-bottom: 6px; }
  .ac-v3-task-hero__title { margin-top: 4px; }

  /* Final-CTA mobile: cards stacken onder elkaar, kleinere paddings. */
  .ac-v3-service-v2 > .ac-v3-final-cta { padding: 32px 20px 40px; }
  .ac-v3-final-cta__title { font-size: 28px; }
  .ac-v3-final-cta__subtitle { font-size: 15.5px; margin-bottom: 28px; }
  .ac-v3-final-cta__cards { grid-template-columns: 1fr; gap: 12px; }
  .ac-v3-final-cta__card { padding: 18px; }
  .ac-v3-final-cta__card-icon { width: 38px; height: 38px; }
  .ac-v3-final-cta__card-title { font-size: 16.5px; }

  /* Process-CTA-button iets compacter. */
  

  /* Polish-iteratie 4 (2026-05-20 sessie-2): process-step items op mobile
     gecentreerd per Nick. Nummer-cirkel boven content, alle tekst centraal. */
  
  
  

  /* FAQ-vragen kleiner + lager lineheight zodat lange vragen niet 3 regels
     pakken op mobile (Nick: "vooral vraag 1 nu 3 regels"). */
  .ac-v3-faq__title { font-size: 24px; margin-bottom: 24px; }
  .ac-v3-faq__question {
    padding: 14px 16px;
    font-size: 14.5px;
    line-height: 1.3;
    gap: 12px;
  }
  .ac-v3-faq__answer { padding: 0 16px 16px; font-size: 14.5px; line-height: 1.55; }

  /* (Compacte popover-regel 2026-06-12 verwijderd: popup is nu een modal-
     kaart/bottom-sheet met eigen maatvoering — zie span.ac-v3-tooltip__popup.) */
}

/* ============================================================================
 * V2 AANKOOPSERVICE — build-stappen 1+
 * ----------------------------------------------------------------------------
 * Placeholder voor secties die nog geen eigen element hebben. Verschijnt op
 * /services/aankoopservice voor secties die in latere build-stappen volgen.
 * Verdwijnt automatisch zodra de bijbehorende element-template bestaat.
 * ========================================================================= */


/* ---------------------------------------------------------------------------
 * vehicle_context_card — Bas' AUTOKOPPELBLOK
 *
 * Bas-feedback iteratie 2 (2026-05-21): vehicle-context staat nu direct onder
 * de hero. Kleinere top-padding zodat het visueel doorloopt vanuit de hero
 * (geen losse sectie-break) — bezoeker ziet "deze auto" zonder ver te scrollen.
 * ------------------------------------------------------------------------- */


/* Plate-chip (NL kenteken-styling, hergebruik concept uit lead_form.ctp) */


/* Without-vehicle form */


/* ---------------------------------------------------------------------------
 * usp_split — Bas' USPBLOK (Wij regelen / Wij zien toe op)
 * ------------------------------------------------------------------------- */
.ac-v3-usp-split {
  padding: 56px 20px;
  background: #f8fafc;
}
.ac-v3-usp-split__inner {
  max-width: var(--ac-v3-svc-max-width, 1120px);
  margin: 0 auto;
}
.ac-v3-usp-split__title {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--ac-v3-body);
  margin: 0 0 12px;
}
.ac-v3-usp-split__intro {
  text-align: center;
  font-size: 16px;
  color: var(--ac-v3-body);
  max-width: 680px;
  margin: 0 auto 40px;
  line-height: 1.55;
}
.ac-v3-usp-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ac-v3-usp-split__column {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.04);
}
.ac-v3-usp-split__column-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef2f6;
}
.ac-v3-usp-split__column-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(8,145,178,0.10);
  color: var(--ac-v3-turquoise-dark, #0891b2);
  flex-shrink: 0;
}
.ac-v3-usp-split__column--zien .ac-v3-usp-split__column-icon {
  background: rgba(255,198,43,0.18);
  color: #b8830f;
}
.ac-v3-usp-split__column-label {
  font-size: 19px;
  font-weight: 700;
  color: var(--ac-v3-body);
  margin: 0;
}
.ac-v3-usp-split__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ac-v3-usp-split__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  color: var(--ac-v3-body);
  line-height: 1.45;
}
.ac-v3-usp-split__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  /* Achtergrondcirkel weg (Feedback AC.nl 03-07, Bas): strakke, cirkelloze glyphs
     zoals de dienst-iconen elders. De 22px-slot blijft voor nette tekst-uitlijning. */
  color: var(--ac-v3-turquoise-dark, #0891b2);
  flex-shrink: 0;
  margin-top: 1px;
}
/* --watch (zonder cirkel) volgt dezelfde turquoise kleur: geen tint-verschil meer
   nodig nu de cirkels weg zijn; het glyph-verschil (hand-heart vs schild) draagt
   de betekenis. */
.ac-v3-usp-split__item-icon--watch {
  color: var(--ac-v3-turquoise-dark, #0891b2);
}

@media (max-width: 820px) {
  .ac-v3-usp-split { padding: 36px 16px; }
  .ac-v3-usp-split__title { font-size: 26px; }
  .ac-v3-usp-split__intro { font-size: 15px; margin-bottom: 28px; }
  .ac-v3-usp-split__grid { grid-template-columns: 1fr; gap: 16px; }
  .ac-v3-usp-split__column { padding: 22px 20px 20px; border-radius: 12px; }
  .ac-v3-usp-split__column-label { font-size: 17px; }
  .ac-v3-usp-split__item { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
 * process_carousel — Bas' HOE WERKT CARROSEL
 * ------------------------------------------------------------------------- */


/* Inruil-strip onder de carousel */


/* ---------------------------------------------------------------------------
 * investment_pricing — Bas' INVESTERINGBLOK
 * Live design = compact tier-rijen (--compact, verderop bij lead_form_full);
 * het oude 2-koloms card-ontwerp is opgeruimd bij de cleanup 2026-07-02.
 * ------------------------------------------------------------------------- */
.ac-v3-investment-pricing {
  padding: 64px 20px;
  background: #ffffff;
}
.ac-v3-investment-pricing__inner {
  max-width: 980px;
  margin: 0 auto;
}
.ac-v3-investment-pricing__price-amount {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 38px;
  font-weight: 800;
  color: var(--ac-v3-body-strong);
  letter-spacing: -0.01em;
}

@media (max-width: 760px) {
  .ac-v3-investment-pricing { padding: 40px 16px; }
  .ac-v3-investment-pricing__price-amount { font-size: 32px; }
}

/* ---------------------------------------------------------------------------
 * lead_form_full — Bas' KEUZE + SERVICESPECIFIEK + NAW samengevoegd
 * ------------------------------------------------------------------------- */
.ac-v3-lead-form-full {
  /* iter6 follow-up: investering + form vormen samen één visueel block,
     dus form-section heeft géén eigen background-strip meer (was #f8fafc).
     Strip vloeit naadloos vanuit investment_pricing erboven. */
  padding: 8px 20px 64px;
  background: transparent;
  scroll-margin-top: 80px;
}
.ac-v3-lead-form-full__inner {
  /* iter6 follow-up Bas: card-frame weg, "standaard content" zoals pricing
     erboven. Geen border, background, shadow of border-radius. De form-velden
     hebben elk hun eigen border voor scanbaarheid. */
  max-width: 760px;
  margin: 0 auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.ac-v3-lead-form-full__header {
  /* Bas 18-06b: titel + subtekst + prijs vormen één geheel. Géén scheidingslijn
     meer ónder de header (die zou subtekst van de prijs scheiden) — de lijn komt
     nu ónder het prijsblok (zie .__pricing--top), vóór de vinkjes. */
  margin-bottom: 12px;
}
.ac-v3-lead-form-full__title {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ac-v3-body);
  margin: 0 0 6px;
}
.ac-v3-lead-form-full__intro {
  font-size: 15px;
  color: var(--ac-v3-body);
  margin: 0;
  line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   Voertuig-bevestigingskaart (vehicle_form_chip) — bovenaan het lead-form zodra
   de bezoeker vanaf de VDP komt: foto + merk/model + kenteken-plaatje + bouwjaar.
   Alleen gerenderd mét foto (graceful degrade). Gedeeld door full + lean form.
   --------------------------------------------------------------------------- */
.ac-v3-vehicle-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 0 18px;
  background: var(--ac-v3-gray-100);
  border: 1px solid var(--ac-v3-gray-300);
  border-radius: var(--ac-v3-radius-md);
}
/* Bas 01-07 (N11): de 2e voertuig-chip ("De auto op het oog") zonder grijze balk —
   lekker clean, net als de 1e (calc-)chip. */
[data-ac-v3-autokoppel-chip] .ac-v3-vehicle-chip {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}
.ac-v3-vehicle-chip__photo {
  position: relative;
  /* Feedback AC.nl (Nick 09-07): thumbnail was overal aan de kleine kant → groter
     (4:3 behouden). Geldt overal waar de vehicle-chip laadt (calc-chip én autokoppel-
     chip delen deze maat → altijd even groot). 3e ronde: in de formulieren nog ietsjes
     groter op desktop én mobiel. */
  flex: 0 0 120px;
  width: 120px;
  height: 90px;
  border-radius: var(--ac-v3-radius-sm);
  overflow: hidden;
  background: var(--ac-v3-gray-300);
}
.ac-v3-vehicle-chip__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Foto-fallback (Nick 22-06): bekend voertuig zonder (werkende) foto -> auto-icoon
   placeholder i.p.v. een lege/gebroken kaart. Wordt getoond als de PHP geen foto
   rendert (--placeholder) of als de foto-URL niet laadt (JS zet --placeholder erop). */
.ac-v3-vehicle-chip__photo-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: var(--ac-v3-muted, #64748b);
}
.ac-v3-vehicle-chip__photo--placeholder { background: var(--ac-v3-gray-200, #e2e8f0); }
.ac-v3-vehicle-chip__photo--placeholder img { display: none; }
.ac-v3-vehicle-chip__photo--placeholder .ac-v3-vehicle-chip__photo-fallback { display: flex; }
.ac-v3-vehicle-chip__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ac-v3-vehicle-chip__name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ac-v3-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-v3-vehicle-chip__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ac-v3-vehicle-chip__plate {
  /* Plain kenteken (Nick 22-06): wel uitgeschreven, maar GEEN drukke gele kentekenbox
     meer in de chip. Nick 22-06b: zelfde grootte als het bouwjaar (voelde slordig). */
  font-family: var(--ac-v3-font-heading, "MencoV3", system-ui, sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-v3-muted, #64748b);
  line-height: 1.3;
}
.ac-v3-vehicle-chip__year {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ac-v3-muted);
}
/* Voertuig-acties (Wijzig voertuig / Verwijderen) — onder de meta-regel binnen
   __info, zodat ze naast elkaar passen (vervangt de oude absolute 'Wijzig'-knop). */
.ac-v3-vehicle-chip__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 2px;
}
.ac-v3-vehicle-chip__action {
  background: none;
  border: 0;
  padding: 2px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--ac-v3-primary, #00bbbb);
  text-decoration: underline;
  cursor: pointer;
}
.ac-v3-vehicle-chip__action:hover { color: var(--ac-v3-body-strong, #1a1a1a); }
.ac-v3-vehicle-chip__action--remove { color: var(--ac-v3-muted, #64748b); }
.ac-v3-vehicle-chip__action--remove:hover { color: #b91c1c; }
@media (max-width: 480px) {
  /* Feedback AC.nl (Nick 09-07): op mobiel voelde de thumbnail "erg klein" → groter (4:3; 3e ronde nog groter). */
  .ac-v3-vehicle-chip__photo { flex-basis: 108px; width: 108px; height: 81px; }
}
/* Voertuig-contactpagina (Feedback AC.nl, Nick 09-07): daar is de voertuig-thumbnail
   HET uitgelichte element, dus 50% groter dan de reguliere chip (120x90 → 180x135) zodat
   'ie meer in het oog springt en niet als afterthought voelt. Alleen desktop/tablet
   (min-width 481); op mobiel houdt 'ie de reguliere maat. */
@media (min-width: 481px) {
  .ac-v3-service-v2--voertuig-contact .ac-v3-vehicle-chip__photo {
    flex: 0 0 180px;
    width: 180px;
    height: 135px;
  }
}

/* ===========================================================================
   On-page kentekenrapport-checkout (report_checkout) — salespage paid-report
   scaffold. Kenteken + tier-selectie + lopend totaal + contact. Submit is
   preview-disabled tot Mike de payment-branch koppelt.
   =========================================================================== */
.ac-v3-report-checkout {
  padding: 48px 20px;
  /* Deeplink-doel vanaf de VDP (#report-checkout): marge zodat de sticky V3-header
     de sectie-kop niet afdekt bij de hash-scroll. */
  scroll-margin-top: 90px;
}
.ac-v3-report-checkout__inner {
  max-width: 640px;
  margin: 0 auto;
}
.ac-v3-report-checkout__header {
  margin-bottom: 18px;
}
.ac-v3-report-checkout__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-v3-turquoise-dark, #009999);
  margin-bottom: 8px;
}
.ac-v3-report-checkout__title {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ac-v3-body);
  margin: 0 0 6px;
}
.ac-v3-report-checkout__intro {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ac-v3-body);
  margin: 0;
}
.ac-v3-report-checkout__group {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}
.ac-v3-report-checkout__legend {
  font-size: 15px;
  font-weight: 700;
  color: var(--ac-v3-body);
  margin-bottom: 10px;
  padding: 0;
}
.ac-v3-report-checkout__kenteken {
  max-width: 240px;
}
/* Tier-lijst */
.ac-v3-report-checkout__tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ac-v3-gray-300);
  border-radius: var(--ac-v3-radius-md);
  overflow: hidden;
}
.ac-v3-report-checkout__tier {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ac-v3-gray-300);
  background: var(--ac-v3-white, #fff);
}
.ac-v3-report-checkout__tier:last-child {
  border-bottom: 0;
}
.ac-v3-report-checkout__tier--included {
  background: var(--ac-v3-gray-100);
}
.ac-v3-report-checkout__tier-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.ac-v3-report-checkout__tier--included .ac-v3-report-checkout__tier-label {
  cursor: default;
}
.ac-v3-report-checkout__tier-input {
  /* Native checkbox bulletproof verbergen: appearance:none haalt de OS-glyph weg en
     clip/overflow snijdt 'm fysiek tot niets, zodat er nooit een dubbel-vinkje naast
     het custom .tier-check ontstaat (m.n. Safari/iOS, ook bij checked+disabled). Het
     label[for] + de ':checked + .tier-check'-selector + de JS-total blijven werken. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.ac-v3-report-checkout__tier-check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ac-v3-gray-300);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: var(--ac-v3-white, #fff);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ac-v3-report-checkout__tier-input:checked + .ac-v3-report-checkout__tier-check {
  background: var(--ac-v3-turquoise);
  border-color: var(--ac-v3-turquoise);
  color: #fff;
}
.ac-v3-report-checkout__tier-input:focus-visible + .ac-v3-report-checkout__tier-check {
  outline: 2px solid var(--ac-v3-turquoise);
  outline-offset: 2px;
}
.ac-v3-report-checkout__tier-input:disabled + .ac-v3-report-checkout__tier-check {
  opacity: 0.7;
}
.ac-v3-report-checkout__tier-text {
  font-size: 15px;
  color: var(--ac-v3-body);
  line-height: 1.3;
}
.ac-v3-report-checkout__tier-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ac-v3-turquoise-dark, #009999);
  background: var(--ac-v3-turquoise-light, #e6f7f7);
  border-radius: var(--ac-v3-radius-pill);
  padding: 1px 8px;
  vertical-align: middle;
}
.ac-v3-report-checkout__tier-price {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 15px;
  color: var(--ac-v3-body);
  white-space: nowrap;
}
/* Lopend totaal */
.ac-v3-report-checkout__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--ac-v3-turquoise-light, #e6f7f7);
  border-radius: var(--ac-v3-radius-md);
}
.ac-v3-report-checkout__total-label {
  font-weight: 600;
  color: var(--ac-v3-body);
}
.ac-v3-report-checkout__total-amount {
  font-family: var(--ac-v3-font-display, inherit);
  font-weight: 800;
  font-size: 22px;
  color: var(--ac-v3-body-strong);
}
/* Preview-disabled submit (mirror't lead-form preview-state) */
.ac-v3-report-checkout__submit-disabled {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  padding: 15px 22px;
  border-radius: var(--ac-v3-radius-md);
  background: var(--ac-v3-gray-100);
  border: 1px dashed var(--ac-v3-gray-300);
  color: var(--ac-v3-muted);
  font-weight: 700;
  font-size: 16px;
  cursor: not-allowed;
}
.ac-v3-report-checkout__submit[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.ac-v3-report-checkout__submit-soon {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ac-v3-turquoise-dark, #009999);
  background: var(--ac-v3-turquoise-light, #e6f7f7);
  border-radius: var(--ac-v3-radius-pill);
  padding: 2px 10px;
}
.ac-v3-report-checkout__preview-note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ac-v3-muted);
}
/* Terugverdien-reassurance (copydoc R75): direct onder de totaalprijs (Nick 03-07). */
.ac-v3-report-checkout__subline {
  margin: 14px 0 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ac-v3-muted);
}
.ac-v3-report-checkout__phone {
  color: var(--ac-v3-turquoise-dark, #009999);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.ac-v3-report-checkout__phone:hover {
  text-decoration: underline;
}
.ac-v3-report-checkout__disclaimer {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ac-v3-muted);
}

/* Legend-suffix ("(optioneel)") + optionele cross-sell-vinkjes in de checkout */
.ac-v3-report-checkout__legend-suffix {
  margin-left: 6px;
  font-weight: 500;
  font-size: 13px;
  color: var(--ac-v3-muted);
}
.ac-v3-report-checkout__extras-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}
@media (max-width: 540px) {
  .ac-v3-report-checkout__extras-grid {
    grid-template-columns: 1fr;
  }
}
.ac-v3-report-checkout__extra {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14.5px;
  color: var(--ac-v3-body);
}
.ac-v3-report-checkout__extra-input {
  /* Zie tier-input: bulletproof verbergen zodat er geen dubbel-vinkje ontstaat. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.ac-v3-report-checkout__extra-check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ac-v3-gray-300);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: var(--ac-v3-white, #fff);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ac-v3-report-checkout__extra-input:checked + .ac-v3-report-checkout__extra-check {
  background: var(--ac-v3-turquoise);
  border-color: var(--ac-v3-turquoise);
  color: #fff;
}
.ac-v3-report-checkout__extra-input:focus-visible + .ac-v3-report-checkout__extra-check {
  outline: 2px solid var(--ac-v3-turquoise);
  outline-offset: 2px;
}

/* iDEAL-trust: subordinaat aan de "Binnenkort online"-knop (informatief, niet
   misleidend). Staat boven de inerte submit. */
.ac-v3-report-checkout__ideal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}
.ac-v3-report-checkout__ideal-logo {
  flex: 0 0 auto;
  display: block;
  height: 29px;
  width: auto;
}
.ac-v3-report-checkout__ideal-note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ac-v3-muted);
}

/* Tier-summary chip bovenaan het form */


/* Fieldsets als duidelijke subblokken (Bas' subdelen) */
.ac-v3-lead-form-full__group {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}
.ac-v3-lead-form-full__group:last-of-type { margin-bottom: 12px; }
.ac-v3-lead-form-full__legend {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 17px;
  font-weight: 700;
  color: var(--ac-v3-body);
  margin: 0 0 6px;
  padding: 0;
}


/* Keuze-vinkjes: 2-koloms grid op desktop */
.ac-v3-lead-form-full__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ac-v3-lead-form-full__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  font-size: 14.5px;
  color: var(--ac-v3-body);
  transition: border-color .15s ease, background .15s ease;
}
.ac-v3-lead-form-full__option:hover { border-color: #c7ccd4; }
.ac-v3-lead-form-full__option-input {
  /* sr-only pattern: Chrome ignores position:absolute + width:0 on
     checkbox inputs without !important (form-control rendering quirk) */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.ac-v3-lead-form-full__option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: transparent;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ac-v3-lead-form-full__option-input:checked ~ .ac-v3-lead-form-full__option-check {
  background: var(--ac-v3-turquoise, #06b6d4);
  border-color: var(--ac-v3-turquoise, #06b6d4);
  color: #ffffff;
}
.ac-v3-lead-form-full__option:has(.ac-v3-lead-form-full__option-input:checked) {
  background: rgba(8,145,178,0.06);
  border-color: var(--ac-v3-turquoise, #06b6d4);
}

/* Textarea + inputs (servicespecifiek + NAW) */
.ac-v3-lead-form-full__textarea,
.ac-v3-lead-form-full__input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #ffffff;
  font-family: inherit;
  font-size: 15px;
  color: #1f2937;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ac-v3-lead-form-full__textarea:focus,
.ac-v3-lead-form-full__input:focus {
  outline: none;
  border-color: var(--ac-v3-turquoise-dark, #0891b2);
  box-shadow: 0 0 0 3px rgba(8,145,178,0.15);
}
.ac-v3-lead-form-full__textarea { resize: vertical; min-height: 84px; }
.ac-v3-lead-form-full__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.ac-v3-lead-form-full__row:last-child { margin-bottom: 0; }
/* Een verborgen rij moet echt verbergen: het hidden-attribuut verliest anders van
   display:grid hierboven (Nick 2026-06-26: biz-velden/naam-velden braken bij Privé). */
.ac-v3-lead-form-full__row[hidden] { display: none !important; }
.ac-v3-lead-form-full__group[hidden] { display: none !important; }
.ac-v3-lead-form-full__row .input,
.ac-v3-lead-form-full__row .input.text,
.ac-v3-lead-form-full__row .input.email,
.ac-v3-lead-form-full__row .input.tel {
  margin: 0;
}

/* 'De auto op het oog' kentekenbox (Nick 22-06b): gegarandeerd als nette, COMPACTE
   blok ONDER de legend, links uitgelijnd (stond rechts/te breed). NL-plate links,
   URL-input rechts. clear/justify-self/margin-right zijn defensief: ze forceren de
   links-onder-de-regel-plaatsing, ook bij een eventuele <legend display:flex>-quirk
   of als de fieldset ooit een flex/grid-context krijgt. max-width voorkomt full-width. */
.ac-v3-lead-form-full__group[data-ac-v3-autokoppel] { display: block; }
.ac-v3-lead-form-full__kenteken-row {
  display: grid;
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  clear: both;
  width: 100%;
  max-width: 520px;
  margin: 0 auto 0 0;   /* links uitlijnen: margin-left 0, margin-right auto */
  justify-self: start;
}
.ac-v3-lead-form-full__kenteken-row .ac-v3-lead-form__kenteken-field {
  margin: 0;
}
.ac-v3-lead-form-full__input--url { font-size: 14.5px; }
/* Status bij de in-place kenteken-lookup ('Wijzig voertuig') */
.ac-v3-lead-form-full__vehicle-feedback {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ac-v3-muted);
}
.ac-v3-lead-form-full__vehicle-feedback--error { color: #b91c1c; }

/* A23 (content-map) advies-/tip-callout onderaan het form. Rustige turquoise
   highlight met info-icoon; alleen gerenderd als de config form.tip zet. */
.ac-v3-lead-form-full__tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: var(--ac-v3-radius-md, 12px);
  background: var(--ac-v3-turquoise-light, #e6f7f7);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ac-v3-body, #1a1a1a);
}
.ac-v3-lead-form-full__tip-icon {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 1px;
  color: var(--ac-v3-turquoise-dark, #009999);
}

/* Submit + preview-note */

.ac-v3-lead-form-full__submit,
.ac-v3-lead-form-full__submit-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  background: var(--ac-v3-turquoise, #06b6d4);
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  text-decoration: none;
}
.ac-v3-lead-form-full__submit:hover { background: var(--ac-v3-turquoise-dark, #0891b2); }
.ac-v3-lead-form-full__submit:active { transform: translateY(1px); }
.ac-v3-lead-form-full__submit-disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}
/* Backend-pending lock (Nick 2026-06-24): de verzendknop blijft herkenbaar de
   merk-knop (turquoise), maar duidelijk GELOCKT — slot-icoon + iets gedempt, met
   not-allowed cursor. Form eromheen rendert normaal. */
.ac-v3-lead-form-full__submit-disabled--locked {
  background: var(--ac-v3-turquoise, #06b6d4);
  opacity: 0.7;
}
.ac-v3-lead-form-full__preview-note {
  text-align: center;
  font-size: 12.5px;
  color: #94a3b8;
  margin: 8px 0 0;
  font-style: italic;
}
.ac-v3-lead-form-full__alt {
  text-align: center;
  font-size: 14px;
  color: var(--ac-v3-muted);
  margin: 14px 0 0;
}
/* reCAPTCHA v3 (feedback Nick: drijvende badge is storend). De badge verbergen mag
   van Google MITS de verplichte tekst-disclosure bij het formulier staat. Daarom NIET
   globaal verbergen, maar alleen wanneer een formulier mét die disclosure aanwezig is:
   lead_form_full/lean voegen via JS de class 'ac-v3-recaptcha-disclosed' aan <html> toe.
   Zo houden andere reCAPTCHA-pagina's zonder disclosure (contact, gratisadviesgesprek,
   legacy lead_form) hun zichtbare badge — compliant (Codex P2). */
html.ac-v3-recaptcha-disclosed .grecaptcha-badge { visibility: hidden; }
/* Feedback AC.nl (Bas/Nick 09-07): waar de badge zichtbaar is (o.a. home), 'm zo
   strak mogelijk maken — de zwevende grijze box-shadow ("doos") weg zodat alleen het
   kleine logo overblijft. De witte tegel zit in Google's iframe (cross-origin) en is
   niet via CSS te strippen; box-shadow weghalen is het strakst haalbare zonder de
   badge te verbergen. */
.grecaptcha-badge { box-shadow: none !important; }
.ac-v3-form-privacy-note{
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ac-v3-muted);
}
/* Privacy-regel (feedback Nick: link naar onze privacyverklaring/voorwaarden bij het
   formulier) iets prominenter dan de reCAPTCHA-fineprint. */
.ac-v3-form-privacy-note { font-size: 12.5px; }
.ac-v3-form-privacy-note a{
  color: inherit;
  text-decoration: underline;
}
/* reCAPTCHA-disclosure: Google-vereiste tekst (badge verborgen op form-pagina's).
   Feedback AC.nl (Nick 09-07): grootte gelijk aan de privacy-regel erboven (erft
   12.5px van .ac-v3-form-privacy-note), alleen iets strakker eronder. De links naar
   Google Privacy/Terms zijn verplicht (Google-branding) en blijven staan. */
.ac-v3-form-recaptcha-note { margin-top: 6px; }
.ac-v3-lead-form-full__alt-link {
  color: var(--ac-v3-turquoise-dark, #0891b2);
  text-decoration: none;
  font-weight: 700;
}
.ac-v3-lead-form-full__alt-link:hover { text-decoration: underline; }

.ac-v3-lead-form-full__success {
  text-align: center;
  padding: 32px 16px;
}
.ac-v3-lead-form-full__success h3 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--ac-v3-body);
}
.ac-v3-lead-form-full__success p {
  color: var(--ac-v3-body);
  font-size: 15px;
}

@media (max-width: 720px) {
  .ac-v3-lead-form-full { padding: 8px 14px 36px; }
  .ac-v3-lead-form-full__inner { padding: 0; border-radius: 0; }
  .ac-v3-lead-form-full__title { font-size: 22px; }
  .ac-v3-lead-form-full__intro { font-size: 14.5px; }
  .ac-v3-lead-form-full__options { grid-template-columns: 1fr; }
  .ac-v3-lead-form-full__row { grid-template-columns: 1fr; gap: 8px; }
  .ac-v3-lead-form-full__kenteken-row { grid-template-columns: 1fr; }
  
}

/* ============================================================================
 * ITERATIE 3 — Compact-refactor styles (Bas-feedback meeting 2026-05-21)
 * ============================================================================ */

/* ---- task_hero CTA footnote (vrijblijvend + tooltip) ---- */
.ac-v3-task-hero__cta-footnote {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ac-v3-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ac-v3-task-hero__cta-footnote-tip .ac-v3-tooltip__trigger {
  padding: 2px;
}
.ac-v3-task-hero__inner--full .ac-v3-task-hero__cta-footnote {
  align-self: center;
}

/* ---- usp_split FLAT variant — geen cards, plain vinkjes ---- */
.ac-v3-usp-split--flat {
  padding: 16px 20px 24px;
  background: transparent;
}
.ac-v3-usp-split--flat .ac-v3-usp-split__title {
  font-size: 22px;
  margin-bottom: 16px;
}
.ac-v3-usp-split--flat .ac-v3-usp-split__intro {
  margin-bottom: 24px;
  font-size: 15px;
}
.ac-v3-usp-split--flat .ac-v3-usp-split__grid {
  gap: 32px;
}
.ac-v3-usp-split--flat .ac-v3-usp-split__column {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.ac-v3-usp-split--flat .ac-v3-usp-split__column-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
  gap: 10px;
}
.ac-v3-usp-split--flat .ac-v3-usp-split__column-icon {
  display: none;
}
.ac-v3-usp-split--flat .ac-v3-usp-split__column-label {
  font-size: 16px;
}
.ac-v3-usp-split--flat .ac-v3-usp-split__list {
  gap: 8px;
}
.ac-v3-usp-split--flat .ac-v3-usp-split__item {
  font-size: 14.5px;
  line-height: 1.4;
}
.ac-v3-usp-split--flat .ac-v3-usp-split__item-icon {
  width: 18px;
  height: 18px;
}
.ac-v3-usp-split__item-tip .ac-v3-tooltip__trigger {
  width: 20px; height: 20px; padding: 0; margin: 0 0 0 2px;
}
.ac-v3-usp-split__item-tip .ac-v3-tooltip__icon { width: 13px; height: 13px; }
.ac-v3-usp-split__item-text { flex: 0 1 auto; }
/* Bas 18-06: i'tjes strak naar rechts uitlijnen i.p.v. ragged inline ná de
   tekst (stond "rommelig"). margin-left:auto duwt elke tip naar de rechterrand
   → nette, consistente kolom over alle regels. */
.ac-v3-usp-split__item-tip { margin-left: auto; padding-left: 8px; }

@media (max-width: 820px) {
  .ac-v3-usp-split--flat { padding: 24px 16px 20px; }
  .ac-v3-usp-split--flat .ac-v3-usp-split__title { font-size: 20px; }
  .ac-v3-usp-split--flat .ac-v3-usp-split__grid { gap: 24px; }
  /* Bas 18-06b: USP-bullets een stuk compacter op mobiel. */
  .ac-v3-usp-split--flat .ac-v3-usp-split__list { gap: 5px; }
  .ac-v3-usp-split--flat .ac-v3-usp-split__item { font-size: 13.5px; line-height: 1.35; }
  .ac-v3-usp-split--flat .ac-v3-usp-split__item-icon { width: 16px; height: 16px; }
  .ac-v3-usp-split--flat .ac-v3-usp-split__column-header { margin-bottom: 8px; padding-bottom: 6px; }
}

/* ---- investment_pricing COMPACT variant — 1 regel ---- */
.ac-v3-investment-pricing--compact {
  /* iter6 follow-up: layout uitgelijnd met het lead-form-full eronder.
     Geen card-frame, left-aligned, max-width matched aan form (760px).
     Label "Investering" inline met de prijs op één rij. */
  padding: 28px 20px 8px;
  background: transparent;
  text-align: left;
}
.ac-v3-investment-pricing--compact .ac-v3-investment-pricing__inner {
  max-width: 760px;
  margin: 0 auto;
}
.ac-v3-investment-pricing--compact .ac-v3-investment-pricing__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ac-v3-investment-pricing__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ac-v3-body);
  letter-spacing: 0.01em;
}
.ac-v3-investment-pricing__price-line {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ac-v3-investment-pricing--compact .ac-v3-investment-pricing__price-amount {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 32px;
  font-weight: 800;
  color: var(--ac-v3-body-strong);
  letter-spacing: -0.01em;
}
.ac-v3-investment-pricing--compact .ac-v3-investment-pricing__tagline {
  font-size: 18px;
  font-weight: 600;
  color: var(--ac-v3-body);
}
.ac-v3-investment-pricing--compact .ac-v3-investment-pricing__subline {
  margin: 0;
  font-size: 14px;
  color: var(--ac-v3-muted);
  line-height: 1.5;
}
.ac-v3-investment-pricing__heading {
  margin: 0 0 12px;
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 22px;
  font-weight: 700;
  color: var(--ac-v3-body);
  line-height: 1.3;
}
/* (Anker-override voor de pricing-heading-popup is 2026-06-12 verwijderd:
   popup is nu een fixed gecentreerde modal-kaart, anchoring obsolete.) */
.ac-v3-investment-pricing__tiers {
  margin-bottom: 8px;
}
.ac-v3-investment-pricing__tier-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 16px;
}
.ac-v3-investment-pricing__tier-row:last-of-type {
  border-bottom: 0;
}
.ac-v3-investment-pricing__tier-label {
  font-size: 15px;
  color: var(--ac-v3-body-strong);
}
.ac-v3-investment-pricing__tier-price {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 20px;
  font-weight: 700;
  color: var(--ac-v3-body-strong);
  white-space: nowrap;
}
/* Aanvinkbare pakketkeuze (Nick/Bas 02-07): tier-rijen als label+vinkje, zelfde
   vinkje-stijl als de flat form-opties. Max één tegelijk + selected_tier-sync
   gebeurt in de JS van investment_pricing.ctp. */
.ac-v3-investment-pricing__tiers--select {
  border: 0;
  padding: 0;
  margin: 0 0 8px;
  min-width: 0;
}
.ac-v3-investment-pricing__tier-row--select {
  cursor: pointer;
  align-items: center;
  gap: 10px;
}
.ac-v3-investment-pricing__tier-row--select .ac-v3-investment-pricing__tier-label {
  flex: 1 1 auto;
  min-width: 0;
}
.ac-v3-investment-pricing__tier-input {
  /* sr-only pattern, cf. .ac-v3-lead-form-full__option-input */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.ac-v3-investment-pricing__tier-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: transparent;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ac-v3-investment-pricing__tier-input:checked ~ .ac-v3-investment-pricing__tier-check {
  background: var(--ac-v3-turquoise, #06b6d4);
  border-color: var(--ac-v3-turquoise, #06b6d4);
  color: #ffffff;
}
.ac-v3-investment-pricing__tier-input:focus-visible ~ .ac-v3-investment-pricing__tier-check {
  outline: 2px solid var(--ac-v3-turquoise, #06b6d4);
  outline-offset: 2px;
}
/* Tier-typen (Nick 03-07): fixed-rij zonder vinkje + optionele bij-vinkjes.
   Label = inline-flex zodat het tooltip-i'tje netjes op de regel staat (zelfde
   fix als de finance-maandprijs); meegeërfde legend-tip margin-left:auto
   geneutraliseerd. Fixed-label bold: de vinkje-rijen zijn <label>-elementen en
   erven de globale label-bold — de fixed <div>-rij moet meedoen (Nick 03-07:
   alles met een prijs in de prijssectie consistent dikgedrukt). */
.ac-v3-investment-pricing__tier-row--fixed { align-items: center; gap: 10px; }
.ac-v3-investment-pricing__tier-row--fixed .ac-v3-investment-pricing__tier-label { font-weight: 700; }
/* 'Bel ons'-tel-link in de subline (aankoopkeuring-toeslagtekst) */
.ac-v3-investment-pricing__subline-link { color: var(--ac-v3-turquoise, #00bbbb); text-decoration: underline; }
.ac-v3-investment-pricing__subline-link:hover { color: var(--ac-v3-turquoise-dark, #009999); }
.ac-v3-investment-pricing__tiers--select .ac-v3-investment-pricing__tier-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.ac-v3-investment-pricing__tiers--select .ac-v3-investment-pricing__tier-label .ac-v3-lead-form-full__legend-tip { margin-left: 0; }
/* Vaste hoofdservice: locked (altijd-aan) vinkje, puur voor uitlijning met de
   choice/optional-rijen — decoratief, niet interactief. */
.ac-v3-investment-pricing__tier-check--locked {
  background: var(--ac-v3-turquoise, #06b6d4);
  border-color: var(--ac-v3-turquoise, #06b6d4);
  color: #fff;
  cursor: default;
}
/* Tekst-prijs ('Op aanvraag'/'Gratis') kleiner dan een numerieke prijs (20px). */
.ac-v3-investment-pricing__tier-price--text {
  font-size: 15px;
  font-weight: 600;
}
/* Combikorting-totaal (accucheck): lopende totaalregel onder de tiers. */
.ac-v3-investment-pricing__combi { margin: 4px 0 0; }
.ac-v3-investment-pricing__combi-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
}
.ac-v3-investment-pricing__combi-discount {
  color: var(--ac-v3-turquoise-dark, #0891b2);
  font-size: 14px;
  font-weight: 600;
}
/* Expliciete hidden-guard: .combi-row zet display:flex, wat het [hidden]-attribuut
   kan overrulen (zelfde patroon als __row[hidden]/__group[hidden] hierboven). Zo
   blijft de korting-regel gegarandeerd verborgen tot de combi-optie aanstaat (Codex P2). */
.ac-v3-investment-pricing__combi-discount[hidden] { display: none !important; }
.ac-v3-investment-pricing__combi-total {
  border-top: 1px solid #e5e7eb;
  font-family: var(--ac-v3-font-display, inherit);
  font-weight: 800;
  color: var(--ac-v3-body-strong);
}
.ac-v3-investment-pricing__combi-total span:last-child { font-size: 20px; white-space: nowrap; }
.ac-v3-investment-pricing__combi-note { margin: 8px 0 0; font-size: 13px; color: var(--ac-v3-muted, #64748b); line-height: 1.45; }
.ac-v3-investment-pricing__tier-logo { height: 22px; width: auto; flex: 0 0 auto; }
/* ANWB 'Gratis'-visualisatie (strike_free): de tier-JS zet --free op de sectie;
   de hoofdprijs wordt doorgestreept en de 'Gratis'-badge verschijnt ernaast. */
.ac-v3-investment-pricing__tier-price-free { display: none; color: var(--ac-v3-turquoise, #00bbbb); }
.ac-v3-investment-pricing--free .ac-v3-investment-pricing__tier-price-free { display: inline; margin-left: 6px; }
.ac-v3-investment-pricing--free [data-ac-v3-price-strike] {
  text-decoration: line-through;
  opacity: .5;
  font-size: 16px;
  font-weight: 600;
}
.ac-v3-investment-pricing__tip .ac-v3-tooltip__trigger { padding: 2px; }

/* VDP-aware vanaf-prijs calculator (aankoopbegeleiding) — toont alleen bij ?prijs=.
   Nick 22-06b: kader/box weg, de inhoud is gewoon onderdeel van de body (geen card-frame
   meer rond titel + voertuig + berekening). */
.ac-v3-investment-pricing__calc {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
}
.ac-v3-investment-pricing__calc-title {
  margin: 0 0 10px;
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 15px;
  font-weight: 700;
  color: var(--ac-v3-body-strong);
}
.ac-v3-investment-pricing__calc-rows { margin: 0; }
.ac-v3-investment-pricing__calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}
.ac-v3-investment-pricing__calc-row dt {
  margin: 0;
  font-size: 14px;
  color: var(--ac-v3-body);
}
.ac-v3-investment-pricing__calc-row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ac-v3-body-strong);
  white-space: nowrap;
}
.ac-v3-investment-pricing__calc-total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.ac-v3-investment-pricing__calc-total dt { font-weight: 700; color: var(--ac-v3-body-strong); }
.ac-v3-investment-pricing__calc-total dd {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 20px;
  font-weight: 700;
  color: var(--ac-v3-body-strong);
}
.ac-v3-investment-pricing__calc-punch {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f766e;
}
.ac-v3-investment-pricing__calc-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ac-v3-muted);
}
/* WS1 (Nick 2026-06-24): "prijs onbekend"-regel onder de voertuig-chip wanneer
   we de auto wél kennen maar de prijs niet (vehicle-only). Subtiel, muted. */
.ac-v3-investment-pricing__calc-unknown {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ac-v3-muted);
}
.ac-v3-investment-pricing__calc--vehicle-only .ac-v3-investment-pricing__calc-unknown { margin-top: 4px; }

/* Autofinanciering hero maandlast-indicator (VDP-module hergebruik) */
.ac-v3-task-hero__monthly {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: #f1f5f9;
  border-radius: 10px;
}
.ac-v3-task-hero__monthly-amount {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 22px;
  font-weight: 700;
  color: var(--ac-v3-body-strong);
}
.ac-v3-task-hero__monthly-note {
  font-size: 13px;
  color: var(--ac-v3-muted);
}

/* Voertuig-box ín de calc-box (aankoopservice, Nick 22-06). De chip heeft eigen
   card-chrome; binnen de calc wat strakker eronder. --vehicle-only = bekend voertuig
   zonder prijs: alleen de chip, geen calc-frame (de chip dráágt z'n eigen card). */
/* Binnen de calc geen eigen chip-card meer (Nick 22-06b: content in de body):
   foto + naam/kenteken/jaar + acties stromen los onder de calc-titel, geen kader. */
.ac-v3-investment-pricing__calc .ac-v3-vehicle-chip {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
}
.ac-v3-investment-pricing__calc--vehicle-only {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
}
.ac-v3-investment-pricing__calc--vehicle-only .ac-v3-vehicle-chip { margin: 0; }

@media (max-width: 720px) {
  .ac-v3-investment-pricing--compact { padding: 24px 16px 4px; }
  .ac-v3-investment-pricing--compact .ac-v3-investment-pricing__row { gap: 12px; }
  .ac-v3-investment-pricing--compact .ac-v3-investment-pricing__price-amount { font-size: 28px; }
  .ac-v3-investment-pricing--compact .ac-v3-investment-pricing__tagline { font-size: 16px; }
  .ac-v3-investment-pricing__label { font-size: 14px; }
}

/* Prijs-/investeringsblok ín het lead-form (Bas 18-06: "eerst kiezen, dán de
   prijs"). Het investment_pricing-element wordt nu ná de vinkjes en vóór de
   auto-koppel in de form-flow gerenderd i.p.v. als losse sectie erboven. Strip
   de eigen sectie-padding + inner-max-width zodat het blok links uitlijnt met
   de fieldsets, en zet een subtiele scheidingslijn boven zodat het als eigen
   blok herkenbaar blijft tussen de vinkjes en de auto-koppel. */
.ac-v3-lead-form-full__pricing {
  margin: 4px 0 18px;
  padding-top: 16px;
  border-top: 1px solid #eef2f6;
}
.ac-v3-lead-form-full__pricing .ac-v3-investment-pricing--compact { padding: 0; }
.ac-v3-lead-form-full__pricing .ac-v3-investment-pricing--compact .ac-v3-investment-pricing__inner {
  max-width: none;
  margin: 0;
}
/* Bas 18-06b: prijsblok BOVENaan het formulier (direct onder titel+subtekst, als
   één geheel). Scheidingslijn ónder de prijs, vóór de vinkjes — niet erboven. */
.ac-v3-lead-form-full__pricing--top {
  margin: 0 0 20px;
  padding: 0 0 18px;
  border-top: 0;
  border-bottom: 1px solid #eef2f6;
}

/* ---- lead_form_full COMPACT variant — strip card-look op vinkjes
 * iter6-followup: padding 0 (geen card-frame meer), .__compact behoudt
 * de inner-padding=0 setting uit basis-rule. */
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__inner {
  padding: 0;
}
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__header {
  margin-bottom: 12px;
}
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__title { font-size: 22px; }
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__intro { font-size: 14.5px; }
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__group { margin-bottom: 18px; }
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__legend {
  font-size: 15px;
  margin-bottom: 8px;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
}
/* Nick 03-07 (overrulet Bas 18-06b): i'tjes in de formulier-legends NIET meer strak
   rechts, maar direct ná de labeltekst — consistent met de prijs-i's (die Nick eerder
   ook bij het label wilde). Bij korte labels oogde de ver-rechtse i losgekoppeld.
   Geldt site-breed op alle formulieren; 1-regel-revert = margin-left:auto terug. */
.ac-v3-lead-form-full__legend-tip { margin-left: 0; }
.ac-v3-lead-form-full__legend-suffix {
  font-weight: 500;
  font-size: 13px;
  color: #94a3b8;
}
.ac-v3-lead-form-full__legend-tip .ac-v3-tooltip__trigger { width: 20px; height: 20px; padding: 0; vertical-align: middle; }
.ac-v3-lead-form-full__legend-tip .ac-v3-tooltip__icon { width: 13px; height: 13px; }

/* Plain options — strip border/background (Bas: "om het vinkje zit weer een balk. Helemaal weg") */
.ac-v3-lead-form-full__options--flat {
  grid-template-columns: 1fr;
  gap: 2px;
}
.ac-v3-lead-form-full__option--flat {
  background: transparent;
  border: 0;
  padding: 4px 0;
  margin-left: 0;
  gap: 8px;
  font-size: 14.5px;
}
.ac-v3-lead-form-full__option--flat:hover { background: transparent; }
.ac-v3-lead-form-full__option--flat:has(.ac-v3-lead-form-full__option-input:checked) {
  background: transparent;
}
.ac-v3-lead-form-full__option--flat .ac-v3-lead-form-full__option-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.ac-v3-lead-form-full__option-label {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
}
/* Nick 03-07: de legacy-stylesheet geeft labels line-height 32px mee — op
   2-regelige vinkje-teksten (mobiel) stonden de regels daardoor véél verder
   uit elkaar dan de bodytekst (1.55). Gelijkgetrokken voor alle aanvinkbare
   form-rijen: opties, tier-rijen, radio-chips en checkout-tiers/extras. */
.ac-v3-lead-form-full__option,
.ac-v3-lead-form-full__option-label,
.ac-v3-investment-pricing__tier-row,
.ac-v3-investment-pricing__tier-label,
.ac-v3-lead-form-search__radio,
.ac-v3-lead-form-search__radio-label,
.ac-v3-report-checkout__tier-label,
.ac-v3-report-checkout__tier-text,
.ac-v3-report-checkout__extra,
.ac-v3-report-checkout__extra-label {
  line-height: 1.45;
}
/* Maandprijs-bedrag nooit intern laten breken (4 cijfers = € 1.201). */
.ac-v3-finance-calc__result-amount { white-space: nowrap; }
/* Nick 03-07 (overrulet Bas 18-06b): vinkje-i'tjes direct ná het label i.p.v. ver rechts
   (zie legend-tip hierboven). 1-regel-revert = margin-left:auto terug. */
.ac-v3-lead-form-full__option-label .ac-v3-tooltip { margin-left: 0; }
.ac-v3-lead-form-full__option-label .ac-v3-tooltip__trigger {
  width: 20px; height: 20px; padding: 0; margin: 0;
}
.ac-v3-lead-form-full__option-label .ac-v3-tooltip__icon { width: 13px; height: 13px; }
/* Twijfel-checkbox onder kentekenveld */
.ac-v3-lead-form-full__option--twijfel {
  margin-top: 8px;
}
/* Inruil-kenteken conditioneel veld */
.ac-v3-lead-form-full__inruil-kenteken {
  /* Bas 18-06b: flush links uitgelijnd met de overige form-velden (geen indent). */
  padding: 8px 0 2px 0;
}
.ac-v3-lead-form-full__inruil-kenteken[hidden] {
  display: none;
}
.ac-v3-lead-form__kenteken-field--inruil {
  max-width: 240px;
}
/* Compactere input padding */
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__input,
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__textarea {
  padding: 8px 12px;
  font-size: 14.5px;
  border-radius: 8px;
}
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__textarea {
  min-height: 70px;
}
/* iOS-zoom-fix (Nick 03-07): Safari zoomt automatisch in op inputs met een
   font-size < 16px en zoomt na blur NIET terug — gebruiker blijft "ingezoomd"
   hangen. 16px op alle form-inputs op telefoonformaten voorkomt de zoom
   volledig. Bewust GEEN maximum-scale=1 in de viewport-meta: dat blokkeert
   pinch-zoom op Android (toegankelijkheid). Kenteken-input is al 22px. */
@media (max-width: 767px) {
  .ac-v3-lead-form-full__input,
  .ac-v3-lead-form-full__textarea,
  .ac-v3-lead-form-full--compact .ac-v3-lead-form-full__input,
  .ac-v3-lead-form-full--compact .ac-v3-lead-form-full__textarea {
    font-size: 16px;
  }
}
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__row { gap: 8px; margin-bottom: 8px; }
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__submit,
.ac-v3-lead-form-full--compact .ac-v3-lead-form-full__submit-disabled {
  padding: 12px 20px;
  font-size: 15.5px;
  border-radius: 10px;
  margin-top: 12px;
}
/* Post-CTA trustline */
.ac-v3-lead-form-full__post-cta-trust {
  text-align: center;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ac-v3-muted);
  letter-spacing: 0.02em;
}
/* Bas 18-06b: dynamische, gesynchroniseerde trustline (sterren + KV-score +
   totaal) als link naar Klantenvertellen. */
.ac-v3-lead-form-full__post-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.ac-v3-lead-form-full__post-cta-link:hover { color: var(--ac-v3-turquoise-dark, #009999); }
.ac-v3-lead-form-full__post-cta-link strong { color: var(--ac-v3-body); font-weight: 700; }
.ac-v3-lead-form-full__post-cta-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--ac-v3-yellow, #ffc62b);
}

@media (max-width: 720px) {
  .ac-v3-lead-form-full--compact .ac-v3-lead-form-full__inner { padding: 0; }
  .ac-v3-lead-form-full--compact .ac-v3-lead-form-full__title { font-size: 20px; }
}

/* ====================================================================
   lead_form_search — lean zoek-form primitieven (radio + budget).
   Hergebruikt de lead-form-full base-classes; alleen de nieuwe
   primitieven krijgen eigen styling. Zelfde turquoise visuele taal.
   ==================================================================== */
/* Intent-radio: card-stijl onder elkaar, zelfde look als de keuze-vinkjes
   maar met een ronde dot i.p.v. vierkante check. */
.ac-v3-lead-form-search__radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ac-v3-lead-form-search__radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  font-size: 14.5px;
  color: var(--ac-v3-body);
  transition: border-color .15s ease, background .15s ease;
}
.ac-v3-lead-form-search__radio:hover { border-color: #c7ccd4; }
.ac-v3-lead-form-search__radio-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.ac-v3-lead-form-search__radio-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  flex-shrink: 0;
  transition: border-color .15s ease;
}
.ac-v3-lead-form-search__radio-dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background .15s ease;
}
.ac-v3-lead-form-search__radio-input:checked ~ .ac-v3-lead-form-search__radio-dot {
  border-color: var(--ac-v3-turquoise, #06b6d4);
}
.ac-v3-lead-form-search__radio-input:checked ~ .ac-v3-lead-form-search__radio-dot::after {
  background: var(--ac-v3-turquoise, #06b6d4);
}
.ac-v3-lead-form-search__radio:has(.ac-v3-lead-form-search__radio-input:checked) {
  background: rgba(8,145,178,0.06);
  border-color: var(--ac-v3-turquoise, #06b6d4);
}
.ac-v3-lead-form-search__radio-input:focus-visible ~ .ac-v3-lead-form-search__radio-dot {
  box-shadow: 0 0 0 3px rgba(8,145,178,0.20);
}
/* Budget: € prefix + tekstveld (geen type=number ivm NL punt-notatie) */


/* ====================================================================
   lead_form_lean — generieke blok-primitieven (chips, prefix-field,
   inklapbare textarea). Hergebruikt de search-radio base-classes.
   ==================================================================== */
/* Radio-chips variant (intent inruilen/verkopen + finance-vorm): compacte
   segmented pills (Nick 03-07: de oude gestrekte boxen met radio-dot waren te
   chunky op mobiel). Geen dot, kleine padding, auto-breedte, teal-fill bij
   selectie — zelfde taal als de looptijd-chips. Scoped op __chips zodat de
   search-radios elders ongemoeid blijven (Codex plan-review). */
.ac-v3-lead-form-search__radios.ac-v3-lead-form-lean__chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.ac-v3-lead-form-lean__chips .ac-v3-lead-form-lean__chip {
  flex: 0 1 auto;
  min-width: 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  justify-content: center;
  text-align: center;
}
.ac-v3-lead-form-lean__chips .ac-v3-lead-form-search__radio-dot { display: none; }
.ac-v3-lead-form-lean__chips .ac-v3-lead-form-lean__chip:has(.ac-v3-lead-form-search__radio-input:checked) {
  background: var(--ac-v3-turquoise, #00bbbb);
  border-color: var(--ac-v3-turquoise, #00bbbb);
}
.ac-v3-lead-form-lean__chips .ac-v3-lead-form-lean__chip:has(.ac-v3-lead-form-search__radio-input:checked) .ac-v3-lead-form-search__radio-label {
  color: #ffffff;
}
.ac-v3-lead-form-lean__chips .ac-v3-lead-form-search__radio-input:focus-visible ~ .ac-v3-lead-form-search__radio-label {
  outline: 2px solid var(--ac-v3-turquoise, #00bbbb);
  outline-offset: 4px;
}
/* Half-veld-paar (Nick 03-07): twee opeenvolgende text_fields met 'half' => true
   naast elkaar op desktop (autoverzekering: schadevrije jaren + km/jaar);
   mobiel stapelt de grid. */
.ac-v3-lead-form-lean__textfield-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
@media (max-width: 640px) {
  .ac-v3-lead-form-lean__textfield-pair { grid-template-columns: 1fr; }
}

/* Prefix-tekstveld (bv. tellerstand zonder prefix, budget met €) */
.ac-v3-lead-form-lean__textfield {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 280px;
}
.ac-v3-lead-form-lean__textfield--prefixed .ac-v3-lead-form-full__input {
  padding-left: 30px !important;
}
.ac-v3-lead-form-lean__field-prefix {
  position: absolute;
  left: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ac-v3-muted);
  pointer-events: none;
}
/* Inklapbare vrije tekst (optioneel detailveld) */
.ac-v3-lead-form-lean__details {
  margin-bottom: 18px;
}
.ac-v3-lead-form-lean__summary {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 15px;
  font-weight: 700;
  color: var(--ac-v3-turquoise-dark, #0891b2);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ac-v3-lead-form-lean__summary::-webkit-details-marker { display: none; }
.ac-v3-lead-form-lean__summary::before {
  content: "+";
  font-size: 17px;
  line-height: 1;
}
.ac-v3-lead-form-lean__details[open] .ac-v3-lead-form-lean__summary::before {
  content: "\2212"; /* minus */
}
.ac-v3-lead-form-lean__details .ac-v3-lead-form-full__textarea {
  margin-top: 8px;
}

/* ---- reviews_carousel COMPACT variant — 1-rij quotes, geen aside ---- */
.ac-v3-hero-reviews--compact {
  padding: 32px 0 24px;
  background: transparent;
}
.ac-v3-hero-reviews--compact .ac-v3-hero-reviews__inner {
  max-width: var(--ac-v3-svc-max-width, 1120px);
  padding: 0 20px;
}
.ac-v3-hero-reviews__compact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.ac-v3-hero-reviews__compact-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ac-v3-muted);
}
.ac-v3-hero-reviews--compact .ac-v3-hero-reviews__layout {
  display: block;
}
.ac-v3-reviews-carousel--compact .ac-v3-reviews-carousel__track {
  gap: 12px;
}
.ac-v3-review-card--compact {
  flex: 0 0 320px;
  min-height: auto;
  padding: 14px 16px;
  border-radius: 12px;
}
.ac-v3-review-card--compact .ac-v3-review-card__title {
  font-size: 14px;
  margin: 4px 0;
}
.ac-v3-review-card--compact .ac-v3-review-card__body {
  font-size: 13.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ac-v3-review-card--compact .ac-v3-review-card__author {
  font-size: 12px;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .ac-v3-hero-reviews--compact { padding: 24px 0 20px; }
  .ac-v3-review-card--compact { flex-basis: 80vw; }
}

/* ---- inruil_callout — 1-regel banner onder de knop ---- */


/* ---- market_context — empathie-sectie "Hoe werkt de markt" ---- */
.ac-v3-market-context {
  padding: 48px 20px;
  background: #f8fafc;
}
.ac-v3-market-context__inner {
  max-width: 680px;
  margin: 0 auto;
}
.ac-v3-market-context__title {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 24px;
  font-weight: 700;
  color: var(--ac-v3-body);
  margin: 0 0 14px;
}
.ac-v3-market-context__intro {
  font-size: 15px;
  color: var(--ac-v3-body);
  line-height: 1.6;
  margin: 0 0 20px;
}
.ac-v3-market-context__questions {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ac-v3-market-context__question {
  font-size: 14.5px;
  color: var(--ac-v3-body);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.ac-v3-market-context__question::before {
  content: '?';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--ac-v3-turquoise-dark, #0891b2);
}
.ac-v3-market-context__closing {
  font-size: 15px;
  color: var(--ac-v3-body);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 820px) {
  .ac-v3-market-context { padding: 36px 16px; }
  .ac-v3-market-context__title { font-size: 20px; }
}

/* ---- why_autocoach — "wij zijn de oplossing", ná market_context (Bas 18-06).
   Witte bg (market_context is grijs) zodat de twee blokken visueel verschillen:
   eerst de markt duiden, dan het antwoord. ---- */
.ac-v3-why-autocoach {
  padding: 48px 20px;
  background: var(--ac-v3-white, #fff);
}
.ac-v3-why-autocoach__inner {
  max-width: 680px;
  margin: 0 auto;
}
.ac-v3-why-autocoach__title {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 22px;
  font-weight: 700;
  color: var(--ac-v3-body);
  margin: 0 0 14px;
}
.ac-v3-why-autocoach__intro {
  font-size: 15px;
  color: var(--ac-v3-body);
  line-height: 1.6;
  margin: 0 0 20px;
}
.ac-v3-why-autocoach__points {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ac-v3-why-autocoach__point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ac-v3-body);
  line-height: 1.5;
}
.ac-v3-why-autocoach__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ac-v3-turquoise-light, #e6f7f7);
  color: var(--ac-v3-turquoise-dark, #009999);
}
.ac-v3-why-autocoach__closing {
  font-size: 15px;
  color: var(--ac-v3-body);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 820px) {
  .ac-v3-why-autocoach { padding: 36px 16px; }
  .ac-v3-why-autocoach__title { font-size: 20px; }
}

/* ---- disclaimer — kleine, rustige juridische disclaimer (AFM e.d.) ---- */
.ac-v3-disclaimer {
  padding: 8px 20px 44px;
  background: var(--ac-v3-white, #fff);
}
.ac-v3-disclaimer__inner {
  /* Feedback AC.nl (Nick 29-06, B2): disclaimer-blok op volledige content-breedte
     (was 680px = smaller dan de overige secties); lijnt nu uit met de rest. */
  max-width: var(--ac-v3-svc-max-width, 1120px);
  margin: 0 auto;
  padding: 16px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
/* Feedback AC.nl #6 (Bas/Nick): gestandaardiseerd disclaimer-"blokwoord" —
   titel kleiner/subtieler als label, bodytekst iets groter & leesbaarder.
   Gedeelde class → werkt door op alle pagina's met disclaimer. */
.ac-v3-disclaimer__title {
  /* Nick 29-06: titel gelijk/ietsjes groter dan de bodytekst (13.5px), kleiner dan
     de sectie-/categorietitels. Was 12px (< body). */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ac-v3-body);
  margin: 0 0 5px;
}
.ac-v3-disclaimer__text {
  font-size: 13.5px;
  color: var(--ac-v3-muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 820px) {
  .ac-v3-disclaimer { padding: 4px 16px 32px; }
}
/* Feedback AC.nl (Bas/Nick 29-06, B1): VDP-disclaimer 'Disclaimer'-kop gebruikte de
   globale h5-grootte (te overheersend t.o.v. de kleine infotekst). Gelijktrekken met
   de kleine disclaimer-label-stijl (12px) zodat de disclaimer overal dezelfde rustige
   stijl heeft. Scoped binnen .ac-vdp-v3; legacy general.css blijft ongemoeid. */
.ac-vdp-v3 .portal-disclaimer h5 {
  /* Nick 29-06: titel gelijk/ietsjes groter dan de bodytekst eronder (~12.8px),
     maar kleiner dan de voertuiginfo-categorietitels (18px). Was 12px (< body). */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 5px;
  line-height: 1.3;
}

/* ---- services_cross_link — uniform grid van alle diensten onderaan ---- */
.ac-v3-services-cross-link {
  padding: 40px 20px;
  background: #f8fafc;
}
.ac-v3-services-cross-link__inner {
  max-width: var(--ac-v3-svc-max-width, 1120px);
  margin: 0 auto;
}
.ac-v3-services-cross-link__head {
  /* Nick 29-06: vaste breedte gelijk aan de form-sectie (760px), gecentreerd in de
     sectie, tekst links — zodat kop + diensten uitlijnen met het formulier en niet
     'verspringen' / te ver naar links staan op desktop. */
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: left;
}
.ac-v3-services-cross-link__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-v3-turquoise-dark, #0891b2);
  margin-bottom: 4px;
}
.ac-v3-services-cross-link__title {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 26px;
  font-weight: 700;
  color: var(--ac-v3-body);
  margin: 0 0 8px;
}
.ac-v3-services-cross-link__intro {
  font-size: 15px;
  color: var(--ac-v3-body);
  margin: 0;
}
/* --home (Nick 08-07): homepage-variant. Witte bg + kop op 'section-head'-formaat,
   gelijkgetrokken aan de 'Waarom Autocoach'-sectie eronder: gecentreerd, met
   .ac-v3-section-eyebrow + .ac-v3-section-title-typografie. Geen intro-regel. */
.ac-v3-services-cross-link--home {
  background: var(--ac-v3-white, #fff);
}
.ac-v3-services-cross-link--home .ac-v3-services-cross-link__head {
  max-width: 760px;
  text-align: center;
}
.ac-v3-services-cross-link--home .ac-v3-services-cross-link__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ac-v3-turquoise);
  margin-bottom: 10px;
}
.ac-v3-services-cross-link--home .ac-v3-services-cross-link__title {
  font-family: var(--ac-v3-font-heading);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ac-v3-black);
  margin: 0;
}
/* Feedback AC.nl (Nick 25-06): 'flush'-variant voor de subdomein-home —
   geen grijze achtergrond, kop + intro links uitgelijnd i.p.v. gecentreerd. */
.ac-v3-services-cross-link--flush {
  background: transparent;
}
.ac-v3-services-cross-link--flush .ac-v3-services-cross-link__head {
  text-align: left;
}
/* Intermezzo-variant: licht-turquoise band voor de blog-/inspiratie-pagina's. Onderscheidt
   het "even tussendoor"-blok van de witte artikeltekst én van het grijze herhaalblok
   onderin. Turquoise bovenrand = rustige, on-brand band-cue voor nieuwe blog-bezoekers. */
.ac-v3-services-cross-link--intermezzo {
  background: var(--ac-v3-turquoise-light, #e6f7f7);
  border-top: 3px solid var(--ac-v3-turquoise, #00bbbb);
  border-bottom: 3px solid var(--ac-v3-turquoise, #00bbbb);
}
/* Compacte variant voor de blog-/inspiratie-pagina's: strakker verticaal ritme (kleinere
   sectie-padding, kop-marge en regelhoogte) dan de servicepagina-versie. Alleen op de blog. */
.ac-v3-services-cross-link--compact {
  padding-top: 28px;
  padding-bottom: 28px;
}
.ac-v3-services-cross-link--compact .ac-v3-services-cross-link__head {
  margin-bottom: 14px;
}
.ac-v3-services-cross-link--compact .ac-v3-services-cross-link__tile {
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Hover: rustig turquoise accent i.p.v. grijs (Nick). rgba adapteert op beide banden
   (turquoise-band én grijze band) naar een iets donkerdere turquoise-tint. */
.ac-v3-services-cross-link--compact .ac-v3-services-cross-link__tile:hover {
  background: rgba(0, 187, 187, 0.16);
}
/* Bewust GEEN speciale behandeling van de laatste (oneven) tegel: net als op de
   servicepagina's staat 'Occasions' gewoon links onderin het grid (Nick 06-07:
   uitlijning 1-op-1 gelijk aan de servicepagina's). */
/* Blog-detail: extra ruimte boven de artikeltekst na het full-bleed intermezzo, zodat
   'Laatst bijgewerkt …' / de eerste alinea niet strak tegen de band plakt (Nick). */
.inspiration-body {
  padding-top: 48px;
}
/* Feedback AC.nl (Nick 29-06): dienstenblok 'net zo als de VDP' — geen kaartjes per
   regel, maar losse stroken (1 kolom, gecentreerd) met dunne scheidingslijntjes,
   gekleurd icoon-rondje + pijl. Oogt cleaner. */
.ac-v3-services-cross-link__grid {
  /* Nick 01-07: 2-koloms op desktop — 11 diensten als 1 kolom werd te lang.
     Vaste breedte 760px (gelijk aan het formulier), gecentreerd. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  max-width: 760px;
  margin: 0 auto;
}
/* Eerste rij (beide tegels) geen top-scheidingslijn in de 2-koloms opzet. */
.ac-v3-services-cross-link__grid > .ac-v3-services-cross-link__tile:nth-child(-n+2) { border-top: 0; }
@media (max-width: 720px) {
  /* Mobiel terug naar 1 kolom; de 2e tegel krijgt zijn scheidingslijn weer. */
  .ac-v3-services-cross-link__grid { grid-template-columns: 1fr; }
  .ac-v3-services-cross-link__grid > .ac-v3-services-cross-link__tile:nth-child(2) { border-top: 1px solid var(--ac-v3-gray-100); }
}
.ac-v3-services-cross-link__tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ac-v3-gray-100);
  border-radius: 0;
  padding: 12px 6px;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transition: background-color .12s ease;
}
.ac-v3-services-cross-link__grid > .ac-v3-services-cross-link__tile:first-child { border-top: 0; }
.ac-v3-services-cross-link__tile:hover {
  background: var(--ac-v3-gray-50);
}
/* Compacte variant: rond gekleurd icoon per service (kleur via inline style
 * op het element, met deze regels als fallback voor services zonder kleur). */
.ac-v3-services-cross-link__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  /* Feedback AC.nl (Bas/Nick 29-06): achtergrondcirkel weg — alleen het line-icon in
     z'n eigen kleur (inline). Span houdt de breedte voor nette uitlijning. */
  color: var(--ac-v3-turquoise-dark, #0891b2);
  flex-shrink: 0;
}
.ac-v3-services-cross-link__tile-body { flex: 1; min-width: 0; }
.ac-v3-services-cross-link__tile-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ac-v3-body);
}
/* Schild tegen general.css `.v2-home-header h3 { margin-top: 20px; }` (r1468):
   die regel (0,1,1) wint van onze enkele component-class (0,1,0) en duwde
   tile-titels 10px onder het optische midden (Bas-feedback 2026-06-11).
   Spiegel de lekkende selector zodat het schild exact even ver reikt. */
.v2-home-header .ac-v3-services-cross-link__tile-title,
.v2-home-header .ac-v3-tile__title {
  margin-top: 0;
}
.ac-v3-services-cross-link__tile-arrow {
  color: #94a3b8;
  flex-shrink: 0;
  transition: color .15s ease, transform .15s ease;
}
.ac-v3-services-cross-link__tile:hover .ac-v3-services-cross-link__tile-arrow {
  color: var(--ac-v3-turquoise-dark, #0891b2);
  transform: translateX(3px);
}

/* Nick 01-07: oude @max-900 '2-koloms'-forcering VERWIJDERD — die overschreef de
   mobiele 1-koloms (grid werd 2 te smalle kolommen op de telefoon). Nu: desktop
   2-koloms via de basisregel + mobiel 1-koloms via @max-720 hierboven. */
@media (max-width: 600px) {
  .ac-v3-services-cross-link { padding: 32px 16px; }
  .ac-v3-services-cross-link__title { font-size: 22px; }
  .ac-v3-services-cross-link__tile { padding: 11px 4px; }
}

/* ---------------------------------------------------------------------------
 * process_photo_strip (iter4) — carousel met cirkel+nummer overlay
 * ------------------------------------------------------------------------- */
.ac-v3-process-strip {
  padding: 48px 20px 40px;
  background: #ffffff;
}
.ac-v3-process-strip__inner {
  max-width: var(--ac-v3-svc-max-width, 1120px);
  margin: 0 auto;
}
.ac-v3-process-strip__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.ac-v3-process-strip__header-text { flex: 1; min-width: 0; }
.ac-v3-process-strip__title {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 26px;
  font-weight: 700;
  color: var(--ac-v3-body);
  margin: 0 0 6px;
}
.ac-v3-process-strip__intro {
  margin: 0;
  font-size: 15px;
  color: var(--ac-v3-body);
  line-height: 1.5;
  max-width: 620px;
}
.ac-v3-process-strip__nav {
  display: none;
  gap: 8px;
}
/* Feedback AC.nl (Nick 09-07): op desktop moeten de prev/next-pijlen zichtbaar
   zijn zodat je door de stappen kunt bladeren (stonden globaal op display:none →
   op desktop geen navigatie mogelijk). De JS zet
   .ac-v3-process-strip--has-overflow zodra er meer slides zijn dan passen, zodat
   de pijlen alleen verschijnen als er echt iets te scrollen valt. */
.ac-v3-process-strip--has-overflow .ac-v3-process-strip__nav {
  display: flex;
}
.ac-v3-process-strip__btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ac-v3-process-strip__btn:hover:not(:disabled) {
  border-color: var(--ac-v3-turquoise-dark, #0891b2);
  color: var(--ac-v3-turquoise-dark, #0891b2);
}
.ac-v3-process-strip__btn:disabled { opacity: 0.4; cursor: default; }
.ac-v3-process-strip__btn[data-ac-v3-process-strip-prev] svg { transform: scaleX(-1); }

.ac-v3-process-strip__track-wrap {
  margin: 0 -8px;
}
.ac-v3-process-strip__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 8px 6px;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ac-v3-process-strip__track::-webkit-scrollbar { display: none; }

.ac-v3-process-strip__slide {
  position: relative;
  flex: 0 0 calc((100% - 28px) / 3); /* desktop 3 visible */
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  background: #1f2937;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 18px rgba(15,23,42,0.10);
}
/* Slide-overlay: dark gradient scrim onder zodat tekst leesbaar is op
 * photo-slides. Wordt door .ac-v3-process-strip__slide--text overschreven
 * naar display:none zodat text-slides geen scrim hebben. */
.ac-v3-process-strip__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(15,23,42,0) 0%,
    rgba(15,23,42,0) 38%,
    rgba(15,23,42,0.45) 64%,
    rgba(15,23,42,0.88) 100%);
  pointer-events: none;
}
.ac-v3-process-strip__number {
  /* C1 (Feedback AC.nl, Nick 29-06): cirkel naar LINKSBOVEN (overruled de WS3-keuze
     van 24-06 waarbij hij rechtsboven stond). Absoluut t.o.v. de slide
     (position:relative). z-index boven de scrim (::after, z=1) + overlay (z=2). */
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ac-v3-brand-yellow, #ffc62b);
  color: #1a1a1a;
  font-family: var(--ac-v3-font-display, inherit);
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.20);
}
/* Voertuig-aware "al gezet"-stap (Bas 18-06b): nummer → turquoise check +
   "Al gezet"-badge + i'tje die uitlegt waarom de stap al gezet is. */
.ac-v3-process-strip__slide--done .ac-v3-process-strip__number {
  background: var(--ac-v3-turquoise, #00bbbb);
  color: #ffffff;
}
.ac-v3-process-strip__done-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ac-v3-turquoise-light, #e6f7f7);
  color: var(--ac-v3-turquoise-dark, #009999);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  /* Feedback AC.nl (Nick 29-06): de badge erfde de text-shadow van de stap-titel
     (bedoeld voor witte tekst op foto) → donkere schaduw op de lichte badge maakte
     'm onleesbaar. Hier expliciet uit. */
  text-shadow: none;
}
.ac-v3-process-strip__done-tip { vertical-align: middle; margin-left: 2px; }
.ac-v3-process-strip__overlay {
  /* WS3: cirkel staat nu los rechtsboven (geen flex-rij meer). De overlay onderin
     draagt alleen de titel + body op de volle breedte van de tegel. */
  position: absolute;
  inset: auto 16px 16px 16px;
  z-index: 2;
  color: #ffffff;
}
.ac-v3-process-strip__overlay-text { min-width: 0; }
.ac-v3-process-strip__step-title {
  margin: 0 0 4px;
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,0.30);
  /* Feedback Nick: GEEN 2-regel min-height/-webkit-box meer. Die centreerde de
     1-regel-titel verticaal in een 2-regel-box → groot gat titel↔body + cijfer
     leek te hoog. Titel = natuurlijke hoogte, body sluit er strak op aan; cijfer
     lijnt zo uit met de bovenkant van de titel-tekst. (Stap-titels zijn kort.) */
}
.ac-v3-process-strip__step-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  /* WS1: reserveer 4 regels + cap op 4 regels zodat titel + cijfer op elke slide
     op dezelfde hoogte staan; voorkomt verspringen tijdens swipen (slides met
     verschillend lange beschrijving). */
  min-height: 5.8em; /* 4 regels @ line-height 1.45 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.30);
}

@media (max-width: 980px) {
  .ac-v3-process-strip__slide { flex-basis: calc((100% - 14px) / 2); }
}
@media (max-width: 720px) {
  .ac-v3-process-strip { padding: 28px 16px; }
  .ac-v3-process-strip__header { flex-direction: column; align-items: stretch; }
  /* Mobiel: swipe volstaat, geen pijlen tonen (voorkomt dubbele affordance). */
  .ac-v3-process-strip--has-overflow .ac-v3-process-strip__nav { display: none; }
  .ac-v3-process-strip__title { font-size: 22px; }
  .ac-v3-process-strip__slide {
    flex-basis: 78%;
    aspect-ratio: 4 / 5;
  }
  .ac-v3-process-strip__number {
    top: 12px; left: 12px; right: auto;
    width: 34px; height: 34px;
    font-size: 15px;
  }
  .ac-v3-process-strip__step-title { font-size: 15.5px; }
  .ac-v3-process-strip__step-body { font-size: 13px; }
}

/* ---- process_photo_strip PLACEHOLDER-slide (nog geen foto) ----
 * Bas 08-07: stappen zonder foto krijgen een lichtgrijze placeholder in
 * dezelfde vorm als een fotoslide (4/5, nummer linksboven, tekst onderin), met
 * de tekst er donker op. Zo kun je de carrousel doorlopen en meteen zien welke
 * stappen nog een foto missen; het grijze vlak reserveert de fotoplek. Zodra
 * een stap een 'image' krijgt, valt hij automatisch terug op de fotostyling.
 * Placeholder en fotoslide staan vrij naast elkaar in dezelfde strip en houden
 * dezelfde hoogte (beide erven aspect-ratio 4/5 van de basis-slide). */
.ac-v3-process-strip__slide--text {
  background: #e8eaed;
  /* Feedback AC.nl (Nick 09-07): placeholder-kaarten erfden nog de foto-drop-shadow
     van de basis-slide (zag eruit als een "zwevende" grijze kaart → gekke schaduw).
     Hier expliciet uit — vlak grijs vlak zoals de comment hierboven al beschreef. */
  box-shadow: none;
}
/* Geen donkere scrim op de placeholder (die is voor witte tekst op foto). */
.ac-v3-process-strip__slide--text::after {
  display: none;
}
/* Tekst donker i.p.v. wit (geen foto eronder), zonder foto-schaduw. Nummer
   (geel, linksboven) en overlay-positie erven van de basis-slide. */
.ac-v3-process-strip__slide--text .ac-v3-process-strip__overlay,
.ac-v3-process-strip__slide--text .ac-v3-process-strip__step-title,
.ac-v3-process-strip__slide--text .ac-v3-process-strip__step-body {
  color: var(--ac-v3-body);
  text-shadow: none;
}

/* iter6: lead-form-full pricing-header CSS verwijderd. Pricing is nu een
   standalone section boven het form (zie .ac-v3-investment-pricing). */

/* ---- iter8: aankoopservice polish ronde 3 ---- */

/* Alle sectie-titels links uitlijnen (behalve hero) */
.ac-v3-service-v2 .ac-v3-usp-split__title,
.ac-v3-service-v2 .ac-v3-usp-split__intro,
.ac-v3-service-v2 .ac-v3-process-strip__title,
.ac-v3-service-v2 .ac-v3-process-strip__intro,
.ac-v3-service-v2 .ac-v3-investment-pricing__heading,
.ac-v3-service-v2 .ac-v3-lead-form-full__title,
.ac-v3-service-v2 .ac-v3-services-cross-link__head,
.ac-v3-service-v2 .ac-v3-market-context__title,
.ac-v3-service-v2 .ac-v3-faq__title {
  text-align: left;
}
/* Titels consistent 22px (behalve hero H1). Elke content-sectie zelfde grootte
   (Bas/Nick 18-06b — why_autocoach toegevoegd, stond op 24px). */
.ac-v3-service-v2 .ac-v3-usp-split--flat .ac-v3-usp-split__title,
.ac-v3-service-v2 .ac-v3-process-strip__title,
.ac-v3-service-v2 .ac-v3-investment-pricing__heading,
.ac-v3-service-v2 .ac-v3-services-cross-link__title,
.ac-v3-service-v2 .ac-v3-market-context__title,
.ac-v3-service-v2 .ac-v3-why-autocoach__title,
.ac-v3-service-v2 .ac-v3-faq__title {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 22px;
  font-weight: 700;
}
/* Max 50px spacing per sectie op mobile */
@media (max-width: 900px) {
  .ac-v3-service-v2 > section,
  .ac-v3-service-v2 > .ac-v3-lead-form-full {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .ac-v3-service-v2 .ac-v3-usp-split--flat .ac-v3-usp-split__title,
  .ac-v3-service-v2 .ac-v3-process-strip__title,
  .ac-v3-service-v2 .ac-v3-services-cross-link__title,
  .ac-v3-service-v2 .ac-v3-market-context__title,
  .ac-v3-service-v2 .ac-v3-why-autocoach__title,
  .ac-v3-service-v2 .ac-v3-faq__title {
    font-size: 20px;
  }
}
/* Witruimte tussen final-CTA en footer verwijderen */
.ac-v3-service-v2 {
  margin-bottom: 0;
  padding-bottom: 0;
}
/* Desktop sectie-spacing ook strakker */
.ac-v3-service-v2 {
  --ac-v3-svc-section-py: 48px;
}
/* Actieve dienst highlighten */
/* Active/current-page tile: subtiele "je bent hier"-markering (lichte tint +
 * faint border), geen prominente turquoise rand meer. */
.ac-v3-services-cross-link__tile--active {
  /* Nick 29-06: subtieler — geen achtergrond/rand, alleen de titel in AC donker-turquoise. */
  background: transparent;
}
.ac-v3-services-cross-link__tile--active .ac-v3-services-cross-link__tile-title {
  color: var(--ac-v3-turquoise-dark);
}
/* Occasion-button in diensten-sectie: gecentreerd, shrink-to-content
 * (niet meer full-width). */
.ac-v3-services-cross-link__occasion-cta {
  margin-top: 24px;
  text-align: center;
}
.ac-v3-services-cross-link__occasion-cta a {
  display: inline-flex;
  width: auto;
}
/* VDP-aware vehicle hero */

/* Mobile: foto full-width bovenaan met overlay */
/* Mobile: foto full-width bovenaan met overlay */
.ac-v3-task-hero__vehicle-photo {
  position: relative;
  overflow: hidden;
  height: 160px;
  margin: -20px -24px 12px;
}
.ac-v3-task-hero__vehicle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.ac-v3-task-hero__vehicle-photo-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 16px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
}
.ac-v3-task-hero__vehicle-photo-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
@media (max-width: 900px) {
  .ac-v3-task-hero__vehicle-photo {
    margin: -20px -24px 8px;
  }
  /* Minder ruimte tussen hero en USP bij vehicle-variant */
  .ac-v3-task-hero--vehicle + .ac-v3-usp-split {
    padding-top: 8px;
  }
}

/* Desktop: split layout via __vehicle-grid wrapper */
@media (min-width: 901px) {
  .ac-v3-task-hero__vehicle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    max-width: var(--ac-v3-svc-max-width, 1100px);
    margin: 0 auto;
  }
  .ac-v3-task-hero--vehicle .ac-v3-task-hero__vehicle-photo {
    order: 2;
    height: 300px;
    margin: 0;
    border-radius: 16px;
  }
  .ac-v3-task-hero--vehicle .ac-v3-task-hero__vehicle-photo img {
    height: 100%;
  }
  .ac-v3-task-hero--vehicle .ac-v3-task-hero__inner {
    order: 1;
    padding-right: 40px;
  }
  .ac-v3-task-hero--vehicle .ac-v3-task-hero__content {
    text-align: left;
    align-items: flex-start;
    max-width: none;
  }
  .ac-v3-task-hero--vehicle .ac-v3-task-hero__title,
  .ac-v3-task-hero--vehicle .ac-v3-task-hero__subtitle {
    text-align: left;
  }
}
/* Hero marge: geconsolideerd in base-rules (regel 3432 + 5688) */


/* ============================================================================
 * VDP V3  (.ac-vdp-v3)   —  kenteken-detailpagina (Portal/detail.ctp)
 * ----------------------------------------------------------------------------
 * BEWUST namespace-only: GEEN .ac-v3-root op de VDP-body (zou de globale
 * :where(h1-h6/p/a)-resets over de legacy-Bootstrap-body leggen en utilities
 * als mb-3 / .btn-primary-op-<a> / linkkleuren breken — plan P0-1). We stylen
 * hier alleen de NIEUWE V3-elementen; de legacy spec-tabellen, modals en links
 * houden hun bestaande _autocoach/css/general.css-styling. Mobiel-first +
 * compact (Nick 2026-05-29).
 * ========================================================================== */

.ac-vdp-v3 {
  /* Anker-offset (OQ-4, Playwright-gemeten op test-autokopen). Header en nav
     staan BEIDE op top:0 en overlappen (header z:50 dekt nav z:40 af) i.p.v. te
     stapelen, dus de gedekte hoogte = max(header, nav), niet de som.
     Desktop: max(header 74, nav 63) ~= 74. Mobiel: max(header 54, nav 63) ~= 63. */
  --ac-vdp-v3-sticky-offset: 86px;
}
@media (max-width: 991px) {
  .ac-vdp-v3 { --ac-vdp-v3-sticky-offset: 74px; }
}

/* ---- Carwow-layout: links 4/5 content, rechts 1/5 sticky diensten-aside --- *
 * Bronvolgorde hero -> aside -> nav -> main. Mobiel: 1 kolom, stapelt in die
 * volgorde (diensten direct na de hero). Desktop: 2 koloms via grid-areas;
 * aside overspant beide rijen rechts en is sticky. */
.ac-vdp-v3__layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "hero" "aside" "nav" "main";
  column-gap: 28px;
}
.ac-vdp-v3__hero  { grid-area: hero; min-width: 0; }
.ac-vdp-v3__aside { grid-area: aside; min-width: 0; }
.ac-vdp-v3-nav    { grid-area: nav; min-width: 0; }
.ac-vdp-v3__main  { grid-area: main; min-width: 0; }

@media (min-width: 992px) {
  .ac-vdp-v3__layout {
    grid-template-columns: minmax(0, 4fr) minmax(248px, 1fr);
    grid-template-areas:
      "hero  aside"
      "main  aside";
    align-items: start;
  }
  /* Veilingen renderen geen diensten-aside (Codex P2): geen lege rechterkolom
     reserveren -> 1-koloms layout. */
  .ac-vdp-v3__layout--full {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "main";
  }
}

/* ---- Hero-grid: titel naast foto op desktop, boven foto op mobiel -------- */
.ac-vdp-v3__hero-title  { min-width: 0; }
.ac-vdp-v3__hero-photo  { min-width: 0; }
.ac-vdp-v3__hero-info   { min-width: 0; }

/* Mobiel (default): natuurlijke bronvolgorde titel -> foto -> info. */
.ac-vdp-v3__hero-title { margin-bottom: 14px; }
.ac-vdp-v3__hero-photo { margin-bottom: 16px; }

@media (min-width: 992px) {
  .ac-vdp-v3__hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "photo title"
      "photo info";
    column-gap: 32px;
    align-items: start;
  }
  .ac-vdp-v3__hero-title { grid-area: title; margin-bottom: 16px; }
  .ac-vdp-v3__hero-photo { grid-area: photo; align-self: start; margin-bottom: 0; }
  .ac-vdp-v3__hero-info  { grid-area: info; }
}

/* ---- Titel-hierarchie ---------------------------------------------------- */
.ac-vdp-v3__title {
  /* DEV-051 (Bas-handoff 2026-06-11): Menco oogt te speels en te dominant
     voor de VDP-H1 — bodyfont (Inter) + kleiner. Alleen hier gescoped, de
     globale heading-token blijft onaangeraakt. */
  font-family: var(--ac-v3-font-body);
  margin: 0 0 6px;
  line-height: 1.15;
  color: var(--ac-v3-black);
  letter-spacing: -0.01em;
}
.ac-vdp-v3__title-main {
  display: block;
  font-size: 28px;
  font-weight: 700;
}
.ac-vdp-v3__title-variant {
  display: block;
  margin-top: 3px;
  /* Feedback AC.nl (Nick 29-06): uitvoering-subtitel was lichtgrijs en oogde te
     'soft' → zwart + een tandje groter/zwaarder zodat hij harder oogt. */
  font-size: 20px;
  font-weight: 600;
  color: var(--ac-v3-black);
  line-height: 1.3;
}
/* Feedback AC.nl (Nick 29-06): terug-knop op de VDP-fotopagina (history.back). */
.ac-vdp-v3__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 2px;
  padding: 0;
  font-family: var(--ac-v3-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ac-v3-turquoise-dark);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
}
.ac-vdp-v3__back:hover { color: var(--ac-v3-turquoise); }
.ac-vdp-v3__back img { width: 16px; height: 16px; }
.ac-vdp-v3__back--bottom { margin: 18px 0 28px; }

/* C4 (Feedback AC.nl, Nick 29-06): de vaste "Verfijn resultaten"-filter-CTA op het
   /aanbod-overzicht oogde als een volle balk die door de listing sneed. Nu een
   gecentreerde zwevende pill met duidelijke schaduw → leest als bewuste actieknop.
   Scoped op de --portal-root-variant (dubbele class = wint van legacy general.css);
   legacy .filter-result-wrapper blijft ongemoeid voor andere plekken. */
.filter-result-wrapper.filter-result-wrapper--portal-root {
  left: 50%;
  right: auto;
  width: auto;
  max-width: calc(100% - 32px);
  transform: translateX(-50%) translateZ(0);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.filter-result-wrapper.filter-result-wrapper--portal-root .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 999px;
  padding: 12px 30px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.22);
  white-space: nowrap;
}
/* Feedback AC.nl (Bas/Nick 25-06): kenteken als platte tekst BOVEN de titel,
   subtitle-stijl (body-font, grijs) i.p.v. de gele kentekenplaat. */
.ac-vdp-v3__plate-text {
  display: block;
  margin: 0 0 2px; /* Nick 25-06: compacter — minder marge boven/onder */
  font-family: var(--ac-v3-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-v3-gray-600);
}
.ac-vdp-v3__plate {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 3px 10px 3px 22px;
  position: relative;
  background: var(--ac-v3-plate-yellow);
  color: #111;
  border-radius: 5px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}

/* NL-band links op de plaat. */
.ac-vdp-v3__plate::before {
  content: "NL";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ac-v3-plate-blue);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 5px 0 0 5px;
}

.ac-vdp-v3__summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ac-v3-gray-700);
}

@media (min-width: 992px) {
  /* DEV-051: was 46px — "neemt minder overdreven veel aandacht". */
  .ac-vdp-v3__title-main { font-size: 34px; }
  .ac-vdp-v3__title-variant { font-size: 21px; }
}

/* ---- Sectie-koppen (H2) -------------------------------------------------- */
.ac-vdp-v3__section-title {
  font-family: var(--ac-v3-font-heading);
  font-size: 21px;
  font-weight: 700;
  color: var(--ac-v3-black);
  letter-spacing: -0.01em;
}
@media (min-width: 992px) {
  .ac-vdp-v3__section-title { font-size: 24px; }
}

/* ---- Anker-offset voor sticky nav/header (modern, geen JS-offset) -------- */
.ac-vdp-v3 .vehicle-property-item[id],
.ac-vdp-v3 #diensten {
  scroll-margin-top: var(--ac-vdp-v3-sticky-offset);
}

/* ---- Sticky sectie-navigatie (vervangt .vehicle-options-navigation) ------ */
.ac-vdp-v3-nav {
  position: sticky;
  top: 0;                 /* < .ac-v3-header (z-index 50); header heeft voorrang */
  z-index: 40;
  background: var(--ac-v3-white);
  border-bottom: 1px solid var(--ac-v3-gray-200);
  margin: 18px 0 6px;
}
.ac-vdp-v3-nav__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ac-vdp-v3-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 8px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0; /* flex-item met overflow-x mag krimpen i.p.v. naar max-content uitzetten */
}
.ac-vdp-v3-nav ul::-webkit-scrollbar { display: none; }
.ac-vdp-v3-nav li { flex: 0 0 auto; }
/* Scope op `li a` zodat deze tab-styling NIET de losse nav-CTA (.ac-vdp-v3-nav__cta,
   geen <li>) raakt — anders overschreef `.ac-vdp-v3-nav a` (hogere specificity)
   diens display:none en lekte de desktop-CTA naar mobiel. */
.ac-vdp-v3-nav li a {
  display: inline-block;
  padding: 7px 13px;
  border-radius: var(--ac-v3-radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ac-v3-gray-600);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s var(--ac-v3-ease), background-color .15s var(--ac-v3-ease);
}
.ac-vdp-v3-nav li a:hover { color: var(--ac-v3-turquoise-dark); }
.ac-vdp-v3-nav li a.is-active {
  color: var(--ac-v3-turquoise-dark);
  background: var(--ac-v3-turquoise-light);
}
/* Sectie-nav is mobile-only: op desktop nemen de sticky diensten-sidebar +
   scrollen het over (carwow-look). De scroll-spy (initVdpScrollSpy) blijft de
   actieve sectie markeren voor de mobiele nav. */
@media (min-width: 992px) {
  .ac-vdp-v3-nav { display: none; }
}

/* ---- Diensten-sidebar (sticky aside, carwow-stijl) ----------------------- *
 * Kop "Direct regelen voor deze {merk}" + 6 compacte cross-link-rijen
 * (icoon + label + pijl). Desktop: sticky in de rechter 1/5-kolom. */
.ac-vdp-v3__aside { min-width: 0; margin: 0 0 24px; }
/* Feedback AC.nl (Bas/Nick 29-06): serviceblok niet langer als kaart met rand +
   schaduw, maar als losse stroken op volle breedte. Geen border/box-shadow/kaart-
   achtergrond; de scheidingslijntjes TUSSEN de diensten blijven (onderscheid),
   pijltjes rechts + klikbare rijen blijven (zie .ac-vdp-v3__aside-row hieronder). */
.ac-vdp-v3__aside-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.ac-vdp-v3__aside-title {
  /* DEV-051: dienstenblok-titel typografisch aansluiten op de H1 (Inter). */
  font-family: var(--ac-v3-font-body);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ac-v3-black);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.ac-vdp-v3__aside-title .ac-v3-punt { color: var(--ac-v3-yellow); }
.ac-vdp-v3__aside-list { list-style: none; margin: 0; padding: 0; }
.ac-vdp-v3__aside-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-top: 1px solid var(--ac-v3-gray-100);
  text-decoration: none;
  color: inherit;
  transition: background-color .12s var(--ac-v3-ease);
}
.ac-vdp-v3__aside-list li:first-child .ac-vdp-v3__aside-row { border-top: 0; }
.ac-vdp-v3__aside-row:hover { background: var(--ac-v3-gray-50); }
.ac-vdp-v3__aside-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ac-vdp-v3__aside-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}
.ac-vdp-v3__aside-arrow {
  color: #94a3b8;
  flex-shrink: 0;
  transition: color .12s var(--ac-v3-ease), transform .12s var(--ac-v3-ease);
}
.ac-vdp-v3__aside-row:hover .ac-vdp-v3__aside-arrow {
  color: var(--ac-v3-turquoise-dark);
  transform: translateX(2px);
}

/* Desktop: sticky meescrollend in de rechter kolom. top = onder de smart-header
   (Playwright-getuned, OQ-4). */
@media (min-width: 992px) {
  .ac-vdp-v3__aside {
    position: sticky;
    top: var(--ac-vdp-v3-aside-top, 88px);
    align-self: start;
    margin: 0;
  }
}

/* ---- Feedback-ronde 2026-05-29: cleaner prijs + compactere spec-grid -------- *
 * Prijs in body-font + zwart i.p.v. turquoise/heading (oogde kinderachtig). De
 * spec-grid (datum/brandstof/transmissie/km/cc/verbruik) compacter zodat de
 * info-kolom dichter bij de foto-hoogte ligt. */
.ac-vdp-v3 .vehicle-title .price {
  font-family: var(--ac-v3-font-body);
  color: var(--ac-v3-black);
  /* Nick 29-06: 1.8→1.4em zodat totaal + maandprijs samen op één regel passen in de
     (smallere) info-kolom op desktop; mobiel verder verkleind via de media-query. */
  font-size: 1.4em;
  font-weight: 800;
  margin-top: 10px;
  letter-spacing: -0.01em;
  /* Feedback AC.nl (Nick 29-06): denkbeeldig 2-koloms systeem — totaalprijs in de
     linker kolom, maandprijs in de rechter kolom (elk flex:1 = halve breedte). Desktop
     links uitgelijnd per kolom; mobiel gecentreerd per kolom (zie media-query). Beide
     zwart + even groot. */
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 16px;
}
.ac-vdp-v3 .price .ac-vdp-v3__price-main,
.ac-vdp-v3 .price .monthly-price {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
}
/* Totaalprijs even groot/zwaar + zwart. Moet de legacy-regel '.vehicle-title h3
   span { font-size:0.6em; color:#999 }' overrulen, die anders ELKE prijs-span
   (ook deze) verkleinde én grijs maakte → totaal oogde kleiner + grijs. */
.ac-vdp-v3 .price .ac-vdp-v3__price-main {
  font-size: 1em;
  font-weight: 800;
  color: var(--ac-v3-black);
}
/* btw-aanduiding: geen pill-achtergrond meer (oogde kinderachtig, Nick 2026-05-29).
   Klein, rustig grijs tekstje naast de prijs; info blijft staan (B2B = excl. btw). */
.ac-vdp-v3 .price .excl-btw,
.ac-vdp-v3 .price .marge,
.ac-vdp-v3 .price .incl-btw {
  font-family: var(--ac-v3-font-body);
  color: var(--ac-v3-gray-500);
  font-weight: 500;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 0.5em;
  vertical-align: middle;
  margin-left: 4px;
}
.ac-vdp-v3 .price .excl-btw.is-excl-btw {
  color: #c2410c;
  font-weight: 800;
}
/* Feedback AC.nl (Nick 29-06): maandprijs 'va € … pm' ZWART (geen teal-pill meer),
   even groot als de totaalprijs, eronder in de gecentreerde prijs-kolom. */
.ac-vdp-v3 .price .monthly-price {
  font-family: var(--ac-v3-font-body);
  background: none;
  color: var(--ac-v3-black);
  font-weight: 800;
  /* inline-block (geen flex): houdt de spaties tussen 'va', '€ 175' en 'pm'. */
  display: inline-block;
  float: none;
  position: static;
  top: auto;
  border-radius: 0;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  font-size: 1em; /* gelijk aan de totaalprijs */
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* 'va' en 'pm' op label-grootte (gelijk aan marge/excl. btw), niet zo groot als
   het bedrag (Nick 25-06). 0.5em van .monthly-price (=1em van .price) == de
   0.5em-labels. */
.ac-vdp-v3 .price .monthly-price__affix {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  /* Nick 29-06: 'va'/'pm' klein + ZWART (geen pill meer). !important overrulet de
     legacy-regel .vehicle-title h3 span { color:#999 } die ze anders grijs maakt. */
  color: var(--ac-v3-black) !important;
}
@media (max-width: 575px) {
  /* Feedback AC.nl (Nick 29-06): mobiel weer de grotere prijs (basis 1.4em, zoals
     voorheen) + per kolom GECENTREERD i.p.v. links — totaal in de linker, maandprijs
     in de rechter kolom, met lucht ertussen. */
  .ac-vdp-v3 .price .ac-vdp-v3__price-main,
  .ac-vdp-v3 .price .monthly-price { text-align: center; }
}

/* Compacte spec-grid: kleiner icoon dat binnen de regelhoogte past (anders
   stak de rij ~10px uit z'n box en overlapte de diensten-aside op mobiel). */
.ac-vdp-v3 .specs-list .spec-item {
  padding-left: 26px !important;
  line-height: 1.65 !important;
  font-size: 0.72em !important;
  background-size: 16px auto !important;
  background-position: 0 50% !important;
}
.ac-vdp-v3 .specs-list .spec-item span { font-size: 1.15em !important; }
.ac-vdp-v3 .specs-list .spec-item p { margin-bottom: 0; }
.ac-vdp-v3 .specs-list .row { row-gap: 2px; }
/* Desktop: meer verticale lucht tussen de spec-rijen (mobiel blijft compact, daar
   staat de spec-grid strak onder de foto). */
@media (min-width: 768px) {
  .ac-vdp-v3 .specs-list .row { row-gap: 14px; }
}

/* Boven- en ondermarge zodat het content-blok niet tegen header/footer plakt. */
.ac-vdp-v3__layout { margin-top: 20px; margin-bottom: 40px; }
@media (min-width: 992px) { .ac-vdp-v3__layout { margin-top: 30px; } }

/* Mobiel: gegarandeerde lucht tussen de hero(-specs) en de diensten-aside, en
   rond het sticky menu (zat te strak tegen de iconen). */
@media (max-width: 991px) {
  .ac-vdp-v3__aside { margin-top: 16px; }
  /* Bas batch 2: mobiele horizontale VDP-nav weg; secties blijven bereikbaar
     via scroll, de dienstenkaart en de sticky CTA. Dit haalt verticale ruis
     boven de specificaties weg zonder desktop te raken. */
  .ac-vdp-v3-nav { display: none; }
}

/* Feedback AC.nl (Bas/Nick 29-06): losse stroken i.p.v. afgeronde kaartjes. Geen
   flex-gap/border-radius, maar volle-breedte rijen met dunne scheidingslijntjes
   ertussen (onderscheid per dienst). Eerste rij geen bovenlijn (sluit op de titel
   aan). Pijltjes + hover-highlight (.ac-vdp-v3__aside-row:hover) blijven = klikbaar. */
.ac-vdp-v3__aside-list {
  display: block;
}
.ac-vdp-v3__aside-row {
  border-top: 1px solid var(--ac-v3-gray-100);
  border-radius: 0;
  padding: 12px 4px;
}
.ac-vdp-v3__aside-list li:first-child .ac-vdp-v3__aside-row { border-top: 0; }

/* Bas batch 2: specificatie-accordion compacter/frisser, scoped binnen de VDP
   zodat legacy portal-tabellen buiten de detailpagina niet meeliften.
   Feedback AC.nl #4 (Nick 09-07): APK/onderhoud zijn samengevoegd IN #specificaties
   (de aparte "Voertuighistorie"-sectie is uit detail.ctp verwijderd), dus deze scope
   dekt die balken nu automatisch — zelfde kop/lettertype/tabel-stijl, geen aparte
   regels nodig (waren eerder Bootstrap-default). */
.ac-vdp-v3 #specificaties .vehicle-property-item__heading-row {
  align-items: center;
  margin-bottom: 4px;
}
.ac-vdp-v3 #specificaties .ac-vdp-v3__section-title {
  margin-bottom: 0 !important;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block {
  border-bottom: 1px solid #eef2f6;
  margin-bottom: 10px !important;
  padding-bottom: 2px;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block h5 {
  min-height: 38px;
  margin: 0;
  /* Feedback AC.nl (Nick 29-06): kop iets groter (16→18px) zonder dat de balk
     hoger wordt — verticale padding gecompenseerd (10→8px) + strakke line-height;
     min-height 38px blijft de balkhoogte bepalen. */
  padding: 8px 30px 8px 0;
  background-position: right 50%;
  background-size: 13px auto;
  font-family: var(--ac-v3-font-heading);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block table {
  width: 100%;
  margin-bottom: 8px;
  table-layout: fixed;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block table tr:nth-child(odd) {
  background: #fbfcfd;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block table tr:nth-child(even) {
  background: transparent;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block table tr + tr {
  border-top: 1px solid #eef2f6;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block table td {
  padding: 8px 10px;
  vertical-align: middle;
  line-height: 1.35;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block table td.spec-row-label {
  width: 42%;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block table td.spec-row-value {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
/* Feedback AC.nl #4 (Nick 25-06): kenteken-cel als flex-rij zodat de 'Switch
   kenteken'-knop netjes naast de kentekentekst uitlijnt (ook mobiel; wrapt clean). */
.ac-vdp-v3 #specificaties .vehicle-property-item-block table td.spec-row-value--kenteken {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.ac-vdp-v3 #specificaties .spec-row-value--kenteken #switch-registration-btn {
  margin: 0;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block table td.spec-row-label--full {
  width: 100%;
  color: #0f172a;
  font-weight: 600;
}
.ac-vdp-v3 #specificaties .spec-row-info,
.ac-vdp-v3 #specificaties .portal-as-info {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 5px !important;
  vertical-align: -3px !important;
}
.ac-vdp-v3 #specificaties .spec-row-info img,
.ac-vdp-v3 #specificaties .portal-as-info img {
  width: 14px;
  height: 14px;
}
.ac-vdp-v3 #specificaties .toggle-vehicle-property-item-blocks {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid #d5eef0;
  border-radius: 999px;
  background: #f6fdfe;
  color: var(--ac-v3-turquoise-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.ac-vdp-v3 #specificaties .toggle-vehicle-property-item-blocks:hover {
  background: #e9f9fb;
  color: var(--ac-v3-turquoise-dark);
  text-decoration: none;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block--seller-story {
  border-bottom-color: #f3f4f6;
}
.ac-vdp-v3 #specificaties .vehicle-property-item-block--seller-story .arrow-target {
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
  padding: 0 2px 8px;
}
@media (max-width: 575px) {
  .ac-vdp-v3 #specificaties .vehicle-property-item__heading-row > [class*="col-"] {
    width: 50%;
    flex: 0 0 50%;
  }
  .ac-vdp-v3 #specificaties .vehicle-property-item-block table td {
    padding: 7px 8px;
  }
  .ac-vdp-v3 #specificaties .vehicle-property-item-block table td.spec-row-label {
    width: 45%;
    font-size: 12.5px;
  }
  .ac-vdp-v3 #specificaties .vehicle-property-item-block table td.spec-row-label--full {
    width: 100%;
  }
  .ac-vdp-v3 #specificaties .vehicle-property-item-block table td.spec-row-value {
    font-size: 13.5px;
  }
}

/* ---- Spec-overlay op de foto (mobiel) ----------------------------------- *
 * 4 kernspecs in 2 kolommen x 2 rijen, op een transparant turquoise-scrim
 * onderaan de foto (ruimtebesparend, Nick 2026-05-29). pointer-events:none →
 * klikken opent nog steeds de foto-galerij. Desktop: verborgen (de specs staan
 * daar in de info-kolom naast de foto). */
.ac-vdp-v3__photo-specs { display: none; }
@media (max-width: 991px) {
  .ac-vdp-v3__hero-photo { position: relative; }
  .ac-vdp-v3__hero-photo .img-fluid { display: block; } /* geen inline-descender-gap */
  /* Beide legacy spec-grids weg <992px (de specs staan nu op de foto). Anders
     dupliceerde de desktop-grid (.d-md-block = vanaf 768px) met de overlay in de
     768-991px-band (Codex). De info-kolom-grid komt pas terug op >=992px. */
  .ac-vdp-v3 .specs-list { display: none !important; }
  .ac-vdp-v3 .image-preview-photo-count-badge { top: 14px; bottom: auto; } /* boven de strip */

  .ac-vdp-v3__photo-specs {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: grid;
    /* Nick 2026-06-22: 6 specs in 3 kolommen x 2 rijen; ruimere verticale afstand
       (row-gap) zodat de twee rijen niet meer op elkaar plakken. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 8px;
    padding: 40px 14px 14px;
    background: linear-gradient(to top, rgba(0,42,46,0.90) 0%, rgba(0,42,46,0.62) 45%, rgba(0,42,46,0) 100%);
    border-radius: 0 0 10px 10px; /* matcht de 10px-radius van de foto */
    pointer-events: none;
  }
  .ac-vdp-v3__photo-spec {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }
  .ac-vdp-v3__photo-spec-icon {
    width: 15px; height: 15px;
    flex-shrink: 0;
    filter: brightness(0) invert(1); /* turquoise SVG -> wit voor contrast op de scrim */
    opacity: 0.92;
  }
  .ac-vdp-v3__photo-spec-value {
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
}

/* ---- Kruimelpad (Aanbod > Merk > Model), subtiel boven de titel ---------- */
.ac-vdp-v3-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 7px;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ac-v3-gray-500);
}


@media (min-width: 992px) {
  .ac-vdp-v3-crumbs { margin-top: 18px; font-size: 13.5px; }
}

/* Galerij: terug-naar-overzicht-knop onderaan. */


/* ============================================================================
   OVER-ONS V3  (/over-autocoach)
   Hero, ons-verhaal, geschiedenis-tijdlijn (road--timeline), cijfer-strip,
   reviews-grid, vacatures, slot-CTA. Tijdlijn hergebruikt .ac-v3-road van de
   homepage; alle over-ons-eigen styling staat hier gebundeld.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.ac-v3-about-hero {
  padding: clamp(48px, 8vw, 96px) 20px clamp(32px, 5vw, 56px);
  text-align: center;
}
.ac-v3-about-hero__inner { max-width: 760px; margin: 0 auto; }
.ac-v3-about-hero__title {
  /* Consistent met de homepage-hero-titel (.ac-v3-hero__title = leidend):
     zelfde grootte, dikte, letter-spacing en line-height. */
  font-family: var(--ac-v3-font-heading);
  font-weight: 700;
  font-size: clamp(42px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 18px 0 0;
  color: var(--ac-v3-black);
}
.ac-v3-about-hero__sub {
  font-family: var(--ac-v3-font-body);
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--ac-v3-gray-700);
  margin: 16px auto 0;
  max-width: 620px;
}
.ac-v3-about-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

/* ---- Ons verhaal --------------------------------------------------------- */
.ac-v3-about-story { padding: clamp(32px, 5vw, 64px) 20px; }
.ac-v3-about-story__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.ac-v3-about-story__text { font-family: var(--ac-v3-font-body); color: var(--ac-v3-gray-700); line-height: 1.7; }
.ac-v3-about-story__text :is(h1, h2, h3, h4) {
  font-family: var(--ac-v3-font-heading);
  color: var(--ac-v3-black);
  line-height: 1.2;
  margin: 24px 0 10px;
}
.ac-v3-about-story__text h2 { font-size: clamp(24px, 3.2vw, 32px); }
/* Nick 01-07: "Ons verhaal"-kop op dezelfde grootte als de sectiekop "De weg die
   we aflegden" eronder (.ac-v3-section-title clamp 28-42), turquoise accent via
   inline span. Hogere specificiteit (2 classes) wint van .ac-v3-about-story__text h2. */
.ac-v3-about-story__text .ac-v3-about-story__heading {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 18px;
}
.ac-v3-about-story__text h3 { font-size: clamp(20px, 2.6vw, 24px); }
.ac-v3-about-story__text p { margin: 0 0 14px; }
.ac-v3-about-story__text a { color: var(--ac-v3-turquoise-dark, #009a9a); font-weight: 600; }
.ac-v3-about-story__media { display: flex; flex-direction: column; gap: 18px; }
.ac-v3-about-story__video {
  position: relative;
  border-radius: var(--ac-v3-radius-lg, 18px);
  overflow: hidden;
  box-shadow: var(--ac-v3-shadow-lg);
  background: #000;
}
.ac-v3-about-story__video .youtube-player,
.ac-v3-about-story__video iframe,
.ac-v3-about-story__video img { width: 100%; display: block; aspect-ratio: 16 / 9; border: 0; }

/* ---- Tijdlijn: jaartal-badge + activatie-kleur --------------------------- */
.ac-v3-road__year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--ac-v3-radius-pill, 999px);
  background: var(--ac-v3-turquoise);
  color: #fff;
  font-family: var(--ac-v3-font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.ac-v3-road--timeline .ac-v3-road__card[data-active="true"] .ac-v3-road__year {
  background: var(--ac-v3-yellow);
  color: var(--ac-v3-black);
}
/* Bredere kaart + iets ruimere regelhoogte voor de langere live-mijlpaalteksten
   (Feedback AC.nl 03-07). Stage is 880px, road-SVG 320px gecentreerd: 280px per
   flank laat 320px midden vrij → geen overlap met de weg. 320px per flank = 30px
   speling tot de road-curve (x[350,530] van de 880px stage). Alleen desktop;
   de mobiele --timeline-regels (max-width:760px) zetten width terug op 100%. */
.ac-v3-road--timeline .ac-v3-road__card { width: 320px; }
.ac-v3-road--timeline .ac-v3-road__card-body { line-height: 1.5; }
/* Mobiel autootje: standaard verborgen (desktop rijdt de SVG-auto); alleen de
   mobiele --timeline-tak zet 'm op display:block. */
.ac-v3-road__car-v { display: none; }

/* ---- Cijfer-strip -------------------------------------------------------- */
.ac-v3-about-stats { padding: clamp(40px, 6vw, 64px) 20px; background: var(--ac-v3-turquoise-pale, #f0fafa); }
.ac-v3-about-stats__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  /* 2 cijfers (Nick 06-07: '4.000+ kopers begeleid'-tegel eraf). */
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.ac-v3-about-stats__item { text-align: center; }
.ac-v3-about-stats__num {
  font-family: var(--ac-v3-font-heading);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  color: var(--ac-v3-turquoise-dark, #009a9a);
  line-height: 1;
}
.ac-v3-about-stats__label { margin-top: 10px; color: var(--ac-v3-gray-700, #4a4a4a); font-size: 15px; font-family: var(--ac-v3-font-body); }

/* ---- Vacatures ----------------------------------------------------------- */
.ac-v3-about-jobs { padding: clamp(40px, 6vw, 64px) 20px; }
.ac-v3-about-jobs__inner { max-width: 1080px; margin: 0 auto; }
.ac-v3-about-jobs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.ac-v3-about-jobs__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding: 22px 52px 22px 24px;
  border-radius: var(--ac-v3-radius-lg, 16px);
  background: var(--ac-v3-turquoise-pale, #f0fafa);
  text-decoration: none;
  color: var(--ac-v3-black);
  transition: transform .15s var(--ac-v3-ease, ease), box-shadow .15s var(--ac-v3-ease, ease);
}
.ac-v3-about-jobs__card:hover { transform: translateY(-3px); box-shadow: var(--ac-v3-shadow-md); }
.ac-v3-about-jobs__title { font-family: var(--ac-v3-font-heading); font-weight: 700; font-size: 18px; }
.ac-v3-about-jobs__meta { color: var(--ac-v3-gray-500); font-size: 14px; font-family: var(--ac-v3-font-body); }
.ac-v3-about-jobs__arrow { position: absolute; top: 24px; right: 22px; color: var(--ac-v3-turquoise); display: inline-flex; }

/* ---- Slot-CTA ------------------------------------------------------------ */
.ac-v3-about-cta { padding: clamp(48px, 7vw, 88px) 20px; text-align: center; }
.ac-v3-about-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  background: var(--ac-v3-turquoise-pale, #f0fafa);
  border-radius: var(--ac-v3-radius-xl, 24px);
  padding: clamp(32px, 5vw, 56px);
}
.ac-v3-about-cta__title { font-family: var(--ac-v3-font-heading); font-weight: 800; font-size: clamp(26px, 4vw, 40px); color: var(--ac-v3-black); margin: 0; }
.ac-v3-about-cta__sub { font-family: var(--ac-v3-font-body); color: var(--ac-v3-gray-700); margin: 14px auto 0; max-width: 520px; }
.ac-v3-about-cta__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* ---- Mobiel: tijdlijn als zichtbare verticale weg ------------------------ */
/* De homepage-road verbergt op <=760px de SVG en stapelt kaarten plat. Voor de
   over-ons-tijdlijn houden we de "weg" ZICHTBAAR: een verticale lijn langs de
   linkerrand met een mijlpaal-stip per kaart. Scoped op --timeline zodat de
   homepage ongemoeid blijft. (Hogere specificiteit wint van de generieke regel
   ongeacht volgorde.) */
@media (max-width: 760px) {
  .ac-v3-road--timeline .ac-v3-road__svg { display: none; }
  .ac-v3-road--timeline .ac-v3-road__stage {
    position: relative;
    height: auto !important;
    padding-left: 40px;
  }
  /* Smalle verticale weg (Feedback Nick 03-07): donker met streepjes-middenlijn,
     zoals de desktop-weg maar strak verticaal. Tekstbreedte blijft ~gelijk (40px). */
  .ac-v3-road--timeline .ac-v3-road__stage::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    bottom: 4px;
    width: 16px;
    border-radius: 8px;
    background:
      repeating-linear-gradient(180deg, rgba(255,255,255,.85) 0 8px, transparent 8px 18px) center top / 2px 100% no-repeat,
      linear-gradient(180deg, #2c2f38, #3d4150);
  }
  /* Autootje op de weg; JS (initRoadSection, mobiele tak) beweegt het via
     transform: translateY() — compositor-laag, geen layout/reflow per scroll-
     frame (Nick 04-07: mobiel hakkelig). top:0 = basispositie bovenaan de weg. */
  .ac-v3-road--timeline .ac-v3-road__car-v {
    display: block;
    position: absolute;
    left: 3px;
    top: 0;
    width: 24px;
    z-index: 3;
    transition: transform .12s linear;
    pointer-events: none;
    will-change: transform;
  }
  .ac-v3-road--timeline .ac-v3-road__car-v svg { display: block; width: 100%; height: auto; }
  .ac-v3-road--timeline .ac-v3-road__card {
    position: static;
    width: 100%;
    max-width: 520px;
    margin: 0 0 16px;
    opacity: 1;
    transform: none;
  }
  /* Mijlpaal-stip gecentreerd op de weg; afgevinkt (auto gepasseerd) = turquoise gevuld. */
  .ac-v3-road--timeline .ac-v3-road__card::before {
    content: "";
    position: absolute;
    left: 7px;
    width: 16px;
    height: 16px;
    margin-top: 6px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--ac-v3-turquoise);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 2;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  /* Afgevinkt (auto gepasseerd) = GEEL gevuld (Nick 03-07: niet groen). */
  .ac-v3-road--timeline .ac-v3-road__card[data-active="true"]::before {
    background: var(--ac-v3-yellow);
    border-color: var(--ac-v3-yellow);
    transform: scale(1.05);
  }
  /* Onderkant-marge: de weg loopt nog ~24px door onder de laatste mijlpaal (Nick 03-07). */
  .ac-v3-road--timeline .ac-v3-road__stage { padding-bottom: 28px; }
  .ac-v3-road--timeline .ac-v3-road__card:last-child { margin-bottom: 0; }

  /* Butter-smooth op iOS (Nick 04-07). Waar de browser CSS scroll-driven
     animations ondersteunt (Safari 26+/WebKit op iOS, Chrome 115+) rijden het
     autootje én de stippen op de COMPOSITOR-thread via ÉÉN gedeelde scroll-
     timeline (scroll(root)). initRoadSection zet de px-ranges éénmalig
     (--ac-car-* / --ac-dot-*) zodat het autootje 1-op-1 met de scroll beweegt
     (GEEN parallax) en elke stip precies afvinkt op de scroll-positie waar het
     autootje 'm bereikt — dezelfde mapping als de JS-fallback, maar op de
     compositor. Zonder support draait de JS-versie (dit blok geldt dan niet). */
  @supports (animation-timeline: scroll(root block)) {
    .ac-v3-road--timeline .ac-v3-road__car-v {
      transition: none;
      animation: ac-road-car-drive linear both;
      animation-timeline: scroll(root block);
      animation-range: var(--ac-car-start, 0px) var(--ac-car-end, 1px);
    }
    @keyframes ac-road-car-drive {
      from { transform: translateY(var(--ac-road-car-from, -11px)); }
      to   { transform: translateY(var(--ac-road-car-to, 800px)); }
    }
    /* Stip + kaart-highlight vinken af op de POSITIE VAN HET AUTOOTJE (zelfde
       scroll-timeline, per-kaart px-range via JS). Border blijft 1px (alleen
       kleur/glow) → geen layout-reflow. */
    .ac-v3-road--timeline .ac-v3-road__card {
      animation: ac-road-card-hl steps(1, jump-end) both;
      animation-timeline: scroll(root block);
      animation-range: var(--ac-dot-start, 0px) var(--ac-dot-end, 1px);
    }
    @keyframes ac-road-card-hl {
      to { border-color: var(--ac-v3-yellow); box-shadow: 0 8px 24px rgba(255,198,43,0.20); }
    }
    .ac-v3-road--timeline .ac-v3-road__card::before {
      animation: ac-road-dot-fill linear both;
      animation-timeline: scroll(root block);
      animation-range: var(--ac-dot-start, 0px) var(--ac-dot-end, 1px);
    }
    @keyframes ac-road-dot-fill {
      to { background: var(--ac-v3-yellow); border-color: var(--ac-v3-yellow); transform: scale(1.05); }
    }
  }

  .ac-v3-about-story__inner { grid-template-columns: 1fr; }
  .ac-v3-about-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  /* Nick 06-07: nog maar 2 cijfers → 2 kolommen naast elkaar (oude '2+1'-span weg). */
  .ac-v3-about-jobs__grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   lead_form_finance — VDP-finance-module gespiegeld (calc + lead in een
   form). Hergebruikt de lean chip-primitieven; voegt segmented-control,
   toggle-switches en de "Verwachte maandprijs"-display toe.
   ==================================================================== */
.ac-v3-finance-calc {
  /* Witte achtergrond, geen box (Nick 2026-06-25: dichter bij aankoopservice). */
  /* Divider ONDER de hele calculatormodule (Nick 03-07: de lijn stond boven de
     maandprijs, waardoor die te dicht op "Wat is voor jou belangrijk?" plakte —
     nu sluit de lijn de module af en is er lucht vóór de vinkjes). */
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ac-v3-gray-100, #f1f5f9);
}
.ac-v3-finance-calc .ac-v3-lead-form-full__group { margin-bottom: 14px; }
.ac-v3-finance-calc .ac-v3-lead-form-full__group:last-of-type { margin-bottom: 0; }
/* Feedback AC.nl (Nick 29-06, A4): de Vorm-"tabs" (privé/zakelijk + lenen/leasen) net
   zo compact als de looptijd-pills i.p.v. grote halve-breedte-blokken → strakker en in
   lijn met de VDP-module. Term-chips ongemoeid (eigen --term-regel hieronder). */
.ac-v3-finance-calc__chips:not(.ac-v3-finance-calc__chips--term) .ac-v3-lead-form-lean__chip {
  flex: 0 1 auto;
  min-width: 110px;
}
/* Bedrag — vrij invoerveld (geen vaste-bedrag-chips meer) */
.ac-v3-finance-calc__amount { max-width: 220px; }

/* Vorm-keuzes op ÉÉN regel (Nick 03-07): privé/zakelijk + lenen/leasen samen in
   een flex-wrapper, zelfde segmented-stijl als de looptijd; mobiel wrapt de
   tweede groep naar de regel eronder. */
.ac-v3-finance-calc__form-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.ac-v3-finance-calc__form-rows .ac-v3-finance-calc__chips + .ac-v3-finance-calc__chips { margin-top: 0; }
.ac-v3-finance-calc__chips + .ac-v3-finance-calc__chips { margin-top: 8px; }

/* Verwachte maandprijs — Bas 01-07: UIT de box. Label links, bedrag rechts dik,
   grijze "indicatief per maand" eronder — in de stijl van de aankoopservice-prijsregel. */
.ac-v3-finance-calc__result {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 16px;
  /* border-top verplaatst naar de onderkant van .ac-v3-finance-calc (Nick 03-07). */
}
.ac-v3-finance-calc__result-label { font-size: 15px; font-weight: 600; color: var(--ac-v3-body-strong, #0f172a); }
/* iPhone-fix maandprijs (Nick 03-07): het tooltip-i'tje (20px inline-block met
   vertical-align middle) zakte in de inline-baseline-context onder de tekstlijn
   en viel bij een wrappend label onder de tekst. Label = inline-flex: het i'tje
   is dan een gecentreerd flex-item naast de tekst. nowrap: het label mag nooit
   intern breken ("Verwachte / maandprijs" met zwevend i'tje) — bij plaatsgebrek
   zakt de hele prijs-kolom naar de volgende regel (flex-wrap in de media-query). */
.ac-v3-finance-calc__result-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* De tooltip-helper geeft de legend-tip-class mee (margin-left: auto, bedoeld
   voor form-legends) — in deze flex-context zou die het i'tje naar uiterst
   rechts duwen: expliciet neutraliseren, strak gescoped. */
.ac-v3-finance-calc__result-label .ac-v3-lead-form-full__legend-tip { margin-left: 0; }
.ac-v3-finance-calc__result-value { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ac-v3-finance-calc__result-amount {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 28px; font-weight: 800; color: var(--ac-v3-body-strong, #0f172a); line-height: 1.1;
}
/* ('indicatief per maand'-note verwijderd, Nick 03-07 — dubbelop met het label.) */

/* Verplichte "Geld lenen kost geld"-waarschuwing bij Privé (spiegelt de VDP) */
.ac-v3-finance-calc__credit-warning { margin-top: 14px; text-align: center; }
.ac-v3-finance-calc__credit-warning-img { max-width: 240px; width: 100%; height: auto; }

/* Partnerlogo's "In samenwerking met" (zoals de VDP-leaseform) */
.ac-v3-finance-partners {
  margin: 18px 0 4px; text-align: center;
  font-size: 13px; color: var(--ac-v3-muted, #64748b);
}
.ac-v3-finance-partners__img { max-height: 30px; width: auto; margin-top: 6px; }

/* Keuze-blok (path_choice, bv. autoverzekering): 2 paden bovenaan het form. */
.ac-v3-form-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 20px;
}
.ac-v3-form-paths__card {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Feedback (Nick 10-07): kaarten compacter — minder padding, strakkere regelhoogte
     (zie __label/__sub). Geldt ook voor autoverzekering (gedeelde CSS). */
  padding: 10px 14px;
  border: 1.5px solid var(--ac-v3-gray-200, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--ac-v3-body-strong, #1a1a1a);
  transition: border-color .15s var(--ac-v3-ease, ease), box-shadow .15s var(--ac-v3-ease, ease), transform .15s var(--ac-v3-ease, ease);
}
.ac-v3-form-paths__card:hover {
  border-color: var(--ac-v3-turquoise, #00bbbb);
  box-shadow: 0 6px 18px rgba(0, 187, 187, 0.12);
  transform: translateY(-1px);
}
.ac-v3-form-paths__card--primary {
  border-color: var(--ac-v3-turquoise, #00bbbb);
  background: var(--ac-v3-turquoise-pale, #f0fafa);
}
.ac-v3-form-paths__icon { display: inline-flex; color: var(--ac-v3-turquoise-dark, #0891b2); flex: 0 0 auto; }
.ac-v3-form-paths__text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.ac-v3-form-paths__label { font-family: var(--ac-v3-font-heading); font-weight: 700; font-size: 15px; line-height: 1.2; }
/* Strakke regelhoogte zodat een 2-regelige sub als een normale zin leest (Nick 10-07). */
.ac-v3-form-paths__sub { font-size: 13px; line-height: 1.3; color: var(--ac-v3-muted, #64748b); }
.ac-v3-form-paths__arrow,
.ac-v3-form-paths .ac-v3-ext-icon { color: var(--ac-v3-turquoise-dark, #0891b2); display: inline-flex; flex: 0 0 auto; }
/* Onzichtbare scroll-anchor voor de 'ontzorgd'-kaart (offset onder de topbar). */
.ac-v3-form-paths__anchor { display: block; height: 0; scroll-margin-top: 96px; }
@media (max-width: 560px) {
  .ac-v3-form-paths { grid-template-columns: 1fr; gap: 8px; }
  /* Mobiel extra compact (Nick 10-07): minder padding + iets kleinere sub. */
  .ac-v3-form-paths__card { padding: 9px 12px; gap: 10px; }
  .ac-v3-form-paths__sub { font-size: 12.5px; }
}

/* Compactere looptijd-chips in het finance-form (Nick 2026-06-25: velden te hoog;
   scoped op .ac-v3-lead-form-finance zodat andere pagina's ongemoeid blijven). */
.ac-v3-lead-form-finance .ac-v3-finance-calc__chips .ac-v3-lead-form-search__radio {
  padding-top: 8px; padding-bottom: 8px;
}

/* Looptijd = compacte segmented rij (Bas 01-07): 24·36·48·60·72 in één rij, geen
   radio-stip, gelijke breedte, gevuld-teal bij selectie (zoals de oude VDP-form). */
.ac-v3-finance-calc__chips--term { flex-wrap: nowrap; gap: 6px; }
.ac-v3-finance-calc__chips--term .ac-v3-lead-form-search__radio {
  min-width: 0; flex: 1 1 0; justify-content: center; text-align: center; padding: 8px 4px;
}
.ac-v3-finance-calc__chips--term .ac-v3-lead-form-search__radio-dot { display: none; }
.ac-v3-finance-calc__chips--term .ac-v3-lead-form-search__radio:has(.ac-v3-lead-form-search__radio-input:checked) {
  background: var(--ac-v3-turquoise, #00bbbb); border-color: var(--ac-v3-turquoise, #00bbbb);
}
.ac-v3-finance-calc__chips--term .ac-v3-lead-form-search__radio:has(.ac-v3-lead-form-search__radio-input:checked) .ac-v3-lead-form-search__radio-label { color: #fff; }

@media (max-width: 520px) {
  .ac-v3-finance-calc { padding: 14px; }
  /* Nick 03-07: chips tonen alleen cijfers (legend zegt 'in maanden') -> 5 kleine
     boxjes passen op één rij; niet meer wrappen naar 2 grote regels. */
  .ac-v3-finance-calc__chips--term { flex-wrap: nowrap; gap: 4px; }
  .ac-v3-finance-calc__chips--term .ac-v3-lead-form-search__radio { flex: 1 1 0; padding: 8px 2px; }
  /* Maandprijs-regel: desktop lijnt op de bedrag-baseline (typografisch mooi).
     Op smal: bedrag iets kleiner (24px) + krappere gap zodat óók een
     4-cijferig bedrag (€ 1.007) naast het label past (Nick 03-07); wrapt het
     alsnog (extreem smal), dan valt de prijs rechts uitgelijnd eronder. */
  .ac-v3-finance-calc__result { align-items: center; flex-wrap: wrap; gap: 10px; }
  .ac-v3-finance-calc__result-value { margin-left: auto; }
  .ac-v3-finance-calc__result-amount { font-size: 24px; }
}

/* ANWB-ledenvoordeel-badge in het investerings-/prijsblok (auto-zoeken) */
.ac-v3-investment-pricing__anwb {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 12px;
  background: #ffffff; border: 1px solid var(--ac-v3-border, #e2e8f0); border-radius: 10px;
}
.ac-v3-investment-pricing__anwb-logo { height: 26px; width: auto; flex: 0 0 auto; }
.ac-v3-investment-pricing__anwb-text { font-size: 13px; color: var(--ac-v3-body, #334155); line-height: 1.35; }
.ac-v3-investment-pricing__anwb-strike { text-decoration: line-through; color: var(--ac-v3-muted, #64748b); }

/* Voorbeeldrapport-knop ín het form (aankoopkeuring), boven de vinkjes */
.ac-v3-lead-form-full__voorbeeldrapport {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin: 0 0 18px;
}
.ac-v3-lead-form-full__voorbeeldrapport-lead { font-size: 13px; color: var(--ac-v3-muted, #64748b); }
.ac-v3-lead-form-full__voorbeeldrapport-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px;
  background: #ffffff; border: 1px solid var(--ac-v3-border, #e2e8f0);
  font-size: 14px; font-weight: 600; color: var(--ac-v3-body-strong, #0f172a);
  text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ac-v3-lead-form-full__voorbeeldrapport-btn:hover {
  border-color: var(--ac-v3-turquoise, #14b8a6);
  box-shadow: 0 1px 4px rgba(15,23,42,0.08);
}
.ac-v3-lead-form-full__voorbeeldrapport-btn svg { color: var(--ac-v3-turquoise, #14b8a6); }

/* ============================================================================
   vehicle_seller_card — /services/voertuig-contact (VDP-microservicepagina,
   Bas-call 2026-07-02). Paginakop + voertuig-chip + verkoper-card boven het
   lean-form; zelfde kolomritme als .ac-v3-lead-form-full--compact (760px).
   ========================================================================= */
/* (0,2,0)-selectors: winnen van .ac-v3-service-v2 > section (0,1,1, r~3255)
   die anders 48px onder/boven oplegt → 102px gat tussen card en form. */
.ac-v3-service-v2 > .ac-v3-seller-intro { padding: 40px 20px 0; }
/* Form direct onder de seller-intro = één visueel geheel. */
.ac-v3-service-v2 > .ac-v3-seller-intro + .ac-v3-lead-form-full--compact { padding-top: 28px; }
.ac-v3-seller-intro__inner { max-width: 760px; margin: 0 auto; }
.ac-v3-seller-intro__title {
  font-family: var(--ac-v3-font-display, inherit);
  font-size: 28px; font-weight: 800; line-height: 1.2;
  color: var(--ac-v3-body-strong, #0f172a);
  margin: 0 0 18px;
}
.ac-v3-seller-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px; margin: 0 0 6px;
  background: #ffffff; border: 1px solid var(--ac-v3-border, #e2e8f0);
  border-radius: var(--ac-v3-radius-md, 12px);
}
.ac-v3-seller-card__logo {
  flex: 0 0 64px; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ac-v3-gray-100, #f1f5f9); border-radius: 8px;
  background: #ffffff; overflow: hidden;
}
.ac-v3-seller-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ac-v3-seller-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-v3-seller-card__name { font-size: 15px; font-weight: 700; color: var(--ac-v3-body-strong, #0f172a); }
.ac-v3-seller-card__address { font-size: 13px; color: var(--ac-v3-muted, #64748b); line-height: 1.45; }
.ac-v3-seller-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 14px; font-weight: 600;
  color: var(--ac-v3-turquoise, #00bbbb); text-decoration: none;
}
.ac-v3-seller-card__link:hover { text-decoration: underline; color: var(--ac-v3-turquoise, #00bbbb); }
@media (max-width: 520px) {
  .ac-v3-service-v2 > .ac-v3-seller-intro { padding: 28px 20px 0; }
  .ac-v3-seller-intro__title { font-size: 24px; }
}