/* ==========================================================================
   Trade.nl — "Bright" homepage
   Pixel-faithful port of the Claude Design prototype.
   Fonts: Bricolage Grotesque (headings) + Hanken Grotesk (body).
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #FBF9F6;
  color: #17181C;
  font-family: 'Hanken Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;  /* lange (NL samengestelde) woorden nooit over de viewport */
}
h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; }
::selection { background: #FF5A3C; color: #fff; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes growbar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* --accent / --accent-ink are set inline from SiteSettings; the soft variant
   (used for glow shadows) is derived so editors only manage one accent token. */
.page { background: #FBF9F6; overflow: hidden; --accent-soft: color-mix(in srgb, var(--accent) 45%, transparent); }
img { max-width: 100%; }

/* Visible keyboard focus (a11y) — only for keyboard users, not mouse clicks. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Honeypot field — visually and from-assistive-tech hidden, still in the DOM. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Skip-to-content link — appears only on keyboard focus (WCAG 2.4.1). */
.skiplink { position: absolute; left: -9999px; top: 0; z-index: 200; background: #17181C; color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none; }
.skiplink:focus { left: 0; }

/* --- Buttons / pills ------------------------------------------------------ */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 22px;
  border-radius: 100px;
  line-height: 1.2;
}
.btn--dark    { background: #17181C; color: #fff; }
.btn--accent  { background: var(--accent); color: var(--accent-ink); }
.btn--outline { background: #fff; color: #17181C; border: 1px solid #E6E2DC; }
.btn--lg      { font-size: 16px; padding: 16px 30px; }
.btn--sm      { font-size: 14px; padding: 11px 20px; white-space: nowrap; }
.btn--block   { width: 100%; font-size: 15px; padding: 15px; text-align: center; }
.btn--shadow  { box-shadow: 0 8px 24px -8px var(--accent-soft); }

.pill { display: inline-block; font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: 100px; cursor: pointer; text-decoration: none; }
.pill--accent { background: var(--accent); color: var(--accent-ink); }
.pill--ghost  { background: rgba(255,255,255,.1); color: #fff; }

/* --- Shared atoms --------------------------------------------------------- */
.logo {
  width: 46px; height: 46px; border-radius: 14px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 16px;
}
.logo--md { width: 50px; height: 50px; border-radius: 15px; flex: none; }
/* Real feed logos: white tile with the image contained inside. */
.logo--img { background: #fff; border: 1px solid #ECE8E1; padding: 6px; overflow: hidden; }
.logo--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

.scorepill { background: var(--accent); color: var(--accent-ink); border-radius: 16px; padding: 9px 13px; text-align: center; }
.scorepill__num { font-size: 23px; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; line-height: 1; }
.scorepill__cap { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; opacity: .85; }

.scorebox {
  background: var(--accent); color: var(--accent-ink); border-radius: 14px;
  padding: 8px 0; text-align: center; width: 64px;
  font-size: 20px; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; line-height: 1;
}

.eyebrow { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.eyebrow--accent { color: var(--accent); }
.eyebrow--sm { font-size: 13px; margin-bottom: 14px; }
.eyebrow--dot { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.eyebrow--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }

.badge { display: inline-flex; align-items: center; gap: 9px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.05); padding: 8px 15px; border-radius: 100px; font-size: 13.5px; font-weight: 600; margin-bottom: 30px; }
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: #1E9E62; }

/* --- Section scaffolding -------------------------------------------------- */
.section { max-width: 1200px; margin: 0 auto; padding: 40px 32px 100px; }
.section--tight { padding-top: 0; }

.sectionhead--center { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.sectionhead__title { font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.sectionhead__title--xl { font-size: 52px; margin-bottom: 18px; }
.sectionhead__title--lg { font-size: 46px; line-height: 1.04; margin-bottom: 16px; }
.sectionhead__lead { font-size: 18px; line-height: 1.5; color: #55565C; }
.sectionhead--split { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.sectionhead--baseline { margin-bottom: 36px; }

.panel { background: #fff; border-radius: 32px; padding: 48px; box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 40px 80px -50px rgba(0,0,0,.25); }
.panel__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.panel__title { font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.panel__more { font-size: 15px; font-weight: 600; cursor: pointer; color: #17181C; text-decoration: none; }

/* ==========================================================================
   Masthead
   ========================================================================== */
.topbar { background: #F1EEE7; border-bottom: 1px solid #E6E1D7; }
.topbar__text { max-width: 1200px; margin: 0 auto; padding: 8px 32px; text-align: center; font-size: 12.5px; line-height: 1.45; color: #6B6C72; }
.masthead { position: sticky; top: 0; z-index: 50; background: rgba(251,249,246,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.masthead__inner { max-width: 1200px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.03em; cursor: pointer; color: #17181C; text-decoration: none; }
.mainnav { display: flex; gap: 30px; font-size: 15px; font-weight: 500; }
.mainnav__link { cursor: pointer; color: #6C6C73; border-bottom: 2px solid transparent; padding-bottom: 4px; text-decoration: none; }
.mainnav__link:hover { color: #17181C; }
.masthead__right { display: flex; align-items: center; gap: 18px; }

/* ---- Hamburger + fullscreen mobiel menu ---- */
.hamburger { display: none; width: 44px; height: 44px; border-radius: 100px; background: #fff; border: 1px solid #E6E2DC; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.hamburger span { width: 17px; height: 2px; background: #17181C; border-radius: 2px; }
body.menu-open { overflow: hidden; }
.mmenu { position: fixed; inset: 0; z-index: 200; background: #FBF9F6; display: flex; flex-direction: column; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
.mmenu.is-open { opacity: 1; transform: none; }
.mmenu[hidden] { display: none; }
.mmenu__bar { flex-shrink: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #EFEAE2; }
.mmenu__close { width: 44px; height: 44px; border-radius: 100px; background: #fff; border: 1px solid #E6E2DC; color: #17181C; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mmenu__scroll { flex: 1; overflow-y: auto; padding: 20px 22px 8px; }
.mmenu__search { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid #E6E2DC; border-radius: 100px; padding: 14px 20px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(23,24,28,.03); color: #9A958C; font-size: 15px; text-decoration: none; }
.mmenu__nav { display: flex; flex-direction: column; }
.mmenu__item { display: flex; align-items: center; gap: 15px; padding: 16px 2px; border-bottom: 1px solid #EFEAE2; text-decoration: none; color: inherit; }
.mmenu__num { font-size: 12px; font-weight: 600; color: var(--accent); width: 22px; flex-shrink: 0; }
.mmenu__txt { flex: 1; min-width: 0; }
.mmenu__label { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #17181C; line-height: 1.15; }
.mmenu__sub { display: block; font-size: 12.5px; color: #5C5D63; margin-top: 2px; }
.mmenu__chev { flex-shrink: 0; }
.mmenu__trust { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid #E6E2DC; border-radius: 22px; padding: 16px 18px; margin-top: 22px; box-shadow: 0 2px 8px rgba(23,24,28,.03); }
.mmenu__trusticon { width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, #fff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mmenu__trusttitle { font-size: 14px; font-weight: 700; color: #17181C; line-height: 1.3; }
.mmenu__trustsub { font-size: 12px; color: #5C5D63; margin-top: 2px; }
.mmenu__footer { flex-shrink: 0; padding: 14px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid #EFEAE2; background: #FBF9F6; }
.mmenu__social { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.mmenu__avatars { display: flex; }
.mmenu__avatars img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #FBF9F6; object-fit: cover; background: #ECE8E1; }
.mmenu__avatars img:not(:first-child) { margin-left: -9px; }
.mmenu__socialtext { font-size: 12.5px; color: #55565C; }
.mmenu__socialtext strong { color: #17181C; }
.mmenu__kh { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #F2EEE7; border: 1px solid #E6E2DC; border-radius: 18px; padding: 13px 18px; margin-bottom: 10px; text-decoration: none; color: inherit; }
.mmenu__khtitle { font-size: 14.5px; font-weight: 700; color: #17181C; }
.mmenu__khsub { font-size: 12px; color: #5C5D63; margin-top: 1px; }
.mmenu__cta { width: 100%; background: #17181C; color: #fff; font-size: 16px; font-weight: 600; padding: 16px; border-radius: 100px; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mmenu__cta span { color: var(--accent); }
.mmenu__reassure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; font-size: 11.5px; color: #5C5D63; }
.mmenu__dot { width: 7px; height: 7px; border-radius: 50%; background: #1E9E62; }
.langtoggle { display: flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #E6E2DC; border-radius: 100px; padding: 3px; }
.langtoggle__opt { display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 100px; cursor: pointer; font-size: 13px; font-weight: 600; color: #9C9A91; background: transparent; }
.langtoggle__opt--active { font-weight: 700; color: #17181C; background: #F3F0EB; }
.flag { border-radius: 3px; display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; max-width: 1200px; margin: 0 auto; padding: 72px 32px 96px; }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.hero__blob--1 { top: -40px; right: 120px; width: 380px; height: 380px; background: #FFD9CE; opacity: .6; }
.hero__blob--2 { top: 180px; left: -80px; width: 320px; height: 320px; background: #DDE2FB; opacity: .55; }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero__title { font-size: 78px; line-height: .98; font-weight: 700; letter-spacing: -.04em; margin-bottom: 26px; }
.hero__lead { font-size: 20px; line-height: 1.5; color: #55565C; max-width: 480px; margin-bottom: 36px; }
.hero__actions { display: flex; gap: 14px; align-items: center; margin-bottom: 40px; }
.hero__social { display: flex; align-items: center; gap: 14px; }
.avatars { display: flex; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #FBF9F6; display: block; object-fit: cover; background: #ECE8E1; }
.avatars .avatar:not(:first-child) { margin-left: -10px; }
.hero__socialtext { font-size: 14px; color: #55565C; }
.hero__socialtext strong { color: #17181C; }

.hero__cardwrap { position: relative; }
.hero__cardback { position: absolute; top: 24px; left: 24px; right: -16px; bottom: -16px; background: #fff; border-radius: 30px; opacity: .5; pointer-events: none; }
/* Keuzehulp in de hero moet boven de decoratieve achterkaart liggen (klikbaar + scherp). */
.hero__cardwrap--kh .keuzehulp { position: relative; z-index: 1; }
.matchcard { position: relative; background: #fff; border-radius: 30px; padding: 30px; box-shadow: 0 4px 8px rgba(0,0,0,.03), 0 30px 60px -28px rgba(0,0,0,.25); animation: floaty 6s ease-in-out infinite; }
.matchcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.matchcard__label { font-size: 14px; font-weight: 600; color: #5C5D63; }
.matchcard__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #1E9E62; }
.matchcard__livedot { width: 7px; height: 7px; border-radius: 50%; background: #1E9E62; }
.matchcard__prompt { font-size: 12.5px; font-weight: 600; color: #5C5D63; margin-bottom: 10px; }
.matchcard__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { font-family: 'Hanken Grotesk', sans-serif; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 100px; cursor: pointer; border: 1.5px solid #E6E2DC; background: #fff; color: #55565C; }
.chip--on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.matchcard__divider { height: 1px; background: #EFEAE2; margin-bottom: 20px; }
.matchcard__broker { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.matchcard__logo { width: 58px; height: 58px; border-radius: 18px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 21px; transition: background .25s ease; flex: none; }
.matchcard__brokermeta { flex: 1; min-width: 0; }
.matchcard__name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.matchcard__tag { font-size: 13px; color: #5C5D63; }
.matchcard__progress { margin-bottom: 20px; }
.matchcard__progressrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.matchcard__progresslabel { font-size: 12.5px; font-weight: 600; color: #5C5D63; }
.matchcard__progressval { font-size: 13.5px; font-weight: 700; color: #17181C; }
.bar { height: 8px; border-radius: 100px; background: #EEEAE3; overflow: hidden; }
.bar__fill { height: 100%; border-radius: 100px; background: var(--accent); transition: width .5s cubic-bezier(.4,0,.2,1); }
.matchcard__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 24px; }
.ministat { background: #F5F3EF; border-radius: 14px; padding: 13px 12px; }
.ministat__k { font-size: 12px; color: #5C5D63; margin-bottom: 4px; }
.ministat__v { font-size: 16px; font-weight: 700; }

/* ==========================================================================
   Three clusters
   ========================================================================== */
.clusters { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.cluster { display: block; border-radius: 28px; padding: 36px 32px; cursor: pointer; text-decoration: none; color: inherit; }
.cluster__icon { width: 56px; height: 56px; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; }
.cluster__title { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.cluster__body { font-size: 15.5px; line-height: 1.55; color: #55565C; margin-bottom: 24px; }
.cluster__cta { font-size: 15px; font-weight: 600; }

/* ==========================================================================
   Brokers preview
   ========================================================================== */
.brokerrows { display: grid; gap: 12px; }
.brokerrow { display: grid; grid-template-columns: 50px 2.2fr 1fr 1fr 1fr auto; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; background: #FBF9F6; cursor: pointer; text-decoration: none; color: inherit; }
.brokerrow:hover { background: #F3F0EB; }
.brokerrow__rank { font-size: 18px; font-weight: 700; color: #B4B5BB; font-family: 'Bricolage Grotesque', sans-serif; }
.brokerrow__id { display: flex; align-items: center; gap: 14px; }
.brokerrow__name { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.brokerrow__tag { font-size: 13px; color: #5C5D63; }
.brokerrow__metrick { font-size: 12px; color: #5C5D63; margin-bottom: 2px; }
.brokerrow__metricv { font-size: 16px; font-weight: 700; }

/* ==========================================================================
   Uitgelichte brokers
   ========================================================================== */
.featured__disclaimer { font-size: 13px; color: #9C9A91; max-width: 300px; text-align: right; line-height: 1.45; }
.featured { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; align-items: stretch; }
.spotlight { background: #17181C; border-radius: 28px; padding: 34px; color: #fff; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.spotlight__blob { position: absolute; top: -60px; right: -40px; width: 280px; height: 280px; border-radius: 50%; background: var(--accent); filter: blur(70px); opacity: .4; pointer-events: none; }
.spotlight__tag { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 100px; margin-bottom: 24px; }
.spotlight__broker { position: relative; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.spotlight__logo { width: 58px; height: 58px; border-radius: 18px; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; flex: none; }
.spotlight__logo.logo--img { background: #fff; border: none; padding: 8px; }
.spotlight__meta { flex: 1; }
.spotlight__name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.spotlight__tagline { font-size: 14px; color: #9A9BA1; }
.spotlight__usps { position: relative; display: grid; gap: 12px; margin-bottom: 28px; }
.spotlight__usp { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; color: #E4E5E9; }
.spotlight__check { color: var(--accent); font-weight: 700; flex: none; }
.spotlight__cta { position: relative; margin-top: auto; }
.sidecard { background: #fff; border: 1px solid #ECE8E1; border-radius: 28px; padding: 30px; display: flex; flex-direction: column; cursor: pointer; text-decoration: none; color: inherit; }
.sidecard:hover { border-color: #17181C; }
.sidecard__tag { align-self: flex-start; background: #F5F3EF; color: #55565C; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 100px; margin-bottom: 22px; }
.sidecard__broker { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sidecard__name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.sidecard__sub { font-size: 13px; color: #55565C; font-weight: 600; }
.sidecard__usp { font-size: 14.5px; line-height: 1.5; color: #55565C; margin: 0 0 22px; }
.sidecard__more { margin-top: auto; font-size: 15px; font-weight: 600; color: #17181C; }

/* ==========================================================================
   Decision poster
   ========================================================================== */
.poster { background: #17181C; border-radius: 32px; padding: 64px 56px; color: #fff; position: relative; overflow: hidden; }
.poster__blob { position: absolute; top: -80px; right: -40px; width: 400px; height: 400px; border-radius: 50%; background: var(--accent); filter: blur(80px); opacity: .45; pointer-events: none; }
.poster__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.poster__title { font-size: 48px; font-weight: 700; letter-spacing: -.03em; line-height: 1.02; margin-bottom: 20px; }
.poster__lead { font-size: 18px; line-height: 1.55; color: #B7B8BE; margin-bottom: 32px; }
.poster__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.poster__card { background: rgba(255,255,255,.06); border-radius: 20px; padding: 24px; }
.poster__cardtitle { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.poster__cardbody { font-size: 14px; color: #B7B8BE; line-height: 1.7; }

/* ==========================================================================
   Analyses
   ========================================================================== */
.cards3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.artcard { background: #fff; border-radius: 24px; overflow: hidden; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 20px 40px -30px rgba(0,0,0,.2); text-decoration: none; color: inherit; display: block; transition: transform .2s ease; }
.artcard:hover { transform: translateY(-4px); }
.artcard__thumb { height: 150px; display: flex; align-items: flex-start; padding: 18px; }
.artcard__thumb--img { background-size: cover; background-position: center; }
.artcard__thumb--img .artcard__tag { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.artcard__tag { background: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 100px; }
.artcard__body { padding: 24px; }
.artcard__title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 12px; }
.artcard__meta { font-size: 13.5px; color: #5C5D63; display: flex; gap: 8px; align-items: center; }
.artcard__author { font-weight: 600; color: #55565C; }

/* Pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pager__link { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1.5px solid #E7E4DE; background: #fff; color: #1A1B1F; font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .15s, background .15s; }
.pager__link:hover { border-color: var(--accent, #FF5A3C); }
.pager__link--active { background: var(--accent, #FF5A3C); border-color: var(--accent, #FF5A3C); color: #fff; }
.pager__gap { padding: 0 4px; color: #5C5D63; }

/* ==========================================================================
   Trust
   ========================================================================== */
.trust { background: #fff; padding: 90px 32px; }
.trust__inner { max-width: 1200px; margin: 0 auto; }
.trust .sectionhead--center { max-width: 620px; margin-bottom: 60px; }
.trust__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stat__num { font-size: 56px; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; }
.stat__num--accent { color: var(--accent); }
.stat__label { font-size: 15px; color: #55565C; margin-top: 4px; }

/* ==========================================================================
   Keuzehulp band + E-E-A-T band (shared off-white section)
   ========================================================================== */
.khsection { background: #FBF9F6; padding: 84px 32px; }
.khsection__inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: center; }
.khsection__title { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.06; margin-bottom: 16px; }
.khsection__lead { font-size: 18px; line-height: 1.55; color: #55565C; margin-bottom: 26px; }
.khsection__checks { display: flex; flex-direction: column; gap: 12px; }
.checkline { display: flex; align-items: center; gap: 11px; font-size: 15.5px; font-weight: 600; }
.checkline__mark { color: #1E9E62; font-weight: 700; }

.eeat { max-width: 1200px; margin: 0 auto; background: #17181C; border-radius: 32px; padding: 52px; color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.eeat__title { font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 18px; }
.eeat__lead { font-size: 17px; line-height: 1.6; color: #B7B8BE; margin-bottom: 28px; }
.eeat__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.eeat__team { display: flex; flex-direction: column; gap: 14px; }
.teamrow { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,.06); border-radius: 18px; padding: 16px 20px; }
.teamrow__avatar { width: 48px; height: 48px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; flex: none; }
.teamrow__meta { flex: 1; }
.teamrow__line { display: flex; align-items: center; gap: 8px; }
.teamrow__name { font-size: 15.5px; font-weight: 700; }
.teamrow__cred { background: rgba(255,255,255,.12); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 100px; }
.teamrow__role { font-size: 13px; color: #9A9BA1; margin-top: 2px; }

/* ==========================================================================
   Over Trade.nl prose
   ========================================================================== */
.prose { background: #fff; padding: 80px 32px 96px; }
.prose__inner { max-width: 840px; margin: 0 auto; }
.prose__title { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 22px; }
.prose__body { font-size: 16.5px; line-height: 1.75; color: #3A3B40; }
.prose__body p { margin: 0 0 20px; }
.prose__h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 34px 0 12px; }
.prose__disclaimer { font-size: 12.5px; line-height: 1.6; color: #9A9BA1; margin-top: 30px; padding-top: 20px; border-top: 1px solid #ECE8E1; }

/* ==========================================================================
   FAQ widget
   ========================================================================== */
.faqsection { background: #FBF9F6; padding: 88px 32px 96px; }
.faq { width: 100%; color: #17181C; }
.faq__head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.faq__eyebrow { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 14px; }
.faq__title { font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1.06; margin: 0; }
.faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: #fff; border: 1px solid #ECE8E1; border-radius: 16px; overflow: hidden; }
.faq__item.is-open { border-color: var(--accent); }
.faq__q { display: flex; align-items: center; gap: 18px; padding: 20px 24px; cursor: pointer; width: 100%; background: none; border: none; text-align: left; font-family: inherit; }
.faq__qtext { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #17181C; }
.faq__item.is-open .faq__qtext { color: var(--accent); }
.faq__sign { width: 30px; height: 30px; border-radius: 50%; background: #F3F0EB; color: #5C5D63; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; flex: none; line-height: 1; }
.faq__sign::before { content: "+"; }
.faq__item.is-open .faq__sign { background: var(--accent); color: #fff; }
.faq__item.is-open .faq__sign::before { content: "\2212"; }
.faq__a { padding: 0 24px 22px; font-size: 15.5px; line-height: 1.65; color: #55565C; max-width: 660px; }
.faq__item:not(.is-open) .faq__a { display: none; }

/* ==========================================================================
   Keuzehulp interactive widget (rendered by keuzehulp.js)
   ========================================================================== */
.keuzehulp {
  --a: var(--accent);
  --a-ink: var(--accent-ink);
  --a-soft: color-mix(in srgb, var(--accent) 13%, #fff);
  background: #fff; border: 1px solid #ECE8E1; border-radius: 24px; padding: 34px 36px;
  font-family: 'Hanken Grotesk', sans-serif; color: #17181C;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 30px 60px -45px rgba(0,0,0,.35);
  /* Ruimte reserveren zodat de JS-mount van de keuzehulp geen layout shift
     (CLS) veroorzaakt. Iets boven de gerenderde hoogte van de eerste vraag. */
  min-height: 610px;
}
.keuzehulp__noscript { font-size: 15px; color: #55565C; line-height: 1.6; }
.keuzehulp__noscript a { color: var(--a); font-weight: 600; }
.kh__segs { display: flex; gap: 7px; margin-bottom: 24px; }
.kh__seg { flex: 1; height: 6px; border-radius: 4px; background: #EAE5DC; }
.kh__seg--on { background: var(--a); }
.kh__step { font-size: 13px; font-weight: 700; color: #55565C; margin-bottom: 9px; }
.kh__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 27px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 5px; }
.kh__sub { font-size: 14.5px; color: #5C5D63; margin: 0 0 20px; }
.kh__spacer { height: 20px; }
.kh__options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.kh__opt { display: flex; align-items: center; gap: 14px; border: 2px solid #ECE7DE; background: #fff; border-radius: 14px; padding: 15px 17px; cursor: pointer; }
.kh__opt--sel { border-color: var(--a); background: var(--a-soft); }
.kh__radio { width: 23px; height: 23px; border-radius: 50%; border: 2px solid #CFC9BE; display: flex; align-items: center; justify-content: center; flex: none; }
.kh__opt--sel .kh__radio { border-color: var(--a); }
.kh__radio-dot { width: 11px; height: 11px; border-radius: 50%; background: transparent; }
.kh__opt--sel .kh__radio-dot { background: var(--a); }
.kh__check { width: 23px; height: 23px; border-radius: 7px; border: 2px solid #CFC9BE; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; font-size: 14px; font-weight: 700; }
.kh__opt--sel .kh__check { border-color: var(--a); background: var(--a); }
.kh__optlabel { font-size: 16px; font-weight: 700; }
.kh__optdesc { font-size: 13.5px; color: #5C5D63; margin-top: 1px; }
.kh__nav { display: flex; align-items: center; justify-content: space-between; }
.kh__back { font-size: 14px; font-weight: 600; color: #5C5D63; cursor: pointer; background: none; border: none; font-family: inherit; }
.kh__next { background: var(--a); color: var(--a-ink); border: none; font-family: inherit; font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: 100px; cursor: pointer; }
.kh__next--disabled { background: #EFEBE3; color: #6F6B5F; cursor: default; }
.kh__resulteyebrow { font-size: 13px; font-weight: 700; color: var(--a); margin-bottom: 9px; text-transform: uppercase; letter-spacing: .03em; }
.kh__resulttitle { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 5px; }
.kh__resultsub { font-size: 14.5px; color: #5C5D63; margin: 0 0 22px; }
.kh__resultsub strong { color: #17181C; }
.kh__matches { display: flex; flex-direction: column; gap: 13px; }
.kh__match { border: 2px solid #ECE7DE; background: #fff; border-radius: 16px; padding: 19px; }
.kh__match--best { border-color: var(--a); background: var(--a-soft); }
.kh__matchtop { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.kh__matchlogo { width: 46px; height: 46px; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px; flex: none; }
.kh__matchmeta { flex: 1; min-width: 0; }
.kh__matchnamerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kh__matchname { font-size: 16.5px; font-weight: 700; }
.kh__badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: #F0ECE4; color: #7C8682; }
.kh__badge--best { background: var(--a); color: #fff; }
.kh__matchtype { font-size: 13px; color: #5C5D63; margin-top: 1px; }
.kh__matchpct { text-align: right; flex: none; }
.kh__matchpctnum { font-family: 'Bricolage Grotesque', sans-serif; font-size: 27px; font-weight: 700; color: var(--a); line-height: 1; }
.kh__matchpctcap { font-size: 11px; color: #9AA29F; }
.kh__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.kh__tag--green { background: #E7F3EA; color: #157049; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 100px; }
.kh__tag--orange { background: #FFF1EA; color: #C2491F; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 100px; }
.kh__matchactions { display: flex; gap: 10px; }
.kh__matchbtn { flex: 1; background: var(--a); color: var(--a-ink); border: none; font-family: inherit; font-weight: 700; font-size: 14px; padding: 12px; border-radius: 100px; cursor: pointer; text-align: center; text-decoration: none; }
.kh__matchbtn--ghost { flex: none; background: #fff; color: #17181C; border: 1px solid #E0DBD2; font-weight: 600; padding: 12px 20px; border-radius: 100px; text-align: center; text-decoration: none; }
.kh__restart { text-align: center; margin-top: 20px; }
.kh__restartlink { font-size: 14px; font-weight: 700; color: #55565C; cursor: pointer; background: none; border: none; font-family: inherit; }
.kh__disclaimer { font-size: 11.5px; line-height: 1.5; color: #A0A1A7; margin: 12px 0 0; text-align: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: #F3F0EB; padding: 64px 32px 32px; }
.footer__inner { max-width: 1200px; margin: 0 auto; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid #E4DFD6; }
.footer__brand { font-family: 'Bricolage Grotesque', sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 14px; }
.footer__tagline { font-size: 14px; line-height: 1.6; color: #6C6C73; max-width: 230px; margin-bottom: 16px; }
.footer__addr { font-size: 13px; color: #55565C; line-height: 1.6; margin-bottom: 16px; }
.footer__note { font-size: 12.5px; color: #5C5D63; line-height: 1.7; }
.footer__coltitle { font-size: 13px; font-weight: 700; margin-bottom: 16px; }
.footer__link { display: block; font-size: 14px; padding: 6px 0; color: #55565C; cursor: pointer; text-decoration: none; }
.footer__link:hover { color: #17181C; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 14px; }
.footer__copy { font-size: 12.5px; color: #5C5D63; max-width: 680px; line-height: 1.5; }
.footer__legal { display: flex; gap: 18px; font-size: 12.5px; color: #5C5D63; }
.footer__legallink { color: #5C5D63; cursor: pointer; text-decoration: none; }
.footer__legallink:hover { color: #17181C; }

/* ==========================================================================
   Broker overview page (/brokers/)
   ========================================================================== */
.breadcrumb { max-width: 1200px; margin: 0 auto; padding: 26px 32px 0; font-size: 13px; color: #5C5D63; }
.breadcrumb a { color: var(--accent); font-weight: 600; text-decoration: none; }
.breadcrumb span { color: #17181C; font-weight: 600; }

.bpage__intro { max-width: 1200px; margin: 0 auto; padding: 28px 32px 36px; }
.bpage__title { font-size: 60px; font-weight: 700; letter-spacing: -.04em; line-height: 1; max-width: 780px; margin-bottom: 20px; }
.bpage__lead { font-size: 19px; line-height: 1.5; color: #55565C; max-width: 620px; }

.bpage__layout { max-width: 1200px; margin: 0 auto; padding: 0 32px 90px; display: grid; grid-template-columns: 264px 1fr; gap: 32px; align-items: start; }

.filters { position: sticky; top: 90px; background: #fff; border: 1px solid #ECE8E1; border-radius: 22px; padding: 24px; }
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.filters__title { font-size: 16px; font-weight: 700; }
.filters__clear { font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; }
/* Inklapbare filters (toggle + chevron) — alleen actief op mobiel (zie @media). */
.filters__chev, .filtertoggle__chev { display: none; width: 9px; height: 9px; border-right: 2px solid #8A8B91; border-bottom: 2px solid #8A8B91; transform: rotate(45deg); transition: transform .2s; flex: none; }
.beheerfilterbar { display: none; }
.filters__group { display: flex; flex-direction: column; }
.filters__group + .filters__group { margin-top: 16px; padding-top: 14px; border-top: 1px solid #F0ECE4; }
.filters__grouptitle { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5C5D63; margin-bottom: 5px; }
.filtercheck { display: flex; align-items: center; gap: 11px; padding: 7px 0; cursor: pointer; }
.filtercheck__box { position: absolute; opacity: 0; width: 0; height: 0; }
.filtercheck__mark { width: 21px; height: 21px; border-radius: 6px; border: 2px solid #D8D3CA; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.filtercheck__box:checked ~ .filtercheck__mark { border-color: var(--accent); background: var(--accent); }
.filtercheck__box:checked ~ .filtercheck__mark::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 700; }
.filtercheck__box:focus-visible ~ .filtercheck__mark { outline: 3px solid var(--accent); outline-offset: 2px; }
.filtercheck__label { font-size: 14px; font-weight: 600; color: #55565C; }
.filtercheck__box:checked ~ .filtercheck__label { color: #17181C; }

.results__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.results__count { font-size: 15px; color: #55565C; }
.results__count strong { color: #17181C; }
.results__sort { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.results__sortlabel { font-size: 13px; color: #5C5D63; font-weight: 600; }
.sorttab { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 100px; cursor: pointer; background: #fff; color: #55565C; border: 1px solid #E6E2DC; font-family: inherit; }
.sorttab--active { background: #17181C; color: #fff; border-color: #17181C; }
.results__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.activechip { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 100px; cursor: pointer; border: none; font-family: inherit; }
.results__list { display: grid; gap: 18px; }

.bcard { background: #fff; border-radius: 26px; padding: 30px; box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 24px 50px -36px rgba(0,0,0,.22); transition: transform .2s ease; }
.bcard:hover { transform: translateY(-3px); }
.bcard__head { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.bcard__pos { width: 18px; font-size: 16px; font-weight: 700; color: #C3C4CA; font-family: 'Bricolage Grotesque', sans-serif; }
.logo--lg { width: 58px; height: 58px; border-radius: 17px; font-size: 19px; flex: none; }
.bcard__id { flex: 1; }
.bcard__name { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.bcard__tag { font-size: 14px; color: #5C5D63; }
.scorepill--lg { padding: 10px 16px; }
.scorepill--lg .scorepill__num { font-size: 24px; }
.bcard__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.bcard__more { font-size: 13px; font-weight: 600; color: #5C5D63; text-align: center; text-decoration: none; }
.bcard__more:hover { color: #17181C; }
.bcard__metrics { display: grid; grid-template-columns: repeat(4, 1fr) 1.5fr; gap: 14px; }
.metric { background: #FBF9F6; border-radius: 14px; padding: 14px 16px; }
.metric__k { font-size: 12px; color: #5C5D63; margin-bottom: 3px; }
.metric__v { font-size: 17px; font-weight: 700; }
.metric__v--sm { font-size: 15px; }
.bcard__pros { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.prochip { background: #E7F3EA; color: #157049; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 100px; }

.results__empty { background: #fff; border: 1px solid #ECE8E1; border-radius: 22px; padding: 48px; text-align: center; }
.results__emptytitle { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.results__emptytext { font-size: 14px; color: #5C5D63; margin-bottom: 18px; }

/* ==========================================================================
   404 error page
   ========================================================================== */
.errorpage { max-width: 720px; margin: 0 auto; padding: 80px 32px 110px; text-align: center; }
.errorpage__code { font-family: 'Bricolage Grotesque', sans-serif; font-size: 120px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--accent); }
.errorpage__title { font-size: 40px; font-weight: 700; letter-spacing: -.03em; margin: 8px 0 16px; }
.errorpage__lead { font-size: 18px; line-height: 1.55; color: #55565C; margin-bottom: 32px; }
.errorpage__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.errorpage__links { display: flex; gap: 10px 22px; justify-content: center; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.errorpage__links a { color: #55565C; text-decoration: none; }
.errorpage__links a:hover { color: var(--accent); }

/* ==========================================================================
   Kennisbank, ETF, Klantenservice, Juridisch, Samenwerken
   ========================================================================== */
.muted { color: #5C5D63; }
.pagehero--center { text-align: center; }
.pagehero--center .pagehero__title { margin-left: auto; margin-right: auto; }

/* Kennisbank overview */
.catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.catcard { border-radius: 26px; padding: 30px; text-decoration: none; color: inherit; transition: transform .2s ease; display: block; }
.catcard:hover { transform: translateY(-3px); }
.catcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.catcard__icon { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; }
.catcard__count { font-size: 13px; font-weight: 600; }
.catcard__name { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.catcard__desc { font-size: 14.5px; line-height: 1.5; color: #55565C; }
.featurearticle { display: block; background: #17181C; border-radius: 30px; padding: 52px 48px; color: #fff; text-decoration: none; }
.featurearticle__tag { display: inline-block; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 100px; margin-bottom: 22px; }
.featurearticle__title { font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1.06; margin-bottom: 16px; max-width: 760px; }
.featurearticle__lead { font-size: 16.5px; line-height: 1.55; color: #B7B8BE; margin-bottom: 28px; max-width: 640px; }
.featurearticle__author { display: flex; align-items: center; gap: 13px; font-size: 14px; }
.featurearticle__avatar { width: 42px; height: 42px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 14px; flex: none; }
.featurearticle__avatar--img { object-fit: cover; background: #ECE8E1; }
.articlehead__link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.articlehead__link:hover { color: var(--accent); }
.articlehead__li { color: #0A66C2; flex: none; }
.byline__avatarlink { display: inline-flex; border-radius: 50%; flex: none; transition: box-shadow .15s, transform .15s; }
.byline__avatarlink:hover { box-shadow: 0 0 0 3px rgba(10,102,194,.35); transform: translateY(-1px); }

/* Category page */
.cathead { border-radius: 30px; padding: 44px 46px; display: flex; align-items: center; gap: 28px; }
.cathead__icon { width: 74px; height: 74px; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.cathead__count { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.cathead__title { font-size: 44px; font-weight: 700; letter-spacing: -.035em; line-height: 1; margin-bottom: 10px; }
.cathead__desc { font-size: 18px; line-height: 1.45; color: #3A3B40; max-width: 620px; }
.seoblock__intro { font-size: 16px; line-height: 1.75; color: #3A3B40; }

/* Article */
.articlehead { max-width: 720px; margin: 0 auto; padding: 34px 32px 0; }
.articlehead__cat { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 18px; }
.articlehead__title { font-size: 50px; font-weight: 700; letter-spacing: -.035em; line-height: 1.04; margin-bottom: 20px; }
.articlehead__standfirst { font-size: 21px; line-height: 1.5; color: #55565C; margin-bottom: 28px; }
.articlehead__byline { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: #fff; border-radius: 20px; flex-wrap: wrap; gap: 14px; }
.articlehead__author { display: flex; align-items: center; gap: 13px; }
.articlehead__name { font-size: 15px; font-weight: 700; }
.articlehead__role { font-size: 13px; color: #5C5D63; }
.articlehead__meta { font-size: 12.5px; color: #5C5D63; text-align: right; line-height: 1.6; }
.articlehead__check { color: #1E9E62; font-weight: 600; }
.articlelayout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1080px; }
.articletoc { position: sticky; top: 96px; }
.articletoc__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #5C5D63; margin-bottom: 14px; text-transform: uppercase; }
.articletoc__link { display: block; font-size: 14px; padding: 9px 0; border-bottom: 1px solid #ECE8E1; color: #3A3B40; text-decoration: none; }
.articletoc__link:hover { color: var(--accent); }
/* Inhoudsopgave: op desktop altijd open, op mobiel inklapbaar (zie @media). */
.articletoc__box > summary { list-style: none; cursor: default; }
.articletoc__box > summary::-webkit-details-marker { display: none; }
.articletoc__box > .articletoc__links { display: block; }
.articletoc__chev { display: none; }
.articlebody { max-width: 680px; font-size: 18px; line-height: 1.7; color: #2A2B30; }
.catbody { max-width: 760px; }
.catbody__lead { font-weight: 600; color: #17181C; margin-bottom: 22px; }
.articlebody p { margin-bottom: 22px; }
.articlebody__h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 34px 0 16px; scroll-margin-top: 96px; }
.articlebody h3 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; margin: 28px 0 12px; }
.articlebody ul, .articlebody ol { margin: 0 0 22px; padding-left: 22px; }
.articlebody li { margin-bottom: 8px; }
.articlebody a { color: var(--accent); font-weight: 600; }
/* Knoppen in artikel-widgets niet als artikel-link kleuren (anders oranje-op-oranje). */
.articlebody a.btn--accent { color: var(--accent-ink); }
.articlebody a.btn--dark { color: #fff; }
.articlebody a.btn--outline { color: #17181C; }
.articlebody strong { font-weight: 700; color: #17181C; }
.articlebody table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15.5px; }
.articlebody th, .articlebody td { border: 1px solid #ECE8E1; padding: 10px 14px; text-align: left; }
.articlebody th { background: #FBF9F6; font-weight: 700; }
.articlebody blockquote { margin: 0 0 22px; padding: 16px 22px; background: #FBF9F6; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; }
.articlehero__img { display: block; width: 100%; max-width: 1080px; margin: 0 auto; border-radius: 22px; }
.tldr { background: var(--accent-soft); border-radius: 18px; padding: 22px 26px; margin-bottom: 30px; }
.tldr__label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #17181C; margin-bottom: 8px; }
.tldr__body { font-size: 15.5px; line-height: 1.6; }
.tldr__body ul { margin: 0; padding-left: 20px; }
.tldr__body li { margin-bottom: 6px; }
.faq--inline { width: 100%; margin-top: 8px; }
.articletool { margin: 36px 0; }
.articletool__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.articletool__title { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 16px; }
.sourcesbox { background: #FBF9F6; border-radius: 20px; padding: 26px; margin-top: 30px; }
.sourcesbox__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5C5D63; margin-bottom: 14px; }
.sourcesrow { display: flex; gap: 10px; font-size: 14px; color: #55565C; padding: 6px 0; line-height: 1.45; }
.sourcesrow__mark { color: var(--accent); }
.sourcesbox__updated { margin-top: 16px; padding-top: 14px; border-top: 1px solid #ECE8E1; font-size: 12.5px; color: #5C5D63; }

/* ETF */
.etfhead { max-width: 1080px; margin: 0 auto; padding: 30px 32px 24px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 18px; }
.etfhead__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.etfhead__ticker { background: #17181C; color: #fff; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 100px; }
.etfhead__isin { font-size: 13px; color: #5C5D63; }
.etfhead__name { font-size: 38px; font-weight: 700; letter-spacing: -.03em; max-width: 560px; line-height: 1.05; }
.etfhead__price { text-align: right; }
.etfhead__px { font-size: 38px; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; }
.etfhead__chg { font-size: 15px; color: #1E9E62; font-weight: 700; }
.etfchart { width: 100%; height: 240px; display: block; }
.perfgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.perfcard { background: #fff; border-radius: 20px; padding: 22px; }
.perfcard__p { font-size: 13px; color: #5C5D63; margin-bottom: 8px; }
.perfcard__v { font-size: 24px; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; color: #1E9E62; }
.etfmain { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.etfmain__summary { font-size: 15.5px; line-height: 1.6; color: #3A3B40; margin-bottom: 28px; }
.etfmain__sub { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.etfregions { display: grid; gap: 12px; margin-bottom: 28px; }
.etfregion__top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.etfregion__w { font-weight: 700; }
.etfholdings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.etfholding { display: flex; justify-content: space-between; background: #FBF9F6; border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.etfholding__w { font-weight: 700; }
.etfside { display: grid; gap: 20px; align-content: start; }
.etfscore { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.etfscore__label { font-size: 15px; font-weight: 700; }
.etfbuy { background: #ECEEFB; border-radius: 26px; padding: 28px; }
.etfbuy__title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.etfbuy__row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; text-decoration: none; color: inherit; }
.etfbuy__meta { flex: 1; }
.etfbuy__name { display: block; font-size: 14.5px; font-weight: 700; }
.etfbuy__fee { font-size: 13px; color: #1E9E62; font-weight: 600; }
.etfbuy__arrow { color: #B4B5BB; }

/* Klantenservice */
.ks-note { background: #ECEEFB; border-radius: 18px; padding: 18px 24px; font-size: 14.5px; color: #3A3B7A; line-height: 1.5; text-align: center; }
.channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.channel { background: #fff; border: 1px solid #ECE8E1; border-radius: 22px; padding: 28px; text-align: center; }
.channel__icon { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; margin: 0 auto 16px; }
.channel__title { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.channel__desc { font-size: 14px; line-height: 1.5; color: #55565C; margin-bottom: 12px; }
.channel__value { font-size: 15px; font-weight: 700; margin-bottom: 18px; }
.topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.topic { background: #fff; border: 1px solid #ECE8E1; border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; cursor: pointer; color: inherit; text-decoration: none; }
.topic:hover { border-color: #17181C; }
.topic__arrow { color: #B4B5BB; }
.contactgrid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }
.contactgrid__lead { font-size: 15px; line-height: 1.6; color: #55565C; margin: 0 0 22px; }
.contactgrid__lines { display: flex; flex-direction: column; gap: 12px; }
.contactline { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: #3A3B40; }
.contactline__icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.contactform { display: grid; gap: 16px; }
.contactform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; }
.field__label { display: block; font-size: 13px; font-weight: 600; color: #55565C; margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; box-sizing: border-box; border: 1px solid #DED8CE; border-radius: 12px; padding: 13px 15px; font-family: inherit; font-size: 15px; outline: none; background: #FBFAF7; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #17181C; }
.field textarea { resize: vertical; }
.field__err { display: block; color: #C23E2A; font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.contactform__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.contactform__note { font-size: 12.5px; color: #5C5D63; max-width: 300px; line-height: 1.45; }
.formerror { font-size: 13.5px; color: #C23E2A; font-weight: 600; }
.formsuccess { background: #E7F3EA; border: 1px solid #BCE3C9; border-radius: 18px; padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; }
.formsuccess__check { width: 56px; height: 56px; border-radius: 50%; background: #157049; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 18px; }
.formsuccess__title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.formsuccess__text { font-size: 15px; line-height: 1.55; color: #3A5A45; max-width: 340px; }

/* Juridisch */
.legallayout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 980px; }
.legalnav { position: sticky; top: 96px; }
.legalnav__label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5C5D63; margin-bottom: 14px; }
.legalnav__link { display: block; font-size: 14.5px; font-weight: 600; padding: 10px 14px; border-radius: 10px; color: #55565C; text-decoration: none; }
.legalnav__link.is-active { background: #17181C; color: #fff; }
.legaldoc { max-width: 660px; }
.legaldoc__title { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 10px; }
.legaldoc__updated { font-size: 13px; color: #5C5D63; margin-bottom: 30px; }
.legaldoc__body { font-size: 16.5px; line-height: 1.75; color: #3A3B40; }
.legaldoc__body p { margin: 0 0 18px; }
.legaldoc__h2 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: #17181C; margin: 30px 0 10px; }
.legaldoc__contact { margin-top: 34px; padding-top: 20px; border-top: 1px solid #ECE8E1; font-size: 13px; color: #5C5D63; }
.legaldoc__contact a { color: var(--accent); font-weight: 600; }

/* Samenwerken */
.afmbadge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.1); padding: 7px 14px; border-radius: 100px; font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.afmbadge__dot { color: var(--accent); font-weight: 700; }
.indeppanel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 30px; align-self: center; }
.indeppanel__title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.indeprow { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.45; color: #E4E5E9; margin-bottom: 13px; }
.indeprow__mark { color: var(--accent); font-weight: 700; }
.offergrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.offercard { background: #fff; border-radius: 22px; padding: 28px; position: relative; }
.offercard__soon { position: absolute; top: 22px; right: 22px; background: #F0ECE4; color: #5C5D63; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; }
.offercard__icon { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--accent); font-weight: 700; font-size: 18px; }
.offercard__title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 9px; }
.offercard__desc { font-size: 14.5px; line-height: 1.5; color: #55565C; }
.ctaband--accent { background: var(--accent-soft); border: none; }
.portalband__head { text-align: center; max-width: 600px; margin: 0 auto 36px; }
.portalband__lead { font-size: 17px; line-height: 1.55; color: #55565C; }
.portalgrid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; }
.portalcard__title { font-size: 20px; font-weight: 700; margin: 0; }
.portalcard__note { font-size: 13px; color: #5C5D63; text-align: center; }
.portalcard__note a { color: var(--accent); font-weight: 600; }
.portalpreview { background: #17181C; border-radius: 24px; padding: 32px; color: #fff; }
.portalpreview__label { font-size: 13px; font-weight: 600; color: #9A9BA1; margin-bottom: 18px; }
.portalpreview__label--mt { margin-top: 28px; margin-bottom: 14px; }
.portalpreview__muted { color: #6C6D73; font-weight: 500; }
.portalpreview__list { display: grid; gap: 10px; }
.portalfeature { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.06); border-radius: 13px; padding: 14px 18px; }
.portalfeature__label { font-size: 14.5px; font-weight: 600; }
.portalfeature__badge { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 100px; }
.portalfeature__badge.is-on { background: #1E9E62; color: #fff; }
.portalfeature__badge.is-soon { background: rgba(255,255,255,.12); color: #C9CBD1; }
.portalmailing { background: rgba(255,255,255,.06); border-radius: 13px; padding: 14px 18px; }
.portalmailing__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.portalmailing__subject { font-size: 14px; font-weight: 600; line-height: 1.3; }
.portalmailing__status { font-size: 11px; font-weight: 700; color: #7FD9A8; background: rgba(127,217,168,.14); padding: 3px 9px; border-radius: 100px; white-space: nowrap; flex: none; }
.portalmailing__date { font-size: 12.5px; color: #5C5D63; }

/* ==========================================================================
   Company / E-E-A-T pages (Over ons, Redactie & werkwijze)
   ========================================================================== */
.pagehero { max-width: 1080px; margin: 0 auto; padding: 34px 32px 36px; }
.pagehero__title { font-size: 58px; font-weight: 700; letter-spacing: -.04em; line-height: 1.02; max-width: 840px; margin-bottom: 22px; }
.pagehero__lead { font-size: 20px; line-height: 1.55; color: #3A3B40; max-width: 720px; }
.pagehero__pills { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.trustpill { background: #fff; border-radius: 100px; padding: 9px 16px; font-weight: 600; font-size: 13.5px; color: #55565C; display: flex; gap: 8px; align-items: center; }
.trustpill__mark { color: #1E9E62; font-weight: 700; }

.principles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principle { border-radius: 24px; padding: 30px; }
.principle__icon { width: 48px; height: 48px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 22px; }
.principle__title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.principle__body { font-size: 14.5px; line-height: 1.55; color: #3A3B40; }

.teamgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.teamcard { background: #fff; border-radius: 24px; padding: 28px; display: flex; gap: 20px; align-items: flex-start; }
.teamcard--bordered { border: 1px solid #ECE8E1; }
.teamcard__avatar { width: 64px; height: 64px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; flex: none; }
.teamcard__avatar--img { object-fit: cover; background: #ECE8E1; }
.teamcard__avatarlink { display: inline-flex; border-radius: 50%; flex: none; transition: box-shadow .15s, transform .15s; }
.teamcard__avatarlink:hover { box-shadow: 0 0 0 3px rgba(10,102,194,.35); transform: translateY(-1px); }
.teamcard__li { color: #0A66C2; display: inline-flex; }
.teamcard__li:hover { opacity: .75; }
.teamcard__body { flex: 1; }
.teamcard__namerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.teamcard__name { font-size: 18px; font-weight: 700; }
.teamcard__cred { background: #F0ECE4; font-size: 11px; font-weight: 700; color: #55565C; padding: 3px 9px; border-radius: 100px; }
.teamcard__role { font-size: 14px; font-weight: 600; color: var(--accent); margin: 3px 0 10px; }
.teamcard__bio { font-size: 13.5px; line-height: 1.55; color: #55565C; margin-bottom: 12px; }
.teamcard__exp { font-size: 12px; color: #5C5D63; line-height: 1.5; }
.teamcard__exp strong { color: #55565C; }

.darkpanel { background: #17181C; border-radius: 30px; padding: 48px; color: #fff; }
.darkpanel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.darkpanel__title { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 18px; }
.darkpanel__lead { font-size: 16px; line-height: 1.6; color: #B7B8BE; margin-bottom: 24px; }
.methodstats { display: flex; gap: 28px; }
.methodstat__num { font-size: 40px; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; color: var(--accent); line-height: 1; }
.methodstat__label { font-size: 13px; color: #5C5D63; margin-top: 4px; }
.methodsteps { display: flex; flex-direction: column; gap: 14px; }
.methodstep { display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,.06); border-radius: 18px; padding: 18px 20px; }
.methodstep__n { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.methodstep__title { font-size: 15.5px; font-weight: 700; margin-bottom: 3px; }
.methodstep__body { font-size: 13.5px; line-height: 1.5; color: #9A9BA1; }

.darkpanel--stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.overstat__num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 42px; font-weight: 700; letter-spacing: -.03em; color: var(--accent); }
.overstat__label { font-size: 14px; color: #9A9BA1; margin-top: 4px; }

.indepcard { background: #E7F3EA; border-radius: 24px; padding: 34px; }
.indepcard__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; }
.indepcard__lead { font-size: 15px; line-height: 1.6; color: #2A4A3A; margin-bottom: 18px; }
.moneycard__lead { font-size: 15px; line-height: 1.6; color: #3A3B40; margin-bottom: 18px; }
.moneybox { background: #FBF9F6; border-radius: 16px; padding: 6px 20px; }
.processgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.processgrid__lead { font-size: 15px; line-height: 1.6; color: #3A3B40; margin-bottom: 16px; }
.processbox { background: #FBF9F6; border-radius: 18px; padding: 10px 24px; }
.processrow { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #EDE8E0; font-size: 14px; font-weight: 600; }
.processrow:last-child { border-bottom: none; }
.processrow__mark { color: #1E9E62; font-weight: 700; }

.storygrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.storyprose p { font-size: 16.5px; line-height: 1.7; color: #3A3B40; margin: 0 0 18px; }
.valuecol { display: flex; flex-direction: column; gap: 14px; }
.valuecard { border-radius: 20px; padding: 24px; }
.valuecard__title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.valuecard__body { font-size: 14.5px; line-height: 1.55; color: #3A3B40; }

.ctaband { background: #FBF9F6; border: 1px solid #ECE8E1; border-radius: 26px; padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.ctaband__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.ctaband__sub { font-size: 15px; color: #55565C; }

/* ==========================================================================
   Vermogensbeheer (overview + detail) — green-themed variants
   ========================================================================== */
.btn--green { background: #1E9E62; color: #fff; }
.scorepill--green { background: #E7F3EA; color: #157049; }
.scorecircle--green { border-color: #1E9E62; }
.scorecircle--green .scorecircle__num { color: #157049; }
.scoreline--green .scoreline__val { color: #157049; }
.scoreline--green .scoreline__fill { background: #1E9E62; }
.metric__v--green { color: #1E9E62; }

.beheerhead { max-width: 1200px; margin: 0 auto; padding: 28px 32px 36px; display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: end; }
.beheerhead__eyebrow { color: #1E9E62; }
.beheerstats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.beheerstat { background: #fff; border-radius: 20px; padding: 22px; }
.beheerstat__num { font-size: 30px; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; }
.beheerstat__label { font-size: 13px; color: #5C5D63; margin-top: 4px; }

.beheerfilter { max-width: 1200px; margin: 0 auto 12px; padding: 0 32px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.beheerfilter__q { flex: 1 1 220px; min-width: 170px; height: 44px; padding: 0 16px; border: 1.5px solid #E7E4DE; border-radius: 12px; font: inherit; font-size: 14.5px; background: #fff; }
.beheerfilter__sel { height: 44px; padding: 0 14px; border: 1.5px solid #E7E4DE; border-radius: 12px; font: inherit; font-size: 14px; background: #fff; color: #1A1B1F; cursor: pointer; }
.beheerfilter__q:focus, .beheerfilter__sel:focus { outline: none; border-color: var(--accent, #FF5A3C); }
.beheerfilter__check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #1A1B1F; white-space: nowrap; cursor: pointer; }
.beheerfilter__reset { font-size: 14px; color: #5C5D63; text-decoration: underline; }
.beheerfilter__count { max-width: 1200px; margin: 0 auto 10px; padding: 0 32px; font-size: 13.5px; color: #5C5D63; }
.beheerfilter__empty { padding: 28px 4px; color: #55565C; }
.bpage__list { max-width: 1200px; margin: 0 auto; padding: 0 32px 90px; display: grid; gap: 18px; }
.mcard { background: #fff; border-radius: 26px; padding: 30px; box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 24px 50px -36px rgba(0,0,0,.22); transition: transform .2s ease; }
.mcard:hover { transform: translateY(-3px); }
.mcard__head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.mcard__id { flex: 1; }
.mcard__metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

.bd__metacards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.metacard { background: #fff; border-radius: 16px; padding: 16px 18px; }
.metacard__k { font-size: 12px; color: #5C5D63; margin-bottom: 4px; }
.metacard__v { font-size: 16px; font-weight: 700; }

.bd__returnhead { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.bd__returnsub { font-size: 13.5px; color: #5C5D63; margin: 4px 0 0; }
.bd__returnnum { text-align: right; }
.bd__returnval { font-size: 30px; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; color: #157049; line-height: 1; }
.bd__returnlbl { font-size: 12.5px; color: #5C5D63; }
.profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.profilecard { background: #FBF9F6; border-radius: 18px; padding: 20px; }
.profilecard__top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.profilecard__dot { width: 10px; height: 10px; border-radius: 50%; }
.profilecard__name { font-size: 15px; font-weight: 700; }
.profilecard__ret { margin-left: auto; font-size: 16px; font-weight: 700; color: #157049; }
.profilecard__bar { display: flex; height: 10px; border-radius: 100px; overflow: hidden; margin-bottom: 10px; background: #E2DED6; }
.profilecard__stocks { height: 100%; }
.profilecard__legend { display: flex; justify-content: space-between; font-size: 12.5px; color: #5C5D63; }

.servicegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.serviceitem { display: flex; gap: 14px; align-items: flex-start; }
.serviceitem__icon { width: 40px; height: 40px; border-radius: 12px; background: #E7F3EA; color: #157049; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.serviceitem__title { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.serviceitem__desc { font-size: 14px; line-height: 1.45; color: #55565C; }

/* ==========================================================================
   Broker compare page (/vergelijken/)
   ========================================================================== */
.cintro { max-width: 1080px; margin: 0 auto; padding: 30px 32px 28px; }
.cintro__title { font-size: 56px; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-bottom: 16px; }
.cintro__lead { font-size: 18px; color: #55565C; max-width: 600px; }
.ctable { max-width: 1080px; margin: 0 auto; padding: 0 32px 90px; }
.ctable__card { background: #fff; border-radius: 28px; padding: 14px; box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 30px 60px -44px rgba(0,0,0,.25); }
.ctable__row { display: grid; grid-template-columns: 1.3fr repeat(var(--cols, 3), 1fr); align-items: center; border-top: 1px solid #F0ECE4; }
.ctable__head { align-items: end; padding: 22px 20px; position: sticky; top: 78px; background: #fff; border-radius: 20px; z-index: 10; border-top: none; }
.ctable__headlabel { font-size: 13px; font-weight: 600; color: #5C5D63; }
.ccol { text-align: center; }
.ccol__logo { width: 50px; height: 50px; border-radius: 15px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 16px; margin: 0 auto 8px; }
.ccol__name { font-size: 15px; font-weight: 700; }
.ccol__score { font-size: 17px; font-weight: 700; color: var(--accent); font-family: 'Bricolage Grotesque', sans-serif; }
.crow__label { padding: 16px 20px; font-size: 14.5px; font-weight: 600; color: #3A3B40; }
.ccell { padding: 14px 12px; margin: 6px; text-align: center; font-size: 15px; font-weight: 600; border-radius: 12px; }
.ccell--best { background: var(--accent-soft); }

/* ==========================================================================
   Broker detail / review page (/brokers/<slug>/)
   ========================================================================== */
.logo--xl { width: 72px; height: 72px; border-radius: 20px; font-size: 26px; flex: none; }

.bd__header { max-width: 1080px; margin: 0 auto; padding: 30px 32px 40px; display: grid; grid-template-columns: 1fr 320px; gap: 44px; align-items: start; }
.bd__id { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.bd__title { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.bd__tagline { font-size: 15px; color: #5C5D63; margin-top: 5px; }
.bd__verdict { font-size: 19px; line-height: 1.55; color: #2A2B30; font-weight: 500; }
.bd__meta { display: flex; gap: 12px; margin-top: 22px; font-size: 13px; color: #5C5D63; align-items: center; flex-wrap: wrap; }
.bd__meta strong { color: #17181C; }
.bd__indep { color: #1E9E62; font-weight: 600; }
.bd__sidebar { background: #fff; border-radius: 26px; padding: 28px; box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 24px 50px -34px rgba(0,0,0,.25); position: sticky; top: 90px; text-align: center; }
.bd__scorelabel { font-size: 13px; font-weight: 600; color: #5C5D63; margin-bottom: 14px; }
.scorecircle { width: 120px; height: 120px; border-radius: 50%; border: 5px solid var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.scorecircle__num { font-size: 46px; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; color: var(--accent); }
.bd__cta { margin-bottom: 10px; }

.bd__section { max-width: 1080px; margin: 0 auto; padding: 0 32px 36px; }
.bd__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bd__card { background: #fff; border-radius: 26px; padding: 36px; }
.bd__cardtitle { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 26px; }
.bd__h2 { font-size: 30px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 22px; }
.bd__h3 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.bd__note { font-size: 12.5px; color: #A0A1A7; margin-top: 14px; }
.costdetails { margin: 18px 0 0; padding-top: 4px; }
.costdetails__label { font-size: 13px; font-weight: 700; color: #17181C; margin-top: 16px; }
.costdetails__desc { font-size: 13.5px; line-height: 1.55; color: #55565C; margin: 3px 0 0; }
.costdetails__label:first-child { margin-top: 0; }

.scorebreak { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 44px; }
.scoreline__top { display: flex; justify-content: space-between; margin-bottom: 8px; }
.scoreline__label { font-size: 14.5px; font-weight: 600; }
.scoreline__val { font-size: 15px; font-weight: 700; color: var(--accent); }
.scoreline__bar { height: 8px; background: #F0ECE4; border-radius: 100px; overflow: hidden; }
.scoreline__fill { height: 100%; background: var(--accent); border-radius: 100px; }

.proscard { background: #E7F3EA; border-radius: 26px; padding: 32px; }
.proscard__title { font-size: 18px; font-weight: 700; color: #157049; margin-bottom: 18px; }
.prosrow { display: flex; gap: 11px; margin-bottom: 14px; font-size: 15px; line-height: 1.45; color: #2A4A3A; }
.prosrow__mark { color: #1E9E62; font-weight: 700; }
.conscard { background: #FFEDE7; border-radius: 26px; padding: 32px; }
.conscard__title { font-size: 18px; font-weight: 700; color: #C23E2A; margin-bottom: 18px; }
.consrow { display: flex; gap: 11px; margin-bottom: 14px; font-size: 15px; line-height: 1.45; color: #5A352C; }
.consrow__mark { color: #E0473B; font-weight: 700; }

.kvrow { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #F0ECE4; font-size: 14.5px; }
.kvrow__k { color: #5C5D63; }
.kvrow__v { font-weight: 700; text-align: right; }
.offering { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.offering--3 { grid-template-columns: repeat(3, 1fr); }
.bd__about { font-size: 15.5px; line-height: 1.7; color: #3A3B40; }
.bd__about p { margin: 0 0 16px; }
.bd__about p:last-child { margin-bottom: 0; }
.offrow { display: flex; align-items: center; justify-content: space-between; border-radius: 14px; padding: 13px 16px; font-size: 14px; }
.offrow--on { background: #E7F3EA; }
.offrow--off { background: #F3F0EB; }
.offrow__name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.offrow__mark { font-weight: 700; }
.offrow--on .offrow__mark { color: #1E9E62; }
.offrow--off .offrow__mark { color: #B4B5BB; }
.offrow__v { color: #5C5D63; font-size: 13px; }

.bd__newshead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.bd__newssub { font-size: 13px; color: #5C5D63; }
.bd__news { display: grid; gap: 14px; }
.newsrow { background: #fff; border-radius: 20px; padding: 24px 28px; display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; }
.newsrow__date { font-size: 13px; font-weight: 700; color: #17181C; display: flex; flex-direction: column; align-items: flex-start; }
.newsrow__tag { margin-top: 8px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; }
.newsrow__title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 7px; line-height: 1.3; }
.newsrow__excerpt { font-size: 14.5px; line-height: 1.5; color: #55565C; margin: 0 0 8px; }
.newsrow__source { font-size: 12.5px; color: #A0A1A7; }

.altcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.altcard { background: #fff; border-radius: 22px; padding: 26px; cursor: pointer; text-decoration: none; color: inherit; transition: transform .2s ease; display: block; }
.altcard:hover { transform: translateY(-3px); }
.altcard__head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.altcard__name { font-size: 16px; font-weight: 700; }
.altcard__score { font-size: 15px; font-weight: 700; color: var(--accent); font-family: 'Bricolage Grotesque', sans-serif; }
.altcard__why { font-size: 14px; color: #5C5D63; line-height: 1.45; }

/* ==========================================================================
   Responsive (the prototype is a fixed 1200px desktop mock; these rules keep
   it usable on smaller viewports without altering the desktop pixel layout)
   ========================================================================== */
@media (max-width: 1040px) {
  .bpage__layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .bd__header { grid-template-columns: 1fr; gap: 28px; }
  .bd__sidebar { position: static; }
  .scorebreak { grid-template-columns: 1fr 1fr; }
  .altcards { grid-template-columns: 1fr; }
  .beheerhead { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bd__metacards { grid-template-columns: 1fr 1fr; }
  .profiles { grid-template-columns: 1fr; }
  .servicegrid { grid-template-columns: 1fr; }
  .principles3 { grid-template-columns: 1fr; }
  .teamgrid { grid-template-columns: 1fr; }
  .catgrid, .channels, .offergrid { grid-template-columns: 1fr; }
  .etfmain { grid-template-columns: 1fr; }
  .keuzehulp { min-height: 640px; }
  .articlelayout { grid-template-columns: minmax(0, 1fr); }
  .articletoc { position: static; }
  .articletoc__box { border: 1px solid #ECE8E1; border-radius: 12px; padding: 0 15px; background: #fff; }
  .articletoc__box > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; margin: 0; }
  .articletoc__box > .articletoc__links { display: none; padding-bottom: 6px; }
  .articletoc__box[open] > .articletoc__links { display: block; }
  .articletoc__chev { display: inline-block; width: 9px; height: 9px; border-right: 2px solid #9A958C; border-bottom: 2px solid #9A958C; transform: rotate(45deg); transition: transform .2s; margin-left: 12px; flex: none; }
  .articletoc__box[open] > summary .articletoc__chev { transform: rotate(-135deg); }
  .legallayout { grid-template-columns: minmax(0, 1fr); }
  .legalnav { position: static; }
  .legaldoc__body, .legaldoc__title { overflow-wrap: break-word; }
  .contactgrid { grid-template-columns: 1fr; }
  .portalgrid { grid-template-columns: 1fr; }
  .cathead { flex-direction: column; align-items: flex-start; }
  .darkpanel__grid { grid-template-columns: 1fr; gap: 32px; }
  .darkpanel--stats { grid-template-columns: 1fr 1fr; }
  .processgrid { grid-template-columns: 1fr; gap: 24px; }
  .storygrid { grid-template-columns: 1fr; gap: 28px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__title { font-size: 60px; }
  .featured { grid-template-columns: 1fr; }
  .khsection__inner { grid-template-columns: 1fr; gap: 36px; }
  .eeat { grid-template-columns: 1fr; gap: 32px; }
  .poster__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 760px) {
  .mainnav, .featured__disclaimer { display: none; }
  .masthead__cta, .langtoggle { display: none; }
  .hamburger { display: flex; }
  .clusters, .cards3, .trust__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 46px; }
  .sectionhead__title--xl { font-size: 38px; }
  .panel { padding: 28px; }
  .poster { padding: 40px 28px; }
  .poster__cards { grid-template-columns: 1fr; }
  .brokerrow { grid-template-columns: 32px 1fr auto; }
  .brokerrow__metric { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .bpage__title { font-size: 40px; }
  .bcard__metrics { grid-template-columns: 1fr 1fr; }
  .bcard__pros { grid-column: 1 / -1; }
  .bcard__head { flex-wrap: wrap; }
  .bd__cols { grid-template-columns: 1fr; }
  .scorebreak { grid-template-columns: 1fr; }
  .offering, .offering--3 { grid-template-columns: 1fr; }
  .newsrow { grid-template-columns: 1fr; gap: 10px; }
  .bd__title { font-size: 30px; }
  .mcard__metrics { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mcard__head { flex-wrap: wrap; }
  .mcard__head .btn { flex: 1 0 100%; order: 5; }
  .beheerstats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Filters inklapbaar op mobiel */
  .filters__head { cursor: pointer; margin-bottom: 0; padding: 14px 18px; border: 1.5px solid #E7E4DE; border-radius: 12px; gap: 10px; }
  .filters__title { flex: 1; }
  .filters__chev { display: block; }
  .filters__head[aria-expanded="true"] .filters__chev { transform: rotate(-135deg); }
  .filters__panel { margin-top: 12px; }
  .filters__panel:not(.is-open) { display: none; }
  .beheerfilterbar { display: block; max-width: 1200px; margin: 0 auto 12px; padding: 0 32px; }
  .filtertoggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border: 1.5px solid #E7E4DE; border-radius: 12px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: inherit; cursor: pointer; }
  .filtertoggle__chev { display: block; }
  .filtertoggle[aria-expanded="true"] .filtertoggle__chev { transform: rotate(-135deg); }
  .beheerfilter:not(.is-open) { display: none; }
  .bd__metacards { grid-template-columns: 1fr 1fr; }
  .pagehero__title { font-size: 38px; }
  .topics, .perfgrid, .etfholdings { grid-template-columns: 1fr; }
  .contactform__row { grid-template-columns: 1fr; }
  .articlehead__title { font-size: 36px; }
  .cathead__title { font-size: 32px; }
  .featurearticle { padding: 32px 28px; }
  .featurearticle__title { font-size: 28px; }
  .darkpanel { padding: 32px; }
  .darkpanel--stats { grid-template-columns: 1fr 1fr; }
  .cintro__title { font-size: 36px; }
  .ctable { overflow-x: auto; }
  .ctable__card { min-width: 540px; }
}

/* Manager net-return chart */
.retchart { width: 100%; height: auto; display: block; margin: 8px 0 4px; }
.retlegend { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 4px; }
.retlegend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #5A6360; font-weight: 600; }
.retlegend__dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ==========================================================================
   Brokerwijzer widgets (duel · kostencalculator · ranglijst ·
   betaalmethoden-filter · CFD-waarschuwing · beste-voor badges)
   ========================================================================== */
.wcard { background: #fff; border: 1px solid #ECE8E1; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 36px -28px rgba(0,0,0,.25); }
.logo--sm { width: 38px; height: 38px; border-radius: 10px; font-size: 11px; flex: none; }
.wstars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1px; }
.wstars__bg { color: #DED9D0; }
.wstars__fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #F5A623; }
.rank__title, .rank__pos, .rank__score strong, .duel__total, .duel__vs, .calc__lbl strong, .calc__cheapest strong, .calc__annual { font-family: "Bricolage Grotesque", sans-serif; }

/* In-article placement wrapper. A container so the widgets adapt to the
   (narrow) article column width, not the viewport (see the @container block at
   the end of this file) — otherwise the desktop 2-column layouts overflow. */
.articlewidget { margin: 30px 0; container-type: inline-size; }
.articlewidget__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
.articlewidget__intro { font-size: 14.5px; color: #5A6360; margin: 0 0 14px; }

/* Ranglijst */
.rank { overflow: hidden; }
.rank__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #EFEBE3; flex-wrap: wrap; }
.rank__title { font-size: 18px; font-weight: 700; }
.rank__tabs { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.rank__sortlabel { font-size: 12.5px; color: #8A928F; font-weight: 600; }
.rank__tab { font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 100px; cursor: pointer; background: #fff; color: #5A6360; border: 1px solid #E2DDD3; font-family: inherit; }
.rank__tab.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rank__list { list-style: none; margin: 0; padding: 0; }
.rank__row { display: grid; grid-template-columns: 48px 50px 1fr 104px 88px auto; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid #F2EEE6; }
.rank__row:last-child { border-bottom: 0; }
.rank__row.is-top { background: #FBFAF7; }
.rank__pos { font-size: 20px; font-weight: 700; color: #C7C2B8; }
.rank__row.is-top .rank__pos { color: var(--accent); }
.rank__name { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.rank__badge { background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 100px; margin-left: 4px; }
.rank__score, .rank__cost { text-align: center; }
.rank__score strong { display: block; font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1; }
.rank__score span, .rank__cost span { font-size: 11px; color: #9AA29F; }
.rank__cost strong { display: block; font-size: 14px; font-weight: 700; }
.rank__cta { display: flex; gap: 8px; justify-content: flex-end; }

/* Head-to-head duel */
.duel { overflow: hidden; }
.duel__head { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; background: #FBFAF7; border-bottom: 1px solid #EFEBE3; }
.duel__side { display: flex; align-items: center; gap: 14px; padding: 22px; text-decoration: none; color: inherit; min-width: 0; }
.duel__side--b { justify-content: flex-end; text-align: right; }
.duel__name { font-size: 18px; font-weight: 700; }
.duel__total { font-size: 22px; font-weight: 700; color: var(--accent); }
.duel__vs { text-align: center; font-weight: 700; font-size: 15px; color: #9AA29F; }
.duel__axes { list-style: none; margin: 0; padding: 8px 24px 16px; }
.duel__axis { display: grid; grid-template-columns: 34px 1fr 110px 1fr 34px; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #F2EEE6; }
.duel__axis:last-child { border-bottom: 0; }
.duel__val { font-size: 13.5px; font-weight: 700; color: #A6ABA7; text-align: center; }
.duel__val.is-win { color: #1A1B1F; }
.duel__label { text-align: center; font-size: 12px; font-weight: 600; color: #8A928F; }
.duel__track { height: 9px; background: #EFEBE3; border-radius: 5px; overflow: hidden; display: flex; }
.duel__track--a { justify-content: flex-end; }
.duel__bar { height: 100%; background: #CFC9BE; border-radius: 5px; }
.duel__bar.is-win { background: var(--accent); }
.duel__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 24px 24px; }

/* Kostencalculator */
.calc { padding: 26px; display: grid; grid-template-columns: 300px 1fr; gap: 30px; }
.calc__field { display: block; margin-bottom: 22px; }
.calc__lbl { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: #5A6360; margin-bottom: 10px; }
.calc__lbl strong { font-size: 16px; color: #1A1B1F; }
.calc input[type=range] { width: 100%; accent-color: var(--accent); }
.calc__cheapest { background: color-mix(in srgb, var(--accent) 10%, #fff); border-radius: 13px; padding: 16px; }
.calc__cheaplbl { font-size: 12px; color: var(--accent); font-weight: 600; display: block; margin-bottom: 4px; }
.calc__cheapest strong { font-size: 18px; font-weight: 700; }
.calc__cheapest span { font-size: 13px; color: #5A6360; font-weight: 500; }
.calc__caption { font-size: 12.5px; font-weight: 700; color: #8A928F; margin-bottom: 6px; }
.calc__row { display: grid; grid-template-columns: 36px 160px 1fr 84px auto; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid #F2EEE6; }
.calc__name { font-size: 14px; font-weight: 700; }
.calc__tag { background: var(--accent); color: var(--accent-ink); font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 100px; margin-left: 4px; }
.calc__track { height: 10px; background: #F1EDE6; border-radius: 5px; overflow: hidden; }
.calc__bar { display: block; height: 100%; background: var(--accent); border-radius: 5px; transition: width .3s; }
.calc__annual { font-size: 16px; font-weight: 700; text-align: right; }

/* Betaalmethoden-filter */
.payf { padding: 24px; }
.payf__chips { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.payf__lbl { font-size: 13px; font-weight: 700; color: #5A6360; }
.payf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payf__card { display: flex; align-items: center; gap: 13px; border: 1px solid #ECE8E1; border-radius: 14px; padding: 15px; }
.payf__id { flex: 1; }
.payf__name { font-size: 15px; font-weight: 700; }
.payf__methods { font-size: 12px; color: #8A928F; }
.payf__empty { grid-column: 1 / -1; color: #8A928F; text-align: center; padding: 20px; }

/* CFD-risicowaarschuwing */
.cfdwarn { background: #FFF6F0; border: 1px solid #F6D9C7; border-left: 5px solid var(--accent); border-radius: 14px; padding: 22px 26px; display: flex; gap: 18px; align-items: flex-start; }
.cfdwarn__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex: none; }
.cfdwarn__title { font-size: 15px; font-weight: 700; color: #9A3B1C; margin-bottom: 6px; }
.cfdwarn__body { font-size: 13.5px; line-height: 1.6; color: #7A4530; margin: 0; }

/* Beste voor… badges */
.bestfor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bestfor__card { background: #fff; border: 1px solid #ECE8E1; border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 36px -30px rgba(0,0,0,.25); display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.bestfor__icon { width: 54px; height: 54px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, #fff); display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; }
.bestfor__body { flex: 1; }
.bestfor__badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px; margin-bottom: 8px; }
.bestfor__win { display: flex; align-items: center; gap: 9px; }
.bestfor__name { font-size: 15px; font-weight: 700; }

@media (max-width: 760px) {
  .rank__row { grid-template-columns: 28px 42px 1fr auto; grid-template-areas: "pos logo id score" "cta cta cta cta"; column-gap: 10px; row-gap: 11px; padding: 14px 16px; }
  .rank__pos { grid-area: pos; }
  .rank__row > .logo { grid-area: logo; }
  .rank__id { grid-area: id; }
  .rank__score { grid-area: score; }
  .rank__cta { grid-area: cta; flex-direction: column; align-items: stretch; gap: 8px; }
  .rank__cta .btn { flex: none; text-align: center; }
  .rank__cost { display: none; }
  .rank__head { padding: 14px 16px; }
  .duel__head { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); }
  .duel__side { padding: 16px 14px; gap: 10px; }
  .duel__name { font-size: 15px; }
  .duel__axes { padding: 8px 16px 12px; }
  .duel__axis { grid-template-columns: 28px minmax(0, 1fr) 64px minmax(0, 1fr) 28px; gap: 8px; }
  .duel__ctas { grid-template-columns: 1fr; padding: 0 16px 18px; }
  .calc { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .calc__row { grid-template-columns: 34px 1fr auto; gap: 10px; }
  .calc__track, .calc__row .btn { display: none; }
  .payf__grid { grid-template-columns: 1fr; }
  .bestfor { grid-template-columns: 1fr; }
  .cfdwarn { padding: 18px; }
}

/* In-article widgets adapt to their column width (must come AFTER the base
   widget rules so equal-specificity declarations win when the container is
   narrow). Mirrors the @media(max-width:760px) compact layout. */
@container (max-width: 760px) {
  .rank__row { grid-template-columns: 28px 42px 1fr auto; grid-template-areas: "pos logo id score" "cta cta cta cta"; column-gap: 10px; row-gap: 11px; padding: 14px 16px; }
  .rank__pos { grid-area: pos; }
  .rank__row > .logo { grid-area: logo; }
  .rank__id { grid-area: id; }
  .rank__score { grid-area: score; }
  .rank__cta { grid-area: cta; flex-direction: column; align-items: stretch; gap: 8px; }
  .rank__cta .btn { flex: none; text-align: center; }
  .rank__cost { display: none; }
  .rank__head { padding: 14px 16px; }
  .duel__head { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); }
  .duel__side { padding: 16px 14px; gap: 10px; }
  .duel__name { font-size: 15px; }
  .duel__axes { padding: 8px 16px 12px; }
  .duel__axis { grid-template-columns: 28px minmax(0, 1fr) 64px minmax(0, 1fr) 28px; gap: 8px; }
  .duel__ctas { grid-template-columns: 1fr; padding: 0 16px 18px; }
  .calc { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .calc__row { grid-template-columns: 34px 1fr auto; gap: 10px; }
  .calc__track, .calc__row .btn { display: none; }
  .payf__grid { grid-template-columns: 1fr; }
  .bestfor { grid-template-columns: 1fr; }
}

/* Homepage blog teaser cards */
.homeblogcard { background: #fff; border: 1px solid #ECE8E1; border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 36px -28px rgba(0,0,0,.25); transition: transform .2s; }
.homeblogcard:hover { transform: translateY(-4px); }
.homeblogcard__thumb { height: 130px; display: flex; align-items: flex-start; padding: 16px; position: relative; overflow: hidden; }
/* Featured image (analyse chart-kaart) over de gradient, chip blijft erbovenop. */
.blogthumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.homeblogcard__topic, .homeblogcard__ad { position: relative; z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.homeblogcard__topic { background: #fff; color: #17181C; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 100px; }
.homeblogcard__ad { background: #F3EAD7; color: #8A6D2F; border: 1px solid #E4D4AE; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; }
.homeblogcard__body { padding: 22px 24px; }
.homeblogcard__title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 10px; }
.homeblogcard__meta { font-size: 13px; color: #5C5D63; }

/* Reclamebanners (adslots) — server-side geplaatst per template-plek. */
.adslot { margin: 30px auto; text-align: center; max-width: 100%; }
.adslot--tight { margin: 18px auto; }
.adslot__label { display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: #6E6A60; margin-bottom: 7px; }
.adslot__link { display: inline-block; line-height: 0; max-width: 100%; }
.adslot__img { max-width: 100%; height: auto; border-radius: 12px; }