/* =========================================================================
   IziWise - eigen stijllaag boven het designsysteem.

   LEIDEND IS DE AFSLUITSTRAAT, niet het designsysteem. Dat systeem is
   getekend voor Next Automotive en NEXT Fleetservice: Space Grotesk en Work
   Sans, koppen tot 96px, tracking -0.065em, regelafstand onder 1, rechte
   hoeken. Dat is een redactionele automotive-stem. Site en straat zijn één
   IziWise-product en moeten dus dezelfde stem hebben.

   Wat hieronder uit de straat komt, met de bron erbij
   (C:\afsluitstraat/public/assets/tokens.css en app.css):

     font          de systeemstack, letterlijk --izi-font (geen webfont)
     koppen        gewicht 780, tracking -0.02em, regelafstand 1.2   .intro h1
     labels        gewicht 750, tracking 0.09em, uppercase           .ci-label
     tekst         #0f1b2d kop, #243447 tekst, #667384 gedempt       --izi-ink-strong, --izi-text, --izi-muted
     lijnen        #dfe5e2, sterk #cbd4d0                            --izi-border(-strong)
     vlak          #f7f9f8                                           --izi-bg
     groen         #0b7a4a actie, #085c38 hover                      --izi-green-600/700
     hoeken        16px paneel, 12px knop en veld                    --izi-radius-lg/md
     knoppen       gewicht 700, wit op groen, minimaal 46px hoog     .quote-result-cta

   De koppen van de site mogen groter dan de 32px van de straat: een homepage
   opent, een stap in een formulier niet. Gewicht, tracking en regelafstand
   zijn wel gelijk, en dat is wat je als merk herkent.

   De andere merken laden dit bestand niet en veranderen dus niet.
   ========================================================================= */

:root {
  /* ---------- Lettertype: de systeemstack van de straat ---------- */
  /* Identiek aan --izi-font. Kop en tekst delen hem, zoals in de straat. */
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: var(--font-heading);

  /* ---------- Typografische schaal ---------- */
  /* Rustig en commercieel in plaats van redactioneel. De onderkant is wat op
     een telefoon nog leesbaar en vriendelijk is; de bovenkant blijft in de
     buurt van de straat. */
  --h1: clamp(30px, 3.6vw, 44px);
  --h1-sub: clamp(27px, 3vw, 38px);
  --h2: clamp(24px, 2.5vw, 32px);
  --h2-lg: clamp(24px, 2.5vw, 32px);
  --h2-cta: clamp(26px, 2.8vw, 36px);

  /* ---------- Kleur: het palet van de straat ---------- */
  --ink: #0f1b2d;          /* --izi-ink-strong: koppen en donkere secties */
  --text: #243447;         /* --izi-text: lopende tekst */
  --muted: #5b6774;        /* --izi-muted (#667384), een tint donkerder - zie de contrastronde onderaan */
  --line: #dfe5e2;         /* --izi-border */
  --rule-strong: #cbd4d0;  /* --izi-border-strong (was bijna zwart) */
  --soft: #f7f9f8;         /* --izi-bg */
  --dark-muted: #9aa9b8;   /* --izi-bo-muted */

  /* Groen is de conversiekleur: knoppen zijn groen, niet zwart. */
  --btn-bg: var(--brand-text);
  --btn-fg: #ffffff;

  /* ---------- Vorm ---------- */
  --radius: 16px;          /* --izi-radius-lg: panelen en kaarten */
  --radius-field: 12px;    /* --izi-radius-md: knoppen, velden, kleine kaarten */

  /* ---------- Ritme ---------- */
  --section-y: clamp(3.5rem, 6vw, 5.5rem);
  --container: 1240px;
  --header-h: 72px;
}

/* ---------- Basis ---------- */
body { font-size: 16px; line-height: 1.6; }

/* Eén kopstijl, overal. Het designsysteem zet per sectie een eigen
   redactionele tracking en een regelafstand onder 1; hier is elke kop de kop
   van de straat. De selectoren staan er los bij omdat ze in components.css
   allemaal hun eigen regel hebben, met hun eigen specificiteit. */
h1, h2, h3, h4,
.section-head h2,
.hero h1, .page-header h1,
.intro-grid h2,
.services-head h2,
.dark-grid h2,
.photo-break-copy h2,
.cta h2,
.sys-main h3, .point h3, .service h3, .row h3, .cov-card h3,
.faq-group-title, .flow-title, .intro-copy .big {
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

/* De maten los van de stijl, en niet meer afhankelijk van een mediaquery: de
   schaal hierboven is al een clamp en werkt dus op elke breedte. */
.hero h1, .page-header h1 { font-size: var(--h1); max-width: 24ch; }
.page-header h1 { font-size: var(--h1-sub); }
.cta h2 { font-size: var(--h2-cta); max-width: 20ch; }
.intro-grid h2, .photo-break-copy h2 { font-size: var(--h2); }
.services-head h2, .dark-grid h2 { font-size: var(--h2-lg); }
h3, .h3, .sys-main h3, .service h3, .row h3, .cov-card h3 { font-size: 21px; }
.point h3 { font-size: 18px; }
.faq-group-title { font-size: 19px; }
.intro-copy .big { font-size: 21px; font-weight: 600; line-height: 1.45; }
.flow-title { font-size: 19px; font-weight: 700; }

/* Lopende tekst: iets ruimer dan de straat, want een pagina leest langer dan
   een stap in een formulier. */
.hero-lead, .section-intro { font-size: 18px; line-height: 1.6; }
.dark-copy { font-size: 17px; }

/* Labels en kickers: de maat van .ci-label uit de straat. */
.eyebrow, .kicker, .num { font-size: 12px; font-weight: 750; letter-spacing: 0.09em; }

/* ---------- Knoppen: groen, rond, gewicht 700 ---------- */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  letter-spacing: 0; text-transform: none;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-field);
}
.btn-primary { background: var(--brand-text); border-color: var(--brand-text); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn-link { border-color: var(--rule-strong); }
.btn-link:hover { border-color: var(--brand-text); color: var(--brand-text); }

/* ---------- Kop van de site ---------- */
.site-header { border-bottom: 1px solid var(--rule); }
.header-inner { min-height: var(--header-h); }
.logo-text { font-family: var(--font-heading); font-weight: 780; letter-spacing: -0.02em; }
/* Het menu leest op gewicht, niet op grootte. De trapjes van het designsysteem
   (uitklapmenu -> 1000px -> 1000-1199px) blijven staan, anders wordt het menu op
   een smalle desktop te breed. De knop in de nav valt hier buiten: die is een
   knop en geen menu-item. */
.site-nav > ul > li > a { font-family: var(--font-body); font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
@media (min-width: 1000px) {
  .site-nav > ul > li > a { font-size: 15px; font-weight: 600; }
  .site-nav > ul > li.nav-portal > a { font-size: 15px; font-weight: 650; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .site-nav > ul > li > a { font-size: 14px; }
}
.site-nav > ul > li > a[aria-current="page"] { color: var(--brand-text); }
/* De knop in de kop is de primaire actie van de hele site; op desktop zette het
   designsysteem hem op 13px, dat leest als een bijzaak. */
@media (min-width: 1000px) {
  .header-actions .btn { font-size: 15px; min-height: 46px; padding: 0 20px; }
}
.top-bar { background: var(--ink); font-size: 13px; }
.top-bar-inner { min-height: 38px; }

/* ---------- ProductHeroLead ----------
   De foto ligt als onderlaag over de volle breedte; de tekst staat erboven. Het
   blijft een echte <img> (met srcset en alt) in plaats van een CSS-achtergrond,
   alleen absoluut gepositioneerd. --soft blijft eronder staan als de foto niet
   laadt, zodat de tekst dan nog steeds op een licht vlak valt. */
.lead {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(1.5rem, 3vh, 2.5rem);
  background: var(--soft);
}
/* Let op: .lead-grid mag zelf NIET gepositioneerd zijn. Doe je dat wel, dan wordt
   het de positioneringscontext van .lead-art en krimpt de beeldlaag tot de
   containerbreedte in plaats van de volle hero. De tekst komt omhoog via
   .lead-copy. */
.lead-grid { display: grid; gap: 32px; align-items: center; }
.lead-copy { position: relative; z-index: 2; }
/* De vijf onderdelen van de hero zijn één verticale groep: hun onderlinge afstand
   komt uit de gap, niet uit losse margins per element. Zo blijft de compositie bij
   elke schermhoogte hetzelfde, en schaalt de ademruimte mee met de viewport. */
.lead-copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(15px, 2.1vh, 22px); }
.lead-brand, .lead-title, .lead-text, .lead .actions, .lead-usps { margin: 0; }
/* Eén uitzondering op de gelijke gap: de knop krijgt iets meer lucht, omdat hij de
   handeling is en niet nog een tekstregel. */
.lead .actions { margin-top: clamp(3px, 0.7vh, 9px); }

.lead-brand { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 750; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; }
.lead-brand strong { color: var(--brand-text); font-weight: 750; }
.lead-brand span { color: var(--text-muted); font-weight: 650; }
.lead-brand span::before { content: "·"; margin-right: 10px; }
.lead-title { font-size: var(--h1); margin: 0; max-width: 22ch; }
.lead-title em { color: var(--brand-text); font-style: normal; }
.lead-text { font-size: 18px; line-height: 1.6; color: var(--text-muted); max-width: 36em; }

/* Het kentekenblok: het conversiepunt, dus het krijgt gewicht. */
.lead-action { margin-top: 26px; padding: 20px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 27, 45, 0.06); max-width: 520px; }
.lead-action-title { margin: 0 0 12px; font-size: 16px; font-weight: 750; line-height: 1.35; letter-spacing: -0.01em; }
.lead-form { display: flex; flex-wrap: wrap; gap: 10px; }
.lead-form input {
  flex: 1 1 190px; min-width: 0; min-height: 48px; padding: 0 16px;
  font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  color: #16305e; background: #ffd82e; border: 2px solid #12356b; border-radius: var(--radius-field);
}
.lead-form input::placeholder { color: #6b6a4e; font-weight: 600; font-size: 15px; letter-spacing: 0.03em; text-transform: none; }
.lead-form input:focus { outline: none; box-shadow: 0 0 0 3px var(--brand-text); }
.lead-form .btn { flex: 0 0 auto; }
.lead-note { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }
.lead-actions { margin-top: 18px; }
.lead-usps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.lead-usps li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.lead-usps .icon { width: 17px; height: 17px; color: var(--brand-text); stroke-width: 2.4; }
/* ---- De beeldlaag ----
   Alleen op desktop. Op een telefoon vult de tekst de hele breedte, dus daar zou
   de foto toch onder een dichte sluier verdwijnen; dan is hij beter weg en blijft
   de hero rustig op --soft staan. */
.lead-art { display: none; }
.lead-image { height: 100%; margin: 0; border-radius: 0; }
.lead-image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }

/* De hero draagt het merk, het beeld en de propositie - verder niets. De
   kentekencheck staat als eigen sectie eronder. */

@media (min-width: 900px) {
  /* Geen vaste hoogte: die was op 520px op elk scherm gelijk, waardoor de hero op
     een 768-scherm 68% van de viewport vulde en op 1080 nog maar 48%. Nu schaalt
     hij mee tussen 430 en 560px. */
  .lead { min-height: clamp(430px, 58vh, 560px); display: flex; align-items: center; }
  .lead-grid { grid-template-columns: minmax(0, 620px); width: min(var(--container), calc(100% - 2 * var(--gutter))); }
  .lead-art { display: block; position: absolute; inset: 0; z-index: 0; }

  /* ---- De sluier ----
     Eén brede overgang zonder rand, in plaats van een vlak plateau met een cliff.
     De stops hangen aan de kolombreedte en niet aan procenten: bij procenten
     schuift de tekst op een smaller scherm de dunne kant in.

     Waarom hij links toch dicht blijft: de foto is daar echt zwart. Gemeten op de
     uitsnede is de donkerste pixel in de tekstband 0,00 en de 5e percentiel 0,006.
     Wat elke kleur dan minimaal aan wit nodig heeft:

       kop #0f1b2d 44px, eis 3          0,40
       lopende tekst #243447, eis 4,5   0,61
       groen accent in de kop, eis 3    0,76
       gedempt #5b6774 12px, eis 4,5    0,90
       groen #0b7a4a 12px, eis 4,5      0,92   <- de merkregel bovenaan

     Vandaar 0,93 tot ruim voorbij die merkregel, en daarna een lange fade naar
     vrijwel niets. Rechts is de foto nu opener dan eerst (0,04 tegen 0,30). */
  .lead {
    /* De linkerrand van de container, en de rechterrand van de tekstkolom. Beide
       als lengte, niet als percentage van de hero: op een breed scherm schuift de
       container naar rechts terwijl de tekst even breed blijft, en dan klopt een
       fractie niet meer. Daar zakte de merkregel op 1778px door AA. */
    --kolom-start: max(var(--gutter), (100% - var(--container)) / 2);
    --kolom-eind: calc(var(--kolom-start) + 640px);
  }
  .lead::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.94) 0,
      rgba(255, 255, 255, 0.93) calc(var(--kolom-start) + 340px),
      rgba(255, 255, 255, 0.62) var(--kolom-eind),
      rgba(255, 255, 255, 0.18) calc(var(--kolom-eind) + 260px),
      rgba(255, 255, 255, 0.04) 100%
    );
  }

  /* De uitleg staat direct op de foto, dus niet gedempt maar in de tekstkleur:
     #5b6774 zou 0,90 sluier vragen, #243447 haalt het ruim. */
  .lead-text { color: var(--text); }
}

/* ---------- PremieCheck: de kentekencheck als eigen conversiestap ----------
   Compacter dan een gewone sectie en meeschalend met de schermhoogte, zodat de
   pakketten eronder niet onnodig ver naar beneden worden geduwd. */
.premie { padding-block: clamp(2.25rem, 4.4vh, 3.5rem); }
.premie-grid { display: grid; gap: 28px; align-items: center; }
.premie-title { font-size: var(--h2); margin: 0; max-width: 18ch; }
.premie-text { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 34em; }
.premie-actie .lead-form { max-width: 440px; gap: 12px; }
.premie-actie .lead-note { max-width: 440px; }
.premie-actie .lead-form input, .premie-actie .lead-form .btn { min-height: 46px; }
.premie-actie .lead-form input { font-size: 18px; }
@media (min-width: 900px) {
  .premie-grid { grid-template-columns: 1fr minmax(0, 460px); gap: 56px; }
  /* Naast elkaar hoeft het kentekenveld niet mee te rekken: acht tekens passen
     ruim in 200px. Zo staat er geen geel blok van 260px naast een even zware
     groene knop. Op een telefoon vult het veld wel gewoon de breedte. */
  .premie-actie .lead-form input { flex: 0 1 200px; }
  /* Het kentekenveld moet op dezelfde optische lijn staan als de kop ernaast.
     De toelichting eronder telde mee in de hoogte waarop align-items: center
     centreert en trok het veld daardoor 16px omhoog. Uit de flow halen lost dat
     op; de toelichting hangt er nog steeds onder. */
  .premie-actie { position: relative; }
  .premie-actie .lead-note { position: absolute; top: 100%; left: 0; right: 0; margin-top: 12px; }
}
/* ---------- Statement: het ene ding waarin IziWise anders is ---------- */
.statement-grid { display: grid; gap: 32px; align-items: start; }
.statement-title { font-size: var(--h2); margin: 0; max-width: 20ch; }
.statement-title em { color: var(--brand-text); font-style: normal; }
.statement-lead { margin: 18px 0 0; font-size: 19px; font-weight: 650; line-height: 1.5; color: var(--text); max-width: 22em; }
.statement-text { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-muted); max-width: 36em; }
.statement .actions { margin-top: 26px; }
.statement-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.statement-points li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 18px 20px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-field); }
.statement.soft .statement-points li { background: #fff; }
.statement-mark { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-text); color: #fff; }
.statement-mark .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.statement-points strong { display: block; font-size: 16px; font-weight: 750; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.statement-points span span { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--text-muted); }
@media (min-width: 900px) { .statement-grid { grid-template-columns: 1fr 1fr; gap: 60px; } }

/* ---------- Steps: de route naar de polis ---------- */
.steps { display: grid; gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 20px; background: var(--soft); border-radius: var(--radius-field); }
.step-num { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--rule); color: var(--brand-text); font-size: 15px; font-weight: 800; line-height: 1; }
.step-body strong { display: block; font-size: 16px; font-weight: 750; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.step-body span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- De bestaande componenten afstemmen op dit merk ---------- */
.cov-card { border-radius: var(--radius); }
@media (min-width: 1100px) {
  /* Niet meer aan elkaar geplakt met rechte hoeken, maar losse productkaarten. */
  .cov-grid { gap: 16px; }
  .cov-card { border-radius: var(--radius); border-left-width: 1px; }
}
.cov-card.is-featured { box-shadow: 0 12px 34px rgba(11, 122, 74, 0.14); }
.cov-price strong { font-family: var(--font-heading); font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--brand-hover); }
.cov-list { font-size: 15px; }
.faq-item summary { font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; }
.faq-answer { font-size: 16px; }
.faq-mark, .cov-mark { border-radius: 50%; }
.logo-box { border-radius: var(--radius-field); }
.data-row, .packages li, .contact-list dd { font-family: var(--font-body); letter-spacing: 0; }
.media-frame, .photo-break-img, .page-image { border-radius: var(--radius); overflow: hidden; }

/* De donkere sectie is in dit merk een accent, geen hoofdrol. */
.section.dark { border-radius: 0; }

/* =========================================================================
   Leesbaarheid en hiërarchie.

   Aanleiding: alle tekst haalde AA (niets zakte onder 4,5:1), maar de pagina's
   waren één wit vlak. Gemeten voor deze ronde:

     home        hero zacht, daarna statement + stappen + pakketten = 2280px
                 wit achter elkaar zonder enige vlakwisseling
     pakketten   kop + pakketten + uitleg + cta = 2964px wit achter elkaar

   Daarom hieronder drie lichtniveaus en een vast ritme, zodat er nooit twee
   secties naast elkaar op hetzelfde niveau staan. Verder alleen kleur: geen
   nieuwe componenten, geen andere maten, geen andere letters.
   ========================================================================= */

:root {
  /* Drie niveaus, meer niet. Alle drie uit het palet van de straat. */
  --vlak-1: #ffffff;   /* --izi-surface */
  --vlak-2: #f7f9f8;   /* --izi-bg, gelijk aan --soft */
  --vlak-3: #eef2f0;   /* --izi-surface-2, voor de afsluitende CTA */

  /* Gedempte tekst staat bovenin op #5b6774 in plaats van de #667384 van de
     straat. Reden: #667384 haalde 4,83 op wit en 4,57 op zacht - net aan - en
     zou op --vlak-3 met 4,27 door AA zakken. #5b6774 is dezelfde kleur, een
     tint donkerder: 5,77 / 5,46 / 5,11. */

  /* Een rand die een kaart echt begrenst. --rule (#dfe5e2) haalt 1,28 op wit
     en verdwijnt daar; deze haalt 1,51. Alleen voor kaartranden, niet voor de
     haarlijntjes in lopende tekst. */
  --kaart-rand: #cbd4d0;
}

/* ---------- Het ritme: zacht, wit, zacht, wit, zacht, niveau 3, donker ----------
   :not(.soft) staat erbij omdat .soft dezelfde specificiteit heeft en later in
   dit bestand zou winnen - een sectie die bewust zacht is, moet zacht blijven. */
.lead { background: var(--vlak-2); }
.page-header:not(.soft) { background: var(--vlak-2); }
/* De volgorde op home is: hero (foto) - premie - pakketten - eigen garage -
   zo werkt het - goed om te weten - cta. Daarop is deze afwisseling gezet;
   .statement.soft staat vast op zacht, dus de rest moet daaromheen passen. */
.premie:not(.soft) { background: var(--vlak-2); }
.coverage:not(.soft) { background: var(--vlak-1); }
.statement:not(.soft) { background: var(--vlak-2); }
.steps-section:not(.soft) { background: var(--vlak-1); }
.cta:not(.dark) { background: var(--vlak-3); }

/* Sommige pagina's wisselen zelf al af met .soft in de inhoud (schade melden doet
   dat). Daar mag geen vaste regel overheen, anders komen er juist vier zachte
   secties achter elkaar. Vandaar positioneel: alleen een sectie die op een even
   licht buurvlak volgt, wisselt. */
.section:not(.soft):not(.dark):not(.cta) + .rows-section:not(.soft) { background: var(--vlak-2); }
.rows-section:not(.soft) + .rows-section:not(.soft) + .rows-section.soft { background: var(--vlak-1); }

/* Waar het vlak wisselt, is de lijn dubbelop. */
.page-header { border-bottom: 0; }
.cta { border-top: 0; }

/* ---------- Kaarten: zichtbaar op elk niveau ----------
   Op een zacht vlak springt een witte kaart er vanzelf uit. Op wit moet de rand
   het werk doen, anders lost de kaart op. */
.statement-points li,
.cov-card,
.step { background: var(--vlak-1); border: 1px solid var(--kaart-rand); }
.statement.soft .statement-points li { border-color: var(--rule); }

/* ---------- De drie commerciële blokken ----------
   1. "Je eigen garage bij schade" staat als enige witte sectie tussen twee
      zachte en is daarmee het eiland op de pagina. */
.statement:not(.soft) .statement-points li { box-shadow: var(--izi-shadow-sm, 0 2px 10px rgba(15, 27, 45, 0.04)); }

/* 2. Het aanbevolen pakket: groene rand plus een zachte gloed. Het designsysteem
      zette hier een 1px-ring; die blijft, de gloed komt erbij. */
.cov-card.is-featured {
  border-color: var(--brand-text);
  box-shadow: 0 0 0 1px var(--brand-text), 0 12px 34px rgba(11, 122, 74, 0.16);
}

/* 3. De afsluitende CTA staat op het derde niveau, zodat het laatste wat je ziet
      ook het duidelijkst is. */
.cta .btn-primary { box-shadow: 0 6px 18px rgba(11, 122, 74, 0.22); }

/* ---------- Groen, maar spaarzaam ----------
   Alleen waar het iets betekent: de actie, het accentwoord, de actieve pagina,
   een voordeel dat je krijgt, en het aanbevolen pakket. De rest blijft neutraal. */
.cov-mark, .faq-mark { color: var(--brand-text); }