/* Gedeelde opmaak van de verzekeringspagina's (tabs, hero, dekkingen, niveaus, tool, anker, keuzeknop).
   Overgenomen uit de designsandbox (git-tag website-template-2026-08-18) zonder de prototype-chrome
   (.proto*, .screen*); verder ongewijzigd, zelfde class-namen. */

/* =========================================================
   Alle CSS van de verzekeringspagina staat in dit ene bestand,
   gegroepeerd per component. Kleuren uitsluitend via de
   bestaande tokens uit main.css, altijd als rgba(var(--token), a).
   Nieuwe componenten: voorvoegsel .insurance-
   ========================================================= */

/* ---------- 0. BASIS / HULPKLASSEN ---------- */
[hidden] {
  display: none !important;
}
.insurance-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.insurance-page :focus-visible {
  outline: 3px solid rgba(var(--color-blue-primary), 1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 2. PAGINA-RAAMWERK ----------
   De pagina is zelf breedteloos. Gewone secties worden gecentreerd op
   1220px; een .insurance-band loopt met zijn achtergrond door tot de
   schermrand en centreert zijn eigen inhoud op diezelfde 1220px. Zo
   ontstaat het bandenritme van oomverzekeringen.nl zonder dat er ook
   maar iets van de content in een extra wikkel hoeft. */
/* De verzekeringspagina regelt zijn eigen breedtes. Daarom gaat de
   begrenzing van de bestaande .content-area (max-width 1260px + 20px
   padding, uit main.css) er voor deze pagina áf: anders kan een band
   nooit tot de schermrand lopen. De inhoud staat daarna nog steeds op
   exact dezelfde 1220px als nu. Grip mag dit ook oplossen met een
   modifier op de container in plaats van met :has(). */
.content-area:has(.insurance-page) {
  max-width: none;
  padding-inline: 0;
}
/* Eindigt de pagina met de gekleurde sluitband, dan sluit die rechtstreeks aan
   op de footer. Anders bleef de onderpadding van .content-area (60px, uit
   main.css) als lichte reststrook tussen twee gekleurde vlakken staan: dat
   leest als een gat, niet als een afsluiting. Het overzicht heeft geen
   sluitband en houdt zijn onderpadding dus gewoon. */
.content-area:has(.insurance-band--anker) {
  padding-bottom: 0;
}
.insurance-page {
  --insurance-breedte: 1220px;
}
.insurance-page > * {
  width: 100%;
  max-width: var(--insurance-breedte);
  margin-inline: auto;
  padding-inline: 20px;
}
.insurance-band {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, var(--insurance-breedte));
  justify-content: center;
  padding-block: 34px;
}
.insurance-band--donker {
  background: rgba(var(--color-blue-dark), 1);
  color: rgba(var(--color-white), 1);
}
/* Sluitband. Was een beige vlak: de enige plek op de pagina waar die
   kleur nog voorkwam, en met het beige "waarom via JoHo"-blok er direct
   boven werden het twee zandkleurige vlakken op rij. De band is nu donker
   met een verloop naar blauw-medium, zodat de pagina eindigt zoals hij
   begint — donkere hero boven, donkere conversieband onder, alles
   daartussen licht. */
.insurance-band--anker {
  /* Eén laag: de diagonale sluitkleur. De verticale overgang naar het
     footerblauw is eruit — die las als een lichte balk tussen de donkere
     band en de footer. De footer maakt de overgang zelf al met zijn eigen
     schuine punt (.site-footer__interaction::before), net als op
     expatverzekering.nl. */
  background:
    linear-gradient(
      128deg,
      rgba(var(--color-blue-dark), 1) 0%,
      rgba(var(--color-blue-dark), 1) 42%,
      rgba(var(--color-blue-medium), 1) 100%
    );
  color: rgba(var(--color-white), 1);
  margin-top: 44px;
  /* Onderin iets meer lucht dan bovenin: de band raakt de footer, dus de
     laatste regel mag er niet tegenaan liggen. */
  padding-block: 44px 60px;
}

/* --- hero --- */
/* Het verzekeraarslogo stond als losse witte plaat linksboven in de hero.
   Die plaat is eruit: het beeldmerk vult nu het beeldblok rechts (zie
   .insurance-hero__media). Eén wit vlak in plaats van twee, en de hero
   heeft altijd een rechterkolom — ook zonder beeldredactie. */
.insurance-hero__type {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-white), 0.75);
}
.insurance-hero__title {
  font-family: "Zilla Slab", serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.12;
  color: rgba(var(--color-white), 1);
  margin: 8px 0 16px;
}
.insurance-hero__intro {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(var(--color-white), 0.88);
}
.insurance-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 24px;
}
.insurance-hero__actions .btn-text-arrow {
  color: rgba(var(--color-white), 1);
}
/* Beeldblok in de hero, 16:9. Twee vullingen, dezelfde plaat:
   --foto  = de aangeleverde foto voor deze verzekering (dekt het vlak);
   --merk  = de lege staat, met het beeldmerk van de verzekeraar erin.
   De lege staat is daarmee geen streepjeskader meer maar een afgemaakt
   vlak. De logo's hebben zelf een witte achtergrond, dus die witte plaat
   is meteen hun ondergrond; op hoogte uitgelijnd wegen een breed-en-laag
   logo (Goudse) en een bijna vierkant logo (ACS) even zwaar. */
.insurance-hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 26px;
  background: rgba(var(--color-white), 1);
  box-shadow: 0 18px 44px rgba(var(--color-black), 0.3);
}
.insurance-hero__media--foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Vlak wit, geen verloop en geen tint: de logobestanden hebben zelf een
   witte achtergrond, dus elke andere ondergrond laat hun bijsnijkader als
   een rechthoek zien. */
.insurance-hero__media--merk {
  display: grid;
  place-items: center;
  padding: 9% 11%;
}
.insurance-hero__media--merk img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
/* --- kerngegevens: dezelfde velden uit blok 1.4, maar niet langer als
       eigen grijze strook onder de hero. Ze staan nu ín de hero, onder
       een haarlijn: kleiner, rustiger, en ze vullen de breedte die de
       hero toch al heeft. --- */
.insurance-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--color-white), 0.22);
}
.insurance-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.insurance-hero__fact dt {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-white), 0.62);
}
.insurance-hero__fact dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(var(--color-white), 1);
}
/* --- pijlerrij onder de hero -------------------------------------------
   Naar het voorbeeld van oomverzekeringen.nl: vier korte beloftes over de
   volle breedte, direct onder de hero, met een lijnicoon erboven en géén
   kader eromheen. Dit is wat de desktopbreedte hier vult in plaats van
   een halve pagina wit.
   Géén nieuw contentveld: dit is het bestaande blok "waarom via JoHo"
   (globaal.json → waarom_joho) in verkorte vorm. Het vijfde punt, het
   AFM-nummer, blijft alleen onderaan staan.
   Op mobiel vallen de vier onder elkaar. --- */
.insurance-pillars {
  padding-block: 30px 34px;
}
.insurance-pillars__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px 40px;
}
.insurance-pillar__icon {
  display: block;
  color: rgba(var(--color-blue-primary), 1);
  margin-bottom: 12px;
}
.insurance-pillar__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 6px;
}
.insurance-pillar__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.78);
}
/* Kruimelpad. Stond op de lichte pagina-achtergrond en gaf zo een lichte
   strook tussen de zwarte navigatiebalk en de donkere hero. Het pad hoort nu
   bij de hero: zelfde donkere vlak, over de volle breedte, zodat de pagina
   direct onder de header donker begint. De negatieve bovenmarge schuift de
   band een stuk onder de vaste header (die is ondoorzichtig wit en dekt hem
   af), zodat er geen restspleet overblijft als de headerhoogte afwijkt van de
   bovenpadding van .content-area. */
.insurance-crumbs {
  max-width: none;
  padding-inline: 0;
  margin-top: -24px;
  background: rgba(var(--color-blue-dark), 1);
}
.insurance-crumbs__inner {
  max-width: var(--insurance-breedte);
  margin-inline: auto;
  padding: 38px 20px 0;
  font-size: 13px;
  color: rgba(var(--color-white), 0.7);
}
.insurance-crumbs a {
  color: rgba(var(--color-white), 0.7);
}
.insurance-crumbs span {
  margin: 0 6px;
}
/* Eén kolom: de meescrollende zijkolom is vervallen. De tabinhoud
   gebruikt de volle breedte; lopende tekst blijft op leesbreedte. */
.insurance-tabsheet {
  margin-top: 28px;
}
/* De waas hangt aan de tabbalk: het paneel heeft geen eigen zijpadding, dus
   hij staat exact in dezelfde kolom als de onderlijn van de balk en leest als
   het vel dat aan de gekozen tab vastzit — geen los gekleurd blok. */
.insurance-panel {
  padding-top: 26px;
  background-image: linear-gradient(
    rgba(var(--insurance-tab), calc(var(--insurance-tab-rust) * 0.5)),
    rgba(var(--insurance-tab), 0) 340px
  );
}
.insurance-panel > * + * {
  margin-top: 40px;
}
/* Eén blok smaller dan de rest. De pagina bestaat verder uit banden en
   blokken van 1180 px; de dekkingenlijst zou daarin de vierde volle-breedte
   kaartenstapel op rij zijn. OOM zet die lijst juist in een smallere,
   gecentreerde kolom (daar ongeveer 78% van de contentbreedte), en dat
   geeft de lange pagina een rustpunt: de lijst leest als een kolom in
   plaats van als nóg een vlak. De kop en de inleiding schuiven mee — dat
   is wat het als kolom laat lezen in plaats van als een uitlijnfout.
   Onder 940 px valt de begrenzing vanzelf weg, dus geen mediaquery. */
.insurance-section--smal {
  max-width: 940px;
  margin-inline: auto;
}
.insurance-block__title {
  font-family: "Zilla Slab", serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 14px;
}
/* Blokkop met merkteken: kop links, het JoHo-logo rechts op de kopregel.
   Alleen bij de premietool en de klantenservice — daar is JoHo de partij, dus
   het logo is daar informatie en geen versiering. Op smalle schermen valt het
   logo onder de kop; het krijgt geen eigen regelhoogte want de kop wikkelt daar
   toch al over twee regels. */
.insurance-blockhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 14px;
}
.insurance-blockhead .insurance-block__title {
  margin-bottom: 0;
}
.insurance-blockhead__brand {
  display: block;
  width: auto;
  height: 26px;
  flex: none;
}
.insurance-block__lead {
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.8);
  margin-bottom: 18px;
}
/* Lopende tekst blijft op leesbreedte; kaarten, tabellen en gridjes
   gebruiken wél de volle kolom. */
.insurance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 70ch;
}
.insurance-list li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.55;
}
.insurance-list li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 1);
}
/* Merktekens binnen een dekking. "Wat is verzekerd" en "wat is niet
   verzekerd" droegen allebei dezelfde blauwe stip, met een groene of rode
   badge in de subkop als enig verschil — twee keer hetzelfde signaal, ver
   van de regel waar het over gaat. Nu draagt elke regel zelf het teken:
   een groene schijf met een vinkje, of een gedempte schijf met een streep.
   Beide zijn met CSS getekend, dus geen iconenset en geen extra bestanden.
   De betekenis staat daarnaast in woorden in de subkop, dus kleur is nooit
   de enige drager. */
.insurance-list--gedekt li,
.insurance-list--niet-gedekt li {
  padding-left: 34px;
}
.insurance-list--gedekt li::before,
.insurance-list--niet-gedekt li::before {
  left: 0;
  top: 2px;
  width: 21px;
  height: 21px;
}
.insurance-list--gedekt li::before {
  background: rgba(var(--color-green), 1);
}
.insurance-list--niet-gedekt li::before {
  background: rgba(var(--color-blue-dark), 0.42);
}
.insurance-list--gedekt li::after,
.insurance-list--niet-gedekt li::after {
  content: "";
  position: absolute;
  background: transparent;
}
/* Vinkje: twee randen van een blokje, 45 graden gedraaid. */
.insurance-list--gedekt li::after {
  left: 5.5px;
  top: 9px;
  width: 10px;
  height: 5px;
  border-left: 2px solid rgba(var(--color-white), 1);
  border-bottom: 2px solid rgba(var(--color-white), 1);
  transform: rotate(-45deg);
}
/* Streep in plaats van een kruis: een uitsluiting is geen foutmelding. */
.insurance-list--niet-gedekt li::after {
  left: 6px;
  top: 11.5px;
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: rgba(var(--color-white), 1);
}

/* ---------- 3. TABBALK ----------
   De vier tabs waren vier identieke woorden op één balk; je zag wel dat er iets
   veranderde, niet dat je op een ánder tabblad stond. Ze staan nu als vier
   vlakken naast elkaar: alle vier dezelfde lichte tint van het huisstijlblauw,
   elk met een eigen rand, op één doorlopende lijn. Wat ze uit elkaar houdt is
   de omtrek, niet de kleur — één tint houdt de balk rustig en geeft geen enkele
   tab meer gewicht dan de andere.
   De gekozen tab wordt wit: het lichtste vlak van de pagina, dus het enige dat
   naar voren komt, met de blauwe streep eronder. De rest blijft als gesloten
   bladen achter elkaar liggen.
   De waas boven het paneel is 0,5 × de rustalfa. Zwaarder dan dat en de blauwe
   contact- en actiekaarten in de panelen verdwijnen erin. */
.insurance-tabsheet {
  --insurance-tab: var(--color-blue-primary);
  --insurance-tab-rust: 0.11;
  --insurance-tab-hover: 0.18;
}

/* Nog steeds een onderstreepte tabbalk, maar rustiger gezet: de streep is
   afgerond en loopt niet meer over de volle knopbreedte, de knop krijgt bij
   hover een lichte tint in plaats van alleen een kleuromslag, en er zit meer
   lucht tussen tekst en lijn. */
/* De onderlijn hoort bij de rij, niet bij de knoppenstrook: rechts van de tabs
   staat het merkteken en de lijn moet onder allebei doorlopen. */
.insurance-tabbar {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  /* De lijn loopt onder de hele rij door — onder de vier tabs én onder het
     merkteken. Dat is wat de vier vlakken tot één navigatiebalk maakt in plaats
     van vier losse koppen; de blauwe streep van de gekozen tab ligt er bovenop.
     Iets sterker dan de 0,14 van hiervoor: met de getinte tabs erop verdween
     hij anders. */
  border-bottom: 1px solid rgba(var(--color-blue-dark), 0.2);
}
.insurance-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.insurance-tabs::-webkit-scrollbar {
  display: none;
}
.insurance-tabs__button {
  position: relative;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 500;
  /* Was 0,62. Dat las als uitgeschakeld in plaats van als aanklikbaar: op een
     tint is lichtgrijze tekst het teken voor "kan niet". */
  color: rgba(var(--color-blue-dark), 0.78);
  /* Rand langs kop en zijkanten, niet onderlangs: daar zit de doorlopende lijn
     van de balk al. Zo krijgt elke tab een eigen omtrek — vier keuzes naast
     elkaar — zonder dat er een kader omheen komt. */
  border: 1px solid rgba(var(--color-blue-dark), 0.12);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 15px 18px 14px;
  cursor: pointer;
  white-space: nowrap;
  background: rgba(var(--insurance-tab), var(--insurance-tab-rust));
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease;
}
/* De streep ligt binnen de knop (bottom: 0), niet er 1px onder. De strook
   .insurance-tabs scrollt horizontaal en klipt daardoor ook verticaal: alles
   wat onder de knop uitstak, viel weg. Nu ligt hij pal boven de doorlopende
   lijn van de balk, wat hem precies de plek geeft die hij hoorde te hebben. */
.insurance-tabs__button::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background-color 0.15s ease;
}
.insurance-tabs__button:hover {
  color: rgba(var(--color-blue-dark), 1);
  background: rgba(var(--insurance-tab), var(--insurance-tab-hover));
  border-color: rgba(var(--color-blue-dark), 0.2);
}
.insurance-tabs__button[aria-selected="true"] {
  color: rgba(var(--color-blue-dark), 1);
  font-weight: 600;
  background: rgba(var(--color-white), 1);
  /* Wit op een lichtgrijze pagina heeft een rand nodig, anders houdt het
     gekozen blad geen vorm. */
  border-color: rgba(var(--color-blue-dark), 0.22);
}
.insurance-tabs__button[aria-selected="true"]::after {
  background: rgba(var(--insurance-tab), 1);
}
/* Merkteken rechts in de tabbalk. De pagina toont in de hero het logo van de
   verzekeraar; dit is het enige teken dat op alle vier de tabs zichtbaar blijft
   dat de polis via JoHo loopt. Bewust geen link: hij staat naast een tablist en
   een extra tabstop daar verwart de toetsenbordvolgorde. Onder 1024px verborgen
   (zie de mediaquery daar): de balk scrollt dan horizontaal. */
.insurance-tabbar__brand {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 9px;
  padding-bottom: 15px;
  font-size: 13px;
  color: rgba(var(--color-blue-dark), 0.55);
  white-space: nowrap;
}
/* Iets meer dan de helft van de logohoogte in header en footer (44px). Kleiner
   dan dit valt "INSURANCES" onder de leesbaarheidsgrens en blijft er een blauwe
   vlek over; de ingetogenheid zit in de maat en de plek, niet in doorzichtigheid. */
.insurance-tabbar__brand img {
  display: block;
  width: auto;
  height: 26px;
}

/* ---------- 4. ASSISTENT (de agent) ----------
   De assistent is niet langer iets van deze pagina: hij is een
   script-embed van JoHo, net als de premietool (zie
   `handoff/embed-klantagent.md`). De container hieronder draagt alleen de
   productsleutel en een terugvaltekst; zodra `joho-klantagent.js` geladen
   is bouwt dat script er zijn eigen chatpaneel in, met zijn eigen
   stylesheet onder de prefix `.joho-klantagent__…`. Maat, kleur, het
   vergroten, de volledige-schermstand onder 900px en de privacyregel
   zitten dáár — hier hoort daar niets meer van te staan.

   Wat de pagina wél regelt: de container zit ín de zwevende knop (§15b),
   een flexkolom met een gap. Het paneel zweeft los (position: fixed), dus
   zodra het script het overneemt — het zet dan de klasse `joho-klantagent`
   op de container — mag de container zelf geen plek meer innemen.
   Vandaar `display: contents`: geen doos, geen gap, geen invloed op de
   knop eronder.

   Zolang het script niet geladen is (of de agent onbereikbaar is) blijft
   de terugvaltekst met de voorbeeldvragen staan; die krijgt hieronder net
   genoeg opmaak om als kaartje boven de knop te kunnen staan. */
.insurance-assistant {
  width: min(320px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(var(--color-white), 1);
  border: 1px solid rgba(var(--color-grey-medium), 1);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(var(--color-blue-dark), 0.18);
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(var(--color-blue-dark), 0.78);
}
.insurance-assistant p {
  margin: 0;
}
.insurance-assistant.joho-klantagent {
  display: contents;
}

/* ---------- 5. (vervallen) FILTERCHIPS ----------
   De chiprij Alles · Ziektekosten · Bevalling · Verenigde Staten · Eigen
   risico · Uitsluitingen is eruit. Bij negen onderdelen met een
   samenvattingszin in de dichte kop voegde filteren niets toe, en het
   kostte een nieuw contentveld (`themas`) per dekking dat nu vervalt. */

/* ---------- 6. DEKKINGSACCORDEON ---------- */
.insurance-coverages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.insurance-coverage {
  background: rgba(var(--color-beige-light), 1);
  border: 1px solid rgba(var(--color-grey-medium), 1);
  border-radius: 16px;
  overflow: hidden;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-coverage__heading {
  margin: 0;
}
.insurance-coverage__toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: none;
  padding: 18px 20px;
  cursor: pointer;
  font-family: Poppins, sans-serif;
}
.insurance-coverage__toggle:hover .insurance-coverage__name {
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-coverage__label {
  flex: 1 1 auto;
  min-width: 0;
}
.insurance-coverage__name {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-coverage__summary {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--color-blue-dark), 0.78);
}
.accordion-heading__icon {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 3px;
}
.accordion-heading__icon::before,
.accordion-heading__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(var(--color-blue-primary), 1);
  border-radius: 1px;
}
.accordion-heading__icon::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.accordion-heading__icon::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease;
}
[aria-expanded="true"] .accordion-heading__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.insurance-coverage__panel {
  padding: 18px 20px 22px;
  border-top: 1px solid rgba(var(--color-grey-medium), 1);
}
.insurance-coverage__section + .insurance-coverage__section {
  margin-top: 22px;
}
/* De open dekking bestond uit vijf tekstblokken onder elkaar over de volle
   breedte, met opsommingen die op desktop over twee kolommen uitwaaierden.
   Zes ongelijke regels in twee kolommen lopen nooit gelijk uit, en dat is
   wat de uitgeklapte dekking rommelig maakte. Nu heeft het paneel twee
   vaste kolommen met elk een eigen rol: links wat er wel en niet gedekt is
   (één kolom, dus de regels lopen recht onder elkaar), rechts een blok met
   de bedragen, de aandachtspunten en de verzekeringskaart. De opsomming
   zelf waaiert niet meer uit; de breedte wordt gebruikt door de inhoud te
   verdelen in plaats van door de regels te versnipperen. */
.insurance-coverage__aside {
  margin-top: 22px;
  background: rgba(var(--color-grey-light), 1);
  border-radius: 14px;
  padding: 18px 20px;
}
/* In een kolom van ~290 px past label en waarde niet naast elkaar; daar
   staat de waarde onder het label in plaats van erachter af te breken. */
.insurance-coverage__aside .insurance-facts div {
  display: block;
  padding: 8px 0;
}
.insurance-coverage__aside .insurance-facts dt {
  font-size: 13.5px;
  color: rgba(var(--color-blue-dark), 0.6);
}
.insurance-coverage__aside .insurance-facts dd {
  margin-top: 1px;
}
.insurance-coverage__aside .insurance-notice {
  background: transparent;
  border: none;
  border-left: 3px solid rgba(var(--color-blue-primary), 0.5);
  border-radius: 0;
  padding: 1px 0 1px 13px;
}
.insurance-coverage__aside .insurance-notice--attentie {
  border-left-color: rgba(var(--color-red), 0.5);
}
.insurance-coverage__aside .insurance-notice__text {
  font-size: 14.5px;
}
/* De verzekeringskaart is de laatste regel in het blok; daar hoeft geen
   scheidingslijn meer onder. */
.insurance-coverage__aside .pagelink-item:last-child {
  border-bottom: none;
}
.insurance-coverage__aside .pagelink-item a {
  padding-bottom: 0;
}
/* Subkoppen binnen een dekking zijn nu labels: klein, in kapitalen en
   gedempt. Ze markeren het blok zonder met de dekkingsnaam in de kop te
   concurreren, en ze dragen het woord dat de betekenis vasthoudt nu de
   badge weg is. */
.insurance-coverage__subtitle {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-dark), 0.55);
  margin-bottom: 10px;
}
/* .badge* bestaat al in assets/ui-reference.html; hier overgenomen. */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.badge--available {
  background: rgba(var(--color-green), 0.12);
  color: rgba(var(--color-green), 1);
}
.badge--unavailable {
  background: rgba(var(--color-red), 0.12);
  color: rgba(var(--color-red), 1);
}
.badge--website {
  background: rgba(var(--color-blue-primary), 0.12);
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-facts {
  margin: 0;
  display: grid;
  gap: 2px 20px;
  font-size: 15px;
}
.insurance-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--color-grey-medium), 0.7);
}
.insurance-facts dt {
  color: rgba(var(--color-blue-dark), 0.8);
}
.insurance-facts dd {
  margin: 0;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
}

/* --- "Vraag hierover": de agent binnen de dekking zelf. Staat hidden in
       de markup en wordt door JS getoond, net als de vraagbalk: zonder JS
       (of met de agent uit) hoort hij er niet te staan. --- */
.insurance-coverage__footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--color-grey-medium), 1);
}
.insurance-coverage__ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(var(--color-blue-primary), 0.5);
  border-radius: 30px;
  background: transparent;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(var(--color-blue-primary), 1);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.insurance-coverage__ask:hover {
  background: rgba(var(--color-blue-primary), 1);
  color: rgba(var(--color-white), 1);
}

/* ---------- 7. AANDACHTSPUNTEN ----------
   Waren rode `.alert--error`-kaarten (rode rand, rode vulling, rode kop).
   Vijf rode vlakken onder elkaar lezen als vijf storingsmeldingen. Nu één
   rustige kaart met een gekleurd accent aan de linkerkant: blauw voor
   informatie, gedempt rood voor een aandachtspunt. De tekst is overal
   donkerblauw, dus de kleur draagt de nuance en niet de leesbaarheid. */
.insurance-notices {
  display: grid;
  gap: 12px;
}
.insurance-notice {
  background: rgba(var(--color-beige-light), 1);
  border: 1px solid rgba(var(--color-grey-medium), 1);
  border-left: 4px solid rgba(var(--color-blue-primary), 0.55);
  border-radius: 14px;
  padding: 15px 18px;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-notice--attentie {
  border-left-color: rgba(var(--color-red), 0.5);
}
.insurance-coverage__section > .insurance-notice + .insurance-notice {
  margin-top: 10px;
}
.insurance-notice__title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 5px;
}
.insurance-notice__text {
  color: rgba(var(--color-blue-dark), 0.88);
  font-size: 15px;
  line-height: 1.6;
}

/* Variant `--info-cards`, alleen voor het blok "Waar u op moet letten".
   Daar staan vijf punten bij elkaar; met accentlijn en beige vulling
   leest die rij als een stapel meldingen. Hier dus witte kaarten met een
   dunne rand, een rond icoonvlak en geen kleuraccent: informatie, geen
   waarschuwing. Het onderscheid blauw/rood (`--attentie`) vervalt binnen
   deze variant bewust; de losse "Let op"-kaarten in de dekkings-
   accordeons houden de basisstijl ongewijzigd. */
.insurance-notices--info-cards {
  gap: 16px;
}
.insurance-notices--info-cards .insurance-notice {
  background: rgba(var(--color-white), 1);
  border: 1px solid rgba(var(--color-grey-medium), 1);
  border-radius: 16px;
  padding: 19px 20px;
  box-shadow:
    0 1px 2px rgba(var(--color-blue-dark), 0.04),
    0 2px 8px rgba(var(--color-blue-dark), 0.03);
}
.insurance-notices--info-cards .insurance-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 0.1);
  color: rgba(var(--color-blue-primary), 1);
  margin-bottom: 12px;
}
.insurance-notices--info-cards .insurance-notice__icon svg {
  display: block;
}
.insurance-notices--info-cards .insurance-notice__title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 6px;
}
.insurance-notices--info-cards .insurance-notice__text {
  color: rgba(var(--color-blue-dark), 0.78);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- 8. FAQ / SERVICEVRAGEN (.menu-faq* bestaat live bij Grip) ---------- */
.menu-faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.menu-faq-list__item {
  background: rgba(var(--color-beige-light), 1);
  border: 1px solid rgba(var(--color-grey-medium), 1);
  border-radius: 16px;
  overflow: hidden;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.menu-faq-question {
  margin: 0;
}
.menu-faq-question button {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: none;
  padding: 16px 20px;
  cursor: pointer;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(var(--color-blue-dark), 1);
  line-height: 1.4;
}
.menu-faq-question button:hover {
  color: rgba(var(--color-blue-primary), 1);
}
.menu-faq-answer {
  padding: 0 20px 20px;
}
/* ---------- 9. DEKKINGSNIVEAUS ----------
   Beeldtaal overgenomen uit de dekkingsvergelijkings-PDF
   (src/pdf/dekkingsvergelijking/templates/dekkingsoverzicht.html.j2):
   kolommen als kaarten, waardekolommen als één getint segment, ✓/✗ in
   plaats van de woorden "Gedekt"/"Niet gedekt", een blauwe chip voor
   voorwaarden en een omlijnde badge voor losse modules. De categoriekoppen
   (Medische zorg · Bevalling en gezin · Hulpmiddelen) zijn eruit: de tabel
   is nu één doorlopend geheel, zoals gevraagd. Dat scheelt tegelijk een
   redactiekeuze per verzekering, want die indeling was zelf verzonnen.
   De PDF rekent in mm en pt en gebruikt DejaVu; dit is dezelfde
   opzet in px met Poppins en Zilla Slab. Kleuren komen uit de bestaande
   tokens: waar de PDF #E6EEF6 / #F3F7FA / #DCE8F4 gebruikt staat hier een
   tint van --color-blue-primary. */
.insurance-levels__picker {
  display: flex;
  /* Vanaf vier niveaus passen de knoppen niet meer op één regel (Global Health
     Journey); zonder wrap steken ze buiten de pil. Bij drie niveaus verandert er
     niets, want dan wordt er niet gewrapt. */
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 14px;
}
.insurance-levels__picker .view-toggle__btn {
  flex: 1;
  justify-content: center;
}
.table-container {
  overflow-x: auto;
}
.insurance-levels__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px 0;
  table-layout: fixed;
  font-size: 15px;
}
/* --- kolomkoppen --- */
.insurance-levels__rowhead {
  text-align: left;
  vertical-align: bottom;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-dark), 0.55);
  padding: 0 16px 12px 0;
}
.insurance-levels__table thead th.insurance-levels__cell {
  background: rgba(var(--color-blue-primary), 0.1);
  border-radius: 12px 12px 0 0;
  border-bottom: 3px solid rgba(var(--color-blue-dark), 1);
  padding: 14px 14px 12px;
  text-align: left;
  vertical-align: bottom;
}
.insurance-levels__product {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-medium), 1);
  margin-bottom: 4px;
}
.insurance-levels__name {
  display: block;
  font-family: "Zilla Slab", serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  color: rgba(var(--color-blue-dark), 1);
}
/* premie_vanaf is leeg in beide contentbestanden; staat er wél een bedrag,
   dan landt het hier — net als de regel .lvl-meta in de PDF. */
.insurance-levels__meta {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--color-blue-dark), 0.7);
  margin-top: 4px;
}
/* --- itemrijen --- */
.insurance-levels__row th {
  text-align: left;
  vertical-align: top;
  padding: 11px 16px 11px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(var(--color-blue-dark), 1);
  border-bottom: 1px solid rgba(var(--color-grey-medium), 1);
}
.insurance-levels__table td.insurance-levels__cell {
  background: rgba(var(--color-blue-primary), 0.045);
  border-bottom: 1px solid rgba(var(--color-grey-medium), 1);
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(var(--color-blue-dark), 1);
  vertical-align: top;
  text-align: center;
}
/* Het kolomsegment rondt boven- en onderaan één keer af: de tabel is één
   doorlopend blok, zonder tussenkopjes. */
.insurance-levels__group .insurance-levels__row:first-of-type td.insurance-levels__cell {
  border-radius: 10px 10px 0 0;
}
.insurance-levels__group .insurance-levels__row:last-of-type td.insurance-levels__cell {
  border-radius: 0 0 10px 10px;
  border-bottom: none;
}
.insurance-levels__group .insurance-levels__row:last-of-type th {
  border-bottom: none;
}
/* --- markers, chips en badges --- */
.insurance-levels__mark {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.insurance-levels__mark--ja {
  color: rgba(var(--color-green), 1);
}
.insurance-levels__mark--nee {
  color: rgba(var(--color-blue-dark), 0.35);
}
/* Chip: informatief, niet alarmerend — voor voorwaarden en beperkingen. */
.insurance-levels__chip {
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(var(--color-blue-primary), 0.14);
  color: rgba(var(--color-blue-medium), 1);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}
.insurance-levels__sub {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(var(--color-blue-dark), 0.6);
  margin-top: 3px;
}
/* Badge: apart bij te kopen module. Was een dichte, donkerbeige vulling;
   nu een lichte omlijning. Blijft daarmee anders van vorm dan de blauwe
   chip — omlijnd tegenover gevuld — zonder een derde kleurvlak. */
.insurance-levels__badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(var(--color-blue-dark), 0.28);
  border-radius: 20px;
  background: transparent;
  color: rgba(var(--color-blue-dark), 0.72);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.insurance-levels__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--color-grey-medium), 1);
  font-size: 13px;
  color: rgba(var(--color-blue-dark), 0.65);
}
.insurance-levels__legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.insurance-levels__disclaimer {
  margin-top: 10px;
  max-width: 90ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(var(--color-blue-dark), 0.55);
}
.insurance-levels--gekozen .insurance-levels__cell:not(.is-actief) {
  display: none;
}

/* ---------- 10. PREMIETOOL-RESERVERING EN VERWIJSBLOK ---------- */
/* De reservering is nu de terugvalstaat van de échte premietool: staat
   het script uit of is de API niet bereikbaar, dan blijft dit blok staan
   zoals het was. Zodra de tool laadt vervangt hij de inhoud en zet hij de
   klasse `joho-premietool` erbij; de streepjesrand en de vaste hoogte
   moeten dan wég, want de tool brengt zijn eigen kader mee. */
.insurance-tool {
  border: 2px dashed rgba(var(--color-blue-primary), 0.55);
  border-radius: 20px;
  background: rgba(var(--color-blue-primary), 0.04);
  padding: 24px 20px;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-tool.joho-premietool {
  border: none;
  background: none;
  padding: 0;
  min-height: 0;
  display: block;
}
.insurance-tool__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-medium), 1);
}
.insurance-tool__title {
  font-family: "Zilla Slab", serif;
  font-size: 22px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-tool__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.85);
  max-width: 62ch;
}
.insurance-tool__specs {
  margin-top: auto;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.65);
  border-top: 1px dashed rgba(var(--color-blue-primary), 0.4);
  padding-top: 12px;
}
/* Verwijsblok naar de vergelijkingstool. Was een beige vlak met een
   donkerbeige rand (--color-yellow-grey); die combinatie las als een
   waarschuwing in plaats van als een actie. Nu een blauw getint vlak
   zonder rand, met een gevulde ronde medaillon links: het is het enige
   echte actieblok op de Premie-tab en mag daar ook naar uitzien. Zelfde
   opbouw als het lichte blok bij OOM: rond icoon, serif-kop, één alinea,
   gevulde knop. */
.insurance-referral {
  position: relative;
  background: rgba(var(--color-blue-primary), 0.07);
  border: none;
  border-radius: 22px;
  padding: 26px 22px;
}
.insurance-referral__medallion {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 1);
  color: rgba(var(--color-white), 1);
}
.insurance-referral__text {
  margin: 8px 0 18px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.88);
  max-width: 62ch;
}

/* ---------- 11. PREMIEFACTOREN EN KORTINGEN ---------- */
/* Premiefactoren en kortingen deelden één opmaak: negen blokken met boven
   elke kop dezelfde dikke blauwe streep. Negen keer hetzelfde accent leest
   als negen keer hetzelfde blok — de Premie-tab werd er eentonig van, en
   het verschil tussen "wat maakt de premie hoger" en "wat maakt hem lager"
   verdween. Ze zijn nu uit elkaar getrokken:
     · factoren  — genummerd, dunne grijze scheidingslijn, rustig raster;
     · kortingen — beige kaart met het percentage als kop, want dat is het
                   enige getal op deze tab dat de bezoeker meeneemt.
   De blauwe streep is daarmee weg uit beide. */
.insurance-factors {
  display: grid;
  gap: 26px 40px;
  counter-reset: premiefactor;
}
.insurance-factor {
  padding-top: 14px;
  border-top: 1px solid rgba(var(--color-grey-medium), 1);
  scroll-margin-top: var(--header-height-minimized, 130px);
}
/* Het volgnummer is decoratie, geen rangorde: het geeft het raster ritme
   zonder dat er een tweede regel tekst bij komt. */
.insurance-factor__title::before {
  counter-increment: premiefactor;
  content: counter(premiefactor, decimal-leading-zero);
  display: block;
  font-family: "Zilla Slab", serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  color: rgba(var(--color-blue-primary), 0.32);
  margin-bottom: 9px;
}
.insurance-factor__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 6px;
}
.insurance-factor__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.85);
}
/* Kortingen. Het percentage stond midden in de lopende tekst; hier staat
   het bovenaan als getal. Dat vraagt wél een nieuw contentveld per korting
   (`accent`, bijvoorbeeld "20%" met bijschrift "of 10% in dure regio's").
   Staat dat veld leeg, dan valt alleen het getal weg en blijft de kaart
   staan — zie de derde korting, die geen percentage heeft. */
.insurance-discounts {
  display: grid;
  gap: 18px;
}
.insurance-discount {
  background: rgba(var(--color-beige), 1);
  border-radius: 16px;
  padding: 22px 24px;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-discount__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 9px;
  font-family: "Zilla Slab", serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  color: rgba(var(--color-green), 1);
  margin-bottom: 10px;
}
.insurance-discount__figure--woord {
  font-size: 23px;
}
.insurance-discount__note {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(var(--color-blue-dark), 0.7);
}
.insurance-discount__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 6px;
}
.insurance-discount__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.85);
}

/* ---------- 12. AANVRAAGSTAPPEN, BENODIGDHEDEN, ACTIE ---------- */
.insurance-steps {
  list-style: none;
  counter-reset: stap;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
}
.insurance-steps li {
  counter-increment: stap;
  position: relative;
  padding-left: 52px;
}
.insurance-steps li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 1);
  color: rgba(var(--color-beige-light), 1);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insurance-steps__title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  padding-top: 4px;
}
.insurance-steps__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.85);
  margin-top: 2px;
}
/* Zelfde ingreep als bij .insurance-referral: het grijze randje om een
   bijna-wit vlak is eruit, er staat een licht blauw vlak voor in de
   plaats. Zo hebben alle actie- en contactblokken op de pagina dezelfde
   herkenbare ondergrond. */
.insurance-action {
  background: rgba(var(--color-blue-primary), 0.06);
  border: none;
  border-radius: 22px;
  padding: 24px 22px;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-action__meta {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(var(--color-blue-dark), 0.7);
}
.insurance-needs {
  scroll-margin-top: var(--header-height-minimized, 130px);
}

/* ---------- 13. WAAROM VIA JOHO (uitgebreid) ----------
   Was een beige kaart. Met de sluitband eronder — die dezelfde vijf
   punten nog eens noemt — stonden er twee zandkleurige vlakken op rij.
   Het vlak is eruit: wat overblijft is een haarlijn erboven en per punt
   een rond blauw schijfje met het vinkje erin, dezelfde beeldtaal als de
   pijlerrij onder de hero. Lichter, en het onderscheidt zich weer van de
   band die er nu donker onder staat. */
.insurance-why {
  border-top: 1px solid rgba(var(--color-blue-dark), 0.14);
  padding-top: 26px;
}
.insurance-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.insurance-why__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.insurance-why__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 0.1);
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-why__title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-why__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.85);
}

/* ---------- 14. SERVICE: ALARMCENTRALE, CONTACT, DOCUMENTEN ---------- */
.insurance-contact {
  background: rgba(var(--color-blue-primary), 0.06);
  border: none;
  border-radius: 22px;
  padding: 24px 22px;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-contact__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--color-blue-dark), 0.12);
  font-size: 15px;
}
.insurance-contact__row:last-child {
  border-bottom: none;
}
.insurance-contact__label {
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  flex: 0 0 130px;
}
.insurance-contact__value {
  flex: 1 1 200px;
  color: rgba(var(--color-blue-dark), 0.85);
}
.insurance-docs__search {
  max-width: 420px;
}
.insurance-docs__group {
  margin-top: 22px;
}
.insurance-docs__group-title {
  font-size: 17px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 8px;
}
/* .pagelinks-container / .pagelink-item bestaan live bij Grip;
   hier minimaal nagebouwd zodat de naam blijft kloppen. */
.pagelinks-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagelink-item {
  border-bottom: 1px solid rgba(var(--color-grey-medium), 0.7);
}
.pagelink-item a {
  display: block;
  position: relative;
  padding: 11px 0 11px 34px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(var(--color-blue-primary), 1);
  text-decoration: none;
}
.pagelink-item a:hover {
  text-decoration: underline;
}
.pagelink-item--download a::before,
.pagelink-item--external a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 0.12);
}
.pagelink-item--download a::after,
.pagelink-item--external a::after {
  position: absolute;
  left: 6px;
  top: 11px;
  font-size: 13px;
  line-height: 22px;
  color: rgba(var(--color-blue-primary), 1);
}
.pagelink-item--download a::after {
  content: "\2193";
  left: 7px;
}
.pagelink-item--external a::after {
  content: "\2197";
}
.pagelink-item__meta {
  color: rgba(var(--color-blue-dark), 0.6);
  font-size: 13px;
}

/* ---------- 15. CONVERSIEANKER ----------
   Het anker plakt niet meer mee: het staat als band onder de tabinhoud
   en is daardoor op elke tab het sluitstuk. De permanente prikkel is de
   zwevende keuzeknop hieronder (§15b), die tegelijk open punt O5 sluit:
   één knop rechtsonder in plaats van een agentbubbel náást de
   WhatsApp-knop. */
.insurance-anchor {
  display: grid;
  gap: 22px 40px;
  align-items: start;
}
.insurance-anchor__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-medium), 1);
}
.insurance-anchor__title {
  font-family: "Zilla Slab", serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(var(--color-blue-dark), 1);
  margin: 6px 0 16px;
}
.insurance-anchor__price {
  font-family: "Zilla Slab", serif;
  font-size: 28px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 12px;
}
.insurance-anchor__primary {
  display: inline-block;
  text-align: center;
  padding: 13px 28px;
}
.insurance-anchor__secondary {
  display: inline-block;
  margin-left: 18px;
}
.insurance-anchor__why {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px 24px;
}
.insurance-anchor__why li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(var(--color-blue-dark), 0.88);
}
/* Het vinkje zit in een rond schijfje in plaats van los in de tekst te
   zweven: op een donkere ondergrond heeft een dun groen lijntje te weinig
   contrast om als markering te lezen. */
.insurance-anchor__why svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 5px;
  margin-top: 0;
  border-radius: 50%;
  background: rgba(var(--color-green), 0.14);
  color: rgba(var(--color-green), 1);
}
/* Het anker op de donkere sluitband. */
.insurance-band--anker .insurance-anchor__kicker {
  color: rgba(var(--color-white), 0.66);
}
.insurance-band--anker .insurance-anchor__title,
.insurance-band--anker .insurance-anchor__price {
  color: rgba(var(--color-white), 1);
}
.insurance-band--anker .insurance-anchor__why li {
  color: rgba(var(--color-white), 0.9);
}
.insurance-band--anker .insurance-anchor__why svg {
  background: rgba(var(--color-white), 0.16);
  color: rgba(var(--color-white), 1);
}
.insurance-band--anker .btn-text-arrow {
  color: rgba(var(--color-white), 1);
}

/* ---------- 15b. ZWEVENDE KEUZEKNOP ----------
   Eén knop rechtsonder met alle contactroutes eronder. Op de echte site
   staat daar nu de WhatsApp-knop; die gaat hierin op, zodat er nooit
   twee zwevende knoppen naast elkaar staan (open punt O5). Staat de
   agent voor deze verzekering uit, dan valt alleen die ene regel weg. */
.insurance-page > .insurance-fab {
  width: max-content;
  max-width: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.insurance-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.insurance-fab__menu {
  list-style: none;
  margin: 0;
  padding: 8px;
  width: min(310px, calc(100vw - 40px));
  background: rgba(var(--color-white), 1);
  border: 1px solid rgba(var(--color-grey-medium), 1);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(var(--color-blue-dark), 0.18);
}
.insurance-fab__menu[hidden] {
  display: none;
}
.insurance-fab__option {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  gap: 0 12px;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  color: rgba(var(--color-blue-dark), 1);
  cursor: pointer;
}
.insurance-fab__option:hover {
  background: rgba(var(--color-grey-light), 1);
}
/* De toelichting hoort ónder het label, niet ernaast: als flexregel-item
   kwam hij naast de tekst te staan en wrong hij het label in twee regels. */
.insurance-fab__option small {
  flex: 1 0 100%;
  padding-left: 46px;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(var(--color-blue-dark), 0.65);
}
.insurance-fab__icon {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 0.1);
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-fab__icon--whatsapp {
  background: rgba(var(--color-green-chat), 0.16);
  color: rgb(18, 140, 70);
}
/* Groter en duidelijker dan eerst: dit is op elke tab de enige permanente
   prikkel én de enige ingang naar de agent, dus mag hij zwaarder wegen.
   Sinds deze ronde draagt hij twee regels — wat het is (de actie) en wat
   het kost (niets) — met het icoon in een eigen ronde plaat, zodat de knop
   niet als een generieke chatbubbel leest. */
.insurance-fab__toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px 14px 16px;
  border: none;
  border-radius: 999px;
  background: rgba(var(--color-blue-primary), 1);
  color: rgba(var(--color-white), 1);
  font-family: Poppins, sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(var(--color-blue-dark), 0.38);
  transition: background 0.15s ease, transform 0.15s ease;
}
.insurance-fab__toggle:hover {
  background: rgba(var(--color-blue-medium), 1);
  transform: translateY(-1px);
}
.insurance-fab__toggle-icon {
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--color-white), 0.18);
}
.insurance-fab__toggle-label {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}
.insurance-fab__toggle-sub {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(var(--color-white), 0.85);
}

/* Aanspreekbubbel boven de knop. Eén keer zichtbaar bij het openen van de
   pagina, sluitbaar, en weg zodra het menu of de assistent opengaat: hij
   moet vertellen dát er hulp is, niet in de weg blijven zitten. Wordt door
   JavaScript getoond, net als de rest van deze stapel. */
.insurance-fab__hint {
  position: relative;
  width: min(300px, calc(100vw - 40px));
  padding: 14px 34px 14px 16px;
  background: rgba(var(--color-white), 1);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 12px 30px rgba(var(--color-blue-dark), 0.2);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(var(--color-blue-dark), 0.85);
}
.insurance-fab__hint strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 2px;
}
.insurance-fab__hint-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: rgba(var(--color-blue-dark), 0.55);
  cursor: pointer;
}
.insurance-fab__hint-close:hover {
  background: rgba(var(--color-grey-light), 1);
}
/* De naar-boven-knop schuift boven de keuzeknop: één stapel rechtsonder,
   geen twee losse knoppen naast elkaar. */
.go-to-top {
  bottom: 100px;
}

/* ---------- 16. MARKERING VAN HET GEVONDEN ANTWOORD ---------- */
.insurance-page .insurance-hit {
  position: relative;
  background: rgba(var(--color-blue-primary), 0.09);
  box-shadow: inset 4px 0 0 rgba(var(--color-blue-primary), 1);
  border-radius: 10px;
  padding: 10px 14px 10px 16px;
}
/* Het gevonden onderdeel draagt ook een woord, niet alleen een kleur. */
.insurance-page .insurance-hit::before {
  content: "Antwoord op uw vraag";
  position: static;
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-medium), 1);
  margin-bottom: 4px;
}
/* Is de gevonden regel een dekkingsregel, dan neemt het label de plek van
   het merkteken in (`::before`); dan moet het vinkje of het streepje uit
   `::after` er ook niet meer overheen liggen. */
.insurance-page li.insurance-hit::after {
  content: none;
}
.insurance-page li.insurance-hit {
  padding-left: 16px;
}

/* ---------- 17. DESKTOP (min-width: 1024px) ----------
   PROTOTYPE-ONLY: de voorvoegsels staan er
   alleen zodat de mobiel-knop boven de pagina ook op een breed scherm
   de smalle weergave laat zien. Grip laat die voorvoegsels weg. */
@media (min-width: 1024px) {
  .insurance-band {
    padding-block: 52px;
  }
  /* De sluitband raakt de footer: onderin iets meer lucht dan bovenin. */
  .insurance-band--anker {
    padding-block: 52px 64px;
  }
  .insurance-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: 48px;
    align-items: center;
  }
  /* In het raster zorgt de kolomafstand voor de ruimte; de marge is er
     alleen voor de gestapelde weergave. */
  .insurance-hero__media {
    margin-top: 0;
  }
  .insurance-hero__title {
    font-size: 52px;
  }
  /* De kerngegevens lopen als één rij onder de hero door, over beide
     kolommen; auto-fit vult vier én vijf feiten netjes. */
  .insurance-hero__facts {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: 34px;
  }
  /* Anker: tekst en knoppen links, de vijf redenen rechts in twee
     kolommen. Zo vult de band de breedte in plaats van een smalle
     kaart te blijven. */
  .insurance-anchor {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: center;
  }
  .insurance-anchor__why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .insurance-block__title {
    font-size: 30px;
  }
  .insurance-tabs__button {
    font-size: 16px;
    padding: 17px 22px 15px;
  }
  .insurance-tabs__button::after {
    left: 22px;
    right: 22px;
  }
  /* Vanaf hier vullen de vier tabs nog geen halve balk; het merkteken kan er
     rechts naast staan zonder de balk te laten scrollen. */
  .insurance-tabbar__brand {
    display: flex;
  }

  /* --- De schermbreedte gebruiken, tweede poging -------------------------
     De vorige ronde zette de bloktitel in een eigen kolom van 280 px en
     de inhoud in 840 px ernaast. Dat vulde de breedte wel, maar het gaf
     elke sectie een halflege linkerkolom en drukte de inhoud in een
     smallere strook dan daarvoor — per saldo minder mooi.
     Deze ronde doet het zoals oomverzekeringen.nl: de kop staat gewoon
     boven zijn sectie over de volle breedte, en het is de ínhoud die in
     kolommen valt. Elke rij hieronder is één blok dat op mobiel weer
     onder elkaar valt, want al deze regels staan in deze media query.
     Verder ligt het ritme in de ruimte tussen de secties en in een
     haarlijn ertussen, in plaats van in kaders om de blokken heen. */
  .insurance-panel > * + * {
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid rgba(var(--color-blue-dark), 0.1);
  }
  .insurance-block__lead {
    font-size: 18px;
  }
  /* Vier pijlers naast elkaar; de rij is precies zo breed als de hero. */
  .insurance-pillars__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Opsommingen buiten een dekking (benodigdheden, wat u krijgt) staan op
     desktop in twee kolommen: vijf korte regels vragen geen volle 1180 px.
     Binnen een dekking gebeurt dat bewust niet meer — daar staan de regels
     al in de smallere linkerkolom en moeten ze recht onder elkaar lopen. */
  .insurance-list:not(.insurance-list--gedekt):not(.insurance-list--niet-gedekt) {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 48px;
  }
  .insurance-list--gedekt,
  .insurance-list--niet-gedekt {
    max-width: 62ch;
  }
  /* Aanvraagstappen naast elkaar in twee kolommen. */
  .insurance-steps {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 48px;
  }
  /* Documentgroepen in twee kolommen, zoals OOM zijn polisvoorwaarden en
     overige informatie naast elkaar zet. Kolommen (`columns`) in plaats
     van een grid, omdat de groepen sterk in lengte verschillen: zo vult
     de browser de twee kolommen zelf uit en blijft een groep heel
     (`break-inside: avoid`). Bij één groep verandert er niets. */
  .insurance-docs__groups {
    columns: 2;
    column-gap: 48px;
  }
  .insurance-docs__group {
    break-inside: avoid;
  }
  .insurance-coverage__toggle {
    padding: 20px 26px;
  }
  /* Twee kolommen in de open dekking: de tekst links, de harde gegevens
     rechts. `align-items: start` houdt het rechterblok bij de bovenkant
     in plaats van het uit te rekken tot de hoogte van de linkerkolom. */
  .insurance-coverage__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 0 40px;
    align-items: start;
    padding: 24px 26px 26px;
  }
  .insurance-coverage__main {
    grid-column: 1;
  }
  .insurance-coverage__aside {
    grid-column: 2;
    margin-top: 0;
  }
  .insurance-coverage__footer {
    grid-column: 1 / -1;
  }
  .insurance-levels__picker {
    display: none;
  }
  /* Zelfde specificiteit als de mobiele verbergregel (`:not(.is-actief)`);
     een media query telt niet mee in de cascade, dus zonder de `:not()`
     hier verloor deze regel en bleef er ook op desktop één kolom over. */
  .insurance-levels--gekozen .insurance-levels__cell:not(.is-actief) {
    display: table-cell;
  }
  .insurance-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* In de smalle rechterkolom past geen tweede kolom bedragen. */
  .insurance-coverage__aside .insurance-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Drie kolommen in plaats van twee: zes premiefactoren staan zo in twee
     rijen van drie in plaats van drie rijen van twee, en dat is precies
     het verschil tussen "de breedte gebruiken" en "de breedte vullen". */
  .insurance-factors,
  .insurance-discounts,
  .insurance-why__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .insurance-why__list {
    gap: 26px 40px;
  }
  .insurance-notices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .insurance-tool,
  .insurance-referral,
  .insurance-action,
  .insurance-contact {
    padding: 30px;
  }
  .insurance-tool {
    min-height: 560px;
  }
  /* Het verwijsblok als brede band: medaillon links, kop en uitleg in het
     midden, de knop rechts. Gestapeld (zoals op mobiel) zou het over de
     volle kolom een vlak met veel lucht zijn. Er is geen extra markup
     voor nodig; de vier bestaande elementen worden hier geplaatst. */
  .insurance-referral {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 32px;
    align-items: center;
  }
  .insurance-referral__medallion {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
  .insurance-referral .insurance-tool__title {
    grid-column: 2;
    grid-row: 1;
  }
  .insurance-referral__text {
    grid-column: 2;
    grid-row: 2;
    margin: 6px 0 0;
    max-width: 78ch;
  }
  .insurance-referral > a {
    grid-column: 3;
    grid-row: 1 / span 2;
    white-space: nowrap;
  }
}

@media (min-width: 1220px) {
  .insurance-hero__inner {
    gap: 64px;
  }
  /* Aandachtspunten in drie kolommen zodra er ruimte voor is; vanaf
     1024 px staan ze al naast elkaar in twee. */
  .insurance-notices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- 18. BEWEGING BEPERKEN ---------- */
@media (prefers-reduced-motion: reduce) {
  .insurance-page * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   19. OVERZICHTSPAGINA /verzekeringen (alleen overzicht.html)
   Kaart per verzekering; hergebruikt hero, crumbs en tokens
   van de verzekeringspagina hierboven.
   ========================================================= */
.insurance-overview__why {
  margin-top: 28px;
}
.insurance-overview__why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(var(--color-blue-dark), 0.85);
}
.insurance-overview__why-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.insurance-overview__why-list svg {
  flex: none;
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-overview__heading {
  margin: 8px 0 0;
  font-family: "Zilla Slab", serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-overview__group {
  margin-top: 36px;
}
.insurance-overview__group:last-of-type {
  margin-bottom: 48px;
}
.insurance-overview__group-title {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--color-grey-medium), 1);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-overview__grid {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.insurance-overview__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(var(--color-white), 1);
  border: 1px solid rgba(var(--color-grey-medium), 1);
  border-radius: 20px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.insurance-overview__link:hover,
.insurance-overview__link:focus-visible {
  box-shadow: 0 12px 32px rgba(var(--color-blue-dark), 0.14);
  transform: translateY(-2px);
}
.insurance-overview__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 18px 24px;
  background: rgba(var(--color-white), 1);
  border-bottom: 1px solid rgba(var(--color-grey-medium), 0.7);
}
.insurance-overview__logo img {
  max-width: 200px;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.insurance-overview__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px 22px;
  flex: 1;
}
.insurance-overview__type {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-dark), 0.6);
}
.insurance-overview__name {
  font-family: "Zilla Slab", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-overview__intro {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(var(--color-blue-dark), 0.78);
}
.insurance-overview__price {
  margin-top: 4px;
  font-weight: 600;
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-overview__more {
  margin-top: auto;
  padding-top: 12px;
}