/* =========================================================
   LeaseRoute — Auto-detail (single-auto.php)
   1-op-1 geport uit prototypes/car.html <style>. De cockpit zelf
   (.lr-cockpit interne dial-stijlen) komt uit cockpit.css; hier staan
   de pagina-secties + de cockpit-rail-afstemming.
   ========================================================= */

/* breadcrumb */
.crumbs{ padding: 24px 0; font-size: 13px; color: var(--muted); }
.crumbs a{ color: var(--muted); }
.crumbs a:hover{ color: var(--navy); }
.crumbs .sep{ margin: 0 8px; opacity: .5; }

/* product */
.product{ padding: 16px 0 80px; }
.product-head{ margin-bottom: 80px; max-width: 960px; }
.product-head .eyebrow{ color: var(--pink-deep); }
.product-head h1{
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(40px, 4.4vw, 58px); line-height: 1.03; letter-spacing: -0.025em;
  margin: 12px 0 8px;
}
.product-head .trim{ color: var(--muted); font-size: 17px; margin: 0; }
.product-grid{ display:grid; grid-template-columns: minmax(0,1fr) 332px; gap: 40px; align-items: start; }
.summary #leaseBlock{ width: 100%; container-type: inline-size; container-name: leaseblk; }
@media (max-width: 1040px){ .product-grid{ grid-template-columns: minmax(0,1fr) 300px; gap: 32px; } }
@media (max-width: 880px){ .product-grid{ grid-template-columns: 1fr; gap: 40px; } .product-head{ margin-bottom: 24px; } }

/* gallery */
.gallery-col{ display: flex; flex-direction: column; }
.gallery-main{
  aspect-ratio: 4/3; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #E8ECF3, #A6B0CB);
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  transition: background-image .25s ease;
}
.gallery-main .tag{
  position: absolute; top: 20px; left: 20px;
  background: var(--pink); color: var(--pink-ink);
  padding: 8px 14px; border-radius: 999px;
  font: 500 12px var(--sans);
}
.gallery-thumbs{ display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 12px; }
.thumb{
  aspect-ratio: 4/3; border-radius: 14px; cursor:pointer;
  background-color: var(--cream); background-size: cover; background-position: center;
  border: 2px solid transparent;
  transition: border-color .2s, transform .2s;
}
.thumb:hover{ transform: translateY(-1px); }
.thumb.active{ border-color: var(--pink); }

/* cockpit-rail afstemming */
.summary{ display: flex; flex-direction: column; justify-content: flex-start; }
.summary .lr-cockpit{ padding: 22px 22px 20px; }
.summary .lr-head{ margin-bottom: 14px; }
.summary .lr-cluster{ padding: 14px 14px 12px; }
.summary .lr-cockpit #gPrice{ width: 196px; height: 196px; }
.summary .lr-cockpit #gLooptijd,
.summary .lr-cockpit #gKm{ width: 118px; height: 118px; }
.summary .lr-cockpit .dial.mini{ margin-bottom: 14px; }
.summary .lr-cockpit .dial:not(.mini){ margin-top: 6px; }
.summary .lr-telltales{ margin-top: 11px; padding-top: 11px; gap: 8px 16px; }
.summary .lr-controls{ margin-top: 16px; padding-top: 16px; gap: 14px; }
.summary .lr-ticks{ height: 10px; margin-bottom: 8px; }
.summary .lr-seg button{ padding: 9px 0; }
.summary .lr-cta{ margin-top: 14px; }
.summary .lr-cta-btn{ padding: 14px 24px; }
.summary .lr-foot{ margin-top: 11px; font-size: 10.5px; }
.summary .lease-variant{ width: 100%; }
.summary [data-variant="prijscard"]{ width: 100%; }

/* ============ INHOUD LEASEPAKKET ============ */
.included{ background: var(--navy-deep); color: #fff; padding: 90px 0; position: relative; overflow: hidden; }
.included::before{ content:""; position:absolute; right:-200px; bottom:-200px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(229,141,166,.20), transparent 65%); pointer-events: none; }
.included::after{ content:""; position:absolute; left:-200px; top:-200px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(229,141,166,.08), transparent 70%); pointer-events: none; }
.included > .wrap{ position: relative; z-index: 2; }
.included .eyeb{ font-size: 11px; letter-spacing: .14em; color: var(--pink); text-transform: uppercase; margin-bottom: 6px; }
.included h3{ font-family: var(--sans); font-weight: 600; font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -0.025em; color: #fff; margin: 0 0 36px; line-height: 1.05; }
.included ul{ list-style: none; padding: 0; margin: 0; display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px 40px; }
.included li{ font-size: 15px; color: rgba(255,255,255,.88); display:flex; gap: 12px; align-items: flex-start; line-height: 1.35; }
.included li::before{ content:""; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--pink); display:inline-flex; align-items:center; justify-content:center; flex-shrink: 0; margin-top: 1px; box-shadow: 0 0 0 1px rgba(229,141,166,.3) inset; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23E58DA6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l5 5L20 6'/></svg>"); background-repeat: no-repeat; background-position: center; }
.included li.ex::before{ background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238B8FA8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 7l10 10M17 7L7 17'/></svg>"); background-repeat: no-repeat; background-position: center; }
.included li.ex{ color: rgba(255,255,255,.4); }
@media (max-width: 960px){ .included{ padding: 70px 0; } .included ul{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .included{ padding: 56px 0; } .included ul{ grid-template-columns: 1fr; } }

/* ============ SPECS ============ */
.detail-section{ background: var(--cream); padding: 100px 0; }
.detail-head{ display:flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; }
.detail-head h2{ font-family: var(--sans); font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); color: var(--navy); line-height: 1.05; letter-spacing: -0.03em; }
.specs-grid{ display:grid; grid-template-columns: repeat(3, 1fr); background: transparent; border: 0; border-radius: 0; border-top: 1px solid rgba(11,25,87,.12); }
@media (max-width: 800px){ .specs-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .specs-grid{ grid-template-columns: 1fr; } }
.spec{ padding: 17px 26px; border: 0; border-bottom: 1px solid rgba(11,25,87,.08); }
.spec:nth-child(3n+1){ padding-left: 0; }
.spec:nth-child(3n){ padding-right: 0; }
.spec .k{ font-size: 10.5px; color: var(--muted); letter-spacing: .13em; text-transform: uppercase; margin-bottom: 6px; }
.spec .v{ font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--navy); letter-spacing: -0.015em; line-height: 1.2; }
.spec .sub{ font-size: 12px; color: var(--muted-soft, var(--muted)); margin-top: 3px; }

.detail-grid{ display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
@media (min-width: 721px){
  .detail-specs .specs-grid{ grid-template-columns: repeat(3, 1fr); }
  .detail-specs .spec{ padding-left: 22px; padding-right: 22px; }
  .detail-specs .spec:nth-child(3n+1){ padding-left: 0; }
  .detail-specs .spec:nth-child(3n){ padding-right: 0; }
}
@media (max-width: 720px){ .detail-grid{ grid-template-columns: 1fr; gap: 32px; } }

/* Plus/Min */
.pros-cons{ background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 28px; height: 100%; }
.pc-col h4{ font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--navy); letter-spacing: -0.015em; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.pc-col h4 .badge{ width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.pc-col.pros h4 .badge{ background: var(--pink-wash); color: var(--pink-deep); }
.pc-col.cons h4 .badge{ background: #ECECEF; color: #8A8A94; }
.pc-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pc-list li{ display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: flex-start; }
.pc-list li .pc-icon{ width: 20px; height: 20px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.pc-col.pros .pc-list li .pc-icon{ box-shadow: 0 0 0 1px var(--pink-wash) inset; }
.pc-col.cons .pc-list li .pc-icon{ box-shadow: 0 0 0 1px #E2E2E6 inset; }
.pc-list li .pc-body{ font-size: 14px; line-height: 1.4; color: var(--ink); }

/* ============ WHY (highlighted_car_features) ============ */
.why{ padding: 90px 0; background: #fff; position: relative; }
.why-head{ display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: flex-end; margin-bottom: 48px; }
@media (max-width: 720px){ .why-head{ grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; } }
.why-head h2{ font-family: var(--sans); font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); color: var(--navy); line-height: 1.05; letter-spacing: -0.03em; }
.why-blocks{ display: flex; flex-direction: column; gap: 32px; }
@media (max-width: 720px){ .why-blocks{ gap: 24px; } }
.why-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 880px){ .why-row{ grid-template-columns: 1fr; gap: 28px; } }
.why-row.reverse .why-media{ order: 2; }
@media (max-width: 880px){ .why-row.reverse .why-media{ order: 0; } }
.why-media{ position: relative; aspect-ratio: 4/3; border-radius: var(--r-xl); background-size: cover; background-position: center; background-color: var(--cream); }
.why-media::before{ content:""; position: absolute; inset: 0; border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px rgba(11,25,87,.05); pointer-events: none; }
.why-row:not(.reverse) .why-media::after{ content:""; position: absolute; left: -16px; bottom: -16px; width: 36%; height: 36%; background: var(--pink-wash); border-radius: var(--r-xl); z-index: -1; }
.why-row.reverse .why-media::after{ content:""; position: absolute; right: -16px; bottom: -16px; width: 36%; height: 36%; background: var(--pink-wash); border-radius: var(--r-xl); z-index: -1; }
.why-num{ font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--pink-deep); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.why-num::before{ content:""; display: inline-block; width: 28px; height: 3px; flex-shrink: 0; background-image: linear-gradient(to right, var(--pink) 50%, transparent 50%); background-size: 8px 3px; background-repeat: repeat-x; }
.why-text h3{ font-family: var(--sans); font-weight: 600; font-size: clamp(28px, 2.8vw, 36px); color: var(--navy); letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 18px; }
.why-text p{ color: var(--ink); font-size: 16px; line-height: 1.65; margin: 0 0 14px; }

/* ============ BIJTELLING ============ */
.bijt{ padding: 100px 0; background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.bijt::before{ content:""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(229,141,166,.18), transparent 70%); pointer-events: none; }
.bijt::after{ content:""; position: absolute; left: -160px; bottom: -160px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(229,141,166,.10), transparent 70%); pointer-events: none; }
.bijt .wrap{ position: relative; z-index: 2; }
.bijt-head{ display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: flex-end; margin-bottom: 56px; }
@media (max-width: 720px){ .bijt-head{ grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; } }
.bijt-head .eyebrow{ color: var(--pink); }
.bijt-head h2{ font-family: var(--sans); font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); color: #fff; line-height: 1.05; letter-spacing: -0.03em; }
.bijt-head h2 .serif{ color: var(--pink) !important; }
.bijt-head p{ color: rgba(255,255,255,.6); max-width: 360px; font-size: 14px; line-height: 1.55; }
.bijt-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px){ .bijt-grid{ grid-template-columns: 1fr; } }
.bijt-tier{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); padding: 32px 30px 28px; position: relative; overflow: hidden; transition: background .25s, border-color .25s, transform .25s; }
.bijt-tier:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); transform: translateY(-2px); }
.bijt-tier.featured{ background: linear-gradient(155deg, rgba(229,141,166,.18) 0%, rgba(255,255,255,.04) 70%); border-color: rgba(229,141,166,.32); }
.bijt-tier.featured::before{ content:"Meest voorkomend"; position: absolute; top: 18px; right: 18px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); font-weight: 600; padding: 4px 10px; background: rgba(229,141,166,.15); border-radius: 999px; border: 1px solid rgba(229,141,166,.3); }
.bijt-tier .schijf{ font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }
.bijt-tier .bracket{ font-family: var(--sans); font-weight: 500; font-size: 18px; color: rgba(255,255,255,.92); letter-spacing: -0.015em; line-height: 1.25; }
.bijt-tier .bracket .sub{ display: block; font-size: 12px; color: rgba(255,255,255,.45); font-weight: 400; margin-top: 4px; letter-spacing: 0; }
.bijt-tier .divider{ height: 1px; background: rgba(255,255,255,.08); margin: 22px 0; }
.bijt-tier.featured .divider{ background: rgba(229,141,166,.2); }
.bijt-tier .rate{ font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.bijt-tier .amount{ font-family: var(--sans); font-weight: 600; font-size: 52px; color: #fff; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.bijt-tier .amount span{ font-size: 16px; color: rgba(255,255,255,.55); font-weight: 500; margin-left: 2px; letter-spacing: 0; }
.bijt-tier.featured .amount{ color: var(--pink); }
.bijt-tier .ast{ font-size: 11px; color: rgba(255,255,255,.4); margin-top: 8px; letter-spacing: 0; }
.bijt-foot{ margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.65; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
@media (max-width: 720px){ .bijt-foot{ grid-template-columns: 1fr; gap: 16px; } }
.bijt-foot .ast{ color: var(--pink); font-weight: 600; }
.bijt-link{ display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; text-decoration: none; font-weight: 500; padding: 10px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; white-space: nowrap; transition: background .2s, border-color .2s; }
.bijt-link:hover{ background: var(--pink); color: var(--navy-deep); border-color: var(--pink); }
.bijt-link .arr{ transition: transform .2s; }
.bijt-link:hover .arr{ transform: translateX(3px); }

/* ============ ADVISEUR ============ */
.adviseur{ background: var(--navy-deep); color: #fff; padding: 100px 0; position: relative; overflow: hidden; }
.adviseur::before{ content:""; position: absolute; right:-200px; top:-100px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(closest-side, var(--pink) 0%, transparent 70%); opacity: .22; }
.adviseur-grid{ display:grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center; position: relative; z-index: 2; }
.adviseur-photo{ width: 200px; height: 240px; border-radius: var(--r-lg); background: linear-gradient(180deg, #D6BFA3 0%, #8E6F52 100%); background-size: cover; background-position: center top; position: relative; }
.adviseur-photo::after{ content:""; position: absolute; left: -8px; bottom: -8px; width: 40%; height: 40%; background: var(--pink); border-radius: var(--r-lg); z-index: -1; }
.adviseur h2{ font-family: var(--sans); font-weight: 600; font-size: clamp(32px, 3.4vw, 44px); color: #fff; line-height: 1.1; letter-spacing: -0.025em; }
.adviseur p{ color: #BFC4DB; margin: 14px 0 0; max-width: 440px; }
.adviseur .contact{ display:flex; flex-direction: column; gap: 10px; }
.adviseur .contact .btn{ justify-content: center; }
@media (max-width: 900px){ .adviseur-grid{ grid-template-columns: 1fr; text-align: center; } .adviseur-photo{ margin: 0 auto; } .adviseur p{ margin: 14px auto 0; } .adviseur .contact{ align-items: center; } }

/* ============ LEASETEKST (SEO, inklapbaar) ============ */
.leasetekst{ padding: 96px 0; background: #fff; }
.leasetekst .eyebrow{ color: var(--pink-deep); }
.leasetekst h2{ font-family: var(--sans); font-weight: 600; font-size: clamp(32px, 3.6vw, 48px); color: var(--navy); letter-spacing: -0.03em; line-height: 1.05; margin: 10px 0 26px; max-width: 760px; }
.lt-body{ max-width: 760px; }
.lt-body p{ color: var(--ink); font-size: 16px; line-height: 1.7; margin: 0 0 18px; }
.lt-lead{ font-size: 18px; color: var(--navy); }
.lt-more{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1); }
.lt-more.open{ grid-template-rows: 1fr; }
.lt-more > .lt-inner{ overflow: hidden; min-height: 0; }
.lt-more h3{ font-family: var(--sans); font-weight: 600; font-size: 20px; color: var(--navy); letter-spacing: -0.02em; line-height: 1.3; margin: 26px 0 12px; }
.lt-toggle{ margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; font: 600 14px var(--sans); color: var(--navy); letter-spacing: -0.01em; }
.lt-toggle .arr{ width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; transition: transform .3s, background .2s, color .2s, border-color .2s; }
.lt-toggle:hover .arr{ background: var(--pink-wash); border-color: transparent; color: var(--pink-deep); }
.lt-toggle[aria-expanded="true"] .arr{ transform: rotate(180deg); background: var(--navy); color: #fff; border-color: var(--navy); }

/* ============ FAQ ============ */
.faq{ padding: 100px 0; background: var(--cream); }
.faq-head{ margin-bottom: 44px; max-width: 720px; }
.faq-head .eyebrow{ color: var(--pink-deep); }
.faq-head h2{ font-family: var(--sans); font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); color: var(--navy); line-height: 1.05; letter-spacing: -0.03em; margin-top: 8px; }
.faq-list{ max-width: 880px; border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{ width: 100%; display: flex; align-items: center; gap: 24px; justify-content: space-between; padding: 24px 2px; background: none; border: 0; cursor: pointer; text-align: left; font: 600 18px/1.4 var(--sans); color: var(--navy); letter-spacing: -0.015em; }
@media (max-width: 560px){ .faq-q{ font-size: 16px; gap: 16px; } }
.faq-ic{ width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--navy); transition: transform .3s, background .2s, color .2s, border-color .2s; }
.faq-item.open .faq-ic{ transform: rotate(180deg); background: var(--navy); color: #fff; border-color: var(--navy); }
.faq-a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-a{ grid-template-rows: 1fr; }
.faq-a > .faq-inner{ overflow: hidden; min-height: 0; }
.faq-a p{ color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 22px; max-width: 760px; padding-right: 48px; }
@media (max-width: 560px){ .faq-a p{ padding-right: 0; } }

/* ============ RELATED ============ */
.related{ padding: 100px 0; background: var(--cream); }
.related .section-head{ margin-bottom: 40px; }
.rel-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px){ .rel-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .rel-grid{ grid-template-columns: 1fr; } }
/* Laatste rij: enkel item gecentreerd, twee items vullen 2 kolommen */
.rel-grid > :last-child:nth-child(3n+1){ grid-column: 2; }
@media (max-width: 900px){ .rel-grid > :last-child:nth-child(3n+1){ grid-column: auto; } .rel-grid > :last-child:nth-child(2n+1){ grid-column: 1 / -1; } }
@media (max-width: 600px){ .rel-grid > :last-child:nth-child(n){ grid-column: auto; } }

/* ============ Occasion prijskaart (binnacle) ============ */
.lr-occ-cluster{ align-items:center; justify-content:center; }
.lr-occ-config-label{ text-align:center; margin-top:12px; font:600 11.5px/1 var(--sans); letter-spacing:.08em; color:rgba(255,255,255,.55); }
.lr-occ-maatwerk{ margin-top:14px; padding:14px 0 0; border-top:1px solid var(--line); font:400 12px/1.5 var(--sans); color:var(--muted); text-align:center; }
.lr-occ-maatwerk a{ color:var(--pink-deep); text-decoration:none; font-weight:500; }
.lr-occ-maatwerk a:hover{ text-decoration:underline; }
[data-variant="prijscard"] .lr-cockpit,
[data-variant="prijscard"] .lr-cluster,
[data-variant="prijscard"] .lr-cta{ animation:none; opacity:1; transform:none; }

/* ============ FEATURES (Uitrusting accordion) ============ */
.features{ padding: 100px 0; background: #fff; }
.features-head{ display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: flex-end; margin-bottom: 48px; }
@media (max-width: 720px){ .features-head{ grid-template-columns: 1fr; gap: 16px; } }
.features-head h2{ font-family: var(--sans); font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); color: var(--navy); line-height: 1.05; letter-spacing: -0.03em; }
.features-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px){ .features-grid{ grid-template-columns: 1fr; gap: 10px; } }
.feat-cat{ background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .25s ease, border-color .25s ease; }
.feat-cat.open{ box-shadow: var(--shadow-card); border-color: rgba(0,0,0,.04); }
.feat-head{ display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.feat-icon{ width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--pink-deep); flex-shrink: 0; transition: background .25s, color .25s, border-color .25s; }
.feat-cat.open .feat-icon{ background: var(--pink-wash); border-color: transparent; }
.feat-meta{ flex: 1; min-width: 0; }
.feat-name{ font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--navy); letter-spacing: -0.015em; line-height: 1.2; }
.feat-count{ font-size: 13px; color: var(--muted); margin-top: 3px; }
.feat-chev{ width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0; transition: transform .3s ease, background .2s, color .2s, border-color .2s; }
.feat-cat.open .feat-chev{ transform: rotate(180deg); background: var(--navy); color: #fff; border-color: var(--navy); }
.feat-body{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.feat-cat.open .feat-body{ grid-template-rows: 1fr; }
.feat-body > .feat-inner{ overflow: hidden; min-height: 0; }
.feat-body ul{ list-style: none; margin: 0 22px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding: 18px 0 24px; }
@media (max-width: 560px){ .feat-body ul{ grid-template-columns: 1fr; gap: 8px; } }
.feat-body li{ font-size: 14px; color: var(--ink); display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.feat-body li::before{ content:""; width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C04A70' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l5 5L20 6'/></svg>"); background-repeat: no-repeat; background-position: center; background-size: contain; }

/* ============ ANDERE UITVOERING (config) ============ */
.config{ padding: 100px 0; background: var(--cream); }
.config-card{ background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.config-card::before{ content:""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: var(--pink-wash); opacity: .5; pointer-events: none; }
@media (max-width: 880px){ .config-card{ grid-template-columns: 1fr; gap: 32px; padding: 36px; } }
.config-card > *{ position: relative; z-index: 2; }
.config-left h2{ font-family: var(--sans); font-weight: 600; font-size: clamp(30px, 3.4vw, 42px); color: var(--navy); letter-spacing: -0.025em; line-height: 1.1; margin: 14px 0 16px; }
.config-left p{ color: var(--ink); font-size: 15px; line-height: 1.6; margin: 0 0 28px; max-width: 420px; }
.config-cta{ display: inline-flex; align-items: center; gap: 10px; background: var(--navy); color: #fff; padding: 16px 24px; border-radius: 999px; font: 600 15px var(--sans); text-decoration: none; transition: background .2s, transform .2s; }
.config-cta:hover{ background: var(--pink-deep); transform: translateX(2px); }
.config-cta .arr{ transition: transform .2s; }
.config-cta:hover .arr{ transform: translateX(4px); }
.config-or{ margin-top: 16px; font-size: 13px; color: var(--muted); }
.config-or a{ color: var(--navy); text-decoration: underline; }
.config-steps{ display: flex; flex-direction: column; gap: 22px; }
.config-step{ display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: flex-start; }
.config-step .num{ width: 44px; height: 44px; border-radius: 50%; background: var(--cream); color: var(--pink-deep); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 16px; border: 1px solid var(--line); letter-spacing: -0.01em; }
.config-step .step-title{ font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--navy); letter-spacing: -0.015em; line-height: 1.3; }
.config-step .step-desc{ font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 4px; }

/* ============ FAQ "meer vragen" ============ */
.faq-item.is-hidden{ display: none; }
.faq-more{ margin-top: 36px; display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 13px 24px; cursor: pointer; font: 600 14px var(--sans); color: var(--navy); transition: background .2s, border-color .2s, transform .2s; }
.faq-more:hover{ background: var(--pink-wash); border-color: var(--pink); transform: translateY(-1px); }
.faq-more .arr{ display: inline-flex; transition: transform .2s; }
.faq-more.open .arr{ transform: rotate(180deg); }

/* Gutenberg/UAGB/ACF wysiwyg kleuroverrides — alle content-secties alleen muted */
.why-intro, .why-body, .lt-inner, .faq-inner, .prose { color: var(--muted); }
.why-intro *, .why-body *, .lt-inner *, .faq-inner *, .prose * { color: inherit !important; }