/* Leesbaarheid in donkere blokken.

   atlas-light.css kleurt alle koppen en vette tekst binnen <main> donker, met
   !important. In donkere blokken werd tekst daardoor donkerblauw op donkerblauw
   en dus onleesbaar: de kop en de cijfers van het voorbeeldrapport, het
   afsluitende blok "Weten waar u nu staat?" en de kop van de pakkettabel.
   Deze regels zetten die tekst terug op de kleur die de pagina zelf bedoelde.
   Ze zijn bewust specifieker dan de algemene regel, zodat de volgorde van
   laden niet uitmaakt. */

/* Voorbeeldrapport, donkere bovenkant */
html body main.vbr .donker :is(h1,h2):not(.omslag *),
html body main.vbr .donker .tellers b{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body main.vbr .donker .tellers .uit b{color:#3FCF8E!important;-webkit-text-fill-color:#3FCF8E!important}
html body main.vbr .donker a[href]:not(.knop){color:#BBD2E2!important;-webkit-text-fill-color:#BBD2E2!important}
html body main.vbr .donker a[href].knop{color:#0E1E2E!important;-webkit-text-fill-color:#0E1E2E!important;background:#fff!important}
/* Lichte knop (wit vlak) buiten het donkere blok: een algemene regel maakte
   elke link naar de gratis check wit, ook op een witte knop. */
html body main.vbr a[href*="gratis-check"].knop.licht,
html body main.vbr a[href*="free-check"].knop.licht{color:#0E1E2E!important;-webkit-text-fill-color:#0E1E2E!important}

/* Afsluitend blok "Weten waar u nu staat?" / "Want to know where you stand now?" */
html body main .aw-cta :is(h2,h3,strong,b){color:#fff!important}
html body main .aw-cta p{color:#cfe0f7!important}
html body main .aw-cta a[href]{color:#0b3b82!important;-webkit-text-fill-color:#0b3b82!important;background:#fff!important}

/* Kop van de vergelijkingstabel op de pakketpagina */
html body main table.avr-vergelijk thead th{color:#fff!important}

/* Brede tabellen op mobiel. De pagina snijdt alles af wat buiten het scherm
   valt, waardoor kolommen van vergelijkingstabellen wegvielen. Op smalle
   schermen schuift de tabel nu zelf opzij. */
@media (max-width:767px){
  html body main table.pg-tabel{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Uitgelichte prijskaart op de homepage. De kaart heeft de klasse "top"
   (= aanbevolen pakket), maar die naam is ook de klasse van de vaste menubalk:
   position sticky, top 0, z-index 40. Daardoor bleef de Pro-kaart bij het
   scrollen bovenin plakken en schoven de andere kaarten eronderdoor.
   Deze regel laat de kaart gewoon meescrollen. */
html body .plans .plan.top{position:relative!important;top:auto!important;z-index:1!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* Compacte kop op telefoons. Het logo mocht krimpen en brak daardoor af in
   vier regels ("AI / VISIBILITY / REPORT / GROUP"); de kop werd 108 px hoog
   en de knop "Gratis check" viel op smalle schermen deels buiten beeld.
   Het logo blijft nu op twee regels; ruimtes, icoon en knop zijn iets kleiner. */
@media (max-width:767px){
  html body header .top-in{gap:8px!important}
  html body header .top-in .brand{flex:0 0 auto!important;gap:7px!important}
  html body header .top-in .brand svg{width:24px!important;height:28px!important;flex:0 0 auto}
  html body header .top-in .brand>span{white-space:nowrap!important;font-size:14px!important;line-height:1.15!important}
  html body header .top-in .brand small{font-size:8.5px!important;letter-spacing:.2em!important;white-space:nowrap!important}
  html body header .top-in nav .cta{padding:10px 13px!important;font-size:13.5px!important;white-space:nowrap!important}
  html body header .top-in .avr-menu-knop{margin-left:auto!important;margin-right:0!important;width:40px;height:40px}
}
@media (max-width:350px){
  html body header .top-in .brand>span{font-size:12.5px!important}
  html body header .top-in .brand small{font-size:7.5px!important;letter-spacing:.16em!important}
  html body header .top-in nav .cta{padding:9px 10px!important;font-size:12.5px!important}
}