/* NUXO — creditcards vergelijken. Self-hosted fonts. */
@font-face{font-family:"Big Shoulders Display";src:url("/fonts/big-shoulders.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
/* Metrische fallback voor Big Shoulders Display (eigenaar 2026-10-07):
   Big Shoulders is zeer condensed; zonder correctie valt de systeemfallback
   breder uit waardoor koppen een regel extra innemen en de pagina 34px
   verschuift zodra het webfont laadt (CLS). Deze fallback schaalt de
   systeembreedte terug zodat het regelafbreekpunt gelijk blijft. Op Linux-
   testsystemen is DejaVu Sans de waarschijnlijke fallback (geen Arial Narrow);
   DejaVu is ~1.6x breder dan Big Shoulders, vandaar size-adjust:62%.
   Alleen zichtbaar tijdens font-swap; het webfont-ontwerp is ongewijzigd. */
@font-face{font-family:"BSD-fallback";src:local("Arial Narrow"),local("Liberation Sans Narrow"),local("HelveticaNeue-CondensedBold"),local("Arial"),local("Helvetica"),local("DejaVu Sans"),local("Liberation Sans"),local("Noto Sans"),local("sans-serif");size-adjust:62%;ascent-override:136%;descent-override:30%;line-gap-override:0%}

:root{
  /* --- NUXO premium palette: navy ink, midnight navy, gold, cream
     (skin "Midnight", eigenaarsorder 2026-11-01; vervangt teal/amber) --- */
  --paper:#faf8f3; --paper-tint:#f4f0e6; --card:#ffffff;
  --ink:#152030; --ink-soft:#3d4c63; --ink-faint:#5c6b84;
  --line:#e3dccb; --line-soft:#ece5d3;
  --accent:#0b2447; --accent-dark:#061a33; --accent-soft:#e9eef5;
  --gold:#c9a227; --gold-deep:#8a6d1b; --gold-soft:#faf3dc;
  --danger:#b3362a; --danger-soft:#fbeeea;
  --radius:14px; --radius-s:8px; --radius-pill:999px;
  --shadow-s:0 1px 3px rgba(21,32,48,.08);
  --shadow-m:0 2px 10px rgba(21,32,48,.07);
  --shadow-l:0 8px 28px rgba(21,32,48,.10);
  /* --- Type roles --- */
  --display:"Big Shoulders Display","BSD-fallback",system-ui,sans-serif;   /* headings, product titles */
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* UI labels, buttons, nav, body */
  --mono:"Plex Mono",ui-monospace,monospace;                 /* figures & data only */
  /* --- Spacing scale (4/8) --- */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp8:32px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:18px;line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
/* Visible focus for keyboard users */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.mast :focus-visible{outline-color:var(--gold)}

/* masthead */
.mast{background:var(--ink);color:#f4efe4}
.mast-main{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;flex-wrap:wrap}
.brand{text-decoration:none;color:#fff;display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:.06em}
.brand b i{font-style:normal;color:var(--gold)}
.brand span{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;color:#c9c2b2;margin-top:6px;text-transform:uppercase}
.nav{display:flex;gap:0;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav a{color:#f4efe4;text-decoration:none;font-family:var(--ui);font-size:14.5px;font-weight:600;padding:10px 9px;white-space:nowrap;border-radius:8px;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{background:rgba(244,239,228,.12)}
.nav a[aria-current="page"]{background:var(--gold);color:var(--ink);font-weight:700}
.nav-toggle{display:none;background:transparent;color:#f4efe4;border:1px solid rgba(244,239,228,.45);border-radius:8px;font-family:var(--ui);font-size:14px;font-weight:600;padding:10px 16px;cursor:pointer;min-height:44px}

.tasks{padding:36px 0 8px}
.tasks h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,6.5vw,72px);line-height:.95;letter-spacing:.01em;margin:10px 0 12px}
.situaties{padding:8px 0 4px}
.sit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:8px}
.sit-col h2{font-family:var(--display);font-size:26px;margin:12px 0 4px}
.sit-col a{display:block;font-family:var(--ui);font-size:14.5px;color:var(--accent);text-decoration:none;padding:5px 0}
.sit-col a:hover{text-decoration:underline}
.sit-note{margin:8px 0 0;font-size:14px;color:var(--ink-soft)}
.hero h2{font-family:var(--display);font-weight:800;font-size:clamp(36px,5vw,64px);line-height:.95;letter-spacing:.01em;margin:14px 0 16px}
.hero h2 i{font-style:normal;color:var(--accent)}

/* hero */
.hero{padding:56px 0 36px}
.hub-hero{padding-top:24px;padding-bottom:28px}
.hub-hero .lede{font-size:18px;line-height:1.55;max-width:720px}
.kicker{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,7vw,84px);line-height:.95;letter-spacing:.01em;margin:14px 0 16px}
.hero h1 i{font-style:normal;color:var(--accent)}
/* Detail-hero: marktplaats-samenvatting, geen vergrote titel. Naam → waarde →
   prijs → actie als één compositie; 88px-titel domineert niet meer. 2026-10-07. */
.detail-hero{padding-top:24px;padding-bottom:20px}
/* Detail-hero identiteit als NUXO-band (eigenaar 2026-10-07): zelfde navy/green
   anker als de listing-kaarten; productnaam in cleane body-sans. */
.detail-identity{display:flex;align-items:center;gap:14px;margin:8px 0 12px;padding:12px 16px;
  background:linear-gradient(115deg,#0e2839 0%,#0a2038 100%);
  border-bottom:3px solid var(--gold);border-radius:var(--radius-s);color:#fff}
/* .detail-identity .detail-visual: zie het uniforme logo-slot hieronder (vaste
   hoogte + max-width); deze regel is volledig gesupersedeerd. */
.detail-identity h1{margin:0;flex:1;min-width:0;font-family:var(--ui);font-size:22px;font-weight:700;line-height:1.25;color:#fff}
/* NIBC-375 (ChatGPT pixel-audit 2026-10-07): de stale .detail-hero h1-regel
   (hieronder, gelijke specificiteit 0,1,1 maar latere source order) overschreef
   deze 20px-regel, waardoor ALLE detail-titels op mobiel 30px werden en het
   onbreekbare 'Spaarrekening' (~200px) uit zijn 172px-box liep. Hogere
   specificiteit (0,2,1) herstelt de bedoelde 20px; desktop ongewijzigd. */
@media(max-width:760px){.detail-identity{gap:12px;padding:10px 12px}.detail-hero .detail-identity h1{font-size:20px;line-height:1.2}}
.detail-hero h1{font-size:clamp(30px,3.6vw,44px);line-height:1.08;margin:10px 0 12px}
/* Desktop: identiteit/links, prijs+actie als aangrenzend paneel rechts. */
@media(min-width:1000px){
  .detail-hero-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
  .detail-hero-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:sticky;top:20px}
  .detail-hero-panel .hero-price{margin:0 0 8px}
  .detail-hero-panel .btn{width:100%;min-height:48px;margin:12px 0 8px}
  .detail-hero-panel .cta-caption{margin:0 0 12px;font-size:13px;color:var(--ink-soft)}
  .detail-hero-panel .cta-secondary{display:block;margin-top:8px;font-size:14px}
}
/* Actie-paneel (creditcard- en spaardetails): knop, bestemming en secundaire
   link als één coherente, links uitgelijnde actiegroep. De generieke
   `.cta-caption{margin:-2px ...;text-align:center}` (r.170) veroorzaakte een
   2px-overlap met de knop op mobiel; hier eerlijke tussenruimte en uitlijning.
   Secundaire link in NUXO-linkstijl (geen browser-blauw/onderstreping);
   zichtbare focus via de globale :focus-visible-regel (r.42). 48/44-targets
   blijven behouden (r.90/369/415). */
.detail-hero-panel{text-align:left}
.detail-hero-panel .cta-caption{margin:4px 0 0;text-align:left}
.detail-hero-panel .cta-secondary{color:var(--accent);font-weight:700;text-decoration:none}
.detail-hero-panel .cta-secondary:hover{text-decoration:underline}
.detail-value{font-size:18px;line-height:1.55;color:var(--ink-soft);max-width:62ch;margin:0 0 4px}
.detail-hero .hero-price{margin:8px 0 10px}
.detail-hero .hero-price b,.detail-hero .hero-price strong{font-size:34px}
.detail-hero .hero-price .fee-sub{font-size:12.5px;color:var(--ink-soft)}
.hero-price-cond{font-size:14px;color:var(--ink-soft);margin:-6px 0 10px;max-width:62ch}
/* Redactionele spatiëring (eigenaar 2026-10-07, fase 15): compacte nieuws-hero
   en strakkere afstand tot de artikelen; gids-hero dichter op het korte
   antwoord / de vergelijkingsactie. Alleen verticale ritme — lettergroottes,
   excerpts, bylines, TOC-gedrag en sidebar blijven onaangetast. */
.hero-compact{padding-bottom:20px}
/* (0,2,0): wint altijd van de latere `.sec{padding:…}`-shorthands (spacing-tokens,
   mobiel) — een kale `.sec-tight` (0,1,0) zou daaronder verliezen en geen effect
   hebben (review-bevinding F1, 2026-10-07). */
.sec.sec-tight{padding-top:16px}
.guide-hero{padding-bottom:20px}
.detail-hero .detail-visual{margin-bottom:4px;opacity:.92}
.lede{font-size:21px;max-width:640px;color:var(--ink-soft)}
.verified{display:inline-flex;align-items:center;gap:8px;background:var(--gold-soft);border:1px solid #e7d6a0;border-radius:999px;padding:8px 16px;font-family:var(--ui);font-size:13.5px;margin-top:18px}

/* filters */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:28px 0 8px;display:flex;gap:16px;flex-wrap:wrap;align-items:end;box-shadow:0 2px 10px rgba(21,32,48,.05)}
.filters label{display:flex;flex-direction:column;gap:6px;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.filters select{font-family:var(--ui);font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);min-width:200px}
.result-count{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink-soft);margin:14px 0 0}
.no-results{background:var(--gold-soft);border:1px dashed #d3bc7c;border-radius:var(--radius);padding:20px 22px;margin:18px 0;max-width:720px}
.no-results[hidden]{display:none}
.no-results p{margin:0 0 12px}
.no-results p:last-child{margin-bottom:0}
.no-results-filters{font-family:var(--ui);font-size:13.5px;color:var(--ink-soft)}
.no-results-tip{font-size:15px;color:var(--ink-soft)}
.f-wis{background:none;border:0;padding:0;cursor:pointer;align-self:center;font:inherit}

/* --- Premium credit-card result component --- */
/* Redesign 2026-10-07 (consumentenhierarchie): drie gebieden —
   identiteit | voordelen+kosten | CTA. Mobiel: naam → voordelen → prijs → aanvraag. */
.compare{display:grid;gap:16px;margin:18px 0 8px}
/* NUXO identity band (eigenaar 2026-10-07): de kaart krijgt een compacte
   navy/green header als visueel anker — goedgekeurde issuer-identiteit +
   productnaam in cleane body-sans. Geen geinventeerde kaartillustraties,
   geen chip/netwerk-emblemen; alleen bestaande assets/namen. */
.ccard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp4);display:grid;grid-template-columns:160px minmax(0,1fr) 250px;grid-template-areas:"visual main side";gap:var(--sp3) var(--sp4);box-shadow:var(--shadow-m)}
.ccard>.crow-visual{grid-area:visual;min-width:0}
/* Credit listing: band grid (navy identity band on top). Scoped to
   .ccard-credit — savings/loan/mortgage keep the 3-col visual|main|side
   layout (scope-leak fix 2026-10-07). */
.ccard-credit{padding:0 var(--sp4) var(--sp4);grid-template-columns:minmax(0,1fr) 250px;grid-template-areas:"band band" "main side"}
.ccard-credit.no-visual{grid-template-columns:minmax(0,1fr) 250px}
.crow-identity{grid-area:band;min-width:0;display:flex;align-items:center;gap:12px;margin:0;padding:10px var(--sp4);
  background:linear-gradient(115deg,#0e2839 0%,#0a2038 100%);
  border-bottom:3px solid var(--gold);border-radius:var(--radius) var(--radius) 0 0;color:#fff}
.crow-identity .crow-idtext{min-width:0;display:flex;flex-direction:column;gap:2px}
/* Uniform issuer-logo-slot (eigenaar 2026-10-07): elk uitgevermerk — officieel
   SVG-woordmerk of tekst-badge — krijgt dezelfde visuele hoogte (44px desktop,
   36px mobiel) in de identiteitspanelen (listing-band + detail-hero). Breedte
   auto (aspect ratio behouden), max-width cap, consistente clear space. Asset
   bytes onaangeroerd: het SVG-kader schaalt via --logo-h (PR #54), de badge
   via vaste slothhoogte. */
:root{--logo-slot-h:44px}
/* Focus op de navy-band: het globale accent (#0b2447) haalt geen 3:1 op navy
   (WCAG 2.4.13); goud wel (6.9:1 / 5.7:1). Zelfde patroon als .mast. */
.crow-identity :focus-visible,.detail-identity :focus-visible{outline-color:var(--gold)}
.crow-identity .crow-visual,
.detail-identity .detail-visual{flex:0 0 auto;min-width:0;height:var(--logo-slot-h);min-height:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:rgba(255,255,255,.96);border-radius:var(--radius-s);padding:0 12px}
/* Compact logo-slot (eigenaar 2026-10-07, density-pass): inhoudsvolgend met cap —
   geen vast 150/180px meer. Dezelfde uniforme hoogte (44px/36px) en aspect
   ratio; korte woordmerken (±90–100px) laten ruimte voor de 20–22px-titel op
   één regel. Lange namen wikkelen netjes (geen clipping/ellipsis). */
.crow-identity .crow-visual{width:fit-content;max-width:140px}
.detail-identity .detail-visual{margin:0;width:fit-content;max-width:200px}
.crow-identity .crow-visual .issuer-logo-frame{--logo-h:var(--logo-slot-h);
  width:calc(var(--logo-slot-h) * (var(--crop-w,1440) + 2 * var(--crop-padx,0)) / var(--crop-h,898));max-width:100%}
.crow-identity .crow-visual-text{border-left:3px solid var(--gold);padding:0 14px}
.crow-identity .brand-word,.detail-identity .detail-visual .brand-word{color:var(--ink);font-size:13px;
  letter-spacing:.06em;text-align:left;line-height:1.35}
.crow-identity .brand-word-long,.detail-identity .brand-word-long{font-size:11px}
.crow-price strong{white-space:nowrap}
.crow-visual{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--sp2);padding:var(--sp3);background:var(--paper-tint);border-radius:var(--radius-s);min-height:120px}
.crow-visual .issuer-logo-frame{width:100%;max-width:110px}
.crow-visual .issuer-logo img{max-width:100%;height:auto}
/* Tekstuele merk-terugval (tijdelijk; geen goedgekeurd asset): een volwaardige,
   verzorgde merkplaat — duidelijk label, geen logo-imitatie. Substantiële
   aanwezigheid met rustige neutrale behandeling: lichte tint, duidelijke
   typografie, subtiel accent. De merknaam blijft ondergeschikt aan
   productnaam, prijs en CTA. */
.crow-visual-text{justify-content:center;align-items:center;min-height:44px;max-height:none;
  padding:12px 18px;background:#f7f5f0;border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:var(--radius-s);gap:0;align-self:start;width:100%;box-sizing:border-box}
.brand-word{font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:.08em;
  color:var(--ink);text-transform:uppercase;text-align:center;line-height:1.3;max-width:100%}
.card-badge{display:inline-block;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:var(--radius-pill);padding:4px 12px}
.crow-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:8px}
.crow-name{font-family:var(--ui);font-size:21px;font-weight:700;letter-spacing:0;margin:0;line-height:1.2;color:var(--ink)}
.crow-name a{color:var(--ink);text-decoration:none}
.crow-name a:hover{color:var(--accent);text-decoration:underline}
.crow-issuer{margin:0;font-family:var(--ui);font-size:13px;color:var(--ink-soft)}
/* Credit identity band: white titles on navy — scoped to the credit listing
   identity + detail identity ONLY. Savings/loan/mortgage cards use ink titles
   on white (shared-selector leak fixed 2026-10-07). */
.crow-identity .crow-name{color:#fff}
.crow-identity .crow-name a{color:#fff}
.crow-identity .crow-name a:hover{color:#fff}
.crow-identity .crow-issuer{color:#c9d6e4}
.crow-req{color:var(--ink);font-weight:600}
.crow-price{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:var(--ui)}
.crow-price strong{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
/* Prijs opzettelijk rustig (was 32px): de why-regel en bullets dragen de
   visuele hiërarchie — kosten blijven duidelijk gelabeld, niet dominant. */
.crow-price span{font-family:var(--ui);font-size:14px;color:var(--ink-soft)}
/* Periode (/jaar, /maand) zichtbaar ondergeschikt aan het bedrag: kleiner, met spatie. */
.crow-period{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink-soft);margin-left:8px;white-space:nowrap}
.crow-note{font-family:var(--ui);font-size:14px;color:var(--ink-soft);margin-left:8px}
.crow-price .fee-sub{font-size:12.5px;color:var(--ink-soft)}
/* Voorwaardelijke prijsvrijstelling: aparte compacte regel, nooit vetgedrukt als bedrag. */
.fee-cond{font-family:var(--ui);font-size:14px;font-weight:400;color:var(--ink-soft);margin:6px 0 0;line-height:1.45}
.fee-cond-sub{white-space:nowrap}
/* Prijslabel: duidelijke standaardprijs-aanduiding boven het bedrag. */
.crow-priceblock{display:flex;flex-direction:column;gap:2px;min-width:0}
.crow-price-label{margin:0;font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.crow-fee-note{margin:2px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
/* Beslisfeiten: compacte responsieve rij — uitsluitend geverifieerde velden.
   Korte feiten (valuta/aflossing) delen een regel waar ze passen. */
.crow-facts{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:4px 18px;font-family:var(--ui);font-size:13px}
.crow-facts>div{display:flex;gap:6px;align-items:baseline}
.crow-facts dt{flex:none;min-width:0;font-weight:700;color:var(--ink-soft)}
.crow-facts dd{margin:0;color:var(--ink)}
/* CTA-hiërarchie: dominante aanvraagknop + klein bestemming-onderschrift;
   Vergelijk blijft bereikbaar maar visueel ondergeschikt. */
.cta-apply{font-size:16px}
.cta-caption{margin:-2px 0 0;font-family:var(--ui);font-size:12px;line-height:1.4;color:var(--ink-faint);text-align:center}
/* Kosten/actie-paneel (eigenaar 2026-10-07): zacht getint, onderscheidend —
   gelabelde prijs, beknopte voorwaarden, prominente aanvraagknop. */
.crow-side{grid-area:side;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px}
/* Credit: tinted CTA panel — scoped to .ccard-credit. Savings/loan/mortgage
   keep a plain side column (scope-leak fix 2026-10-07). */
.ccard-credit .crow-side{background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius-s);padding:12px}
/* Actiegroep: aanvraag + bestemming + secundaire details als één visuele eenheid. */
.crow-actions{min-width:0;display:flex;flex-direction:column;gap:8px}
.crow-actions .btn{width:100%}
/* Compacte kaartvoet (eigenaar 2026-10-07, density-pass): vergelijk-control en
   bron/datum delen één rij waar de ruimte het toelaat, i.p.v. twee volle rijen.
   Bron wikkelt natuurlijk; geen voorwaarden verdwijnen achter disclosure. */
/* Compacte kaartvoet (eigenaar 2026-10-07, density-pass + ChatGPT pixel-audit):
   expliciet grid auto minmax(0,1fr) zodat Vergelijk en bron/datum ÉCHT naast
   elkaar passen op mobiel (flex + min-width:auto forceerde een tweede rij).
   Bron krijgt min-width:0 en wikkelt normaal in de resterende breedte;
   geen ellipsis, alle tekens behouden. Vergelijk behoudt 44px minimum. */
.crow-foot{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:center}
.crow-foot .cmp-pick{justify-content:flex-start;min-width:0}
.crow-foot .crow-source{margin:0;text-align:right;min-width:0;overflow-wrap:break-word}
.crow-side .cmp-pick{font-weight:500;justify-content:center}
.crow-side .cmp-pick{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;min-height:44px}
.crow-side .cmp-pick input{width:20px;height:20px;accent-color:var(--accent);cursor:pointer;margin:0;flex:none}
.crow-side .btn{width:100%}
/* Secundaire details-knop: zichtbaar NUXO-styled; credit gebruikt .btn.btn-secondary
   (hogere specificiteit/source-order) en behoudt die button-styling. */
.crow-details-link{min-height:44px;width:100%;justify-content:center;color:var(--accent);font-weight:600;text-decoration:none;display:inline-flex;align-items:center}
.crow-details-link:hover{text-decoration:underline;color:var(--accent-dark)}
.crow-source{margin:0;font-family:var(--ui);font-size:12px;color:var(--ink-faint);text-align:center}
.crow-more{grid-column:1/-1;border-top:1px solid var(--line-soft);padding-top:var(--sp2);margin-top:var(--sp1)}
.crow-more summary{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--accent);cursor:pointer;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.crow-more summary:hover{text-decoration:underline}
.crow-more-body{font-size:15px;color:var(--ink-soft)}
.crow-more-body ul{margin:8px 0;padding-left:20px}
.crow-more-body li{margin-bottom:6px}
.crow-more-src{font-weight:700;margin:12px 0 4px;color:var(--ink)}
/* Mobiel: één scanpad — band → voordelen → kosten/actie-paneel → aanvraag. */
@media (max-width:760px){
  .ccard{grid-template-columns:minmax(0,1fr);grid-template-areas:"visual" "main" "side";padding:var(--sp3);gap:var(--sp2)}
  .ccard-credit,.ccard-credit.no-visual{grid-template-columns:minmax(0,1fr);grid-template-areas:"band" "main" "side";padding:0 var(--sp3) var(--sp3);gap:var(--sp2)}
  /* Identiteit-band: compacte merkmarkering links, naam + uitgever rechts. */
  .crow-identity{padding:10px var(--sp3);gap:12px;border-radius:var(--radius) var(--radius) 0 0}
  /* Uniform logo-slot mobiel: 36px hoog, smallere caps. */
  :root{--logo-slot-h:36px}
  .crow-identity .crow-visual{width:fit-content;max-width:110px;padding:0 8px}
  .detail-identity .detail-visual{width:fit-content;max-width:140px;padding:0 8px}
  .crow-identity .brand-word,.detail-identity .detail-visual .brand-word{font-size:11px;text-align:left}
  .crow-identity .brand-word-long,.detail-identity .brand-word-long{font-size:10px}
  .crow-main{gap:8px}
  .crow-identity .crow-name{font-size:20px;line-height:1.2}
  .crow-identity .crow-issuer{font-size:12.5px;line-height:1.4}
  .crow-price strong{font-size:24px;line-height:1.1}
  .crow-facts{font-size:12.5px;gap:3px 14px}
  .crow-side{gap:8px}
  .ccard-credit .crow-side{padding:12px}
  .crow-side .btn{width:100%}
  .crow-side .cmp-pick{min-height:44px;justify-content:flex-start}
  /* Tweekoloms actiegroep op mobiel (ChatGPT pixel-audit 2026-10-07): primair
     en outlined secundair naast elkaar; caption in eigen rij ONDER de primaire
     knop (niet los/ambigu). Alleen creditcards (.crow-side-credit); andere
     categorieën behouden hun kolom. 48px primair / 44px secundair blijven;
     lange labels wikkelen natuurlijk, nooit clip. */
  .crow-side-credit .crow-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"apply details" "caption .";gap:6px 8px;align-items:start}
  .crow-side-credit .crow-actions .cta-apply{grid-area:apply;min-width:0}
  .crow-side-credit .crow-actions .cta-caption{grid-area:caption;min-width:0;margin:2px 0 0;text-align:left}
  .crow-side-credit .crow-actions .crow-details-link{grid-area:details;min-width:0}
  .crow-source{text-align:left;font-size:11.5px;margin:0}
  .crow-more{margin-top:2px;padding-top:6px}
  .crow-more summary{min-height:44px;padding:6px 0;font-size:13.5px}
  .crow-why{font-size:15px}
  .crow-benefits li{font-size:13.5px}
}
/* Desktop: kosten/actie als full-width band ONDER benefits/feiten/notes
   (ChatGPT pixel-audit 2026-10-07). Stopt het nesten van twee smalle ±149px
   kolommen in een 340px-side naast ±100px benefit-tekst: brede prijs +
   voorwaarden links, comfortabele actie-kolom (260px) rechts, voet over de
   volle breedte. Volgt benefit-first leesvolgorde; package-voorwaarden
   wikkelen in 2–3 regels. Natuurlijke content-hoogte, geen min-height,
   geen decoratieve vulling. Alleen creditcards (.crow-side-credit);
   lening/hypotheek/spaar-kaarten behouden hun kolom. */
@media(min-width:1000px){
  .ccard-credit{grid-template-columns:minmax(0,1fr);grid-template-areas:"band" "main" "side"}
  .crow-side-credit{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-areas:"price actions" "foot foot";gap:10px 24px;align-items:start;align-content:start}
  .crow-side-credit .crow-priceblock{grid-area:price;min-width:0}
  .crow-side-credit .crow-actions{grid-area:actions;min-width:0}
  .crow-side-credit .crow-foot{grid-area:foot}
}
.ccard h2{font-family:var(--display);font-size:30px;margin:0 0 4px;letter-spacing:.02em}
.ccard h2 a{color:var(--ink);text-decoration:none}
.ccard h2 a:hover{color:var(--accent)}
.issuer{font-family:var(--ui);font-size:13px;color:var(--ink-soft)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tag{font-family:var(--ui);font-size:12.5px;background:#eef2f7;color:var(--accent-dark);border-radius:999px;padding:4px 12px;border:1px solid #cbd6e2}
.fee{font-family:var(--mono);font-size:34px;font-weight:500;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.fee small{display:block;font-family:var(--ui);font-size:12px;font-weight:500;color:var(--ink-soft);letter-spacing:.04em}
.fee-wide{max-width:360px;font-size:24px;line-height:1.18;white-space:normal;text-align:right;overflow-wrap:anywhere}
.facts{display:flex;gap:24px;flex-wrap:wrap;margin:8px 0;font-size:15.5px}
.facts div{min-width:0}
.facts div span{display:block;font-family:var(--ui);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.cardfoot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px;margin-top:2px}
.card-specs{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:12px;margin-top:2px;color:var(--ink-soft)}
.card-specs div{overflow-wrap:anywhere}
/* --- Button hierarchy: primary amber, secondary outline, quiet text --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;text-decoration:none;font-family:var(--ui);font-size:15px;font-weight:700;padding:12px 22px;border-radius:10px;border:2px solid var(--accent);cursor:pointer;min-height:44px;line-height:1.2}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{background:var(--paper-tint);border-color:var(--ink-soft);color:var(--ink)}
.btn-quiet{background:transparent;border-color:transparent;color:var(--accent);padding:12px 8px}
.btn-quiet:hover{color:var(--accent-dark);text-decoration:underline;background:transparent;border-color:transparent}
.btn-disabled{background:var(--paper-tint);border-color:var(--line);color:var(--ink-soft);cursor:not-allowed;pointer-events:none}
.btn-s{padding:8px 16px;font-size:13.5px;min-height:44px}
/* Primaire issuer-actie: altijd minimaal 48px (eigenaar 2026-10-07, density-pass).
   (0,2,0) wint altijd van .btn (0,1,0) — dekt listing (.cta-apply, incl. de
   'Bekijk bij aanbieder'-variant) én alle detail-hero-panels, op alle
   breakpoints (sluit ook de 761–999px-band). Met border-box is min-height:48px
   een harde ondergrens; de eerdere 46px-meting kwam doordat de listing-knop
   alleen op content-hoogte + padding uitkwam. */
.btn.cta-apply,
.detail-hero-panel .btn{min-height:48px}
.link-arrow{font-family:var(--ui);font-size:14px;color:var(--accent);font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.link-arrow:hover{text-decoration:underline}

/* sections */
.sec{padding:40px 0}
/* Collapsible secondary sections (progressive disclosure): FAQ, calculator,
   further reading, about-text. Native <details> = keyboard + screen-reader accessible. */
.sec-disclosure{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:0 0 14px;padding:0 22px}
.sec-disclosure > summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:18px 0;min-height:44px}
.sec-disclosure > summary::-webkit-details-marker{display:none}
.sec-disclosure > summary::marker{content:''}
.sec-disclosure > summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.sec-disclosure .disclosure-title{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:.02em}
.sec-disclosure .disclosure-hint{display:block;font-family:var(--ui);font-size:14px;font-weight:400;color:var(--ink-soft);margin-top:2px}
.sec-disclosure > summary::after{content:'+';font-size:26px;line-height:1;color:var(--accent);font-weight:700;flex:none;align-self:center}
.sec-disclosure[open] > summary::after{content:'−'}
.sec-disclosure .disclosure-body{padding:2px 0 22px}
@media(max-width:700px){.sec-disclosure{padding:0 16px}.sec-disclosure > summary{padding:16px 0}}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 4px}
.hub-start{padding:0 0 18px}
.hub-start-grid{margin:0;grid-template-columns:1fr 1fr}
.hub-start-card{position:relative;padding:22px}
.hub-start-card:first-child{border-color:#b9cbde;background:#f5f8fc}
.hub-start-card .kicker{display:block;margin-bottom:6px}
.hub-start-card h2,.hub-start-card h3{font-family:var(--display);font-size:22px;line-height:1.15;letter-spacing:.02em;margin:0 0 6px;color:var(--ink)}
.hub-start-help{margin:10px 0 0}

.home-all-link{margin:20px 0 4px;text-align:center}
.home-top-cards{margin-top:4px}
.compact-list{display:grid;gap:10px;margin:18px 0}
.compact-row{display:flex;justify-content:space-between;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.compact-row b a{color:var(--ink);text-decoration:none}
.compact-row b a:hover{color:var(--accent)}
.compact-row small{display:block;color:var(--ink-soft);margin-top:3px}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);margin:24px 0}
.table-wrap .fact-table{margin:0;min-width:680px}
.table-more-wrap{margin:16px 0 0;text-align:center}
.table-more-wrap[hidden]{display:none}
.row-action{white-space:nowrap}
.row-action .btn{padding:12px 16px;font-size:13px;min-height:44px}

.sec h2{font-family:var(--display);font-size:clamp(30px,4vw,44px);letter-spacing:.02em;margin:0 0 14px}
.prose{max-width:65ch}
.prose h2{font-family:var(--display);font-size:clamp(26px,3vw,32px);font-weight:800;margin-top:36px}
.prose h3{font-family:var(--display);font-size:24px;margin:28px 0 8px}
.prose ul{padding-left:22px}
.prose li{margin:6px 0}
/* In-tekst links in NUXO-linkkleur i.p.v. browserblauw (PR #136-polish, 2026-10-21):
   onderstreept + offset, zodat kleur nooit het enige onderscheid is.
   HOTFIX (zelfde dag): knoppen (.btn, wit op teal) en pick-namen (.pick-name, eigen
   inktkleur) uitgesloten — de ongescoopte regel maakte CTA-tekst onleesbaar
   (donker teal op teal, gemeten rgb(10,87,75) op rgb(13,110,95)). */
.prose a:not(.btn):not(.pick-name){color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px}
.prose a:not(.btn):not(.pick-name):hover{color:var(--accent)}
.prose a:not(.btn):not(.pick-name):visited{color:var(--accent-dark)}
.steps{counter-reset:st;display:grid;gap:12px;margin:20px 0;padding:0}
.steps li{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 16px 64px;position:relative}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:18px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px}
.choice-steps{counter-reset:st;display:grid;gap:12px;margin:20px 0;padding:0}
.choice-steps li{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 16px 64px;position:relative}
.choice-steps li::before{counter-increment:st;content:counter(st);position:absolute;left:18px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px}

/* detail page */
.fact-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:24px 0;font-size:16.5px}
.fact-table th,.fact-table td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.fact-table tr:last-child th,.fact-table tr:last-child td{border-bottom:0}
.fact-table th{font-family:var(--ui);font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);width:38%;background:#fbf9f4}
.fact-table td small{display:block;color:var(--ink-soft);font-size:14px;margin-top:4px}
.fact-table td small a{color:var(--accent-dark);text-underline-offset:2px}
/* Kostengids per aanbieder (KEYWORDS #2, 2026-10-31): bredere kolom voor prijsvoorwaarden */
.cost-bank-section .fact-table th:nth-child(1){width:34%}.cost-bank-section .fact-table th:nth-child(2){width:18%}.cost-bank-section .fact-table th:nth-child(3){width:48%}
.cost-bank-section h3{margin-top:28px}
/* Bronconflict bij een gegeven (PR #130): leesbaar in inkt, niet als kleine lettertjes weggestopt. */
.fact-table td small.source-conflict{color:var(--ink)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.panel-block{margin:20px 0}
.panel h3{font-family:var(--display);font-size:22px;margin:0 0 10px}
.panel ul{margin:0;padding-left:20px}
.panel li{margin:6px 0}
.sources{background:#f3efe4;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:24px 0;font-size:15.5px}
.sources h3{font-family:var(--ui);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px}
.sources ul{margin:0;padding-left:20px}
.sources a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px}
.sources a:hover{color:var(--accent)}
.sources a:visited{color:var(--accent-dark)}
/* Artikel-bronnenlijst (staartsectie, geen .sources-blok): zelfde linkkleur. */
.guide-sources a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px}
.guide-sources a:hover{color:var(--accent)}
.guide-sources a:visited{color:var(--accent-dark)}
.cta-box{background:var(--ink);color:#f4efe4;border-radius:var(--radius);padding:28px;margin:28px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta-box p{margin:6px 0 0;color:#c9c2b2;font-size:16px}
.cta-box .btn{background:var(--accent);color:#fff;border-color:var(--accent)}
.cta-box .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.fineprint{font-size:14.5px;color:var(--ink-soft)}

/* guides */
.guide-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.guide-cards>.ad-slot{grid-column:1/-1}
.guide-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-decoration:none;color:var(--ink);display:block}
.guide-card:hover{border-color:var(--accent)}
.guide-card h3{font-family:var(--display);font-size:22px;margin:0 0 6px}
.guide-card p{margin:0;color:var(--ink-soft)}
.guide-card .kicker{margin-bottom:8px}
.guide-card .excerpt{margin:8px 0 10px;color:var(--ink-soft)}
.guide-card .byline{font-size:14px}
/* Nieuwskaart als article (eigenaar 2026-10-07, FIX 4): titel-link + expliciete
   artikelactie in NUXO-linkstijl; andere .guide-card-ankers ongewijzigd. */
.guide-card h3 a{color:inherit;text-decoration:none}
.guide-card h3 a:hover{color:var(--accent);text-decoration:underline}
.guide-card .card-action{margin-top:8px}
/* Nieuws-leesactie als zichtbare knop (eigenaar 2026-10-07): secundaire
   knopstijl — herkenbaar als actie, geen primaire CTA-concurrentie.
   .btn-basis garandeert 44px-target; :focus-visible is globaal. */
.guide-card .btn.card-action{align-self:flex-start;margin-top:12px}
/* redactionele illustratie in gidshoofd: origineel NUXO-werk, nooit productart */
/* Artikelhero: volle breedte voor lange titels (de 65ch-maat geldt voor de body,
   niet voor de hero); illustratie ondergeschikt als float. Redesign 2026-10-07. */
.guide-hero{display:block}
.guide-hero::after{content:'';display:block;clear:both}
.guide-hero h1{font-size:clamp(32px,4.2vw,50px);line-height:1.1;letter-spacing:.01em}
.guide-hero-art{float:right;width:76px;height:76px;margin:4px 0 12px 22px}
.guide-hero-art svg{width:100%;height:100%;display:block}
.guide-hero .lede-short{font-size:18px;line-height:1.55;max-width:60ch;margin:0 0 8px}
.guide-hero .hero-qual{margin-top:6px}

/* faq */
.faq{margin:20px 0;max-width:65ch}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:10px;margin:10px 0;padding:4px 18px}
.faq summary{cursor:pointer;font-weight:600;padding:12px 0;font-size:17.5px;min-height:44px;display:flex;align-items:center}
.faq summary::marker{color:var(--accent)}
.faq details p{margin:0 0 14px;color:var(--ink-soft)}

/* breadcrumb */
.crumbs{font-family:var(--ui);font-size:13px;font-weight:500;color:var(--ink-soft);margin:22px 0 0}
.crumbs a{color:var(--accent);text-decoration:none}

/* footer */
.foot{background:var(--ink);color:#c9c2b2;margin-top:56px;padding:40px 0 32px;font-size:15.5px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.foot .brandline{font-family:var(--display);font-weight:800;font-size:26px;color:#fff;letter-spacing:.06em}
.foot .brandline i{font-style:normal;color:var(--gold)}
.foot b{display:block;font-family:var(--ui);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:10px}
.foot-section{border:0}
.foot-section summary{list-style:none;cursor:pointer;font-family:var(--ui);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:#fff;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}.foot-section summary::after{content:'+';font-size:16px;color:var(--gold)}.foot-section[open] summary::after{content:'−'}
.foot-section summary::-webkit-details-marker{display:none}
.foot-links{display:block}
.foot a{color:#c9c2b2;text-decoration:none;display:block;margin:7px 0}
.foot a:hover{color:#fff}
.foot .small{font-size:13.5px;margin-top:14px}
.foot-base{border-top:1px solid rgba(244,239,228,.16);margin-top:28px;padding-top:18px;font-family:var(--ui);font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .hub-start-grid{grid-template-columns:1fr;gap:10px}
  .hub-start{padding-bottom:12px}
  .hub-start-card{padding:14px 16px}
  .hub-start-card h2,.hub-start-card h3{font-size:19px;margin:0 0 4px}
  .hub-start-help{margin:8px 0 0;font-size:14px}
  /* Detail hero: CTA-box had desktop-ruimte voor één knop — compacter op mobiel. */
  .hero{padding-top:32px;padding-bottom:20px}
  .cta-box{padding:16px;margin:16px 0;justify-content:center;gap:12px}
  .cta-box .btn{min-height:48px}
  /* Detail hero-panel CTA: 48px op mobiel (cta-box is vervangen door het panel). */
  .detail-hero-panel .btn{min-height:48px}
  /* Detail hero mobiel (eigenaar 2026-10-07, FIX 3): identiteit compact
     horizontaal (geen aparte 160px-rij), strakkere verticale ritme, CTA +
     bestemming bij elkaar, vergelijking secundair zonder 3-rijen-blok. */
  .detail-hero{padding-top:18px;padding-bottom:16px}
  .detail-hero .detail-value{margin:6px 0;font-size:16px}
  .detail-hero .hero-pills{margin:8px 0}
  .detail-hero .hero-price{margin:6px 0}
  .detail-hero .hero-price-cond{margin:4px 0 0;font-size:13.5px}
  .detail-hero .hero-req,.detail-hero .hero-availability{margin:6px 0;font-size:14px}
  .cta-box .cta-caption{margin:4px 0 0;font-size:13px}
  .cta-box .cta-secondary{margin-top:4px;font-size:14px}
  .mast-main{flex-wrap:nowrap;align-items:center}
  /* Lange pagina-ondertitel mag het Menu nooit verdringen op 375px. */
  .brand{min-width:0;flex:1 1 auto}
  .brand b{font-size:32px}
  .brand span{font-size:10.5px;letter-spacing:.08em;white-space:normal}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--ink);padding:8px 16px 16px;border-top:1px solid rgba(244,239,228,.16);flex-direction:column}
  .nav.is-open{display:flex}
  .mast{position:relative}
  .sit-grid{grid-template-columns:1fr 1fr}
  .ccard>*{min-width:0}
  .hl-note{margin:0;font-size:13.5px}
  .fee,.fee-wide{font-size:28px;white-space:normal;text-align:left;max-width:none}
  .two-col,.guide-cards,.foot-grid{grid-template-columns:1fr}
  .filters select{min-width:0;width:100%}
  .fact-table th{width:42%}
  body{font-size:17px}
  .fact-table th,.fact-table td{padding:11px 12px}
  .fact-table:not(:has(thead)){table-layout:fixed;max-width:100%}
  .fact-table:not(:has(thead)) th,.fact-table:not(:has(thead)) td{overflow-wrap:anywhere;word-break:break-word}
  .table-wrap{margin:18px 0}
  .table-wrap .fact-table{min-width:660px}
  .fact-table:has(thead):not(.alt-table):not(.stack-mobile):not(.rates-compact){min-width:660px}
  /* Compacte rentetabel (hypotheekdetail): 3 kolommen passen op 350px zonder
     horizontaal scrollen — geen sticky labels of scroll-cue nodig, en geen
     toetsenbord-scroll-afhankelijkheid. (Eigenaar 2026-10-07, FIX 5.) */
  .rates-wrap{overflow-x:visible}
  .rates-wrap .rates-compact{min-width:0;width:100%;table-layout:fixed}
  .rates-compact th,.rates-compact td{padding:10px 8px;font-size:15px;overflow-wrap:anywhere}
  .rates-compact th{width:auto}
  .rates-compact th:first-child,.rates-compact td:first-child{width:40%}
  /* Secundaire hero-links: ≥44px trefvlak op mobiel (Freo/Rabo-meting 22.39px).
     (Eigenaar 2026-10-07, FIX 5.) */
  .detail-hero-panel .cta-secondary,.cta-box .cta-secondary{display:inline-flex;align-items:center;min-height:44px;padding:6px 4px}
  /* Gestapelde tabelrijen op mobiel: elke rij wordt een gelabelde kaart (Amex-gids). */
  .fact-table.stack-mobile{min-width:0}
  .fact-table.stack-mobile thead{display:none}
  .fact-table.stack-mobile,.fact-table.stack-mobile tbody,.fact-table.stack-mobile tr,.fact-table.stack-mobile td{display:block;width:100%;box-sizing:border-box}
  .fact-table.stack-mobile{border:0;background:none;margin:16px 0}
  .fact-table.stack-mobile tr{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
  .fact-table.stack-mobile td{border:0;padding:5px 0;font-size:16px}
  .fact-table.stack-mobile td[data-label]::before{content:attr(data-label);display:block;font-family:var(--ui);font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin-bottom:2px}
  .fact-table.stack-mobile td .btn{margin-top:6px}
  /* Spec-tabel (detailpagina's): op smal label voluit BOVEN waarde stapelen,
     zodat korte kolomkoppen niet willekeurig afbreken (BESTEDINGSLIMIE+T) en
     lange gekwalificeerde waarden niet geplet worden. Tabelsemantiek
     (table/tr/th/td) blijft in de DOM voor AT; desktop houdt de tabel. */
  .fact-table.spec-table tr{display:block;padding:12px 14px;border-bottom:1px solid var(--line)}
  .fact-table.spec-table tr:last-child{border-bottom:0}
  .fact-table.spec-table th,
  .fact-table.spec-table td{display:block;width:100%;border:0;padding:0;background:none;text-align:left}
  .fact-table.spec-table th{margin:0 0 4px;word-break:normal;overflow-wrap:break-word}
  .fact-table.spec-table td{font-size:16px}
  .fact-table:has(thead) th,.fact-table:has(thead) td{min-width:9em;width:auto}
  .hub-hero .lede{margin-bottom:8px}
  /* Kwalificaties bij de hero-intro: disclosure, nooit ellipsis-afknipping. */
  .hero-actions{gap:10px;margin-top:14px}
  .hero-actions .btn{width:100%;text-align:center}
  .compact-row{align-items:flex-start;flex-direction:column;gap:8px}
  /* Issuer-logo's: op smalle schermen boven de productnaam (niet inline-links) */
  .srow-id,.pick-link,.crow-id{flex-direction:column;align-items:flex-start;gap:8px}
  .topkeuze-waarom ul li .issuer-logo-frame{display:block;margin-bottom:6px}
  .row-action .btn{white-space:nowrap}
  .foot{padding-top:26px}
  .foot-grid{gap:0}
  .foot-about{padding-bottom:16px}
  .foot-section{border-top:1px solid rgba(244,239,228,.16);padding:0}
  .foot-section summary{cursor:pointer;margin:0;padding:15px 0;display:flex;align-items:center;justify-content:space-between}
  .foot-section summary::after{content:'+';font-size:20px;line-height:1;color:var(--gold)}
  .foot-section[open] summary::after{content:'−'}
  .foot-links{padding:0 0 12px}
  .foot-links a{min-height:44px;display:flex;align-items:center;margin:0}
  .guide-hero h1{font-size:31px;line-height:1.12}
  .guide-hero .lede-short{font-size:17px;line-height:1.5;max-width:none}
  .guide-hero-art{width:52px;height:52px;margin:2px 0 10px 14px}
  .detail-hero h1{font-size:29px}
  .detail-value{font-size:16.5px}
  .detail-hero .hero-price b,.detail-hero .hero-price strong{font-size:30px}
}

/* side-by-side vergelijken */
/* Deelbare vergelijking: tastbaar 44px-doel, robuuste handmatige kopieerfallback. */
.cmp-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:10px 0}
.cmp-share>.btn{min-height:44px;padding:10px 15px;font-size:14px}
.cmp-share>[role="status"]{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.cmp-share>input{flex:1 1 100%;width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:16px}
.cmp-share>input[hidden]{display:none}

.hint{font-size:16.5px;color:var(--ink-soft);margin:16px 0 0}
.hint a{color:var(--accent);font-weight:700}
.cmp-pick{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;user-select:none;min-height:44px;min-width:44px;padding:8px}
.cmp-pick input{width:20px;height:20px;accent-color:var(--accent);cursor:pointer;margin:0;flex:none}
.cmp-add{margin:18px 0 0}
.cardfoot-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cmp-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:70;background:var(--ink);color:#f4efe4;border-radius:14px;padding:12px 12px 12px 20px;display:flex;align-items:center;gap:14px;box-shadow:0 10px 34px rgba(0,0,0,.28);max-width:calc(100vw - 32px);flex-wrap:wrap}
.cmp-bar[hidden]{display:none}
.cmp-bar-count{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.cmp-bar .btn{padding:10px 18px;font-size:13.5px;white-space:nowrap}
.cmp-bar .btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.cmp-bar-clear{background:transparent;border:1px solid rgba(244,239,228,.45);color:#f4efe4;border-radius:8px;padding:9px 14px;font-family:var(--ui);font-size:13px;cursor:pointer;min-height:44px}
.cmp-bar-clear:hover{border-color:#f4efe4}
.cmp-bar-msg{font-size:13.5px;color:var(--gold);flex-basis:100%}
.cmp-bar-msg:empty{display:none}
.cmp-picker{display:grid;gap:10px;margin:20px 0;grid-template-columns:1fr 1fr}
.cmp-picker .cmp-pick{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13.5px;color:var(--ink)}
.cmp-picker .cmp-pick:has(input:checked){border-color:var(--accent);background:#f2f5f9}
/* Vergelijking: composer als compacte native disclosure vóór #cmp-app (2026-10-07,
   layout-shift-fix). De gesloten summary is hoogtevast, zodat de late
   tabel-injectie de kiezer nooit verschuift; de tabel groeit omlaag. */
.cmp-composer{border:1px solid var(--line);border-radius:12px;background:var(--card);margin:0 0 22px}
.cmp-composer>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;font-family:var(--ui);font-weight:700;font-size:15px;color:var(--ink)}
.cmp-composer>summary::-webkit-details-marker{display:none}
.cmp-composer>summary::marker{content:''}
.cmp-composer>summary::before{content:"+";font-weight:800;color:var(--accent);font-size:19px;line-height:1;flex:none}
.cmp-composer[open]>summary::before{content:"\2013"}
.cmp-composer>summary:hover{color:var(--accent-dark)}
.cmp-composer>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.cmp-composer-body{padding:0 16px 18px}
.cmp-composer-body .prose{margin:0 0 2px}
.cmp-composer-body .cmp-picker{margin:14px 0}
.cmp-composer-body .btn{min-height:44px}
/* Begrensde laadstatus voor #cmp-app: intentioneel terwijl de module laadt,
   geen duizenden pixels gereserveerd, geen verstopte resultaten. */
.cmp-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44vh;margin:0;padding:24px 16px;color:var(--ink-soft);font-size:15px}
.cmp-spinner{width:22px;height:22px;flex:none;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:cmp-spin .9s linear infinite}
@keyframes cmp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cmp-spinner{animation:none}}
.cmp-suggest{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.cmp-suggest a{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:600;font-size:16.5px;display:block}
.cmp-suggest a:hover{border-color:var(--accent)}
.cmp-suggest small{display:block;font-weight:400;color:var(--ink-soft);font-size:14px;margin-top:4px}
.cmp-table-scroll{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table.cmp-table{border-collapse:collapse;width:100%;min-width:660px}
.cmp-table th,.cmp-table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:16px}
.cmp-table thead th{font-family:var(--display);font-size:21px;min-width:200px;letter-spacing:.01em}
.cmp-table thead th a{color:var(--ink);text-decoration:none}
.cmp-table thead th a:hover{color:var(--accent)}
.cmp-col-issuer{display:block;font-family:var(--ui);font-size:12px;color:var(--ink-soft);font-weight:400;margin-top:4px}
.cmp-col-remove{display:block;margin-top:6px}
.cmp-remove{background:none;border:0;padding:0;color:var(--ink-soft);cursor:pointer;font-size:13px;font-family:var(--ui);min-height:44px;display:inline-flex;align-items:center;text-decoration:underline}
.cmp-remove:hover{color:var(--danger)}
.cmp-table tbody th{font-family:var(--ui);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);width:170px;background:#fbf9f4;position:sticky;left:0}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:0}
.cmp-table td small{display:block;color:var(--ink-soft);font-size:13.5px;margin-top:4px}
.cmp-table td ul{margin:0;padding-left:18px}
.cmp-table td li{margin:4px 0}
.cmp-table .btn{font-size:13px;padding:10px 16px;white-space:nowrap}
/* Mobiel: gestapelde vergelijkingssecties i.p.v. horizontale tabel (AGENTS.md §7).
   Desktop toont de tabel; de gestapelde variant is daar verborgen. */
.cmp-stacked{display:none}
@media(max-width:760px){
  #cmp-app .cmp-table-scroll,#cmp-app .cmp-scroll-hint{display:none}
  #cmp-app .cmp-stacked{display:block;margin:18px 0}
  .cmp-stack-products{display:grid;gap:10px;margin:0 0 18px}
  .cmp-stack-p{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
  .cmp-stack-pname{font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);text-decoration:none;margin-right:auto}
  .cmp-stack-pissuer{font-family:var(--ui);font-size:13px;color:var(--ink-soft)}
  .cmp-stack-p .cmp-remove,.cmp-stack-card .cmp-remove{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--accent);min-height:44px;display:inline-flex;align-items:center;padding:8px 4px}
  .cmp-stack-sec{margin:0 0 14px}
  .cmp-stack-sec>h3{font-family:var(--ui);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin:0 0 8px}
  .cmp-stack-cards{display:grid;gap:10px}
  .cmp-stack-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
  .cmp-stack-cname{font-family:var(--ui);font-weight:700;font-size:14px;margin:0 0 6px;color:var(--ink)}
  .cmp-stack-value{font-size:16px}
  .cmp-stack-value small{display:block;color:var(--ink-soft);font-size:13.5px;margin-top:4px}
  .cmp-stack-value ul{margin:0;padding-left:18px}
  .cmp-stack-value li{margin:4px 0}
  .cmp-stack-value .btn{font-size:13px;padding:10px 16px}
}
.notice{background:var(--gold-soft);border:1px solid #e7d6a0;border-radius:10px;padding:14px 18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:760px){
  .cmp-picker,.cmp-suggest{grid-template-columns:1fr}
  .cmp-table tbody th{width:128px}
  .cmp-bar{bottom:12px;padding:10px 10px 10px 16px;gap:10px}
  .cardfoot-links{gap:12px}
}

.btn-ghost{background:transparent;color:#dbe4f0;border:1px solid #3b4f6e}
.btn-ghost:hover{background:#1a2638}
button.btn{cursor:pointer;border:0}
.byline{color:var(--ink-soft);font-size:.92rem;margin:8px 0 0}

/* Rekenwidgets (hypotheek, lening, sparen) — zelfde vormentaal als de rest van de site */
.nuxo-mc-field, .nuxo-loan-field, .nuxo-savings-field{margin:14px 0;max-width:440px}
.nuxo-mc-field label, .nuxo-loan-field label, .nuxo-savings-field label{display:block;font-family:var(--ui);font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin-bottom:6px}
.nuxo-mc-input, .nuxo-loan-field input{font-family:var(--ui);font-size:17px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;box-sizing:border-box}
/* Spaarvelden: 18px leestekst + ruimere padding zodat de hoogte altijd ≥44px is */
.nuxo-savings-field input{font-family:var(--ui);font-size:18px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;box-sizing:border-box}
button.btn.calc-offer{background:transparent;color:var(--ink);border:1px solid var(--line);font-size:13px;padding:8px 12px;margin-top:8px;min-height:44px;white-space:normal}
.calc-field{margin:0 0 12px}
.calc-field label{display:block;font-size:14px;font-weight:650;margin-bottom:4px}
.calc-field input{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.calc-source{font-size:14.5px;color:var(--ink-soft);margin:8px 0 12px}
.calc-out{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.calc-out p{margin:4px 0}
.calc-goal{margin:14px 0 0;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:4px 14px 14px}
.calc-goal summary{cursor:pointer;font-weight:700;min-height:44px;padding:12px 2px;box-sizing:border-box}
.calc-goal summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.calc-goal .calc-field{margin-top:2px}
.calc-goal .calc-out{margin-top:10px}
.calc-goal .calc-goal-apply{margin-top:10px}
#spaar-calculator{scroll-margin-top:84px}
.nuxo-mc-button, .nuxo-loan-btn{display:inline-block;background:var(--accent);color:#fff;font-family:var(--ui);font-size:14.5px;font-weight:700;padding:12px 22px;border:0;border-radius:10px;cursor:pointer;margin-top:6px}
.nuxo-mc-button:hover, .nuxo-loan-btn:hover{background:var(--accent-dark)}
.nuxo-mc-result, .nuxo-loan-result{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-top:16px;max-width:560px}
.nuxo-mc-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.nuxo-mc-note, .nuxo-mc-disclaimer, .nuxo-loan-warning{font-size:14.5px;color:var(--ink-soft)}
.nuxo-mc-error{color:var(--danger);font-size:14.5px}
.nuxo-mc-share-button{min-height:44px;margin-top:12px;padding:11px 16px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font:600 15px var(--ui);cursor:pointer}
.nuxo-mc-share{margin-top:12px;max-width:560px;width:100%}.nuxo-mc-share[hidden]{display:none}.nuxo-mc-share label{display:block;margin-bottom:6px}.nuxo-mc-share-input{width:100%;min-width:0;box-sizing:border-box;padding:11px;border:1px solid var(--line);border-radius:8px}.nuxo-mc-share-status{font-size:14px;color:var(--ink-soft)}

p.disclaimer{background:var(--gold-soft);border:1px solid #e7d6a0;border-radius:var(--radius);padding:14px 18px}
p.disclaimer-compact{padding:10px 14px;font-size:14.5px;margin:0}

/* Artikel CTA-blok boven de vouw */
.lede-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 6px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}

/* Uitgever-logo's (alleen officiële perskit-bestanden, zie build.mjs ISSUER_LOGOS) */
/* Let op: altijd max-width + max-height combineren (nooit vaste height met max-width),
   zodat logo's met verschillende beeldverhoudingen nooit vervormen. */
.issuer-logo{display:block;margin:2px 0 10px}
.issuer-logo img{display:block;width:auto;height:auto;max-width:160px;max-height:30px;object-fit:contain}
.issuer-logo.hero-logo{margin:12px 0 0}
.issuer-logo.hero-logo img{max-width:220px;max-height:68px}
.issuer-logo.small{display:inline-block;vertical-align:middle;margin:0 10px 0 0}
.issuer-logo.small img{max-width:120px;max-height:24px}
/* Gedeeld logo-kader (.issuer-logo-frame): toont een uitsnede van de officiële asset in de
   presentatielaag, zodat de asset byte-identiek aan het perskit-origineel blijft.
   bunq: kader = artwork + 1b (240u) witruimte per zijde (1b=240u-afleiding: zie build.mjs
   en docs/bunq-branding/ASSET.md). Waar de SVG onvoldoende whitespace heeft (links/rechts
   max. 198u), vult eigen witte CSS-padding (--crop-padx) aan tot 240u.
   Maten: listing 131×77 (artwork 90px, clearspace 20.7px/zijde), hero 158×93 (artwork 108px,
   clearspace 24.8px/zijde). NIBC (.nibc-frame): zelfde kader-afmetingen en uitlijning,
   artwork gecentreerd op vergelijkbare optische schaal (90px bij listing); padding is een
   eigen presentatiekeuze, het NIBC-bestand is ongewijzigd. */
.issuer-logo-frame{position:relative;display:inline-block;overflow:hidden;vertical-align:middle;
  background:#fff;box-sizing:border-box;
  height:var(--logo-h,77px);
  width:calc(var(--logo-h,77px) * (var(--crop-w,1440) + 2 * var(--crop-padx,0)) / var(--crop-h,898));
  padding:0 calc(var(--logo-h,77px) * var(--crop-padx,0) / var(--crop-h,898))}
.issuer-logo-frame.small{--logo-h:77px}
.issuer-logo-frame.hero-logo{--logo-h:93px;display:block}
.issuer-logo.issuer-logo-frame > img{position:absolute;display:block;max-width:none;max-height:none;
  width:calc(var(--logo-h,77px) * var(--crop-vw,1440) / var(--crop-h,898));
  height:calc(var(--logo-h,77px) * var(--crop-vh,1440) / var(--crop-h,898));
  left:calc(var(--logo-h,77px) * var(--crop-padx,0) / var(--crop-h,898));
  top:calc(var(--logo-h,77px) * var(--crop-y,271) / var(--crop-h,898) * -1)}
.issuer-logo-frame.nibc-frame > img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--logo-h,77px) * 120 / 77);height:auto;max-width:92%;max-height:80%}
/* NIBC: brede, lage artwork (6.27:1) — compacter kader zonder loze verticale
   ruimte; logo substantieel en leesbaar, uitgelijnd met identiteit. */
.issuer-logo-frame.nibc-frame{height:calc(var(--logo-h,77px) * 0.55)}
/* Uniforme ZICHTBARE merken (eigenaar 2026-10-07, ChatGPT pixel-audit):
   bunq-artwork gemeten 1044×418u in 1440×898-crop; NIBC 3089×493 (6.266:1)
   rand-tot-rand. Doel: gelijke zichtbare merkhoogte (~20px desktop / ~16px
   mobiel, de credit-woordmerkschaal) — bunq iets terug, NIBC omhoog.
   Asset bytes onaangeroerd; aspect ratio behouden; geen clipping/stretch. */
/* Identity-slots (listing-band + detail-hero): NIBC zichtbaar = bunq zichtbaar. */
.crow-identity .crow-visual .issuer-logo-frame.nibc-frame,
.detail-identity .detail-visual .issuer-logo-frame.nibc-frame{
  width:calc(var(--logo-slot-h) * 3.07);height:calc(var(--logo-slot-h) * 0.59)}
.crow-identity .crow-visual .issuer-logo-frame.nibc-frame > img,
.detail-identity .detail-visual .issuer-logo-frame.nibc-frame > img{
  width:calc(var(--logo-slot-h) * 2.85);max-width:none;max-height:none}
/* Spaar-listing (.sav-card .crow-visual): beide merken ~20px zichtbaar.
   bunq via strakkere --logo-h; NIBC via expliciete geometrie. */
.sav-card .crow-visual .issuer-logo-frame{--logo-h:44px}
.sav-card .crow-visual .issuer-logo-frame.nibc-frame{width:136px;max-width:136px;height:28px}
.sav-card .crow-visual .issuer-logo-frame.nibc-frame > img{width:128px;max-width:none;max-height:none}
/* Detail-identiteit (creditcard/spaar/hypotheek/leendetail): het logo-kader
   gebruikt ALTIJD zijn eigen berekende kaderbreedte (artwork + clearspace).
   De compacte-kaartregel `.crow-visual .issuer-logo-frame{width:100%}` (hierboven,
   specificiteit 0,2,0) mag hier nooit winnen: op mobiel klapt het kader daardoor
   in tot alleen de eigen padding (~4px — logo effectief onzichtbaar) en op
   desktop snijdt max-width:110px het bunq-woordmerk af ("bun..."). Deze regel
   (0,3,0) wint van beide. De asset zelf blijft byte-identiek (PR #54).
   --logo-h komt uit het uniforme logo-slot (44px desktop / 36px mobiel). */
.detail-identity .crow-visual .issuer-logo-frame{--logo-h:var(--logo-slot-h);width:calc(var(--logo-h,77px) * (var(--crop-w,1440) + 2 * var(--crop-padx,0)) / var(--crop-h,898));max-width:none}
/* Spaarrekening-rij: dedicated logo-area links van productnaam (consistent uitgelijnd) */
.srow-id{display:flex;align-items:center;gap:12px;min-width:0}
.srow-id .issuer-logo{margin:0;flex:none}
.srow-id-text{min-width:0}
/* Product-link met logo op keuze-/gids-pagina's */
.pick-link{display:flex;align-items:center;gap:10px}
.pick-link .issuer-logo{margin:0;flex:none}

/* Alternatieven-tabel op leningpagina's: actiecel nooit afbreken */
.alt-table th:last-child,.alt-table td:last-child{white-space:nowrap;text-align:right}


/* Catalogue-driven brand filter: wrapping buttons, with a clear selected state. */
@media (min-width:761px){.guide-cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hub-hero-compact{padding-bottom:24px}
.hub-hero-compact h1{font-size:52px;margin:0 0 10px;line-height:1.1}
.hub-hero-compact .lede{font-size:17px;margin:0 0 12px;max-width:640px}
.hub-hero-compact .verified{margin-top:0}
#alle-kaarten{padding-top:28px}
#alle-kaarten > h2{font-size:1.5rem;margin:0 0 10px}
@media (max-width:760px){
  .hub-hero-compact h1{font-size:34px}
  .hub-hero-compact{padding-bottom:20px}
  #alle-kaarten{padding-top:24px}
}
.brand-filter{margin:16px 0 20px}
/* (Merkrij-layout staat op .brand-buttons hieronder — L4, nooit wrappen.) */
.brand-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:8px 14px;border:1px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);font:600 .9375rem/1.3 var(--ui);cursor:pointer;text-align:left}
.brand-button span{font-size:.875rem;font-weight:400}
.brand-button[aria-pressed="true"]{background:var(--ink);color:#fff}
.brand-button:hover{box-shadow:0 0 0 1px var(--ink)}
.brand-button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* ============ Vergelijkingslayout L1–L4 (eigenaar 2026-10-07) ============ */
/* L1 — Gecentreerde vergelijkingscontainer: max-w-5xl (64rem), auto-marges,
   16px zijpadding mobiel / 32px desktop. */
.wrap.wrap-compare{max-width:64rem;width:100%;min-width:0;margin-inline:auto;padding-inline:16px;box-sizing:border-box}
@media(min-width:761px){.wrap.wrap-compare{padding-inline:32px}}
/* L2 — Strakke headergroep: breadcrumbs, H1, acties, verificatiecheck en
   leenwaarschuwing in één flex-col met 12–16px gaps. Teksten behouden. */
.cc-guide-head{display:flex;flex-direction:column;gap:14px;padding-top:16px}
.cc-guide-head .kicker{margin:0}
/* L3 — Doel-preset-pillen: tactiel, rounded-full, 44px-hit, Lucide-iconen.
   Actief: zacht NUXO-groen; inactief: subtiel grijs met hover-schaduw. */
.qf-buttons{display:flex;gap:8px;flex-wrap:wrap}
.qf-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  border-radius:999px;padding:8px 20px;
  font-family:var(--ui);font-size:14px;font-weight:500;line-height:1.3;color:var(--ink);
  background:#f4f2ec;border:1px solid var(--line);cursor:pointer;white-space:nowrap}
.qf-pill svg{flex:none;display:block}
.qf-pill:hover{border-color:var(--ink-soft);box-shadow:0 1px 2px rgba(21,32,48,.08)}
.qf-pill[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-dark);border-color:var(--accent)}
.qf-pill:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* L4 — Merkrij wrapt nooit: horizontale scrollrij, chips krimpen niet.
   Scrollbalk verborgen maar swipe/trackpad/toetsenbord blijven werken.
   Horizontale overflow blijft in de rij — de pagina scrollt nooit zijwaarts. */
.brand-filter,.brand-disclosure{min-width:0}
.brand-buttons{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  width:100%;min-width:0;padding:4px 2px;margin:0 -2px}
.brand-buttons::-webkit-scrollbar{display:none}
.brand-buttons .brand-button{flex:none;white-space:nowrap}
/* Compacte afstand tussen filtergroepen — geen reuzenwit. */
.quick-filters{margin:0 0 8px}
.brand-filter{margin:0 0 8px}
.filter-toolbar{margin:0 0 8px}
.brand-intro{margin:8px 0 0;font-size:14px;color:var(--ink-soft)}
/* Toegankelijke tooltip (details/summary) */
.tip{display:inline-block;position:relative;margin-left:2px;vertical-align:baseline}
.tip summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--ink-soft);color:#fff;font-size:11px;font-style:normal;line-height:1}
.tip summary::-webkit-details-marker{display:none}
.tip summary::marker{content:""}
.tip summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tip p{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#f4efe4;padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.4;width:200px;max-width:70vw;z-index:20;margin:0;font-weight:400}
.tip:not([open]) p{display:none}
.hero-price{font-size:20px;margin:8px 0 0}.hero-price b,.hero-price strong{font-family:var(--mono);font-weight:500;font-size:28px;font-variant-numeric:tabular-nums}.hero-price span{color:var(--ink-soft);font-size:16px}
.hero-req{margin:8px 0 0;font-size:14.5px;color:var(--ink-soft)}
.hero-availability{margin:8px 0 0;font-family:var(--ui);font-size:14px;color:var(--ink)}
/* Slice 7 — detailpagina: merk-visual boven de productnaam, uitgever eronder. */
.detail-visual{margin:16px auto 6px;max-width:360px;min-height:64px;justify-content:center}
.detail-visual .brand-word{font-size:18px}
.hero-issuer{font-family:var(--ui);color:var(--ink-soft);margin:6px 0 0;font-size:17px}
.cta-box .cta-secondary{color:#f4efe4;font-family:var(--ui);font-weight:700;text-decoration:none;white-space:nowrap}
.cta-box .cta-secondary:hover{text-decoration:underline}
.voor-wie-list{margin:0;padding-left:20px;display:grid;gap:8px;max-width:640px}
@media(max-width:720px){
  .detail-visual{flex-direction:row;align-items:center;min-height:48px;padding:6px 12px}
  .detail-visual .brand-word{text-align:center;font-size:14px}
}
.verified-line{margin:14px 0 0;font-size:14px;color:var(--ink-soft)}
.verified-line-stale{color:#8a4b00;font-weight:600}
/* Verificatiestatus (eigenaar 2026-10-07): datagedreven uit de bewijsvoering.
   Onderscheidt directe veldbevestiging van bronnen op kaartniveau. */
.verify-qual{margin:8px 0 0;border:1px solid var(--line-soft);border-radius:8px;padding:0 12px;background:var(--bg-soft,#faf9f7)}
.verify-qual summary{font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;min-height:44px;display:flex;align-items:center}
.verify-qual p{font-size:14px;color:var(--ink-soft);margin:4px 0}
.verify-qual ul{margin:6px 0 12px;padding-left:20px;font-size:14px;color:var(--ink-soft)}
.verify-qual li{margin-bottom:6px;overflow-wrap:anywhere}
.verify-qual-note{font-size:13.5px;color:var(--ink-soft);margin:10px 0 0;padding:8px 12px;border-left:3px solid var(--accent-warn,#c9a227);background:var(--bg-soft,#faf9f7);border-radius:0 8px 8px 0}
.source-line{margin:14px 0 0;font-size:14px;color:var(--ink-soft)}
.hero-verify-note{font-size:13.5px;color:var(--ink-soft);margin:10px 0 0}
.hero-verify-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.field-qual{font-size:12px;color:var(--ink-soft);font-style:italic}
.brand-filter[hidden],.brand-intro[hidden]{display:none}

/* Benefit-first drawer; native dialog owns focus trapping and Escape. */
.filter-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:24px 0 12px}
.filter-toolbar[hidden],.filter-clear[hidden],.benefit-note[hidden]{display:none}
.filter-open{min-width:112px;min-height:46px}
.filter-sort{display:flex;align-items:center;gap:10px;margin-left:auto;font:14px var(--ui)}
.filter-sort select,.drawer-fields select{font:16px var(--ui);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px;max-width:100%;min-height:46px}
.filter-clear{font:600 15px var(--ui);color:var(--accent-dark);background:transparent;border:0;text-decoration:underline;cursor:pointer;min-height:44px;padding:8px}
.active-filters{display:flex;flex-wrap:wrap;gap:8px}
.filter-chip{font:14px var(--ui);color:var(--ink);background:var(--gold-soft);border:1px solid var(--line);border-radius:24px;padding:10px 14px;min-height:44px;cursor:pointer;max-width:100%;text-align:left}
.filter-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(480px,100%);max-width:100%;height:100%;height:100dvh;max-height:100%;padding:0;border:0;border-left:1px solid var(--line);background:var(--paper);color:var(--ink);box-shadow:-10px 0 40px #15203033;overflow:hidden}
.filter-drawer:not([open]){display:none}
.filter-drawer[open]{animation:drawer-enter .22s ease-out}
.filter-drawer::backdrop{background:rgba(21,32,48,.55)}
.drawer-shell{display:flex;flex-direction:column;height:100%;min-height:0}
.drawer-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.drawer-header h2{margin:0;font-family:var(--display);font-weight:800;font-size:28px;line-height:1.1;letter-spacing:.01em}
.drawer-close{border:1px solid var(--line);border-radius:50%;width:44px;height:44px;flex-shrink:0;background:#fff;color:var(--ink);font:28px var(--ui);cursor:pointer}
.drawer-content{overflow-y:auto;overscroll-behavior:contain;padding:20px 24px;min-height:0}
.drawer-content p{font-size:17px;line-height:1.4;margin:0 0 16px}
.drawer-content .drawer-brand{font:13px var(--ui);color:var(--accent-dark)}
.drawer-fields{display:grid;gap:16px;margin:12px 0 22px}
.drawer-fields label{display:flex;flex-direction:column;gap:8px;font:600 15px var(--ui)}
.benefit-options{border:0;padding:0;margin:24px 0 16px;min-width:0}
.benefit-options legend{font:700 25px var(--display);margin-bottom:12px}
.benefit-option{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer;font:15px/1.4 var(--ui);min-height:44px}
.benefit-option input{accent-color:var(--accent);width:20px;height:20px;flex:0 0 20px;margin:2px 0}
.benefit-option small{display:block;color:var(--ink-soft);font-size:13px;margin-top:4px}
.benefit-option.unavailable{cursor:default}
.drawer-content .filter-data-note{font:13px/1.5 var(--ui);color:var(--ink-soft);background:var(--gold-soft);padding:14px;border-radius:6px}
.more-filters summary{cursor:pointer;font:600 16px var(--ui);padding:14px 0;min-height:44px}
.drawer-footer{flex-shrink:0;padding:14px 24px max(18px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.drawer-footer p{font:13px/1.4 var(--ui);margin:0 0 10px}
.drawer-footer>div{display:flex;align-items:center;justify-content:space-between;gap:10px}
.drawer-footer .btn{min-height:46px}
.benefit-note{font:14px/1.5 var(--ui);padding:12px 18px;background:var(--gold-soft);margin:0}
.filter-drawer :focus-visible,.filter-toolbar :focus-visible,.filter-chip:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@keyframes drawer-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.filter-drawer[open]{animation:none}}
@media(max-width:500px){.filter-sort{margin-left:0;flex:1 1 100%;flex-wrap:wrap}.filter-sort select{flex:1;min-width:0}.drawer-header,.drawer-content{padding:18px}.drawer-footer{padding:12px 18px max(16px,env(safe-area-inset-bottom))}.drawer-header h2{font-size:25px}}

/* ============ Compacte vergelijkingsrijen (scroll-reductie) ============ */
/* Container .compare.rows schakelt compacte rijen in; .ccard-klasse blijft
   exact behouden zodat filters/sortering/selectie-JS ongewijzigd werkt.
   De .crow-*-kaartcomponent wordt uitsluitend gestyled door het premium
   kaartsysteem hierboven — dit blok bevat géén .crow-*-overrides meer
   (opgeschoond 2026-10-07: dode .crow-id/.crow-facts/.dt-*/.cta-* en
   conflicterende .crow-name 19px / .crow-actions flex-end verwijderd). */
.compare.rows{gap:12px}
.compare.rows .ccard{padding:var(--sp4) var(--sp5)}
.topkeuze-badge{display:inline-block;vertical-align:middle;font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a5b12;background:var(--gold-soft);border:1px solid #e7d6a0;border-radius:999px;padding:3px 10px;margin-left:8px;white-space:nowrap}
/* Redactionele keuzes als beknopte redenlijst met ankers — geen dubbele kaarten. */
.topkeuze-redenen{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.topkeuze-redenen li{font-family:var(--ui);font-size:15.5px;line-height:1.5;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px}
.compare.rows .benefit-note{grid-column:1/-1;margin:0;font-size:14px}

/* ============ Guided creditcard-vergelijking (PR creditcard-guided-20261006) ============ */
/* Compacte instap: korte H1 + 1 zin + 3 acties, daarna behoefte-filters. */
/* Logo-code (.issuer-logo-frame / issuerLogo) blijft onaangeroerd — eigendom PR #54. */
.cc-guide-head{padding-top:18px}
.cc-guide-head h1{font-size:34px;margin:0;letter-spacing:.01em}
.cc-guide-head .lede{font-size:16.5px;line-height:1.45;margin:0 0 10px;max-width:640px}
.cc-guide-head .verified{margin-top:0}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0}
.cc-actions .btn{padding:11px 20px;font-size:15px;white-space:nowrap}
.cc-actions .btn-s{padding:9px 16px;font-size:14px}
.cc-actions .link-quiet{font-family:var(--ui);font-size:13.5px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cc-actions .link-quiet:hover{color:var(--accent)}
/* #alle-kaarten is het sprongdoel van "Bekijk alle kaarten": minder top-padding. */
#alle-kaarten.sec{padding-top:20px}
.quick-filters{margin:0 0 10px}
.quick-filters .qf-label{display:block;font-family:var(--ui);font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin:0 0 6px}
.qf-buttons{display:flex;gap:8px;flex-wrap:wrap}
/* (Knopstijl staat op .qf-pill hierboven — L3.) */
/* Merkfilter: chips wrappen naar meerdere rijen, geen zijwaarts scrollen. */
/* Merkfilter: ingeklapt achter een disclosure zodat producten op mobiel eerder
   in beeld komen; op desktop standaard open (JS zet open o.b.v. viewport). */
.brand-filter{margin:0 0 10px}
.brand-disclosure summary{cursor:pointer;font-family:var(--ui);font-size:12.5px;font-weight:400;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);padding:10px 0;min-height:44px;display:inline-flex;align-items:center;gap:8px;list-style:none}
.brand-disclosure summary::-webkit-details-marker{display:none}
.brand-disclosure summary::before{content:"›";display:inline-block;transform:rotate(90deg);font-size:14px;transition:transform .15s}
.brand-disclosure:not([open]) summary::before{transform:rotate(0deg)}
.brand-disclosure summary:hover{color:var(--ink)}
.brand-disclosure .brand-buttons{margin:4px 0 0}
/* (Merkrij-layout staat hieronder — L4, nooit wrappen.) */
.brand-filter .brand-button{flex:none;min-height:44px;padding:7px 13px;font-size:13px}
.editorial-why{margin:0 0 14px;max-width:780px}
/* Compacte vier-item meta-rij (eigenaar 2026-10-07, supersedes eerdere
   plaatsing): "Uitgelicht door NUXO" · "Hoe deze 10 zijn gekozen" (inline
   disclosure, initieel dichtgeklapt) · live "10 van 20 kaarten" ·
   "Maximaal 3 kaarten naast elkaar". Typografie 2026-10-07 gecorrigeerd:
   coherente 14px/22px body-sans voor alle vier items (geen 13px condensed
   label naast 16.5px hint). Twee groepen: A = label + Hoe, B = live count +
   vergelijkingshint. Desktop: één rij (groepen display:contents);
   mobiel ≤760px: twee compacte regels. */
.cc-list-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin:14px 0 4px;font-family:var(--ui);font-size:14px;line-height:22px;color:var(--ink-soft)}
.cc-list-head-group{display:contents}
.cc-list-head #cc-list-heading{margin:0;font-family:var(--ui);font-size:14px;line-height:22px;font-weight:700;color:var(--ink)}
/* Decoratieve separators als ::before binnen elke groep (niet als spans):
   display:none-elementen tellen wél mee voor :first-child, dus wanneer de
   Hoe-disclosure verborgen is (filter/alles-modus, via het hidden-attribuut
   in compare.js) blijft exact één separator tussen de zichtbare items staan
   — nooit "· ·". Open disclosure: geen separator. Op desktop krijgt de count
   een grens-separator vóór zich, zodat alle vier items één rij vormen. */
.cc-list-head-group > :not(:first-child):not([open])::before{content:"·";margin-right:10px;color:var(--ink-soft);opacity:.55}
.cc-list-head-group-b > .result-count::before{content:"·";margin-right:10px;color:var(--ink-soft);opacity:.55}
.cc-list-head .result-count{margin:0;font-size:14px;line-height:22px;font-weight:600;color:var(--ink-soft)}
/* Expliciete override van de geërfde .hint 16.5px: deze hint hoort bij de
   compacte secundaire rij, niet bij body-paragraafschaal. */
.cc-list-head .hint{margin:0;font-size:14px;line-height:22px;color:var(--ink-soft)}
/* Hoe-disclosure als rij-item: 44px-hit-area binnen de eigen rij-padding
   (niet over andere controls); open = volle breedte onder de rij. Wint van
   de generieke .editorial-why summary-regel (0,1,1) via (0,2,1). */
.cc-list-head .cc-how{margin:0}
.cc-list-head .cc-how summary{display:inline-flex;align-items:center;min-height:44px;
  margin:0;padding:0;cursor:pointer;font-family:var(--ui);font-size:14px;line-height:22px;font-weight:600;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px}
.cc-list-head .cc-how summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.cc-list-head .cc-how[open]{flex-basis:100%}
.cc-list-head .cc-how > div{font-size:14px;line-height:1.55;max-width:780px}
@media (max-width:760px){
  .cc-list-head{flex-direction:column;align-items:flex-start;gap:2px;margin:10px 0 4px}
  .cc-list-head-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
  .cc-list-head-group-b > .result-count::before{content:none}
  .cc-list-head-group > :not(:first-child):not([open])::before{margin-right:8px}
}
.editorial-why summary{cursor:pointer;font-weight:600;font-size:15.5px;padding:6px 0;color:var(--ink-soft);min-height:44px;display:flex;align-items:center}
.editorial-why ul{margin:8px 0;padding-left:20px}
.editorial-why li{margin:6px 0;font-size:15px}
.hl-note{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--ink)}
.hl-note b{color:var(--ink)}
.hl-note .hl-caveat{color:var(--ink-soft)}
/* Sterkte als groene pil (eigenaar 2026-10-10): valt direct op bij het scannen. */
.hl-note.sterk{display:inline-block;background:#e7f4ec;border:1px solid #bfe3c9;color:#146c43;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:600;line-height:1.5;margin:4px 0 0}
.hl-note.sterk b{color:#146c43}
/* Benefit-pillen op kaarten: alleen bevestigde voordelen (max 3 sterkste). */
/* (Listing-creditcards gebruiken sinds 2026-10-07 de why+bullets-hiërarchie
   hieronder i.p.v. pillen; pillen blijven voor hypotheek/sparen.) */
.crow-pills{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
/* Midnight-hertokenisatie (PR D, sitewide NW-pass 2026-11-01): de oude
   groene pil (#eef4ef/#2c5f2d/#d3e2d4) was het laatste pre-Midnight-element.
   Nu de accentrollen van de skin: accent-soft vlak, accent-tekst, lichte
   accent-rand (#c9d6e4). Geldt voor alle .pill-dragers (o.a. NL-DGS op
   spaar­kaarten en in de spaar-detailhero, NHG-pil op hypotheekdetail). */
.pill{display:inline-block;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.02em;background:var(--accent-soft);color:var(--accent);border:1px solid #c9d6e4;border-radius:999px;padding:4px 11px;max-width:100%;overflow-wrap:anywhere}
/* Lange voordeel-/actievoorwaarden wikkelen IN de kaart — nooit afknippen (geen nowrap). */
/* Neutrale pil voor beperkte dekking: geen groen voordeel-signaal. */
.pill-neutral{background:#f4f2ec;color:var(--ink-soft);border-color:var(--line)}
/* Amber pil voor actierente: tijdelijk, nooit als permanente rente lezen. */
.pill-promo{background:#fbf2d9;color:#8a5a12;border-color:#e7d6a0}
/* Consumer-appeal hiërarchie (eigenaar 2026-10-07): benefit-first.
   Why-regel direct onder de identiteit — feitelijk, prominent, geen hype.
   Bullets met vinkje als duidelijk affordance; max 3 voordelen totaal. */
/* Benefit-rijen met officiele Lucide-pictogrammen (eigenaar 2026-10-07):
   icoon-geleid, decoratief (aria-hidden in markup). Alleen feitelijke,
   geverifieerde voordelen; neutrale orientatie zonder icoon. */
.crow-why{margin:0;font-family:var(--ui);font-size:16px;font-weight:700;line-height:1.45;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.crow-why .bicon{flex:none;width:20px;height:20px;color:var(--accent);margin-top:2px}
.crow-why-neutral .bicon{display:none}
.crow-benefits{margin:6px 0 0;padding:8px 10px;list-style:none;display:flex;flex-direction:column;gap:6px;background:var(--paper-tint);border-radius:var(--radius-s)}
.crow-benefits li{position:relative;margin:0;padding:0;font-family:var(--ui);font-size:14px;line-height:1.5;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.crow-benefits li::before{content:none}
.crow-benefits li .bicon{flex:none;width:18px;height:18px;color:var(--accent);margin-top:2px}
/* Smart Benefits 2026-10-08: origineel NUXO-productpresentatie.
   De kaart toont maximaal 3 geverifieerde claims; de echte prijs en
   de belangrijkste voorwaarden blijven er direct naast zichtbaar. */
.ccard-credit .crow-value{min-width:0;display:grid;gap:10px}
.ccard-credit .crow-value-label{margin:0;font:700 11px/1.3 var(--ui);letter-spacing:.095em;text-transform:uppercase;color:var(--ink-soft)}
/* Alle geverifieerde voordelen in één kader, zonder een aparte winnaar. */
.ccard-credit .crow-benefits-box{min-width:0;background:var(--paper-tint);border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden}
.ccard-credit .crow-why,.ccard-credit .crow-benefits li{margin:0;padding:12px 14px;font-family:var(--ui);font-size:15px;font-weight:500;line-height:1.5;color:var(--ink);display:flex;gap:12px;align-items:flex-start;overflow-wrap:anywhere;min-width:0;background:transparent;border:0;border-radius:0}
.ccard-credit .crow-why .bicon,.ccard-credit .crow-benefits li .bicon{width:20px;height:20px;flex:none;margin-top:1px;color:var(--accent)}
.ccard-credit .crow-benefits{margin:0;padding:0;gap:0;background:transparent;border-radius:0}
.ccard-credit .crow-benefits li{border-top:1px solid var(--line)}
.ccard-credit .crow-why-neutral{font-weight:500}
@media(min-width:1180px){
  .ccard-credit,.ccard-credit.no-visual{grid-template-columns:minmax(0,1fr) 270px;grid-template-areas:"band band" "main side";align-items:stretch;gap:18px 24px}
  .ccard-credit .crow-side-credit{display:flex;flex-direction:column;gap:10px}
  .ccard-credit .crow-main{padding-top:4px}
}
@media(max-width:760px){
  .ccard-credit .crow-value{gap:8px}
  .ccard-credit .crow-why,.ccard-credit .crow-benefits li{font-size:14px;padding:11px 12px}
}
/* Spaar-legenda boven de filters. */
.rate-legend{font-family:var(--ui);font-size:13px;color:var(--ink-soft);margin:0 0 12px}
/* Hero-statusregel (bv. adviseurs: geen profielen) — eerlijk bij de hero. */
.hero-status{font-family:var(--ui);font-size:15px;line-height:1.5;color:var(--ink);background:var(--paper-tint);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:12px 0;max-width:640px}
/* Detail-hero: actierente en DGS. */
.hero-promo{margin:8px 0 0}
/* Hero-kwalificatie: disclosure onder de korte intro, nooit afknippen. */
.hero-qual{margin:2px 0 10px;font-family:var(--ui);font-size:14px;color:var(--ink-soft)}
.hero-qual summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.hero-qual p{margin:8px 0 0;max-width:640px}
/* Redactionele keuze-uitleg achter disclosure (44px summary, toegankelijk) */
.topkeuze-waarom{margin:12px 0}
.topkeuze-waarom summary{cursor:pointer;font-weight:600;min-height:44px;display:inline-flex;align-items:center;color:var(--accent)}
.hero-dgs{margin:12px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-dgs-note{font-family:var(--ui);font-size:13.5px;color:var(--ink-soft)}
/* Leningkaart: bedrag/looptijd-regel en AFM-waarschuwing. */
.loan-range{margin:0;font-family:var(--ui);font-size:14px;color:var(--ink-soft)}
.loan-risk{margin:6px 0 0;font-family:var(--ui);font-size:13px;color:var(--ink)}
.loan-risk b{color:var(--ink)}
.cc-risk{margin:10px 0 0;font-family:var(--ui);font-size:13.5px;color:var(--ink)}
.cc-risk b{color:var(--ink)}
.cc-risk-hub{margin:0 0 4px}
/* L2-fix (eigenaar 2026-10-07): waarschuwing ín .cc-guide-head — de flex-gap
   (14px) regelt de afstand; geen dubbele marge. */
.cc-guide-head .cc-risk-hub{margin:0}
#cc-reveal-wrap{margin:18px 0 0;text-align:center}
#cc-reveal-wrap .btn{padding:12px 26px;font-size:15.5px}
.cmp-bar{max-width:min(720px,calc(100vw - 32px))}
@media(max-width:760px){
  .cc-guide-head{padding-top:12px}
  .cc-guide-head h1{font-size:27px}
  .cc-guide-head .lede{font-size:15px}
  .cc-actions{gap:8px}
  .cc-actions .btn{padding:9px 16px;font-size:14px}
  /* (Oude qf-buttons-knopregel verwijderd — L3-stijl staat op .qf-pill.) */
  .cmp-bar{left:12px;right:12px;transform:none;max-width:none;justify-content:center;text-align:center}
}
@media(max-width:400px){
  .cc-guide-head{padding-top:8px}
  .cc-guide-head .verified{font-size:12px;padding:7px 13px}
  .cc-actions .btn{padding:8px 14px;font-size:13px}
  #alle-kaarten.sec{padding-top:12px}
}

/* ============ Gids-TOC ("Op deze pagina") ============ */
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:20px 0;max-width:720px}
.toc p{margin:0 0 8px;font-size:15px}
.toc ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px}
.toc li{margin:0}
.toc a{font-family:var(--ui);font-size:13.5px;color:var(--accent);text-decoration:none}
.toc a:hover{text-decoration:underline}
/* TOC-tap-targets >=44px zolang de TOC een disclosure is (<1000px; PR #136-polish).
   De desktop-zijbalk (>=1000px, muisbediening) blijft ongewijzigd. */
@media(max-width:999px){.toc a{display:inline-flex;align-items:center;min-height:44px;padding:8px 2px}}
/* Gestapelde feitentabellen (2 kolommen) in gidsen: geen min-width 680px, anders
   schuift de tabel op desktop ~11px intern horizontaal in de smallere prose-kolom.
   Alleen stack-mobile in gids/prose-context; brede vergelijkingstabellen ongewijzigd. */
/* Alleen twe-koloms gestapelde tabellen (zoals de SNS-kostentabel): bredere
   stack-mobile-tabellen (3-4 kolommen, bv. Amex-gids en inkomensgids) houden
   hun 680px-interne scroll — hotfix-scoping na de ideeraad-bevinding. */
.guide-layout .table-wrap .fact-table.stack-mobile:has(>thead>tr>th:nth-child(2):last-child),.prose .table-wrap .fact-table.stack-mobile:has(>thead>tr>th:nth-child(2):last-child){min-width:0}
/* Inhoudsopgave als disclosure (mobiel compact, desktop sidebar). */
.toc-disclosure summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
.toc-disclosure summary::-webkit-details-marker{display:none}
.toc-disclosure summary::before{content:'+';font-weight:700;color:var(--accent);font-size:18px}
.toc-disclosure[open] summary::before{content:'−'}
.toc-count{font-size:13px;color:var(--ink-soft);font-weight:400}
@media(min-width:1000px){
  /* Desktop: inhoudsopgave als sidebar — in normal flow, sticky zonder float
     (float + sticky conflicteert; float wint en sticky werkt niet). */
  .toc{position:sticky;top:20px;width:280px;max-width:280px;margin:0 0 20px auto}
  .toc-disclosure summary{display:none}
  .toc-disclosure ul{display:flex !important}
}
h2[id]{scroll-margin-top:16px}
/* Gids-artikel + inhoudsopgave (eigenaar 2026-10-07, FIX 3): echte twee-
   koloms-layout op desktop — artikel links, sticky TOC-sidebar rechts
   (geen float/clear die de tekst onder de navigatie duwt). Mobiel: pure
   DOM-volgorde — hero → kort antwoord → gesloten TOC-disclosure → rest. */
.guide-layout{display:flex;flex-direction:column;min-width:0}
.guide-answer,.guide-rest{min-width:0}
.guide-answer .lede-cta{margin-top:2px}
@media(min-width:1000px){
  .guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:0 40px;align-items:start;margin-top:8px}
  .guide-answer{grid-column:1;grid-row:1}
  .guide-layout .toc{grid-column:2;grid-row:1/span 2;position:sticky;top:20px;width:auto;max-width:none;margin:0}
  .guide-rest{grid-column:1;grid-row:2}
}
@media(max-width:760px){
  /* Gidshero compacter: kort antwoord en actie sneller in beeld. */
  .guide-hero{padding-top:24px;padding-bottom:16px}
}

/* ============ Slanke hub-start (routelinks i.p.v. kaarten) ============ */
.hub-start-slim{display:flex;gap:10px;flex-wrap:wrap;padding:0 0 8px}
.hub-start-link{flex:1 1 220px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-decoration:none;color:var(--ink);display:block}
.hub-start-link:hover{border-color:var(--accent)}
.hub-start-link .kicker{display:block;font-size:11.5px;margin-bottom:4px}
.hub-start-link b{font-size:16.5px}

/* ============ Compacte homepage-taken ============ */
.tasks-compact{padding:28px 0 4px}
/* QA 2026-10-07 (eigenaar): bewuste grotere categoriecompositie — geen icoontegels.
   Elke kaart: grote illustratie, echte aantallen, waardepropositie en actie. */
.cat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:24px}
.cat-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 18px 20px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.cat-card:hover{border-color:var(--accent);box-shadow:var(--shadow-m)}
.cat-ill{display:block;margin:0 0 16px}
.cat-ill svg{width:72px;height:72px;display:block}
.cat-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cat-body b{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:.01em}
.cat-count{font-family:var(--ui);font-size:13px;color:var(--ink-soft)}
.cat-value{font-family:var(--ui);font-size:14.5px;line-height:1.45;color:var(--ink-soft);margin-top:4px}
.cat-go{font-family:var(--ui);font-size:14.5px;font-weight:700;color:var(--accent);margin-top:10px}
.cat-card:hover .cat-go{text-decoration:underline}
@media(max-width:1100px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Mobiel: vijf echte knoprijen (icoon · naam + aantal · pijl), 64px+ hoog, allemaal in het eerste scherm. */
@media(max-width:760px){
  .cat-grid{grid-template-columns:1fr;gap:8px}
  .cat-card{flex-direction:row;align-items:center;gap:14px;padding:10px 14px;min-height:64px;border-radius:14px;position:relative}
  .cat-ill{margin:0;flex:none}
  .cat-ill svg{width:44px;height:44px}
  .cat-body{flex:1}
  .cat-body b{font-size:19px;line-height:1.15}
  .cat-count{font-size:13px;margin:0}
  .cat-value{display:none}
  .cat-go{margin:0;font-size:0;position:absolute;right:16px;top:50%;transform:translateY(-50%)}
  .cat-go::after{content:"\203A";font-size:28px;line-height:1;font-weight:700}
  .cat-body{padding-right:24px}
}
/* Homepage hero: originele compositie als visueel anker naast de propositie. */
.home-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;margin-bottom:22px}
.home-hero-copy{min-width:0}
.home-hero-art{border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-tint)}
.home-hero-art svg,.home-hero-art img{width:100%;height:100%;display:block}
.home-hero-art img{object-fit:cover}
@media(max-width:760px){
  /* Mobiel: compacte onderwerpkeuze zonder decoratieve hero-afbeelding. */
  .home-hero{display:flex;flex-direction:column}
  .home-hero-grid{display:contents}
  .home-hero-copy{order:0}
  .home-hero .cat-grid{order:1;margin-top:18px}
  .home-hero .home-cta-row{order:2;margin:14px 0 4px}
  .home-hero-art{display:none}
}
/* Vergelijken: compacte hero — één zin + herkomst, methodiek achter disclosure. */
.cmp-hero-compact{padding-top:24px;padding-bottom:8px}
.cmp-hero-compact h1{font-size:clamp(34px,5vw,54px);margin:0 0 8px;line-height:1}
.cmp-hero-compact .lede{font-size:17px;margin:0 0 10px;max-width:660px}
.cmp-provenance{margin:0 0 6px}
.cmp-provenance .verified{margin-top:0}
.hero-method{max-width:660px;margin:2px 0 0}
.hero-method summary{cursor:pointer;font-family:var(--ui);font-weight:700;font-size:14.5px;color:var(--accent);min-height:44px;display:inline-flex;align-items:center;list-style:none}
.hero-method summary::-webkit-details-marker{display:none}
.hero-method summary::before{content:"+";margin-right:8px;font-weight:800}
.hero-method[open] summary::before{content:"–"}
.hero-method .prose{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.hero-method .prose p{margin:8px 0}
/* Slice 8 — waardepropositie + CTA-rij onder de H1; echte aantallen op de tegels. */
.home-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0 22px}
/* Slice 8 — compact vertrouwensblok (bestaande claims, geen muur tekst). */
.trust{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.trust-list{margin:0 0 12px;padding-left:20px;display:grid;gap:8px;max-width:640px}
.trust p{margin:0}
.sec-lede{font-size:18px;color:var(--ink-soft);max-width:640px;margin:0 0 6px}
.verified-inline{font-family:var(--ui);font-size:13px;color:var(--accent-dark);white-space:nowrap}
.home-preview{padding-top:32px}
/* QA 2026-10-07: uitgelichte band krijgt eigen visueel gewicht (geen kale sectie). */
.home-band{background:var(--paper-tint);border:1px solid var(--line-soft);border-radius:20px;padding:36px 32px;margin-top:12px}
.home-band .kicker{margin-bottom:6px}
@media(max-width:760px){.home-band{padding:24px 18px;border-radius:16px}.home-preview .compare.rows>:nth-child(n+4):not(.ad-slot){display:none}}
.home-all-link{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}

/* ============ Spacing-tokens (doel: 40–48px / 24–32px secties) ============ */
.sec{padding:44px 0}

/* ============ Mobiel: bottom-sheet dialog + rij-samenvattingen ============ */
@media (max-width:760px){
  .sec{padding:28px 0}
  .filter-toolbar{flex-wrap:nowrap;gap:10px;margin:16px 0 10px}
  .filter-toolbar .btn{padding:8px 14px;font-size:14px;white-space:nowrap;flex:none}
  .filter-sort{font-size:14px;display:flex;align-items:center;gap:8px;white-space:nowrap}
  .filter-sort select{font-size:14px;padding:6px 8px;max-width:150px}
  .brand-button{min-height:38px;padding:7px 12px;font-size:.875rem}
  .hub-start-slim{flex-direction:column;gap:8px}
  .hub-start-slim .hub-start-link{flex:none;padding:8px 12px}
  .hub-start-slim .hub-start-link b{font-size:14.5px}
  .hub-start-slim .kicker{font-size:10.5px}
  .guide-card{padding:16px}
  .guide-card h3{font-size:20px;margin-bottom:6px}
  .guide-card p{font-size:14.5px}
  .compare.rows{gap:12px}
  .compare.rows .ccard{padding:var(--sp3) var(--sp4)}
  /* (verouderde .crow-* overrides verwijderd 2026-10-07: .crow-name 18px en
     .crow-actions flex-start conflicteerden met het beoogde mobiele kaartontwerp
     (21px / space-between); .crow-facts/.dt-*/.cta-* klassen bestaan niet meer.) */
  .crow-actions .cmp-pick{flex:none}
  .crow-actions .link-arrow{flex:none;font-size:13px;white-space:nowrap}
  .crow-actions .btn-s{flex:1 1 auto;text-align:center;padding:10px 14px;white-space:nowrap}
  /* (verouderde .cta-full/.cta-short klassen verwijderd 2026-10-07: bestaan niet meer.) */
  .hub-start-slim{flex-direction:column;gap:8px}
  .hub-start-slim .hub-start-link{flex:none;padding:10px 14px}
  .hub-start-slim .hub-start-link b{font-size:15.5px}
  /* Filterdialog als bottom sheet: met één duim te bedienen */
  .filter-drawer{top:auto;left:0;right:0;bottom:0;width:100%;height:auto;max-height:94dvh;border:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0}
  .drawer-shell{height:auto;max-height:94dvh}
  .filter-drawer[open]{animation:drawer-up .22s ease-out}
}
@keyframes drawer-up{from{transform:translateY(48px);opacity:.5}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .filter-drawer[open]{animation:none}
  .filter-drawer{scroll-behavior:auto}
}

/* ============ Redesign 2026-10-07: card + imagery → listing → compare ============ */

/* --- Phase B: originele categorie-illustraties (alleen tegels/headers, nooit productkaarten) --- */
.hub-hero-ill{display:flex;align-items:center;justify-content:space-between;gap:28px}
.hub-hero-copy{min-width:0;flex:1}
.hub-ill{flex:none;margin:0}
.hub-ill svg{width:128px;height:128px;display:block}
@media(max-width:760px){
  /* Mobiele hub-hero: illustratie staat compact rechts naast kicker+H1
     (geen eigen rij van ~150px); lede en rest krijgen volle breedte via
     display:contents — tekst wrapt niet in een smalle kolom. */
  .hub-hero-ill{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start}
  .hub-hero-copy{display:contents}
  .hub-hero-copy .kicker{grid-column:1}
  .hub-hero-copy h1{grid-column:1}
  .hub-hero-copy .lede{grid-column:1/-1}
  .hub-hero-copy .hero-qual{grid-column:1/-1}
  .hub-hero-copy .verified{grid-column:1/-1}
  .hub-hero-copy .hero-status{grid-column:1/-1}
  .hub-hero-copy .hero-actions{grid-column:1/-1}
  .hub-ill{grid-column:2;grid-row:1/3;margin:2px 0 0;align-self:start}
  .hub-ill svg{width:56px;height:56px}
  .hub-hero{padding-top:8px;padding-bottom:8px}
  .hub-hero h1{font-size:28px;line-height:1.05;margin:6px 0 8px}
  .hub-hero .lede{margin-bottom:6px;font-size:15px;line-height:1.45}
  .hub-hero .verified{font-size:12px;margin-top:4px}
  .hub-hero .hero-qual{margin:6px 0}
  .hub-start{margin-top:0}
  .crow-price strong{font-size:22px}
  .crow-period{font-size:13px;margin-left:6px}
  .crow-note{font-size:13px;margin-left:6px}
}

/* --- Phase E: compacte listing-instap — producten eerder op mobiel --- */
@media(max-width:760px){
  .cc-guide-head{padding-top:10px}
  #alle-kaarten{padding-top:16px}
  .filter-toolbar{margin:12px 0 8px}
  .quick-filters{margin:0 0 8px}
  .brand-filter{margin:0 0 8px}
  .result-count{margin:10px 0 0}
  .hint{margin:10px 0 0}
  #alle-kaarten > h2{margin:8px 0;font-size:1.375rem}
  .editorial-why{margin:0 0 10px}
}

/* --- Phase F: compare --- */
/* Zichtbare containerselectie voor gekozen kaarten. */
.ccard.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--shadow-m)}
.ccard.is-selected .cmp-pick{color:var(--accent-dark);font-weight:700}
/* Mobiele tray: één compacte rij (teller + Vergelijk + Wis), 44px targets. */
@media(max-width:760px){
  .cmp-bar{flex-wrap:nowrap;gap:8px;padding:8px 10px;left:12px;right:12px;transform:none;max-width:none;justify-content:flex-start;text-align:left}
  .cmp-bar-count{font-size:12.5px;flex:none}
  .cmp-bar .btn{flex:1 1 auto;padding:10px 12px;font-size:13.5px;min-height:44px}
  .cmp-bar-clear{flex:none;min-height:44px;padding:9px 12px}
  .cmp-bar-msg{flex-basis:100%}
}
/* Vergelijkingstabel: scroll-affordance binnen de container. */
.cmp-scroll-hint{font-family:var(--ui);font-size:13.5px;color:var(--ink-soft);margin:10px 0 0}

/* ============ Hub-layoutronde 2026-10-08 (research: 4 audits + 7 concurrenten) ============
   Doel: desktop gebruikt de breedte (brede container, filterrail, kaart met kosten/actie
   naast de voordelen), mobiel toont sneller een echte kaart (compacte kop, één
   scrollrij met doel-pillen, compacte cookiebalk, plakkende filterbalk).
   Visuele taal ongewijzigd (pre-Figma): navy, papier, groen, goud. */

/* --- Kop: lede met onafhankelijkheid + bron, risicoregel blijft zichtbaar --- */
.cc-guide-head{gap:10px}
.cc-lede{margin:0;max-width:760px;font-family:var(--ui);font-size:15px;line-height:1.5;color:var(--ink-soft)}
.cc-lede a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cc-risk-hub{margin:0;font-family:var(--ui);font-size:14px}

/* --- Layout: filterrail + resultaten --- */
.cc-layout{display:block}
.cc-rail{display:contents}
.active-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.active-bar:has(.active-filters:empty):has(.filter-clear[hidden]){display:none}
.filter-toolbar{position:sticky;top:0;z-index:35;background:var(--paper);padding:8px 0;margin:0 0 6px;border-bottom:1px solid var(--line-soft)}
.filter-toolbar[hidden]{display:none}
.filter-sort-label{white-space:nowrap}

/* Merkrij: randverloop zodat het afkappen een bewuste scroll-aanwijzing is. */
.brand-buttons{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}

/* Eén gedeelde containerbreedte + gutter voor masthead, inhoud en footer op de hub:
   de linkerrand valt op elke schermbreedte samen (geen verschuiving tussen logo en kop). */
body:has(.wrap-compare){--hub-max:1080px;--hub-pad:16px}
@media(min-width:761px){body:has(.wrap-compare){--hub-pad:32px}}
@media(min-width:1000px){body:has(.wrap-compare){--hub-max:1240px}}
@media(min-width:1280px){body:has(.wrap-compare){--hub-max:1320px}}
@media(min-width:1760px){body:has(.wrap-compare){--hub-max:1440px}}
body:has(.wrap-compare) .wrap.wrap-compare,
body:has(.wrap-compare) .mast>.wrap,
body:has(.wrap-compare) .foot>.wrap{max-width:var(--hub-max);padding-inline:var(--hub-pad)}
/* Filterrail vanaf 1280 px (daaronder is de resultatenkolom te smal voor drie kaartkolommen). */
@media(min-width:1280px){
  .cc-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:32px;align-items:start}
  .cc-results{min-width:0}
  .cc-rail{display:flex;flex-direction:column;gap:12px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 4px 2px 2px;margin:-2px -4px -2px -2px}
  .cc-rail .quick-filters,.cc-rail .brand-filter,.cc-rail .filter-toolbar{margin:0}
  .cc-rail .filter-toolbar{position:static;flex-direction:column;align-items:stretch;gap:10px;padding:0;border:0;background:none}
  .cc-rail .filter-open{width:100%}
  .cc-rail .filter-sort{margin-left:0;flex-direction:column;align-items:stretch;gap:6px}
  .cc-rail .filter-sort select{width:100%}
  .cc-rail .qf-buttons{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px}
  .cc-rail .qf-pill{justify-content:flex-start;min-height:40px;padding:6px 14px}
  .cc-rail .brand-buttons{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px;overflow:visible;-webkit-mask-image:none;mask-image:none;padding:2px;margin:0}
  .cc-rail .brand-button{min-height:38px;justify-content:space-between;padding:6px 12px}
  .cc-rail .active-bar{margin:0}
  .cc-list-head{margin-top:0}
}
@media(min-width:1760px){
  .cc-layout{grid-template-columns:280px minmax(0,1fr)}
}

/* --- Mobiel: eerder een echte kaart in beeld --- */
@media(max-width:760px){
  .cc-guide-head{gap:8px;padding-top:6px}
  .cc-guide-head h1{font-size:30px;line-height:1.05}
  .cc-lede{font-size:13.5px;line-height:1.45}
  .cc-actions{gap:8px}
  /* Hub-pariteit (PR D, sitewide NW-pass 2026-11-01): de secundaire
     bandactie blijft op mobiel een echte knop, zoals op desktop — de oude
     tekstlink-degradatie gold alleen nog voor de hubbanden (leningen/
     sparen/hypotheken); de creditcardband verbergt de zijne apart via
     body:has(#creditcard-results). De stille link blijft mobiel verborgen. */
  .cc-actions .cc-why-link{display:none}
  .cc-risk-hub{font-size:13.5px}
  /* Doel-pillen: één horizontale scrollrij met randverloop. */
  .qf-buttons{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);margin-right:-16px;padding-right:28px}
  .qf-buttons::-webkit-scrollbar{display:none}
  .qf-pill{flex:none;scroll-snap-align:start}
  .quick-filters .qf-label{margin:0 0 4px}
  /* Filterbalk: Filter + sortering op één rij, plakt onder de bovenrand. */
  .filter-toolbar{flex-wrap:nowrap;gap:8px;margin:0 0 4px;padding:6px 0}
  .filter-open{flex:none;min-width:0;min-height:44px;padding:8px 16px}
  .filter-sort{margin-left:0;flex:1 1 auto;min-width:0;max-width:none;gap:0}
  .filter-sort-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .filter-sort select{width:100%;max-width:none;min-height:44px;padding:6px 26px 6px 10px;font-size:14px;text-overflow:ellipsis}
  .active-bar{margin:0}
  .cc-list-head .hint{display:none}
  /* Kaart: knoppen nooit over twee regels; bron/datum leesbaar. */
  .crow-side-credit .crow-actions{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .crow-side-credit .crow-actions .btn{white-space:nowrap;padding-inline:10px}
  .crow-source{font-size:12.5px}
  .crow-facts{font-size:13px}
}
@media(max-width:380px){
  .cc-guide-head h1{font-size:28px}
  .filter-open{padding:8px 12px}
}


/* --- Verder lezen op situatie (zichtbaar, crawlbaar) --- */
.cc-guide-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:8px 0 4px;padding:14px 0;border-top:1px solid var(--line-soft);font-family:var(--ui);font-size:15px}
.cc-guide-links-label{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.cc-guide-links a{color:var(--accent-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.benefit-option small{display:block}

/* --- Desktop: compacte kop + bredere kosten/actie-kolom (2026-10-08) --- */
@media(min-width:1000px){
  .cc-guide-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title actions" "lede lede" "risk risk";column-gap:24px;row-gap:6px;align-items:center;padding-top:10px}
  .cc-guide-head h1{grid-area:title;font-size:34px}
  .cc-guide-head .cc-actions{grid-area:actions;justify-self:end}
  .cc-guide-head .cc-lede{grid-area:lede;max-width:none}
  .cc-guide-head .cc-risk-hub{grid-area:risk}
  #alle-kaarten.sec{padding-top:14px}
}

@media(max-width:760px){
  .quick-filters{margin-bottom:0}
  .brand-disclosure summary{min-height:40px;padding:4px 0}
  .brand-filter{margin:0 0 2px}
  .cc-list-head{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 8px;margin:4px 0 2px}
  .cc-list-head-group{display:contents}
  .cc-list-head .cc-how summary{margin-block:-6px}
  .cc-list-head-group-b > .result-count::before{content:"·";margin-right:8px;opacity:.55}
}
/* position:sticky (filterbalk) werkt alleen als body/html geen scroll-container zijn:
   overflow-x:clip behoudt de "nooit zijwaarts scrollen"-garantie zonder er een te maken. */
@supports (overflow:clip){
  @media(max-width:760px){html,body{overflow-x:clip}}
}
@media(max-width:760px){
  .crow-side-credit .crow-actions .cta-caption{grid-column:1/-1}
  .ccard-credit .crow-more{margin-top:0;padding-top:0}
  .ccard-credit .crow-more summary{min-height:44px}
}

/* --- Desktop-kaart (≥1000px): drie kolommen — voordelen | kosten | actie — met een
   voet voor details, vergelijken en bron. Vult de breedte, grotere letters, geen
   lege vlakken onder korte tekst. Zelfde DOM en data als mobiel. --- */
@media(min-width:1000px){
  .ccard-credit,.ccard-credit.no-visual{grid-template-columns:minmax(0,1fr) 236px 198px;grid-template-areas:"band band band" "main price actions" "more foot foot";padding:0 22px 0;column-gap:0;row-gap:0;align-items:start}
  .ccard-credit .crow-identity{padding:9px 20px}
  .crow-identity .crow-name{font-size:24px}
  .ccard-credit .crow-main{grid-area:main;padding:20px 28px 16px 0;gap:12px}
  .ccard-credit .crow-side-credit{display:contents}
  .crow-side-credit .crow-priceblock{grid-area:price;align-self:stretch;padding:20px 12px 16px 22px;margin:0;border-left:1px solid var(--line);gap:4px}
  .crow-side-credit .crow-actions{grid-area:actions;padding:20px 0 16px 20px;display:flex;flex-direction:column;gap:6px}
  .crow-side-credit .crow-actions .cta-caption{text-align:center;margin:0}
  .crow-side-credit .crow-foot{grid-area:foot;display:flex;align-items:center;justify-content:flex-end;gap:6px 18px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding:0 0 0 24px;min-height:52px}
  .crow-side-credit .crow-foot .crow-source{text-align:right;margin:0}
  .ccard-credit .crow-more{grid-area:more;margin:0;padding:0 28px 0 0;border-top:1px solid var(--line-soft)}
  .ccard-credit .crow-more summary{min-height:52px;padding:0}
  .ccard-credit .benefit-note{grid-column:1/-1;margin:0 0 12px}
  /* Typografie: groter en rustiger, geschaald voor desktoplezen. */
  .crow-why{font-size:19px;line-height:1.4}
  .crow-benefits li{font-size:15.5px}
  .crow-facts{font-size:15px;gap:6px 22px}
  .hl-note{font-size:15.5px;line-height:1.5}
  .crow-side-credit .crow-price strong{font-size:24px;letter-spacing:-.02em;white-space:nowrap}
  .crow-side-credit .crow-period{font-size:15px}
  .crow-side-credit .crow-price-label{font-size:12px}
  .crow-side-credit .crow-fee-note{font-size:13.5px}
  .cta-apply{font-size:17px}
  .cta-caption,.crow-source{font-size:12.5px}
}
.crow-side-credit .crow-price{column-gap:6px;row-gap:0}
.crow-side-credit .crow-period{margin-left:0}

/* --- Desktop: natuurlijke kaarthoogte (eigenaar 2026-10-08) ------------------
   Laat elke kaart zo hoog zijn als haar eigen inhoud. Geen 1fr-rijen: kortere
   kaarten krijgen niet langer de hoogte van de langste kaart, en de voet staat
   direct onder de feiten, prijs en acties. Bron, CTA en details blijven zichtbaar. */
@media(min-width:1000px){
  .compare.rows{grid-auto-rows:auto}
  .ccard-credit,.ccard-credit.no-visual{grid-template-rows:auto auto auto}
}

/* --- Tablet 761–999 px: voordelen volledig breed, kosten + actie als tweekoloms paneel eronder --- */
@media(min-width:761px) and (max-width:999px){
  .ccard-credit,.ccard-credit.no-visual{grid-template-columns:minmax(0,1fr);grid-template-areas:"band" "main" "side";padding:0 20px 14px;gap:0}
  .ccard-credit .crow-main{padding:16px 0 12px}
  .ccard-credit .crow-side-credit{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:"price actions" "foot foot";gap:8px 24px;align-items:start;padding:14px 16px}
  .crow-side-credit .crow-priceblock{grid-area:price}
  .crow-side-credit .crow-actions{grid-area:actions;display:flex;flex-direction:column;gap:6px}
  .crow-side-credit .crow-actions .cta-caption{text-align:center;margin:0}
  .crow-side-credit .crow-foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;border-top:1px solid rgba(21,32,48,.1);padding-top:4px}
  .crow-side-credit .crow-foot .crow-source{text-align:right}
  .crow-why{font-size:18px}
}
/* --- Laptop 1000–1279 px: kop compacter (label en pillen op één regel) --- */
@media(min-width:1000px) and (max-width:1279px){
  .quick-filters{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
  .quick-filters .qf-label{margin:0}
}
.cc-results{padding-bottom:72px}
/* /creditcards: geen extra witruimte onder "Bekijk alle … creditcards"; de sectie geeft al ruimte tot "Zoek je iets specifieks?" (72px liet ±108–124 px gat als het advertentievlak inklapt). /leningen en /sparen houden 72px. */
#alle-kaarten .cc-results{padding-bottom:0}

/* --- Natuurlijke kaarthoogte: informatie bovenaan, voet direct eronder ----------
   Binnen één kaart starten voordelen, prijs en acties op één lijn. De voet
   volgt direct op de hoogste inhoudskolom en behoudt de klikbare 44px-zone. */
@media(min-width:1000px){
  .ccard-credit .crow-main,.crow-side-credit .crow-priceblock,.crow-side-credit .crow-actions{justify-content:flex-start}
  .ccard-credit .crow-main{align-self:stretch;padding-top:18px;padding-bottom:16px}
  .crow-side-credit .crow-actions{align-self:start}
  /* Voet: Vergelijk links, bron rechts naast elkaar; nooit onder Vergelijk. */
  .crow-side-credit .crow-foot{flex-wrap:nowrap;justify-content:space-between;gap:12px}
  .crow-side-credit .crow-foot .crow-source{flex:1 1 auto;min-width:0;line-height:1.35}
  .cc-guide-head h1{font-size:clamp(28px,3vw,34px)}
}

/* --- Polish uit de reviews --- */
#cc-list-heading{scroll-margin-top:76px}
.tip summary{position:relative}
.tip summary::after{content:"";position:absolute;inset:-14px}
@media(min-width:1280px){
  .cc-rail{max-height:calc(100vh - 32px - var(--consent-h,0px))}
}

/* --- Ronde 3: uniforme kopband en voet (≥1000px) --- */
@media(min-width:1000px){
  .ccard-credit .crow-identity{min-height:90px;box-sizing:border-box}
  .crow-side-credit .crow-foot{min-height:56px}
  .crow-side-credit .crow-foot .crow-source{flex:0 1 190px;max-width:190px;text-align:right}
  .crow-side-credit .crow-amount{word-spacing:-.12em}
}

/* --- Na samenvoegen met de "Smart Benefits"-kaart (main): compacter op desktop --- */
@media(min-width:1000px){
  .ccard-credit .crow-main{gap:8px}
  .ccard-credit .crow-value{gap:8px}
  /* Alle voordeelrijen (kop + lijst) identiek: zelfde letter, regelhoogte en padding. */
  .ccard-credit .crow-why,.ccard-credit .crow-benefits li{padding:8px 12px;font-size:15px;line-height:1.4}
  .ccard-credit .crow-benefits{gap:0}
  .ccard-credit,.ccard-credit.no-visual{grid-template-columns:minmax(0,1fr) 226px 188px}
  .crow-side-credit .crow-priceblock{padding-left:20px}
  .crow-side-credit .crow-actions{padding-left:16px}
}

/* --- Polish uit de laatste reviewronde --- */
/* Geen losse "·" vooraan een afgebroken regel op mobiel. */
@media(max-width:760px){.cc-list-head-group-b > .result-count::before{content:none}}
@media(max-width:999px){.cc-list-head .hint{display:none}}
/* Langste knoplabel ("Bekijk bij aanbieder") blijft op één regel. */
@media(min-width:1000px){.crow-side-credit .crow-actions .cta-apply{font-size:16px;padding-inline:8px;white-space:nowrap}}
/* "Bekijk details": duidelijker rand op het getinte paneel. */
.crow-side-credit .crow-details-link{border-color:#9fb0c2}
/* Grotere tikvlakken zonder de opmaak te verschuiven. */
.crumbs a{position:relative}
.crumbs a::after{content:"";position:absolute;inset:-14px -6px}
.crow-identity .crow-name a{position:relative}
.crow-identity .crow-name a::after{content:"";position:absolute;inset:-10px -4px}
.crow-more-body a{display:inline-block;padding:10px 0}
/* Uitlijning: "Wis filters" en Vergelijk sluiten aan op de linkerrand. */
.active-bar .filter-clear{padding-inline:0}
.crow-foot .cmp-pick{padding-left:0}
@media(max-width:420px){.crow-source{font-size:12px}}
@media(min-width:1000px){.crow-side-credit .crow-foot .crow-source{flex:0 1 230px;max-width:230px}}

/* ============ Merklogo-slot: elke kaart dezelfde afmeting (eigenaar 2026-10-08) ============
   Eerder: vaste hoogte, breedte volgde de inhoud (korte merken smal, lange breed). Nu: vaste
   breedte én hoogte per breakpoint, inhoud gecentreerd. Officieel logo (alleen met toestemming,
   docs/ASSET_PROVENANCE.md) of, zonder toestemming, de neutrale tekstbadge: zelfde vak. */
:root{--logo-slot-w:164px}
@media(max-width:999px){:root{--logo-slot-w:140px}}
@media(max-width:760px){:root{--logo-slot-w:112px}}
.crow-identity .crow-visual,
.detail-identity .detail-visual{box-sizing:border-box;width:var(--logo-slot-w);min-width:var(--logo-slot-w);max-width:var(--logo-slot-w);flex:0 0 var(--logo-slot-w);height:var(--logo-slot-h);justify-content:center;align-items:center;overflow:hidden}
.crow-identity .crow-visual-text,.detail-identity .detail-visual.crow-visual-text{padding:0 10px}
.crow-identity .brand-word,.detail-identity .detail-visual .brand-word{text-align:center;overflow-wrap:anywhere}
.crow-identity .crow-visual .issuer-logo-frame,.detail-identity .detail-visual .issuer-logo-frame{max-width:100%;max-height:100%}
/* Lettergrootte van de tekstbadge: schaalt met de naam, zodat elk vast slot even vol oogt. */
.crow-identity .brand-word,.detail-identity .detail-visual .brand-word{font-size:18px;letter-spacing:.07em;line-height:1.1}
.crow-identity .brand-word-s,.detail-identity .detail-visual .brand-word-s{font-size:22px}
.crow-identity .brand-word-m,.detail-identity .detail-visual .brand-word-m{font-size:15px}
.crow-identity .brand-word-long,.detail-identity .detail-visual .brand-word-long{font-size:12px}
@media(max-width:760px){
  .crow-identity .brand-word,.detail-identity .detail-visual .brand-word{font-size:14px}
  .crow-identity .brand-word-s,.detail-identity .detail-visual .brand-word-s{font-size:17px}
  .crow-identity .brand-word-m,.detail-identity .detail-visual .brand-word-m{font-size:10.5px;letter-spacing:.03em}
  .crow-identity .brand-word-long,.detail-identity .detail-visual .brand-word-long{font-size:9.5px}
}
@media(min-width:761px) and (max-width:999px){
  .crow-identity .brand-word-m,.detail-identity .detail-visual .brand-word-m{font-size:13px;letter-spacing:.05em}
}

/* ----- Zelfde vaste merkvak voor spaar-, lening- en hypotheekkaarten ("alle categorieën") ----- */
@media(min-width:761px){.ccard:not(.ccard-credit){grid-template-columns:var(--logo-slot-w) minmax(0,1fr) 250px}}
.ccard:not(.ccard-credit) > .crow-visual{box-sizing:border-box;width:var(--logo-slot-w);min-width:var(--logo-slot-w);max-width:var(--logo-slot-w);height:var(--logo-slot-h);min-height:0;padding:0 10px;gap:0;align-self:start;justify-content:center;align-items:center;overflow:hidden}
.ccard:not(.ccard-credit) > .crow-visual .issuer-logo-frame{--logo-h:var(--logo-slot-h);width:calc(var(--logo-slot-h) * (var(--crop-w,1440) + 2 * var(--crop-padx,0)) / var(--crop-h,898));max-width:100%}
/* Logo-kaders passen ALTIJD volledig in het vak (nooit bijsnijden = nooit bewerken): de schaalhoogte is
   de slot-hoogte, maar begrensd door de beschikbare slotbreedte (slot minus 20px opvulling). */
:root{--logo-fit-h:min(var(--logo-slot-h), calc((var(--logo-slot-w) - 20px) / 3.07))}
.ccard:not(.ccard-credit) > .crow-visual .issuer-logo-frame{flex:none}
.ccard:not(.ccard-credit) > .crow-visual .issuer-logo-frame.nibc-frame{width:calc(var(--logo-fit-h) * 3.07);max-width:none;height:calc(var(--logo-fit-h) * 0.59)}
.ccard:not(.ccard-credit) > .crow-visual .issuer-logo-frame.nibc-frame > img{width:calc(var(--logo-fit-h) * 2.85);max-width:none;max-height:none}
.crow-identity .crow-visual .issuer-logo-frame.nibc-frame,.detail-identity .detail-visual .issuer-logo-frame.nibc-frame{width:calc(var(--logo-fit-h) * 3.07);max-width:none;height:calc(var(--logo-fit-h) * 0.59)}
.crow-identity .crow-visual .issuer-logo-frame.nibc-frame > img,.detail-identity .detail-visual .issuer-logo-frame.nibc-frame > img{width:calc(var(--logo-fit-h) * 2.85)}
.crow-identity .crow-visual .issuer-logo-frame,.detail-identity .detail-visual .issuer-logo-frame{flex:none}
.ccard:not(.ccard-credit) > .crow-visual .brand-word{text-align:center;overflow-wrap:anywhere;font-size:18px;letter-spacing:.07em;line-height:1.1}
.ccard:not(.ccard-credit) > .crow-visual .brand-word-s{font-size:22px}
.ccard:not(.ccard-credit) > .crow-visual .brand-word-m{font-size:15px}
.ccard:not(.ccard-credit) > .crow-visual .brand-word-long{font-size:12px}
@media(max-width:760px){
  .ccard:not(.ccard-credit) > .crow-visual .brand-word{font-size:14px}
  .ccard:not(.ccard-credit) > .crow-visual .brand-word-s{font-size:17px}
  .ccard:not(.ccard-credit) > .crow-visual .brand-word-m{font-size:10.5px;letter-spacing:.03em}
  .ccard:not(.ccard-credit) > .crow-visual .brand-word-long{font-size:9.5px}
}
/* Het logo-kader zit exact in het vaste vak: geen marge (anders schuift het eruit en wordt de witruimte afgesneden). */
.crow-visual .issuer-logo,.detail-visual .issuer-logo,.crow-visual .issuer-logo-frame,.detail-visual .issuer-logo-frame{margin:0}

/* ============ Leningen · Sparen · Hypotheken op het creditcardpatroon (eigenaar 2026-10-08) ============ */
/* Compacte kop + filterrail + resultaten direct zichtbaar; uitleg, rekenhulp en
   FAQ staan ingeklapt onder de lijst. Hergebruikt .cc-guide-head, .cc-layout en
   .cc-list-head van de creditcardhub. */
.cc-list-head .cc-list-title{margin:0;font-family:var(--ui);font-size:14px;line-height:22px;letter-spacing:0;font-weight:700;color:var(--ink)}
.sec-compact{padding:0}
#topkeuzes.sec,#alle-leningen.sec,#alle-rekeningen.sec,#overige-aanbieders.sec{padding-top:14px;padding-bottom:10px}
.hub-filterbar{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:end;margin:0 0 6px}
.hub-filterbar label{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 200px;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.hub-filterbar select{font:16px var(--ui);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-height:44px;width:100%;max-width:100%;text-transform:none;letter-spacing:0}
.cc-results .fineprint{margin:14px 0 0}
.cc-list-head .rate-legend{margin:0 0 6px}
.cc-list-head .cc-how ul{margin:6px 0;padding-left:20px}
.sec-compact .compact-list,#overige-aanbieders .compact-list{margin:6px 0 0}
@media(min-width:761px){
  #overige-aanbieders .compact-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
#overige-aanbieders .compact-row{padding:10px 14px}
@media(min-width:1280px){
  .cc-rail .hub-filterbar{flex-direction:column;align-items:stretch;margin:0}
  .cc-rail .hub-filterbar label{flex:none}
}
@media(max-width:760px){
  .hub-filterbar{flex-wrap:nowrap;gap:8px;margin:0 0 2px}
  .hub-filterbar label{flex:1 1 0;font-size:11px;letter-spacing:.04em}
  .hub-filterbar select{font-size:14px;padding:6px 8px}
  #topkeuzes.sec,#alle-leningen.sec,#alle-rekeningen.sec,#overige-aanbieders.sec{padding-top:8px;padding-bottom:6px}
}

/* Meerdere uitleg-disclosures in de lijstkop: geen losse middenpunt-scheiding
   (die kan na een regelafbreking aan het begin van een regel belanden). */
.cc-list-head-group-a:has(.cc-how ~ .cc-how) > :not(:first-child):not([open])::before{content:none}
.cc-list-head-group-a:has(.cc-how ~ .cc-how){gap:0 18px}
/* Compactere productkaarten voor lening, sparen en hypotheek: minder lege
   ruimte rond "Alle details", dezelfde kaartschaal als de creditcards. */
.ccard:not(.ccard-credit) .crow-more{margin-top:0;padding-top:0}
.ccard:not(.ccard-credit) .crow-more summary{min-height:44px;padding:0}
.ccard:not(.ccard-credit){padding:var(--sp3) var(--sp4) 0;row-gap:var(--sp2)}
.ccard:not(.ccard-credit) .crow-main{gap:6px}
.ccard:not(.ccard-credit) .crow-side{gap:6px}
.ccard:not(.ccard-credit) .calc-offer{min-height:44px}
.ccard:not(.ccard-credit) .crow-main > p{margin:0}
@media(max-width:760px){
  .cc-list-head:has(.cc-list-title) .cc-list-head-group > :not(:first-child)::before{content:none}
  .cc-list-head:has(.cc-list-title) .cc-list-head-group{gap:0 16px}
  .cc-list-head:has(.cc-list-title) .cc-list-title{flex-basis:100%}
}

.list-note{margin:0 0 10px;font-family:var(--ui);font-size:14px;line-height:1.45;color:var(--ink-soft)}
.list-note b{color:var(--ink)}
/* Lijstkop van lening/sparen/hypotheek: nooit een losse middenpunt aan het begin van een
   afgebroken regel (761–1279 px); de afstand komt uit de gap. */
.cc-list-head:has(.cc-list-title){column-gap:18px}
.cc-list-head:has(.cc-list-title) .cc-list-head-group > :not(:first-child)::before{content:none}
body:has(.cc-list-title) .cc-guide-head h1{line-height:1.15}
.cc-list-head:has(.cc-list-title) .cc-list-head-group-b > .result-count::before{content:none}

/* ----- Gewone (niet-uitgesneden) officiële merklogo's in het vaste merkvak: volledig, onbewerkt (contain) ----- */
.crow-visual .issuer-logo:not(.issuer-logo-frame),.detail-visual .issuer-logo:not(.issuer-logo-frame){display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0}
.crow-visual .issuer-logo:not(.issuer-logo-frame) img,.detail-visual .issuer-logo:not(.issuer-logo-frame) img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.crow-visual:has(> .issuer-logo:not(.issuer-logo-frame)),.detail-visual:has(> .issuer-logo:not(.issuer-logo-frame)){background:#fff;padding:3px 8px}

/* Tablet: zeven hoofdmenu-items passen onder 1100px niet op één regel — compacte menuknop. */
@media(min-width:761px) and (max-width:1100px){
  .mast-main{flex-wrap:nowrap}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--ink);padding:8px 24px 16px;border-top:1px solid rgba(244,239,228,.16);flex-direction:column;align-items:stretch}
  .nav.is-open{display:flex}
  .mast{position:relative}
}

/* Redactionele foto's: desktop volle tegelbreedte bovenaan de categoriekaart, mobiel een 56px-vierkant in de knoprij. */
.cat-ill .cat-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cat-card:has(.cat-photo){padding:0;overflow:hidden}
.cat-card:has(.cat-photo) .cat-ill{margin:0}
.cat-card:has(.cat-photo) .cat-body{padding:14px 18px 18px}
.guide-hero-photo{display:none}
@media(min-width:761px){
  .guide-hero-photo{float:right;display:block;width:300px;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;margin:4px 0 12px 22px}
  .guide-hero:has(.guide-hero-photo) .guide-hero-art{display:none}
}
@media(max-width:760px){
  .guide-hero-photo{display:none}
  .cat-card:has(.cat-photo){padding:8px 14px 8px 8px}
  .cat-card:has(.cat-photo) .cat-body{padding:0 24px 0 0}
  .cat-ill .cat-photo{width:60px;height:60px;aspect-ratio:1;border-radius:10px}
}

/* Logo-vulling, alle categorieën: maak maximaal gebruik van het vaste merkvak.
   Het artwork zelf blijft exact zoals uitgegeven (officiële assets met provenance).
   Contain is verplicht: een breed/vierkant logo kan niet beide assen tegelijk
   vullen zonder te vervormen of bij te snijden. Bunq/NIBC cropframes behouden hun
   bestaande clearspace en bijzondere presentatiegeometrie. */
:root{--logo-slot-inset:2px}
.crow-identity .crow-visual:has(> .issuer-logo:not(.issuer-logo-frame)),
.detail-identity .detail-visual:has(> .issuer-logo:not(.issuer-logo-frame)),
.ccard:not(.ccard-credit) > .crow-visual:has(> .issuer-logo:not(.issuer-logo-frame)){
  padding:var(--logo-slot-inset);background:#fff
}
.crow-visual > .issuer-logo:not(.issuer-logo-frame),
.detail-visual > .issuer-logo:not(.issuer-logo-frame){
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:100%;height:100%;max-width:100%;max-height:100%;margin:0
}
.crow-visual > .issuer-logo:not(.issuer-logo-frame) > img,
.detail-visual > .issuer-logo:not(.issuer-logo-frame) > img{
  display:block;width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center
}
/* Ook losse merkvakken in spaarvergelijkingen en keuzeoverzichten. */
.srow-id > .issuer-logo:not(.issuer-logo-frame),
.pick-link > .issuer-logo:not(.issuer-logo-frame){
  display:flex;align-items:center;justify-content:center;
  flex:0 0 var(--logo-slot-w);width:var(--logo-slot-w);height:var(--logo-slot-h);margin:0
}
.srow-id > .issuer-logo:not(.issuer-logo-frame) > img,
.pick-link > .issuer-logo:not(.issuer-logo-frame) > img{
  width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain
}

/* ============ Hypotheken: scenario-filter boven de vouw, compacte resultaten (2026-10-08) ============ */
/* Geen nieuwe tarieven: de interactie schakelt uitsluitend tussen gecontroleerde JSON-cijfers. */
.mort-section .cc-list-head{margin-bottom:10px}
.mort-filterbar[hidden],.mort-reset[hidden],#mort-results .mort-card[hidden]{display:none!important}
.mort-filterbar{display:grid;grid-template-columns:minmax(240px,1.55fr) minmax(140px,1fr) minmax(310px,2fr);align-items:end;gap:10px 12px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 10px rgba(21,32,48,.035)}
.mort-filtergroup{min-width:0;display:flex;flex-direction:column;gap:6px;margin:0;font-family:var(--ui)}
.mort-extra{min-width:0}
.mort-extra-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:10px}
.mort-more{display:none;min-height:44px;min-width:0;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:#f5f7fa;color:var(--accent-dark);padding:8px 10px;font:700 13px var(--ui);cursor:pointer}
.mort-more:hover{background:#eaf3ee;border-color:var(--accent)}
.mort-more:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mort-more[aria-expanded="true"]{background:var(--ink);color:#fff}
.mort-field-label{display:block;font-size:11.5px;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;font-weight:750;color:var(--ink-soft)}
.mort-filtergroup select{width:100%;min-width:0;min-height:44px;padding:8px 26px 8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:600 13.5px var(--ui);text-overflow:ellipsis}
.mort-term-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.mort-term-buttons button{border:1px solid #c7d2df;border-radius:8px;min-height:44px;padding:8px 5px;background:#f5f7fa;color:var(--ink);font:700 14px var(--ui);cursor:pointer}
.mort-term-buttons button:hover{border-color:var(--accent);background:#eaf3ee}
.mort-term-buttons button[aria-pressed="true"],.mort-term-buttons button[aria-pressed="true"]:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.mort-term-buttons button:focus-visible,.mort-filtergroup select:focus-visible,.mort-reset:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mort-reset{grid-column:1/-1;justify-self:end;min-height:44px;border:0;background:transparent;color:var(--accent-dark);font:700 13px var(--ui);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 8px}
.mort-method-note{font-family:var(--ui);font-size:12.5px;line-height:1.45;color:var(--ink-soft);margin:8px 0 0}
.mort-method-note a{color:var(--accent-dark);text-decoration:underline}
.mort-filter-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#mort-results.compare{gap:9px;margin:12px 0 8px}
#mort-results .mort-card{grid-template-columns:164px minmax(0,1fr) 190px;grid-template-areas:"visual main side" "more more more";align-items:center;gap:4px 16px;padding:10px 16px 0;box-shadow:none;border-color:#dbe2df}
#mort-results .mort-card:hover{border-color:#bcc9d8}
#mort-results .mort-card>.crow-visual{min-height:72px;align-self:center;justify-content:center;box-sizing:border-box}
#mort-results .mort-card .crow-main,#mort-results .mort-card .crow-side{gap:4px}
#mort-results .mort-card .crow-name{font-size:18px;line-height:1.25}
#mort-results .mort-card .crow-price{gap:3px 10px;line-height:1.3}
#mort-results .mort-card .crow-price .crow-amount{font-size:24px;color:var(--accent-dark)}
#mort-results .mort-card .crow-price .crow-period{margin:0;font-size:13px;font-weight:600}
#mort-results .mort-card .crow-price .crow-note{margin:0;flex-basis:100%;font-size:12.5px}
#mort-results .mort-card .mort-scope{font:700 12px var(--ui);color:var(--accent-dark)}
#mort-results .mort-card .mort-ltv{font:12px/1.4 var(--ui);margin:2px 0 0;color:var(--ink-soft)}
#mort-results .mort-card .crow-side .btn{font-size:13px;line-height:1.2;min-height:48px;padding:10px 8px}
#mort-results .mort-card .crow-source{font-size:11.5px;line-height:1.3;text-align:center;margin:0}
#mort-results .mort-card .crow-actions .crow-details-link{font-size:13px;min-height:44px}
#mort-results .mort-card .crow-more{grid-area:more;margin:0;padding:0}
#mort-results .mort-card .crow-more summary{min-height:44px;font-size:13px}
.mort-other{background:transparent;border-top:1px solid var(--line);padding:8px 0 0}
.mort-other summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--accent-dark);font:700 13px var(--ui)}
.mort-other summary:hover{text-decoration:underline}
.mort-other .fineprint{margin:4px 0}
@media(max-width:1100px){
  .mort-filterbar{grid-template-columns:minmax(180px,1.2fr) minmax(120px,.85fr) minmax(270px,1.7fr)}
  #mort-results .mort-card{grid-template-columns:140px minmax(0,1fr) 170px;gap:6px 12px}
}
@media(max-width:760px){
  .mort-section .cc-list-head{margin-bottom:5px}
  .mort-filterbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:11px;border-radius:10px}
  /* 5/10/20 jaar houden volledige knopbreedte, ook bij 320px. */
  .mort-period{grid-column:1/-1}
  .mort-filtergroup select{font-size:13px}
  .mort-term-buttons button{font-size:13px}
  .mort-nhg{grid-column:1}
  .mort-extra{grid-column:2;align-self:end}
  .mort-extra .mort-more{display:flex;width:100%;box-sizing:border-box}
  .mort-extra-fields{display:none}
  .mort-extra.is-open{grid-column:1/-1}
  .mort-extra.is-open .mort-extra-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:9px}
  .mort-method-note{font-size:12px;margin:7px 0 0}
  #mort-results.compare{gap:8px;margin-top:9px}
  #mort-results .mort-card{grid-template-columns:112px minmax(0,1fr);grid-template-areas:"visual main" "side side" "more more";gap:7px 10px;padding:10px 12px 0;align-items:center}
  #mort-results .mort-card>.crow-visual{min-height:54px;max-height:72px;padding:4px}
  #mort-results .mort-card .crow-name{font-size:16px}
  #mort-results .mort-card .crow-price .crow-amount{font-size:22px}
  #mort-results .mort-card .crow-price .crow-period{font-size:12.5px}
  #mort-results .mort-card .crow-price .crow-note{font-size:12px}
  #mort-results .mort-card .mort-ltv{font-size:11.5px}
  #mort-results .mort-card .crow-side{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"apply details" "source source";gap:2px 8px;align-items:center}
  #mort-results .mort-card .crow-side>.btn{grid-area:apply;min-width:0}
  #mort-results .mort-card .crow-actions{grid-area:details}
  #mort-results .mort-card .crow-source{grid-area:source;text-align:left;font-size:11px}
  #mort-results .mort-card .crow-more summary{min-height:44px}
}
@media(max-width:375px){
  .mort-filterbar{gap:7px}
  .mort-term-buttons button{font-size:12.5px}
  #mort-results .mort-card{grid-template-columns:100px minmax(0,1fr);gap:7px}
  #mort-results .mort-card .crow-side .btn{font-size:12.5px}
}

/* Mortgage iteration 2: shorter initial screen; risk-classes are never silently ranked. */
body:has(.mort-section) .crumbs{margin-top:8px}
body:has(.mort-section) .cc-guide-head{gap:6px;padding-top:4px}
body:has(.mort-section) .cc-guide-head .cc-lede{line-height:1.38}
body:has(.mort-section) .mort-section .cc-list-head{margin-bottom:5px}
.mort-noncomparable{font:13px/1.45 var(--ui);color:var(--ink);margin:8px 0 2px;padding:7px 10px;border-left:3px solid var(--gold);background:#fcf7e9}
.mort-noncomparable[hidden],#mort-results .mort-ltv[hidden]{display:none!important}
.mort-explain{font-family:var(--ui);font-size:13px;margin:4px 0 2px}
.mort-explain summary{min-height:44px;display:flex;align-items:center;color:var(--accent-dark);cursor:pointer;font-weight:700}
.mort-explain>div{padding:0 0 8px;font-size:13px}
.mort-help{border-top:1px solid var(--line);margin-top:4px}
.mort-help>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:700 13px var(--ui);color:var(--accent-dark)}
.mort-help .hub-start-slim{padding-top:5px}
#mort-results .mort-card .crow-source a{color:var(--accent-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media(min-width:761px) and (max-width:999px){
  /* At 768px the desktop navigation wrapped into a 265px masthead and hid
     the first result below the fold. Use the same compact menu as mobile. */
}
@media(max-width:760px){
  body:has(.mort-section) .cc-guide-head .cc-lede{font-size:13px;line-height:1.36}
  body:has(.mort-section) .cc-guide-head .cc-risk-hub{font-size:12.5px;line-height:1.42}
  body:has(.mort-section) .cc-guide-head h1{font-size:28px}
  .mort-noncomparable{font-size:12.5px;padding:6px 9px}
}

/* Compact mortgage card: one scan row + single source/details footer.
   Removes the redundant tall action column and empty white card bottoms. */
#mort-results .mort-card{grid-template-areas:"visual main side" "foot foot foot";align-items:center}
#mort-results .mort-card .crow-side{align-self:center}
#mort-results .mort-card .mort-card-foot{grid-area:foot;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center;border-top:1px solid var(--line-soft)}
#mort-results .mort-card .mort-card-foot .crow-more{grid-area:auto;grid-column:1;grid-row:1;min-width:0;margin:0;padding:0;border:0}
#mort-results .mort-card .mort-card-foot .crow-more summary{min-height:44px;font-size:13px;display:inline-flex;align-items:center}
#mort-results .mort-card .mort-card-foot .crow-source{grid-column:2;grid-row:1;text-align:right;line-height:1.35}
#mort-results .mort-card .mort-card-foot:has(.crow-more[open]) .crow-more{grid-column:1/-1;grid-row:2}
#mort-results .mort-card .mort-card-foot:has(.crow-more[open]) .crow-source{grid-column:1/-1;grid-row:1}
#mort-results .mort-card .crow-main{gap:3px}
#mort-results .mort-card .crow-side .btn{white-space:normal;text-wrap:balance}
.mort-term-buttons button{white-space:nowrap}
@media(min-width:761px) and (max-width:999px){
  /* tablet: do not squeeze 5/10/20-year tabs to 58px or truncate selects */
  .mort-filterbar{grid-template-columns:minmax(250px,1.6fr) minmax(145px,1fr) minmax(135px,.75fr)}
  .mort-extra .mort-more{display:flex;width:100%}
  .mort-extra-fields{display:none}
  .mort-extra.is-open{grid-column:1/-1}
  .mort-extra.is-open .mort-extra-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px}
}
@media(max-width:760px){
  .mort-section .cc-list-head{display:flex;justify-content:space-between;align-items:center;gap:3px 10px;flex-wrap:wrap}
  .mort-section .cc-list-head:has(.cc-list-title) .cc-list-title{flex-basis:auto}
  .mort-section .cc-list-head .result-count{font-size:12.5px;white-space:nowrap}
  #mort-results .mort-card{grid-template-areas:"visual main" "side side" "foot foot"}
  #mort-results .mort-card .crow-side{grid-area:side;display:block}
  #mort-results .mort-card .crow-side .btn{width:100%;min-height:44px}
  #mort-results .mort-card .mort-card-foot{grid-area:foot;grid-template-columns:auto minmax(0,1fr)}
  #mort-results .mort-card .mort-card-foot .crow-source{font-size:11px}
}

/* Final compact widths after 320/375/768/1280px visual inspection. */
@media(min-width:761px) and (max-width:1100px){
  #mort-results .mort-card{grid-template-columns:140px minmax(0,1fr) 205px}
  #mort-results .mort-card .crow-side .btn{white-space:nowrap}
}
@media(max-width:760px){
  /* Breadcrumb remains in DOM for accessibility/SEO but is not repeated visually
     immediately above an identical H1 on a small mortgage screen. */
  body:has(.mort-section) .crumbs{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* Final mobile card hierarchy: lender identity is a self-contained first row.
   The rate spans the full card beneath it, so oversized logos cannot overlap
   percentages at 320/375px or any future small phone width. */
@media(max-width:760px){
  #mort-results .mort-card{
    grid-template-columns:100px minmax(0,1fr);
    grid-template-areas:"visual title" "rate rate" "side side" "foot foot";
    column-gap:10px;row-gap:5px;align-items:center
  }
  #mort-results .mort-card>.crow-visual{
    grid-area:visual;width:100%;min-width:0;max-width:100%;
    min-height:48px;max-height:62px;overflow:hidden;align-self:center
  }
  #mort-results .mort-card>.crow-visual .issuer-logo-frame,
  #mort-results .mort-card>.crow-visual .issuer-logo,
  #mort-results .mort-card>.crow-visual .brand-word{
    max-width:100%;min-width:0;box-sizing:border-box
  }
  #mort-results .mort-card>.crow-visual .issuer-logo-frame img{max-width:100%;object-fit:contain}
  #mort-results .mort-card .crow-main{display:contents}
  #mort-results .mort-card .crow-name{grid-area:title;min-width:0;align-self:center;font-size:16px;line-height:1.2}
  #mort-results .mort-card .crow-price{grid-area:rate;min-width:0;gap:2px 9px;line-height:1.28}
  #mort-results .mort-card .crow-price .crow-amount{font-size:24px}
  #mort-results .mort-card .crow-price .crow-period{font-size:12.5px}
  #mort-results .mort-card .crow-price .crow-note{flex-basis:100%;font-size:12px}
  #mort-results .mort-card .mort-scope,#mort-results .mort-card .mort-ltv{grid-column:1/-1}
  #mort-results .mort-card .crow-side{grid-area:side}
  #mort-results .mort-card .mort-card-foot{grid-area:foot}
}

/* Small phone: put the primary provider action beside the interest summary.
   The cookie notice must not cover the only apply link above the fold. */
@media(max-width:760px){
  #mort-results .mort-card{
    grid-template-columns:minmax(0,1fr) minmax(125px,.88fr);
    grid-template-areas:"visual title" "rate side" "foot foot";
    column-gap:10px;row-gap:6px;align-items:center
  }
  #mort-results .mort-card .crow-price{
    grid-area:rate;display:flex;flex-direction:column;align-items:flex-start;
    gap:1px;line-height:1.25
  }
  #mort-results .mort-card .crow-price .crow-period{
    display:block;white-space:normal;margin:0;font-size:12px;line-height:1.35
  }
  #mort-results .mort-card .crow-price .crow-note{
    font-size:11.5px;line-height:1.3;white-space:normal;margin:0
  }
  #mort-results .mort-card .crow-side{grid-area:side;display:flex;align-self:stretch;justify-content:center}
  #mort-results .mort-card .crow-side .btn{
    min-height:54px;height:100%;max-height:82px;padding:6px;
    font-size:12px;line-height:1.35;white-space:normal;text-wrap:balance
  }
  #mort-results .mort-card .crow-name{font-size:15.5px}
}

/* Preserve full visibility of the first issuer action at 320px even before
   cookie consent: reclaim a few redundant pixels outside interactive controls. */
@media(max-width:375px){
  body:has(.mort-section) .mort-method-note{margin-top:4px}
  body:has(.mort-section) #mort-results.compare{margin-top:5px}
}

/* Mortgage market catalog — official-product references only, no paid logos.
 * Every brand has the same 164×44 / 140×44 / 112×36 slot (responsive).
 * Artwork is contained, never stretched; unlicensed brands use styled text. */
.mort-market-section{margin:14px 0 16px}
.mort-market{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:visible}
.mort-market>summary{min-height:52px;display:flex;align-items:center;cursor:pointer;font:700 15px/1.3 var(--ui);color:var(--accent-dark);padding:13px 16px}
.mort-market>summary:hover{background:var(--accent-soft)}
.mort-market>summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mort-market-content{padding:0 15px 15px}
div.mort-market>.mort-market-content{padding-top:14px}
.mort-market-explainer{margin:0 0 14px;font:13px/1.5 var(--ui);color:var(--ink-soft)}
.mort-market-filters{display:grid;grid-template-columns:minmax(190px,1.6fr) repeat(2,minmax(130px,1fr)) auto;gap:8px;align-items:end;margin:0 0 10px}
.mort-market-filters label{display:flex;flex-direction:column;min-width:0;gap:4px;color:var(--ink-soft);font:700 11px/1.3 var(--ui);text-transform:uppercase;letter-spacing:.04em}
.mort-market-filters input,.mort-market-filters select{width:100%;min-width:0;min-height:44px;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:500 14px var(--ui);text-transform:none;letter-spacing:0}
#mort-market-reset,#mort-market-show-all{min-height:44px;cursor:pointer;color:var(--accent-dark);font:700 13px var(--ui);background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
#mort-market-reset:hover,#mort-market-show-all:hover{background:var(--accent-soft)}
#mort-market-reset[hidden],#mort-market-empty[hidden],.mort-dir-row[hidden]{display:none!important}
.mort-market-count{font:600 13px var(--ui);color:var(--ink-soft);margin:6px 0 10px}
.mort-market-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.mort-market-share[hidden],#mort-market-share-fallback[hidden]{display:none!important}
#mort-market-share{min-height:44px;padding:8px 14px;cursor:pointer;background:var(--accent-soft);border:1px solid var(--line);border-radius:8px;color:var(--accent-dark);font:700 13px var(--ui)}
#mort-market-share:hover{background:#e9eff7}
#mort-market-share:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#mort-market-share-status{font:13px/1.45 var(--ui);color:var(--ink-soft)}
#mort-market-share-fallback{flex:1 1 100%;width:100%;min-width:0;min-height:44px;padding:8px 10px;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:12px var(--ui)}
.mort-market-empty{margin:16px 0;padding:15px;background:var(--paper-tint);border-radius:8px;font:14px var(--ui)}
.mort-directory{display:grid;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
/* Top 10 laagste hypotheekrentes (eigenaar 2026-10-10): gerangschikt op rente. */
.mort-dir-row{display:grid;grid-template-columns:var(--logo-slot-w) minmax(160px,1.35fr) minmax(175px,1fr) minmax(140px,.8fr);align-items:center;gap:10px 15px;padding:9px 12px;border-bottom:1px solid var(--line-soft);background:#fff;min-width:0}
.mort-dir-row:last-child{border-bottom:0}
.mort-dir-row:nth-child(even){background:#fafbf9}
.mort-brand-slot{box-sizing:border-box;width:var(--logo-slot-w);min-width:var(--logo-slot-w);max-width:var(--logo-slot-w);height:var(--logo-slot-h);min-height:var(--logo-slot-h);max-height:var(--logo-slot-h);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;background:#fff;border:1px solid #e1e7e3;border-radius:6px;padding:2px 8px;margin:0}
.mort-brand-slot .issuer-logo:not(.issuer-logo-frame){width:100%;height:100%;margin:0;display:flex;justify-content:center;align-items:center;max-height:100%}
.mort-brand-slot .issuer-logo:not(.issuer-logo-frame) img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.mort-brand-slot .issuer-logo-frame{--logo-h:var(--logo-slot-h);max-width:100%;max-height:100%;margin:0;flex:none}
.mort-brand-slot .issuer-logo-frame.nibc-frame{max-width:100%;--logo-h:min(var(--logo-slot-h),34px)}
.mort-brand-slot.crow-visual-text{border-left:3px solid var(--gold);background:#f7f5f0}
.mort-brand-slot .brand-word{max-width:100%;font-size:13px;letter-spacing:.03em;text-align:center;line-height:1.15;overflow-wrap:anywhere}
.mort-brand-slot .brand-word-s{font-size:16px}
.mort-brand-slot .brand-word-m{font-size:11px}
.mort-brand-slot .brand-word-long{font-size:10px}
.mort-dir-name{display:flex;flex-direction:column;gap:3px;min-width:0;font:14px/1.3 var(--ui)}
.mort-dir-name b{font-weight:700;color:var(--ink);overflow-wrap:break-word}
.mort-dir-provider{font-size:12px;color:var(--ink-soft)}
.mort-dir-evidence{min-width:0;font:13px/1.3 var(--ui);color:var(--ink-soft)}
.mort-dir-evidence span,.mort-dir-evidence small{display:block}
.mort-dir-evidence small{font-size:11.5px;margin-top:3px}
.mort-dir-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 10px}
.mort-dir-actions a{display:inline-flex;align-items:center;min-height:44px;font:700 12.5px/1.25 var(--ui);color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.mort-dir-actions .mort-dir-detail{font-weight:500}
.mort-dir-actions a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* The 3 main rate cards and the 39 catalog rows share identical logo slots. */
#mort-results .mort-card>.crow-visual{box-sizing:border-box;width:var(--logo-slot-w);min-width:var(--logo-slot-w);max-width:var(--logo-slot-w);height:var(--logo-slot-h);min-height:var(--logo-slot-h);max-height:var(--logo-slot-h);padding:2px 8px;overflow:hidden;align-self:center;align-items:center;justify-content:center;background:#fff}
#mort-results .mort-card>.crow-visual .issuer-logo:not(.issuer-logo-frame) img{max-width:100%;max-height:100%;object-fit:contain}
@media(min-width:761px) and (max-width:1050px){
  .mort-dir-row{grid-template-columns:var(--logo-slot-w) minmax(0,1fr) minmax(0,.9fr);gap:6px 12px}
  .mort-dir-actions{grid-column:2/-1;grid-row:2;justify-content:flex-start}
  .mort-market-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #mort-market-reset{justify-self:start}
}
@media(max-width:760px){
  .mort-market-section{margin:8px 0 12px}
  .mort-market>summary{font-size:13px;padding:12px;min-height:48px}
  .mort-market-content{padding:0 10px 10px}
  .mort-market-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mort-market-filters label:first-child{grid-column:1/-1}
  .mort-market-filters label{font-size:10.5px}
  .mort-market-filters input,.mort-market-filters select{font-size:13px;min-height:44px}
  .mort-directory{border-radius:8px}
  .mort-dir-row{grid-template-columns:var(--logo-slot-w) minmax(0,1fr);grid-template-areas:"logo name" "source source" "links links";gap:4px 9px;padding:8px}
  .mort-dir-row .mort-brand-slot{grid-area:logo}
  .mort-dir-row .mort-dir-name{grid-area:name}
  .mort-dir-row .mort-dir-evidence{grid-area:source;display:flex;gap:4px 10px;justify-content:space-between;flex-wrap:wrap;font-size:12px}
  .mort-dir-evidence small{font-size:11px;margin-top:0}
  .mort-dir-row .mort-dir-actions{grid-area:links;justify-content:flex-start;gap:12px}
  .mort-dir-actions a{min-height:44px;font-size:12.5px}
  .mort-brand-slot .brand-word{font-size:11px}
  .mort-brand-slot .brand-word-long{font-size:9px}
  #mort-results .mort-card{grid-template-columns:var(--logo-slot-w) minmax(0,1fr)}
  #mort-results .mort-card>.crow-visual{height:var(--logo-slot-h);min-height:var(--logo-slot-h);max-height:var(--logo-slot-h);width:var(--logo-slot-w);min-width:var(--logo-slot-w);max-width:var(--logo-slot-w)}
}

/* Equal optical emphasis for logo-slot text fallbacks: same slot, readable
   typography, no fake/recreated trademark images, no stretched artwork. */
.mort-brand-slot .brand-word,#mort-results .mort-card>.crow-visual .brand-word{
  font-family:var(--ui);font-size:14px;line-height:1.1;font-weight:800;letter-spacing:0;
  text-transform:uppercase;text-align:center;max-width:100%;overflow-wrap:anywhere
}
.mort-brand-slot .brand-word-s,#mort-results .mort-card>.crow-visual .brand-word-s{font-size:15px}
.mort-brand-slot .brand-word-m,#mort-results .mort-card>.crow-visual .brand-word-m{font-size:12px}
.mort-brand-slot .brand-word-long,#mort-results .mort-card>.crow-visual .brand-word-long{font-size:10.5px}
@media(max-width:760px){
  .mort-brand-slot .brand-word,#mort-results .mort-card>.crow-visual .brand-word{font-size:12.5px}
  .mort-brand-slot .brand-word-s,#mort-results .mort-card>.crow-visual .brand-word-s{font-size:14px}
  .mort-brand-slot .brand-word-m,#mort-results .mort-card>.crow-visual .brand-word-m{font-size:10.75px}
  .mort-brand-slot .brand-word-long,#mort-results .mort-card>.crow-visual .brand-word-long{font-size:9.3px}
}

/* Source-dated 10-year NHG mortgage sample data: never imply personalized,
   real-time or directly comparable interest offers. */
.mort-dir-rate{display:block;color:var(--accent-dark);font:600 19px/1.2 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mort-dir-rate span{font:600 11px/1.3 var(--ui);color:var(--ink-soft);white-space:normal}
.mort-dir-evidence .mort-dir-condition{font:11px/1.35 var(--ui);color:var(--ink-soft);margin:2px 0}
.mort-dir-evidence .mort-dir-stale{font:600 11px/1.35 var(--ui);color:#8a4b00;margin:2px 0}
.mort-market-filters{grid-template-columns:minmax(180px,1.45fr) repeat(3,minmax(110px,.9fr)) auto}
@media(min-width:761px) and (max-width:1050px){
 .mort-market-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .mort-dir-rate{font-size:17px}
 .mort-dir-rate span{font-size:11px}
 .mort-market-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mort-dir-evidence .mort-dir-condition{flex-basis:100%}
}

/* Tikvlakken ≥44px (reviewbevinding): pillen en stadschips; breadcrumb/titellinks vergroten hun tikvlak al via ::after. */
.qf-pill,.advisor-featured-cities a,.advisor-city-links a{min-height:44px}

/* Tablet: vijf categorietegels als 3 + 2 zonder lege plek. */
@media(min-width:761px) and (max-width:1100px){
  .cat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cat-grid>.cat-card{grid-column:span 2}
  .cat-grid>.cat-card:nth-child(n+4){grid-column:span 3}
}

/* ============ Mobiele creditcardkaart rustiger (eigenaar 2026-10-09: "ziet er niet goed uit") ============
   - Prijs in de gewone UI-font (de mono-font gaf "€  15  –  €  24" en "29 , 95").
   - Geen extra mintkader meer om prijs + knoppen + bron: één wit vlak met een haarlijn.
   - Twee even hoge knoppen; bron onder "Vergelijk" in plaats van in drie regels rechts. */
.crow-price strong,.crow-side-credit .crow-price strong{font-family:var(--ui);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .ccard-credit .crow-side-credit{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0 0;gap:12px}
  .ccard-credit .crow-side-credit .crow-actions{align-items:stretch;gap:6px 10px}
  .ccard-credit .crow-side-credit .crow-actions .btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  .ccard-credit .crow-side-credit .crow-details-link{border:1.5px solid var(--ink-faint);background:#fff;color:var(--ink)}
  .ccard-credit .crow-side-credit .crow-foot{grid-template-columns:1fr;gap:2px;align-items:start}
  .ccard-credit .crow-side-credit .crow-foot .crow-source{text-align:left;font-size:13px;margin:0 0 0 2px}
}
/* Sticky filterbalk: dunne focusring (geen dubbele dikke rand) en een scheiding van de kaarten eronder. */
.filter-toolbar select:focus-visible,.filter-toolbar button:focus-visible{outline-width:2px;outline-offset:1px}
.filter-toolbar{box-shadow:0 6px 8px -8px rgba(21,32,48,.35)}

/* ============ Rustige creditcardkaart (eigenaar 2026-10-09: "te veel vlakken, teksten en kleuren") ============
   Eén wit vlak per kaart: logo + naam, drie voordelen als gewone regels, twee kerncijfers, prijs,
   één knop en één tekstlink. Geen donkere kop, beige voordelenbox of mintkader meer. Alleen kleur: navy tekst + teal knop. */
.ccard-credit .crow-identity{background:none;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0 12px}
.ccard-credit .crow-identity .crow-name,.ccard-credit .crow-identity .crow-name a{color:var(--ink)}
.ccard-credit .crow-identity .crow-issuer{color:var(--ink-soft)}
.ccard-credit .crow-identity :focus-visible{outline-color:var(--accent)}
.ccard-credit .crow-identity .crow-visual{background:#fff;border:1px solid var(--line)}
.ccard-credit .crow-identity .crow-visual-text{border-left:0}
.ccard-credit .crow-value-label{font:600 13px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.ccard-credit .crow-benefits-box{background:transparent;border:0;border-radius:0;overflow:visible}
.ccard-credit .crow-why,.ccard-credit .crow-benefits li{background:none;border:0;padding:6px 0}
.ccard-credit .crow-side,.ccard-credit .crow-side-credit{background:transparent}
@media(max-width:999px){
  .ccard-credit .crow-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:15px;margin:8px 0 0}
  .ccard-credit .crow-facts>div{flex-direction:column;gap:0}
  .ccard-credit .crow-facts dt{font-weight:400;font-size:13px;color:var(--ink-soft)}
  .ccard-credit .crow-facts dd{font-weight:700}
}
@media(max-width:760px){
  .ccard-credit .crow-why,.ccard-credit .crow-benefits li{font-size:15.5px;padding:7px 0}
  .ccard-credit .crow-side-credit .crow-price strong{font-size:28px}
  .ccard-credit .crow-side-credit .crow-actions{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"apply" "caption" "details";gap:4px}
  .ccard-credit .crow-side-credit .crow-actions .cta-apply{min-height:52px;font-size:17px}
  .ccard-credit .crow-side-credit .crow-actions .cta-caption{text-align:center;margin:2px 0 0}
  .ccard-credit .crow-side-credit .crow-details-link{border:0;background:transparent;color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;min-height:44px}
}
.ccard-credit .crow-price-label{font:600 13px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink-soft)}
@media(max-width:760px){
  .ccard-credit .crow-side-credit{gap:6px}
  .ccard-credit .crow-side-credit .crow-foot{margin-top:-6px}
}

/* ============ Creditcardlijst: sneller naar de eerste kaart, prijs bij de naam (UX-vergelijking 2026-10-09) ============ */
.crow-price-top{display:none}
@media(max-width:760px){
  .ccard-credit .crow-price-top{display:block;margin:2px 0 0;font:600 14px/1.3 var(--ui);color:var(--ink-soft)}
  .ccard-credit .crow-price-top strong{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
  .ccard-credit .crow-side-credit .crow-price-label,.ccard-credit .crow-side-credit .crow-price,.ccard-credit .crow-side-credit .fee-cond{display:none}
  .ccard-credit .crow-price-top-cond{display:block;font-weight:400;font-size:13px;line-height:1.35;color:var(--ink-soft);margin-top:2px}
  /* Alleen de creditcardhub (leningen/sparen/hypotheken delen .cc-guide-head en houden hun eigen maat en kredietwaarschuwing). */
  body:has(#creditcard-results) .cc-guide-head .cc-all-link,body:has(#creditcard-results) .cc-guide-head .cc-why-link{display:none}
  body:has(#creditcard-results) .cc-guide-head .cc-lede{font-size:14px;line-height:1.4;margin:2px 0 4px}
  body:has(#creditcard-results) .cc-guide-head .cc-actions{margin:0 0 4px}
  body:has(#creditcard-results) .cc-guide-head .cc-risk-hub{margin:2px 0 4px}
  /* Eigenaarsbesluit 2026-10-26: compacter voorwerk op mobiel zodat de eerste kaart eerder in beeld komt. */
  body:has(#creditcard-results) .hub-apply-link{margin:0 0 6px;font-size:13.5px;line-height:1.45}
  .hub-apply-sep{display:none}
  body:has(#creditcard-results) .cc-guide-head{gap:6px;padding-top:4px}
}

/* ============ Creditcardkaart mobiel: Aanvragen direct onder de voordelen (audit 2026-10-09) ============
   Volgorde op ≤760px: kop (logo, naam, prijs) → voordelen → Aanvragen → kerncijfers en Let op → prijsuitleg → bron/Vergelijk → Alle details.
   Alleen CSS-volgorde; de DOM-volgorde (en dus schermlezer/no-CSS) blijft: voordelen, kerncijfers, prijs, knoppen. */
@media(max-width:760px){
  .ccard-credit{display:flex;flex-direction:column}
  .ccard-credit .crow-main,.ccard-credit .crow-side-credit{display:contents}
  .ccard-credit .crow-identity{order:1}
  .ccard-credit .crow-value{order:2}
  .ccard-credit .crow-side-credit .crow-actions{order:3;margin:12px 0 4px}
  .ccard-credit .crow-facts{order:4;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
  .ccard-credit .hl-note{order:2}   /* Let op (geschiktheid) vóór de knop, zoals AGENTS §7 vraagt */
  .ccard-credit .benefit-note{order:6}
  .ccard-credit .crow-side-credit .crow-priceblock{order:7;margin:0}
  .ccard-credit .crow-side-credit .crow-foot{order:8;margin-top:6px}
  .ccard-credit .crow-more{order:9}
}

/* Hub bovenaan op mobiel: minder rijen vóór de eerste kaart (audit 2026-10-09). */
@media(max-width:760px){
  body:has(#creditcard-results) .qf-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body:has(#creditcard-results) .quick-filters{margin-top:6px}
  body:has(#creditcard-results) .cc-list-head{gap:2px 10px;margin:6px 0 8px}
  body:has(#creditcard-results) .ccard-credit .crow-identity{padding:10px 0 8px}
}
@media(max-width:760px){
  /* Help mij kiezen en de kredietwaarschuwing op één rij; kop en uitleg over de volle breedte. */
  body:has(#creditcard-results) .cc-guide-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:center}
  body:has(#creditcard-results) .cc-guide-head>h1,body:has(#creditcard-results) .cc-guide-head>.cc-lede{grid-column:1/-1}
  body:has(#creditcard-results) .cc-guide-head .cc-actions{margin:0}
  body:has(#creditcard-results) .cc-guide-head .cc-risk-hub{margin:0;font-size:14px;line-height:1.3}
}

/* ============ Typografie en bediening creditcardkaart (audit 2026-10-09) ============
   Vier maten in één kaart: 13 (onderschriften), 15 (tekst), 20 (naam/prijs boven), 28 (prijs desktop). */
.ccard-credit .crow-why,.ccard-credit .crow-benefits li,.ccard-credit .hl-note,.ccard-credit .benefit-note{font-size:15px}
.ccard-credit .crow-facts{font-size:15px}
.ccard-credit .crow-facts dt,.ccard-credit .crow-value-label,.ccard-credit .cta-caption,.ccard-credit .crow-source,.ccard-credit .crow-fee-note,.ccard-credit .fee-cond,.ccard-credit .crow-price-top-cond,.ccard-credit .crow-price-label{font-size:13px}
.ccard-credit .crow-price-top{font-size:15px}
/* Bronlinks in "Alle details" in huisstijl (geen browserblauw). */
.crow-more a,.verify-qual a{color:var(--accent-dark)}
/* Tik- en focusdoelen. */
.tip>summary{position:relative}
.tip>summary::after{content:"";position:absolute;inset:-14px}
.qf-pill,.brand-button,.cc-brands summary,.brand-toggle{min-height:44px}
/* Plakkende filterbalk mag focus en ankers niet verbergen (WCAG 2.4.11). */
html{scroll-padding-top:76px}
@media(min-width:1000px){html{scroll-padding-top:24px}}
/* Vergelijkbalk onderaan: ruimte reserveren zodat de footer bereikbaar blijft. */
body:has(.cmp-bar:not([hidden])){padding-bottom:84px}
/* Minder beweging op verzoek. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Geen layoutsprong als de JS-filters verschijnen: ruimte vooraf reserveren (alleen met scripting). */
@media(scripting:enabled){
  body:has(#creditcard-results) .filter-toolbar[hidden]{display:flex;visibility:hidden;min-height:57px}
  body:has(#creditcard-results) .quick-filters[hidden]{display:flex;visibility:hidden;min-height:56px}
}

/* Nog niet nagekeken gegeven: rustig, niet als vet kerncijfer. */
.ccard-credit .crow-facts dd.dd-check{font-weight:400;color:var(--ink-soft)}

/* ============ Creditcard-detailpagina in dezelfde rustige stijl als de lijstkaart (audit 2026-10-09) =====
   Wit vlak i.p.v. donkere kop, prijs in de UI-font, volle-breedte Aanvragen met bron, vaste kerncijfers. */
.detail-hero-credit .detail-identity{background:none;border:0;border-radius:0;padding:0;margin:6px 0 2px;gap:14px;color:var(--ink)}
.detail-hero-credit .detail-identity h1{color:var(--ink);font-family:var(--ui);font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.01em}
.detail-hero-credit .detail-identity .detail-visual{background:#fff;border:1px solid var(--line);opacity:1}
.detail-hero-credit .hero-price strong,.detail-hero-credit .hero-price b{font-family:var(--ui);font-size:34px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.detail-hero-credit .hero-price span{font-family:var(--ui);font-size:16px;font-weight:600;color:var(--ink-soft)}
.detail-hero-credit .hero-price-cond,.detail-hero-credit .fee-cond{font-size:14px}
.detail-hero-credit .cta-source{margin:6px 0 0;font:400 13px/1.4 var(--ui);color:var(--ink-soft)}
.detail-hero-credit .detail-facts{margin:12px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;font-size:15px}
.detail-hero-credit .detail-facts>div{display:flex;flex-direction:column;gap:0}
.detail-hero-credit .detail-facts dt{font-weight:400;font-size:13px;color:var(--ink-soft)}
.detail-hero-credit .detail-facts dd{font-weight:700;margin:0}
.detail-hero-credit .detail-facts dd.dd-check{font-weight:400;color:var(--ink-soft)}
@media(max-width:760px){
  .detail-hero-credit .detail-hero-grid{display:flex;flex-direction:column;gap:0}
  .detail-hero-credit .detail-hero-main{display:contents}
  .detail-hero-credit .detail-identity{order:1}
  .detail-hero-credit .detail-hero-panel{order:2;border:0;padding:8px 0 4px;background:transparent;position:static}
  .detail-hero-credit .detail-hero-panel .btn{width:100%;min-height:52px;font-size:17px;margin:10px 0 4px}
  .detail-hero-credit .detail-hero-panel .cta-caption,.detail-hero-credit .detail-hero-panel .cta-source{text-align:center}
  .detail-hero-credit .detail-hero-panel .cta-secondary{text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center}
  .detail-hero-credit .crow-why,.detail-hero-credit .crow-benefits{order:3}
  .detail-hero-credit .hero-req{order:4}
  .detail-hero-credit .detail-hero-more{order:5}
  .detail-hero-credit .detail-facts{grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:12px}
}
/* Meldingen onder de hero: één compact blok. */
.detail-notes{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:8px 0 14px}
.detail-notes .hero-verify-note,.detail-notes .cc-risk,.detail-notes .cmp-add{margin:0}
.detail-notes .hero-verify-note{flex:1 1 100%;font-size:14px;color:var(--ink-soft)}
/* Pluspunten/minpunten compacter. */
.detail-hero-credit ~ .two-col .panel{padding:16px 18px}
.detail-hero-credit ~ .two-col .panel h2{font-family:var(--ui);font-size:20px;margin:0 0 6px}
.detail-hero-credit ~ .sec h2{font-size:clamp(22px,2.6vw,28px)}
/* Alternatieven: slanke rijen i.p.v. drie volledige kaarten met eigen Aanvragen. */
.alt-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.alt-link{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);text-decoration:none;color:var(--ink)}
.alt-link b{flex:1;min-width:0;font:700 16px/1.25 var(--ui)}
.alt-link span{font:400 14px/1.3 var(--ui);color:var(--ink-soft);white-space:nowrap}
.alt-link i{font-style:normal;font-size:24px;color:var(--accent)}
.alt-link:hover{border-color:var(--accent)}
@media (max-width:520px){.alt-link span{white-space:normal;max-width:46%;text-align:right}}
/* Plakkende Aanvragen-balk op mobiel (verschijnt zodra de knop in de kop uit beeld is). */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 12px rgba(21,32,48,.08)}
.sticky-cta[data-show="1"]{display:flex}
.sticky-cta .sticky-price{flex:1;min-width:0;font:700 17px/1.2 var(--ui)}
.sticky-cta .sticky-price small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:400 13px/1.2 var(--ui);color:var(--ink-soft)}
/* #204-nits (lead 2026-10-30): een korte, redactionele stickyNote mag over twee regels lopen in plaats van midden in een woord af te kappen. */
.sticky-cta .sticky-price small.sticky-wrap{white-space:normal;max-height:2.5em;overflow-wrap:anywhere}
.sticky-cta .btn{min-height:48px;padding-inline:22px}
@media(min-width:761px){.sticky-cta{display:none!important}}
body:has(.cmp-bar:not([hidden])) .sticky-cta{display:none!important}

.detail-hero-credit .crow-why,.detail-hero-credit .crow-benefits,.detail-hero-credit .crow-benefits li{background:none;border:0;border-radius:0;box-shadow:none}
.detail-hero-credit .crow-why,.detail-hero-credit .crow-benefits li{padding:6px 0;font-size:16px}
.detail-hero-credit .crow-benefits{padding:0;margin:0}
.detail-hero-credit .hero-req{font-size:15px}

/* ============ Vergelijkpagina: Aanvragen per kaart bovenaan, kopieerlink ondergeschikt (audit 2026-10-09) ============ */
.cmp-apply{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:8px 0 2px;padding-inline:22px;font-family:var(--ui);font-size:16px;font-weight:700;letter-spacing:0}
.cmp-table thead th .cmp-apply{display:flex;width:100%}
.cmp-stack-p .cmp-apply{display:flex;width:100%}
.cmp-more{display:inline-flex;align-items:center;min-height:44px}
.cmp-share>.btn.btn-secondary{background:transparent;color:var(--accent-dark);border-color:var(--line)}
@media(max-width:760px){.cmp-scroll-hint{display:none}}

/* ============ Keuzelijst met Aanvragen boven de vouw (gidsen, /beste-creditcard) ============ */
.pick-strip{margin:18px 0 22px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.pick-strip .pick-strip-h{font-family:var(--ui);font-size:20px;line-height:1.25;margin:0 0 4px;letter-spacing:0;text-transform:none}
.pick-intro{margin:0 0 8px;font-size:15px;color:var(--ink-soft)}
.pick-list{list-style:none;margin:8px 0 0;padding:0}
.pick-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.pick-row:first-child{border-top:0}
.pick-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pick-name{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px;font:700 17px/1.25 var(--ui);color:var(--ink)}
.pick-name:hover{text-decoration-thickness:2px}
.pick-reason{font:600 13px/1.3 var(--ui);color:var(--accent-dark)}
.pick-price{font:400 15px/1.3 var(--ui);color:var(--ink-soft)}
.pick-price strong{color:var(--ink);font-weight:800}
.pick-cond{font:400 13px/1.35 var(--ui);color:var(--ink-soft)}
.pick-cta{flex:none;min-height:48px;padding-inline:20px}
.pick-strip .fineprint{margin:8px 0 0}
@media(max-width:520px){.pick-row{flex-wrap:wrap}.pick-cta{width:100%}}

.prose .pick-list,.guide-layout .pick-list{padding:0;margin:8px 0 0;list-style:none}
.prose .pick-row,.guide-layout .pick-row{margin:0}
/* Review-fixes PR #91: 44px-doelen ook in de desktoprail; sorteerveld op 320px; minder lucht onder de knoppen. */
.cc-rail .qf-pill,.cc-rail .brand-button{min-height:44px}
@media(max-width:380px){
  .filter-toolbar .filter-sort select{padding-inline:10px 24px;font-size:15px}
  .filter-toolbar .filter-open{padding-inline:14px}
}
@media(max-width:760px){
  .ccard-credit .crow-side-credit .crow-actions{margin:10px 0 0}
  .ccard-credit .crow-facts{margin-top:4px}
}

/* /vergelijken met resultaat: kop compact (uitleg en bronnen staan al onder de tabel). */
.cmp-has-result .cmp-hero-compact .lede,.cmp-has-result .cmp-hero-compact .cmp-provenance{display:none}
.cmp-has-result .cmp-hero-compact{padding-bottom:0}
/* Meerregelige bronmelding is geen pil. */
.cmp-provenance .verified{border-radius:14px}

.pick-elig{color:var(--ink)}
/* Plakkende Aanvragen-balk mag de voet van de pagina niet afdekken. */
body:has(.sticky-cta[data-show="1"]){padding-bottom:calc(var(--sticky-h,84px) + 8px)}
html:has(.sticky-cta[data-show="1"]){scroll-padding-bottom:calc(var(--sticky-h,84px) + 16px)}

/* Review PR #92: contrast Aanvragen in vergelijkkop; tikdoel secundaire link; DOM-volgorde = visuele volgorde in de hero. */
.cmp-table thead th a.cmp-apply,.cmp-table thead th a.cmp-apply:hover{color:#fff}
.detail-hero-credit .detail-hero-panel .cta-secondary{display:inline-flex;align-items:center;min-height:44px}
.detail-hero-credit .detail-hero-more{min-width:0}
@media(min-width:761px){
  .detail-hero-credit .detail-hero-grid{grid-template-rows:auto 1fr}
  .detail-hero-credit .detail-hero-panel{grid-row:1 / span 2;grid-column:2}
  .detail-hero-credit .detail-hero-main{grid-column:1;grid-row:1}
  .detail-hero-credit .detail-hero-more{grid-column:1;grid-row:2}
}

/* Landingspagina's: tabellen als gestapelde kaarten op mobiel (geen horizontale scroll), interne linkrij. */
.landing-links{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:18px 0;font:400 15px/1.4 var(--ui)}
/* Sitewide 390px (design-review 2026-10-22): 'Per kenmerk'-rij in .landing-links brak niet af; groepen mogen nu wrappen. */
.landing-links-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 14px;max-width:100%;white-space:nowrap}
@media(max-width:480px){.landing-links{font-size:13px}.landing-links-group{gap:0 10px}}
.landing-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-dark);font-weight:700}

.foot .foot-contact{margin:22px 0 0;font:400 13.5px/1.5 var(--ui);color:#c9c2b2;max-width:70ch}
.foot .foot-contact a{display:inline;margin:0;color:#fff;text-decoration:underline;text-underline-offset:2px}

/* Startpagina op een klein laptopscherm (eigenaar 2026-10-09): kop, uitleg en de vijf onderwerpen
   binnen het eerste scherm (±650 px hoog). Kleinere kop, lagere foto, compacte tegels met miniatuur. */
@media(min-width:761px){
  .home-hero.tasks-compact{padding-top:18px}
  .home-hero .home-hero-grid{gap:28px;margin-bottom:14px}
  .home-hero h1{font-size:clamp(40px,4.4vw,60px);margin:4px 0 8px}
  .home-hero .lede{font-size:clamp(16px,1.35vw,19px);line-height:1.5;margin:0}
  .home-hero .home-hero-art{aspect-ratio:auto;height:clamp(150px,26vh,230px)}
  .home-hero .cat-grid{margin-top:0;gap:10px}
  .home-hero .cat-card{flex-direction:row;align-items:center;gap:12px;padding:8px 30px 8px 8px;min-height:76px;border-radius:14px;position:relative}
  .home-hero .cat-ill{flex:none;margin:0}
  .home-hero .cat-ill svg{width:46px;height:46px}
  .home-hero .cat-card .cat-body{padding:0 4px 0 0;gap:2px}
  .home-hero .cat-body b{font-size:17px;line-height:1.15}
  .home-hero .cat-count{font-size:12px;line-height:1.3;white-space:nowrap}
  .home-hero .cat-go{right:9px}
  .home-hero .home-hero-art img{object-position:62% 58%}
  .home-hero .cat-card{padding:8px 28px 8px 8px;gap:9px}
  .home-hero .cat-value{display:none}
  .home-hero .cat-go{margin:0;font-size:0;position:absolute;right:12px;top:50%;transform:translateY(-50%)}
  .home-hero .cat-go::after{content:"\203A";font-size:26px;line-height:1;font-weight:700}
  .home-hero .home-cta-row{margin:12px 0 4px}
}
@media(min-width:1100px){.home-hero .cat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Kop en footer: op elke pagina dezelfde containerbreedte, zodat het menu niet verspringt bij navigatie
   (eigenaar 2026-10-09). Dezelfde waarden als de hub-tokens hierboven, maar niet afhankelijk van .wrap-compare. */
:root{--site-max:1080px;--site-pad:16px}
@media(min-width:761px){:root{--site-pad:32px}}
@media(min-width:1000px){:root{--site-max:1240px}}
@media(min-width:1280px){:root{--site-max:1320px}}
@media(min-width:1760px){:root{--site-max:1440px}}
.mast>.wrap,.foot>.wrap{max-width:var(--site-max);padding-inline:var(--site-pad)}
.nav a[aria-current="page"]{font-weight:600}
/* Startpagina: inhoud even breed als de kop (geen smalle kolom onder een brede kop). */
main>.wrap:has(>.home-hero){max-width:var(--site-max);padding-inline:var(--site-pad)}
/* Expat-EN artikel (2026-10-19): vereisten per uitgever als rustige kaarten i.p.v. een smalle tekstentabel. */
.req-grid{display:grid;gap:14px;margin:20px 0 10px}
.req-card{background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 12px;box-shadow:var(--shadow-s);display:grid;gap:10px 22px}
@media(min-width:620px){.req-card{grid-template-columns:minmax(0,13.5em) minmax(0,1fr)}}
.req-side h3{font-family:var(--display);font-size:24px;line-height:1.05;margin:0 0 4px}
.req-side h3 small{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.03em;color:#5b6472;margin-top:3px}
.req-cards{font-size:14px;margin:0 0 10px;color:#3b4554}
.req-card a{color:var(--accent);text-underline-offset:2px}
.req-fig{margin:0 0 10px}
.req-fig b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;color:var(--ink);line-height:1.15}
.req-fig b.req-fig-none{font-family:var(--ui);font-size:18px;font-weight:700}
.req-fig span{display:block;font-size:13.5px;color:#5b6472;line-height:1.35}
.req-pill{display:inline-block;font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.02em;padding:5px 10px;border-radius:999px;line-height:1.3}
.req-pill-open{background:#e8eef6;color:var(--accent)}
.req-pill-bank{background:#faf3dc;color:#6e4a00}
.req-list{margin:2px 0 0;padding-left:1.1em;font-size:15.5px;line-height:1.5}
.req-list li+li{margin-top:4px}
.req-meta{grid-column:1/-1;margin:2px 0 0;padding-top:9px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:#5b6472}
/* Long-tail H1's: lange samenstellingen (bv. autohuurverzekering) breken op 360px (design-review 2026-10-22). */
.hero h1{overflow-wrap:break-word;hyphens:manual}

/* Direct antwoord op productpagina (hypotheek, lead 2026-10-22): leesbaar, CTA blijft dicht bij de vouw */
.detail-answer{font-size:1.02rem;line-height:1.55;max-width:62ch;margin:10px 0 14px;color:var(--ink-soft)}
@media (max-width:760px){.detail-answer{font-size:.97rem}}
/* Direct antwoord op [aanbieder] creditcard aanvragen (design-review PR #157): zelfde behandeling als NIBC (.detail-answer),
   niet in de 21px-lede; veldkwalificatie relatief aan de omringende tekst zodat ze niet als minitekst afbreekt. */
.landing-answer{max-width:66ch}
.landing-answer p{margin:0}
.detail-answer .field-qual{font-size:.9em}
/* Handmatige advertentievlakken (2026-10-23): vaste gereserveerde hoogte tegen layout shift. */
.ad-slot{display:block;margin:28px auto;width:100%;min-width:0;box-sizing:border-box;max-width:100%;min-height:280px;padding:8px 0;text-align:center;contain:layout}
.ad-slot .ad-label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b7280);margin-bottom:6px}
.ad-slot ins.adsbygoogle{min-height:250px}
.ad-slot-inArticle{min-height:200px}
.ad-slot-inArticle ins.adsbygoogle{min-height:170px}
@media (max-width:480px){.ad-slot{min-height:300px}.ad-slot-inArticle{min-height:220px}}
/* Geen leeg gelabeld vlak als Google niets levert (data-ad-status="unfilled"): hele slot inklappen. */
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none!important}
/* Fallback zonder :has(): de ins zelf verbergen (AdSense-help 10762946); het vlak klapt in via .ad-slot-unfilled (script in het slot). */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.ad-slot.ad-slot-unfilled{display:none!important}

/* Aanvraagdirectory: broninformatie en bereikbare sprongdoelen. */
.application-source{display:block;margin-top:6px}
.application-table .apply-route{display:block;margin-top:6px;color:var(--muted,#5b6472);font-size:.85em;line-height:1.35}
.prose h3[id$="-aanvragen"]{scroll-margin-top:24px}
@media(max-width:760px){.application-table td{overflow-wrap:anywhere}.application-table .btn{white-space:normal;max-width:100%;height:auto;min-height:44px}}
@media(max-width:760px){.home-hero>.landing-links{order:3}}

/* Review 2026-10-26: gidsenlinks op kaartpagina's, hypotheeklijst en hub-aanvraaglinks in huisstijl. */
.hub-apply-link{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.popular-compares{margin:24px 0;padding:16px;background:var(--bg-soft);border-radius:8px}
.popular-compares h2{font-size:1.25rem;margin:0 0 12px;font-weight:700}
.compare-links{list-style:none;padding:0;margin:0}
.compare-links li{margin:8px 0}
.compare-links a{font-weight:600;text-decoration:underline}
.hub-apply-sep{color:var(--ink-soft)}
.card-guides ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.card-guides a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ui);font-size:15px;font-weight:600;color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.card-guides a:hover{color:var(--accent)}
.mort-others-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px}
.mort-others-list li{margin:0}

/* Review ronde 2 (2026-10-26): kortere homepage-lede op telefoons (tegel 5 in beeld op 375x667), geen loshangend scheidingsteken op 320px. */
@media(max-width:760px){.home-hero .lede{font-size:17px;line-height:1.45}}
@media(max-width:390px){.home-hero .lede .lede-tail{display:none}}
@media(max-width:389px){.cc-list-head-group > :not(:first-child):not([open])::before{content:none}}

/* Eigenaar "Fix all" 2026-10-26 (tweede): cosmetische 320px-fixes en hero-rente zonder mono-spatiëring. */
@media(max-width:360px){
  .hero h1{font-size:36px}
  .home-hero.tasks-compact{padding-top:10px}
  .filter-toolbar{flex-wrap:wrap}
  .filter-sort{flex:1 1 100%}
  .cc-list-head-group{column-gap:14px}
}
.detail-hero .hero-price b,.detail-hero .hero-price strong{font-family:var(--ui);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* Eigenaar 2026-10-26 ("make it look more cool, people bounce"): eerste scherm met bewijsstrip, pill-links en zachte hover-polish. */
.proof-strip{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 14px;padding:0;font:600 13.5px/1.3 var(--ui);color:var(--ink-soft)}
.proof-strip li{display:inline-flex;align-items:center;gap:7px;color:var(--ink-soft)}
.proof-strip svg{color:var(--accent);flex:none}
.home-hero .home-hero-art{box-shadow:var(--shadow-l)}
.home-kiezen-btn{min-height:44px}
.landing-links a{text-decoration:none;background:var(--paper-tint);border:1px solid var(--line);border-radius:999px;padding:0 13px;min-height:40px;transition:border-color .15s,background-color .15s,color .15s}
.landing-links a:hover,.landing-links a:focus-visible{border-color:var(--accent);background:var(--card);color:var(--accent-dark)}
.landing-links-group{gap:6px 8px}
.landing-links-group b{margin-right:4px}
.ccard{transition:box-shadow .15s,border-color .15s}
.ccard:hover{box-shadow:var(--shadow-m);border-color:var(--accent)}
.btn{transition:box-shadow .12s,transform .12s,background-color .12s}
.btn:hover{box-shadow:var(--shadow-m)}
@media(prefers-reduced-motion:reduce){.ccard,.btn,.landing-links a{transition:none}}
@media(max-width:760px){
  .home-hero>.proof-strip{order:2;margin:10px 0 0;gap:6px 14px;font-size:13px}
  .home-hero .home-cta-row{order:3;margin:12px 0 4px}
  .home-hero>.landing-links{order:4}
  .landing-links a{min-height:44px}
}
/* Eigenaar 2026-10-26 ("header inconsistent with the layout", mobiele screenshots /creditcards):
   de plakkende filterbalk loopt op mobiel van rand tot rand, met eigen onderrand en zachte schaduw,
   zodat hij als één balk leest en niet als losse blokken over de kaarten heen. */
@media(max-width:760px){
  .filter-toolbar{margin:0 calc(-1 * var(--hub-pad,16px)) 6px;padding:8px var(--hub-pad,16px);background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 8px 14px -10px rgba(21,32,48,.38)}
}

/* Eigenaar 2026-10-26 ("endless list of details", NerdWallet-structuur): compacte kaartrijen.
   Standaard: merk, naam, prijs met kostenvoorwaarden (prijswijzigingen en tijdelijke acties blijven zichtbaar),
   Sterk-regel bovenaan, één voordeel, kernfeiten, Let op, knoppen, bron.
   Extra voordelen en alle beslisfeiten openen met "Alle details". */
#creditcard-results .ccard-credit .crow-main{gap:6px}
#creditcard-results .ccard-credit .crow-main .hl-note.sterk{order:-1;margin:0 0 2px}
#creditcard-results .ccard-credit:not(:has(.crow-more[open])) .crow-benefits,
#creditcard-results .ccard-credit:not(:has(.crow-more[open])) .crow-value-label,
#creditcard-results .ccard-credit:not(:has(.crow-more[open])) .crow-facts{display:none}
#creditcard-results .ccard-credit .crow-more summary::after{content:"· alle voordelen en feiten";margin-left:.35em;font-weight:400;color:var(--ink-soft)}
#creditcard-results .ccard-credit:has(.crow-more[open]) .crow-more summary::after{content:""}
#creditcard-results .ccard-credit .crow-more{margin-top:0;padding-top:4px}
#creditcard-results .ccard-credit .crow-value-label{margin:0 0 2px}
@media(max-width:760px){
  #creditcard-results .ccard-credit .crow-more summary::after{content:"· meer"}
  #creditcard-results .ccard-credit .crow-side-credit{gap:6px 16px}
  #creditcard-results .ccard-credit .cta-caption{margin:0}
}
/* Samenvattingstabel onder de lijst. */
.cc-summary{margin-top:28px}
.cc-summary h2{margin:0 0 6px}
.cc-summary-lede{font:400 15px/1.5 var(--ui);color:var(--ink-soft);margin:0 0 14px;max-width:760px}
.summary-table th[scope="row"]{font-weight:700}
.summary-table th[scope="row"] a{color:var(--ink);text-decoration:none}
.summary-table th[scope="row"] a:hover{text-decoration:underline}
.summary-table th[scope="row"] small{display:block;font-weight:400;font-size:12px;color:var(--ink-soft)}
.summary-table .sum-unit{font-size:12px;color:var(--ink-soft)}
.summary-table td,.summary-table th{vertical-align:top}
.cc-summary .table-wrap{position:relative}
@media(max-width:760px){
  .cc-summary .table-wrap{overflow:visible}
  .summary-table.stack-mobile th[scope="row"]{display:block;width:100%;box-sizing:border-box;border:0;padding:0 0 8px;background:none;text-transform:none;letter-spacing:0;font:700 17px/1.3 var(--ui);color:var(--ink)}
  .summary-table.stack-mobile td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0}
  .summary-table.stack-mobile td[data-label]::before{margin:0;flex:0 0 auto}
  .summary-table.stack-mobile td .sum-val{text-align:right;min-width:0}
  .summary-table.stack-mobile th[scope="row"] a{display:flex;align-items:center;min-height:44px}
  .summary-table.stack-mobile td.sum-link{display:none}
}
/* Kernfeiten (eigenaarsscreenshots NerdWallet 2026-10-26): koersopslag en aankoopverzekering als
   label/waarde-rijen; verdwijnen zodra "Alle details" open is (daar staan de volledige feiten). */
.crow-keyfacts{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:4px 22px;font-family:var(--ui);font-size:14px}
.crow-keyfacts>div{display:flex;gap:6px;align-items:baseline;min-width:0}
.crow-keyfacts dt{font-weight:500;color:var(--ink-soft)}
.crow-keyfacts dd{margin:0;font-weight:700;color:var(--ink)}
.crow-keyfacts dd.dd-check{font-weight:500;color:var(--ink-soft)}
#creditcard-results .ccard-credit:has(.crow-more[open]) .crow-keyfacts{display:none}
/* Mobiel: merk en naam, Sterk-label, één voordeel, Let op, Aanvragen, dan de kernfeiten als rijen. */
@media(max-width:760px){
  #creditcard-results .ccard-credit .crow-main .hl-note.sterk{order:1;margin:2px 0 0;align-self:flex-start}
  #creditcard-results .ccard-credit .crow-keyfacts{order:4;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;margin:4px 0 0;font-size:14.5px;border-top:1px solid var(--line)}
  #creditcard-results .ccard-credit .crow-keyfacts>div{display:contents}
  #creditcard-results .ccard-credit .crow-keyfacts dt,#creditcard-results .ccard-credit .crow-keyfacts dd{padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
  #creditcard-results .ccard-credit .crow-keyfacts dt{padding-right:14px}
  #creditcard-results .ccard-credit .crow-keyfacts dd{text-align:right}
  #creditcard-results .ccard-credit .crow-keyfacts dd{overflow-wrap:anywhere}
}
/* Samenvattingstabel: kaartnaam leesbaar (niet de kapitale labelstijl van .fact-table th). */
.summary-table tbody th[scope="row"]{text-transform:none;letter-spacing:0;font:700 15px/1.35 var(--ui);color:var(--ink);width:34%;background:var(--card)}
.summary-table th[scope="row"] small{text-transform:none;letter-spacing:0}
.summary-table td.sum-link{white-space:nowrap;text-align:right}
.summary-table td .sum-change{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px}
@media(max-width:760px){.summary-table.stack-mobile td[data-label="Kosten"]{flex-wrap:wrap}.summary-table.stack-mobile td .sum-change{flex-basis:100%;text-align:right}}
/* Review 2026-10-26 (DESIGN): kolombreedtes en uitlijning samenvattingstabel op desktop. */
@media(min-width:761px){
  .summary-table thead th:nth-child(1){width:30%}
  .summary-table thead th:nth-child(2){width:28%}
  .summary-table thead th:nth-child(3){width:22%}
  .summary-table thead th:nth-child(4){width:14%}
  .summary-table td.sum-link a{min-height:0;display:inline}
}
#creditcard-results .crow-keyfacts .field-qual{font-weight:400;margin-left:2px}
.cc-summary-note{font:400 13.5px/1.5 var(--ui);color:var(--ink-soft);margin:10px 0 0;max-width:760px}
/* Eigenaar 2026-10-26 ("the headers of the credit cards are all over the place, not symmetric"):
   mobiele kopband met vaste opbouw op elke kaart. Rij 1: merkvak links, prijs rechts (zelfde hoogte,
   verticaal gecentreerd, ongeacht logo of tekstbadge). Rij 2: kaartnaam over de volle breedte.
   Rij 3: uitgever (alleen als die iets toevoegt; anders sr-only en geen lege rij). */
@media(max-width:760px){
  .ccard-credit .crow-identity{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px}
  .ccard-credit .crow-identity .crow-idtext{display:contents}
  .ccard-credit .crow-identity>.crow-visual{grid-column:1;grid-row:1;align-self:center}
  .ccard-credit .crow-identity .crow-price-top{grid-column:2;grid-row:1;justify-self:end;text-align:right;margin:0}
  .ccard-credit .crow-identity .crow-price-top>strong,.ccard-credit .crow-identity .crow-price-top>span{white-space:nowrap}
  .ccard-credit .crow-identity .crow-name{grid-column:1/-1;grid-row:2;margin:2px 0 0}
  .ccard-credit .crow-identity .crow-issuer:not(.sr-only){grid-column:1/-1;grid-row:3;margin:-6px 0 0}
}
@media(max-width:359px){.ccard-credit .crow-identity .crow-price-top>span{display:block;white-space:normal}}
/* Eigenaar 2026-10-26 ("make it clear that you can scroll sideways for more options"):
   doel-pillen op mobiel lopen tot de schermrand, met een duidelijke rand-vervaging en een
   ronde pijlknop zolang er keuzes buiten beeld staan (JS zet .qf-has-more en toont #qf-more). */
.qf-more{display:none}
@media(max-width:760px){
  .quick-filters{position:relative}
  .quick-filters .qf-buttons{margin:0 calc(-1 * var(--hub-pad,16px));padding:0 var(--hub-pad,16px);scroll-padding-inline:var(--hub-pad,16px);-webkit-mask-image:none;mask-image:none}
  .quick-filters.qf-has-more .qf-buttons{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),rgba(0,0,0,.2) calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),rgba(0,0,0,.2) calc(100% - 24px),transparent)}
  .qf-more{position:absolute;right:calc(-1 * var(--hub-pad,16px) + 8px);bottom:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);box-shadow:0 2px 10px rgba(21,32,48,.22);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;z-index:2}
  .qf-more[hidden]{display:none}
  .qf-more:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
}
/* Studentencheck (/creditcard-student): selects in huisstijl, 16px tegen iOS-zoom (lead 2026-10-30). */
.student-check select{font:16px var(--ui);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 12px}

/* ================================================================
   UX BAKE-OFF LANE B — "LIGHT EDITORIAL" (eigenaarsorder 2026-10-31,
   master prompt v2). Een override-laag AAN HET EINDE van dit bestand:
   alle bestaande regels blijven intact (tests pinnen er meerdere);
   hier wint de cascade op gelijke specificiteit. Richting: crèmepapier,
   redactionele serif voor koppen (Instrument Serif, SIL OFL,
   zelf-gehost), Plus Jakarta Sans voor UI en data, teal als enige
   merkaccent, amber uitsluitend voor beperkingen/waarschuwingen.
   Geen data-, claim-, volgorde- of advertentiewijzigingen.
   ================================================================ */
@font-face{font-family:"Instrument Serif";src:url("/fonts/instrument-serif-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url("/fonts/instrument-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";src:url("/fonts/instrument-serif-italic-ext.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url("/fonts/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/plus-jakarta-sans-ext.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/plus-jakarta-sans.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* SKIN "MIDNIGHT" (eigenaarsorder 2026-11-01): de eigenaar vond de
   teal/goud-huid te veel op ABN AMRO lijken en koos variant A
   "Midnight" — primair diep navy #0B2447, accent goud #C9A227,
   bleke blauwgrijze tinten i.p.v. de tealwassen. Alle merk-teal- en
   oude goudwaarden in dit bestand (tokens én LB-literals, incl. de
   hero-scrims) zijn op die familie omgezet; semantische kleuren
   (positief-groen #146C43, waarschuwingsamber, danger) en de
   verticale dieptinten van leningen/sparen/hypotheken/adviseurs
   zijn bewust ongewijzigd. Hero-foto opnieuw gegradeerd naar
   navy-muur (zelfde glow-recept als ronde 8). */
:root{
  --paper:#FAF9F6; --paper-tint:#F4F1EA; --card:#ffffff;
  --ink:#10283F; --ink-soft:#41546E; --ink-faint:#63748C;
  --line:#E3DCCB; --line-soft:#ECE7D8;
  --accent:#1d4e89; --accent-dark:#0b2447; --accent-soft:#e6ecf4;
  --radius:18px; --radius-s:10px;
  --shadow-s:0 1px 2px rgba(16,40,63,.05),0 1px 6px rgba(16,40,63,.04);
  --shadow-m:0 1px 3px rgba(16,40,63,.06),0 8px 22px rgba(16,40,63,.05);
  --shadow-l:0 2px 6px rgba(16,40,63,.06),0 18px 44px rgba(16,40,63,.10);
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
body{font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums}
::selection{background:var(--accent-soft)}

/* --- Redactionele koppen: serif, normaal gewicht, krappe leading --- */
.hero h1,.tasks h1{font-weight:400;font-size:clamp(42px,5vw,56px);line-height:1.04;letter-spacing:-.015em}
.hero h2{font-weight:400;font-size:clamp(32px,4vw,46px);line-height:1.08;letter-spacing:-.01em}
.sec h2{font-weight:400;font-size:clamp(29px,3.4vw,39px);line-height:1.1;letter-spacing:-.01em}
.sit-col h2{font-weight:400}
.kicker{color:var(--accent);letter-spacing:.16em}
.lede{color:var(--ink-soft)}

/* --- Masthead: licht en redactioneel i.p.v. donkere balk --- */
.mast{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.mast-main{padding:14px 0}
.brand b{font-family:var(--display);font-weight:400;font-size:37px;letter-spacing:.015em;color:var(--ink)}
.brand b i{color:var(--accent)}
.brand span{color:var(--ink-faint);letter-spacing:.18em}
.nav a{color:var(--ink-soft);font-weight:600}
.nav a:hover{background:var(--accent-soft);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--accent);color:#fff;font-weight:700}
.nav-toggle{color:var(--ink);border-color:var(--line)}
.mast :focus-visible{outline-color:var(--accent)}

/* --- Footer: licht, zelfde papierfamilie --- */
.foot{background:var(--paper-tint);color:var(--ink-soft);border-top:1px solid var(--line)}
.foot .brandline{color:var(--ink);font-family:var(--display);font-weight:400;letter-spacing:.015em}
.foot .brandline i{color:var(--accent)}
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--accent-dark)}
.foot-section summary{color:var(--ink)}

/* --- Knoppen: rustig, 50px, royale radius --- */
.btn{border-radius:12px;min-height:50px;padding:13px 26px;font-weight:600;letter-spacing:.01em;box-shadow:var(--shadow-s);transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{background:var(--paper-tint);color:var(--ink);border-color:var(--ink-faint)}
@media (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-1px)}
  .cat-card:hover{transform:translateY(-2px)}
  .ccard{transition:box-shadow .2s ease,border-color .2s ease}
}

/* --- Homepage-hero (Lane B): lichte redactie-opener + specimen --- */
.lb-hero{padding-top:46px}
.lb-hero-grid{align-items:start;margin-bottom:26px}
.lb-hero .kicker{margin:0 0 14px}
.lb-hero h1 i{font-style:italic;color:var(--accent)}
.lb-hero .lede{font-size:19px;line-height:1.55;max-width:540px;margin:0}
.lb-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}
.proof-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;gap:10px 28px}
.proof-strip li{color:var(--ink-soft);font-size:14.5px;font-weight:600}
.proof-strip svg{color:var(--accent)}

/* Het vergelijkingsspecimen: twee echte producten, kop aan kop. */
.lb-specimen{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-l);padding:22px 24px 16px;min-width:0}
.lb-spec-kicker{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.lb-spec-grid{display:grid;grid-template-columns:1fr 1fr}
.lb-spec-col{padding:0 18px;min-width:0}
.lb-spec-col:first-child{padding-left:0;border-right:1px solid var(--line-soft)}
.lb-spec-col:last-child{padding-right:0}
.lb-spec-id .crow-visual{height:34px;justify-content:flex-start}
.lb-spec-id h3{font-family:var(--ui);font-size:16.5px;font-weight:700;line-height:1.25;margin:10px 0 0}
.lb-spec-id h3 a{color:var(--ink);text-decoration:none}
.lb-spec-id h3 a:hover{color:var(--accent-dark);text-decoration:underline}
.lb-spec-chip{display:inline-block;background:var(--accent-soft);color:var(--accent-dark);font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;margin:10px 0 0;line-height:1.5}
.lb-spec-chip-empty{visibility:hidden}
.lb-spec-rows{margin:14px 0 0}
.lb-spec-rows>div{padding:8px 0;border-top:1px solid var(--line-soft)}
.lb-spec-rows dt{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);margin:0}
.lb-spec-rows dd{font-size:16px;font-weight:600;color:var(--ink);margin:2px 0 0}
.lb-spec-rows .lb-spec-big{font-size:27px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.lb-spec-rows .lb-spec-big span{font-size:13px;font-weight:600;color:var(--ink-soft)}
.lb-spec-src{font-size:12px;color:var(--ink-faint);margin:10px 0 0;line-height:1.45}
.lb-spec-foot{border-top:1px solid var(--line-soft);margin:14px 0 0;padding-top:12px;font-size:15px}

/* Categorietegels: luchtiger, serif-loze datastijl, teal-actie. */
.cat-card{border-radius:20px;padding:26px 22px 22px;box-shadow:var(--shadow-s);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.cat-card:hover{border-color:var(--accent);box-shadow:var(--shadow-m)}
.cat-card b{font-size:19px;font-weight:700}
.cat-value{color:var(--ink-soft);font-size:15px;line-height:1.5}
.cat-go{color:var(--accent);font-weight:700}

/* --- /creditcards: doelentriage boven de lijst (Lane B) --- */
.cc-triage{margin:20px 0 2px}
.cc-triage .qf-label{display:block;font-family:var(--display);font-size:25px;font-weight:400;line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0 0 12px;text-transform:none}
.cc-triage .qf-buttons{display:flex;flex-wrap:wrap;gap:10px}
.cc-triage .qf-pill{background:#fff;border:1px solid var(--line);border-radius:14px;min-height:58px;padding:10px 18px;font-size:15px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-s);white-space:normal;text-align:left}
.cc-triage .qf-pill:hover{border-color:var(--accent);box-shadow:var(--shadow-m)}
.cc-triage .qf-pill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.cc-triage .qf-more{background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--accent-dark)}
.cc-triage .active-bar{margin:0 0 12px}
.cc-triage .active-bar:empty{display:none}

/* Hubkop: compact, serif, één rustige actierij. */
.cc-guide-head h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,4vw,44px);line-height:1.08;letter-spacing:-.01em}
.cc-guide-head .cc-lede, .cc-guide-head .lede{color:var(--ink-soft)}
.cc-list-head h2{font-family:var(--display);font-weight:400;letter-spacing:-.01em}

/* --- Productkaarten: lichte identiteitsplaat, data-hiërarchie --- */
.ccard{box-shadow:var(--shadow-m)}
.ccard:hover{box-shadow:var(--shadow-l);border-color:#D8D0BA}
.crow-identity{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line-soft);padding:14px 20px}
.crow-identity :focus-visible,.detail-identity :focus-visible{outline-color:var(--accent)}
.crow-identity .crow-issuer{color:var(--ink-faint)}
.crow-identity .crow-price-top{color:var(--ink)}
.crow-identity .crow-price-top span,.crow-identity .crow-price-top small{color:var(--ink-soft)}
.crow-name{font-size:20px;font-weight:700;letter-spacing:-.01em}
.crow-price-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);margin:0}
.crow-amount{font-size:31px;font-weight:800;letter-spacing:-.015em;line-height:1.05;color:var(--ink)}
.crow-period{font-size:14px;font-weight:600;color:var(--ink-soft)}
.crow-fee-note{color:var(--ink-soft);font-size:13.5px;line-height:1.5}
.crow-source{color:var(--ink-faint);font-size:12.5px}
.crow-keyfacts{margin:14px 0 4px}
.crow-keyfacts>div,.crow-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:7px 0;border-top:1px solid var(--line-soft)}
.crow-keyfacts dt,.crow-facts dt{font-size:13px;font-weight:600;color:var(--ink-faint);margin:0}
.crow-keyfacts dd,.crow-facts dd{font-size:15px;font-weight:600;color:var(--ink);margin:0;text-align:right}
.hl-note{background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:9px 12px}
.hl-note.sterk{display:inline-block;background:var(--accent-soft);border:1px solid #bccfe4;border-left:1px solid #bccfe4;color:var(--accent-dark);border-radius:999px;padding:3px 12px}
.hl-note.sterk b{color:var(--accent-dark)}
.topkeuze-badge{color:var(--accent-dark);background:var(--accent-soft);border-color:#bccfe4}
.cmp-pick input{accent-color:var(--accent)}
.crow-more summary{font-weight:600;color:var(--accent-dark)}
@media (min-width:761px){
  .crow-side{border-left:1px solid var(--line-soft);padding-left:22px}
}

/* --- Detailpagina als dossier --- */
.detail-identity{background:var(--card);border:1px solid var(--line);border-radius:16px;color:var(--ink);box-shadow:var(--shadow-s)}
.detail-hero h1{font-family:var(--ui);font-weight:800;font-size:clamp(26px,3vw,34px);letter-spacing:-.01em;line-height:1.15}
.detail-hero-panel{border-radius:20px;box-shadow:var(--shadow-m);padding:26px}
.detail-hero-panel .hero-price b,.detail-hero-panel .hero-price strong{font-family:var(--ui);font-weight:800;font-size:34px;letter-spacing:-.01em}
.panel{border-radius:20px;box-shadow:var(--shadow-s)}
.panel h2,.panel h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
.fact-table{border-radius:16px;box-shadow:var(--shadow-s)}
.fact-table th{background:var(--paper-tint);color:var(--ink-faint)}
.guide-card{border-radius:18px}
.guide-card h3{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:-.01em}
.link-arrow{color:var(--accent-dark);font-weight:600}

/* --- Advertenties: quarantaine-wel (plaatsing/ID's ongewijzigd) --- */
.ad-slot{background:var(--paper-tint);border:1px solid var(--line-soft);border-radius:16px;padding:14px 12px 10px}

/* --- Vergelijkingsbalk: lichte zwevende dock --- */
.cmp-bar{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-l)}
.cmp-bar-clear{border-color:var(--line);color:var(--ink)}
.cmp-bar-clear:hover{border-color:var(--ink-faint)}
.cmp-bar-msg{color:var(--gold-deep)}

/* --- Mobiel: vouwregels en compacte triage --- */
@media (max-width:760px){
  .hero h1,.tasks h1{font-size:37px;line-height:1.06}
  .lb-hero{padding-top:28px}
  .lb-hero .lede{font-size:17.5px}
  .lb-specimen{padding:18px 16px 12px}
  .lb-spec-col{padding:0 10px}
  .lb-spec-rows .lb-spec-big{font-size:22px}
  .lb-spec-id h3{font-size:15px}
  .cc-triage{margin-top:14px}
  .cc-triage .qf-label{font-size:22px}
  .cc-triage .qf-buttons{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:2px 20px 8px;scrollbar-width:none}
  .cc-triage .qf-buttons::-webkit-scrollbar{display:none}
  .cc-triage .qf-pill{min-height:44px;border-radius:999px;flex:0 0 auto;white-space:nowrap;padding:8px 16px}
  .cc-actions .btn{min-height:44px;padding:10px 18px}
  .crow-side{border-left:0;border-top:1px solid var(--line-soft);padding-left:0;padding-top:14px}
  .crow-amount{font-size:28px}
}
@media (max-width:480px){
  .lb-spec-grid{grid-template-columns:1fr}
  .lb-spec-col:first-child{border-right:0;border-bottom:1px solid var(--line-soft);padding:0 0 14px}
  .lb-spec-col:last-child{padding:14px 0 0}
}

/* --- Lane B-nacorrecties na screenshotreview (2026-10-31) --- */
.lb-spec-rows .lb-spec-big span{margin-left:7px}
.cat-body b{font-weight:400;letter-spacing:0}
.home-hero .cat-value{display:block;font-size:14px;line-height:1.45}
.home-hero .cat-card{align-items:flex-start}

/* ================================================================
   LANE B — FIXRONDE na het juryoordeel (2026-10-31). De jury
   (ChatGPT Astra-eindronde + Gemini) kroonde Lane B, met een
   verplichte herstellijst. Alleen presentatie: geen data-, claim-,
   volgorde- of advertentiewijzigingen; wettelijke teksten (AFM)
   blijven woordelijk identiek — hooguit de omlijsting verandert.
   ================================================================ */

/* DEFECT 1 — onzichtbare producttitel op detailpagina's. De basis
   zet .detail-identity h1 op color:#fff (bedoeld voor de oude navy
   band); Lane B maakte het paneel wit maar erfde de witte titel:
   wit-op-wit op lening-, spaar- en hypotheekdetails. (Creditcard-
   details hadden al een eigen ink-regel en waren niet geraakt.) */
.detail-identity h1{color:var(--ink)}

/* DEFECT 2 — footercontact onleesbaar. De basis kleurt .foot-contact
   #c9c2b2 en de maillink #fff (bedoeld voor de oude donkere footer);
   op het lichte Lane B-papier is dat ~1,5:1 contrast. Nu ink-soft
   resp. accent-dark: ~6,9:1 (WCAG AA) op --paper-tint. */
.foot .foot-contact{color:var(--ink-soft)}
.foot .foot-contact a{color:var(--accent-dark)}

/* VERBETERING — specimen: de logotegel (basis: min-height:120px +
   achtergrond) domineerde de jaarkosten. Tegel weg, logo bescheiden,
   cijfers leiden. Bron/controledatum blijft ongewijzigd zichtbaar. */
.lb-spec-id .crow-visual{min-height:0;height:40px;padding:0;background:none;border-radius:0;justify-content:center;align-items:flex-start}
.lb-spec-id .crow-visual .issuer-logo img{max-height:26px;max-width:118px}
.lb-spec-id h3{margin-top:8px}

/* VERBETERING — kleine serifkoppen leesbaarder: Instrument Serif
   bestaat alleen in gewicht 400, dus schaal omhoog i.p.v. gewicht. */
.panel h2{font-size:28px;line-height:1.12}
.panel h3{font-size:23px;line-height:1.15}
.guide-card h3{font-size:23px}

/* VERBETERING — AFM-waarschuwing als herkenbaar reguleringskader:
   alleen de omlijsting (neutrale haarlijn + iets meer verticale
   ruimte). Tekst, lettertype en kleuren van de waarschuwing zelf
   blijven byte-identiek aan de basis. */
p.disclaimer{border-color:#D1D5DB;padding-top:17px;padding-bottom:17px}
.cc-risk,.loan-risk{border:1px solid #D1D5DB;border-radius:8px;padding:7px 11px}

/* VERBETERING — masthead blijft verankerd: stevigere onderrand. */
.mast{border-bottom:1px solid #D5CDB6}

/* VERBETERING — bronregels in kaartvoeten als auditregel: mono +
   haarlijn erboven (via .crow-foot waar die nog geen rand had). */
.crow-source{font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:-.01em}
.crow-foot{border-top:1px solid var(--line-soft);padding-top:9px}

/* FIXRONDE — triagevraag ook op mobiel zichtbaar. De basis klemt
   .qf-label op de resultatenpagina tot een sr-only element (1px);
   Lane B's triage gebruikt die vraag juist als zichtbare kop
   (prompt v2, fix 3). Alleen binnen .cc-triage en alleen ≤760px
   terugdraaien; de aria-labelledby-koppeling blijft intact. */
@media (max-width:760px){
  body:has(#creditcard-results) .cc-triage .qf-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
}

/* GRAFT uit Lane A — actieve navigatie als scherpe 2px-onderstreping
   in Lane B-teal i.p.v. de zware gevulde pil uit de eerste Lane B-
   ronde; rustiger in de lichte masthead, even herkenbaar. */
.nav a[aria-current="page"]{background:transparent;color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}
.nav a[aria-current="page"]:hover{background:var(--accent-soft);color:var(--ink)}

/* GRAFT uit Lane C — kerncijfers als compacte, gelabelde metriek-
   boxen i.p.v. kale rijen (koersopslag + aankoopverzekering, met de
   kwalificatie direct naast het cijfer in dezelfde box). Zelfde
   behandeling voor de gedeelde .crow-keyfacts in alle verticalen. */
.crow-keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px}
.crow-keyfacts>div{display:block;background:var(--paper);border:1px solid var(--line-soft);border-radius:10px;padding:8px 11px;min-width:0}
.crow-keyfacts dt{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.crow-keyfacts dd{text-align:left;margin:2px 0 0;font-size:15.5px}

/* ================================================================
   MOBILE ROUND — UX-mobile-loop ronde 1 (eigenaarsorder 2026-10-31:
   mobiel minimaal 9/10 naast NerdWallet en CreditCards.com).
   Vervolg op de Lane B-laag hierboven; vrijwel alles speelt ≤760px.
   Alleen presentatie en gedrag: geen data-, claim-, volgorde-,
   titel- of advertentiewijzigingen; AFM- en disclosuredteksten
   blijven woordelijk identiek (hooguit omlijsting/kleur).
   ================================================================ */

/* --- R1.1 Mobiel menu (Exhibit 1): leesbare links op het donkere
   paneel. Het paneel erft de donkere --ink-achtergrond uit de basis,
   maar Lane B kleurde de nav-links globaal --ink-soft (1,95:1 op het
   paneel) en het actieve item --ink (1,00:1 — het woord was
   onzichtbaar; alleen de teal-onderstreping uit de fixronde bleef
   als losse boog zichtbaar). Het paneel krijgt nu zijn eigen lichte
   linkkleuren (de crèmekleur waarvoor de basislinks ooit ontworpen
   zijn); actief = gevulde teal-pil met witte tekst, geen zwevende
   onderstreping meer. Alleen ≤760px: desktopnav ongewijzigd. --- */
@media (max-width:760px){
  .nav a{color:#F4EFE4}
  .nav a:hover{background:rgba(244,239,228,.14);color:#fff}
  .nav a[aria-current="page"]{background:var(--accent);color:#fff;font-weight:700;box-shadow:none}
  .nav a[aria-current="page"]:hover{background:var(--accent-dark);color:#fff}
}

/* --- R1.2 Contrastlabels (alle breedtes): twee gemeten net-onder-AA
   teksten. "Advertentie" stond op 4,29:1 (#6B7280 op papier-tint) en
   de .kicker (o.a. "Populaire vergelijking") op 4,48:1 (teal op
   crème). Alleen de kleur schuift een stap donkerder; tekst,
   slotgeometrie en plaatsing ongewijzigd. --- */
.ad-slot .ad-label{color:#55606E}
.kicker{color:var(--accent-dark)}

/* --- R1.3 Homepage mobiel (Exhibit 2): eerst de categorieën, dan
   het specimen. De hero-sectie is ≤760px al een flexkolom met
   display:contents op de grid; de Lane B-DOM (kop → specimen →
   bewijsstrip → tegels) liet de tegels op order 1 ná het specimen
   belanden. Nu: kop (1) → categorietegels (2) → specimen (3) →
   bewijsstrip (4) → aanvraaglinks (5). De tegels worden een compact
   2-koloms icoonraster zoals bij de gebenchmarkte concurrenten; het
   specimen krijgt een compacte tweerkoloms vorm i.p.v. de gestapelde
   ~98%-viewportvariant. Desktop ≥761px: geen van deze regels. --- */
@media (max-width:760px){
  .lb-hero{padding-top:20px}
  .home-hero-copy{order:1}
  .home-hero .cat-grid{order:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
  .lb-specimen{order:3}
  .home-hero>.proof-strip{order:4}
  .home-hero>.landing-links{order:5}
  .lb-hero .kicker{margin-bottom:10px}
  .lb-hero .lede{font-size:16.5px;line-height:1.45}
  .lb-hero-actions{flex-wrap:nowrap;margin-top:18px}
  .lb-hero-actions .btn{flex:1 1 0;min-width:0;padding:12px 10px;font-size:15px;white-space:nowrap}
  .home-hero .cat-card{flex-direction:row;align-items:center;gap:10px;padding:12px;min-height:64px;border-radius:16px}
  .home-hero .cat-card:last-child{grid-column:1/-1}
  .home-hero .cat-ill svg{width:34px;height:34px}
  /* De uitlegzin per tegel (Lane B-nacorrectie toonde hem overal) maakt de
     tegels op mobiel ~150px hoog; het basisontwerp verborg hem ≤760px.
     Hersteld: naam + icoon volstaat als route. */
  .home-hero .cat-value{display:none}
  .home-hero .cat-body b{font-size:16.5px}
  .home-hero .cat-go{right:12px}
  /* Specimen compact: twee producten naast elkaar, cijfers leiden. */
  .lb-specimen{padding:16px 14px 10px;margin-top:18px}
  .lb-spec-grid{grid-template-columns:1fr 1fr}
  .lb-spec-col{padding:0 10px}
  .lb-spec-col:first-child{border-right:1px solid var(--line-soft);border-bottom:0;padding-left:0}
  .lb-spec-col:last-child{padding-right:0}
  .lb-spec-kicker{margin-bottom:10px}
  .lb-spec-id .crow-visual{height:32px}
  .lb-spec-id .crow-visual .issuer-logo img{max-height:22px;max-width:96px}
  .lb-spec-id h3{font-size:13.5px;margin-top:6px}
  .lb-spec-chip{font-size:11px;padding:2px 8px;margin-top:8px}
  .lb-spec-rows{margin-top:10px}
  .lb-spec-rows>div{padding:6px 0}
  .lb-spec-rows dt{font-size:10.5px}
  .lb-spec-rows dd{font-size:14.5px}
  .lb-spec-rows .lb-spec-big{font-size:20px}
  .lb-spec-src{font-size:11px;margin-top:8px}
  .lb-spec-foot{margin-top:10px;padding-top:10px;font-size:14px}
}

/* --- R1.4 Tikdoelen: de situatie-links op de homepage waren 33px
   hoog (gemeten). Nu minimaal 44px, net als de rest van de primaire
   bediening. Het vergelijk-label (.cmp-pick) heeft in de basis al
   min-height:44px; hier alleen de flexuitlijning expliciet zodat de
   hele labelrij in elke context (kaartvoet, kiezer, detail) als
   tikdoel telt — het vinkje zelf blijft 20px. --- */
@media (max-width:760px){
  .sit-col a{display:flex;align-items:center;min-height:44px}
  .cmp-pick{display:inline-flex;align-items:center;min-height:44px}
}

/* --- R1.5 /creditcards mobiel: korter voorwerk zodat de eerste
   echte kaart eerder in beeld komt. De H1 past op één regel (30px
   serif i.p.v. twee regels op 34px); triage, merk-disclosure en
   lijstkop krijgen strakkere marges. De merklijst is al een
   disclosure en blijft op mobiel gesloten (JS zet dat al); hier
   alleen de voetafdruk. --- */
@media (max-width:760px){
  body:has(#creditcard-results) .cc-guide-head h1{font-size:30px}
  .cc-triage{margin:10px 0 0}
  .brand-filter{margin:0 0 4px}
  .brand-disclosure summary{padding:6px 0}
  .cc-list-head{margin:4px 0 6px}
}

/* --- R1.6 Kaart-anatomie mobiel: voordeel vóór prijs (eigenaars-
   regel 2026-10-07, NerdWallet-hiërarchie). De prijs verhuist van de
   identiteitsband (daar stond hij rechtsboven, vóór elk voordeel)
   naar het bestaande prijsblok in de actiekolom — dat blok bevat
   dezelfde bedrag-, eenheid- en vrijstellingsvoorwaarde
   (feePriceHtml: fee-cond), dus er verdwijnt geen gegeven van de
   kaart. Nieuwe scanvolgorde ≤760px: naam → voordelen → Let op →
   prijs + voorwaarden → Aanvragen → kerncijfers/feiten → bron +
   Vergelijk → Alle details. Alleen CSS-volgorde en -zichtbaarheid;
   DOM, data en teksten ongewijzigd. --- */
@media (max-width:760px){
  .ccard-credit .crow-price-top{display:none}
  .ccard-credit .crow-side-credit .crow-price-label,
  .ccard-credit .crow-side-credit .crow-price,
  .ccard-credit .crow-side-credit .fee-cond{display:block}
  .ccard-credit .crow-side-credit .crow-priceblock{order:3}
  .ccard-credit .crow-side-credit .crow-actions{order:4}
  #creditcard-results .ccard-credit .crow-main .hl-note.sterk{order:2}
  #creditcard-results .ccard-credit .crow-keyfacts{order:5}
  .ccard-credit .crow-facts{order:5}
}

/* --- R1.7 'controleer bij aanbieder' rustiger in de kerncijfers en
   het specimen: de kwalificatie blijft woordelijk staan, maar als
   eigen voetnootregel onder het cijfer i.p.v. er direct achteraan —
   dat haalt de herhalingsruis uit de scan zonder iets te schrappen. --- */
.crow-keyfacts dd .field-qual,.lb-spec-rows dd .field-qual{display:block;margin:1px 0 0;font-size:11px}

/* --- R1.8 Detail-hero mobiel (creditcards): het prijspaneel was
   transparant zonder horizontale padding (border:0; padding:8px 0),
   waardoor prijs en maandbedrag tegen de schermrand liepen terwijl
   het identiteitspaneel erboven wél is ingesprongen. Paneel wordt
   weer een echte kaart in dezelfde inspringing als de identiteit. --- */
@media (max-width:760px){
  .detail-hero-credit .detail-hero-panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow-s)}
}

/* --- R1.9 Vergelijkbalk: de gekozen producten bij naam tonen.
   Op mobiel krijgen de namen een eigen regel boven teller + knoppen;
   de gereserveerde bodypadding groeit mee zodat de balk nooit
   inhoud bedekt. Desktop: namen inline, balk blijft één rij. --- */
.cmp-bar-names{font-family:var(--ui);font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cmp-bar-names[hidden]{display:none}
@media (max-width:760px){
  /* De basisbalk is ≤760px nowrap — dan kan de namenregel nooit een eigen
     regel krijgen en wordt hij samengeperst. Wrap herstellen. */
  .cmp-bar{flex-wrap:wrap}
  .cmp-bar-names{flex-basis:100%;white-space:normal;overflow:visible;text-overflow:clip}
  body:has(.cmp-bar:not([hidden])){padding-bottom:118px}
}

/* ================================================================
   MOBILE ROUND 2 — UX-mobile-loop ronde 2 (eigenaarsorder 2026-10-31:
   mobiel minimaal 9/10 naast NerdWallet en CreditCards.com).
   Vervolg op de R1-laag hierboven. Rechter-gedreven: visueel
   Ankersysteem, kaartcompressie, tray op detailpagina's, mobiele
   vergelijkingsweergave, geleide instap, detailhiërarchie.
   Alleen presentatie en gedrag: geen data-, claim-, volgorde-,
   titel- of advertentiewijzigingen; disclosureteksten blijven
   woordelijk identiek (hooguit omlijsting/kleur/volgorde op het
   scherm — de DOM-tekst verandert niet).
   ================================================================ */

/* Door de build toegevoegde elementen: op desktop onzichtbaar, zodat
   de desktopweergave byte-voor-byte de Lane B-vorm houdt. */

.lb-guide{display:none}
.lb-counts{display:none}
.lb-spec-cue{display:none}

@media (max-width:760px){
  /* --- R2.1 Homepage: geleide instap + geïllustreerde tegels +
     specimen als teaser (fix 1, 5, 7) --- */
  .lb-hero{padding-top:16px}
  .lb-hero-actions .btn-secondary{display:none}
  .lb-guide{display:flex;flex-direction:column;gap:1px;margin-top:12px;padding:13px 16px;background:#e8eef6;border:1px solid #c2d2e4;border-radius:16px;text-decoration:none;color:var(--ink)}
  .lb-guide-q{font:600 15.5px/1.3 var(--ui)}
  .lb-guide-a{font:700 14.5px/1.3 var(--ui);color:var(--accent-dark)}
  /* Tegels: goedgekeurd redactioneel beeld als duimnagel (valt het
     beeld weg, dan blijft het lijnpictogram staan, nu groter en in
     een eigen kleurvlak per categorie). */
  .home-hero .cat-card{--vacc:#1d4e89;--vtint:#e7edf5;min-height:66px;padding:10px 12px;gap:12px;border-left:4px solid var(--vacc)}
  .home-hero .cat-card[href="/leningen"]{--vacc:#a8871f;--vtint:#f8f1db}
  .home-hero .cat-card[href="/sparen"]{--vacc:#3E7C4F;--vtint:#E9F3E6}
  .home-hero .cat-card[href="/hypotheken"]{--vacc:#33608F;--vtint:#E6EDF7}
  .home-hero .cat-card[href="/financieel-adviseurs"]{--vacc:#5F5AA8;--vtint:#ECEAF6}
  .home-hero .cat-ill svg{width:42px;height:42px}
  .home-hero .cat-card .cat-icon rect:first-child{fill:var(--vtint)}
  /* Specimen-teaser: alleen de eerste, volledige vergelijkingsrij
     (kosten + bron + controledatum) in scherm 1; de overige rijen
     staan één tik verder op /creditcards. Vaste identiteitszone
     (92px) zodat beide kolommen exact gelijk starten — de R1-
     scheefstand (badge/naamhoogte) kan zo niet terugkomen. */
  .lb-specimen{padding:14px 14px 10px;margin-top:16px}
  .lb-spec-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lb-spec-col{min-width:0}
  .lb-spec-col:first-child{padding:0 12px 0 0;border-right:1px solid var(--line-soft)}
  .lb-spec-col:last-child{padding:0 0 0 12px}
  .lb-spec-id{display:flex;flex-direction:column;height:92px}
  .lb-spec-id .crow-visual{height:30px;display:flex;align-items:center}
  .lb-spec-id h3{font-size:12.5px;line-height:1.25;margin-top:6px;overflow-wrap:break-word}
  .lb-spec-chip{display:inline-flex;align-items:center;margin-top:6px;height:38px;overflow:hidden}
  .lb-spec-rows{margin-top:8px}
  .lb-spec-rows>div:nth-child(n+2){display:none}
  .lb-spec-rows .lb-spec-big{font-size:21px}
  .lb-spec-rows dd>span{display:block;margin-top:1px}
  .lb-spec-src{font-size:11.5px;margin-top:6px}
  .lb-spec-foot{display:none}
  .lb-spec-cue{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
  .lb-spec-cue a{font:700 14.5px var(--ui);color:var(--accent-dark);text-decoration:none}
  /* Vertrouwensregel met uitsluitend build-afgeleide aantallen. */
  .lb-counts{display:block;order:4;margin-top:14px;text-align:center;font:600 13px/1.55 var(--ui);color:var(--ink-soft)}
  .home-hero>.proof-strip{order:5}
  .home-hero>.landing-links{order:6}

  /* --- R2.2 Kaartcompressie (fix 2): vaste anatomie op mobiel —
     voordeelregel → groot cijfer → kernchips → Let op → actie →
     vergelijk + bron → details. De zijkolom verliest zijn eigen
     doos (display:contents) zodat prijs en actie in die volgorde
     tussen de hoofdinhoud kunnen staan; de actiezone houdt het
     teal vlak als conversiezone. --- */
  .compare.rows .ccard-credit{display:flex;flex-direction:column;gap:10px}
  .compare.rows .ccard-credit .crow-main,
  .compare.rows .ccard-credit .crow-side{display:contents}
  .compare.rows .ccard-credit .crow-identity{order:0}
  .compare.rows .ccard-credit .crow-value{order:1}
  .compare.rows .ccard-credit .hl-note.sterk{order:2}
  .compare.rows .ccard-credit .crow-priceblock{order:3}
  .compare.rows .ccard-credit .crow-keyfacts{order:4}
  .compare.rows .ccard-credit .crow-facts{order:4}
  .compare.rows .ccard-credit .crow-benefits{order:4}
  .compare.rows .ccard-credit .hl-note:not(.sterk){order:5}
  .compare.rows .ccard-credit .benefit-note{order:5}
  .compare.rows .ccard-credit .crow-actions{order:6}
  .compare.rows .ccard-credit .crow-foot{order:7}
  .compare.rows .ccard-credit .crow-more{order:8}
  .compare.rows .ccard-credit .crow-actions{background:var(--accent-soft);border:1px solid #bccfe4;border-radius:14px;padding:12px}
  /* Compressie komt uit het bestaande compacte-rijenpatroon:
     voordelen/feiten staan achter Alle details (gesloten toestand),
     de kostenvoorwaarde (fee-note, o.a. aangekondigde prijswijziging)
     blijft altijd zichtbaar — eigenaarsregel, zie serp-limits-test. */
  /* Kerncijfers als chips i.p.v. tabelrijen. */
  #creditcard-results .crow-keyfacts{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0}
  #creditcard-results .crow-keyfacts>div{display:flex;flex-direction:column;justify-content:flex-start;gap:0;background:var(--paper-tint);border:1px solid var(--line-soft);border-radius:12px;padding:7px 11px}
  #creditcard-results .crow-keyfacts dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
  #creditcard-results .crow-keyfacts dd{text-align:left;font-size:15.5px}
  #creditcard-results .crow-keyfacts dd .field-qual{font-size:10.5px;margin-top:1px}
  .crow-value-label{font-size:11px;margin-bottom:4px}
  .crow-why,.crow-benefits li{line-height:1.5}

  /* --- R2.3 Eigen kleur per categorie + groter heldencijfer (fix 1, 8) --- */
  .ccard{--vacc:transparent}
  .ccard-credit{--vacc:#1d4e89}
  .loan-card{--vacc:#a8871f}
  .sav-card{--vacc:#3E7C4F}
  .mort-card{--vacc:#33608F}
  .compare.rows .ccard{box-shadow:inset 0 4px 0 var(--vacc),var(--shadow-m)}
  .compare.rows .ccard .crow-amount,.compare.rows .ccard .crow-price strong.crow-amount{font-size:33px}
  .crow-source{font-size:12.5px;color:var(--ink-soft)}
  .cta-source{font-size:12.5px;color:var(--ink-soft)}
  .detail-hero-main .hero-price b,.detail-hero-main .hero-price strong{font-size:32px}

  /* --- R2.4 Tray: namen als verwijderbare chips (fix 3) --- */
  .cmp-bar-names{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
  .cmp-bar-names[hidden]{display:none}
  .cmp-bar-item{display:inline-flex;align-items:center;gap:2px;background:var(--paper-tint);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 11px;max-width:100%}
  .cmp-bar-item-name{font:600 13px/1.25 var(--ui);overflow-wrap:anywhere}
  .cmp-bar-remove{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--ink-soft);font-size:17px;line-height:1;cursor:pointer}
  .cmp-bar-remove:hover{background:#fff;color:var(--ink)}

  /* --- R2.5 Vergelijking mobiel: kaartkiezer + plakkende
     kenmerkkoppen boven de gestapelde weergave (fix 4) --- */
  .cmp-switch{position:sticky;top:0;z-index:25;display:flex;gap:8px;overflow-x:auto;padding:10px 2px;background:var(--paper)}
  .cmp-switch-btn{flex:none;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font:600 14px var(--ui);color:var(--ink);cursor:pointer}
  .cmp-switch-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
  .cmp-stacked .cmp-stack-sec{content-visibility:auto;contain-intrinsic-size:auto 320px}
  .cmp-stacked .cmp-stack-sec h3{position:sticky;top:64px;z-index:20;background:var(--paper);padding:8px 0 6px}
  .cmp-stack-card[hidden]{display:none}

  /* --- R2.6 Detail: specificatietabel als gelabelde stapel (fix 6) --- */
  .fact-table.spec-table,.fact-table.spec-table tbody{display:block}
  .fact-table.spec-table{border:0;background:none;overflow:visible}
  .fact-table.spec-table tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 8px}
  .fact-table.spec-table th{display:block;width:auto;background:none;border:0;padding:0 0 2px}
  .fact-table.spec-table td{display:block;border:0;padding:0}
}

/* Zachte instapbeweging op de homepage (fix 1d): alleen transform/
   opacity, geen layoutverschuiving; uit bij reduced-motion. */
@media (max-width:760px) and (prefers-reduced-motion: no-preference){
  @keyframes nuxo-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .home-hero-copy>*{animation:nuxo-rise .45s ease-out both}
  .home-hero-copy>*:nth-child(2){animation-delay:.03s}
  .home-hero-copy>*:nth-child(3){animation-delay:.06s}
  .home-hero-copy>*:nth-child(4){animation-delay:.09s}
  .home-hero-copy>*:nth-child(5){animation-delay:.12s}
  .home-hero .cat-card{animation:nuxo-rise .45s ease-out both}
  .home-hero .cat-card:nth-child(2){animation-delay:.05s}
  .home-hero .cat-card:nth-child(3){animation-delay:.08s}
  .home-hero .cat-card:nth-child(4){animation-delay:.11s}
  .home-hero .cat-card:nth-child(5){animation-delay:.14s}
  .lb-specimen{animation:nuxo-rise .5s .16s ease-out both}
}

/* ================================================================
   MOBILE ROUND 3 — UX-mobile-loop ronde 3 (eigenaarsorder 2026-10-31:
   mobiel minimaal 9/10 naast NerdWallet en CreditCards.com).
   Vervolg op de R1/R2-lagen. Rechter-gedreven: voller kleurensysteem,
   scanlaag op de lijsten, kwalificatie-presentatie, dichtheid van het
   eerste scherm. Alleen presentatie en gedrag: geen data-, claim-,
   volgorde-, titel- of advertentiewijzigingen; disclosureteksten
   blijven woordelijk identiek (hooguit omlijsting/kleur).
   ================================================================ */

/* Door de build toegevoegde R3-elementen: op desktop onzichtbaar,
   zodat de desktopweergave de Lane B-vorm houdt (zelfde afspraak
   als de R2-elementen hierboven). */
.lb-lede-short{display:none}
.crow-usecase{display:none}

/* Detailprijspaneel (fix 6): het "(oudste bron)"-voorbehoud staat nu
   als eigen label in het paneel i.p.v. als haakjes achter de datum;
   de datum zelf is altijd de oudste broncontrole (ongewijzigd). */
.cta-scope{margin:3px 0 0;font:600 11.5px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-dark)}

@media (max-width:760px){
  /* --- R3.1 Homepage-tegels: de categoriekleur draagt de hele tegel
     (fix 1) — vol tintvlak, wit icoonchip, dikkere linkerbalk, de
     pijl in de categoriekleur. Naam blijft --ink (contrast >11:1 op
     elke tint). --- */
  .home-hero .cat-card{background:var(--vtint);border-left:6px solid var(--vacc)}
  .home-hero .cat-card .cat-icon rect:first-child{fill:#fff}
  .home-hero .cat-go{color:var(--vacc)}

  /* --- R3.2 Stat-rij i.p.v. telregel (fix 1): dezelfde build-
     aantallen als grote cijfers in een eigen paneel; de herkomst-
     regel blijft eronder staan. --- */
  .lb-stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:14px 10px 12px;box-shadow:var(--shadow-s)}
  .lb-stat{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-width:0}
  .lb-stat b{font-family:var(--display);font-weight:800;font-size:27px;line-height:1.05;color:var(--ink)}
  .lb-stat span{font:600 10px/1.3 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
  .lb-stat-note{margin-top:9px;text-align:center;font:600 12px var(--ui);color:var(--ink-soft)}

  /* --- R3.3 Kaarten: sterkere accentbalk (6px) + tint per verticale
     voor de doel-labelstrook (fix 1 + 2a). --- */
  .ccard{--vtint:#e7edf5}
  .loan-card{--vtint:#f8f1db}
  .sav-card{--vtint:#E9F3E6}
  .mort-card{--vtint:#E6EDF7}
  .compare.rows .ccard{box-shadow:inset 0 6px 0 var(--vacc),var(--shadow-m)}

  /* --- R3.4 Doel-label boven aan elke lijstkaart (fix 2a): alleen
     mobiel zichtbaar; de tekst komt uit geverifieerde datasetvelden
     (zie build.mjs), nooit uit nieuwe claims. --- */
  .crow-usecase{display:flex;align-items:center;gap:7px;grid-column:1/-1;margin:0 0 4px;padding:7px 10px;background:var(--vtint);border-radius:9px;font:700 11px/1.25 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
  .crow-usecase::before{content:"";flex:none;width:8px;height:8px;border-radius:2.5px;background:var(--vacc)}
  .ccard-credit .crow-usecase{order:-1}

  /* --- R3.5 Hypotheekcijfers op formaat (fix 1): de vermeldingen-
     rijen toonden de rente op 17px; nu een echt heldencijfer met de
     looptijd als rustig bijschrift. --- */
  .mort-dir-rate{font-size:26px}
  .mort-dir-rate span{font-size:12.5px;font-weight:600}
  .ccard.mort-card .crow-amount{font-size:33px}

  /* --- R3.6 Kwalificatie-presentatie (fix 4): "controleer bij
     aanbieder" donkerder, recht (niet cursief) en vetter, met een
     klein amber merkje; naast een cijfer altijd op een eigen regel,
     zodat hij nooit midden in een bedrag breekt. De tekst zelf is
     ongewijzigd. Ook de tariefwijzigingsnoot krijgt dezelfde
     donkere, gemarkeerde behandeling. --- */
  .field-qual{font-style:normal;font-weight:600;color:#3D5470}
  .fact-table td .field-qual,.cmp-table td .field-qual,.cmp-stack-value .field-qual{color:#3D5470}
  .field-qual::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:#a8871f;margin-right:5px;vertical-align:1px}
  .fact-table td .field-qual,.cmp-stack-value .field-qual,.crow-facts dd .field-qual,.detail-facts dd .field-qual,.summary-table td .field-qual{display:block;margin-top:3px}
  .crow-fee-note{color:#33475F;border-left:3px solid #a8871f;padding-left:9px}
  .detail-hero .fee-cond{color:#33475F}
  .sum-change{color:#33475F;font-weight:600}

  /* --- R3.7 Eerste-schermdichtheid home (fix 5): compactere mast,
     kortere mobiele lede, strakkere ritmes en een kleiner specimen-
     voorwerk, zodat de volledige eerste teaser-rij (prijs + bron +
     datum) in scherm 1 past. Geen route-element verwijderd. --- */
  .mast{padding-top:5px;padding-bottom:5px}
  .mast-main{padding-top:8px;padding-bottom:8px}
  .brand b{font-size:27px}
  .brand span{font-size:9.5px}
  .lb-hero{padding-top:4px}
  .lb-hero .kicker{margin-bottom:6px}
  .lb-hero .lede{display:none}
  .lb-lede-short{display:block;font-size:16px;line-height:1.42;margin:12px 0 0}
  .lb-hero-actions{margin-top:12px}
  .lb-guide{margin-top:8px;padding-top:9px;padding-bottom:9px}
  .home-hero .cat-grid{margin-top:10px;gap:8px}
  .home-hero .cat-card{min-height:62px;padding-top:8px;padding-bottom:8px}
  .lb-specimen{margin-top:10px;padding:3px 12px 8px}
  .lb-spec-grid{row-gap:6px}
  .lb-spec-kicker{display:none}
  .lb-spec-id{height:84px}
  .lb-spec-id .crow-visual{height:28px}
  .lb-spec-chip{height:30px;margin-top:4px;vertical-align:top}
  .lb-spec-rows{margin-top:4px}
  .lb-spec-rows dd>span{display:inline;margin-top:0}
  .lb-spec-src{margin-top:4px}

  /* --- R3.8 Triage op de lijstpagina — HERZIEN in fixronde 1
     (Astra 8.4, PR #225): de R3.8-vervroeging (doel-pillen op mobiel
     vóór het kopblok) is teruggedraaid. De vereiste mobiele volgorde
     is weer de DOM-volgorde: kopblok (H1/acties/AFM-waarschuwing) →
     triage → "Gidsen en onderwerpen" → filters/sortering → lijst.
     De triage krijgt dus geen eigen order meer; de flex-wrapper en
     order:2 op de overige kinderen blijven staan (onschadelijk: DOM
     beslist bij gelijke order). De triage-marge valt terug op de
     R1.5-regel (margin:10px 0 0). Desktop was en blijft DOM-volgorde.
     Alleen de creditcardhub heeft .cc-triage. --- */
  body:has(.cc-triage) .wrap-compare{display:flex;flex-direction:column}
  body:has(.cc-triage) .wrap-compare>*{order:2}
  body:has(.cc-triage) .wrap-compare>.crumbs{order:0}

  /* --- R3.9 Actieve-filterchips direct boven de lijst (fix 2b):
     compare.js verplaatst de balk op mobiel hierheen; alleen de
     ademruimte rond de verplaatste balk. --- */
  .cc-results>.active-bar{margin:2px 0 10px}
}

/* Drukfeedback + één extra bewegingsmoment (fix 1): tegels, pillen,
   geleideband en vergelijkkiezer reageren voelbaar op een tik; de
   stat-rij komt zacht mee op en de vergelijkbalk schuift in.
   Alleen transform/opacity; uit bij reduced-motion. */
@media (max-width:760px) and (prefers-reduced-motion: no-preference){
  .home-hero .cat-card,.qf-pill,.lb-guide,.cmp-switch-btn{transition:transform .12s ease-out}
  .home-hero .cat-card:active,.qf-pill:active,.lb-guide:active,.cmp-switch-btn:active{transform:scale(.97)}
  .lb-counts{animation:nuxo-rise .5s .22s ease-out both}
  .cmp-bar:not([hidden]){animation:nuxo-tray-in .26s ease-out}
  @keyframes nuxo-tray-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
}

@media (max-width:760px){
  /* --- R3.10a Doel-label: eigen rij boven aan het kaartgrid (fix 2a,
     plaatsingsherstel). Zonder area viel de strook als automatisch
     geplaatst item onder de "side"-rij onder aan de kaart; alleen
     kaarten mét een strook krijgen de extra rij (:has), zodat
     ongelabelde kaarten exact de Lane B-geometrie houden. --- */
  .crow-usecase{grid-area:uc}
  .sav-card:has(> .crow-usecase),.loan-card:has(> .crow-usecase){grid-template-areas:"uc" "visual" "main" "side"}
  .compare.rows .mort-card:has(> .crow-usecase){grid-template-areas:"uc" "visual" "main" "side"}
  #mort-results .mort-card:has(> .crow-usecase){grid-template-areas:"uc uc" "visual main" "side side" "foot foot"}

  /* --- R3.10b Kleur met aanwezigheid (fix 1, aangescherpt door de
     eigenaar 2026-10-31: "het eerste scherm moet knallen — de
     pastelwassen dragen niets"). De verticale kleuren worden diepe,
     verzadigde kleurblokken i.p.v. tinten: tegels en doel-stroken
     dragen de volle kleur met witte tekst (overal ≥7:1), de
     geleideband en de stat-rij worden donkere navy-ankers, en het
     specimen krijgt een verzadigde teal kopbalk + gevulde chip.
     Redactioneel gehouden: diepe, inktachtige tinten, geen snoepkleuren. --- */
  .ccard{--vdeep:#0b2447}
  .loan-card{--vdeep:#7C4D00}
  .sav-card{--vdeep:#2E5E35}
  .mort-card{--vdeep:#26496E}
  .compare.rows .ccard{box-shadow:inset 0 6px 0 var(--vdeep),var(--shadow-m)}
  .crow-usecase{background:var(--vdeep);color:#fff}
  .crow-usecase::before{background:rgba(255,255,255,.85)}
  .home-hero .cat-card{--vdeep:#0b2447;background:var(--vdeep);border-left-color:rgba(0,0,0,.22);color:#fff}
  .home-hero .cat-card[href="/leningen"]{--vdeep:#7C4D00}
  .home-hero .cat-card[href="/sparen"]{--vdeep:#2E5E35}
  .home-hero .cat-card[href="/hypotheken"]{--vdeep:#26496E}
  .home-hero .cat-card[href="/financieel-adviseurs"]{--vdeep:#463A75}
  .home-hero .cat-card b{color:#fff}
  .home-hero .cat-card .cat-value{color:#EAF3F0}
  .home-hero .cat-go{color:#fff}
  .lb-guide{background:#10283F;border-color:transparent;color:#fff}
  .lb-guide b{color:#fff}
  .lb-guide .lb-guide-a{color:#dcb84e}
  .lb-specimen{border-top:6px solid #1d4e89}
  .lb-spec-chip{background:#1d4e89;color:#fff}
  .lb-stat-row{background:#10283F;border-color:#10283F}
  .lb-stat span{color:#D8E2EF}
  .lb-stat:nth-child(1) b{color:#8fb4dc}
  .lb-stat:nth-child(2) b{color:#dcb84e}
  .lb-stat:nth-child(3) b{color:#9CD18E}
  .lb-stat:nth-child(4) b{color:#9CC0E4}
}

/* ================================================================
   UX-MOBILE-LOOP RONDE 4 (eigenaarsorder 2026-10-31, na echte-
   telefoonveto op ronde 3: "too many colors and they don't get
   along" + "the credit cards are too long"). Gereconcilieerde
   jurylijst; NerdWallet-mobiel = primair esthetisch anker.
   R4.1 KLEUR: één systeem — velden wit/crème of het bestaande
   diep-navy; geen middel-verzadigde velden meer. Verzadigd op
   scherm 1 ≤ ~15%: midnight-navy #0b2447 (CTA's, links, actieve staten,
   specimen-streep, 3px-accentbalk op ALLE productkaarten),
   navy (gidsbalk, voettekst, structuur), goud (alleen accenten).
   Bruin #7C4D00 is verwijderd. Verticale kleur overleeft ALLEEN
   als gedempte tint in het illustratiepaneel van de tegels.
   De bleek-amber "Let op"-box blijft (waarschuwingssemantiek).
   ================================================================ */
.cat-ill .tile-art{display:none}
@media (max-width:760px){
  /* — Hero: bleke tealtint-was (NerdWallet-patroon: rustig bleek
     veld achter kop + routing; veldbehandeling, geen blok) — */
  .lb-hero{background:#eaf0f7}

  /* — Tegels: papierwit, illustratiepaneel i.p.v. pictogramchip — */
  .home-hero .cat-card{background:var(--card);border-left:1px solid var(--line);color:var(--ink)}
  .home-hero .cat-card b{color:var(--ink)}
  .home-hero .cat-count{color:var(--ink-soft)}
  .home-hero .cat-go{color:var(--accent-dark)}
  .home-hero .cat-ill{flex:0 0 76px;align-self:stretch;display:block;border-radius:10px;overflow:hidden;line-height:0}
  .home-hero .cat-ill .cat-icon{display:none}
  .home-hero .cat-ill .tile-art{display:block;width:100%;height:100%}
  .home-hero .cat-body{min-width:0}

  /* — Gidsbalk: navy blijft; vaag vergelijkingsbalken-motief kost
     geen hoogte (absoluut, lage dekking) — */
  .lb-guide{position:relative;overflow:hidden}
  .lb-guide-art{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:48px;height:35px;opacity:.16;pointer-events:none}
  .lb-guide-art rect{fill:#fff}
  .lb-guide-art .ga-dot{fill:#dcb84e}
  .lb-guide>span{position:relative;z-index:1;max-width:calc(100% - 58px)}

  /* — Specimen: kop-aan-kop blijft (handtekening), vaste zones
     afgeschaft; één gedeelde 3-regelige tabel, kolommen delen de
     labels; een chip rendert alleen waar hij bestaat — nooit een
     leeg slot. Totaal ≤420px. — */
  .lb-specimen{padding:12px 14px;border-top:4px solid #0b2447}
  .lb-spec-grid{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);column-gap:12px;row-gap:7px;align-items:start;margin-top:2px}
  .lb-spec-col{display:contents}
  .lb-spec-col:first-child .lb-spec-id{grid-column:2;grid-row:1}
  .lb-spec-col:last-child .lb-spec-id{grid-column:3;grid-row:1;border-left:1px solid var(--line-soft);padding-left:12px}
  .lb-spec-id{height:auto;gap:3px}
  .lb-spec-col:first-child .lb-spec-chip{grid-column:2;grid-row:2;justify-self:start}
  .lb-spec-chip{height:auto;margin:0;padding:3px 9px;font-size:11px;line-height:1.35}
  .lb-spec-chip-empty{display:none}
  .lb-spec-rows{display:contents}
  .lb-spec-grid .lb-spec-rows>div:nth-child(n){display:contents}
  .lb-spec-rows dt{font-size:10.5px;letter-spacing:.05em;padding-top:4px}
  .lb-spec-col:first-child .lb-spec-rows>div:nth-child(1) dt{grid-column:1;grid-row:3}
  .lb-spec-col:first-child .lb-spec-rows>div:nth-child(2) dt{grid-column:1;grid-row:4}
  .lb-spec-col:first-child .lb-spec-rows>div:nth-child(3) dt{grid-column:1;grid-row:5}
  .lb-spec-col:first-child .lb-spec-rows>div:nth-child(1) dd{grid-column:2;grid-row:3}
  .lb-spec-col:first-child .lb-spec-rows>div:nth-child(2) dd{grid-column:2;grid-row:4}
  .lb-spec-col:first-child .lb-spec-rows>div:nth-child(3) dd{grid-column:2;grid-row:5}
  .lb-spec-col:last-child .lb-spec-rows dt{display:none}
  .lb-spec-col:last-child .lb-spec-rows>div:nth-child(1) dd{grid-column:3;grid-row:3;border-left:1px solid var(--line-soft);padding-left:12px}
  .lb-spec-col:last-child .lb-spec-rows>div:nth-child(2) dd{grid-column:3;grid-row:4;border-left:1px solid var(--line-soft);padding-left:12px}
  .lb-spec-col:last-child .lb-spec-rows>div:nth-child(3) dd{grid-column:3;grid-row:5;border-left:1px solid var(--line-soft);padding-left:12px}
  .lb-spec-rows dd{font-size:14.5px;line-height:1.3}
  .lb-spec-col:first-child .lb-spec-src{grid-column:2;grid-row:6}
  .lb-spec-col:last-child .lb-spec-src{grid-column:3;grid-row:6;border-left:1px solid var(--line-soft);padding-left:12px}
  .lb-spec-src{font-size:11px;line-height:1.35;margin:0}
  .lb-spec-cue a{color:#8A6108}

  /* — Telrij: navy paneel gedegradeerd tot één stille regel
     inkt-navy cijfers op crème, ONDER het specimen — */
  .lb-stat-row{background:transparent;border:0;box-shadow:none;border-radius:0;padding:2px 0 0}
  .lb-stat b{color:var(--ink)}
  .lb-stat:nth-child(1) b,.lb-stat:nth-child(2) b,.lb-stat:nth-child(3) b,.lb-stat:nth-child(4) b{color:var(--ink)}
  .lb-stat span{color:var(--ink-soft)}

  /* ==============================================================
     R4.2 PRODUCTKAARTEN — compactie (doel ≤480px ingeklapt op
     390px, harde grens 560px). Eén 3px-tealbalk op alle kaarten;
     gebruikslabel inline naast de productnaam (geen volle rij);
     feitrijen paren in één tweecoloms rij; actiezone naast elkaar;
     vergelijk-vinkje deelt de rij met de bronregel. VASTGEPINDE
     regels (Sterk, Let op, AFM, bron+controledatum, per-veld
     kwalificaties, tariefwijzigingsnoot) blijven volledig zichtbaar
     op het ingeklapte kaartvlak; er verhuist NIETS nieuws achter
     de bestaande "Alle details"-uitklapper.
     ============================================================== */
  .compare.rows .ccard,#mort-results .mort-card{box-shadow:inset 0 3px 0 #0b2447,var(--shadow-m)}
  .compare.rows .ccard{padding:12px 14px;gap:8px}
  .compare.rows .ccard-credit{gap:8px}

  /* Gebruikslabel: klein inline label in de identiteitszone */
  .crow-usecase{display:inline-flex;align-items:center;gap:6px;background:transparent;border-radius:0;padding:0;margin:0 0 2px;font:700 10.5px/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:#3D5470}
  .crow-usecase::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:#0b2447}

  /* Creditcard: identiteitszone strak */
  .compare.rows .ccard-credit .crow-identity{padding:0;align-items:center}
  .compare.rows .ccard-credit .crow-name{font-size:17px;line-height:1.25}
  .compare.rows .ccard-credit .crow-price-top{margin-top:2px}

  /* Voordeelzone: waardelabel weg (waarom-regel spreekt zelf),
     strakker gezet; bullets strakker. (Geen line-clamp: de
     repo-test verbiedt tekstafknipping in styles.css — compactie
     komt uit typografie en padding, niet uit afkappen.) */
  .compare.rows .ccard-credit .crow-value{margin:0}
  .compare.rows .ccard-credit .crow-value-label{display:none}
  .compare.rows .ccard-credit .crow-why{padding:9px 11px}
  .compare.rows .ccard-credit .crow-why span{display:block;font-size:13.5px;line-height:1.4}
  .compare.rows .ccard-credit .crow-benefits-box>ul>li{padding:9px 11px;line-height:1.42}

  /* Sterk: pil-achtergrond weg — gewone vetgedrukte regel,
     tekst byte-identiek */
  .hl-note.sterk{display:block;background:none;border:0;border-radius:0;padding:0;margin:0;color:var(--ink);font-size:13.5px;line-height:1.45;font-weight:400}
  .hl-note.sterk b{color:var(--ink)}

  /* Prijsblok: label + bedrag op één basislijn, tariefnoot volledig
     bewoord op 13px strak (2 regels i.p.v. 3) */
  .compare.rows .ccard-credit .crow-priceblock{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px}
  .compare.rows .ccard-credit .crow-price-label{margin:0}
  .compare.rows .ccard-credit .crow-price{margin:0}
  .compare.rows .ccard-credit .crow-fee-note{flex-basis:100%;font-size:13px;line-height:1.35;margin:2px 0 0}

  /* Kernfeiten + feiten: de twee rijen paren in één tweecoloms rij */
  #creditcard-results .crow-keyfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  #creditcard-results .crow-keyfacts>div{padding:6px 9px;border-radius:10px}
  #creditcard-results .crow-keyfacts dd{font-size:14.5px;line-height:1.3}
  .compare.rows .ccard-credit .crow-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
  .compare.rows .ccard-credit .crow-facts>div{padding:0}
  .compare.rows .ccard-credit .crow-facts dd{font-size:13.5px;line-height:1.35}

  /* Let op: zelfde bleek-amber waarschuwing, strakker gezet */
  .compare.rows .ccard .hl-note:not(.sterk){font-size:13.5px;line-height:1.42;padding:8px 10px}

  /* Actiezone: Aanvragen + Bekijk details half/half naast elkaar,
     bijschrift eronder */
  .compare.rows .ccard-credit .crow-actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px}
  .compare.rows .ccard-credit .crow-actions .cta-apply{flex:1 1 0;min-width:0}
  .compare.rows .ccard-credit .crow-actions .crow-details-link{flex:1 1 0;min-width:0}
  .compare.rows .ccard-credit .crow-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 8px;font-size:14.5px;text-align:center;width:100%}
  .compare.rows .ccard-credit .crow-actions .cta-caption{flex:1 1 100%;margin:0;font-size:11.5px;line-height:1.3}

  /* Voet: vinkje links, bronregel rechts — één rij */
  .compare.rows .ccard-credit .crow-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .compare.rows .ccard-credit .crow-foot .crow-source{margin:0;font-size:12px;line-height:1.35;text-align:right}
  .compare.rows .ccard .crow-more summary{padding:7px 0 5px}

  /* Leningen & sparen: hoofd- en zijzone strakker */
  .loan-card .crow-main,.sav-card .crow-main{gap:4px}
  .loan-card .crow-name,.sav-card .crow-name{font-size:16.5px;line-height:1.28}
  .loan-range{font-size:13px;margin:2px 0 0}
  .loan-risk{font-size:13.5px;margin:4px 0 0}
  .sav-card .crow-pills{gap:5px;margin:4px 0 0}
  .sav-card .crow-pills .crow-pill,.sav-card .crow-pill{padding:3px 8px;font-size:11px;line-height:1.3}
  .sav-card .crow-main>p{margin:0}
  .sav-card .calc-offer{min-height:44px;padding:8px 12px;font-size:13.5px}
  .loan-card .crow-side,.sav-card .crow-side{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
  .loan-card .crow-side .crow-actions,.sav-card .crow-side .crow-actions{flex:1 1 0;min-width:0;display:flex;margin:0}
  .loan-card .crow-side .crow-actions .crow-details-link,.sav-card .crow-side .crow-actions .crow-details-link{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 8px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14.5px;font-weight:600;text-align:center}
  .loan-card .crow-side .cta-apply,.sav-card .crow-side .cta-apply{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 8px;font-size:14.5px;text-align:center}
  .loan-card .crow-side .crow-source,.sav-card .crow-side .crow-source{flex:1 1 100%;margin:0;font-size:12px;line-height:1.35}

  /* Hypotheek-ranglijstregels: zelfde compactie, tarief blijft groot */
  .mort-dir-row{padding:10px 12px;row-gap:5px}
  .mort-dir-small{line-height:1.35}

  /* ==============================================================
     R4.3 KOPSTAPEL /creditcards — eerste kaart zo hoog mogelijk
     zonder vastgepinde inhoud te verbergen (masthead 71 + AFM-regel
     + H1 blijven; broodkruimels en de lange lede zijn op mobiel
     overbodig chrome). Meetlat: kaart 1-top + gezamenlijke chrome
     erboven worden gemeten en gerapporteerd.
     ============================================================== */
  body:has(#creditcard-results) .crumbs{display:none}
  .cc-guide-head{row-gap:4px;padding-top:6px}
  .cc-lede{display:none}
  .cc-risk{padding:7px 10px;font-size:13.5px}
  .cc-triage{margin-top:6px}
  .qf-buttons{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .qf-buttons::-webkit-scrollbar{display:none}
  .qf-buttons .qf-btn{flex:none}
  .filter-toolbar{padding-top:6px;padding-bottom:6px}
  .brand-disclosure summary{padding-top:4px;padding-bottom:4px}
  .cc-list-head{margin:2px 0 4px}
  .cc-list-heading{font-size:17px}
}

/* ================================================================
   R4.4 CORRECTIES op de eerste R4-meting (390px-probe + echte
   screenshots): flex-richtingen stonden nog op column uit oudere
   lagen; de caption zat tussen de twee knoppen in de DOM; het
   tariefnootje MOET zichtbaar blijven (repo-test serp-limits:186
   pint het als prijswijzigingsnoot — de Gemini-fallback om het
   achter de uitklapper te zetten is daarmee van tafel), dus de
   compactie komt uit richting/volgorde/typografie alleen.
   ================================================================ */
@media (max-width:760px){
  /* Tegels: waarde-regel kleur veilig op wit (was bijna-wit uit de
     verzadigde R3-tegels; alleen zichtbaar op de brede tegel) */
  .home-hero .cat-value{color:var(--ink-soft)}

  /* Identiteit: de body:has-regel (1,2,1) won van R4.2 — zelfde
     selector, strakkere padding */
  body:has(#creditcard-results) .ccard-credit .crow-identity{padding:2px 0}

  /* Kaartzones: marges naar nul, de artikel-gap (6px) doet het werk */
  .compare.rows .ccard{gap:6px}
  .compare.rows .ccard-credit .crow-keyfacts,
  .compare.rows .ccard-credit .crow-actions,
  .compare.rows .ccard-credit .crow-foot{margin-top:0}
  .compare.rows .ccard-credit .crow-foot{padding-top:0}

  /* Prijsblok: RIJ-richting — label + bedrag op één lijn, noot eronder */
  .compare.rows .ccard-credit .crow-priceblock{flex-direction:row;align-items:baseline}
  .compare.rows .ccard-credit .crow-price{font-size:26px}

  /* Actiezone: RIJ-richting + DOM-volgorde hersteld via order —
     Aanvragen (1) en Bekijk details (2) delen rij 1, bijschrift (3)
     eronder */
  .compare.rows .ccard-credit .crow-actions{flex-direction:row;padding:8px 10px}
  .compare.rows .ccard-credit .crow-actions .cta-apply{order:1}
  .compare.rows .ccard-credit .crow-actions .crow-details-link{order:2}
  .compare.rows .ccard-credit .crow-actions .cta-caption{order:3}
  .compare.rows .ccard-credit .crow-actions .btn{width:auto}

  /* Kernfeiten: kwalificatie inline achter de waarde i.p.v. eronder */
  #creditcard-results .crow-keyfacts dd{font-size:14px}
  #creditcard-results .crow-keyfacts dd .qual{display:inline;margin-left:6px;font-size:11px}

  /* Voordeelbullets als compacte chips (alle tekst blijft zichtbaar) */
  .compare.rows .ccard-credit .crow-benefits-box>ul{display:flex;flex-wrap:wrap;gap:6px}
  .compare.rows .ccard-credit .crow-benefits-box>ul>li{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line-soft);border-radius:999px;background:#fff;font-size:12px;line-height:1.3}

  /* Waarom-regel en Let op: fractie strakker, inhoud ongewijzigd */
  .compare.rows .ccard-credit .crow-why{padding:7px 10px}
  .compare.rows .ccard-credit .crow-why span{font-size:13px;line-height:1.38}
  .compare.rows .ccard .hl-note:not(.sterk){font-size:13px;line-height:1.4;padding:7px 10px}

  /* Specimen: chip mag de lege chip-rij van kolom 3 lenen (daar
     rendert nooit een chip), grote waarde 17px, bronregels 10.5px */
  .lb-spec-col:first-child .lb-spec-chip{grid-column:2/4}
  .lb-spec-rows dd{font-size:13.5px}
  .lb-spec-rows .lb-spec-big{font-size:17px}
  .lb-spec-src{font-size:10.5px;line-height:1.3}
  .lb-spec-id{gap:2px}
  .lb-spec-id h3{font-size:15px;line-height:1.2}

  /* Leningen & sparen: zijzone in RIJ-richting, zonder top-padding */
  .loan-card .crow-side,.sav-card .crow-side{flex-direction:row;padding-top:0}
  .sav-card .crow-pills .pill{padding:3px 8px;font-size:11px;line-height:1.3}
  .sav-card .calc-offer{padding:6px 12px}

  /* Kopstapel: triage-label en lijstkop fractie strakker */
  .qf-label{margin-bottom:4px}
  .cc-list-head{gap:4px}
}

/* R4.5 — tweede meetronde: dt/dd in de kernfeiten droegen nog
   regel­hoogte 1.6 + padding uit de basislaag; specimen 5px boven
   de 420-grens; kopstapel verder aangescherpt. */
@media (max-width:760px){
  #creditcard-results .crow-keyfacts{margin-top:0;gap:5px}
  #creditcard-results .crow-keyfacts dt,
  #creditcard-results .crow-keyfacts dd{padding:2px 0;line-height:1.3}
  #creditcard-results .crow-keyfacts dd .field-qual{line-height:1.25;margin-top:1px}
  .lb-spec-grid{row-gap:6px}
  .qf-label{font-size:12.5px;line-height:1.3;margin-bottom:2px}
  .qf-buttons{padding-bottom:0}
  .filter-toolbar{padding-top:4px;padding-bottom:4px}
  .cc-list-head{padding-top:0;padding-bottom:0}
  .cc-risk{padding-top:5px;padding-bottom:5px}
}

/* R4.6 — de dt/dd-padding zat in een (1,2,2)-regel (styles-regel
   2589: padding 8px 0 + haarlijn); alleen dezelfde volledige
   selector wint. Plus: tariefnoot 12.5px, identiteits-rijgap 2,
   kaartnaam 16px, uitklapper zonder top-padding. */
@media (max-width:760px){
  #creditcard-results .ccard-credit .crow-keyfacts dt,
  #creditcard-results .ccard-credit .crow-keyfacts dd{padding:3px 0;line-height:1.3}
  /* Specimen: nooit midden in een woord afbreken (kolommen zijn
     smal; hele woorden schuiven door naar de volgende regel) */
  .lb-spec-id h3,.lb-spec-rows dd{overflow-wrap:normal;word-break:normal}
  /* Telregel: lange labels ("hypotheekvermeldingen") botsten in de
     4-koloms rij — kleiner zetten en alleen breken als het moet */
  .lb-stat{min-width:0}
  .lb-stat span{font-size:10px;line-height:1.25;overflow-wrap:anywhere}
  .compare.rows .ccard-credit .crow-fee-note{font-size:12.5px;line-height:1.32}
  .compare.rows .ccard-credit .crow-identity{row-gap:2px}
  .compare.rows .ccard-credit .crow-name{font-size:16px;line-height:1.22}
  .compare.rows .ccard .crow-more{padding-top:0}
  .compare.rows .ccard-credit .crow-actions{padding:6px 10px}
}

/* ================================================================
   R4.7 — MICRO-FIX tegelbotsing (Smurf-bevinding in het R4-bewijs
   vóór de jurering, 2026-10-31): op de vier tweecoloms hero-tegels
   liep het label dóór de chevron heen. Oorzaak (gemeten op de
   gebouwde pagina): het label is één woord dat niet kan afbreken,
   maar de body was smaller dan het woord (body 61/46/26px op
   390/360/320px vs. 66–70px woordbreedte op 16,5px) — de tekst
   schilderde over de paddingzone heen tot over de absoluut
   gepositioneerde chevron (gemeten overlap −16/−31/−51px voor
   Creditcards; Hypotheken −20/−35/−55px). Fix, alleen op de
   tweecoloms tegels (de brede adviseurstegel heeft +45px speling
   en blijft onaangeroerd):
   - het illustratiepaneel wordt per breedtetrede smaller; de
     hoogte blijft vast op de huidige 50,66px, dus de tegelhoogte
     blijft exact 68,66px (slice-crop blijft symmetrisch; alle
     motiefinkt blijft zichtbaar, alleen op ≤340px raakt de
     slice de linkerrand van het eerste leningen-blokje ~1px);
   - de body reserveert een vaste chevronzone (padding-right),
     zodat labeltekst de chevron nooit kan bereiken;
   - het label gaat per trede een maat omlaag.
   Desktop ≥761px: geen van deze regels. */
@media (max-width:760px){
  .home-hero .cat-card:not(:last-child){gap:10px;padding-right:10px}
  .home-hero .cat-card:not(:last-child) .cat-ill{flex-basis:62px;height:50.66px}
  .home-hero .cat-card:not(:last-child) .cat-body{padding-right:14px}
  .home-hero .cat-card:not(:last-child) .cat-body b{font-size:14px}
}
@media (max-width:370px){
  .home-hero .cat-card:not(:last-child) .cat-ill{flex-basis:48px}
  .home-hero .cat-card:not(:last-child) .cat-body b{font-size:12px}
}
@media (max-width:340px){
  .home-hero .cat-card:not(:last-child){gap:8px}
  .home-hero .cat-card:not(:last-child) .cat-ill{flex-basis:42px}
  .home-hero .cat-card:not(:last-child) .cat-body{padding-right:12px}
  .home-hero .cat-card:not(:last-child) .cat-body b{font-size:11px}
}

/* ================================================================
   R4.8 — FIXRONDE na de jurering van ronde 4 (Gemini PASS 9.21,
   Astra FAIL 8.30; poort = beide ≥9.0 in dezelfde ronde).
   Uitsluitend leesbaarheid/typografie; palet en illustraties
   blijven exact zoals de jury ze goedkeurde. Zes punten:
   1) Specimen: kolommen ≈30/35/35 i.p.v. het auto-label dat de
      productkolommen leegat; prijsrange op één regel met de
      eenheid eronder (span wordt blok); productnamen ≤2 regels.
      Het 18-tekens label "Aankoopverzekering" past in de eigen
      letter (Plus Jakarta Sans, gemeten) fysiek niet op één regel
      in een ~28%-kolom — de labels blijven hoofdletters maar
      kleiner (10px) mét hyphens:auto (NL-woordenboek breekt op
      echte lettergrepen: AANKOOPVER- / ZEKERING), dus gecontro-
      leerde afbreking i.p.v. overloop. Wording ongewijzigd.
   2) De specimen-chip stond sinds R4.4 op grid-column 2/4 en
      stak daarmee de kolomgrens over; terug naar alléén de
      Rabo-kolom (kolom 2), tekst ongewijzigd.
   3) Tegellabels: dunne serif → medium sans (Plus Jakarta Sans,
      600) 15,5px; op ≤370px 14,5px en op ≤340px afbreken i.p.v.
      krimpen (vervangt de R4.7-trede 14/12/11px). Serif blijft
      alleen de hero-kop. Het illustratiepaneel geeft per trede
      breedte terug zodat het label past; de chevronzone in de
      body blijft gereserveerd en de chevron staat op alle
      breedtes tegen de rechterrand (Gemini-notitie 3b).
   4) Kaart-actiezone: de getinte container (R1-regel 3163:
      accent-soft vlak + rand om de knoppenrij) verdwijnt; de
      knoppen zijn zelf al onderscheidend en het bijschrift
      staat er al onder (R4.4-volgorde). Tariefnoot en
      waarschuwingen blijven byte-identiek zichtbaar.
   5) Triage-pijl (/creditcards): de zwevende #qf-more dekte de
      volgende chip deels af. Zodra er meer keuzes zijn
      (.qf-has-more) wordt de rij een grid met een gereserveerde
      pijlkolom van 52px; de pijl staat statisch in die kolom en
      kan nooit meer over een chip heen liggen.
   6) (build.mjs) Uitklapper "Alle details" → "Alle kenmerken"
      op creditcards, leningen én sparen (zelfde .crow-more-
      patroon), zodat hij niet meer botst met de "Bekijk
      details"-link. Eén testpin bijgewerkt (layout.test).
   ================================================================ */
@media (max-width:760px){
  /* — 1+2: Specimen — */
  .lb-specimen{padding:12px}
  .lb-spec-grid{grid-template-columns:minmax(0,30fr) minmax(0,35fr) minmax(0,35fr);column-gap:10px}
  .lb-spec-col:first-child .lb-spec-chip{grid-column:2}
  .lb-spec-chip{font-size:10.5px;line-height:1.3;padding:3px 8px}
  .lb-spec-rows dt{font-size:10px;letter-spacing:.02em;hyphens:auto;padding-top:5px}
  .lb-spec-id h3{font-size:13.5px}
  .lb-spec-rows .lb-spec-big>span{display:block;font-size:11.5px;margin-top:1px}
  .lb-spec-grid .lb-spec-col:last-child .lb-spec-id{padding-left:8px}
  .lb-spec-grid .lb-spec-col:last-child .lb-spec-rows dd{padding-left:8px}
  .lb-spec-grid .lb-spec-col:last-child .lb-spec-src{padding-left:8px}

  /* — 3: Tegellabels sans — */
  .home-hero .cat-body b{font-family:var(--ui);font-weight:600;letter-spacing:-.015em;line-height:1.2}
  .home-hero .cat-card:last-child .cat-body b{font-size:16px}
  .home-hero .cat-card:not(:last-child){gap:8px;padding:8px 8px 8px 10px}
  .home-hero .cat-card:not(:last-child) .cat-ill{flex-basis:40px}
  .home-hero .cat-card:not(:last-child) .cat-body{padding-right:12px}
  .home-hero .cat-card:not(:last-child) .cat-body b{font-size:15.5px}
  .home-hero .cat-go{right:7px}

  /* — 4: Actiezone zonder getinte container — */
  .compare.rows .ccard-credit .crow-actions{background:transparent;border:0;border-radius:0;padding:4px 0 2px}

  /* — 5: Triage-pijl in eigen kolom — */
  .cc-triage .quick-filters.qf-has-more{display:grid;grid-template-columns:minmax(0,1fr) 52px;column-gap:8px;align-items:start}
  .cc-triage .quick-filters.qf-has-more .qf-label{grid-column:1/-1;grid-row:1}
  .cc-triage .quick-filters.qf-has-more .qf-buttons{grid-column:1;grid-row:2;margin-right:0}
  .cc-triage .qf-more:not([hidden]){position:static;grid-column:2;grid-row:2;align-self:center;justify-self:end}
}
@media (max-width:370px){
  .home-hero .cat-card:not(:last-child) .cat-ill{flex-basis:36px;height:46px}
  .home-hero .cat-card:not(:last-child) .cat-body{padding-right:10px}
  .home-hero .cat-card:not(:last-child) .cat-body b{font-size:14.5px;letter-spacing:-.02em}
  .home-hero .cat-go{right:4px}
}
@media (max-width:340px){
  .home-hero .cat-card:not(:last-child) .cat-ill{flex-basis:36px}
  .home-hero .cat-card:not(:last-child) .cat-body b{hyphens:auto}
}

/* ================================================================
   R4.9 — TYPOGRAFIE-AFWERKING na de herjurering van de fixronde
   (Astra 8.75/10: alles gefixt behalve twee afbreekdefecten).
   Uitsluitend deze twee punten; palet, illustraties, specimen-
   kolommen (30/35/35), tegellabels, kaartlayout, actiezone en
   triage blijven exact zoals beoordeeld.
   1) Specimen-label "Aankoopverzekering": hyphens:manual i.p.v.
      het auto uit R4.8. Het label breekt nu alléén op de zachte
      hyphen in de HTML (build.mjs, specCol: Aankoopver­zekering)
      → AANKOOPVER- / ZEKERING, nooit meer willekeurig
      (was: AANKOOPVERZE- / KERING). Kolommen en lettergrootte
      ongewijzigd; de andere labels breken niet meer willekeurig.
   2) Telregel onder het specimen: 2×2-rooster i.p.v. de vier
      smalle kolommen, en het overflow-wrap:anywhere uit R4.6 uit —
      lange labels breken nooit meer midden in een woord
      (was: SPAARREKENIN/GEN en HYPOTHEEKVE/RMELDINGEN).
      Cijfers, labelteksten en de stille styling ongewijzigd.
   Alleen ≤760px; desktop ≥761px heeft geen van deze regels. */
@media (max-width:760px){
  .lb-spec-rows dt{hyphens:manual}
  .lb-stat-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}
  .lb-stat span{overflow-wrap:normal;hyphens:manual}
}

/* ================================================================
   UX-MOBILE-LOOP RONDE 5 — EERSTE-SCHERM-IMPACT (eigenaarsorder
   2026-10-31 22:56 ET: "the UX is the most important part" — de
   laatste gemeten kloof met NerdWallet-mobiel dichten: punch in
   scherm 1). Juryankers na de R4-fixronde (Astra): First-screen
   impact 8.8 en Visual excitement 8.2, de twee laagste dimensies;
   NW wint scherm 1 op "bold headline and greater variation in
   visual scale". Alléén de homepage, alléén ≤760px. Palet,
   illustraties, tegelinhoud, kaarten, specimen-inhoud en
   -kolommen (30/35/35) en alle andere pagina's blijven exact
   zoals beoordeeld.
   1) KOPDOMINANTIE: de hero-H1 wordt het onmiskenbare middelpunt
      van scherm 1. Instrument Serif kent alleen gewicht 400 (zie
      de fixronde-notitie bij .panel h2: "schaal omhoog i.p.v.
      gewicht"), dus de kracht komt uit schaal: 37px/1.06 in één
      regel → clamp(42px,12.3vw,48px)/0.95 in twee gebalanceerde
      regels (~90px blok). De teal cursieve "écht" blijft.
   2) VISUEEL MOMENT: het specimen als held-object. Negatieve
      bovenmarge (-8px) laat de kaart over de onderrand van de
      tegelzone in de hero-zone schuiven (de gesanctioneerde
      "slight overlap" uit de opdracht; de overlap valt in de
      lege onderrand van de brede tegel — geen tekst, geen
      tikdoel bedekt; per breedte geprobeerd in het R5-bewijs).
      Gelaagde, diep-teal getinte schaduw i.p.v. de vlakke
      paneelschaduw, zodat de kaart als opgetild object leest.
      De hele kopstapel erboven is staging-strakker gezet
      (kickermarge, lede, actierij, slankere gidsbalk, tegel-
      rastermarges) zodat er netto MÉÉR van het specimen in
      scherm 1 valt dan op de starthead (gemeten vóór/na).
   3) SCHAALRITME scherm 1: kop groot (~90px) → gidsbalk slank
      (~48px; smallere padding + één maat kleinere bandtekst)
      → tegels middel (62–69px) → specimen groot (373px-object).
   Desktop ≥761px: geen van deze regels. */
@media (max-width:760px){
  .lb-hero{padding-top:2px}
  .lb-hero .kicker{margin-bottom:2px}
  .lb-hero h1{font-size:clamp(42px,12.3vw,48px);line-height:.95;letter-spacing:0;margin:4px 0 0;text-wrap:balance}
  /* "écht"-accent één stap dieper teal (#007C78 → #005C55, de
     R4-systeemteal): de §3-contrastprobe op de bleek-teal was
     mat 4,46:1 voor het oude accent; #0b2447 haalt ~6,97:1.
     Zelfde tealfamilie, accent blijft; desktop ongewijzigd. */
  .lb-hero h1 i{color:#0b2447}
  .lb-lede-short{font-size:15px;line-height:1.4;margin:8px 0 0}
  .lb-hero-actions{margin-top:8px}
  .lb-hero-actions .btn{padding-top:10px;padding-bottom:10px}
  .lb-guide{margin-top:8px;padding-top:6px;padding-bottom:6px}
  .lb-guide-q{font-size:14.5px;line-height:1.25}
  .lb-guide-a{font-size:13.5px;line-height:1.25}
  .home-hero .cat-grid{margin-top:6px;gap:6px}
  .lb-specimen{margin-top:-8px;position:relative;z-index:3;box-shadow:0 1px 2px rgba(8,26,48,.10),0 10px 22px -6px rgba(8,26,48,.18),0 30px 52px -16px rgba(8,26,48,.38)}
}

/* ================================================================
   UX-MOBILE-LOOP RONDE 6 — FOTO-HERO (eigenaarsorders 2026-10-31
   23:28 + 23:29 ET: "Use variant 3 — build it into the header" en
   "the buttons exactly like that, the space and the layout exactly
   copy of NerdWallet"). De homepage-hero wordt een fotoheader naar
   het NerdWallet-patroon: foto met kop + subregel erover, één grote
   actieknop met NW-proporties (volle breedte, ±58 px, pilvorm),
   NW-afstandsritme en categorietegels als kaarten (illustratie
   boven, titel, één feitelijke regel, pijl in de hoek).
   Gekopieerd worden uitsluitend STRUCTUUR, spacing en knopgeometrie
   — nooit NW-tekst, -logo, -ratings of -assets. Alle copy blijft
   NUXO-Nederlands; alle kleuren blijven ons teal/navy/goud.
   De foto is een eigen, door de eigenaar gekozen gegenereerd
   sfeerbeeld (alt-tekst labelt dat expliciet; geen echte klanten).
   Alleen de homepage verandert; elke andere pagina blijft
   pixelidentiek (alle regels zijn op .lb-hero/.home-hero gescopeerd).
   ================================================================ */

/* --- Fotoband + overlay (alle breedtes) --- */
.lb-hero-media{position:relative;overflow:hidden;background:#071a30;isolation:isolate}
.lb-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.lb-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,34,.10) 0%,rgba(6,18,34,0) 30%,rgba(6,18,34,.38) 76%,rgba(6,18,34,.56) 100%),linear-gradient(90deg,rgba(6,18,34,.72) 0%,rgba(6,18,34,.50) 44%,rgba(6,18,34,.10) 74%,rgba(6,18,34,0) 86%);pointer-events:none}
.lb-hero-overlay{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:24px 32px}
.lb-hero-overlay .kicker{color:#fff;margin:0 0 10px;text-shadow:0 1px 10px rgba(6,18,34,.45)}
.lb-hero-overlay h1{color:#fff;margin:0;text-shadow:0 1px 14px rgba(6,18,34,.40)}
.lb-hero .lb-hero-overlay h1 i{color:#FFD97A}
.lb-hero-overlay .lb-lede-short{color:#fff;text-shadow:0 1px 10px rgba(6,18,34,.45)}

/* --- Desktop (≥761 px): fotoband over de volle rasterbreedte,
   kop over de rustige muurzone; tegels als NW-kaarten --- */
@media(min-width:761px){
  .lb-hero-media{grid-column:1/-1;aspect-ratio:1080/400;border-radius:24px;box-shadow:var(--shadow-l)}
  .lb-hero-overlay{padding:36px 44px;max-width:680px}
  .home-hero .cat-card{flex-direction:column;align-items:stretch;padding:0;overflow:hidden;min-height:0;position:relative}
  .home-hero .cat-ill{flex:none;margin:0;height:88px;border-radius:0;overflow:hidden;line-height:0}
  .home-hero .cat-ill .cat-icon{display:none}
  .home-hero .cat-ill .tile-art{display:block;width:100%;height:100%}
  .home-hero .cat-card .cat-body{padding:12px 14px 16px;gap:3px}
  .home-hero .cat-body b{font-size:17.5px}
  .home-hero .cat-value{display:block}
  .home-hero .cat-go{top:10px;right:12px;transform:none}
}

/* --- Mobiel (≤760 px): de beoordeelde vorm --- */
@media(max-width:760px){
  /* Fotoband: schermvullend, direct onder de mast. Uitsnede houdt
     beide gezichten in beeld (object-position 92%) en de kopzone
     op de rustige diepgroene muur (links). */
  .lb-hero-media{order:0;margin:-2px -16px 0;aspect-ratio:13/11;border-radius:0}
  .lb-hero-photo{object-position:92% 50%}
  .lb-hero-overlay{padding:26px 16px 16px;justify-content:flex-start}
  .lb-hero-overlay .kicker{font-size:11px;margin-bottom:6px}
  .lb-hero-overlay h1{max-width:198px}
  .lb-hero-overlay .lb-lede-short{display:block;font-size:14.5px;line-height:1.4;margin:8px 0 0;max-width:210px}

  /* Actieknop naar NW-proportie: volle breedte, 58 px hoog, pilvorm. */
  .lb-hero-actions{margin-top:14px}
  .lb-hero-actions .btn-primary{display:flex;align-items:center;justify-content:center;min-height:58px;border-radius:999px;font-size:17px;padding:12px 22px}

  /* Specimen terug in de normale stroom (de R5-overlap van −8 px
     was tegen de oude hero gemeten; de schaduw als "opgetild
     object" blijft). */
  .lb-specimen{margin-top:16px}

  /* Categorietegels als NW-kaarten: illustratiepaneel boven, titel,
     één feitelijke beschrijvingsregel (de bestaande .cat-value,
     ongewijzigde tekst), pijl in de hoek. Kaart wit; de categorietint
     leeft alleen nog in het paneel (de tile-art voert die zelf). */
  .home-hero .cat-grid{margin-top:14px;gap:10px}
  .home-hero .cat-card{flex-direction:column;align-items:stretch;padding:0;overflow:hidden;min-height:0;background:var(--card);border:1px solid var(--line);border-left:1px solid var(--line);border-radius:16px;position:relative}
  .home-hero .cat-card:not(:last-child) .cat-ill{flex:none;height:84px;border-radius:0}
  .home-hero .cat-card .cat-body{padding:11px 13px 13px;gap:2px}
  .home-hero .cat-card .cat-body b{font-size:17px}
  .home-hero .cat-card .cat-value{display:block;color:var(--ink-soft);font-size:13px;line-height:1.4;margin-top:3px}
  .home-hero .cat-card:not(:last-child) .cat-body{text-align:center;align-items:center}
  .home-hero .cat-go{top:8px;right:10px;transform:none}
  /* Brede adviseurstegel: paneel links over de volle hoogte, tekst rechts. */
  .home-hero .cat-card:last-child{flex-direction:row;align-items:stretch}
  .home-hero .cat-card:last-child .cat-ill{flex:0 0 34%;height:auto;border-radius:0}
  .home-hero .cat-card:last-child .cat-body{justify-content:center}
  .home-hero .cat-card:last-child .cat-go{top:8px;right:10px}
}
@media(max-width:370px){
  .lb-hero-overlay h1{max-width:182px}
  .lb-hero-overlay .lb-lede-short{max-width:198px}
  .home-hero .cat-card:not(:last-child) .cat-ill{height:80px}
}
@media(max-width:340px){
  .lb-hero-overlay h1{max-width:166px}
  .lb-hero-overlay .lb-lede-short{max-width:178px;font-size:14px}
  .home-hero .cat-card:not(:last-child) .cat-ill{height:76px}
  /* Alleen op de kleinste breedte: lange samengestelde woorden
     (depositogarantie, productbronnen) passen anders niet in de
     tegel en schilderen buiten hun vak (gemeten: +17 px / +6 px). */
  .home-hero .cat-card .cat-value{hyphens:auto}
}

/* ================================================================
   UX-MOBILE-LOOP RONDE 7 — NW-3D-PICTOGRAMMEN + KORTE TEGELTEKSTEN
   + HELDERE HEROFOTO (eigenaarsorders 2026-10-31 23:59 ET: "Do
   illustration nerdwallet style" en "yes too long — need less text
   like nerdwallet"; 2026-11-01 00:01 ET: "Just header is a little
   dark. Make brighter like NerdWallet").
   1) De vlakke SVG-tegelmotieven op tintpanelen maken plaats voor
      eigen gegenereerde zachte 3D-pictogrammen (één familie, eigen
      kleuren teal/navy/goud) die NW-vorm los op de witte kaart
      staan — geen tintpaneel meer.
   2) De tegelbeschrijvingen zijn ingekort tot NW-lengte: één
      feitelijke zin per tegel; de aantallen komen uit dezelfde
      bronnen als de telregel (cards/activeLoans/accounts/
      hypotheekdirectory), de leenrente uit loanFromRate.
   3) De hero-foto is opnieuw gegradeerd (gamma 0,84 + helderheid
      1,07 + verzadiging 1,10 op het 1920px-meesterbestand):
      gemiddelde luminantie van de mobiele uitsnede 0,308 → 0,378
      (+22,9%); uitsnede/object-position ongewijzigd. De scrim is
      alleen plaatselijk achter de tekstzone (links) verdiept om de
      contrastprobe na de opheldering op ≥ 4,5:1 (p90 én p99) te
      houden; gezichten/rechts blijven ongedekt helder.
   Alleen de homepage-tegels veranderen van vorm; elke andere
   pagina blijft pixelidentiek (regels zijn .home-hero-gescooped).
   ================================================================ */

/* --- Pictogram los op de witte kaart, geen paneel --- */
.home-hero .cat-ill{background:none;line-height:0}
.home-hero .cat-ico{display:block;width:auto;margin:0 auto}

@media(min-width:761px){
  .home-hero .cat-ill{height:auto;padding:20px 12px 4px;display:flex;align-items:flex-start;justify-content:center}
  .home-hero .cat-ico{height:72px}
  .home-hero .cat-card .cat-body{text-align:center;align-items:center}
}

@media(max-width:760px){
  .home-hero .cat-card:not(:last-child) .cat-ill{height:auto;padding:12px 10px 2px;display:flex;align-items:flex-start;justify-content:center}
  .home-hero .cat-ico{height:68px}
  .home-hero .cat-card .cat-body{padding:6px 12px 12px}
  /* Brede adviseurstegel: pictogram links, verticaal gecentreerd. */
  .home-hero .cat-card:last-child .cat-ill{flex:0 0 112px;display:flex;align-items:center;justify-content:center;padding:10px 4px 10px 10px}
  .home-hero .cat-card:last-child .cat-ico{height:68px}
}
@media(max-width:370px){
  .home-hero .cat-ico{height:66px}
  .home-hero .cat-card:last-child .cat-ico{height:66px}
}
@media(max-width:340px){
  .home-hero .cat-ico{height:64px}
  .home-hero .cat-card:last-child .cat-ill{flex-basis:100px}
  .home-hero .cat-card:last-child .cat-ico{height:64px}
}

/* Scrim-verdieping uitsluitend achter de tekstzone (links/boven):
   de opgehelderde foto at zonder deze stap de contrastmarge op
   (p99 kop 4,71 → 4,24). Horizontale laag dieper over de linker
   58%, verticale laag pas vanaf het midden — gezichten (rechts en
   hoog in de band) en de tafel blijven op de heldere gradering. */
.lb-hero-media::after{background:linear-gradient(180deg,rgba(6,18,34,.12) 0%,rgba(6,18,34,.02) 30%,rgba(6,18,34,.22) 55%,rgba(6,18,34,.46) 76%,rgba(6,18,34,.60) 100%),linear-gradient(90deg,rgba(6,18,34,.82) 0%,rgba(6,18,34,.68) 40%,rgba(6,18,34,.36) 58%,rgba(6,18,34,.12) 74%,rgba(6,18,34,0) 86%)}

/* ================================================================
   UX-MOBILE-LOOP RONDE 8 — NW-PICTOGRAMMAAT + GLOW-HERO +
   VERGELIJKBALK IN DE HEADER (eigenaarsorders 2026-11-01
   00:33–00:35 ET: "make the illustration smaller, same size as
   Nerd Wallet"; "the header a little bit brighter still, look
   like Nerd Wallet — so bright that you want to keep looking";
   "we need that GLOW effect like they have"; "build een
   vergelijkbaar product in de header, just like they do").
   1) Pictogrammen op de gemeten NW-maat: hun categorie-iconen
      renderen 38 CSS-px hoog @390 (gemeten in hun eigen capture,
      componentanalyse) — de onze waren 68 px en zijn nu 38 px
      (35 @≤370, 31 @≤340, 44 desktop).
   2) Hero-foto sterk opnieuw gegradeerd vanaf het meesterbestand
      (belichting 1,45 · macht 0,52 met highlightschouder 0,72 ·
      verzadiging 1,15) mét ingebakken GLOW: een zachte radiale
      lichtbloom (screen-blend, centrum boven-links op de muur,
      elliptische vervaging — geen zichtbare cirkelrand, geen
      halo rond de gezichten). Luminantie mobiele uitsnede
      0,378 → 0,623. De scrim is opnieuw uitgebalanceerd: diep
      plateau alleen achter de tekstzone (links), de verticale
      laag piekt bij de subregel (yf 0,72) en laat onderaan
      (yf > 0,86, géén tekst) vrijwel helemaal los — gezichten en
      de rechter fotohelft houden de volle heldere gradering.
   3) Compacte live vergelijkbalk (.lb-cmpbar) overlapt de
      onderrand van de fotoband: exact het specimen-duel
      (Rabo GoldCard vs ING Creditcard More, kosten per jaar),
      gerenderd uit dezelfde databronnen als het specimen zelf
      (feeParts/cardChecked op specA/specB in build.mjs), met de
      bron-/controledatum-microcopy direct eronder; de balk linkt
      naar /creditcards, net als de specimen-cue. Het volledige
      specimen verderop blijft ongewijzigd.
   Alleen de homepage verandert; elke andere pagina blijft
   pixelidentiek (regels zijn .home-hero/.lb-hero-gescooped).
   ================================================================ */

/* --- 1) Pictogrammen op NW-maat --- */
@media(min-width:761px){
  .home-hero .cat-ico{height:44px}
}
@media(max-width:760px){
  .home-hero .cat-ico{height:38px}
  .home-hero .cat-card:last-child .cat-ico{height:38px}
}
@media(max-width:370px){
  .home-hero .cat-ico{height:35px}
  .home-hero .cat-card:last-child .cat-ico{height:35px}
}
@media(max-width:340px){
  .home-hero .cat-ico{height:31px}
  .home-hero .cat-card:last-child .cat-ico{height:31px}
}

/* --- 2) Scrim v5 (na contrastprobe ronde 8): dekking geconcentreerd
   op de tekstblokken i.p.v. vlak verdeeld — (a) twee donkere radiale
   patches over kopblok (29%/43%, stralen 54%/46%, piek 0,53) en
   subregelblok (30%/70%, stralen 54%/30%, piek 0,52); (b) horizontale
   laag links; (c) lichtgevende teal toplaag (alleen de bovenstrook,
   voor de kicker over de volle breedte); (d) lichte donkere
   onderstaart. Rechts van de tekstkolom en de glow-muur houden de
   volle heldere gradering; de onderwerpen zelf zijn in de gradering
   beschermd (zachte luminantiecaps op gezichten en trui), zodat de
   scrim nergens de gezichten hoeft weg te drukken. --- */
.lb-hero-media::after{background:radial-gradient(54% 46% at 29% 43%,rgba(6,18,34,.53) 0%,rgba(6,18,34,0) 100%),radial-gradient(54% 30% at 30% 70%,rgba(6,18,34,.52) 0%,rgba(6,18,34,0) 100%),linear-gradient(90deg,rgba(6,18,34,.82) 0%,rgba(6,18,34,.56) 42%,rgba(6,18,34,.34) 58%,rgba(6,18,34,.07) 72%,rgba(6,18,34,0) 84%),linear-gradient(180deg,rgba(23,64,110,.50) 0%,rgba(23,64,110,.30) 14%,rgba(23,64,110,.05) 24%,rgba(23,64,110,0) 45%),linear-gradient(180deg,rgba(6,18,34,.02) 0%,rgba(6,18,34,0) 55%,rgba(6,18,34,.10) 72%,rgba(6,18,34,.14) 86%,rgba(6,18,34,.10) 100%)}

/* --- 3) Vergelijkbalk in de headerzone --- */
.lb-cmpbar-wrap{position:relative;z-index:3;margin:-27px 0 0}
.lb-cmpbar{display:flex;align-items:center;gap:12px;min-height:56px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-l);padding:9px 14px;text-decoration:none;color:var(--ink)}
.lb-cmp-side{display:flex;flex-direction:column;gap:2px;line-height:1.22;min-width:0}
.lb-cmp-side-b{flex:1}
.lb-cmp-name{font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-cmp-fig{font-size:16.5px;font-weight:800;color:var(--accent-dark)}
.lb-cmp-unit{font-size:11.5px;font-weight:600;color:var(--ink-soft)}
.lb-cmp-vs{flex:none;width:23px;height:23px;border-radius:50%;background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.lb-cmp-go{flex:none;font-size:22px;font-weight:700;color:var(--accent-dark);line-height:1.3}
.lb-cmpbar-src{font-size:11px;line-height:1.45;color:var(--ink-soft);margin:6px 2px 0}
@media(min-width:761px){
  .lb-cmpbar{max-width:600px}
}
@media(max-width:370px){
  .lb-cmpbar{gap:8px;padding:8px 12px}
  .lb-cmp-name{font-size:11px}
  .lb-cmp-fig{font-size:14.5px}
  .lb-cmp-unit{font-size:10.5px}
  .lb-cmp-vs{width:21px;height:21px;font-size:10px}
}
@media(max-width:340px){
  /* Smallere band iets hoger: het tekstblok (kop 4 regels +
     subregel 4 regels op 320 px) eindigt anders ónder de
     overlappende vergelijkbalk — de balk dekte de laatste
     subregel af en de B-naam werd afgekapt ("ING Creditca…").
     Hogere band → subregel eindigt ruim boven de balkrand. */
  .lb-hero-media{aspect-ratio:320/302}
  .lb-cmpbar{gap:6px;padding:8px 10px}
  .lb-cmp-name{font-size:11px}
  .lb-cmp-fig{font-size:13.5px}
  .lb-cmp-unit{font-size:10px}
  .lb-cmp-vs{width:20px;height:20px;font-size:9.5px}
  .lb-cmp-go{font-size:18px}
}

/* ================================================================
   RONDE 8-microfix (jury-polish Astra, 2026-11-01): zolang het
   hoofdmenu open is, sneed de onderrand van het menupaneel dwars
   door de vergelijkbalk — de onderste prijsstrook en de bronregel
   staken onder het menu uit (gemeten @390: menurand y403, balk
   y374–469). De balk + bronregel (zelfde .lb-cmpbar-wrap) zijn
   daarom volledig verborgen zolang het menu open is. De regel
   grijpt alleen aan op de open staat (.nav.is-open); gesloten
   rendert de pagina byte-identiek.
   ================================================================ */
body:has(.nav.is-open) .lb-cmpbar-wrap{visibility:hidden}

/* ================================================================
   NW-sjabloon · /creditcards (PR ux/listing-creditcards-nw-20261101)
   Eigenaarsdoctrine 2026-10-31: de listing volgt de structuur van de
   NerdWallet-creditcardlisting, in NUXO-huid en met eigen data.
   Alle regels zijn pagina-gebonden (#creditcard-results of eigen
   klassen); andere pagina's blijven ongewijzigd. Dit blok staat
   bewust aan het einde van het bestand — PR #219 voegt hier ook
   regels toe; bij een rebase dit blok als geheel behouden.
   ================================================================ */

/* Categorierij direct onder de kop (NW: categorieknoppen boven de lijst).
   Mobiel: horizontaal scrollbaar; desktop: wrappen. */
.cc-catrow{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:12px 2px 6px;margin:0 -2px;scrollbar-width:none}
.cc-catrow::-webkit-scrollbar{display:none}
.cc-catchip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card);color:var(--ink);font:600 15px/1.2 var(--ui);text-decoration:none;white-space:nowrap}
.cc-catchip:hover{border-color:var(--accent);color:var(--accent-dark)}
@media (min-width:761px){.cc-catrow{flex-wrap:wrap;overflow:visible}}

/* Keuzebadge per kaart (NW: "Our pick for:"-pil bovenaan de kaart) —
   zelfde triage-label, nu als pil met vinkcirkel i.p.v. kleine caps-regel. */
#creditcard-results .ccard-credit .crow-usecase{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;justify-self:start;background:var(--accent-soft);border-radius:var(--radius-pill);padding:6px 12px 6px 7px;margin:0 0 6px;font:600 13.5px/1.25 var(--ui);letter-spacing:0;text-transform:none;color:var(--accent-dark)}
#creditcard-results .ccard-credit .crow-usecase::before{content:"✓";flex:none;width:17px;height:17px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center}

/* Kernfeiten als statistiekband (NW: stat-strip met haarlijn-kolommen),
   alleen desktop; mobiel blijft de bestaande tabelvorm gelden. */
@media (min-width:761px){
  #creditcard-results .ccard-credit .crow-keyfacts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);padding-top:10px;margin:10px 0 2px}
  #creditcard-results .ccard-credit .crow-keyfacts>div{flex-direction:column;align-items:flex-start;gap:1px;padding:0 14px}
  #creditcard-results .ccard-credit .crow-keyfacts>div:first-child{padding-left:0}
  #creditcard-results .ccard-credit .crow-keyfacts>div+div{border-left:1px solid var(--line-soft)}
  #creditcard-results .ccard-credit .crow-keyfacts dt{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
  #creditcard-results .ccard-credit .crow-keyfacts dd{font-size:16.5px}
}

/* Overzichtstabel: bleke teal kopband zoals de NW-vergelijktabel. */
.cc-summary .summary-table thead th{background:var(--accent-soft);color:var(--ink)}

/* Keuzehulp als band onder de lijst (NW: finder-band na de lijst). */
.cc-finder{background:var(--accent-soft);border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px;margin-top:26px}

/* ================================================================
   Fixronde 1 (Astra 8.8) · /creditcards — prioritering.
   (1) De situatierij staat niet langer als tweede concurrerende
   rij bóven de doelrij ("Waarvoor zoek je een kaart?"), maar als
   uitklapbare disclosure "Gidsen en onderwerpen" eronder; de
   chips zelf (klassen, labels, hrefs) zijn ongewijzigd.
   (2) Mobiel krijgt de Sterk-regel dezelfde bleke rationaleband
   als op desktop in plaats van de kale tekstregel uit de R4.2-
   compactie; de gebruiksbadge blijft een secundaire pil.
   Alle regels zijn pagina-gebonden (eigen klassen of
   #creditcard-results); andere pagina's blijven ongewijzigd.
   ================================================================ */

/* (1) Gidsen-disclosure onder de doelrij: rustige tekstknop met
   chevron — bewust géén pil- of filterstijl, zodat filters en
   sortering visueel apart blijven staan. */
.cc-catfold{margin:0}
.cc-catfold-summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 2px;cursor:pointer;list-style:none;font:600 15px/1.3 var(--ui);color:var(--accent-dark)}
.cc-catfold-summary::-webkit-details-marker{display:none}
.cc-catfold-summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s ease}
.cc-catfold[open] .cc-catfold-summary::after{transform:rotate(225deg)}
.cc-catfold .cc-catrow{padding-top:2px;margin-bottom:2px}

/* (2) Sterk als bleke band op mobiel (desktop houdt de pil). */
@media (max-width:760px){
  #creditcard-results .ccard-credit .crow-main .hl-note.sterk{display:block;align-self:stretch;background:var(--accent-soft);border:1px solid #bccfe4;border-radius:10px;padding:8px 11px;margin:2px 0 0;color:var(--accent-dark);font-size:13.5px;line-height:1.45;font-weight:400}
  #creditcard-results .ccard-credit .crow-main .hl-note.sterk b{color:var(--accent-dark)}
}
   HEADER-VRAAGBALK (eigenaarsorder 2026-11-01 01:19/01:24 ET):
   de vergelijkbalk in de hero wordt een werkende vraagbalk —
   dezelfde functie als de ask-bar van de referentie, maar dan
   over de eigen vergelijkingsdata. In rust toont de wrap exact
   het R8-duel (.lb-cmpbar + bronregel, ongewijzigd); de knop
   "Zoek in de vergelijking" vouwt op diezelfde plek het
   vraagformulier open en het resultatenpaneel klapt als overlay
   omlaag uit (geen layout-verschuiving van scherm 1).
   Begrip komt van de Groq-proxy (alleen structuur), de rijen
   renderen uit /zoek-index.json (build-time, gepubliceerde
   cijfers), met de ingebouwde zoeker als stille terugval.
   Alle regels zijn .lb-ask-gescooped: alleen de homepage-hero.
   ================================================================ */
.lb-ask-hint{margin:2px 0 0}
.lb-ask-open{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 10px;margin-left:-8px;background:none;border:0;border-radius:10px;color:var(--accent-dark);font-family:var(--ui);font-size:13.5px;font-weight:700;cursor:pointer}
.lb-ask-open svg{flex:none}
.lb-ask-open:hover{text-decoration:underline;text-underline-offset:3px}
.lb-ask-form{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-l);padding:12px 14px}
.lb-ask-label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.lb-ask-field{display:flex;align-items:center;gap:8px}
.lb-ask-input{flex:1;min-width:0;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:16px}
.lb-ask-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.lb-ask-input::-webkit-search-cancel-button,.lb-ask-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.lb-ask-close{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.lb-ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lb-ask-chip{min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-dark);font-family:var(--ui);font-size:13px;font-weight:600;cursor:pointer}
.lb-ask-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 10px;margin:2px 0 0 -8px;background:none;border:0;border-radius:10px;color:var(--accent-dark);font-family:var(--ui);font-size:13px;font-weight:700;cursor:pointer}
.lb-ask-more::after{content:"›";font-size:17px;line-height:1;transform:rotate(90deg)}
.lb-ask-more[aria-expanded="true"]::after{transform:rotate(-90deg)}
.lb-ask-more:hover{text-decoration:underline;text-underline-offset:3px}
.lb-ask-privacy{margin:10px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-soft)}
/* Fixronde 1 (Astra 8.4, PR #225): het resultatenpaneel is NIET langer een
   absolute overlay (top:100% van de formulier-wrap). Als overlay groeide de
   hero niet mee: de proof-strip schemerde als fragment achter de resultaten
   en het overlappende tegelpaneel (-72px desktop / -40px mobiel) dekte de
   onderste resultaatrijen af. Het paneel staat nu IN de stroom, direct onder
   het formulier in dezelfde wrap: de herokolom groeit volledig mee, acties
   en proof-strip renderen pas ná de complete resultaten en de paneeloverlap
   valt weer uitsluitend op de lege hero-achtergrond (proof-strip heeft
   84px/52px bodempadding tegenover 72px/40px overlap). Rust- en
   focustoestand zijn ongewijzigd: het paneel is dan [hidden]. */
.lb-ask-panel{position:static;margin-top:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-l);padding:12px 14px}
.lb-ask-form[hidden],.lb-ask-panel[hidden],.lb-ask-idle[hidden],.lb-ask-chips[hidden],.lb-ask-more[hidden]{display:none!important}
.lb-ask-head{margin:0 0 6px}
.lb-ask-q{display:block;font-size:15.5px;font-weight:800;line-height:1.3;color:var(--ink)}
.lb-ask-head-sub{display:block;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.lb-ask-status{margin:2px 0;font-size:14px;color:var(--ink-soft)}
.lb-ask-rows{display:flex;flex-direction:column}
.lb-ask-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 2px;border-top:1px solid var(--line-soft);text-decoration:none;color:var(--ink)}
.lb-ask-row:first-child{border-top:0}
.lb-ask-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.lb-ask-row-main b{font-size:15px;font-weight:700}
.lb-ask-row-main small{font-size:11.5px;color:var(--ink-soft)}
.lb-ask-fig{flex:none;font-size:16px;font-weight:800;color:var(--accent-dark)}
.lb-ask-fig small{font-size:11.5px;font-weight:600;color:var(--ink-soft)}
.lb-ask-row-go{flex:none;font-size:20px;font-weight:700;color:var(--accent-dark)}
.lb-ask-risk{margin:8px 0 0;font-size:13.5px;color:var(--ink)}
.lb-ask-foot{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:14px;font-weight:700;color:var(--accent-dark);text-decoration:none}
.lb-ask-foot:hover{text-decoration:underline;text-underline-offset:3px}
.lb-ask-none{margin:2px 0 6px;font-size:14px;line-height:1.5;color:var(--ink)}
.lb-ask-catlinks{display:flex;flex-direction:column}
.lb-ask-catlink{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;color:var(--accent-dark);text-decoration:none;border-top:1px solid var(--line-soft)}
.lb-ask-catlink:first-child{border-top:0}
@media(min-width:761px){
  .lb-ask-form,.lb-ask-panel{max-width:600px}
}
@media(max-width:340px){
  .lb-ask-form{padding:10px 12px}
  .lb-ask-panel{padding:10px 12px}
  .lb-ask-row-main b{font-size:14px}
  .lb-ask-fig{font-size:14.5px}
  .lb-ask-q{font-size:14.5px}
}

/* ================================================================
   NW-STRUCTUUR + TYPE (eigenaarsorders 2026-11-01, Smurf) —
   "make the layout on mobile and desktop just like nerdwallet" +
   "we need bolder letter, check what nerdwallet does better in ux
   and copy it all". Eén override-laag aan het einde van dit
   bestand; alle eerdere lagen blijven intact (tests pinnen er
   meerdere). Kleuren uitsluitend via de bestaande tokens, zodat
   de skin-ronde (Midnight) via tokens kan herskinnen.
   Type: --display wordt Plus Jakarta Sans — reeds zelf gehost,
   variabel 200–800, dus géén nieuwe webfont-download; alleen het
   gewicht gaat omhoog (400 serif → 800 grotesk, NW-karakter).
   ================================================================ */
:root{--display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* --- Type: koppen 800, krappe leading, NW-schaal --- */
.hero h1,.tasks h1{font-weight:800;font-size:clamp(30px,4.6vw,52px);line-height:1.06;letter-spacing:-.02em}
.hero h2{font-weight:800;font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.02em}
.sec h2{font-weight:800;font-size:clamp(27px,3.2vw,40px);line-height:1.12;letter-spacing:-.02em}
.sit-col h2{font-weight:800;font-size:22px;letter-spacing:-.01em}
.brand b{font-weight:800;font-size:34px;letter-spacing:.01em}
.foot .brandline{font-weight:800}
.nav a{font-weight:700}
.btn{font-weight:700}
.kicker{font-weight:800}
.guide-card h3{font-weight:800;font-size:20px;letter-spacing:-.01em}
.panel h2,.panel h3{font-weight:800}
.cc-guide-head h1{font-weight:800;font-size:clamp(30px,4vw,42px);line-height:1.08;letter-spacing:-.02em}
.cc-list-head h2{font-weight:800;font-size:24px;letter-spacing:-.01em}
.cc-triage .qf-label{font-family:var(--ui);font-weight:700;font-size:19px;letter-spacing:0}
.qf-pill{font-weight:700}
.crow-name{font-weight:800}
.lb-hero h1 i{font-style:normal;color:var(--gold)}

/* --- Zichtbare focus (NW: altijd duidelijk) --- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* --- Homepage-hero: volbleed kleurveld, copy links, foto rechts --- */
/* overflow:hidden houdt de mobiele fotostrip-bleed (400px vak uit
   aspect-ratio + min-height, zie .nw-hero-media) binnen het veld:
   de strip blijft visueel volbleed, maar telt niet meer mee in de
   layoutbreedte van de pagina (fixronde 2, Astra 8,8 — de 424px-capture). */
.nw-hero{background:linear-gradient(103deg,var(--accent-dark) 0%,var(--accent) 82%);color:#fff;padding:0;overflow:hidden}
.nw-hero-grid{max-width:1152px;margin:0 auto;padding:44px 24px 20px;display:grid;grid-template-columns:1fr;gap:0;align-items:stretch}
.nw-hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.nw-hero .kicker{color:#fff;opacity:.94;margin:0 0 10px}
.nw-hero h1{color:#fff;margin:0 0 12px;max-width:580px}
.nw-hero-copy .lb-lede-short{display:block;color:#fff;font-size:19px;line-height:1.5;margin:0 0 18px;max-width:530px}
.nw-hero .lb-cmpbar-wrap{margin:0;width:100%;max-width:580px}
.nw-hero-actions{margin-top:16px}
.nw-hero .btn-primary{background:#fff;color:var(--accent-dark);border-color:#fff}
.nw-hero .btn-primary:hover{background:var(--paper-tint);border-color:var(--paper-tint);color:var(--accent-dark)}
.nw-hero .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.nw-hero .btn-secondary:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.nw-hero-media{position:relative;border-radius:18px;overflow:hidden;min-height:200px;margin-top:26px}
.nw-hero-media .lb-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 30%}
.nw-hero .proof-strip{max-width:1152px;margin:0 auto;padding:12px 32px 52px;border:0}
.nw-hero .proof-strip li{color:#fff}
.nw-hero .proof-strip svg{color:var(--gold)}
@media (min-width:1024px){
  .nw-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;padding:44px 32px 20px}
  .nw-hero-media{margin-top:0;min-height:440px;border-radius:0}
  .nw-hero-media .lb-hero-photo{object-position:60% 50%}
  .nw-hero .proof-strip{padding-bottom:84px}
}

/* --- Homepage: breder canvas + tegelpaneel dat de hero overlapt --- */
.nw-home-wrap{max-width:1200px;padding:0 24px}
.nw-tiles-panel{background:var(--accent-soft);border-radius:16px;padding:24px 16px;margin-top:-40px;position:relative;z-index:3}
.nw-tiles-panel .cat-grid{margin-top:0;gap:16px}
.nw-tiles-panel .cat-card{background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--shadow-s);position:relative;margin:0}
.nw-tiles-panel .cat-card::after{content:"\2197";position:absolute;top:10px;right:13px;color:var(--ink-faint);font-weight:700;font-size:15px}
.nw-tiles-panel .cat-ill{display:flex;justify-content:center;align-items:flex-start}
.nw-tiles-panel .cat-ico{height:58px;width:auto;max-width:104px;object-fit:contain}
.nw-tiles-panel .cat-body{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:10px;width:100%}
.nw-tiles-panel .cat-body b{font-weight:800;font-size:18px}
.nw-tiles-panel .cat-value{font-size:15px;color:var(--ink-soft);line-height:1.45}
.nw-tiles-panel .cat-go{font-size:13.5px;font-weight:700;color:var(--accent-dark);margin-top:4px}
@media (max-width:760px){
  .nw-tiles-panel .cat-card:last-child{grid-column:1/-1}
}
@media (min-width:1101px){
  .nw-tiles-panel .cat-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .nw-tiles-panel .cat-ico{height:72px;width:72px}
  .nw-tiles-panel .cat-body b{font-size:18px}
}

/* --- Specimen + counts in één bleek paneel (NW-tariefpaneelpatroon) --- */
.nw-spec-panel{background:var(--paper-tint);border-radius:16px;padding:24px 20px;margin-top:48px}
.nw-spec-panel .lb-counts{margin-top:0}
.nw-spec-panel .lb-stat b{font-size:32px}
@media (min-width:1024px){
  .nw-spec-panel{padding:32px 40px}
  .nw-spec-panel .lb-stat b{font-size:40px}
}

/* --- Sectieritme homepage + trust/gidsen naar NW-patroon --- */
.nw-home-wrap .sec{padding-top:48px}
.sec:has(.guide-cards)>h2{text-align:center}
.guide-card{transition:box-shadow .18s ease}
.guide-card:hover{box-shadow:var(--shadow-m)}
@media (min-width:1024px){
  .trust-list{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:24px;padding-left:0;list-style:none}
  .trust-list li{border-top:2px solid var(--line);padding-top:14px}
}

/* --- Footer-koppen: NW-patroon (caps 800 + korte gouden streep) --- */
.foot-section summary{background:linear-gradient(var(--gold),var(--gold)) left bottom/26px 2px no-repeat;padding-bottom:7px}

/* --- Hubkop (o.a. /creditcards): donkere NW-band, volbleed
   (framework §9: de listingband is een veld van rand tot rand, geen
   ingelegde afgeronde rechthoek; inhoud lijnt uit op de 1152-kolom) --- */
.cc-guide-head{background:linear-gradient(103deg,var(--accent-dark) 0%,var(--accent) 88%);color:#fff;border-radius:0;padding:26px max(26px,calc(50vw - 544px));margin:14px calc(50% - 50vw) 0}
.cc-guide-head h1{color:#fff;margin:0}
.cc-guide-head .cc-lede{color:rgba(255,255,255,.93)}
.cc-guide-head .cc-lede a{color:#fff;text-decoration:underline}
.cc-guide-head .btn-primary{background:#fff;color:var(--accent-dark);border-color:#fff}
.cc-guide-head .btn-primary:hover{background:var(--paper-tint);border-color:var(--paper-tint);color:var(--accent-dark)}
.cc-guide-head .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.cc-guide-head .btn-secondary:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.cc-guide-head .cc-why-link{color:#fff}
.cc-guide-head .cc-risk{border:1.5px solid var(--gold);background:rgba(0,0,0,.16);color:#fff;border-radius:10px;padding:10px 14px}
@media (max-width:760px){
  .cc-guide-head{padding:20px 16px;border-radius:0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
}

/* --- Correcties op geërfde Lane-B/R-regels (zelfde laag) ---
   .home-hero-copy{order:1} en .lb-hero-media{grid-column:1/-1}
   stammen uit de display:contents-overlaycompositie; in het
   NW-raster horen copy links/eerst en de foto als eigen kolom.
   De ::after-donkerwash op de foto diende de oude overlaytekst;
   de foto staat nu op zichzelf (NW), dus geneutraliseerd. */
.nw-hero-copy{order:0}
.nw-hero-media::after{background:none}
@media (min-width:1024px){
  .nw-hero-media{grid-column:auto;aspect-ratio:auto}
}
@media (max-width:760px){
  .nw-hero-media{aspect-ratio:2/1;margin:20px 0 0}
}

/* --- Fixronde 2 (Astra 8,8): foto ontkoppeld van de antwoordkolom ---
   Het rasteritem rekte mee met de uitgeklapte .lb-ask-panel (444px rust →
   753px resultaten / 783px lening); object-fit:cover sneed dan het gezicht
   rechts uit beeld. De foto houdt nu de rustverhouding 504/444, bovenaan de
   kolom uitgelijnd; het veld groeit erachter. Deze regel staat bewust ná
   het correctieblok hierboven (aspect-ratio:auto) zodat hij wint. */
@media (min-width:1024px){
  .nw-hero-media{align-self:start;aspect-ratio:504/444;min-height:0}
}

/* --- Counts-strip zichtbaar in het telpaneel (NW-statistiekpatroon;
   basisregel .lb-counts{display:none} liet hem alleen op mobiel zien).
   Het specimen boven de telstrook is op eigenaarsorder 2026-11-01 13:58 ET
   verwijderd; de telstrook staat nu alleen in dit paneel. --- */
.nw-spec-panel .lb-counts{display:block}
.nw-spec-panel .lb-stat-row{display:flex;flex-wrap:wrap;gap:16px 40px}
.nw-spec-panel .lb-stat{display:flex;flex-direction:column;gap:1px}
.nw-spec-panel .lb-stat span{color:var(--ink-soft);font-size:14px}
@media (max-width:760px){
  .nw-spec-panel .lb-stat-row{gap:12px 26px}
  .nw-spec-panel .lb-stat b{font-size:28px}
}
.cc-guide-head .cc-risk b{color:#fff}

/* --- Mobiele tegel-/telstrook-fix: de 2-koloms tegelregel uit de
   R-rondes was gescoped op .lb-hero; de tegels staan nu in het
   paneel buiten de hero, dus hier opnieuw verankerd. --- */
@media (max-width:760px){
  .nw-tiles-panel .cat-grid{grid-template-columns:1fr 1fr}
  .nw-spec-panel .lb-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
  .nw-spec-panel .lb-stat{align-items:center;text-align:center}
}
@media (max-width:760px){
  .nw-tiles-panel .cat-value{display:block}
  .nw-tiles-panel .cat-go{position:static}
}
.nw-tiles-panel .cat-value{width:100%}

/* ================================================================
   GELIJKVORMIGHEIDSLUS (eigenaarsescalatie 2026-11-01 14:00 ET:
   "build it that way, don't stop until look similar to that") —
   frameworkmetingen uit nw-ux-framework.md (§2/§5/§6/§7/§9/§13)
   tegen de captures van de samengevoegde boom: paneeloverlap
   −72/−40, panelen volbleed op mobiel, sticky tabelkop op
   /creditcards, vindband (.nw-finder) ná het telpaneel in plaats
   van in de hero (framework §8 module 8), vraagkaart-radius 12.
   ================================================================ */
@media (min-width:1024px){
  .nw-tiles-panel{padding:32px;margin-top:-72px}
}
/* Vindband: de /kiezen-gidskaart als eigen band onder het telpaneel
   (stond tot nu toe in de hero; op desktop was ze daar display:none). */
.nw-home-wrap a.lb-guide.nw-finder{display:flex;flex-direction:row;align-items:center;gap:18px;margin-top:24px;padding:18px 22px;background:var(--accent-soft);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink)}
.nw-finder .lb-guide-art{flex:none;width:60px;height:44px;position:static;opacity:1}
.nw-finder .lb-guide-art rect{fill:var(--accent);opacity:.5}
.nw-finder .lb-guide-art .ga-dot{fill:var(--gold);opacity:1}
.nw-finder .lb-guide-q{flex:1;font:700 16.5px/1.35 var(--ui);color:var(--ink)}
.nw-finder .lb-guide-a{font:700 15px/1.3 var(--ui);color:var(--accent-dark);white-space:nowrap}
/* Sticky tabelkop in het samenvattingsoverzicht (framework §9). */
.summary-table thead th{position:sticky;top:0;background:#fff;z-index:3;box-shadow:inset 0 -1px 0 var(--line)}
/* PR D (sitewide NW-pass 2026-11-01): de sticky kop hierboven kon nooit
   plakken — .table-wrap (overflow-x:auto) en .fact-table (overflow:hidden)
   maken van beide voorouders scroll-containers, dus reisde de kop niet mee
   met de pagina (checklistrij 31). Op ≥761px is de thead zichtbaar en past
   de tabel (min. 680px) zonder horizontale scroll; daar mag de overflow
   open. De kophoeken krijgen de tabelradius terug nu overflow:hidden niet
   meer knipt. Mobiel stapelt de tabel (thead verborgen) — ongewijzigd. */
@media(min-width:761px){
  .cc-summary .table-wrap{overflow:visible}
  .cc-summary .summary-table{overflow:visible}
  .cc-summary .summary-table thead th:first-child{border-top-left-radius:13px}
  .cc-summary .summary-table thead th:last-child{border-top-right-radius:13px}
}
/* Vraagkaart in de hero: één container, radius 12 (framework §6).
   Het label blijft in de DOM (a11y) maar is visueel weg — NW toont
   alleen het veld met placeholder; de privacyregel is de onderste
   rij van de kaart (de "strip" uit het framework). */
.nw-hero .lb-ask-form{border-radius:12px;padding:10px 14px}
.nw-hero .lb-ask-label{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nw-hero .lb-ask-privacy{margin-top:6px}
/* Eén paneel in de beantwoorde staat (eigenaarsorder 2026-11-01 17:57 ET):
   formulier en resultatenpaneel waren twee losse witte kaarten met de
   navy hero-achtergrond in de 8px-spleet ertussen — de resultaten lazen
   als een vreemde module onder een zoekbalk die nog op een vraag wacht.
   Zodra het paneel zichtbaar is, vallen de onderradius + schaduw van het
   formulier en de bovenmarge/-radius van het paneel weg; de onderrand
   van het formulier wordt de scheidingslijn en de door askbar.js naar
   het paneel verplaatste privacyregel sluit de kaart af. In rust
   (paneel [hidden]) matcht :has() niet: de ruststand blijft ongewijzigd. */
.nw-hero .lb-ask:has(> .lb-ask-panel:not([hidden])) .lb-ask-form{border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none}
.nw-hero .lb-ask:has(> .lb-ask-panel:not([hidden])) .lb-ask-panel{margin-top:0;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:12px;border-bottom-right-radius:12px}
.nw-hero .lb-ask-panel .lb-ask-privacy{margin-top:10px}
@media (max-width:760px){
  .nw-tiles-panel{margin:-40px -24px 0}
  .nw-spec-panel{margin-left:-24px;margin-right:-24px;padding:24px 16px}
  .nw-tiles-panel .cat-card{padding:16px 12px}
  .nw-tiles-panel .cat-ico{height:40px;width:40px}
  .nw-tiles-panel .cat-body b{font-size:16px}
  .nw-tiles-panel .cat-value{font-size:14px}
  .compare.rows .ccard-credit .crow-name{font-size:19px}
  .nw-home-wrap a.lb-guide.nw-finder{flex-direction:column;align-items:flex-start;gap:8px}
  .mast-main{padding-top:3px;padding-bottom:3px}
}

/* =====================================================================
   Spacing- en layoutaudit 2026-11-01 (eigenaarsopdracht: "no weird space,
   layout like NerdWallet"). Gemeten op 106 routes × 320/390/768/1440 en
   per paginatype op screenshots beoordeeld. Alleen afstand/uitlijning:
   geen copy, kleur, masthead, advertentieslots of kaarthoogtes.
   Oorzaak meestal: een latere `.sec{padding:… 0}`-shorthand of een
   ontbrekende line-height/minmax(0,…) in een oudere laag.
   ===================================================================== */

/* Homepage — boxed secties kregen hun zij-padding terug (`.sec` won van
   `.trust`/`.home-band`), en raken elkaar niet meer */
.nw-home-wrap .sec.trust{padding:28px 32px}
.nw-home-wrap .sec.home-band{padding:36px 32px}
.nw-home-wrap .home-band+.trust{margin-top:24px}
@media(max-width:760px){
  .nw-home-wrap .sec.home-band{padding:24px 18px}
  .nw-home-wrap .sec.trust{padding:22px 18px}
  /* tellerlabel 'hypotheekvermeldingen' liep uit zijn cel */
  .nw-spec-panel .lb-stat span{font-size:12px;letter-spacing:.02em;overflow-wrap:anywhere;hyphens:auto}
  /* tegelkolommen mogen krimpen (320px: rechterkolom liep buiten beeld) */
  .nw-tiles-panel .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* heldfoto past binnen de kolom i.p.v. 400px breed */
  .nw-hero-media{min-height:0}
}

/* Hubs (/creditcards, /leningen, /sparen, /hypotheken): inhoud van de
   donkere band lijnt uit met kruimelpad, filters en kaarten eronder */
@media(min-width:761px){
  body:has(.wrap-compare) .cc-guide-head{padding-inline:max(var(--hub-pad),calc(50vw - var(--hub-max)/2 + var(--hub-pad)))}
  body:has(.mort-section) .crumbs{margin-top:22px}
  body:has(.mort-section) .cc-guide-head{padding-top:26px}
}
.popular-compares{padding:0;margin:32px 0 8px}
.popular-compares .compare-links a{color:var(--accent-dark);text-underline-offset:3px}
.hub-start-slim+.sec-disclosure{margin-top:6px}
/* leningkaart: 'Bekijk bij de aanbieder ›' op één regel */
.ccard.loan-card .crow-side>.btn{padding-inline:12px;text-align:center}
/* /hypotheken top-10: rentekolom springt niet meer per rij */

/* Detailpagina's */
.mort-card>.mort-card-foot{grid-column:1/-1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;border-top:1px solid var(--line-soft)}
.mort-card>.mort-card-foot .crow-more[open]{flex-basis:100%;order:2}
.detail-hero:not(.detail-hero-credit) .detail-identity{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:6px 0 2px}
.detail-hero:not(.detail-hero-credit) .detail-identity .detail-visual{background:#fff;border:1px solid var(--line)}
@media(min-width:761px){.detail-hero:not(.detail-hero-credit) .detail-identity h1{font-size:clamp(28px,3.4vw,40px);line-height:1.15}}
.detail-hero:not(.detail-hero-credit)~.two-col .panel h2:first-child{margin-top:0}
.wrap>.sec+.verified-line{margin-top:-28px}
.detail-hero-credit .detail-facts dd{text-align:left}
.panel-block>h2,.sources>h2{margin:0 0 12px}
.sec>.faq{max-width:none}
@media(max-width:760px){
  .wrap>.sec+.verified-line{margin-top:-18px}
  .detail-hero-credit .detail-facts>div:last-child:nth-child(odd){grid-column:1/-1}
  .detail-hero-credit .detail-hero-panel .cta-secondary{display:flex;width:100%;justify-content:center;text-align:center}
  .compare.rows .crow-facts dd{text-align:left}
}

/* Tabellen */
.fact-table.stack-mobile thead th{width:auto}
.fact-table td small+br{display:none}
.fact-table td>.btn{white-space:nowrap}
@media(max-width:760px){
  .fact-table.stack-mobile{box-shadow:none;border-radius:0;overflow:visible;margin:0}
  .fact-table.stack-mobile tbody tr:last-child,.fact-table.stack-mobile tr:last-child{margin-bottom:0}
}

/* Redactionele pagina's: koppen met eigen regelafstand, geen dubbele gaten */
.prose h2,main .wiz h2{line-height:1.2}
.prose h2{margin-bottom:.45em}
.prose>.hero+h2{margin-top:8px}
.prose .sec>h2:first-child{margin-top:0}
.guide-layout~.sec+.sec,.advisor-finder~.sec+.sec{padding-top:0}
@media(min-width:1000px){.guide-layout~.sec .faq{max-width:calc(100% - 320px)}}
.sec:has(.guide-cards)>h2{text-align:left}
.nw-home-wrap .sec:has(.guide-cards)>h2{text-align:center}
article.guide-card{display:flex;flex-direction:column}
article.guide-card .byline{margin-bottom:12px}
article.guide-card .btn.card-action{margin-top:auto}

/* /financieel-adviseurs: link + kleine lettertjes onder 'Alle plaatsen' */
.advisor-places-link{line-height:1.5}
@media(max-width:760px){.advisor-places-link .link-arrow{display:flex}.advisor-places-link .fineprint{display:block}}

/* /kiezen (wizard.css komt ná styles.css in de bundel → `main`-prefix) */
main .choice-guide-nav{margin-bottom:64px}
main .creditcard-choice .verified{border-radius:14px}
@media(min-width:901px){
  main .choice-guide-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  main .choice-guide-grid>.choice-guide-link{grid-column:span 2}
  main .choice-guide-grid>.choice-guide-link:nth-child(4):nth-last-child(2),main .choice-guide-grid>.choice-guide-link:nth-child(5):last-child{grid-column:span 3}
}
@media(min-width:361px) and (max-width:900px){main .choice-guide-grid>.choice-guide-link:last-child:nth-child(odd){grid-column:1/-1;min-height:0}}
@media(max-width:560px){main .choice-guide-nav{margin-bottom:40px}}

/* Footer 761–1023px: drie gelijke kolommen, koppen op één regel */
@media(min-width:761px) and (max-width:1023px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-about{grid-column:1/-1}}
/* /creditcards 320px: de kaartrij mag krimpen (kaart was 336px breed) */
@media(max-width:760px){.compare.rows{grid-template-columns:minmax(0,1fr)}}
/* Kaartvoet mobiel: 'Vergelijk' krimpt niet onder zijn label, de bronregel
   neemt de rest (overlapte nadat de kaart binnen zijn kolom bleef) */
@media(max-width:760px){
  .compare.rows .ccard-credit .crow-foot .cmp-pick{flex:none}
  .compare.rows .ccard-credit .crow-foot .crow-source{flex:1 1 0;min-width:0}
}
/* Verificatieronde 2 (regressies ≤360px + resterende P2's) */
@media(max-width:760px){
  .nw-tiles-panel .cat-go{transform:none;white-space:nowrap;margin-top:6px}
  .detail-hero:not(.detail-hero-credit) .detail-hero-panel{margin-top:16px}
  .detail-hero:not(.detail-hero-credit) .detail-hero-panel .btn{width:100%}
}
@media(max-width:360px){
  .compare.rows .ccard-credit .crow-foot{flex-wrap:wrap;row-gap:4px}
  .compare.rows .ccard-credit .crow-foot .crow-source{flex-basis:100%;text-align:left}
  .compare.rows .crow-usecase{grid-column:1/-1;justify-self:start;max-width:100%}
}
@media(min-width:761px){
  /* kernfeitenband: haarlijnkolommen zoals bedoeld, geen losse kaders met tekst tegen de rand */
  #creditcard-results .ccard-credit .crow-keyfacts>div{background:none;border-top:0;border-right:0;border-bottom:0;border-radius:0}
  #creditcard-results .ccard-credit .crow-keyfacts>div:first-child{border-left:0}
  .nw-spec-panel .lb-stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Homepage-hero 'stel op de bank' (eigenaar 2026-11-01): brandpunt op de
   gezichten (x≈58%, y≈25% van de bron) zodat de 2:1-mobielstrook en het
   bijna vierkante desktopvlak geen hoofden of handen afsnijden. */
.nw-hero-media .lb-hero-photo{object-position:58% 22%}
@media (min-width:1024px){.nw-hero-media .lb-hero-photo{object-position:57% 40%}}

/* Homepage-hero: foto weer ACHTER de tekst en de vraagbalk (eigenaar
   2026-11-01: "the header should be behind those text and those bar like
   it used to be" — vergelijk de overlay-hero van #224). De foto wordt een
   achtergrondlaag van het volbleed navy veld; een navy verloop vanaf de
   tekstkant (links op desktop, onder op mobiel) houdt de witte tekst
   leesbaar (WCAG ≥4,5:1 op de verlooptint) en laat het stel rechts/boven
   zichtbaar. Vaste fotohoogte: als het antwoordpaneel van de vraagbalk
   uitklapt groeit het veld in effen navy, de uitsnede verspringt niet. */
.nw-hero{position:relative;isolation:isolate;background:#0b2447}
.nw-hero-grid{position:static}
.nw-hero .nw-hero-media{position:absolute;z-index:-1;inset:0 0 auto 0;height:min(100%,460px);margin:0;border-radius:0;min-height:0;aspect-ratio:auto;align-self:auto;overflow:hidden}
.nw-hero .nw-hero-media .lb-hero-photo{object-position:62% 24%}
.nw-hero .nw-hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,36,71,.50) 0%,rgba(11,36,71,.62) 45%,rgba(11,36,71,.93) 82%,#0b2447 100%)}
.nw-hero-copy{position:relative}
@media (min-width:1024px){
  .nw-hero-grid{grid-template-columns:minmax(0,600px);padding:64px 32px 28px}
  .nw-hero .nw-hero-media{inset:0 0 auto 26%;height:min(100%,720px)}
  .nw-hero .nw-hero-media .lb-hero-photo{object-position:60% 30%}
  .nw-hero .nw-hero-media::after{background:
    linear-gradient(90deg,#0b2447 0%,rgba(11,36,71,.86) 14%,rgba(11,36,71,.35) 40%,rgba(11,36,71,0) 62%),
    linear-gradient(0deg,#0b2447 0%,rgba(11,36,71,.55) 16%,rgba(11,36,71,0) 34%)}
  .nw-hero .proof-strip{position:relative}
}
/* Mobiel/tablet (<1024): het stel krijgt een eigen, lichte fotostrook
   bovenaan; de tekst begint waar de foto naar navy is overgevloeid. Zo
   zijn de gezichten helder zichtbaar en blijft de witte tekst op effen
   donker staan (eigenaar 2026-11-01: "mobile a little bit better"). */
@media (max-width:1023px){
  .nw-hero{--hero-photo-top:clamp(196px,50vw,300px)}
  .nw-hero-grid{padding-top:var(--hero-photo-top)}
  .nw-hero .nw-hero-media{height:calc(var(--hero-photo-top) + 110px)}
  .nw-hero .nw-hero-media .lb-hero-photo{object-position:66% 18%}
  .nw-hero .nw-hero-media::after{background:linear-gradient(180deg,
    rgba(11,36,71,.04) 0,
    rgba(11,36,71,.10) calc(var(--hero-photo-top) - 110px),
    rgba(11,36,71,.82) calc(var(--hero-photo-top) - 6px),
    rgba(11,36,71,.95) calc(var(--hero-photo-top) + 50px),
    #0b2447 100%)}
}
/* Telefoon (≤760): exact het NerdWallet-mobielpatroon (eigenaar
   2026-11-01, met NW-screenshot als referentie): foto met merktint rechts
   bovenin, H1 + lede eroverheen aan de linkerkant, daaronder de vraagbalk
   op effen navy, dan meteen het tegelpaneel. Geen kicker, knoppenrij of
   bewijsstrip in het veld (NW heeft die niet; de tegels direct eronder
   zijn de 'Vergelijk producten'-route). */
@media (max-width:760px){
  .nw-hero-grid{padding:40px 16px 0}
  .nw-hero .kicker,.nw-hero .lb-hero-actions,.nw-hero .proof-strip{display:none}
  .nw-hero h1{font-size:34px;line-height:1.12;max-width:15ch;margin:0 0 14px;text-shadow:0 1px 18px rgba(11,36,71,.45)}
  .nw-hero-copy .lb-lede-short{font-size:16px;line-height:1.55;max-width:none;margin:0 0 24px;text-shadow:0 1px 12px rgba(11,36,71,.5)}
  .nw-hero .lb-cmpbar-wrap{max-width:none}
  .nw-hero{padding-bottom:92px}
  .nw-hero .nw-hero-media{inset:0 0 auto 28%;height:290px}
  .nw-hero .nw-hero-media .lb-hero-photo{object-position:74% 16%}
  .nw-hero .nw-hero-media::after{background:
    linear-gradient(90deg,#0b2447 0%,rgba(11,36,71,.5) 20%,rgba(11,36,71,.08) 46%,rgba(11,36,71,.08) 100%),
    linear-gradient(0deg,#0b2447 0%,rgba(11,36,71,.6) 20%,rgba(11,36,71,0) 46%)}
}
/* Telefoon: gezichten vrij van de kop (eigenaar: "the face is covered by
   the letters"). De foto wordt ingezoomd en naar rechts geschoven zodat
   beide gezichten rechts van de smallere H1-kolom vallen; de kop breekt
   over drie regels zoals bij NerdWallet. Schaalt met de schermbreedte. */
@media (max-width:760px){
  .nw-hero .nw-hero-media{inset:0 0 auto 0;height:300px}
  .nw-hero .nw-hero-media .lb-hero-photo{inset:auto;top:-11vw;left:calc(-14vw - 24px);width:165vw;height:auto;max-width:none;object-fit:fill}
  .nw-hero h1{max-width:5.4em}
  .nw-hero .nw-hero-media::after{background:
    linear-gradient(90deg,#0b2447 0%,rgba(11,36,71,.78) 30%,rgba(11,36,71,.25) 52%,rgba(11,36,71,.06) 66%,rgba(11,36,71,.06) 100%),
    linear-gradient(0deg,#0b2447 0%,rgba(11,36,71,.65) 22%,rgba(11,36,71,0) 48%)}
}
@media (max-width:360px){.nw-hero h1{font-size:30px}}
/* Virtuele kaartvoorkant — optie B "Premium kleur" (eigenaarsbesluit 2026-11-01, AGENTS.md).
   --cf-bg/--cf-ink komen uit src/card-face.mjs (kleur uit het eigen logobestand); het logo
   staat ongewijzigd op een witte tab. Onderste scrim houdt niveau/netwerk leesbaar. */
.ccard-credit .crow-identity .crow-visual.card-face,.detail-hero-credit .detail-identity .detail-visual.card-face{--cf-w:var(--logo-slot-w);position:relative;box-sizing:border-box;width:var(--cf-w);min-width:var(--cf-w);max-width:var(--cf-w);flex:0 0 var(--cf-w);height:calc(var(--cf-w) / 1.586);min-height:0;max-height:none;
  display:block;padding:0;margin:0;overflow:hidden;color:var(--cf-ink);border:0;border-radius:calc(var(--cf-w) * .06);
  background:
    linear-gradient(to top,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 42%),
    radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 55%),
    repeating-radial-gradient(circle at 115% 120%,rgba(255,255,255,.05) 0 2px,transparent 2px 14px),
    linear-gradient(135deg,color-mix(in srgb,var(--cf-bg) 82%,#fff) 0%,var(--cf-bg) 45%,color-mix(in srgb,var(--cf-bg) 62%,#000) 100%);
  box-shadow:0 1px 2px rgba(16,40,63,.12),0 8px 18px -8px rgba(16,40,63,.38)}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cf-accent)}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face > .issuer-logo,:is(.ccard-credit .crow-identity,.detail-identity) .card-face > .brand-word{position:absolute;left:7%;top:9%;height:22%;max-width:62%;box-sizing:border-box;margin:0;padding:2.2% 3.4%;background:#fff;border-radius:calc(var(--cf-w) * .03);display:flex;align-items:center;justify-content:flex-start;box-shadow:0 1px 3px rgba(0,0,0,.18)}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face > .issuer-logo{width:auto}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face > .issuer-logo img{display:block;height:100%;width:auto;max-width:100%;max-height:none;object-fit:contain}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face > .issuer-logo.cf-square{height:32%;top:7%;padding:1.6%}
.ccard-credit .crow-identity .card-face > .brand-word,.detail-identity .card-face > .brand-word{color:#10283F;font-size:calc(var(--cf-w) * .07);letter-spacing:.08em;line-height:1;font-weight:800;text-align:left;height:auto;min-height:22%}
.ccard-credit .crow-identity .card-face > .brand-word-long,.detail-identity .card-face > .brand-word-long{font-size:calc(var(--cf-w) * .045);line-height:1.15;max-width:70%}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-chip{position:absolute;left:7%;top:46%;width:14%;height:18%;border-radius:calc(var(--cf-w) * .016);background:linear-gradient(135deg,#F6E3A1 0%,#D2AE52 48%,#EBD27F 100%);box-shadow:inset 0 0 0 1px rgba(90,64,10,.35)}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-chip::before{content:"";position:absolute;inset:28% 0;border-top:1px solid rgba(90,64,10,.35);border-bottom:1px solid rgba(90,64,10,.35)}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-chip::after{content:"";position:absolute;inset:0 38%;border-left:1px solid rgba(90,64,10,.35);border-right:1px solid rgba(90,64,10,.35)}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-nfc{position:absolute;left:28%;top:48%;width:7%;height:14%;opacity:.85}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-nfc,:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-nfc::before,:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-nfc::after{box-sizing:border-box;border:solid var(--cf-ink);border-width:0 calc(var(--cf-w) * .008) 0 0;border-radius:0 50% 50% 0}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-nfc::before,:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-nfc::after{content:"";position:absolute;top:50%;transform:translateY(-50%)}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-nfc::before{left:-45%;width:85%;height:66%}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-nfc::after{left:-90%;width:70%;height:34%}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-foot{position:absolute;left:7%;right:7%;bottom:8%;display:flex;justify-content:space-between;align-items:flex-end;gap:6px;font-size:calc(var(--cf-w) * .062);line-height:1;color:var(--cf-ink);white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.35)}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-tier{font-weight:700;letter-spacing:.04em}
:is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-net{font-weight:600;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis}
.detail-hero-credit .detail-identity .detail-visual.card-face{--cf-w:200px}
@media (max-width:760px){
  .ccard-credit .crow-identity .crow-visual.card-face{--cf-w:112px;padding:0}
  .detail-hero-credit .detail-identity .detail-visual.card-face{--cf-w:150px;padding:0}
  :is(.ccard-credit .crow-identity,.detail-identity) .card-face .cf-foot{font-size:8px}
}

/* Kaartscheiding in de lijst (eigenaar 2026-11-01): elke kaart is in één oogopslag een eigen
   blok bij scrollen — merkkleur als bovenrand, licht getinte kop in die kleur, sterkere rand
   en schaduw, meer ruimte tussen kaarten. --brand = dezelfde kleur als de kaartvoorkant. */
.compare.rows{gap:28px}
.compare.rows > .ccard-credit{border:1px solid #D3CAB5;box-shadow:0 1px 2px rgba(16,40,63,.08),0 12px 28px -14px rgba(16,40,63,.30);overflow:hidden}
:is(#creditcard-results,.compare.rows) > article.ccard-credit > div.crow-identity{margin:-16px -20px 0;padding:16px 20px 16px;border-top:5px solid var(--brand,#10283F);background:color-mix(in srgb,var(--brand,#10283F) 7%,#fff);border-bottom:1px solid color-mix(in srgb,var(--brand,#10283F) 20%,#E3DCCB)}
.compare.rows > .ccard-credit:hover{border-color:#B9AE96}
.compare.rows > .ccard-credit.is-selected{box-shadow:0 0 0 2px var(--accent-soft),0 12px 28px -14px rgba(16,40,63,.30)}
@media (max-width:760px){
  .compare.rows{gap:20px}
}

/* Mobiel: lijstkaart als ÉÉN geheel (eigenaar 2026-11-01). Geen harde lijnen tussen kop,
   inhoud en voet; één taal voor regels (icoon + tekst), één neutraal feitenvlak, één knop.
   De getinte kop loopt over in wit. Volgorde: kop → prijs → voordelen → feiten → let op →
   aanvragen → vergelijk/bron → alle kenmerken. */
@media (max-width:760px){
  :is(#creditcard-results,.compare.rows) > article.ccard-credit{padding:0 16px 6px;gap:0}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit > div.crow-identity{order:0;margin:0 -16px;padding:16px 16px 18px;border-bottom:0;border-top:5px solid var(--brand,#10283F);
    display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:14px;align-items:center;
    background:linear-gradient(to bottom,color-mix(in srgb,var(--brand,#10283F) 9%,#fff) 0%,color-mix(in srgb,var(--brand,#10283F) 5%,#fff) 60%,#fff 100%)}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit > .crow-identity > .crow-visual{grid-column:1;grid-row:1 / span 2;align-self:center}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit > .crow-identity .crow-usecase{grid-column:2;grid-row:1;align-self:end;justify-self:start;margin:0 0 4px;padding:3px 9px;font-size:12.5px;min-height:0}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit > .crow-identity .crow-name{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:19px;line-height:1.2}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit > .crow-identity .crow-issuer:not(.sr-only){grid-column:2;grid-row:3;margin:2px 0 0;font-size:12.5px}

  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-priceblock{order:1;margin:2px 0 0;padding:0;background:none;border:0;display:block}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-price-label{display:inline;margin:0 8px 0 0;font-size:13px;color:var(--ink-soft)}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-price{display:inline;margin:0}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-amount{font-size:28px;line-height:1.1}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-fee-note{margin:4px 0 0;padding:0;border:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}

  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-value{order:2;margin:12px 0 0}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-why,:is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-benefits li{padding:4px 0;font-size:15px}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit p.hl-note.sterk.sterk{order:3;align-self:stretch;margin:2px 0 0;padding:4px 0 4px 34px;background:none;border:0;border-radius:0;font-size:15px;line-height:1.45;position:relative}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit p.hl-note.sterk.sterk::before{content:"✓";position:absolute;left:4px;top:4px;width:20px;text-align:center;font-weight:800;color:var(--accent-dark,#1d4e89)}

  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-keyfacts{order:4;margin:12px 0 0;padding:10px 12px;border:0;border-radius:12px;background:var(--paper-tint,#F4F1EA);
    display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:14px}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-keyfacts > div{display:flex;flex-direction:column;gap:2px;border:0;padding:0}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-keyfacts dt{border:0;padding:0;margin:0;font-size:11.5px;letter-spacing:.06em}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-keyfacts dd{border:0;padding:0;margin:0;text-align:left;font-size:16px;font-weight:700}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-keyfacts dd .field-qual{display:block;font-size:11.5px;font-weight:500;margin-top:1px}

  :is(#creditcard-results,.compare.rows) > article.ccard-credit dl.crow-facts{order:4;margin:12px 0 0;padding:10px 12px;border:0;border-radius:12px;background:var(--paper-tint,#F4F1EA);display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit dl.crow-facts > div{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;border:0}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit dl.crow-facts dt{margin:0;padding:0;border:0;font-size:12.5px}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit dl.crow-facts dd{margin:0;padding:0;border:0;text-align:left;font-size:15px;font-weight:700}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .hl-note:not(.sterk){order:5;margin:12px 0 0;padding:0 0 0 12px;background:none;border:0;border-left:3px solid var(--gold,#C9A24A);border-radius:0;font-size:14.5px;line-height:1.45}

  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-actions{order:6;margin:16px 0 0;display:grid;grid-template-columns:1fr;gap:6px}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-actions .cta-apply{order:1;width:100%;min-height:50px}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-actions .cta-caption{order:2;margin:0;text-align:center;font-size:12.5px}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-actions .crow-details-link{order:3;min-height:40px;border:0;box-shadow:none;background:none;justify-content:center;text-decoration:underline;text-underline-offset:3px}

  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-foot{order:7;margin:8px 0 0;padding:0;border:0;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-foot .crow-source{margin:0;font-family:var(--ui);font-size:12px;line-height:1.35;text-align:right;color:var(--ink-faint);letter-spacing:0}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-more{order:8;margin:0;padding:0;border:0}
  :is(#creditcard-results,.compare.rows) > article.ccard-credit .crow-more > summary{min-height:44px;padding:0;border:0}
}

/* Hypotheken: elke regel heeft "Details" (eigenaar 2026-11-01). Zonder eigen NUXO-pagina klapt
   een detailvak open in de regel zelf; open → de actiecel neemt de volle rijbreedte. */
.mort-dir-actions .mort-dir-more{display:contents}
.mort-dir-actions .mort-dir-more > summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;list-style:none;font:500 12.5px/1.25 var(--ui);color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.mort-dir-actions .mort-dir-more > summary::-webkit-details-marker{display:none}
.mort-dir-actions .mort-dir-more > summary::after{content:"▾";margin-left:4px;display:inline-block;text-decoration:none}
.mort-dir-actions .mort-dir-more[open] > summary::after{content:"▴"}
.mort-dir-actions:has(.mort-dir-more[open]) > a[data-cta="issuer_source"]{display:none}
.mort-dir-actions .mort-dir-more > summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mort-dir-row:has(.mort-dir-more[open]) > .mort-dir-actions{grid-column:1/-1;justify-content:flex-start;white-space:normal}
.mort-dir-more-body{flex:1 1 100%;order:9;margin:2px 0 6px;padding:12px 14px;background:var(--paper-tint,#F4F1EA);border-radius:10px;font:13.5px/1.45 var(--ui);color:var(--ink);white-space:normal}
.mort-dir-more-body dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 18px;margin:0}
@media(max-width:760px){.mort-dir-more-body{padding:10px 12px;font-size:13px}.mort-dir-more-body dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.mort-dir-more-body dl > div:nth-child(6),.mort-dir-more-body dl > div:nth-child(7){grid-column:1/-1}}
.mort-dir-more-body dl > div{min-width:0}
.mort-dir-more-body dt{font-size:11.5px;color:var(--ink-soft);letter-spacing:.02em}
.mort-dir-more-body dd{margin:1px 0 0;font-weight:600;overflow-wrap:anywhere}
.mort-dir-more-note{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft)}
.mort-dir-more-links{display:flex;flex-wrap:wrap;gap:0 18px;margin:4px 0 0}
.mort-dir-more-links a{min-height:44px}

/* ===== Leningen + hypotheken: herziene kaarten (eigenaar 2026-11-01) =====
   Zelfde taal als de creditcardlijst: merkkleur (uit het eigen logobestand, anders navy) als
   accent, sterkere rand en schaduw, kerncijfers in één zacht vlak, één duidelijke knop.
   Uitgevers zonder goedgekeurd logo: NUXO-monogramtegel + naam (geen nagemaakt logo). */
:is(.loan-card,.mort-card) > .crow-visual-text,.mort-brand-slot.crow-visual-text{background:#fff;border:1px solid var(--line);border-left:1px solid var(--line);justify-content:flex-start;padding:0 10px}
:is(.loan-card,.mort-card) > .crow-visual-text .brand-word,.mort-brand-slot.crow-visual-text .brand-word{display:flex;align-items:center;gap:9px;text-align:left;color:var(--ink);font:700 13px/1.15 var(--ui);letter-spacing:.01em;overflow-wrap:normal}
:is(.loan-card,.mort-card) > .crow-visual-text .brand-word[data-mono]::before,.mort-brand-slot.crow-visual-text .brand-word[data-mono]::before{content:attr(data-mono);flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 5px;box-sizing:border-box;border-radius:7px;background:#10283F;color:#fff;font:800 12px/1 var(--ui);letter-spacing:.04em}

/* Lening- en hypotheekkaarten */
#loan-results > article.loan-card,#mort-results > article.mort-card{border:1px solid #D3CAB5;border-top:5px solid var(--brand,#10283F);border-radius:16px;box-shadow:0 1px 2px rgba(16,40,63,.08),0 12px 28px -14px rgba(16,40,63,.30);background:linear-gradient(to bottom,color-mix(in srgb,var(--brand,#10283F) 5%,#fff) 0,#fff 120px)}
#loan-results{gap:24px}
#loan-results > article.loan-card .crow-name{margin-bottom:2px}
#loan-results > article.loan-card .crow-price{margin:10px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#loan-results > article.loan-card .crow-price::before{content:"Rente";flex-basis:100%;font:600 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
#loan-results > article.loan-card .crow-amount{font-size:34px;line-height:1}
#loan-results > article.loan-card dl.loan-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 16px;margin:12px 0 0;padding:10px 14px;background:var(--paper-tint,#F4F1EA);border-radius:12px}
#loan-results > article.loan-card dl.loan-stats > div{min-width:0}
#loan-results > article.loan-card dl.loan-stats dt{font:600 11.5px/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
#loan-results > article.loan-card dl.loan-stats dd{margin:2px 0 0;font:700 16px/1.3 var(--ui);color:var(--ink)}
#loan-results > article.loan-card .hl-note{margin:12px 0 0;padding:0 0 0 12px;background:none;border:0;border-left:3px solid var(--gold,#C9A24A);border-radius:0;font-size:15px}
#loan-results > article.loan-card .loan-risk{margin:10px 0 0;padding:0;background:none;border:0;font-size:13.5px;color:var(--ink)}
#loan-results > article.loan-card .crow-side{display:flex;flex-direction:column;flex-wrap:nowrap;gap:6px;justify-content:center}
#loan-results > article.loan-card .crow-side > *{flex:0 0 auto}
#loan-results > article.loan-card > .crow-visual-text .brand-word,#mort-results > article.mort-card > .crow-visual-text .brand-word{font-size:15px}
#loan-results > article.loan-card .crow-side .btn{order:1}
#loan-results > article.loan-card .crow-side .crow-actions{order:2;justify-content:center}
#loan-results > article.loan-card .crow-side .crow-source{order:3;font-family:var(--ui);font-size:12px;letter-spacing:0;color:var(--ink-faint);text-align:center}
#loan-results > article.loan-card .crow-details-link{min-height:44px;border:0;background:none;text-decoration:underline;text-underline-offset:3px}
#loan-results > article.loan-card .crow-more,#mort-results > article.mort-card .crow-more{border-top:0}

/* Hypotheek-top-10 en overzicht */
.mort-directory > .mort-dir-row{box-shadow:inset 4px 0 0 var(--brand,#10283F)}
.mort-brand-slot.crow-visual-text .brand-word[data-short]{font-size:0;letter-spacing:0;text-transform:none}
.mort-brand-slot.crow-visual-text .brand-word[data-short]::after{content:attr(data-short);font:700 13px/1.15 var(--ui);color:var(--ink);min-width:0;overflow-wrap:normal}

@media (max-width:760px){
  #loan-results{gap:18px}
  #loan-results > article.loan-card{padding:14px 16px 6px;display:flex;flex-direction:column;gap:0}
  #loan-results > article.loan-card > .crow-visual{align-self:flex-start;margin:0 0 10px}
  #loan-results > article.loan-card > .crow-visual-text{width:auto;min-width:0;max-width:100%;flex:0 0 auto;padding:0 12px 0 8px}
  #loan-results > article.loan-card > .crow-visual-text .brand-word{overflow-wrap:normal;word-break:keep-all}
  #loan-results > article.loan-card dl.loan-stats dd{font-size:15px;white-space:nowrap}
  #loan-results > article.loan-card .crow-amount{font-size:30px}
  #loan-results > article.loan-card dl.loan-stats{grid-template-columns:auto auto;justify-content:space-between;padding:10px 12px}
  #loan-results > article.loan-card .crow-side{margin-top:14px;padding:0;border:0;background:none}
  #loan-results > article.loan-card .crow-side .btn{width:100%;min-height:50px}
  #loan-results > article.loan-card .crow-side .crow-actions{display:flex;justify-content:center;margin:0}
  #loan-results > article.loan-card .crow-side .crow-actions .crow-details-link{border:0;background:none;width:auto;box-shadow:none}
}

/* ================================================================
   Zwevende "Vraag NUXO"-assistent (eigenaar 2026-11-01, optie C)
   Knop rechtsonder in NUXO-navy met ballon + gouden X; desktop met
   label dat na scrollen inklapt, mobiel altijd alleen de ballon.
   Paneel 400px (desktop) of onderblad tot 85% (mobiel). Dezelfde
   vraagmotor als de homepage-zoekbalk; regels gescoped op .nx-ask.
   ================================================================ */
.nx-ask-fab{--nx-lift:0px}
.nx-ask-fab-btn{position:fixed;right:22px;bottom:calc(22px + var(--nx-lift));z-index:80;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 14px;border:0;border-radius:999px;background:linear-gradient(135deg,#163558 0%,var(--accent) 55%,var(--accent-dark) 100%);color:#fff;font-family:var(--ui);font-size:15px;font-weight:700;letter-spacing:.01em;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(201,162,39,.55),0 12px 28px -8px rgba(6,26,51,.55),0 2px 6px rgba(6,26,51,.25);transition:padding .22s ease,gap .22s ease,transform .18s ease,opacity .2s ease,bottom .2s ease}
.nx-ask-fab-btn:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--gold),0 16px 32px -8px rgba(6,26,51,.6),0 2px 6px rgba(6,26,51,.25)}
.nx-ask-fab-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.nx-ask-fab-btn .nx-ask-icon{flex:none;width:28px;height:28px}
.nx-ask-fab-label{display:inline-block;max-width:120px;overflow:hidden;white-space:nowrap;transition:max-width .22s ease,opacity .18s ease}
.nx-ask-fab.is-compact .nx-ask-fab-btn,.nx-ask-fab.is-open .nx-ask-fab-btn{gap:0;padding:0 14px}
.nx-ask-fab.is-compact .nx-ask-fab-label,.nx-ask-fab.is-open .nx-ask-fab-label{max-width:0;opacity:0}
.nx-ask-dialog{position:fixed;right:22px;bottom:calc(90px + var(--nx-lift));z-index:81;width:400px;max-width:calc(100vw - 32px);max-height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -16px rgba(6,26,51,.45),0 4px 14px rgba(6,26,51,.14);overflow:hidden}
.nx-ask-dialog[hidden]{display:none!important}
.nx-ask-dialog:focus{outline:none}
.nx-ask-head{position:relative;flex:none;display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;background:linear-gradient(135deg,#163558 0%,var(--accent) 60%,var(--accent-dark) 100%);border-bottom:3px solid var(--gold);color:#fff}
.nx-ask-head-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.nx-ask-head-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.nx-ask-head-text b{font-size:17px;font-weight:800;letter-spacing:.01em}
.nx-ask-head-text span{font-size:12.5px;color:rgba(255,255,255,.78)}
.nx-ask-x{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.nx-ask-x:hover{background:rgba(255,255,255,.12)}
.nx-ask-x:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.nx-ask-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px}
.nx-ask .lb-ask-form{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.nx-ask .lb-ask-label{margin-bottom:8px;color:var(--ink-soft)}
.nx-ask .lb-ask-input{background:#fff}
.nx-ask-go{flex:none;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:12px;background:var(--gold);color:var(--accent-dark);font-size:26px;font-weight:800;line-height:1;cursor:pointer}
.nx-ask-go:hover{background:#d8b33c}
.nx-ask-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nx-ask .lb-ask-chips{margin-top:14px;gap:8px}
.nx-ask-chips-h{flex:0 0 100%;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.nx-ask .lb-ask-chip{background:#fff;border-color:var(--line);color:var(--accent);box-shadow:0 1px 0 rgba(6,26,51,.04)}
.nx-ask .lb-ask-chip::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--gold);vertical-align:1px}
.nx-ask .lb-ask-chip:hover{border-color:var(--gold);background:var(--gold-soft)}
.nx-ask .lb-ask-privacy{margin-top:14px}
.nx-ask .lb-ask-panel{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:none;padding:12px 14px}
.nx-ask .lb-ask-panel .lb-ask-privacy{margin-top:10px}
body:has(.nav.is-open) .nx-ask-fab{display:none}
@media (max-width:760px){
  .nx-ask-fab-btn{right:16px;bottom:calc(16px + var(--nx-lift));gap:0;padding:0 14px}
  .nx-ask-fab-label{max-width:0;opacity:0}
  .nx-ask-fab.is-open::before{content:"";position:fixed;inset:0;z-index:79;background:rgba(6,26,51,.45)}
  .nx-ask-fab.is-open .nx-ask-fab-btn{opacity:0;visibility:hidden;pointer-events:none}
  .nx-ask-dialog{left:0;right:0;bottom:0;width:auto;max-width:none;max-height:85vh;max-height:85dvh;border-radius:20px 20px 0 0;border-bottom:0}
  .nx-ask-head{padding-top:20px}
  .nx-ask-head::before{content:"";position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgba(255,255,255,.35)}
  .nx-ask-body{padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .nx-ask-fab-btn,.nx-ask-fab-label{transition:none}
  .nx-ask-fab-btn:hover{transform:none}
}
@media print{.nx-ask-fab{display:none}}

/* ================================================================
   Aanvullende catalogus "Meer producten in onze catalogus"
   (eigenaar 2026-11-01). Per soort een inklapbare sectie met
   labels; eerste label = soort (navy), overige labels als omlijnde
   pil. Geen rangschikking, geen knoppen in merkkleuren.
   ================================================================ */
.xp{margin:40px 0 8px}
.xp > h2{margin:0 0 6px}
.xp-lede{margin:0 0 14px;max-width:760px;color:var(--ink-soft)}
.xp-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.xp-nav a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--accent);font-size:14px;font-weight:600;text-decoration:none}
.xp-nav a span{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:12px;font-weight:700}
.xp-nav a:hover{border-color:var(--gold);background:var(--gold-soft)}
.xp-sec{margin:0 0 12px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;box-shadow:0 1px 0 rgba(6,26,51,.04)}
.xp-sec > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 18px;cursor:pointer;list-style:none}
.xp-sec > summary::-webkit-details-marker{display:none}
.xp-sec > summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);margin-top:-4px;transition:transform .15s ease}
.xp-sec[open] > summary::after{transform:rotate(-135deg);margin-top:4px}
.xp-sec-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.xp-sec-title h3{margin:0;font-size:18px;line-height:1.3}
.xp-sec-count{font-size:13px;font-weight:600;color:var(--ink-faint)}
.xp-intro{margin:0 18px 14px;max-width:760px;font-size:14.5px;color:var(--ink-soft)}
.xp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:0 18px 18px}
.xp-card{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:12px;min-width:0}
.xp-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:0;list-style:none}
.xp-tags li{padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-soft);font-size:12px;font-weight:600;line-height:1.4}
.xp-tags li:first-child{background:var(--accent);border-color:var(--accent);color:#fff}
.xp-name{margin:0;font-size:16.5px;line-height:1.3}
.xp-provider{margin:0;font-size:13px;color:var(--ink-faint)}
.xp-summary{margin:2px 0 4px;font-size:14px;line-height:1.5}
.xp-facts{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.xp-facts > div{display:grid;grid-template-columns:minmax(96px,40%) 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.xp-facts dt{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.xp-facts dd{margin:0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.xp-caveat{margin:4px 0 0;padding-left:10px;border-left:3px solid var(--gold);font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.xp-source{margin:auto 0 0;padding-top:8px;font-size:11.5px;color:var(--ink-faint);overflow-wrap:anywhere}
.xp-source a{color:inherit}
.xp-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;color:var(--accent);text-decoration:none}
.xp-go:hover{text-decoration:underline;text-underline-offset:3px}
.xp-risk{margin:14px 0 0;font-size:13.5px;color:var(--ink)}
@media (max-width:760px){
  .xp{margin-top:28px}
  .xp-nav{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .xp-nav a{flex:none}
  .xp-sec > summary{padding:12px 14px}
  .xp-intro{margin:0 14px 12px}
  .xp-grid{grid-template-columns:1fr;padding:0 12px 14px}
}

/* keuzehulp */
/* /kiezen: twee keuzehulpen (creditcard, spaarrekening); de overige drie categorieën zijn redactionele gidsen. */
.choice-guide-nav{margin:22px 0 26px}
.choice-guide-nav h2,.creditcard-choice>h2,.spaar-keuzehulp>h2{font-family:var(--display);font-size:clamp(25px,3vw,32px);line-height:1.2;margin:0 0 12px}
.choice-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.choice-guide-link{min-width:0;min-height:138px;box-sizing:border-box;display:flex;flex-direction:column;gap:7px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-m)}
.choice-guide-link:hover{border-color:var(--accent);background:var(--paper-tint)}
.choice-guide-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.choice-guide-name{font:700 17px/1.25 var(--ui)}
.choice-guide-note{font:13.5px/1.45 var(--ui);color:var(--ink-soft);flex:1}
.choice-guide-action{font:700 13px/1.4 var(--ui);color:var(--accent-dark)}
.creditcard-choice{scroll-margin-top:24px;margin:18px 0 24px}
.spaar-keuzehulp{scroll-margin-top:24px;margin:18px 0 24px}
.choice-guide-subtitle{font:15px/1.5 var(--ui);color:var(--ink-soft);margin:0 0 8px}
@media(max-width:900px){.choice-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.choice-guide-grid{gap:9px}.choice-guide-link{min-height:148px;padding:12px}.choice-guide-name{font-size:15px}.choice-guide-note{font-size:12.5px}.choice-guide-action{font-size:12.5px}.choice-guide-nav{margin:12px 0 18px}}
@media(max-width:360px){.choice-guide-grid{grid-template-columns:1fr}.choice-guide-link{min-height:90px}}

.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:18px 0 0}
.wiz{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 20px;margin:8px 0 24px;box-shadow:0 2px 10px rgba(21,32,48,.05)}
.wiz h2{font-family:var(--display);font-size:clamp(28px,4vw,40px);margin:6px 0 10px;letter-spacing:.02em}
.wiz-progress{font-family:var(--ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0}
.wiz-opts{display:grid;gap:10px;margin:18px 0 8px;list-style:none;padding:0}
.wiz-opts>li{min-width:0;margin:0;padding:0}
.wiz-opt{width:100%;box-sizing:border-box;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-family:var(--ui);font-size:17.5px;color:var(--ink);cursor:pointer;min-height:48px;display:flex;align-items:center}
@media(min-width:761px){.wiz-opts{grid-template-columns:1fr 1fr}}
.wiz-opt:hover{border-color:var(--accent);background:#f2f5f9}.wiz-opt:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-color:var(--accent);background:#f2f5f9}
.wiz-back,.wiz-reset{background:transparent;border:1px solid var(--line);border-radius:8px;padding:8px 14px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--ui);font-size:13px;cursor:pointer;color:var(--ink-soft)}
.wiz-back:hover,.wiz-reset:hover{border-color:var(--ink-soft);color:var(--ink)}
.wiz-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.wiz-chip{background:#eef2f7;border:1px solid #cbd6e2;border-radius:999px;padding:6px 12px;min-height:44px;display:inline-flex;align-items:center;font-family:var(--ui);font-size:12.5px;color:var(--accent-dark);cursor:pointer}
.wiz-chip:hover{border-color:var(--accent)}
.wiz-results{display:grid;gap:14px}
.wiz-card{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:#fff}
.wiz-card h3{font-family:var(--display);font-size:26px;margin:0 0 4px}
.wiz-card h3 a{color:var(--ink);text-decoration:none}
.wiz-card h3 a:hover{color:var(--accent)}
.wiz-why-label{font-family:var(--ui);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:12px 0 6px}
.wiz-card ul{margin:0 0 12px;padding-left:20px}
.wiz-card .link-arrow{min-height:44px;display:inline-flex;align-items:center}
.wiz-notice{border-left:4px solid var(--gold);background:var(--gold-soft);border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 18px}
.wiz-notice p{margin:0;font-size:16.5px;line-height:1.5}
.wiz-notice .wiz-notice-label{font-family:var(--ui);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7a5a12;font-weight:700;margin:0 0 6px}
@media (max-width:760px){
  .wiz{padding:18px 16px}
  .wiz-opt{min-height:48px}
  /* /kiezen/ mobiel: comprimeer hero zodat eerste antwoorden boven de cookiebanner vallen */
  .kiezen-hero{padding-top:12px !important;padding-bottom:8px}
  .kiezen-hero .kicker{font-size:11px;margin-bottom:2px}
  .kiezen-hero h1{font-size:26px !important;line-height:1.1;margin:4px 0 6px}
  .kiezen-hero .lede{font-size:15px;margin:0 0 6px}
  .kiezen-hero .verified{font-size:11.5px;line-height:1.4;display:block;margin-top:4px}
  .wiz{margin-top:4px}
  .wiz h2{font-size:24px;margin:4px 0 6px}
  .wiz-opts{margin:12px 0 6px}
}

/* Shortlist op mobiel: Aanvragen over de volle breedte, antwoordchips op één scrollbare rij, kortere melding (audit 2026-10-09). */
@media(max-width:760px){
  .wiz-card .cardfoot-links{display:flex;flex-direction:column-reverse;gap:4px;align-items:stretch}
  .wiz-card .cardfoot-links .btn{width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;font-size:17px}
  .wiz-card .cardfoot-links .link-arrow{justify-content:center}
  .wiz-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .wiz-chips>*{flex:none;scroll-snap-align:start}
  .wiz-notice{font-size:14px;padding:10px 12px;margin:8px 0}
}
/* Lead 2026-10-28 (#198-nit c): op 320 px wrapte "Bekijk bij aanbieder ›" naar twee regels — compactere kaartpadding en knopinhoud op smalle schermen. */
@media(max-width:360px){
  .wiz-card{padding:16px 14px}
  .wiz-card h3{font-size:23px}
  .wiz-card .cardfoot-links .btn{font-size:16px;padding-left:10px;padding-right:10px;white-space:nowrap}
}

/* NUXO adviseurs — taakgerichte first-screen finder, eigen NUXO-stijl.
   Geen nepsterren, badges of betaalde posities. CSS scoped tot adviseursecties. */
.advisor-landing{background:var(--paper-tint);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px 16px;margin:10px 0 18px;min-width:0}
.advisor-landing-copy{max-width:940px;margin-bottom:14px}
.advisor-landing .kicker{font-size:11px;letter-spacing:.08em;margin-bottom:6px}
.advisor-landing h1{font-family:var(--display);font-size:clamp(32px,4vw,46px);line-height:1.08;margin:2px 0 7px}
.advisor-lede{font:15.5px/1.45 var(--ui);margin:0;color:var(--ink-soft);max-width:870px}
.advisor-finder{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);min-width:0}
.advisor-finder-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.advisor-finder-title h2{font-family:var(--display);font-size:23px;line-height:1.1;margin:0}
.advisor-finder-title>span{font:600 12px var(--ui);color:var(--accent-dark)}
.advisor-search-form{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin:12px 0 0}
.advisor-search-form label{display:flex;flex-direction:column;gap:6px;min-width:0;font:700 13px/1.3 var(--ui);color:var(--ink)}
.advisor-search-form label small{font-size:12px;color:var(--ink-soft);font-weight:400;display:inline}
.advisor-search-form input,.advisor-search-form select{width:100%;min-width:0;box-sizing:border-box;min-height:48px;border:1px solid var(--line);border-radius:var(--radius-s);background:#fff;color:var(--ink);padding:10px 12px;font:16px var(--ui)}
.advisor-search-form input::placeholder{color:var(--ink-soft)}
.advisor-action-row{display:flex;align-items:center;flex-direction:column;gap:3px;min-width:150px}
.advisor-search-submit{display:inline-flex;justify-content:center;align-items:center;width:100%;min-height:48px;padding:10px 16px;white-space:nowrap}
.advisor-maps-shortcut{font:700 12px/1.4 var(--ui);color:var(--accent-dark);min-height:28px;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:underline;text-underline-offset:2px}
.advisor-maps-shortcut[hidden]{visibility:hidden;display:inline-flex}
.advisor-finder-note{font:12px/1.4 var(--ui);color:var(--ink-soft);margin:5px 0 0;max-width:960px}
.advisor-search-form :focus-visible,.advisor-action-row a:focus-visible,.advisor-featured-cities a:focus-visible,.advisor-city-links a:focus-visible,.advisor-help-detail summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.advisor-trust-strip{display:flex;flex-wrap:wrap;align-items:center;gap:7px 20px;border-top:1px solid var(--line);margin:13px 0 0;padding:10px 2px 0;font:600 12px/1.4 var(--ui);color:var(--ink-soft)}
.advisor-trust-strip>span::before{content:"✓";margin-right:6px;color:var(--accent-dark)}
.advisor-trust-strip a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.advisor-search-result{margin-top:14px;border-top:1px solid var(--line);padding:14px 0 2px;outline-offset:3px}
.advisor-search-result[hidden],.advisor-search-result iframe[hidden],.advisor-search-result a[hidden],.advisor-search-result p[hidden]{display:none}
.advisor-results-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.advisor-results-heading h3{font:700 19px/1.25 var(--ui);margin:0}
.advisor-results-heading p{font:13px/1.45 var(--ui);color:var(--ink-soft);margin:2px 0 8px;flex-basis:100%}
.advisor-inline-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;list-style:none;padding:0;margin:10px 0}
.advisor-verified-entry{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:13px;display:flex;flex-direction:column;gap:5px;min-width:0}
.advisor-verified-entry>b{font:700 15px/1.35 var(--ui);overflow-wrap:anywhere}
.advisor-verified-entry span{font:12.5px/1.45 var(--ui);color:var(--ink-soft);overflow-wrap:anywhere}
.advisor-verified-entry a{font:700 13px/1.5 var(--ui);color:var(--accent-dark);min-height:36px;display:inline-flex;align-items:center}
.advisor-search-result>p{font:13px/1.5 var(--ui);color:var(--ink-soft)}
.advisor-result-actions{display:flex;gap:12px 18px;flex-wrap:wrap;align-items:center;font:700 13px/1.5 var(--ui);margin:12px 0}
.advisor-result-actions a{color:var(--accent-dark);min-height:40px;display:inline-flex;align-items:center}
.advisor-search-result iframe{display:block;border:0;width:100%;height:350px;margin-top:14px;border-radius:var(--radius-s)}
.advisor-local-guide{margin:14px 0 20px;padding:0 2px}
.advisor-local-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.advisor-local-heading h2{font-family:var(--display);font-size:clamp(23px,3vw,29px);line-height:1.15;margin:0 0 3px}
.advisor-local-heading p{font:13.5px/1.5 var(--ui);color:var(--ink-soft);margin:0}
.advisor-local-heading a{font:700 13px/1.4 var(--ui);color:var(--accent-dark);min-height:44px;display:inline-flex;align-items:center}
.advisor-featured-cities{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.advisor-featured-cities a,.advisor-city-links a{border:1px solid var(--line);border-radius:var(--radius-pill);min-height:40px;padding:9px 12px;box-sizing:border-box;text-decoration:none;background:var(--card);color:var(--accent-dark);font:600 13px/1.45 var(--ui)}
.advisor-featured-cities a:hover,.advisor-city-links a:hover{background:var(--paper-tint);border-color:var(--accent)}
.advisor-featured-cities a span{font-size:11px;color:var(--ink-soft);margin-left:5px}
.advisor-learn,.advisor-more{margin:16px 0 16px;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--card)}
.advisor-help-detail{padding:0 16px}
.advisor-help-detail+ .advisor-help-detail{border-top:1px solid var(--line)}
.advisor-help-detail summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font:700 15px/1.4 var(--ui);color:var(--ink);list-style-position:inside}
.advisor-help-detail summary span{font:12px var(--ui);color:var(--ink-soft)}
.advisor-help-detail ol{margin:4px 0 14px;padding-left:22px}
.advisor-help-detail li{margin-bottom:8px;font:14px/1.55 var(--ui)}
.advisor-help-detail p{font:14px/1.6 var(--ui);margin:5px 0 12px}
.advisor-topic-summaries p{border-top:1px solid var(--line);padding-top:8px}
.advisor-guide-head{padding:16px 16px 0}
.advisor-guide-head h2{margin:0 0 6px;font:700 18px/1.35 var(--ui);color:var(--ink)}
.advisor-guide-head p{font:14px/1.6 var(--ui);color:var(--ink-soft);margin:0 0 2px}
.advisor-step{padding:14px 16px 12px;border-top:1px solid var(--line)}
.advisor-step h3{margin:0 0 6px;font:700 16px/1.4 var(--ui);color:var(--ink)}
.advisor-step p{font:14px/1.6 var(--ui);margin:5px 0 10px}
.advisor-step ol{margin:4px 0 12px;padding-left:22px}
.advisor-step li{margin-bottom:8px;font:14px/1.55 var(--ui)}
.advisor-step+.advisor-help-detail{border-top:1px solid var(--line)}
.advisor-letop{display:block;margin-top:2px;color:var(--ink-soft);font-size:13px}
.advisor-city-hero{padding:12px 0 8px}
.advisor-city-hero h1{font-family:var(--display);font-size:clamp(28px,4vw,42px);line-height:1.13;margin:3px 0}
.advisor-city-hero p{font:15px/1.5 var(--ui);margin:8px 0}
.advisor-city-links{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.advisor-source-note{font:13px/1.4 var(--ui);color:var(--ink-soft)}
@media(max-width:1150px){
  .advisor-search-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .advisor-action-row{flex-direction:row;grid-column:2;justify-content:flex-start;min-width:0}
  .advisor-search-submit{width:auto;min-width:160px}
}
@media(max-width:760px){
  /* De openbare zoekactie krijgt voorrang boven de secundaire mast-caption. */
  body:has(.advisor-landing) .mast-top{display:none}
  body:has(.advisor-landing) .crumbs{margin-top:10px}
  .advisor-landing{padding:14px 12px 10px;margin:6px 0 12px}
  .advisor-landing-copy{margin-bottom:10px}
  .advisor-landing .kicker{font-size:10.5px}
  .advisor-landing h1{font-size:30px;line-height:1.08;margin:2px 0 6px}
  .advisor-lede{font-size:14px;line-height:1.38}
  .advisor-finder{padding:12px 11px}
  .advisor-finder-title h2{font-size:21px}
  .advisor-search-form{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:10px}
  .advisor-search-form label{gap:4px;font-size:12.5px}
  .advisor-search-form input,.advisor-search-form select{min-height:46px;padding:9px 11px}
  .advisor-action-row{grid-column:1;align-items:center;justify-content:space-between;gap:8px}
  .advisor-search-submit{width:auto;flex:1;min-width:0;min-height:46px}
  .advisor-maps-shortcut{font-size:11.5px}
  .advisor-finder-note{font-size:11.5px;margin:6px 0 0}
  .advisor-trust-strip{font-size:11px;gap:4px 10px;padding-top:8px;margin-top:10px}
  .advisor-local-heading h2{font-size:23px}
  .advisor-inline-list{grid-template-columns:minmax(0,1fr)}
  .advisor-search-result iframe{height:260px}
}
@media(max-width:370px){
  .advisor-landing{padding:12px 9px}
  .advisor-landing h1{font-size:27px}
  .advisor-action-row{flex-wrap:wrap}
  .advisor-search-submit{flex-basis:100%}
  .advisor-maps-shortcut{min-height:28px}
}
@media(prefers-reduced-motion:reduce){.advisor-landing *{scroll-behavior:auto}}

/* AFM register + radius 2026-10-08: keep 4 inputs and action compact. */
.advisor-finder .advisor-search-form{grid-template-columns:minmax(0,1.35fr) minmax(0,.78fr) minmax(0,1.23fr) minmax(0,1fr);gap:9px}
.advisor-finder .advisor-action-row{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;min-width:0}
.advisor-finder .advisor-search-submit{width:auto;min-width:200px}
.advisor-finder .advisor-pagination{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin:12px 0;font:600 13px/1.4 var(--ui)}
.advisor-finder .advisor-pagination[hidden]{display:none}
.advisor-finder .advisor-pagination button{padding:9px 14px;min-height:44px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card);color:var(--accent-dark);font:700 13px/1.3 var(--ui);cursor:pointer}
.advisor-finder .advisor-pagination button:disabled{opacity:.38;cursor:not-allowed}
.advisor-finder .advisor-pagination button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.advisor-finder .advisor-register-label{color:var(--ink-soft);font-size:12px}
.advisor-finder .advisor-verified-label{color:var(--accent-dark);font-weight:700;font-size:12px}
.advisor-finder .advisor-distance{font-weight:600;color:var(--ink)}
.advisor-finder .advisor-location-unknown{font-style:italic}
@media(max-width:930px){
  .advisor-finder .advisor-search-form{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr)}
  .advisor-finder .advisor-search-form>label:nth-of-type(3),
  .advisor-finder .advisor-search-form>label:nth-of-type(4){grid-column:auto}
}
@media(max-width:760px){
  .advisor-finder .advisor-search-form{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:8px}
  .advisor-finder .advisor-search-form>label:nth-of-type(3),
  .advisor-finder .advisor-search-form>label:nth-of-type(4){grid-column:1/-1}
  .advisor-finder .advisor-action-row{grid-column:1/-1}
  .advisor-finder .advisor-search-submit{min-width:0;flex:1}
  .advisor-finder .advisor-pagination{justify-content:space-between;gap:7px}
  .advisor-finder .advisor-pagination button{min-height:44px;padding:8px 10px}
}
@media(max-width:360px){
  .advisor-finder .advisor-search-form{grid-template-columns:minmax(0,1fr)}
  .advisor-finder .advisor-search-form>label{grid-column:1/-1}
}

/* Smalle telefoons: één kolom, zodat plaats- en afstandsvelden niet worden afgekapt. */
@media(max-width:560px){.advisor-finder .advisor-search-form{grid-template-columns:minmax(0,1fr)}}
@media(max-width:370px){.advisor-finder .advisor-action-row{flex-wrap:wrap}.advisor-finder .advisor-search-submit{flex:1 1 100%;min-width:100%;white-space:normal}}
.advisor-finder .advisor-search-form{grid-template-columns:minmax(0,1.2fr) minmax(190px,.9fr) minmax(0,1.23fr) minmax(0,1fr)}
@media(max-width:930px){.advisor-finder .advisor-search-form{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr)}}
@media(max-width:560px){.advisor-finder .advisor-search-form{grid-template-columns:minmax(0,1fr)}}
.advisor-inline-list{padding:0}


/* One compact, keyboard-accessible place dropdown; no city-pill wall. */
.advisor-place-picker{display:flex;flex-direction:column;gap:7px;max-width:540px;margin:12px 0 4px;min-width:0}
.advisor-place-picker label{font:700 14px/1.4 var(--ui);color:var(--ink)}
.advisor-place-picker select{width:100%;box-sizing:border-box;min-width:0;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card);color:var(--ink);font:16px var(--ui);cursor:pointer}
.advisor-place-picker select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.advisor-place-picker p{font:12px/1.45 var(--ui);color:var(--ink-soft);margin:0}
@media(max-width:760px){.advisor-place-picker{max-width:100%;margin:9px 0 4px}}