/* =====================================================================
   mediums.nl — mobiele laag voor login- en accountpagina's
   (login.php, broncode_gratis-account-aanmaken.php)
   - enkel < 768px, enkel pagina's met het app-blok (.mn-login)
   - zet de oude desktopsecties ONDER het app-blok om naar de mobiele stijlgids
     (css/MOBIEL-STIJLGIDS.md). Geen tekst of PHP gewijzigd: enkel vormgeving.
   - 'html body:has(.mn-login)' + !important waar het thema inline styles of
     hoge specificiteit gebruikt (Open Sans/Montserrat, #7899cc-tekst, gobox-pijlen).
   Geladen via incl_css.php (enkel mediums.nl), na mobiel-2026.css.
   ===================================================================== */
@media (max-width:767px){

  /* ---------- 1. PAGINA: het app-grijs loopt door onder het app-blok ---------- */
  html body:has(.mn-login) #page_wrapper{background:#f4f6fa;}
  html body:has(.mn-login) .mn-login{padding-bottom:12px;}
  html body:has(.mn-login) #page_wrapper > section.hg_section{padding:0 14px 12px !important; background:transparent !important; box-shadow:none !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section::before,
  html body:has(.mn-login) #page_wrapper > section.hg_section::after{display:none !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section > .container{max-width:none !important; padding:0 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section .row{margin-left:0 !important; margin-right:0 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section [class*="col-"]{padding-left:0 !important; padding-right:0 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section .latest_posts{margin:0 !important; padding:0 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section .gutter-md{margin:0 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section .gutter-md > [class*="col-"]{margin:0 !important;}

  /* ---------- 2. KAART: elke inhoudssectie = één witte kaart (zelfde als .mn-login__kaart) ---------- */
  html body:has(.mn-login) #page_wrapper > section.hg_section.bg-white > .container{padding:18px 16px 16px !important; background:#fff; border:1px solid rgba(28,58,94,.08); border-radius:16px; box-shadow:0 1px 2px rgba(22,50,79,.04),0 8px 20px -14px rgba(22,50,79,.25);}
  /* korte introzin (gratis-account) staat los op het grijs, zonder kaart */
  html body:has(.mn-login) #page_wrapper > section.hg_section:not(.bg-white) > .container{padding:2px 2px 0 !important;}

  /* ---------- 3. LOPENDE TEKST (oude h3.m_title met span.fw-thin = tekstblok, geen kop) ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra):has(.fw-thin),
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra):has(.tonenklein){margin:0 !important; padding:0 !important; font:400 15px/1.6 var(--mn-ui) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--mn-tekst) !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) span,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) p,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) li,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) td,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) th{font-family:var(--mn-ui) !important; font-size:inherit; line-height:inherit; font-weight:400; color:var(--mn-tekst) !important; letter-spacing:0 !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-semibold,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) strong{font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(.mn-login) section.hg_section.bg-white p{margin:0 0 12px; font:400 15px/1.6 var(--mn-ui) !important; color:var(--mn-tekst) !important;}
  html body:has(.mn-login) section.hg_section.bg-white p b{font-weight:700; color:var(--mn-navy);}
  /* lege regel (<br><br>) = rustige alineawit, geen volle lege regel */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) br + br,
  html body:has(.mn-login) section.hg_section.bg-white p br + br{content:""; display:block; height:0; margin-top:10px;}

  /* introzin boven de kaarten (gratis-account) */
  html body:has(.mn-login) #page_wrapper > section.hg_section:not(.bg-white) h3.m_title{font-size:14.5px !important; line-height:1.5 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section:not(.bg-white) h3.m_title span{color:var(--mn-tekst-zacht) !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section:not(.bg-white) h3.m_title .fw-semibold{color:var(--mn-navy) !important;}

  /* ---------- 4. SUBKOPPEN in de lange tekst (<b> direct in het tekstblok) ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > b{display:block; margin:14px 0 6px !important; font:700 16.5px/1.3 var(--mn-ui) !important; color:var(--mn-navy) !important; letter-spacing:0 !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > p + b,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > table + br + b{margin-top:20px !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > b + br{display:none;}
  /* laatste <b> is een vetgedrukte slotzin, geen kop */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > b:last-of-type{display:inline; margin:0 !important; font-size:15px !important; line-height:1.6 !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > b:last-of-type + br{display:inline;}

  /* ---------- 5. SECTIEKOP (h3.m_title zonder tekstblok, bv. 'Problemen met inloggen?') ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra):not(:has(.fw-thin)):not(:has(.tonenklein)){margin:20px 0 10px !important; padding:0 !important; font:700 19px/1.25 var(--mn-ui) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--mn-navy) !important;}
  html body:has(.mn-login) section.hg_section .col-md-12:first-child > h3.m_title:first-child:not(:has(.fw-thin)){margin-top:0 !important;}

  /* sectielabel met icoon (oude .kl-title-block 'ADVIES - VERKRIJG DIRECTE ANTWOORDEN') */
  html body:has(.mn-login) #page_wrapper section.hg_section div.kl-title-block{display:block; margin:0 0 12px !important; padding:0 !important;}
  html body:has(.mn-login) section.hg_section .kl-title-block .tbk__title{display:flex; align-items:center; gap:10px; margin:0 !important; font:700 12px/1.3 var(--mn-ui) !important; letter-spacing:.06em !important; text-transform:uppercase; color:var(--mn-diepblauw) !important;}
  html body:has(.mn-login) section.hg_section .kl-title-block .tbk__title img{flex:0 0 auto; width:auto !important; height:28px !important; margin:0 !important;}
  html body:has(.mn-login) section.hg_section .kl-title-block .tbk__title b{margin:0 !important; font:inherit !important; color:inherit !important;}
  html body:has(.mn-login) section.hg_section .kl-title-block .tbk__symbol{display:none !important;}

  /* ---------- 6. LINKS: diepblauw, niet onderstreept, kleur verandert bij tik ---------- */
  html body:has(.mn-login) section.hg_section .container a:not(.step_link){color:var(--mn-diepblauw) !important; font-weight:700 !important; text-decoration:none !important;}
  html body:has(.mn-login) section.hg_section .container a:not(.step_link):active{color:var(--mn-navy) !important;}

  /* ---------- 7. OPSOMMING ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) ul{list-style:none; margin:4px 0 6px !important; padding:0 !important; display:grid; gap:6px;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) li{position:relative; margin:0 !important; padding-left:18px !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) li::before{content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--mn-blauw);}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) li > br:first-child{display:none;}

  /* ---------- 8. TABEL CREDITPAKKETTEN: lijst met rijen (bedrag links, credits + minuten rechts) ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) table{display:block; width:100% !important; margin:10px 0 16px !important; border:1px solid var(--mn-rand) !important; border-radius:14px; overflow:hidden; background:#fff; border-collapse:separate;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) thead{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody{display:block;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) table + br{display:none;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody tr{display:grid; grid-template-columns:72px 1fr auto; align-items:baseline; column-gap:12px; row-gap:2px; padding:11px 14px; border-top:1px solid var(--mn-rand); background:#fff;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody tr:first-child{border-top:0;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td{display:block; padding:0 !important; border:0 !important; background:none !important; white-space:nowrap;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(1){grid-column:1; grid-row:1 / span 2; align-self:center; font-size:19px !important; font-weight:700 !important; line-height:1 !important; color:var(--mn-navy) !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(2){grid-column:2 / span 2; grid-row:1; justify-self:end; font-size:15px !important; font-weight:700 !important; line-height:1.3 !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(3){grid-column:2; grid-row:2; justify-self:end;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(4){grid-column:3; grid-row:2; justify-self:end;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(3),
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(4){font-size:13px !important; line-height:1.3 !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(3)::before,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(4)::before{font-family:"Font Awesome 5 Free"; font-weight:900; font-size:11px; margin-right:5px; color:var(--mn-blauw);}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(3)::before{content:"\f095";} /* telefoon = kolom 'Bellen' */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(4)::before{content:"\f075";} /* ballon = kolom 'Chatten' */

  /* ---------- 9. ACTIELIJST (oude .gobox-stappen 'Problemen met inloggen?') ---------- */
  html body:has(.mn-login) section.hg_section .row.gutter-md{display:block; border:1px solid var(--mn-rand); border-radius:14px; overflow:hidden; background:#fff;}
  html body:has(.mn-login) section.hg_section .gobox{position:relative; min-height:0 !important; margin:0 !important; padding:13px 40px 13px 60px !important; border:0; border-top:1px solid var(--mn-rand); border-radius:0 !important; background:#fff !important; box-shadow:none !important; color:var(--mn-tekst) !important;}
  html body:has(.mn-login) section.hg_section .gutter-md > [class*="col-"]:first-child .gobox{border-top:0;}
  html body:has(.mn-login) section.hg_section .gobox.ok{background:var(--mn-blauw-licht) !important;}
  html body:has(.mn-login) section.hg_section .gobox::before{content:"\f590"; display:block !important; position:absolute; left:14px; top:14px; width:34px; height:34px; border:0 !important; border-radius:50%; background:var(--mn-blauw-licht) !important; font:900 14px/34px "Font Awesome 5 Free"; text-align:center; color:var(--mn-diepblauw); transform:none !important;}
  html body:has(.mn-login) section.hg_section .gutter-md > [class*="col-"]:nth-child(2) .gobox::before{content:"\f084";}
  html body:has(.mn-login) section.hg_section .gobox.ok::before{content:"\f234"; background:#fff !important;}
  html body:has(.mn-login) section.hg_section .gobox::after{content:"\f054"; display:block !important; position:absolute; left:auto; right:14px; top:50%; width:auto; height:auto; margin-top:-8px; border:0 !important; background:none !important; font:900 12px/16px "Font Awesome 5 Free"; color:var(--mn-blauw); transform:none !important;}
  html body:has(.mn-login) section.hg_section .gobox > .far{display:none !important;}
  html body:has(.mn-login) section.hg_section .gobox-content{margin:0 !important; padding:0 !important;}
  html body:has(.mn-login) section.hg_section .gobox h4{margin:0 0 2px !important; font:700 15px/1.3 var(--mn-ui) !important; letter-spacing:0 !important; text-transform:lowercase !important; color:var(--mn-navy) !important;}
  html body:has(.mn-login) section.hg_section .gobox h4::first-letter{text-transform:uppercase;}
  html body:has(.mn-login) section.hg_section .gobox p{margin:0 !important; font:400 13.5px/1.45 var(--mn-ui) !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(.mn-login) section.hg_section .gobox p b{display:inline-block; margin-top:4px; font:700 13px/1.3 var(--mn-ui) !important; text-transform:lowercase; color:var(--mn-diepblauw) !important;}
  html body:has(.mn-login) section.hg_section .gobox p b::first-letter{text-transform:uppercase;}
  html body:has(.mn-login) section.hg_section .gobox .step_link{position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; z-index:2;}
  html body:has(.mn-login) section.hg_section .gobox:active{background:#f4f6fa !important;}
  html body:has(.mn-login) section.hg_section .gobox.ok:active{background:#dde7f6 !important;}

  /* ---------- 10. SLOTZIN loginpagina (h3.m_title > .tonenklein) ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra):has(.tonenklein){margin:16px 0 0 !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .tonenklein{display:block; padding:0 !important; color:var(--mn-tekst) !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .tonenklein > br:first-child{display:none;}
  html body:has(.mn-login) #page_wrapper > .tonenklein{display:none;} /* losse <br> tussen sectie en footer */

  /* ---------- 11. APP-BLOK: privacylink in het accountformulier kreeg themagrijs ---------- */
  html body:has(.mn-login) .mn-login__check a{color:var(--mn-diepblauw) !important; font-weight:700; text-decoration:none !important;}

  /* 2026-11-04: zichtbare H1 in het app-blok, dubbele info enkel op mobiel weg, reCAPTCHA-badge weg (vermelding staat onder het formulier, zoals Google vereist) */
  .mn-login__recaptcha{margin:10px 0 0; font:400 11.5px/1.4 var(--mn-ui); color:#6b7280;}
  .mn-login__recaptcha a{color:var(--mn-diepblauw);}

  /* 2026-11-05: 'Problemen met inloggen?' (stappenblok) is op mobiel niet meer nodig: de knoppen staan in het app-blok */
  html body:has(#mn-login) #page_wrapper > section.hg_section:has(.gobox){display:none !important;}

  /* 2026-11-04: uitleg verhuist naar de tabs; secties die daardoor leeg worden verdwijnen, de rest (stappen, enz.) blijft */
  html body:has(.mn-login) #page_wrapper > section.hg_section.mn-leeg{display:none !important;} /* enkel secties die leeg zijn na het verplaatsen */
  .mn-login__extra{margin-top:18px; padding-top:16px; border-top:1px solid var(--mn-rand); font:400 15px/1.55 var(--mn-ui); color:var(--mn-tekst);}
  .mn-login__extra:empty{display:none;}
  html body #mn-login .mn-login__kaart > .mn-login__extra{margin:20px 0 0 !important; padding:18px 0 0 !important; border-top:1px solid var(--mn-rand) !important;}
  .mn-login__extra p{margin:0 0 12px;}
  .mn-login__extra b, .mn-login__extra strong{color:var(--mn-navy);}
  .mn-login__extra > span > b:first-child, .mn-login__extra br + b{display:block; margin:14px 0 6px; font-size:16px;}
  .mn-login__extra ul{padding-left:0; list-style:none; margin:0 0 12px;}
  .mn-login__extra + .mn-login__knop{margin-top:14px;}

  /* wachtwoord resetten: losse tekst (niet in h3) in de secties eronder ook als lopende tekst */
  html body:has(.mn-ww) #page_wrapper > section.hg_section .latest_posts{font:400 15px/1.6 var(--mn-ui) !important; color:var(--mn-tekst) !important;}
}

/* reCAPTCHA-badge verbergen enkel waar de verplichte vermelding zichtbaar is (mobiel app-blok) */
@media (max-width:767px){ body:has(.mn-login__recaptcha) .grecaptcha-badge{visibility:hidden !important;} }

/* =====================================================================
   12. 2026-11-05 — APP-BLOK LOGIN / ACCOUNT VOLGENS ONTWERP TIM
   Sfeerbeeld (donker = Log in, licht = Voordelen/Account), glazen tabs met
   iconen, velden met iconen, navy pilknoppen. Enkel vormgeving: velden,
   acties en PHP ongewijzigd. Alles onder #mn-login (wachtwoord-vergeten blijft zoals het is).
   Beelden (ontwerp Tim): images/mn-login-kop.webp, mn-account-kop.webp, mn-login-onderkant.webp, mn-account-onderkant.webp
   ===================================================================== */
@media (max-width:767px){
  #mn-login{
    --mnl-navy:#1C3A5E; --mnl-navy2:#2B4C82; --mnl-tekst:#1E2B45; --mnl-zacht:#4A5875; --mnl-goud:#E5AE48;
    --mnl-mist:#E8ECF6; --mnl-glas:rgba(255,255,255,.68); --mnl-rand:rgba(255,255,255,.95);
    --mnl-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
    position:relative; isolation:isolate; overflow:hidden; box-sizing:border-box;
    margin:0; padding:calc(var(--mn-header-h) + 30px) 16px 236px;
    font-family:var(--mnl-font); color:var(--mnl-tekst);
  }
  #mn-login *, #mn-login *::before, #mn-login *::after{box-sizing:border-box;}
  #mn-login [hidden]{display:none !important;}
  #mn-login .mn-login__iconen{position:absolute; width:0; height:0; overflow:hidden;}
  #mn-login svg{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

  /* ---------- achtergronden per thema ---------- */
  #mn-login[data-thema="donker"]{
    background:
      linear-gradient(180deg, rgba(12,24,52,.25) 0, rgba(12,24,52,0) 120px),
      radial-gradient(200px 260px at 0% 560px, rgba(196,206,236,.50), rgba(196,206,236,0) 80%),
      radial-gradient(200px 260px at 100% 640px, rgba(214,204,236,.40), rgba(214,204,236,0) 80%),
      /* lange degradé: beeld -> avondblauw -> lavendel -> mist */
      linear-gradient(180deg, rgba(88,116,165,0) 0, rgba(88,116,165,0) 215px, rgba(88,116,165,.8) 268px, #5874A5 292px, #8DA0CB 350px, #C1CBE7 420px, #DDE3F3 490px, var(--mnl-mist) 560px),
      var(--mnl-kop-login, url(../images/mn-login-kop.webp)) center top / 100% auto no-repeat,
      var(--mnl-mist);
  }
  #mn-login[data-thema="licht"]{
    background:
      radial-gradient(200px 260px at 0% 560px, rgba(196,206,236,.45), rgba(196,206,236,0) 80%),
      radial-gradient(200px 260px at 100% 640px, rgba(214,204,236,.40), rgba(214,204,236,0) 80%),
      linear-gradient(180deg, rgba(138,156,197,0) 0, rgba(138,156,197,0) 215px, rgba(138,156,197,.8) 268px, #8A9CC5 291px, #B3C0E1 350px, #D5DCF0 420px, #EAEDF8 490px, #F0F2F9 560px, #F0F2F9 100%),
      var(--mnl-kop-account, url(../images/mn-account-kop.webp)) center top / 100% auto no-repeat,
      #F0F2F9;
  }
  /* zachte golf onderaan (licht thema) */
  /* golven onderaan (ontwerp Tim): donker bij Log in, licht bij Account/Voordelen */
  #mn-login::after{content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; height:224px; pointer-events:none;
    background:var(--mnl-onder-login, url(../images/mn-login-onderkant.webp)) center bottom / 100% auto no-repeat;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent 14%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.45) 42%, rgba(0,0,0,.85) 60%, #000 74%); mask-image:linear-gradient(180deg, transparent 0, transparent 14%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.45) 42%, rgba(0,0,0,.85) 60%, #000 74%);}
  #mn-login[data-thema="licht"]::after{background-image:var(--mnl-onder-account, url(../images/mn-account-onderkant.webp));}

  /* ---------- header: transparant over het sfeerbeeld ---------- */
  html body:has(#mn-login) #header.site-header{position:absolute !important; top:0 !important; left:0; right:0; background:transparent !important; box-shadow:none !important;}
  html body:has(#mn-login) #page_wrapper{position:relative;}
  html body:has(#mn-login) #header .site-header-right-wrapper{background:rgba(255,255,255,.86) !important; border-color:rgba(255,255,255,.9) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 18px -10px rgba(12,24,52,.55) !important;}
  /* logo met lichte letters over het sfeerbeeld (per domein) */
  html body:has(#mn-login) #header .logo-img{filter:drop-shadow(0 1px 3px rgba(12,24,52,.45));}
  html body:has(#mn-login) #header .logo-img[src$="/mediums.png"]{content:url(../images/mediums-logo-licht.png);}
  html body:has(#mn-login) #header .logo-img[src$="/helderzienden_be.png"]{content:url(../images/helderzienden_be_footer.png);}


  /* ---------- 2026-11-05: helderzienden.be — nachtbeelden, alle tabs donker; kop + onderkant volgen het paneel ---------- */
  #mn-login[data-domein="helderzienden.be"]{
    --mnl-hz-verloop:linear-gradient(180deg, rgba(20,32,42,0) 0, rgba(20,32,42,0) 185px, rgba(20,32,42,.82) 238px, #14202A 259px, #34465C 320px, #7F8FAE 400px, #C3CBE1 470px, #E0E5F2 530px, var(--mnl-mist) 600px);
    background:
      linear-gradient(180deg, rgba(5,12,24,.35) 0, rgba(5,12,24,0) 130px),
      linear-gradient(90deg, rgba(5,12,24,.45) 0, rgba(5,12,24,0) 65%),
      radial-gradient(200px 260px at 0% 600px, rgba(196,206,236,.45), rgba(196,206,236,0) 80%),
      radial-gradient(200px 260px at 100% 680px, rgba(214,204,236,.40), rgba(214,204,236,0) 80%),
      var(--mnl-hz-verloop),
      var(--mnl-kop-login, url(../images/mn-login-kop.webp)) center top / 100% auto no-repeat,
      var(--mnl-mist);
  }
  #mn-login[data-domein="helderzienden.be"]:is([data-paneel="account"],[data-paneel="voordelen"]){
    background:
      linear-gradient(180deg, rgba(5,12,24,.35) 0, rgba(5,12,24,0) 130px),
      linear-gradient(90deg, rgba(5,12,24,.40) 0, rgba(5,12,24,0) 60%),
      radial-gradient(200px 260px at 0% 600px, rgba(196,206,236,.45), rgba(196,206,236,0) 80%),
      radial-gradient(200px 260px at 100% 680px, rgba(214,204,236,.40), rgba(214,204,236,0) 80%),
      var(--mnl-hz-verloop),
      var(--mnl-kop-account, url(../images/mn-account-kop.webp)) center top / 100% auto no-repeat,
      var(--mnl-mist);
  }
  #mn-login[data-domein="helderzienden.be"]:is([data-paneel="account"],[data-paneel="voordelen"])::after{background-image:var(--mnl-onder-account, url(../images/mn-account-onderkant.webp));}
  #mn-login[data-domein="helderzienden.be"] .mn-login__titel{white-space:normal; max-width:62%;}
  #mn-login[data-domein="helderzienden.be"][data-paneel="login"] .mn-login__titel{max-width:none; white-space:nowrap;}
  /* donkere golven pas onder de vertrouwensrij */
  #mn-login[data-domein="helderzienden.be"]{padding-bottom:236px;}

  /* ---------- hero: titel, zin, gouden lijn ---------- */
  /* hero overal even hoog: tabs en velden springen niet bij het wisselen van tab */
  #mn-login .mn-login__hero{display:flex; flex-direction:column; justify-content:flex-end; height:92px; margin:0 0 20px; padding:0 4px;}
  #mn-login .mn-login__titel{margin:0; white-space:nowrap; font:500 30px/1.12 var(--mnl-font); letter-spacing:-.015em; color:#fff; text-shadow:0 2px 14px rgba(10,22,50,.35);}
  #mn-login .mn-login__sub{max-width:62%; margin:0; font:400 17px/1.42 var(--mnl-font); color:#fff; text-shadow:0 1px 8px rgba(10,22,50,.45);}
  #mn-login .mn-login__lijn{display:block; flex:0 0 auto; width:56px; height:3px; margin-top:14px; border-radius:2px; background:var(--mnl-goud);}
  #mn-login[data-thema="licht"] .mn-login__titel{max-width:64%; white-space:normal; color:var(--mnl-navy); text-shadow:none;}
  #mn-login[data-thema="licht"] .mn-login__sub{max-width:64%; font-size:16px; line-height:1.45; color:var(--mnl-tekst); text-shadow:none;}

  /* ---------- tabs: glazen pil met iconen ---------- */
  #mn-login .mn-login__tabs{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; padding:6px; border-radius:31px;
    background:rgba(52,74,122,.30); border:1px solid rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:0 14px 30px -16px rgba(12,24,52,.55), inset 0 1px 0 rgba(255,255,255,.35);}
  #mn-login a.mn-login__tab{text-decoration:none !important;}
  #mn-login .mn-login__tab{display:flex; flex-direction:row; align-items:center; justify-content:center; gap:7px; height:50px; padding:0 6px; border:0; border-radius:25px; background:transparent;
    font:400 15px/1.12 var(--mnl-font); color:#fff; text-align:center; white-space:normal; text-shadow:0 1px 3px rgba(10,22,50,.5); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s, color .2s;}
  #mn-login .mn-login__tab svg{width:22px; height:22px; flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(10,22,50,.35));}
  #mn-login .mn-login__tab{position:relative;}
  #mn-login .mn-login__tab + .mn-login__tab::before{content:""; position:absolute; left:0; top:13px; bottom:13px; width:1px; background:rgba(255,255,255,.38);}
  #mn-login .mn-login__tab[aria-pressed="true"]::before, #mn-login .mn-login__tab[aria-pressed="true"] + .mn-login__tab::before{display:none;}
  #mn-login .mn-login__tab[aria-pressed="true"]{background:rgba(255,255,255,.94); color:var(--mnl-navy); font-weight:500; text-shadow:none; box-shadow:0 6px 16px -8px rgba(12,24,52,.5), inset 0 1px 0 #fff;}
  #mn-login .mn-login__tab[aria-pressed="true"] svg{filter:none;}
  #mn-login .mn-login__tab:focus-visible{outline:2px solid #fff; outline-offset:-4px;}
  #mn-login[data-thema="licht"] .mn-login__tabs{background:rgba(255,255,255,.62); border-color:rgba(255,255,255,.95); box-shadow:0 14px 30px -18px rgba(28,58,94,.45), inset 0 1px 0 #fff;}
  #mn-login[data-thema="licht"] .mn-login__tab{color:var(--mnl-navy); text-shadow:none;}
  #mn-login[data-thema="licht"] .mn-login__tab svg{filter:none;}
  #mn-login[data-thema="licht"] .mn-login__tab + .mn-login__tab::before{background:rgba(28,58,94,.16);}
  #mn-login[data-thema="licht"] .mn-login__tab[aria-pressed="true"]{background:linear-gradient(180deg, var(--mnl-navy2), var(--mnl-navy)); color:#fff; box-shadow:0 8px 18px -8px rgba(12,24,52,.6), inset 0 1px 0 rgba(255,255,255,.18);}
  #mn-login[data-thema="licht"] .mn-login__tab:focus-visible{outline-color:var(--mnl-navy);}

  /* ---------- paneel: geen witte kaart meer, alles op het sfeervlak ---------- */
  #mn-login .mn-login__sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  #mn-login .mn-login__kaart{margin:16px 0 0; padding:0; background:none; border:0; border-radius:0; box-shadow:none;}
  #mn-login .mn-login__form{display:flex; flex-direction:column; margin:0;}
  #mn-login .mn-login__fout{margin:0 0 14px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.9);}

  /* velden met icoon; label blijft voor schermlezers */
  #mn-login .mn-login__veld{position:relative; margin:0 0 12px;}
  #mn-login .mn-login__label{position:absolute !important; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  #mn-login .mn-login__icoon{position:absolute; z-index:2; left:19px; top:50%; width:23px; height:23px; margin-top:-11.5px; color:var(--mnl-navy); pointer-events:none;}
  #mn-login .mn-login__input{position:relative; z-index:1; display:block; width:100%; height:60px; margin:0; padding:0 54px 0 58px; border:1px solid var(--mnl-rand); border-radius:17px;
    background:var(--mnl-glas); font:400 17px/1.2 var(--mnl-font); color:var(--mnl-tekst);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 10px 22px -16px rgba(28,58,94,.55), inset 0 1px 0 #fff; -webkit-appearance:none; appearance:none;}
  #mn-login .mn-login__input::placeholder{color:var(--mnl-zacht); opacity:1;}
  #mn-login .mn-login__input:focus{outline:none; border-color:#9fb5dc; background:rgba(255,255,255,.95); box-shadow:0 0 0 3px rgba(120,153,204,.35), 0 10px 22px -16px rgba(28,58,94,.55);}
  #mn-login .mn-login__toon{position:absolute; z-index:2; right:6px; top:50%; width:46px; height:46px; margin-top:-23px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--mnl-navy); cursor:pointer; -webkit-tap-highlight-color:transparent;}
  #mn-login .mn-login__toon svg{width:24px; height:24px;}
  #mn-login .mn-login__toon:focus-visible{outline:2px solid var(--mnl-navy); outline-offset:-4px;}

  /* vinkje + wachtwoord vergeten */
  #mn-login .mn-login__rij{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 2px 24px;}
  #mn-login .mn-login__check{display:flex; align-items:center; gap:10px; min-height:44px; margin:2px 2px 16px; font:400 15.5px/1.35 var(--mnl-font); color:var(--mnl-tekst);}
  #mn-login .mn-login__rij .mn-login__check{margin:0; font-size:14px; white-space:nowrap;}
  #mn-login .mn-login__check input{flex:0 0 22px; width:22px; height:22px; margin:0; accent-color:var(--mnl-navy);}
  html body #mn-login .mn-login__check a{color:var(--mnl-navy2) !important; font-weight:400 !important; text-decoration:underline !important; text-underline-offset:3px;}
  #mn-login .mn-login__vergeten{display:inline-flex; align-items:center; min-height:44px; font:400 14px/1.2 var(--mnl-font); color:var(--mnl-navy2) !important; text-decoration:underline; text-underline-offset:3px; white-space:nowrap;}

  /* hoofdknop: navy pil met pijl */
  #mn-login .mn-login__knop{display:flex; align-items:center; justify-content:center; gap:14px; width:100%; height:62px; margin:0; padding:0 22px; border:0; border-radius:31px;
    background:linear-gradient(180deg, #2E5290 0%, var(--mnl-navy) 100%); color:#fff !important;
    font:400 21px/1 var(--mnl-font); letter-spacing:0; text-transform:none; text-decoration:none !important;
    box-shadow:0 14px 26px -14px rgba(12,24,52,.85), inset 0 1px 0 rgba(255,255,255,.22); cursor:pointer; margin-top:4px; -webkit-appearance:none; -webkit-tap-highlight-color:transparent;}
  #mn-login .mn-login__knop svg{width:24px; height:24px; stroke-width:1.8;}
  #mn-login .mn-login__knop:active{transform:scale(.985);}
  #mn-login .mn-login__knop:focus-visible{outline:3px solid #9fb5dc; outline-offset:3px;}

  /* scheiding + tweede knop */
  #mn-login .mn-login__scheiding{display:flex; align-items:center; gap:14px; margin:24px 8px 16px; font:400 15.5px/1.2 var(--mnl-font); color:var(--mnl-tekst);}
  #mn-login .mn-login__scheiding::before, #mn-login .mn-login__scheiding::after{content:""; flex:1 1 auto; height:1px; background:rgba(28,58,94,.28);}
  #mn-login .mn-login__knop2{display:flex; align-items:center; justify-content:center; gap:12px; width:calc(100% - 20px); height:58px; margin:0 auto; border:1px solid var(--mnl-rand); border-radius:29px;
    background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    font:400 17.5px/1 var(--mnl-font); color:var(--mnl-tekst) !important; text-decoration:none !important; box-shadow:0 10px 22px -16px rgba(28,58,94,.5), inset 0 1px 0 #fff;}
  #mn-login .mn-login__knop2--vergeten{margin-top:12px;}
  #mn-login .mn-login__knop2 svg{width:25px; height:25px; color:var(--mnl-navy);}

  /* uitlegtekst onder het formulier: glazen kaart */
  html body #mn-login .mn-login__kaart > .mn-login__extra{margin:18px 0 0 !important; padding:18px 18px 6px !important; border:1px solid var(--mnl-rand) !important; border-radius:20px; background:rgba(255,255,255,.88); box-shadow:0 10px 24px -18px rgba(28,58,94,.5);}

  /* links in de uitlegtekst (bv. 'Bel meteen met een medium'): navy met zachte gouden onderlijn */
  html body #mn-login .mn-login__extra a{color:var(--mnl-navy) !important; font-weight:700 !important; text-decoration:underline !important; text-decoration-color:var(--mnl-goud) !important; text-decoration-thickness:2px !important; text-underline-offset:4px;}
  html body #mn-login .mn-login__extra a:active{color:var(--mnl-navy2) !important;}

  /* uitlegtekst Log in: elk stuk met een icoon, 'Liever direct contact?' als warm belblok */
  html body #mn-login #mn-pane-login .mn-login__extra{padding:8px 16px 8px !important;}
  html body #mn-login #mn-pane-login .mn-login__extra p{position:relative; margin:0 !important; padding:14px 0 14px 54px; font:400 15px/1.55 var(--mnl-font) !important; color:var(--mnl-tekst) !important;}
  html body #mn-login #mn-pane-login .mn-login__extra p + p{border-top:1px solid rgba(28,58,94,.10);}
  html body #mn-login #mn-pane-login .mn-login__extra p b{display:block; margin:0 0 2px; font-weight:700; color:var(--mnl-navy) !important;}
  html body #mn-login #mn-pane-login .mn-login__extra p::before{content:""; position:absolute; left:0; top:14px; width:40px; height:40px; border-radius:50%;
    background:#E8EEF9 var(--mnl-ico) center / 22px 22px no-repeat; box-shadow:inset 0 0 0 1px rgba(28,58,94,.08);}
  html body #mn-login #mn-pane-login .mn-login__extra p:nth-of-type(1){--mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c.8-3.9 3.8-6 7.5-6s6.7 2.1 7.5 6'/%3E%3C/svg%3E");}
  html body #mn-login #mn-pane-login .mn-login__extra p:nth-of-type(2){--mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16a1.5 1.5 0 011.5 1.5v9a1.5 1.5 0 01-1.5 1.5H10l-4.5 3.5V17.5H4A1.5 1.5 0 012.5 16V7A1.5 1.5 0 014 5.5z'/%3E%3C/svg%3E");}
  html body #mn-login #mn-pane-login .mn-login__extra p:nth-of-type(3){margin:6px -8px 8px !important; padding:14px 12px 14px 62px; border:0 !important; border-radius:16px; background:linear-gradient(180deg,#FFF6E6,#FDEFD6);
    --mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.6l1.4 4-2 1.4a12 12 0 006.5 6.5l1.4-2 4 1.4v2.6a2 2 0 01-2.2 2A16.5 16.5 0 014.6 5.7a2 2 0 012-2.2z'/%3E%3C/svg%3E");}
  html body #mn-login #mn-pane-login .mn-login__extra p:nth-of-type(3)::before{left:12px; background-color:var(--mnl-navy); box-shadow:0 6px 14px -8px rgba(12,24,52,.7);}
  html body #mn-login #mn-pane-login .mn-login__extra p br + br{display:block; content:""; height:8px;}


  /* ---------- 2026-11-05: tab Voordelen — rustige opbouw in plaats van één blok tekst ---------- */
  /* dubbele stukken (staan al in de lijst met 9 voordelen of in deel 1) niet herhalen op mobiel */
  html body #mn-login #mn-pane-voordelen .mn-login__extra .mn-dubbel-mobiel, html body #mn-login #mn-pane-voordelen .mn-login__extra #mn-bron-voordelen2{display:none !important;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra{padding:18px 18px 10px !important;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin{display:block; font:400 15px/1.6 var(--mnl-font) !important; color:var(--mnl-tekst) !important;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra p{margin:0 0 10px !important;}
  /* tussenkoppen met icoon en scheidingslijn */
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:not(:last-of-type){position:relative; display:flex !important; align-items:center; min-height:38px; margin:18px 0 8px !important; padding:16px 0 0 48px !important; border-top:1px solid rgba(28,58,94,.10); font:700 16.5px/1.3 var(--mnl-font) !important; color:var(--mnl-navy) !important;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:not(:last-of-type)::before{content:""; position:absolute; left:0; top:15px; width:38px; height:38px; border-radius:50%; background:#E8EEF9 var(--mnl-ico) center / 21px 21px no-repeat; box-shadow:inset 0 0 0 1px rgba(28,58,94,.08);}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b + br{display:none !important;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:nth-of-type(1){--mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.6'/%3E%3C/svg%3E");}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:nth-of-type(2){--mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5l8-8H20v8.5l-8 8z'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.4'/%3E%3C/svg%3E");}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:nth-of-type(3){--mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12.5' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E");}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:nth-of-type(4){--mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.6l1.4 4-2 1.4a12 12 0 006.5 6.5l1.4-2 4 1.4v2.6a2 2 0 01-2.2 2A16.5 16.5 0 014.6 5.7a2 2 0 012-2.2z'/%3E%3C/svg%3E");}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:nth-of-type(5){--mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16a1.5 1.5 0 011.5 1.5v9a1.5 1.5 0 01-1.5 1.5H10l-4.5 3.5V17.5H4A1.5 1.5 0 012.5 16V7A1.5 1.5 0 014 5.5z'/%3E%3C/svg%3E");}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:nth-of-type(6){--mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 017.6-1.7'/%3E%3C/svg%3E");}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:nth-of-type(7){--mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.5 3v5.6c0 4.6-3.1 8.4-7.5 9.8-4.4-1.4-7.5-5.2-7.5-9.8V5.8z'/%3E%3Cpath d='M8.5 12l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:nth-of-type(8){--mnl-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M18.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E");}
  /* bellen = de kern: warm accent op die kop */
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:nth-of-type(4)::before{background-color:var(--mnl-navy); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.6l1.4 4-2 1.4a12 12 0 006.5 6.5l1.4-2 4 1.4v2.6a2 2 0 01-2.2 2A16.5 16.5 0 014.6 5.7a2 2 0 012-2.2z'/%3E%3C/svg%3E");}
  /* tarieven: drie nette rijen */
  html body #mn-login #mn-pane-voordelen .mn-login__extra ul{display:grid !important; gap:8px !important; margin:4px 0 12px !important; padding:0 !important; list-style:none !important;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra ul li{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 !important; padding:12px 14px !important; border-radius:14px; background:#F3F6FC; box-shadow:inset 0 0 0 1px rgba(28,58,94,.07);}
  html body #mn-login #mn-pane-voordelen .mn-login__extra ul li::before{display:none !important;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra ul li > br{display:none !important;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra ul li strong{font-weight:400 !important; color:var(--mnl-tekst) !important;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra ul li{font-weight:700; color:var(--mnl-navy) !important; white-space:normal;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra ul + br{display:none;}
  /* slotzin */
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:last-of-type{display:block; margin:16px 0 10px !important; padding:14px 16px !important; border-radius:16px; background:linear-gradient(180deg,#FFF6E6,#FDEFD6); font:700 15px/1.5 var(--mnl-font) !important; color:var(--mnl-navy) !important;}
  html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:last-of-type + br, html body #mn-login #mn-pane-voordelen .mn-login__extra .fw-thin > b:last-of-type + br + br{display:none !important;}

  /* ---------- 2026-11-05: gratis-accountpagina onder het app-blok ---------- */
  /* 'Verkrijg toegang ... hierboven' is dubbel met het formulier erboven */
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) #page_wrapper > section.hg_section:has(.breadcrumbs){display:none !important;}
  /* golven onderaan het app-blok vloeien uit in de pagina */
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) #page_wrapper{background:#EEF1F8;}
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) #mn-login[data-thema="licht"]::after{-webkit-mask-image:linear-gradient(180deg, transparent 0, transparent 14%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.5) 42%, #000 62%, #000 74%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, transparent 14%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.5) 42%, #000 62%, #000 74%, transparent 100%);}
  /* advies-blok = warm belblok (zelfde stijl als 'Liever direct contact?' op de loginpagina) */
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) #page_wrapper > section.hg_section.bg-white:has(.kl-title-block){padding:0 16px 24px !important; background:transparent !important; box-shadow:none !important;}
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) #page_wrapper > section.hg_section.bg-white:has(.kl-title-block) > .container{position:relative; padding:18px 18px 16px 72px !important; border:0 !important; border-radius:20px; background:linear-gradient(180deg,#FFF6E6,#FDEFD6) !important; box-shadow:0 12px 26px -18px rgba(28,58,94,.45) !important;}
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) #page_wrapper > section.hg_section.bg-white:has(.kl-title-block) > .container::before{content:""; position:absolute; left:18px; top:18px; width:40px; height:40px; border-radius:50%; background:var(--mn-navy,#1C3A5E) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.6l1.4 4-2 1.4a12 12 0 006.5 6.5l1.4-2 4 1.4v2.6a2 2 0 01-2.2 2A16.5 16.5 0 014.6 5.7a2 2 0 012-2.2z'/%3E%3C/svg%3E") center / 22px 22px no-repeat; box-shadow:0 6px 14px -8px rgba(12,24,52,.7);}
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) section.hg_section.bg-white .kl-title-block{margin:0 0 6px !important;}
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) section.hg_section.bg-white .kl-title-block .tbk__title{font:700 11.5px/1.3 Arial,system-ui,sans-serif !important; letter-spacing:.1em !important; color:#B7791F !important;}
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) section.hg_section.bg-white .kl-title-block .tbk__title img{display:none !important;}
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) section.hg_section.bg-white .kl-title-block .tbk__title b{margin:0 !important; color:inherit !important;}
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) section.hg_section.bg-white:has(.kl-title-block) h3.m_title .fw-thin{font:400 15px/1.55 Arial,system-ui,sans-serif !important; color:#1E2B45 !important;}
  html body:has(#account_formulier):has(#mn-login[data-domein="mediums.nl"]) section.hg_section.bg-white:has(.kl-title-block) h3.m_title .fw-semibold{font-weight:700 !important; color:#1C3A5E !important;}

  /* voordelen */
  #mn-login .mn-login__voordelen{display:grid; gap:12px; margin:0 0 18px; padding:18px; list-style:none; border:1px solid var(--mnl-rand); border-radius:20px; background:rgba(255,255,255,.8); box-shadow:0 10px 24px -18px rgba(28,58,94,.5);}
  #mn-login .mn-login__voordelen li{font-family:var(--mnl-font); font-size:16px; color:var(--mnl-tekst);}
  #mn-login .mn-login__extra + .mn-login__knop{margin-top:16px;}

  /* reCAPTCHA-vermelding */
  #mn-login .mn-login__recaptcha{margin:12px 6px 0; font:400 12px/1.45 var(--mnl-font); color:var(--mnl-zacht); text-align:center;}
  #mn-login .mn-login__recaptcha a{color:var(--mnl-navy2);}

  /* vertrouwen: drie iconen onder het accountformulier */
  #mn-login .mn-login__vertrouwen{display:grid; grid-template-columns:repeat(3,1fr); margin:26px 0 0; padding:0; list-style:none;}
  #mn-login .mn-login__vertrouwen li{display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 4px; text-align:center; font:400 13.5px/1.3 var(--mnl-font); color:var(--mnl-navy); white-space:nowrap;}
  #mn-login .mn-login__vertrouwen li + li{border-left:1px solid rgba(28,58,94,.16);}
  #mn-login .mn-login__vertrouwen svg{width:34px; height:34px; color:var(--mnl-navy); stroke-width:1.4;}

  /* zeer smalle toestellen */
  @media (max-width:359px){
    #mn-login .mn-login__titel{font-size:27px;}
    #mn-login .mn-login__tab{font-size:13.5px; gap:5px;}
    #mn-login .mn-login__tab svg{width:19px; height:19px;}
    #mn-login .mn-login__rij{flex-wrap:wrap; row-gap:0;}
    #mn-login .mn-login__input{padding:0 48px 0 50px; font-size:16px;}
    #mn-login .mn-login__icoon{left:16px;}
  }
  /* lage schermen (iPhone SE e.d.): alles iets compacter zodat de Log in-knop zichtbaar blijft */
  @media (max-height:700px){
    #mn-login{padding-top:calc(var(--mn-header-h) + 18px);}
    #mn-login .mn-login__sub{font-size:16px;}
    #mn-login .mn-login__lijn{margin-top:12px;}
    #mn-login .mn-login__hero{margin-bottom:16px;}
    #mn-login .mn-login__kaart{margin-top:12px;}
    #mn-login .mn-login__veld{margin-bottom:10px;}
    #mn-login .mn-login__input{height:54px;}
    #mn-login .mn-login__knop{height:58px;}
  }
  @media (prefers-reduced-motion:reduce){ #mn-login .mn-login__tab{transition:none;} }
}