/* build 18-07-2026-b — cache-verversing */
/* ============================================================
   exchangefacts.com — app.css (ENIGE bron van CSS voor:
   /, /en/, /vergelijken/, /en/compare/)

   SPELREGELS
   - Wijzig styling ALLEEN in dit bestand, nooit inline in de HTML.
   - Kaart-layout (result cards): zoek op "card-grid-fix" — dat blok
     is leidend voor het grid (3 kolommen, rang+naam samen in kolom 1).
   - Dropdown-panelen (Markt/Sorteren): zoek op "definitieve opgeruimde stijl".
   - Mobiele scoreregel: zoek op "compacte scoreregel op mobiel".
   - Pagina-specifieke regels zijn gescoped op body-class:
     .page-home (homepage) en .page-results (resultatenpagina).
   Laatste opschoning: 16 juli 2026.
   ============================================================ */

:root{
  --bg:#F4F7FB;
  --card:#FFFFFF;
  --ink:#101B33;
  --accent:#245DE8;
  --accent-2:#14B8A6;
  --accent-soft:#EEF4FF;
  --muted:#62708A;
  --line:#DFE6F1;
  --ok:#14945A;
  --ok-soft:#EAF8F1;
  --bad:#D23B2E;
  --gold:#B07E0A;
  --gold-soft:#FBF3DC;
  --radius:16px;
  --shadow:0 24px 70px -42px rgba(16,27,51,.42);
  --shadow-soft:0 14px 38px -30px rgba(16,27,51,.32);
}

/* ===== INFORMATION MENU: SINGLE READING COLUMN V1 ===== */
@media (min-width: 1181px) {
  .nav-item:has(> .nav-trigger:where(
    [href$="/informatie/"],
    [href$="/information/"],
    [href$="/informationen/"],
    [href$="/informacje/"],
    [href$="/informacion/"],
    [href$="/informations/"],
    [href$="/informazioni/"],
    [href$="/informacao/"]
  )) .mega-panel.mega-v2 .mega-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .nav-item:has(> .nav-trigger:where(
    [href$="/informatie/"],
    [href$="/information/"],
    [href$="/informationen/"],
    [href$="/informacje/"],
    [href$="/informacion/"],
    [href$="/informations/"],
    [href$="/informazioni/"],
    [href$="/informacao/"]
  )) .mega-panel.mega-v2 .mega-col.mc-rich {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: 44px auto !important;
    column-gap: 16px !important;
    row-gap: 2px !important;
    padding: 14px 0 !important;
  }

  .nav-item:has(> .nav-trigger:where(
    [href$="/informatie/"],
    [href$="/information/"],
    [href$="/informationen/"],
    [href$="/informacje/"],
    [href$="/informacion/"],
    [href$="/informations/"],
    [href$="/informazioni/"],
    [href$="/informacao/"]
  )) .mega-panel.mega-v2 .mc-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  .nav-item:has(> .nav-trigger:where(
    [href$="/informatie/"],
    [href$="/information/"],
    [href$="/informationen/"],
    [href$="/informacje/"],
    [href$="/informacion/"],
    [href$="/informations/"],
    [href$="/informazioni/"],
    [href$="/informacao/"]
  )) .mega-panel.mega-v2 .mega-section {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .nav-item:has(> .nav-trigger:where(
    [href$="/informatie/"],
    [href$="/information/"],
    [href$="/informationen/"],
    [href$="/informacje/"],
    [href$="/informacion/"],
    [href$="/informations/"],
    [href$="/informazioni/"],
    [href$="/informacao/"]
  )) .mega-panel.mega-v2 .mc-links {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .nav-item:has(> .nav-trigger:where(
    [href$="/informatie/"],
    [href$="/information/"],
    [href$="/informationen/"],
    [href$="/informacje/"],
    [href$="/informacion/"],
    [href$="/informations/"],
    [href$="/informazioni/"],
    [href$="/informacao/"]
  )) .mega-panel.mega-v2 .mc-links a {
    justify-content: flex-start !important;
    padding: 5px 0 !important;
    white-space: normal !important;
  }

  .nav-item:has(> .nav-trigger:where(
    [href$="/informatie/"],
    [href$="/information/"],
    [href$="/informationen/"],
    [href$="/informacje/"],
    [href$="/informacion/"],
    [href$="/informations/"],
    [href$="/informazioni/"],
    [href$="/informacao/"]
  )) .mega-panel.mega-v2 .mc-links a::after {
    margin-left: 6px !important;
  }

  .nav-item:has(> .nav-trigger:where(
    [href$="/informatie/"],
    [href$="/information/"],
    [href$="/informationen/"],
    [href$="/informacje/"],
    [href$="/informacion/"],
    [href$="/informations/"],
    [href$="/informazioni/"],
    [href$="/informacao/"]
  )) .mega-panel.mega-v2 .mc-category-hit {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-height: 44px !important;
    margin: 0 !important;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:
    linear-gradient(180deg,#FAFCFF 0,#F4F7FB 310px,#F6F8FC 100%);
  color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:1920px;margin:0 auto;padding:0 40px}
a{color:var(--accent)}
button{font-family:inherit}

/* ---------- topbar ---------- */
.topbar{
  background:rgba(255,255,255,.86);border-bottom:1px solid rgba(223,230,241,.78);
  position:sticky;top:0;z-index:60;backdrop-filter:blur(16px);
}
.nav-grid{display:grid;grid-template-columns:auto minmax(440px,1fr) auto;align-items:center;gap:28px;height:64px}
.brand{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;
  min-width:210px;
}
.site-logo{display:block;width:210px;height:auto}
.navlinks{display:flex;gap:12px;margin:0 auto;justify-content:center;min-width:760px}
.nav-item{position:relative}
.navlinks .nav-trigger{
  text-decoration:none;color:var(--ink);font-size:14px;font-weight:600;
  padding:21px 2px 19px;border-bottom:2px solid transparent;text-align:center;display:block;
}
.nav-item:nth-child(1) .nav-trigger{width:92px}
.nav-item:nth-child(2) .nav-trigger{width:96px}
.nav-item:nth-child(3) .nav-trigger{width:82px}
.nav-item:nth-child(4) .nav-trigger{width:96px}
.nav-item:nth-child(5) .nav-trigger{width:90px}

.navlinks .nav-trigger:hover{color:var(--accent)}
.navlinks .nav-trigger.active{border-bottom-color:var(--accent);color:var(--accent)}
.mega-panel{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:330px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 54px -30px rgba(16,27,51,.45);padding:10px;z-index:90;
  opacity:0;visibility:hidden;pointer-events:none;transition:.14s ease;
}
.nav-item:hover .mega-panel,
.nav-item:focus-within .mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-item:first-child .mega-panel{left:0;transform:translate(0,8px)}
.nav-item:first-child:hover .mega-panel,
.nav-item:first-child:focus-within .mega-panel{transform:translate(0,0)}
.nav-item:last-child .mega-panel{left:auto;right:0;transform:translate(0,8px)}
.nav-item:last-child:hover .mega-panel,
.nav-item:last-child:focus-within .mega-panel{transform:translate(0,0)}
.mega-panel a{
  display:block;text-decoration:none;color:var(--ink);font-size:13px;font-weight:650;
  padding:9px 10px;border-radius:9px;line-height:1.25;text-align:left;white-space:nowrap;
}
.mega-panel a:hover{background:var(--accent-soft);color:var(--accent)}
.mega-panel.info-mega{
  width:300px;display:grid;grid-template-columns:1fr;
  gap:4px 0;align-items:start;padding:14px 16px;border-radius:0 0 16px 16px;max-height:min(80vh,660px);overflow-y:auto;
}
.info-mega .mega-kicker{grid-column:1/-1;padding:0;margin:0 0 2px}
.info-mega .mega-col{display:flex;flex-direction:column;gap:2px}
.info-mega .mega-section{
  border:0;margin:0 0 8px;padding:0;color:var(--ink);font-size:15px;font-weight:850;
  letter-spacing:-.01em;text-transform:none;
}
.info-mega a{padding:7px 0;color:var(--accent);font-weight:750}
.info-mega a:hover{background:transparent;text-decoration:underline}
@media(max-width:1020px){.mega-panel.info-mega{display:none}}
.mega-kicker{
  display:block;padding:3px 10px 8px;color:var(--muted);font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}
.mega-section{display:block;color:#7B879C;font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin:10px 10px 4px;padding-top:8px;border-top:1px solid #EEF3FA}
.mega-kicker + .mega-section{margin-top:0;padding-top:0;border-top:0}
.nav-actions{display:inline-flex;align-items:center;gap:10px}
.mobile-menu-btn{
  display:none;width:42px;height:42px;border:1.5px solid var(--line);border-radius:11px;
  background:var(--card);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;
  transition:all .12s;
}
.mobile-menu-btn:hover{border-color:#BCC7DB;color:var(--accent)}
.mobile-menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mobile-menu-btn svg{width:20px;height:20px}
.mobile-nav-panel{
  display:none;position:fixed;left:12px;right:12px;top:72px;z-index:95;
  max-height:calc(100vh - 88px);overflow:auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 30px 70px -34px rgba(16,27,51,.48);padding:14px;
}
.mobile-nav-section + .mobile-nav-section{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.mobile-nav-title{
  display:block;color:var(--muted);font-size:11px;font-weight:850;letter-spacing:.07em;
  text-transform:uppercase;margin:0 0 7px;
}
.mobile-nav-panel a{
  display:block;text-decoration:none;color:var(--ink);font-size:14px;font-weight:700;
  padding:10px 9px;border-radius:10px;line-height:1.25;
}
.mobile-nav-panel a:hover{background:var(--accent-soft);color:var(--accent)}
.langswitch,.curswitch{display:inline-flex;gap:6px}
.langbtn,.currencybtn{
  width:42px;height:42px;border:1.5px solid var(--line);border-radius:11px;background:var(--card);
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:all .12s;
}
.langbtn{width:54px;gap:5px}
.langbtn:hover,.currencybtn:hover{border-color:#BCC7DB;color:var(--ink)}
.langbtn:focus-visible,.currencybtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.langbtn svg,.currencybtn svg{width:15px;height:15px}
.lang-code{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:700;color:var(--ink)}
.currency-code{display:none;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:750;color:inherit}
.lang-wrap,.currency-wrap{position:relative}
.lang-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:80;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:6px;box-shadow:0 20px 44px -22px rgba(16,27,51,.42);min-width:150px;
}
.langoption{
  width:100%;border:1.5px solid transparent;border-radius:9px;background:var(--card);color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 10px;font-size:13px;font-weight:650;text-align:left;transition:all .12s;
}
.langoption + .langoption{margin-top:4px}
.langoption .short{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);font-weight:700}
.langoption.active{background:var(--accent-soft);border-color:#C4D6F9;color:var(--accent)}
.langoption:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* On narrow screens the language chooser is a compact horizontal strip below
   the fixed header. It no longer grows down over the homepage headline. */
@media(max-width:640px){
  .lang-panel:not([hidden]){
    position:fixed;
    top:72px;
    left:12px;
    right:12px;
    display:flex;
    align-items:center;
    gap:4px;
    min-width:0;
    padding:6px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    white-space:nowrap;
  }
  .lang-panel:not([hidden])::-webkit-scrollbar{display:none}
  .lang-panel .langoption{
    flex:0 0 48px;
    width:48px;
    height:42px;
    justify-content:center;
    padding:0;
  }
  .lang-panel .langoption + .langoption{margin-top:0}
  .lang-panel .langoption > span:first-child{display:none}
  .lang-panel .langoption .short{font-size:12px;color:inherit}
}
.currencybtn.active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 10px 22px -16px rgba(16,27,51,.65)}
.currency-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:80;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:6px;box-shadow:0 20px 44px -22px rgba(16,27,51,.42);min-width:112px;
}
.curswitch{display:flex;flex-direction:column;gap:4px}
.curswitch .cur{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;
  padding:9px 12px;border:1.5px solid transparent;border-radius:9px;text-align:left;
  background:var(--card);color:var(--muted);cursor:pointer;transition:all .12s;
}
.curswitch .cur.active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 10px 22px -16px rgba(16,27,51,.65)}
.curswitch .cur:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- hero + calculator ---------- */
.hero{padding:56px 0 30px;position:relative;overflow:hidden;min-height:85vh;display:flex;flex-direction:column;justify-content:center}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:-120px;height:330px;pointer-events:none;
  background:radial-gradient(circle at 18% 45%,rgba(36,93,232,.16),transparent 32%),
             radial-gradient(circle at 88% 45%,rgba(20,184,166,.16),transparent 34%);
}
.hero-grid{
  display:grid;grid-template-columns:minmax(420px,560px) minmax(292px,318px);gap:48px;align-items:center;
  justify-content:space-between;max-width:1588px;margin:0 auto;position:relative;z-index:1;
}
.hero-copy{max-width:560px;text-align:left;margin:0}
h1{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(42px,4.4vw,64px);line-height:1.04;letter-spacing:-.03em;
  margin:4px 0 22px;text-wrap:balance;
}
h1 .accent{color:var(--accent)}
.lede{color:var(--muted);font-size:18px;max-width:50ch;margin:0;line-height:1.65}
.trust-row{display:none}
.trust-item{display:flex;align-items:flex-start;gap:10px}
.trust-icon{
  width:32px;height:32px;border-radius:10px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--accent);box-shadow:var(--shadow-soft);flex-shrink:0;
}
.trust-title{display:block;font-size:12.5px;font-weight:850;color:var(--ink);line-height:1.25}
.trust-sub{display:block;font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:3px}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.calc{
  padding:34px 38px 34px;position:relative;overflow:hidden;
  border-color:rgba(205,216,232,.95);box-shadow:var(--shadow);
}
.calc::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.calc-head{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:24px}
.calc-head h2,.calc-head .calc-title{font-family:'Inter',system-ui,sans-serif;font-weight:850;font-size:26px;letter-spacing:-.018em}
.how{font-size:14px;font-weight:750;text-decoration:none;white-space:nowrap;color:#2B63E6;text-align:right}
.how:hover{text-decoration:underline}
.profile-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
#calculator .profile-picker{margin-top:0}
.profile-btn{
  border:1px solid #E3EAF4;background:#FFFFFF;color:var(--ink);border-radius:14px;
  min-height:82px;padding:14px 14px;text-align:left;cursor:pointer;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 10px 26px -24px rgba(16,27,51,.35);
  transition:border-color .12s, box-shadow .12s, background .12s, transform .12s, color .12s;
}
.profile-btn[data-profile="retail"]{min-height:86px}
.profile-btn:hover{border-color:#C9D5E7;background:#FBFCFF;transform:translateY(-1px)}
.profile-btn.active{
  color:#fff;border-color:#245DE8;background:linear-gradient(180deg,#2E6AF2 0%,#174FD8 100%);
  box-shadow:0 18px 34px -20px rgba(36,93,232,.85), inset 0 1px 0 rgba(255,255,255,.28);
}
.profile-btn.active::after{
  content:'';position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22);
}
.profile-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(29,99,240,.14)}
.profile-name{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:850;margin-bottom:3px}
.profile-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(36,93,232,.08)}
.profile-btn[data-profile="retail"] .profile-dot{background:var(--ok)}
.profile-btn[data-profile="vip"] .profile-dot{background:var(--accent)}
.profile-btn[data-profile="whale"] .profile-dot{background:var(--bad)}
.profile-btn[data-profile="custom"] .profile-dot{background:#667085}
.profile-vol{display:block;font-size:12.5px;font-weight:650;color:var(--muted)}
.profile-btn.active .profile-vol{color:rgba(255,255,255,.82)}
.profile-btn.active .profile-dot{box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.calc-fields{display:grid;grid-template-columns:minmax(180px,.9fr) repeat(2,minmax(180px,1fr));gap:20px}
.market-first{grid-template-columns:1fr;margin-bottom:30px}
#calculator .market-first{grid-template-columns:1fr;max-width:none}
.volume-title{font-size:18px;font-weight:850;margin:0 0 14px;color:var(--ink)}
.volume-fields{grid-template-columns:1fr;max-width:none;margin-top:-8px}
#calculator .volume-fields{grid-template-columns:1fr;max-width:none}
.manual-volume-field label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.money-input{position:relative;display:block}
.money-prefix{
  position:absolute;left:22px;top:50%;transform:translateY(-50%);
  color:#5E6B84;font-weight:850;font-size:16px;line-height:1;pointer-events:none;
}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.reserved-hidden{visibility:hidden;pointer-events:none}
.field > label{font-size:13px;font-weight:750;color:var(--ink)}
select,input[type=text]{
  font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:600;color:var(--ink);
  background:#FBFCFF;border:1.5px solid #DDE5F0;border-radius:14px;
  padding:0 18px;width:100%;height:56px;transition:border-color .12s, box-shadow .12s;
}
.money-input input[type=text]{padding-left:78px}
select:hover,input[type=text]:hover{border-color:#B8C3D6}
select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(29,99,240,.14)}
.custom-select-wrap{position:relative;width:100%}
.custom-select-wrap select{
  position:absolute!important;left:0;top:0;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important;clip:rect(0,0,0,0)!important;
}
.calc-select-btn{
  font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:600;color:var(--ink);
  background:#FBFCFF;border:1.5px solid #DDE5F0;border-radius:14px;
  padding:0 18px;width:100%;height:56px;transition:border-color .12s, box-shadow .12s, background .12s;
  display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;cursor:pointer;
}
.calc-select-btn:hover{border-color:#B8C3D6}
.calc-select-btn:focus-visible,
.calc-select-btn[aria-expanded="true"]{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(29,99,240,.14);
}
.calc-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-select-chev{color:#10213D;font-size:18px;line-height:1;transition:transform .12s;flex:0 0 auto}
.calc-select-btn[aria-expanded="true"] .calc-select-chev{transform:rotate(180deg)}
.calc-select-panel{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:120;
  background:#fff;border:1px solid #D8E1EE;border-radius:14px;
  box-shadow:0 22px 48px -22px rgba(16,27,51,.42);
  padding:6px;max-height:min(320px,calc(100vh - 120px));overflow:auto;
}
.calc-select-option{
  position:relative;width:100%;min-height:40px;border:0;border-radius:10px;background:transparent;
  color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:650;
  display:flex;align-items:center;text-align:left;padding:8px 10px 8px 34px;cursor:pointer;
}
.calc-select-option:hover{background:#F2F6FF;color:var(--accent)}
.calc-select-option.actief{color:var(--accent);background:#EEF4FF}
.calc-select-option.actief::before{
  content:'✓';position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--accent);font-weight:850;
}
.calc-select-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.derived{
  height:46px;display:flex;align-items:center;padding:0 12px;border-radius:10px;
  background:var(--accent-soft);border:1.5px dashed #B7CDF7;
  color:#1A4FBC;font-family:'IBM Plex Mono',monospace;font-size:14.5px;font-weight:600;
}
.calc-adv{
  display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end;
  border-top:1px solid var(--line);margin-top:18px;padding-top:16px;
}
.calc-adv .field{max-width:180px}
.calc-result{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:24px;margin-top:26px;
}
.rlabel{font-size:16px;font-weight:850;display:flex;align-items:center;gap:6px}
.rval{
  font-family:'Inter',system-ui,sans-serif;font-weight:900;font-size:46px;line-height:1.02;color:var(--ok);
  display:flex;align-items:center;gap:10px;margin:2px 0;
}
.rsub{font-size:15px;color:var(--muted)}
.rsub strong{color:var(--ink)}
.best-tag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;
  color:var(--ok);background:var(--ok-soft);border:1px solid #BCE3CC;border-radius:999px;
  padding:2px 7px;font-family:'IBM Plex Mono',monospace;vertical-align:middle;
}
.calc-actions{display:flex;flex-direction:column;align-items:flex-end;gap:18px;margin-left:auto}
.calc-final{
  display:flex;align-items:center;justify-content:flex-end;gap:22px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:24px;margin-top:28px;
}
.calc-final .calc-actions{margin-left:0;align-items:flex-end}
#calculator .calc-final{display:block}
#calculator .calc-final .calc-actions{align-items:center;margin:0}
#calculator .calc-final .cta{width:100%;min-height:48px}
#calculator{
  width:100%;max-width:318px;justify-self:end;padding:16px 14px 17px;border-radius:16px;
}
#calculator .calc-head{align-items:flex-start;margin-bottom:12px;gap:10px}
#calculator .calc-head h2{font-size:18px;line-height:1.18;max-width:150px}
#calculator .how{
  width:24px;height:24px;border:1.5px solid #BFD0F7;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-size:0;line-height:1;color:var(--accent);text-decoration:none;background:#fff;
}
#calculator .how::before{content:'i';font-size:14px;font-weight:850;font-family:'Inter',system-ui,sans-serif}
#calculator .how:hover{background:var(--accent-soft);text-decoration:none}
#calculator .market-first{gap:8px;margin-bottom:12px}
#calculator .field{gap:4px}
#calculator .field > label{font-size:11.5px}
#calculator .profile-picker{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}
#calculator .profile-btn{min-height:54px;padding:7px 9px;border-radius:11px}
#calculator .profile-btn[data-profile="retail"]{min-height:54px}
#calculator .profile-name{font-size:12.5px;gap:6px;margin-bottom:1px}
#calculator .profile-dot{width:7px;height:7px;box-shadow:0 0 0 3px rgba(36,93,232,.08)}
#calculator .profile-vol{font-size:10.5px;line-height:1.18}
#calculator .volume-title{font-size:12.5px;margin-bottom:7px}
#calculator select,#calculator input[type=text],
#calculator .calc-select-btn{height:40px;font-size:13px;border-radius:11px;padding:0 12px}
#calculator .calc-select-panel{top:calc(100% + 5px);border-radius:12px}
#calculator .calc-select-option{min-height:34px;font-size:13px;border-radius:8px;padding:7px 9px 7px 30px}
#calculator .calc-select-option.actief::before{left:10px}
#calculator .money-prefix{left:14px;font-size:13px}
#calculator .money-input input[type=text]{padding-left:46px}
#calculator .calc-adv{gap:12px}
#calculator .calc-final{margin-top:13px;padding-top:13px}
#calculator .linkbtn{text-align:center;font-size:11.5px;font-weight:650;color:#7B879A}
#calculator .calc-final .cta{min-height:42px;font-size:13px;border-radius:11px;padding:11px 16px}
.linkbtn{
  background:none;border:none;color:#516078;font-size:14px;font-weight:650;
  cursor:pointer;padding:2px;
}
.linkbtn:hover{color:var(--accent);text-decoration:underline}
.linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
  background:var(--accent);color:#fff;font-weight:800;font-size:16px;
  padding:16px 30px;border-radius:14px;transition:background .12s, transform .12s, box-shadow .12s;
  box-shadow:0 18px 34px -18px rgba(36,93,232,.85);
}
.cta:hover{background:#184FD1;transform:translateY(-1px);box-shadow:0 22px 38px -18px rgba(36,93,232,.92)}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.side-calc-wrap{
  position:sticky;top:86px;align-self:start;z-index:10;margin-top:22px;width:318px;
}
.side-calc{
  padding:16px 14px 17px;border-radius:16px;
  box-shadow:0 26px 68px -42px rgba(16,27,51,.48);
}
.side-calc .calc-head{align-items:flex-start;margin-bottom:12px;gap:10px}
.side-calc .calc-head h2,.side-calc .calc-head .calc-title{font-size:18px;line-height:1.18;max-width:150px;margin:0}
.side-calc .how{
  width:24px;height:24px;border:1.5px solid #BFD0F7;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-size:0;line-height:1;color:var(--accent);text-decoration:none;background:#fff;
}
.side-calc .how::before{content:'i';font-size:14px;font-weight:850;font-family:'Inter',system-ui,sans-serif}
.side-calc .how:hover{background:var(--accent-soft);text-decoration:none}
.side-calc .market-first{gap:8px;margin-bottom:12px}
.side-calc .field{gap:4px}
.side-calc .field > label{font-size:11.5px}
.side-calc .profile-picker{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}
.side-calc .profile-btn{min-height:54px;padding:7px 9px;text-align:left;border-radius:11px}
.side-calc .profile-btn[data-profile="retail"]{min-height:54px}
.side-calc .profile-btn.active::after{top:9px;right:9px;width:7px;height:7px;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.side-calc .profile-name{font-size:12.5px;justify-content:flex-start;gap:6px;white-space:nowrap;margin-bottom:1px}
.side-calc .profile-dot{width:7px;height:7px;flex:0 0 7px;box-shadow:0 0 0 3px rgba(36,93,232,.08)}
.side-calc .profile-vol{font-size:10.5px;line-height:1.18}
.side-calc .calc-fields{grid-template-columns:1fr;gap:10px}
.side-calc select,.side-calc input[type=text],
.side-calc .calc-select-btn{height:40px;font-size:13px;border-radius:11px;padding:0 12px}
.side-calc .calc-select-panel{top:calc(100% + 5px);border-radius:12px}
.side-calc .calc-select-option{min-height:34px;font-size:13px;border-radius:8px;padding:7px 9px 7px 30px}
.side-calc .calc-select-option.actief::before{left:10px}
.side-calc .money-prefix{left:14px;font-size:13px}
.side-calc .money-input input[type=text]{padding-left:46px}
.side-calc .volume-title{font-size:12.5px;margin-bottom:7px}
.side-calc .calc-result{display:block;margin-top:22px;padding-top:22px}
.side-calc .rlabel{font-size:15px}
.side-calc .rval{font-size:42px;flex-wrap:wrap}
.side-calc .rsub{font-size:14px}
.side-calc .calc-actions{align-items:stretch;margin:13px 0 0;gap:12px}
.side-calc .calc-final{display:block;margin-top:13px;padding-top:13px}
.side-calc .calc-final .calc-actions{margin:0;align-items:stretch}
.side-calc .linkbtn{text-align:center;font-size:11.5px;font-weight:650;color:#7B879A}
.side-calc .cta{width:100%;min-height:42px;font-size:13px;border-radius:11px;padding:11px 16px}

.side-specs{display:grid;gap:12px;margin-top:12px}
.side-spec-clear{
  width:100%;border:1px solid var(--line);background:rgba(255,255,255,.86);color:#6A768A;
  min-height:40px;border-radius:14px;font-size:13px;font-weight:750;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.side-spec-clear:hover{border-color:#BFD0EE;color:var(--ink)}
.spec-card{
  border:1px solid var(--line);background:rgba(255,255,255,.9);border-radius:16px;
  padding:14px;box-shadow:0 18px 46px -38px rgba(16,27,51,.44);
}
.spec-title{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:14px;font-weight:850;color:var(--ink)}
.spec-info{
  width:18px;height:18px;border-radius:999px;border:1.5px solid #AFC3E8;color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;
}
.spec-list{display:grid;gap:9px}
.spec-list .check{align-items:flex-start;gap:10px}
.spec-list .box{width:18px;height:18px;border-radius:5px;margin-top:1px}
.spec-list .ctext{font-size:13px;font-weight:720;line-height:1.25;color:var(--ink)}
.spec-row-muted .ctext{color:#8A96AA}
.spec-indent{padding-left:24px}
.spec-pill{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-left:6px;border-radius:7px;
  border:1px solid #AFC3E8;background:#F2F6FF;color:#2B61D6;font-size:10.5px;font-weight:850;
  vertical-align:1px;white-space:nowrap;
}
.spec-pill.purple{border-color:#C8B7FF;background:#F6F2FF;color:#7252C8}
.spec-select-all{font-size:12.5px;color:#6A768A;margin:-2px 0 8px}
.spec-select-all button{
  border:0;background:transparent;color:var(--accent);font:inherit;font-weight:800;cursor:pointer;padding:0 1px;
}
.spec-select-all button:hover{text-decoration:underline}
.spec-exchange-toggle{
  width:100%;border:0;background:transparent;padding:0;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;
  font:inherit;font-size:14px;font-weight:850;
}
.spec-exchange-meta{display:flex;align-items:center;gap:7px;color:#7B879A;font-size:11px;font-weight:700;white-space:nowrap}
.spec-exchange-chevron{font-size:14px;transition:transform .15s ease}
.spec-exchange-toggle[aria-expanded="true"] .spec-exchange-chevron{transform:rotate(180deg)}
#specExchangePanel{margin-top:12px}
.spec-search{display:block;margin-bottom:9px}
.spec-search input{
  width:100%;height:38px;border:1px solid var(--line);border-radius:10px;background:#F8FAFD;
  color:var(--ink);font:inherit;font-size:12.5px;padding:0 11px;outline:none;
}
.spec-search input:focus{border-color:#8EADF0;box-shadow:0 0 0 3px rgba(36,93,232,.08)}
.spec-exchange-list{max-height:250px;overflow:auto;padding-right:3px;overscroll-behavior:contain}
.spec-search-empty{margin:8px 0 0;color:#7B879A;font-size:12px}

/* checkbox */
.check{display:flex;gap:9px;align-items:center;cursor:pointer;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.box{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);
  background:var(--card);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:all .12s;
}
.check input:checked + .box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .box::after{
  content:'';width:10px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.check input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px}
.check .ctext{font-size:13.5px;font-weight:600}

/* exchange-logo's in de resultaten */
.logo-lockup img,
.logo-lockup .brand-logo,
.logo-lockup .site-logo{
  display:block!important;width:auto!important;height:auto!important;
  max-width:172px!important;max-height:36px!important;object-fit:contain!important;
}
.brand-wordmark{
  display:block;font-family:'Archivo',sans-serif;font-weight:850;font-size:21px;
  letter-spacing:-.01em;line-height:1.08;color:var(--ink);
}
.logo-lockup{display:flex;align-items:flex-end;gap:8px;min-width:0;max-width:172px}
.logo-lockup.has-suffix img,
.logo-lockup.has-suffix .brand-logo,
.logo-lockup.has-suffix .site-logo{max-width:132px!important}
/* Het Backpack-logo is een lockup: de rugzak is hoger dan de letters, dus bij
   dezelfde maximumhoogte oogt het woord kleiner dan bij coinbase of kraken.
   Daarom mag Backpack iets ruimer: de letters komen dan op gelijke hoogte. */
.logo-lockup.brand-backpack{max-width:214px}
.logo-lockup.brand-backpack img,
.logo-lockup.brand-backpack .brand-logo,
.logo-lockup.brand-backpack .site-logo{max-width:214px!important;max-height:48px!important}
.logo-lockup.brand-okx{max-width:184px}
.logo-lockup.brand-okx img,
.logo-lockup.brand-okx .brand-logo,
.logo-lockup.brand-okx .site-logo{max-width:184px!important;max-height:42px!important}
.logo-lockup.brand-kraken img,
.logo-lockup.brand-kraken .brand-logo,
.logo-lockup.brand-kraken .site-logo{max-width:150px!important;max-height:30px!important}
.logo-lockup.brand-kraken-pro.has-suffix img,
.logo-lockup.brand-kraken-pro.has-suffix .brand-logo,
.logo-lockup.brand-kraken-pro.has-suffix .site-logo{max-width:132px!important;max-height:28px!important}
.logo-lockup.brand-coinbase img,
.logo-lockup.brand-coinbase .brand-logo,
.logo-lockup.brand-coinbase .site-logo{max-width:172px!important;max-height:36px!important}
.logo-suffix{
  font-family:'Inter',sans-serif;font-size:15px;font-weight:800;color:#5E6B84;
  line-height:1;transform:translateY(-2px);
}

/* ---------- locatie, filters & sorteren ---------- */
.results-layout{
  display:grid;grid-template-columns:318px minmax(0,1180px);
  gap:28px;align-items:start;max-width:1526px;margin:0 auto;
  overflow-anchor:auto;
}
.results-main{min-width:0;width:100%;max-width:1180px;justify-self:stretch;scroll-margin-top:132px;overflow-anchor:auto}
.filtercard{
  background:rgba(255,255,255,.92);border:1px solid rgba(218,226,238,.95);border-radius:var(--radius);
  margin:22px 0 16px;box-shadow:var(--shadow-soft);
}
.mobile-filter-strip{display:none}
.fbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 18px}
.fbar + .fbar{border-top:1px solid var(--line)}
.f-label{font-weight:700;font-size:13.5px}
.saved-filter{display:block}
.selbox{
  display:inline-flex;align-items:center;gap:9px;
  border:1.5px solid #DDE5F0;border-radius:12px;background:#FBFCFF;
  padding:0 8px 0 14px;height:46px;color:var(--ink);transition:border-color .12s, box-shadow .12s, background .12s;
}
.selbox:hover{border-color:#BCC7DB;background:#fff}
.selbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(36,93,232,.10)}
.selbox svg{flex-shrink:0}
.selbox select{
  border:none;background:transparent;height:auto;width:auto;
  padding:6px 4px;font-size:13.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;
}
.selbox select:focus{outline:none}

/* uitklapfilter (vergunningen) */
.ddwrap{position:relative}
.ddbtn{cursor:pointer;font-size:13.5px;font-weight:600;font-family:'Inter',sans-serif;padding:0 13px}
.filtercard .fbar > .ddwrap{flex:0 0 auto}
.filter-ddbtn{min-width:0;width:max-content;justify-content:flex-start}
.filter-ddbtn .chev{margin-left:auto}
.filter-ddbtn span{white-space:nowrap}
#regionBtn{min-width:220px}
#resultMarketBtn{min-width:230px}
#regionPanel,#resultMarketPanel{width:100%;min-width:100%}
.filter-panel{min-width:220px;padding:8px}
.saved-filter .ddbtn{min-width:168px;justify-content:flex-start}
.saved-filter .ddbtn .chev{margin-left:auto}
#permPanel,#prodPanel{min-width:250px}
.ddbtn .chev{transition:transform .15s;color:var(--muted)}
.ddbtn[aria-expanded="true"]{background:var(--accent-soft);border-color:#B7CDF7;color:var(--accent)}
.ddbtn[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--accent)}
.ddbtn.actief{border-color:#B7CDF7;color:var(--accent)}
.ddbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ddpanel{
  position:absolute;top:calc(100% + 8px);left:0;z-index:40;
  background:var(--card);border:1px solid #DDE5F0;border-radius:14px;
  box-shadow:0 26px 60px -28px rgba(16,27,51,.42);
  padding:18px 20px 14px;min-width:270px;
}
.ddtitle{font-weight:700;font-size:14.5px;margin-bottom:12px}
.ddrow{padding:8px 0;width:100%}
.ddrow .ddname{font-size:14px;font-weight:500}
.ddrow .ddcount{margin-left:auto;color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:13px}
.ddclear{
  margin-top:10px;border:none;background:none;padding:4px 0;
  color:var(--accent);font-weight:600;font-size:14px;cursor:pointer;
}
.ddclear:hover{text-decoration:underline}
.ddclear:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.sortbtn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  color:var(--accent);font-weight:700;font-size:14.5px;
  border:none;background:var(--accent-soft);padding:9px 12px;border-radius:12px;
}
.sortbtn:hover{background:#E3ECFF}
.sortbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sortpanel{left:auto;right:0;min-width:238px;padding:8px}
.sortopt{
  display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  position:relative;padding:10px 14px 10px 34px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--ink);
}
.sortopt:hover{background:var(--accent-soft)}
.sortopt.actief{color:var(--accent);font-weight:600}
.sortopt::before{content:''}
.sortopt.singleopt.actief::before,
.sortopt.sortchoice.actief::before{content:'✓';position:absolute;left:12px;font-weight:700;color:var(--accent)}
.sortopt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.f-spacer{margin-left:auto}

/* ---------- resultaten ---------- */
.table-card{
  background:transparent;border:0;border-radius:0;box-shadow:none;position:relative;
  width:100%;max-width:1180px;
}
.table-scroll{overflow:visible;padding:0 0 2px}
table{width:100%;max-width:1180px;border-collapse:separate;border-spacing:0;min-width:0;table-layout:fixed}
tbody{display:grid;gap:14px}
tbody tr.mainrow{
  display:grid;grid-template-columns:minmax(300px,1fr) 170px 240px minmax(260px,.95fr);
  align-items:center;column-gap:18px;
}
tbody tr.mainrow > td{min-width:0}
thead{display:none}
thead tr{padding:0 32px}
th{
  font-size:12px;font-weight:750;color:#6B778F;text-align:left;padding:0 0 8px;
  border-bottom:0;background:transparent;white-space:nowrap;letter-spacing:.02em;text-transform:uppercase;
}
th .thsub{display:block;font-size:11px;font-weight:500;color:#93A0B8}
th.num,td.num{text-align:right}
thead th:nth-child(2){text-align:left}
td{padding:24px 0;border-bottom:0;vertical-align:middle;font-size:14px}
tbody tr.mainrow{
  height:138px;background:#fff;border:1px solid rgba(218,226,238,.95);border-radius:18px;
  box-shadow:0 16px 42px -32px rgba(16,27,51,.42);transition:border-color .14s,box-shadow .14s,transform .14s,background .14s;
  position:relative;
}
tbody tr.mainrow:hover{border-color:#C9D5E7;box-shadow:0 22px 54px -34px rgba(16,27,51,.5);transform:translateY(-1px)}
tbody tr.dimmed{opacity:.5}
tbody tr.no-price{
  background:#F9FBFE;border-color:#E5EAF3;box-shadow:none;color:#77839A;
}
tbody tr.no-price .exchange-main,
tbody tr.no-price .result-fees,
tbody tr.no-price .result-meta{opacity:.68}
tbody tr.no-price:hover{border-color:#DDE5F0;box-shadow:0 12px 32px -30px rgba(16,27,51,.28);transform:none}
tbody tr.winner{background:linear-gradient(90deg,#F2FCF7 0,#fff 64%);border-color:#48C47A;box-shadow:0 18px 48px -34px rgba(31,157,85,.62)}
.result-exchange{padding-left:32px;align-self:stretch;display:flex;align-items:center;min-width:0}
.result-meta,.result-fees,.result-cost{padding-left:10px;padding-right:10px;min-width:0}
.result-fees,.result-fees.num{text-align:left}
.result-cost,.result-cost.num{
  text-align:right;padding-right:32px;justify-self:end;width:100%;min-width:0;
  display:flex;flex-direction:column;align-items:flex-end;
}
.xrow{display:flex;gap:16px;align-items:center;width:100%}
.xrow .rank{
  min-width:44px;font-family:'Inter',system-ui,sans-serif;font-size:32px;font-weight:850;
  color:var(--ink);line-height:1;
}
tr.winner .xrow .rank{color:var(--ok)}
.exchange-main{min-width:0;display:flex;flex-direction:column;justify-content:center}
.exchange-action{display:block;margin-top:8px}
.result-products{margin-top:6px;color:#5E6B84;font-weight:600;font-size:13px}
.fee-stack{display:grid;gap:7px;justify-items:start}
.fee-stack .mono{font-size:14px}
.badge{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  padding:4px 9px;border-radius:999px;letter-spacing:.04em;white-space:nowrap;margin-right:6px;
}
.b-micar{color:#1A4FBC;background:var(--accent-soft);border:1px solid #C4D6F9}
.b-mifid{color:#8A6508;background:var(--gold-soft);border:1px solid #EAD8A0}
.b-none{color:var(--bad);background:#FBEBE9;border:1px solid #F0C9C4}
.b-spread{color:#B42318;background:#FFF1F0;border:1px solid #FDA29B}
.meta-warning{margin-top:8px}
.mono{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;white-space:nowrap}
.sub{color:var(--muted);font-size:11px;font-weight:400;white-space:normal}
.na{color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.no-price-label{
  display:inline-flex;align-items:center;justify-content:flex-end;
  color:#7E8AA0;font-size:14px;font-weight:750;text-align:right;line-height:1.3;
}
.cost-line{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;flex-wrap:nowrap;width:100%;min-width:0;white-space:nowrap}
.cost{font-family:'Inter',system-ui,sans-serif;font-weight:900;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.per-month{font-size:15px;font-weight:750;color:#5E6B84;white-space:nowrap;flex:0 0 auto}
.cost.best{color:var(--ok)}
.cost.neg{color:var(--ok)}
.cost-info{position:relative;display:inline-flex;align-items:center;margin-left:2px;flex:0 0 auto}
.cost-info-btn{
  width:18px;height:18px;border-radius:999px;border:1px solid #BFD0F7;background:#fff;color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;line-height:1;
  padding:0;cursor:help;box-shadow:0 6px 18px -14px rgba(37,99,235,.55);
}
.cost-info-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.breakdown-popover{display:none}
.floating-breakdown-popover{
  position:fixed;z-index:10000;width:min(316px,calc(100vw - 24px));max-height:calc(100vh - 24px);
  overflow:auto;padding:12px 13px;border:1px solid #D9E2EF;border-radius:12px;background:#fff;
  box-shadow:0 24px 54px -24px rgba(16,27,51,.45);text-align:left;color:var(--ink);
}
.floating-breakdown-popover[hidden]{display:none}
.floating-breakdown-popover::before{
  content:'';position:absolute;right:14px;top:-6px;width:10px;height:10px;background:#fff;
  border-left:1px solid #D9E2EF;border-top:1px solid #D9E2EF;transform:rotate(45deg);
}
.floating-breakdown-popover.is-above::before{top:auto;bottom:-6px;transform:rotate(225deg)}
.floating-breakdown-popover.is-sheet{
  left:12px!important;right:12px!important;top:auto!important;bottom:12px!important;
  width:auto;max-height:min(70vh,480px);border-radius:16px;padding:16px;
}
.floating-breakdown-popover.is-sheet::before{display:none}
.break-title{font-size:12px;font-weight:850;margin-bottom:8px}
.break-row{display:flex;justify-content:space-between;gap:14px;font-size:12px;line-height:1.35;color:#647088;padding:4px 0}
.break-row strong{color:var(--ink);font-weight:800;text-align:right;white-space:nowrap}
.break-row.good strong{color:var(--ok)}
.break-row.net{border-top:1px solid var(--line);margin-top:6px;padding-top:9px;color:var(--ink);font-weight:800}
.break-row.net strong{font-size:13px}
.winner-ribbon{
  position:absolute;top:0;left:24px;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:7px;
  color:var(--ok);background:#EAF8F1;border:1px solid #BCE3CC;border-radius:999px;
  padding:5px 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:750;
  letter-spacing:.08em;line-height:1;box-shadow:0 10px 24px -18px rgba(31,157,85,.65);
}
.winner-ribbon::before{content:'';width:7px;height:7px;border-radius:999px;background:var(--ok)}
.avgdiff{display:block;margin-top:6px;font-size:14px;font-weight:850;white-space:nowrap;text-align:right}
.avgdiff.good{color:var(--ok)}
.avgdiff.bad{color:var(--bad)}
.avgdiff.neutral{color:var(--muted)}
.year-saving{
  display:block;margin-top:5px;max-width:none;font-size:12.5px;font-weight:650;
  color:#6B778F;white-space:normal;text-align:right;line-height:1.3;
}
.year-saving strong{color:var(--ok);font-weight:850}
.year-saving.bad strong{color:var(--bad)}
.detbtn{
  min-width:0;height:auto;padding:0;border:0;background:transparent;
  cursor:pointer;color:#9AA3B4;display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  font-weight:650;font-size:13.5px;transition:color .12s;
}
.detbtn:hover{color:var(--accent)}
.detbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.detbtn svg{display:none}
tr.open .detbtn svg{transform:rotate(90deg)}
tr.detail{display:table-row}
tr.detail > td{
  background:#FAFBFD;border:1px solid rgba(218,226,238,.95);border-top:0;border-radius:0 0 16px 16px;
  padding:18px 24px 22px 96px;
}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 26px;max-width:1000px}
.dlabel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.dval{font-size:13px;line-height:1.5}
.footnote{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted);padding:16px 4px 0;
}
.footnote a{font-weight:600;text-decoration:none}
.footnote a:hover{text-decoration:underline}
.empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:14px}

/* ---------- footer ---------- */
footer{
  background:#FFFFFF;border-top:1px solid var(--line);
  margin-top:44px;padding:34px 0 52px;font-size:12.5px;color:var(--muted);
}
footer p{max-width:96ch;margin-bottom:10px;line-height:1.65}
footer strong{color:var(--ink)}

@media(max-width:1440px){
  .wrap{max-width:1320px;padding:0 24px}
  .hero-grid{grid-template-columns:minmax(420px,560px) minmax(292px,318px);gap:40px;max-width:1320px}
  .results-layout{display:block;max-width:1320px}
  .side-calc-wrap{display:none}
  table{min-width:0;max-width:none}
  thead tr, tbody tr.mainrow{grid-template-columns:minmax(300px,1fr) 170px 240px minmax(260px,.95fr)}
}
@media(max-width:1280px){
  .wrap{max-width:1220px;padding:0 18px}
  .hero{padding-top:48px}
  .hero-grid{grid-template-columns:minmax(400px,540px) minmax(292px,318px);gap:28px;max-width:1220px}
  h1{font-size:clamp(38px,4vw,54px)}
  .lede{font-size:17px}
  .calc{padding:28px 28px 30px}
  .profile-picker{gap:10px}
  .profile-btn{padding:12px 12px}
  .calc-fields{gap:14px}
  #calculator .market-first,#calculator .volume-fields{max-width:none}
  table{min-width:0;max-width:none}
  thead tr, tbody tr.mainrow{grid-template-columns:minmax(250px,1fr) 150px 215px minmax(230px,.9fr)}
  thead tr{padding:0 22px}
  td{padding:22px 0}
  tbody tr.mainrow{height:136px}
  .result-exchange{padding-left:22px}
  .result-meta,.result-fees{padding-left:8px;padding-right:8px}
  .result-cost{padding-left:8px;padding-right:22px;width:100%}
  .xrow{gap:14px}
  .xrow .rank{min-width:40px;font-size:30px}
  .brand-logo{max-width:164px;max-height:34px}
  .logo-lockup.brand-backpack,
  .logo-lockup.brand-backpack img,
  .logo-lockup.brand-backpack .brand-logo{max-width:180px!important;max-height:40px!important}
  .brand-wordmark{font-size:20px}
  .logo-lockup{max-width:164px}
  .logo-lockup.has-suffix .brand-logo{max-width:126px}
  .logo-suffix{font-size:14px}
  .cost{font-size:24px}
  .per-month{font-size:13px}
  .avgdiff{font-size:13px}
  .year-saving{font-size:12px;margin-top:4px}
  .detbtn{font-size:13.5px;padding:0}
}
@media(max-width:1120px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(292px,318px);
    gap:24px;
    max-width:1040px;
  }
  .hero-copy{max-width:none;text-align:left;margin:0}
  .lede{margin:0}
  .trust-row{margin-left:0;margin-right:0}
  .calc{max-width:none;margin:0}
  #calculator{justify-self:end;max-width:318px}
  table{min-width:0;border-spacing:0}
  tbody{gap:12px}
  thead{display:none}
  tbody tr.mainrow{grid-template-columns:1.4fr 1fr;height:auto;min-height:0;padding:24px;gap:18px 24px}
  td{padding:0}
  .result-exchange,.result-fees,.result-cost,.result-meta{padding:0;text-align:left}
  .result-exchange{grid-column:1 / 2}
  .exchange-main{padding-bottom:0}
  .exchange-action{position:static;margin-top:12px}
  .result-cost{grid-column:2 / 3;grid-row:1 / 2;text-align:right;justify-self:end;width:min(100%,300px);align-items:flex-end}
  .result-fees{grid-column:1 / 2}
  .result-meta{grid-column:2 / 3}
  tr.detail > td{padding:18px 22px 22px}
}
@media(max-width:1020px){
  .nav-grid{grid-template-columns:auto auto;justify-content:space-between}
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(286px,318px);
    gap:18px;
    max-width:960px;
  }
  .hero-copy{max-width:none;text-align:left;margin:0}
  .lede{margin:0}
  .trust-row{margin-left:0;margin-right:0}
  .calc-fields{grid-template-columns:1fr 1fr}
  #calculator .market-first,#calculator .volume-fields{grid-template-columns:1fr}
  .profile-picker{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
  .mobile-menu-btn{display:inline-flex}
  .mobile-nav-panel:not([hidden]){display:block}
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{max-width:760px;text-align:center;margin:0 auto}
  .lede{margin:0 auto}
  .trust-row{margin-left:auto;margin-right:auto}
  #calculator{justify-self:center;max-width:318px}
}
@media(max-width:640px){
  .wrap{padding-left:14px;padding-right:14px}
  .nav-grid{gap:10px}
  .brand{min-width:0}
  .site-logo{width:156px;max-width:42vw}
  .nav-actions{gap:8px}
  .langbtn{width:54px}
  .mobile-menu-btn{width:38px}
  .currencybtn{width:54px;gap:5px}
  .currencybtn svg{display:none}
  .currency-code{display:inline}
  .hero{padding-top:30px}
  .hero-copy{text-align:left}
  .lede{margin:0}
  .trust-row{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .calc{padding:24px 20px 26px}
  .hero-grid,.results-layout,.results-main,.filtercard,.table-card,.table-scroll,
  #calculator,.calc,.card,.profile-picker,.calc-fields,.field,tbody tr.mainrow{min-width:0;max-width:100%}
  #calculator{width:100%;max-width:318px}
  .calc-head{align-items:flex-start;flex-direction:column;gap:8px}
  .how{text-align:left}
  .profile-picker{grid-template-columns:1fr 1fr}
  .calc-fields{grid-template-columns:1fr}
  #calculator .market-first,#calculator .volume-fields{grid-template-columns:1fr;max-width:none}
  .money-prefix{left:18px}
  .money-input input[type=text]{padding-left:62px}
  .settingsbar .aanpassen{margin-left:0}
  table{min-width:0;border-spacing:0}
  tbody{gap:12px}
  thead{display:none}
  tbody tr.mainrow{grid-template-columns:1fr;min-height:0;padding:18px 18px 20px;gap:14px}
  td{padding:0}
  .result-exchange,.result-meta,.result-fees,.result-cost{padding:0;text-align:left}
  .exchange-main{padding-bottom:0}
  .exchange-action{position:static;margin-top:12px}
  .result-cost{width:100%;align-items:flex-start}
  .cost-line{justify-content:flex-start}
  .avgdiff{text-align:left}
  .year-saving{text-align:left;white-space:normal}
  .filtercard{margin:18px 0 12px;background:transparent;border:0;box-shadow:none}
  .mobile-filter-strip{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:0 0 2px;scrollbar-width:none}
  .mobile-filter-strip::-webkit-scrollbar,.mobile-filter-chips::-webkit-scrollbar{display:none}
  .mobile-filter-toggle{height:44px;display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;border:0;border-radius:12px;background:var(--ink);color:#fff;padding:0 12px;font-weight:850;font-size:15px}
  .mobile-filter-toggle svg{flex:0 0 auto}
  .mobile-filter-count{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:#fff;color:#222;font-weight:850;font-size:13px}
  .mobile-filter-chips{display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;flex:1}
  .mobile-filter-chip{height:44px;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;border:1px solid #E0E7F2;border-radius:999px;background:#F2F5FA;color:#62708A;padding:0 12px;font-weight:800;font-size:14.5px;white-space:nowrap}
  .mobile-filter-chip.is-locked{padding-right:14px;color:#7A869C}
  .mobile-filter-chip button{width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;padding:0;margin:0;color:#64748B;font-size:21px;line-height:1;cursor:pointer}
  .mobile-filter-chip button:hover{background:#E5EAF3}
  .filtercard:not(.filters-open) .fbar{display:none}
  .filtercard.filters-open .fbar{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:12px;padding:14px;background:#fff;border:1px solid rgba(218,226,238,.95);border-radius:18px;box-shadow:var(--shadow-soft)}
  .filtercard.filters-open .saved-filter{display:block}
  .filtercard.filters-open .f-label{font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:#66738A}
  .filtercard .ddwrap,.filtercard .filter-ddbtn{width:100%;min-width:0}
  .filtercard .filter-panel{position:static;margin-top:8px;width:100%;min-width:0;box-shadow:none}
  .filtercard .sortbtn,
  .filtercard .sortpanel{display:none!important}
  .winner-ribbon{left:18px}
  .fee-stack{justify-items:start}
  .xrow{gap:12px}
  .xrow .rank{min-width:34px;font-size:28px}
  .site-logo{width:178px}
  .brand-logo{max-width:150px;max-height:32px}
  .logo-lockup.brand-backpack,
  .logo-lockup.brand-backpack img,
  .logo-lockup.brand-backpack .brand-logo{max-width:166px!important;max-height:37px!important}
  .brand-wordmark{font-size:19px}
  .logo-lockup{max-width:150px}
  .logo-lockup.has-suffix .brand-logo{max-width:116px}
  .logo-suffix{font-size:13px}
  .cost{font-size:24px}
  .detbtn{width:100%;min-width:0}
  tr.detail > td{padding-left:18px}
}
@media(max-width:360px){
  .profile-picker{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* fixes v1.3 */
.tablewrap{overflow-x:auto;margin:18px 0}
table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:#F4F8FF;font-weight:800;white-space:nowrap}
tbody tr:nth-child(even){background:#FAFCFF}
.table-card table{width:100%;max-width:1180px;border-collapse:separate;border-spacing:0;min-width:0;table-layout:fixed;background:transparent}
.table-card th,
.table-card td{border:0;background:transparent}
.table-card tbody tr:nth-child(even){background:#fff}
.table-card tbody tr.winner:nth-child(even){background:linear-gradient(90deg,#F2FCF7 0,#fff 64%)}
.table-card tbody tr.no-price:nth-child(even){background:#F9FBFE}
p.faq{margin:0 0 16px}
p.faq strong{display:block;margin-bottom:2px}
.seealso{border-top:1px solid var(--line);margin-top:30px;padding-top:18px}
.seealso ul{margin:8px 0 0 22px}

/* Resultaatkaarten blijven één rustige balk; content-tabellen mogen hier geen celranden maken. */
.table-card table,
.table-card tbody,
.table-card th,
.table-card td{
  border:0!important;
  outline:0!important;
}
.table-card tr{outline:0!important}
.table-card table{
  border-collapse:separate!important;
  border-spacing:0!important;
  background:transparent!important;
}
.table-card tbody tr.mainrow > td,
.table-card .result-exchange,
.table-card .result-fees,
.table-card .result-meta,
.table-card .result-cost{
  border:0!important;
  background:transparent!important;
  outline:0!important;
}
.table-card tbody tr.mainrow{
  border:1px solid rgba(218,226,238,.95)!important;
}
.table-card tbody tr.winner{
  border-color:#48C47A!important;
}
.table-card tbody tr.no-price{
  border-color:#E5EAF3!important;
}
ol{margin:0 0 18px 22px;color:#34405A}
ol li{margin:7px 0}
/* unified information mega menu */
.mega-panel.info-mega{
  width:300px!important;
  max-height:min(80vh,660px)!important;
  overflow-y:auto!important;
  grid-template-columns:1fr!important;
  gap:4px 0!important;
  padding:14px 16px!important;
}
.nav-item:hover .mega-panel.info-mega,
.nav-item:focus-within .mega-panel.info-mega{
  display:grid!important;
}
.info-mega .mega-kicker{
  grid-column:1/-1!important;
  padding:0!important;
  margin:0 0 2px!important;
  color:var(--muted)!important;
  font-weight:900!important;
  font-size:12px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.info-mega .mega-col{
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
}
.info-mega .mega-section{
  color:var(--ink)!important;
  font-weight:900!important;
  font-size:15px!important;
  letter-spacing:-.015em!important;
  text-transform:none!important;
  border:0!important;
  padding:0!important;
  margin:0 0 10px!important;
}
.info-mega a{
  padding:7px 0!important;
  color:var(--accent)!important;
  font-weight:750!important;
  border-radius:0!important;
}
.info-mega a:hover{
  background:transparent!important;
  color:var(--accent)!important;
  text-decoration:underline!important;
}
/* 2-sectie mega-menu's (Reviews, Stocks): sectiekop over volle breedte,
   items in een raster eronder — vult het brede paneel i.p.v. lege rechterhelft */
.mega-panel.info-mega:has(> .mega-col:nth-of-type(2):last-of-type) > .mega-col{
  grid-column:1 / -1!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:2px 0!important;
  align-content:start!important;
}
.mega-panel.info-mega:has(> .mega-col:nth-of-type(2):last-of-type) > .mega-col > .mega-section{
  grid-column:1 / -1!important;
}
@media(max-width:1020px){
  .mega-panel.info-mega{display:none!important}
}
/* end unified information mega menu */


/* unified header dropdown consistency v2 */
.nav-item .mega-panel{
  position:fixed!important;
  top:64px!important;
  left:50%!important;
  right:auto!important;
  transform:translate(-50%,8px)!important;
  width:min(1120px,calc(100vw - 96px))!important;
  min-width:0!important;
  max-width:none!important;
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:0 0 16px 16px!important;
  box-shadow:0 26px 62px -34px rgba(16,27,51,.45)!important;
  padding:26px 32px!important;
  z-index:120!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px 34px!important;
  align-items:start!important;
  transition:opacity .14s ease, transform .14s ease!important;
  max-height:calc(100vh - 84px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
.nav-item:hover .mega-panel,
.nav-item:focus-within .mega-panel{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate(-50%,0)!important;
  display:grid!important;
}
.nav-item:first-child .mega-panel,
.nav-item:last-child .mega-panel,
.nav-item:first-child:hover .mega-panel,
.nav-item:first-child:focus-within .mega-panel,
.nav-item:last-child:hover .mega-panel,
.nav-item:last-child:focus-within .mega-panel{
  left:50%!important;
  right:auto!important;
  transform:translate(-50%,0)!important;
}
.nav-item .mega-panel .mega-kicker{
  grid-column:1/-1!important;
  display:block!important;
  margin:0 0 8px!important;
  padding:0!important;
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.nav-item .mega-panel .mega-col{display:flex!important;flex-direction:column!important;gap:2px!important}
.nav-item .mega-panel .mega-section{
  display:block!important;
  margin:0 0 8px!important;
  padding:0!important;
  border:0!important;
  color:var(--ink)!important;
  font-size:15px!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  text-transform:none!important;
}
.nav-item .mega-panel a{
  display:block!important;
  padding:7px 0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--accent)!important;
  font-size:14px!important;
  font-weight:750!important;
  line-height:1.35!important;
  text-decoration:none!important;
  white-space:normal!important;
}
.nav-item .mega-panel a:hover,
.nav-item .mega-panel a:focus-visible{
  color:#1D4ED8!important;
  text-decoration:underline!important;
  outline:none!important;
}
@media(max-width:1020px){
  .nav-item .mega-panel{display:none!important}
}
/* end unified header dropdown consistency v2 */


/* nav-cta v1.4 */
.nav-cta{display:inline-flex;align-items:center;height:42px;border-radius:11px;background:var(--accent);color:#fff;padding:0 16px;font-weight:850;font-size:13px;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:#1D4ED8;text-decoration:none;color:#fff}
@media(max-width:900px){}

/* mobile result-card hardening: no desktop columns may bleed into iPhone cards */
@media(max-width:640px){
  .table-card tbody tr.mainrow{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:
      "exchange"
      "cost"
      "fees"
      "meta"!important;
    height:auto!important;
    min-height:0!important;
    padding:22px 18px 20px!important;
    gap:14px!important;
    overflow:visible!important;
  }
  .table-card .result-exchange,
  .table-card .result-cost,
  .table-card .result-fees,
  .table-card .result-meta{
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    justify-self:stretch!important;
    padding:0!important;
    text-align:left!important;
    border:0!important;
    background:transparent!important;
  }
  .table-card .result-exchange{grid-area:exchange!important}
  .table-card .result-cost{
    grid-area:cost!important;
    align-items:flex-start!important;
    margin-top:2px!important;
  }
  .table-card .result-fees{grid-area:fees!important}
  .table-card .result-meta{grid-area:meta!important}
  .table-card .xrow{
    align-items:flex-start!important;
    gap:14px!important;
  }
  .table-card .xrow .rank{
    min-width:34px!important;
    width:34px!important;
    flex:0 0 34px!important;
    font-size:30px!important;
    padding-top:8px!important;
  }
  .table-card .exchange-main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .table-card .logo-lockup{
    width:auto!important;
    max-width:min(210px,calc(100vw - 112px))!important;
  }
  .table-card .brand-logo{
    max-width:min(210px,calc(100vw - 112px))!important;
    max-height:46px!important;
    object-fit:contain!important;
  }
  .table-card .brand-backpack .brand-logo,
  .table-card .brand-okx .brand-logo,
  .table-card .brand-bitvavo .brand-logo,
  .table-card .brand-bybit-eu .brand-logo,
  .table-card .brand-finst .brand-logo{
    max-height:38px!important;
  }
  .table-card .cost-line{
    justify-content:flex-start!important;
    align-items:baseline!important;
    gap:6px!important;
  }
  .table-card .cost{
    font-size:28px!important;
    line-height:1.05!important;
  }
  .table-card .per-month{
    font-size:15px!important;
  }
  .table-card .cost-info{
    margin-left:4px!important;
  }
  .table-card .avgdiff,
  .table-card .year-saving{
    text-align:left!important;
    white-space:normal!important;
  }
  .table-card .fee-stack{
    justify-items:start!important;
  }
  .table-card .mono{
    font-size:15px!important;
  }
  .table-card .result-products{
    font-size:14px!important;
    line-height:1.35!important;
  }
  .table-card .winner-ribbon{
    left:18px!important;
    top:0!important;
  }
  .table-card .detbtn{
    width:auto!important;
  }
  .receipt-share,
  .fee-receipt,
  .share-receipt{
    display:none!important;
  }
}

/* ---------- result cards + filter bar final polish ---------- */
.results-count{
  max-width:1180px;margin:0 0 10px;color:#647088;font-size:14px;font-weight:800;
}
.filtercard .fbar{gap:14px}
.filtercard .fbar > .ddwrap{flex:0 0 auto;width:auto!important;min-width:0!important}
.filtercard .filter-ddbtn{
  width:auto!important;min-width:0!important;max-width:100%;
  padding:0 16px!important;gap:12px!important;
}
#regionBtn{min-width:180px!important}
#resultMarketBtn{min-width:230px!important}
#regionPanel,
#resultMarketPanel{
  width:max-content!important;min-width:100%!important;left:0!important;right:auto!important;
  top:calc(100% + 8px)!important;bottom:auto!important;
}
.sortopt.singleopt::before{
  content:''!important;width:0!important;margin:0!important;
}
.sortopt.singleopt[aria-selected="true"]::before{
  content:'✓'!important;position:absolute!important;left:12px!important;width:auto!important;
  margin:0!important;color:var(--accent);font-weight:900;
}
.receipt-share,
.fee-receipt,
.share-receipt,
[data-share-receipt],
#feeReceipt,
#shareReceipt,
.receipt-modal{
  display:none!important;
}
.table-card{max-width:1180px}
.table-scroll{overflow:visible!important}
#tbl{
  width:100%;max-width:1180px;border-collapse:separate!important;border-spacing:0 14px!important;
  table-layout:auto!important;background:transparent!important;
}
#tbl thead{display:none!important}
#tbl tbody{
  display:grid!important;gap:14px!important;width:100%;
}
#tbl tr.mainrow.result-card-v2{
  display:block!important;position:relative;height:auto!important;min-height:0!important;
  background:#fff!important;border:1px solid rgba(218,226,238,.95)!important;border-radius:18px!important;
  box-shadow:0 10px 26px rgba(15,23,42,.05)!important;overflow:visible!important;
  transition:border-color .14s,box-shadow .14s,transform .14s,background .14s!important;
}
#tbl tr.mainrow.result-card-v2:hover{
  border-color:#C9D5E7!important;box-shadow:0 14px 34px rgba(15,23,42,.07)!important;
  transform:translateY(-1px)!important;
}
#tbl tr.mainrow.result-card-v2.winner{
  background:linear-gradient(90deg,rgba(236,255,245,.86),#fff 44%)!important;
  border-color:#43C979!important;
}
#tbl tr.mainrow.result-card-v2.no-price{
  background:#F9FBFE!important;opacity:.72;
}
#tbl tr.mainrow.result-card-v2 > td.result-card-cell{
  display:block!important;width:100%!important;padding:0!important;border:0!important;background:transparent!important;
}
.result-top-v2{
  display:grid!important;grid-template-columns:minmax(340px,1.05fr) minmax(190px,.55fr) minmax(310px,.72fr);
  gap:28px;align-items:center;padding:30px 34px 26px;
}
.result-brand-v2{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:22px;align-items:center;min-width:0;
}
.result-brand-v2 .rank{
  font-size:33px;line-height:1;font-weight:950;color:var(--ink);
}
.winner .result-brand-v2 .rank{color:#159552}
.result-logo-wrap{display:block;min-width:0}
.result-logo-wrap .brand-logo{
  width:auto;height:auto;max-width:260px;max-height:50px;object-fit:contain;
}
.result-subtitle{
  display:block;margin-top:8px;color:#536177;font-size:15px;line-height:1.35;font-weight:820;
}
.result-badges-v2{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;
}
.result-badges-v2:empty{display:none}
.result-badges-v2 .badge,
.result-badges-v2 .tag,
.result-badges-v2 .pill{margin:0}
.result-detail-link{margin-top:7px}
.result-fees-v2{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
}
.fee-label-v2{
  font-size:12px;color:#647088;font-weight:760;
}
.result-fees-v2 .mono{
  font-size:17px;font-weight:880;color:var(--ink);
}
.result-price-v2{
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:10px;min-width:0;
}
.result-price-v2 .cost-line{
  justify-content:flex-end!important;white-space:nowrap;
}
.result-price-v2 .cost{font-size:30px}
.result-price-v2 .no-price-label{font-size:16px}
.exchange-cta{
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  min-width:190px;height:44px;padding:0 22px!important;border-radius:14px;border:0!important;
  background:var(--accent)!important;color:#fff!important;font-size:15px;font-weight:900;
  box-shadow:0 12px 24px rgba(37,99,235,.22);
}
.exchange-cta:hover{background:#1E55D8!important;color:#fff!important}

.score-item{display:inline-flex;gap:9px;align-items:center;color:#647088}
.score-item strong{color:var(--ink)}
.score-shield,
.trust-item{color:#159552}
@media(max-width:760px){
  .results-main{padding:0 14px;overflow:hidden}
  .results-count{display:none}
  .filtercard .sortbtn,
  .filtercard .sortpanel,
  .sortbtn,
  .sortpanel{display:none!important}
  .filtercard.filters-open .fbar{display:flex}
  #tbl{border-spacing:0 18px!important}
  #tbl tbody{gap:18px!important}
  #tbl tr.mainrow.result-card-v2{
    display:block!important;border-radius:24px!important;overflow:hidden!important;
  }
  #tbl tr.mainrow.result-card-v2 > td.result-card-cell{display:block!important}
  .result-top-v2{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;
    gap:18px!important;padding:30px 22px 26px!important;
  }
  .result-brand-v2{
    grid-template-columns:42px minmax(0,1fr)!important;gap:16px!important;width:100%;align-items:start!important;
  }
  .result-brand-v2 .rank{font-size:32px!important;margin-top:8px}
  .result-logo-wrap .brand-logo{max-width:230px!important;max-height:48px!important}
  .result-subtitle{font-size:15px}
  .result-price-v2{
    order:2;align-items:flex-start!important;text-align:left!important;width:100%;
  }
  .result-price-v2 .cost-line{justify-content:flex-start!important}
  .result-price-v2 .cost{font-size:34px!important}
  .result-fees-v2{order:3}
  .result-badges-v2{order:4}
  
  .exchange-cta{display:none!important}
}

/* ---------- final QA hardening: clean cards, mobile and dropdowns ---------- */
#tbl,
#tbl tbody,
#tbl tr,
#tbl td{
  border-left:0!important;
  border-right:0!important;
}
#tbl tr.mainrow.result-card-v2 > td,
#tbl tr.mainrow.result-card-v2 .result-top-v2,
#tbl tr.mainrow.result-card-v2 .result-fees-v2,
#tbl tr.mainrow.result-card-v2 .result-price-v2{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#tbl tr.mainrow.result-card-v2{
  margin:0!important;
}
.result-price-v2{
  min-width:290px;
}
.result-price-v2 .cost-line{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  white-space:nowrap!important;
}
.result-price-v2 .cost-info{
  flex:0 0 auto;
}
.result-price-v2 .year-saving{
  white-space:nowrap;
}
.result-detail-link{
  color:#9AA7BA!important;
  font-weight:850!important;
}
.winner-ribbon{
  font-size:12px!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
#regionPanel,
#resultMarketPanel{
  top:calc(100% + 8px)!important;
  bottom:auto!important;
  transform:none!important;
}
@media(max-width:760px){
  html,
  body{
    overflow-x:clip!important;
  }
  .filtercard .sortwrap,
  .filtercard .sortbtn,
  .filtercard .sortpanel,
  .sortwrap,
  .sortbtn,
  .sortpanel{
    display:none!important;
  }
  .results-main,
  .results-col,
  .table-card,
  .table-scroll,
  #tbl,
  #tbl tbody{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  #tbl tbody{
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
  }
  #tbl tr.mainrow.result-card-v2{
    width:100%!important;
    max-width:100%!important;
    border-radius:24px!important;
    overflow:hidden!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-top-v2{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    padding:28px 22px 26px!important;
  }
  .result-brand-v2{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:14px!important;
    align-items:start!important;
    width:100%!important;
  }
  .result-logo-wrap .brand-logo{
    max-width:min(245px,100%)!important;
    max-height:54px!important;
  }
  .result-subtitle{
    font-size:15px!important;
  }
  .result-price-v2{
    order:2!important;
    align-items:flex-start!important;
    text-align:left!important;
    width:100%!important;
    min-width:0!important;
  }
  .result-price-v2 .cost-line{
    justify-content:flex-start!important;
    white-space:normal!important;
    flex-wrap:wrap!important;
  }
  .result-price-v2 .cost{
    font-size:clamp(32px,9vw,40px)!important;
  }
  .result-price-v2 .year-saving{
    white-space:normal!important;
  }
  .result-fees-v2{
    order:3!important;
  }
  
}

.updated-stamp{display:block;margin:-8px 0 18px;color:#748199;font-size:14px;font-weight:800;letter-spacing:0}
.hero .updated-stamp{margin-top:-6px;margin-bottom:18px}

/* ---------- final responsive filter/result pass ---------- */
.filtercard .fbar{
  align-items:center!important;
  gap:16px!important;
  flex-wrap:nowrap!important;
}
.filtercard .fbar > .ddwrap{
  width:auto!important;
  flex:0 0 auto!important;
}
.filtercard .filter-ddbtn{
  width:auto!important;
  min-width:0!important;
  height:52px!important;
  padding:0 18px!important;
  border-radius:14px!important;
}
#regionBtn{min-width:220px!important}
#resultMarketBtn{min-width:260px!important}
#regionPanel,
#resultMarketPanel{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  bottom:auto!important;
  left:0!important;
  right:auto!important;
  transform:none!important;
  width:max-content!important;
  min-width:100%!important;
  max-width:min(360px, calc(100vw - 32px))!important;
}
.receipt-share,
.fee-receipt,
.share-receipt,
[data-share-receipt],
#feeReceipt,
#shareReceipt,
.receipt-modal{
  display:none!important;
}
#tbl tr.mainrow.result-card-v2 > td,
#tbl tr.mainrow.result-card-v2 .result-top-v2,
#tbl tr.mainrow.result-card-v2 .result-fees-v2,
#tbl tr.mainrow.result-card-v2 .result-products-v2,
#tbl tr.mainrow.result-card-v2 .result-price-v2{
  outline:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#tbl tr.mainrow.result-card-v2{
  margin:0 0 14px!important;
}
#tbl tr.mainrow.result-card-v2 .result-top-v2{
  display:grid!important;
  grid-template-columns:minmax(350px,1.3fr) minmax(190px,.65fr) minmax(230px,.85fr) minmax(260px,.9fr)!important;
  align-items:center!important;
  gap:26px!important;
  padding:34px 34px 28px!important;
}
.result-brand-v2{
  min-width:0!important;
}
.result-price-v2{
  justify-self:end!important;
  align-items:flex-end!important;
  text-align:right!important;
  min-width:260px!important;
}
.result-price-v2 .cost-line{
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
}
.exchange-cta{
  display:inline-flex!important;
  min-height:46px!important;
  padding:0 24px!important;
  border-radius:16px!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(180deg,#2F6DFF,#245DE8)!important;
  color:#fff!important;
  font-weight:900!important;
  box-shadow:0 14px 28px -18px rgba(36,93,232,.75)!important;
}

@media(max-width:1180px){
  #tbl tr.mainrow.result-card-v2 .result-top-v2{
    grid-template-columns:minmax(300px,1.2fr) minmax(170px,.6fr) minmax(210px,.8fr) minmax(250px,.9fr)!important;
    gap:18px!important;
    padding-inline:26px!important;
  }
}
@media(max-width:760px){
  html,
  body{
    overflow-x:clip!important;
  }
  .filtercard{
    padding:0!important;
    margin:18px 0 14px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .mobile-filter-strip{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    overflow-x:auto!important;
    padding:0 2px 4px!important;
    scrollbar-width:none;
  }
  .mobile-filter-strip::-webkit-scrollbar{display:none}
  .mobile-filter-toggle{
    display:inline-flex!important;
    height:44px!important;
    min-width:max-content!important;
    border-radius:10px!important;
    background:#242424!important;
    color:#fff!important;
    border:0!important;
  }
  .mobile-filter-chip{
    display:inline-flex!important;
    height:44px!important;
    min-width:max-content!important;
    border-radius:999px!important;
    background:#F1F3F5!important;
    border:1px solid #E2E6EC!important;
    color:#5D687A!important;
  }
  .filtercard:not(.filters-open) .fbar{
    display:none!important;
  }
  .filtercard.filters-open .fbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:10px!important;
    padding:12px!important;
    background:#fff!important;
    border:1px solid #DDE5F0!important;
    border-radius:16px!important;
  }
  .filtercard .sortwrap,
  .filtercard .sortbtn,
  .filtercard .sortpanel,
  .sortwrap,
  .sortbtn,
  .sortpanel{
    display:none!important;
  }
  .filtercard .ddwrap,
  .filtercard .filter-ddbtn{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #regionPanel,
  #resultMarketPanel{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    bottom:auto!important;
    left:0!important;
    right:auto!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    z-index:90!important;
  }
  #tbl tr.mainrow.result-card-v2{
    border-radius:24px!important;
    overflow:hidden!important;
    margin-bottom:18px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-top-v2{
    display:grid!important;
    grid-template-columns:54px minmax(0,1fr)!important;
    gap:16px 14px!important;
    align-items:start!important;
    padding:26px 18px!important;
  }
  .result-brand-v2{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:54px minmax(0,1fr)!important;
    gap:14px!important;
    align-items:start!important;
    width:100%!important;
  }
  .result-brand-v2 .rank{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    font-size:33px!important;
    margin:8px 0 0!important;
  }
  .result-logo-wrap{
    grid-column:2!important;
    min-width:0!important;
  }
  .result-logo-wrap .brand-logo{
    max-width:min(230px,68vw)!important;
    max-height:48px!important;
  }
  .result-detail-link{
    grid-column:2!important;
  }
  .result-price-v2{
    grid-column:1 / -1!important;
    justify-self:start!important;
    align-items:flex-start!important;
    text-align:left!important;
    width:100%!important;
    min-width:0!important;
  }
  .result-price-v2 .cost-line{
    justify-content:flex-start!important;
    white-space:normal!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  .result-price-v2 .cost{
    font-size:clamp(32px,9vw,40px)!important;
    line-height:1.05!important;
  }
  .result-price-v2 .year-saving{
    white-space:normal!important;
  }
  .result-fees-v2,
  .result-products-v2,
  .result-badges-v2{
    grid-column:1 / -1!important;
    align-items:flex-start!important;
  }
  
  .exchange-cta{
    display:none!important;
  }
}

/* ---------- definitive results/filter polish ---------- */
.receipt-share,
.fee-receipt,
.share-receipt,
[data-share-receipt],
#feeReceipt,
#shareReceipt,
.receipt-modal,
.exchange-cta.receipt-share{
  display:none!important;
}

.results-wrap,
.results-shell,
.table-card{
  max-width:100%!important;
  overflow:visible!important;
}

#tbl,
#tbl tbody{
  display:block!important;
  width:100%!important;
}

#tbl thead{
  display:none!important;
}

#tbl tbody{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
}

#tbl tr.mainrow.result-card-v2{
  display:block!important;
  width:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

#tbl tr.mainrow.result-card-v2 > .result-card-cell{
  display:block!important;
  width:100%!important;
  padding:0!important;
  border:1px solid #DCE6F3!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 18px 40px -34px rgba(15,23,42,.48)!important;
  overflow:hidden!important;
}

#tbl tr.mainrow.result-card-v2.winner > .result-card-cell{
  border-color:#31C477!important;
  background:linear-gradient(90deg,#F2FFF8 0%,#FFFFFF 48%,#FFFFFF 100%)!important;
}

#tbl tr.mainrow.result-card-v2.no-price > .result-card-cell{
  background:#F8FAFD!important;
  opacity:.76!important;
}

#tbl tr.mainrow.result-card-v2 .result-top-v2{
  display:grid!important;
  grid-template-columns:minmax(420px,1.28fr) minmax(190px,.58fr) minmax(290px,.88fr)!important;
  gap:34px!important;
  align-items:center!important;
  width:100%!important;
  min-height:154px!important;
  padding:30px 34px 24px!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#tbl tr.mainrow.result-card-v2 .result-brand-v2{
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr)!important;
  gap:22px!important;
  align-items:center!important;
  min-width:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#tbl tr.mainrow.result-card-v2 .rank{
  margin:0!important;
  color:#101B33!important;
  font-size:34px!important;
  font-weight:950!important;
  line-height:1!important;
}

#tbl tr.mainrow.result-card-v2.winner .rank{
  color:#159A5D!important;
}

#tbl tr.mainrow.result-card-v2 .exchange-main{
  display:block!important;
  min-width:0!important;
}

#tbl tr.mainrow.result-card-v2 .result-logo-wrap{
  display:block!important;
  min-width:0!important;
}

#tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-logo{
  display:block!important;
  width:auto!important;
  max-width:270px!important;
  max-height:58px!important;
  object-fit:contain!important;
  object-position:left center!important;
}

#tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  max-width:100%!important;
}

#tbl tr.mainrow.result-card-v2 .result-subtitle{
  display:block!important;
  margin-top:8px!important;
  color:#5E6B84!important;
  font-size:16px!important;
  font-weight:850!important;
  line-height:1.35!important;
}

#tbl tr.mainrow.result-card-v2 .result-detail-link{
  display:inline-block!important;
  margin-top:8px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#A0AABC!important;
  box-shadow:none!important;
  font-size:15px!important;
  font-weight:850!important;
  line-height:1.3!important;
  text-align:left!important;
}

#tbl tr.mainrow.result-card-v2 .result-fees-v2,
#tbl tr.mainrow.result-card-v2 .result-products-v2,
#tbl tr.mainrow.result-card-v2 .result-price-v2,
#tbl tr.mainrow.result-card-v2 .result-badges-v2{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#tbl tr.mainrow.result-card-v2 .result-fees-v2{
  min-width:0!important;
}

#tbl tr.mainrow.result-card-v2 .fee-label-v2{
  display:block!important;
  margin-bottom:7px!important;
  color:#63708A!important;
  font-size:13px!important;
  font-weight:850!important;
}

#tbl tr.mainrow.result-card-v2 .result-fees-v2 .mono{
  color:#101B33!important;
  font-size:18px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}

#tbl tr.mainrow.result-card-v2 .result-badges-v2{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:10px!important;
}

#tbl tr.mainrow.result-card-v2 .result-price-v2{
  justify-self:end!important;
  align-items:flex-end!important;
  min-width:280px!important;
  text-align:right!important;
}

#tbl tr.mainrow.result-card-v2 .result-price-v2 .cost-line{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  white-space:nowrap!important;
}

#tbl tr.mainrow.result-card-v2 .result-price-v2 .cost{
  font-size:32px!important;
  font-weight:950!important;
  line-height:1!important;
}

#tbl tr.mainrow.result-card-v2 .result-price-v2 .per-month{
  color:#5E6B84!important;
  font-size:18px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

#tbl tr.mainrow.result-card-v2 .result-price-v2 .avgdiff{
  display:block!important;
  margin-top:10px!important;
  font-size:16px!important;
  font-weight:950!important;
}

#tbl tr.mainrow.result-card-v2 .result-price-v2 .year-saving{
  display:block!important;
  margin-top:8px!important;
  color:#159A5D!important;
  font-size:15px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

#tbl tr.mainrow.result-card-v2 .result-price-v2 .year-saving.bad{
  color:#D94135!important;
}

#tbl tr.mainrow.result-card-v2 .exchange-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:46px!important;
  margin-top:16px!important;
  padding:0 28px!important;
  border:0!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#2F6DFF,#245DE8)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:950!important;
  box-shadow:0 14px 28px -18px rgba(36,93,232,.78)!important;
}

#tbl tr.mainrow.result-card-v2 .winner-ribbon,
.winner-ribbon{
  top:-13px!important;
  left:22px!important;
  padding:7px 14px!important;
  border-radius:999px!important;
  color:#159A5D!important;
  background:#EAFBF1!important;
  border:1px solid #B8EACD!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  z-index:4!important;
}

#tbl tr.mainrow.result-card-v2 > .result-card-cell,
#tbl tr.mainrow.result-card-v2 .result-top-v2,
#tbl tr.mainrow.result-card-v2 .result-fees-v2,
#tbl tr.mainrow.result-card-v2 .result-products-v2,
#tbl tr.mainrow.result-card-v2 .result-price-v2{
  outline:0!important;
}

@media (min-width:761px) and (max-width:1240px){
  #tbl tr.mainrow.result-card-v2 .result-top-v2{
    grid-template-columns:minmax(320px,1.15fr) minmax(170px,.55fr) minmax(260px,.85fr)!important;
    gap:22px!important;
    padding-inline:26px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-logo{
    max-width:235px!important;
  }
}

/* ---------- final result-card cleanup ---------- */
#tbl{
  border-collapse:separate!important;
  border-spacing:0 16px!important;
}

#tbl tr.mainrow.result-card-v2{
  display:table-row!important;
  position:relative!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

#tbl tr.mainrow.result-card-v2 > td.result-card-cell{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}

#tbl tr.mainrow.result-card-v2 .result-top-v2{
  display:grid!important;
  grid-template-columns:minmax(360px,1.2fr) minmax(230px,.72fr) minmax(330px,.85fr)!important;
  align-items:center!important;
  gap:28px!important;
  min-height:178px!important;
  padding:30px 34px!important;
  border:1px solid #DDE6F2!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(15,31,64,.055)!important;
}

#tbl tr.mainrow.result-card-v2.winner .result-top-v2{
  border-color:#28C76F!important;
  background:linear-gradient(90deg,#F1FFF8 0%,#fff 48%)!important;
}

#tbl tr.mainrow.result-card-v2 .result-fees-v2,
#tbl tr.mainrow.result-card-v2 .result-products-v2,
#tbl tr.mainrow.result-card-v2 .result-price-v2,
#tbl tr.mainrow.result-card-v2 .result-badges-v2{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:0!important;
  min-height:0!important;
}

#tbl tr.mainrow.result-card-v2 .result-brand-v2{
  min-width:0!important;
}

#tbl tr.mainrow.result-card-v2 .exchange-main{
  min-width:0!important;
}

#tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-logo{
  max-width:270px!important;
  max-height:62px!important;
  object-fit:contain!important;
}

#tbl tr.mainrow.result-card-v2 .result-price-v2{
  justify-self:end!important;
  align-items:flex-end!important;
  text-align:right!important;
}

#tbl tr.mainrow.result-card-v2 .result-price-v2 .cost-line{
  justify-content:flex-end!important;
}

#tbl tr.mainrow.result-card-v2 .exchange-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:50px!important;
  padding:0 26px!important;
  border:0!important;
  border-radius:16px!important;
  color:#fff!important;
  background:#2563EB!important;
  font-weight:950!important;
  box-shadow:0 12px 24px rgba(37,99,235,.22)!important;
}

#tbl tr.mainrow.result-card-v2.no-price .result-top-v2{
  opacity:.58!important;
}

#tbl tr.mainrow.result-card-v2.no-price .exchange-cta{display:none!important}

@media (min-width:761px) and (max-width:1240px){
  #tbl tr.mainrow.result-card-v2 .result-top-v2{
    grid-template-columns:minmax(300px,1.08fr) minmax(190px,.62fr) minmax(285px,.86fr)!important;
    gap:20px!important;
    padding-inline:26px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-logo{
    max-width:235px!important;
  }
}

@media (max-width:760px){
  html,
  body{
    max-width:100%!important;
    overflow-x:clip!important;
  }

  .filtercard .sortwrap,
  .filtercard .sortbtn,
  .filtercard .sortpanel,
  .sortwrap,
  .sortbtn,
  .sortpanel,
  #sortBtn,
  #sortPanel{
    display:none!important;
  }

  .filtercard{
    padding:0!important;
    margin:18px 0 14px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  .mobile-filter-strip{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    max-width:100%!important;
    overflow-x:auto!important;
    padding:0 2px 4px!important;
    scrollbar-width:none!important;
  }

  .mobile-filter-strip::-webkit-scrollbar{
    display:none!important;
  }

  .mobile-filter-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:max-content!important;
    min-height:44px!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:10px!important;
    background:#242424!important;
    color:#fff!important;
    font-weight:950!important;
  }

  .mobile-filter-chip{
    display:inline-flex!important;
    align-items:center!important;
    min-width:max-content!important;
    min-height:44px!important;
    padding:0 14px!important;
    border:1px solid #E2E6EC!important;
    border-radius:999px!important;
    background:#F1F3F5!important;
    color:#5D687A!important;
    font-weight:850!important;
  }

  .filtercard:not(.filters-open) .fbar{
    display:none!important;
  }

  .filtercard.filters-open .fbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:10px!important;
    padding:12px!important;
    background:#fff!important;
    border:1px solid #DDE5F0!important;
    border-radius:16px!important;
  }

  .filtercard .fbar > .ddwrap,
  .filtercard .filter-ddbtn{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  #regionPanel,
  #resultMarketPanel{
    top:calc(100% + 8px)!important;
    bottom:auto!important;
    left:0!important;
    right:auto!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
  }

  #tbl tbody{
    gap:14px!important;
  }

  #tbl tr.mainrow.result-card-v2{
    border-radius:22px!important;
  }

  #tbl tr.mainrow.result-card-v2 > .result-card-cell{
    border-radius:22px!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-top-v2{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    min-height:0!important;
    padding:28px 22px 24px!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-brand-v2{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:14px!important;
    align-items:start!important;
    width:100%!important;
  }

  #tbl tr.mainrow.result-card-v2 .rank{
    font-size:34px!important;
    margin-top:8px!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-logo{
    max-width:min(245px,68vw)!important;
    max-height:58px!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-subtitle{
    font-size:16px!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-fees-v2,
  #tbl tr.mainrow.result-card-v2 .result-price-v2{
    justify-self:start!important;
    align-items:flex-start!important;
    min-width:0!important;
    width:100%!important;
    text-align:left!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-price-v2 .cost-line{
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    white-space:normal!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-price-v2 .cost{
    font-size:clamp(34px,10vw,42px)!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-price-v2 .year-saving{
    white-space:normal!important;
  }

  #tbl tr.mainrow.result-card-v2 .exchange-cta,
  #tbl tr.mainrow.result-card-v2 

  #tbl tr.mainrow.result-card-v2 .winner-ribbon,
  .winner-ribbon{
    left:20px!important;
  }
}


/* filterbar v3 — pill-layout ALLEEN mobiel; desktop = oude versie */
.fgroup{display:contents}
@media(max-width:760px){
  .results-count{font-size:17px;font-weight:850;color:var(--ink);margin:26px 0 14px;display:block}
  .fgroup{display:flex;align-items:center;gap:4px;border:1.5px solid #E3E9F4;border-radius:16px;background:#fff;padding:0 6px 0 18px;height:58px;width:100%}
  .fgroup .f-label{color:#64708B;font-weight:750;font-size:15px;display:inline-flex;align-items:center}
  .fgroup .f-label::after{content:'';width:1px;height:22px;background:#E9EEF6;margin:0 10px 0 14px}
  .fgroup .selbox{border:0!important;background:transparent!important;height:54px;padding:0 10px 0 2px!important;font-weight:850;box-shadow:none!important;flex:1}
  .fbar .sortbtn{background:transparent;border:0;color:var(--ink);font-weight:850;font-size:15px;gap:10px;padding:10px 12px}
  .fbar .sortbtn > span:first-of-type{color:#64708B;font-weight:750}
  .fbar .sortbtn #sortValue{color:var(--ink);font-weight:900}
  .fbar .sortbtn::after{content:'';width:8px;height:8px;border-right:2.2px solid #64708B;border-bottom:2.2px solid #64708B;transform:rotate(45deg) translateY(-2px);flex:0 0 auto}
}
/* score v1.3 */
a.score-item{text-decoration:none;cursor:help}
a.score-item:hover{text-decoration:none}
.score-info{color:#9AA7BC;font-size:12px;margin-left:2px}

/* result-card v4 — pixel-perfect uitlijning */
#tbl tr.mainrow.result-card-v2 > td.result-card-cell{position:relative!important}
.winner-ribbon{top:0!important;left:28px!important;z-index:3}
.result-top-v2{
  grid-template-columns:56px minmax(0,1.1fr) minmax(190px,.55fr) minmax(300px,.78fr)!important;
  gap:0 32px!important;align-items:center!important;padding:30px 34px 26px!important;
}
.result-brand-v2{display:contents!important}
.result-brand-v2 .rank{
  font-size:30px!important;font-weight:950;line-height:1;align-self:center;justify-self:center;
}
.exchange-main{display:block;min-width:0}
.result-logo-wrap .brand-logo{max-height:44px!important;max-width:240px!important}
.result-subtitle{margin-top:10px!important;font-size:15px!important;line-height:1.45!important;font-weight:750!important}
.result-badges-v2{margin-top:12px!important;gap:8px!important}
.result-detail-link{margin-top:9px!important}
.result-fees-v2{align-self:center!important;gap:9px!important}
.fee-label-v2{font-size:13.5px!important;font-weight:750!important;color:#64708B!important;letter-spacing:.01em}
.result-fees-v2 .mono{font-size:18px!important;font-weight:850!important;letter-spacing:.02em}
.result-price-v2{align-self:center!important;gap:12px!important}
.result-price-v2 .cost{font-size:31px!important;letter-spacing:-.01em}
.avgdiff{margin-top:2px!important}
.year-saving{margin-top:2px!important;font-size:14px!important;font-weight:750!important}
.exchange-cta{height:48px!important;min-width:210px!important;border-radius:14px!important;margin-top:4px}



#tbl tr.mainrow.result-card-v2.winner{
  background:linear-gradient(180deg,#F2FCF7 0%,#FDFFFE 55%,#fff 100%)!important;
}
@media(max-width:900px){
  .result-top-v2{grid-template-columns:40px minmax(0,1fr)!important;gap:18px 18px!important;padding:22px 20px 18px!important}
  .result-fees-v2{grid-column:2;flex-direction:row!important;align-items:baseline!important;gap:10px!important;margin-top:14px}
  .result-price-v2{grid-column:1 / -1;align-items:flex-start!important;text-align:left!important;margin-top:16px}
  .result-price-v2 .cost-line{justify-content:flex-start!important}
  .exchange-cta{width:100%}
  
}

/* result-card v5 — compacte hoogte (gaslicht-dichtheid) */
.result-card-v2 > .result-card-cell{min-height:184px}
.result-top-v2{padding:18px 28px 14px!important;gap:0 28px!important;
  grid-template-columns:44px minmax(0,1.1fr) minmax(180px,.55fr) minmax(280px,.78fr)!important}
.result-brand-v2 .rank{font-size:26px!important}
.result-logo-wrap .brand-logo{max-height:32px!important;max-width:190px!important}
.result-subtitle{margin-top:6px!important;font-size:14px!important;line-height:1.35!important}
.result-badges-v2{margin-top:8px!important;gap:6px!important}
.result-detail-link{margin-top:6px!important;font-size:13px!important}
.fee-label-v2{font-size:12.5px!important}
.result-fees-v2{gap:6px!important}
.result-fees-v2 .mono{font-size:16px!important}
.result-price-v2{gap:8px!important}
.result-price-v2 .cost{font-size:26px!important}
.year-saving{font-size:13.5px!important}
.exchange-cta{height:42px!important;min-width:190px!important;font-size:14.5px!important}


#tbl{border-spacing:0 12px!important}
#tbl tbody{gap:12px!important}
.winner-ribbon{padding:4px 11px!important;font-size:10.5px!important}
@media(max-width:900px){
  .result-card-v2 > .result-card-cell{min-height:0}
  .result-top-v2{grid-template-columns:34px minmax(0,1fr)!important;padding:16px 18px 12px!important}
  .result-price-v2{margin-top:12px!important}
  
}

/* spec-indent v2 */
.spec-indent{margin-left:28px}

/* perm-topbar-hide: vergunningen-filter alleen in sidebar (badges op kaarten tonen licenties al) */
.fbar .perm-topbar{display:none!important}

/* reg-filter-hide: vergunningenfilter verwijderd; pMicar staat vast aan, pMifid volgt de markt-switch automatisch */
.spec-card--reg{display:none!important}

/* topbar-filters-hide: Vergunningen + Producten uit de sticky balk; filteren via sidebar */
.ddwrap.saved-filter{display:none!important}



/* ===== result-bottom-v2 — ENIGE bron van waarheid (opgeschoond, alle oude stacking verwijderd) ===== */
.result-bottom-v2{
  display:flex;align-items:center;flex-wrap:wrap;gap:20px;
  margin:0;padding:11px 28px 13px;border-top:1px solid #ECF1F8;
  color:#159A5D;font-size:13.5px;font-weight:850;position:static;transform:none;
}
.result-bottom-v2 .score-item{display:inline-flex;gap:8px;align-items:center;color:#647088;font-size:13.5px}
.result-bottom-v2 .score-item strong{color:var(--ink);font-size:15px}
.result-bottom-v2 .score-shield,.result-bottom-v2 .trust-item{color:#159A5D}
.result-bottom-v2 .trust-item:not(.warn){color:#667085}
.result-bottom-v2 .trust-item .trust-check{color:#159A5D}
.fee-values-v2{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.fee-tier-v2{color:#667085;font-size:12px;font-weight:750;line-height:1.2}
@media(max-width:760px){
  /* compacte scoreregel op mobiel: score + 1 trust-item i.p.v. verbergen */
  .result-bottom-v2{
    display:flex;flex-wrap:nowrap;align-items:center;gap:12px;
    padding:9px 18px 10px;overflow:hidden;
  }
  .result-bottom-v2 .score-item{font-size:12.5px;flex:0 0 auto}
  .result-bottom-v2 .score-item strong{font-size:14px}
  .result-bottom-v2 .trust-item{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .result-bottom-v2 .trust-item ~ .trust-item{display:none}
  .score-pop{left:0;max-width:calc(100vw - 70px)}
}

/* ===== card-shell v6: wit kader om de HELE kaart (top + scoreregel), lint niet meer afgeknipt ===== */
#tbl tr.mainrow.result-card-v2{background:transparent!important}
#tbl tr.mainrow.result-card-v2.winner{background:transparent!important}

#tbl tr.mainrow.result-card-v2 > td.result-card-cell{
  display:block!important;width:100%!important;padding:0!important;
  border:1px solid #DDE6F2!important;border-radius:18px!important;
  background:#fff!important;box-shadow:0 10px 28px rgba(15,31,64,.055)!important;
  overflow:visible!important;position:relative!important;
}
#tbl tr.mainrow.result-card-v2.winner > td.result-card-cell{
  border-color:#28C76F!important;
  background:linear-gradient(90deg,#F1FFF8 0%,#fff 48%)!important;
}
#tbl tr.mainrow.result-card-v2.no-price > td.result-card-cell{background:#F8FAFD!important;opacity:1!important}

#tbl tr.mainrow.result-card-v2 .result-top-v2,
#tbl tr.mainrow.result-card-v2.winner .result-top-v2{
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
#tbl tr.mainrow.result-card-v2.no-price .result-top-v2{opacity:.58!important}


/* ===== card v7: gaslicht-hoogte — compacte desktopkaart ===== */
@media(min-width:901px){
#tbl tr.mainrow.result-card-v2 .result-top-v2{
  min-height:0!important;
  padding:14px 24px 11px!important;
  gap:0 24px!important;
}
#tbl tr.mainrow.result-card-v2 .result-brand-v2 .rank{font-size:21px!important}
#tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-logo{max-height:28px!important;max-width:160px!important}
#tbl tr.mainrow.result-card-v2 .result-subtitle{margin-top:4px!important;font-size:13px!important;line-height:1.3!important}
#tbl tr.mainrow.result-card-v2 .result-badges-v2{margin-top:6px!important;gap:5px!important}
#tbl tr.mainrow.result-card-v2 .result-badges-v2 .badge{font-size:11px!important;padding:2px 8px!important}
#tbl tr.mainrow.result-card-v2 .result-detail-link{margin-top:4px!important;font-size:12.5px!important}
#tbl tr.mainrow.result-card-v2 .fee-label-v2{font-size:12px!important}
#tbl tr.mainrow.result-card-v2 .result-fees-v2{gap:4px!important}
#tbl tr.mainrow.result-card-v2 .result-fees-v2 .mono{font-size:15px!important}
#tbl tr.mainrow.result-card-v2 .result-price-v2{gap:5px!important}
#tbl tr.mainrow.result-card-v2 .result-price-v2 .cost{font-size:23px!important}
#tbl tr.mainrow.result-card-v2 .per-month{font-size:13px!important}
#tbl tr.mainrow.result-card-v2 .avgdiff{margin-top:0!important;font-size:12.5px!important}
#tbl tr.mainrow.result-card-v2 .year-saving{margin-top:0!important;font-size:13px!important}
#tbl tr.mainrow.result-card-v2 .exchange-cta{
  height:38px!important;min-height:38px!important;min-width:170px!important;
  font-size:14px!important;border-radius:11px!important;margin-top:2px!important;padding:0 20px!important;
}
#tbl tr.mainrow.result-card-v2 .result-bottom-v2{padding:8px 24px 9px!important;gap:14px!important}
#tbl tr.mainrow.result-card-v2 .result-bottom-v2 .score-item{font-size:12.5px!important}
#tbl tr.mainrow.result-card-v2 .result-bottom-v2 .score-item strong{font-size:14px!important}
#tbl tr.mainrow.result-card-v2 .result-bottom-v2 .trust-item{font-size:12.5px!important}
#tbl{border-spacing:0 10px!important}
.winner-ribbon{padding:3px 10px!important;font-size:10px!important}
}


/* ===== score-popup (i-knopje op de scoreregel) ===== */
.score-item{position:relative}
.score-link{color:inherit;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.score-link:hover strong{text-decoration:underline}
button.score-info{
  width:15px;height:15px;border-radius:999px;border:1px solid #C4D2E4;background:#fff;color:#64708B;
  font-size:10px;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;margin-left:3px;font-family:Georgia,'Times New Roman',serif;font-style:italic;
}
button.score-info:hover,button.score-info[aria-expanded="true"]{background:#EEF4FB;color:#2563EB;border-color:#9DB6D8}
.score-pop{
  position:absolute;bottom:calc(100% + 10px);left:-8px;z-index:60;width:252px;
  background:#fff;border:1px solid #D7E2F0;border-radius:14px;
  box-shadow:0 16px 38px -12px rgba(15,23,42,.28);padding:13px 15px;display:block;text-align:left;
}
.score-pop[hidden]{display:none}
.score-pop::after{content:'';position:absolute;top:100%;left:22px;border:7px solid transparent;border-top-color:#fff}
.sp-title{display:block;font-size:13px;color:var(--ink);margin-bottom:8px}
.sp-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:#4A576D;font-weight:650;padding:2.5px 0}
.sp-row em{font-style:normal;color:#93A1B8;font-weight:600}
.sp-link{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:800;color:#2563EB;text-decoration:none}
.sp-link:hover{text-decoration:underline}

/* regio verplaatst naar calculator; sticky-bar versie verborgen */
.fbar .fgroup:has(#regionBtn){display:none!important}

/* Desktop: alleen de sorteerknop tonen, zonder een lege kaart eromheen. */
@media(min-width:761px){
  .filtercard{
    display:flex!important;
    justify-content:flex-end!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    margin:8px 0 4px!important;
    padding:0!important;
  }
  .filtercard .fbar{
    justify-content:flex-end!important;
    width:auto!important;
    min-height:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    padding:0!important;
  }
  .filtercard .f-spacer{display:none!important}
}

/* card-grid-fix (geverifieerd in browser 901-1440px):
   .result-brand-v2 rendert als display:grid, niet als display:contents. De kaart heeft dus
   3 grid-items (brand | fees | prijs), niet 4. Oudere regels gaven kolom 1 een breedte van
   40px (bedoeld als rangkolom), waardoor naam+logo tot 0px werden geperst en de fees
   eroverheen vielen. Hier: 3 kolommen, met rang + naam als eigen grid binnen de brandkolom. */
@media(min-width:901px){
#tbl tr.mainrow.result-card-v2 .result-top-v2{
  grid-template-columns:minmax(0,1.25fr) minmax(150px,.55fr) minmax(280px,.8fr)!important;
  gap:0 24px!important;align-items:center!important;
}
#tbl tr.mainrow.result-card-v2 .result-brand-v2{
  display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;
  gap:0 14px!important;align-items:center!important;min-width:0!important;
}
#tbl tr.mainrow.result-card-v2 .exchange-main{display:block!important;min-width:0!important}
#tbl tr.mainrow.result-card-v2 .result-fees-v2{min-width:0!important}
#tbl tr.mainrow.result-card-v2 .result-price-v2{min-width:0!important}
}
@media(min-width:901px) and (max-width:1240px){
#tbl tr.mainrow.result-card-v2 .result-top-v2{
  grid-template-columns:minmax(0,1.1fr) minmax(115px,.45fr) minmax(285px,.75fr)!important;
  gap:0 16px!important;padding-inline:20px!important;
}
#tbl tr.mainrow.result-card-v2 .exchange-cta{min-width:0!important;width:100%!important;padding:0 14px!important}
}
/* tablet 761-900px: oude 3-koloms regels lieten de inhoud 28-107px buiten de kaart
   lopen. Hier gestapeld, net als op telefoon. */
@media(min-width:761px) and (max-width:900px){
#tbl tr.mainrow.result-card-v2 .result-top-v2{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  gap:16px!important;padding:22px 22px 20px!important;align-items:start!important;
}
#tbl tr.mainrow.result-card-v2 .result-brand-v2{
  display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:0 14px!important;
  align-items:center!important;min-width:0!important;grid-column:1!important;
}
#tbl tr.mainrow.result-card-v2 .exchange-main{display:block!important;min-width:0!important}
#tbl tr.mainrow.result-card-v2 .result-fees-v2{
  grid-column:1!important;flex-direction:row!important;align-items:baseline!important;
  gap:10px!important;min-width:0!important;
}
#tbl tr.mainrow.result-card-v2 .result-price-v2{
  grid-column:1!important;align-items:flex-start!important;text-align:left!important;min-width:0!important;
}
#tbl tr.mainrow.result-card-v2 .exchange-cta{min-width:0!important;width:100%!important}
}
/* het exchange-logo (tot 245px) was breder dan de kaart op telefoons en werd afgeknipt */
@media(max-width:900px){
#tbl tr.mainrow.result-card-v2 .result-logo-wrap{min-width:0!important;max-width:100%!important;display:block!important}
#tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-logo{max-width:100%!important;height:auto!important}
}

/* score-schaal: "9,0" alleen zegt niets — toon de noemer */
.result-bottom-v2 .score-max{color:#8A97AC;font-weight:750;margin-left:-3px}
#tbl tr.mainrow.result-card-v2 .result-bottom-v2 .score-max{font-size:12.5px!important}

/* "Exchange details" was lichtgrijs en zonder onderstreping: zag eruit als uitgeschakelde
   tekst, terwijl het de belangrijkste secundaire actie op de kaart is. */
#tbl tr.mainrow.result-card-v2 .result-detail-link,
.result-detail-link{
  color:#2563EB!important;
  font-weight:800!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:2px!important;
  text-decoration-color:rgba(37,99,235,.35)!important;
  cursor:pointer!important;
}
#tbl tr.mainrow.result-card-v2 .result-detail-link:hover,
.result-detail-link:hover{
  color:#1D4ED8!important;
  text-decoration-color:currentColor!important;
}
#tbl tr.mainrow.result-card-v2 .result-detail-link:focus-visible,
.result-detail-link:focus-visible{
  outline:2px solid #2563EB!important;outline-offset:2px!important;border-radius:4px!important;
}

/* CTA is nu een uitgaande link naar de exchange (was een knop die alleen de detailrij opende) */
a.exchange-cta{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:8px!important;text-decoration:none!important;
}
a.exchange-cta:hover{text-decoration:none!important}
a.exchange-cta:focus-visible{outline:2px solid #1D4ED8!important;outline-offset:2px!important}

/* detailrij: doorklik naar de review en naar de officiele bron */
.dlinks{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  margin-top:16px;padding-top:14px;border-top:1px solid #ECF1F8;
}
.dlink{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:800;color:#2563EB;text-decoration:none;
}
.dlink:hover{text-decoration:underline;text-underline-offset:2px}
.dlink:focus-visible{outline:2px solid #2563EB;outline-offset:2px;border-radius:4px}
.dlink:not(.dlink-primary){color:#5B6880;font-weight:750}
.dlink:not(.dlink-primary):hover{color:var(--ink)}
@media(max-width:600px){ .dlinks{gap:8px 14px} .dlink{font-size:13px} }

/* ===== dropdown-panels (Markt/Regio/Sorteren): definitieve opgeruimde stijl ===== */
#resultMarketPanel,#regionPanel,#sortPanel{
  padding:6px!important;border:1px solid #DCE6F3!important;border-radius:14px!important;
  background:#fff!important;box-shadow:0 18px 44px -18px rgba(15,23,42,.25)!important;
  width:max-content!important;min-width:100%!important;max-width:min(340px,calc(100vw - 32px))!important;
  top:calc(100% + 8px)!important;bottom:auto!important;left:0!important;right:auto!important;transform:none!important;
}
#resultMarketPanel .sortopt,#regionPanel .sortopt,#sortPanel .sortopt{
  display:block!important;width:100%!important;min-width:0!important;
  padding:9px 16px 9px 38px!important;border-radius:9px!important;margin:0!important;
  font-size:14.5px!important;font-weight:650!important;line-height:1.35!important;color:var(--ink)!important;
  position:relative!important;white-space:nowrap!important;text-align:left!important;
}
#resultMarketPanel .sortopt::before,#regionPanel .sortopt::before,#sortPanel .sortopt::before{
  content:'\2713'!important;position:absolute!important;left:13px!important;top:50%!important;
  transform:translateY(-50%)!important;display:block!important;width:auto!important;margin:0!important;
  font-weight:900!important;font-size:13px!important;color:transparent!important;
}
#resultMarketPanel .sortopt[aria-selected="true"],#regionPanel .sortopt[aria-selected="true"],
#resultMarketPanel .sortopt.actief,#regionPanel .sortopt.actief,#sortPanel .sortopt.actief{
  color:var(--accent)!important;font-weight:800!important;
}
#resultMarketPanel .sortopt[aria-selected="true"]::before,#regionPanel .sortopt[aria-selected="true"]::before,
#resultMarketPanel .sortopt.actief::before,#regionPanel .sortopt.actief::before,#sortPanel .sortopt.actief::before{
  color:var(--accent)!important;
}
#resultMarketPanel .sortopt:hover,#regionPanel .sortopt:hover,#sortPanel .sortopt:hover{
  background:#EEF4FB!important;
}

.page-home main.wrap{display:none!important}
.page-home header.hero{min-height:auto;padding-bottom:70px}

/* Verfijnde homepage-hero v2 */
.homepage-mockup-v2 .page-home header.hero{
  min-height:auto;
  padding:52px 0 54px;
  justify-content:flex-start;
  background:
    linear-gradient(rgba(231,237,248,.72) 1px,transparent 1px),
    linear-gradient(90deg,rgba(231,237,248,.72) 1px,transparent 1px);
  background-size:72px 72px;
  background-position:center -1px;
}
.homepage-mockup-v2 .page-home header.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#F8FAFD 0%,rgba(248,250,253,.96) 42%,rgba(248,250,253,.74) 72%,rgba(248,250,253,.92) 100%);
}
.homepage-mockup-v2 .page-home header.hero::after{
  bottom:-180px;
  height:390px;
  opacity:.72;
}
.homepage-mockup-v2 .page-home .hero-grid{
  width:100%;
  max-width:1240px;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:92px;
  align-items:start;
}
.homepage-mockup-v2 .page-home .hero-copy{
  max-width:690px;
  padding-top:28px;
}
.homepage-mockup-v2 .page-home h1{
  max-width:680px;
  font-size:clamp(50px,4.25vw,68px);
  line-height:1.01;
  letter-spacing:-.042em;
  margin:0 0 24px;
}
.homepage-mockup-v2 .page-home .lede{
  max-width:570px;
  font-size:19px;
  line-height:1.55;
  color:#63708A;
}
.homepage-mockup-v2 .page-home .hero-tagline{
  display:none;
}
.homepage-mockup-v2 .page-home .trust-row{
  display:block;
  margin:22px 0 0;
}
.homepage-mockup-v2 .page-home .trust-item{
  display:none;
}
.homepage-mockup-v2 .page-home .hero-method-link{
  margin:0;
  font-size:14px;
}
.homepage-mockup-v2 .page-home #calculator{
  width:420px;
  max-width:none;
  justify-self:end;
  padding:26px 28px 24px;
  border-radius:20px;
  box-shadow:0 28px 70px -38px rgba(16,27,51,.36);
}
.homepage-mockup-v2 .page-home #calculator .calc-head{
  margin-bottom:18px;
}
.homepage-mockup-v2 .page-home #calculator .calc-head h2{
  font-size:24px;
}
.homepage-mockup-v2 .page-home #calculator .market-first{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:20px;
}
.homepage-mockup-v2 .page-home #calculator .market-first .field:nth-child(3){
  display:flex;
  grid-column:1 / -1;
}
.homepage-mockup-v2 .page-home #calculator .calc-select-btn{
  height:50px;
  padding:0 14px;
  font-size:14px;
}
.homepage-mockup-v2 .page-home #calculator #calcRegion{
  height:50px;
  padding:0 14px;
  font-size:14px;
}
.homepage-mockup-v2 .page-home #calculator .volume-title{
  font-size:14px;
  margin:0 0 10px;
}
.homepage-mockup-v2 .page-home #calculator .profile-picker{
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
}
.homepage-mockup-v2 .page-home #calculator .profile-btn,
.homepage-mockup-v2 .page-home #calculator .profile-btn[data-profile="retail"]{
  min-height:66px;
  padding:10px 12px;
  border-radius:12px;
}
.homepage-mockup-v2 .page-home #calculator .profile-name{
  font-size:14px;
}
.homepage-mockup-v2 .page-home #calculator .profile-vol{
  font-size:11.5px;
}
.homepage-mockup-v2 .page-home #calculator .volume-fields{
  margin-top:0;
}
.homepage-mockup-v2 .page-home #calculator input[type=text]{
  height:50px;
  font-size:15px;
}
.homepage-mockup-v2 .page-home #calculator .calc-actions{
  margin-top:16px;
}
/* Stond op display:none, zonder mediaquery. Daardoor waren de tokenvelden (BP, BNB,
   CRO), het saldoveld en de yield-schakelaar op de homepage op geen enkele
   schermbreedte te bereiken. De knop hoort er te staan, net als in de zijcalculator. */
.homepage-mockup-v2 .page-home #calculator #advToggle{
  align-self:center;
}
/* De twee schakelaars in dat paneel ("Fees betalen met BNB" en "Yield op collateral
   meerekenen") erfden de witte tekstkleur van de donkere hero, terwijl ze op de witte
   kaart staan. Wit op wit, dus onleesbaar. Viel niet op zolang het paneel niet te
   openen was. Zelfde kleur als in de zijcalculator. */
.homepage-mockup-v2 .page-home #calculator .ctext{
  color:#101b33;
}
.homepage-mockup-v2 .page-home #calculator .cta{
  width:100%;
}
.homepage-mockup-v2 .page-home + .trust-strip{
  border-top:1px solid rgba(207,218,234,.78);
}
@media(max-width:1020px){
  .homepage-mockup-v2 .page-home .hero-grid{
    grid-template-columns:minmax(0,1fr) 360px;
    gap:36px;
  }
  .homepage-mockup-v2 .page-home #calculator{width:360px}
}
@media(max-width:860px){
  .homepage-mockup-v2 .page-home header.hero{padding:38px 0 44px}
  .homepage-mockup-v2 .page-home .hero-grid{grid-template-columns:1fr}
  .homepage-mockup-v2 .page-home .hero-copy{padding-top:0}
  .homepage-mockup-v2 .page-home #calculator{width:100%;max-width:460px;justify-self:start}
}

/* pagina-specifiek (gescoped op body-class) */
.page-results header.hero{display:none!important}
.page-results main.wrap{margin-top:26px}

/* ===== score-chip (badge-systeem C) — 16 juli 2026, terugdraaipunt: TERUGDRAAIPUNT_voor_badges.tgz ===== */
.score-chip{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:3px 12px 3px 4px;border-radius:999px;border:1px solid}
.score-chip .chip-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;color:#fff;font-size:12.5px;font-weight:850}
.score-chip .chip-txt{display:flex;flex-direction:column;line-height:1.05;font-size:12px;font-weight:800}
.score-chip .chip-txt em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:1}
.score-chip:hover{filter:brightness(.97)}
.chip-green{background:#EAFBF1;border-color:#B8EACD;color:#085041}
.chip-green .chip-num{background:#0B7844}
.chip-blue{background:#EEF4FB;border-color:#C7D9F2;color:#0C447C}
.chip-blue .chip-num{background:#2563EB}
.chip-gray{background:#F2F5F9;border-color:#D8E0EA;color:#3F4A5C}
.chip-gray .chip-num{background:#64708B}
@media(max-width:760px){
  .score-chip{padding:2px 10px 2px 3px}
  .score-chip .chip-num{width:24px;height:24px;font-size:11.5px}
}

/* ===== home-top3: teaser op de homepage (terugdraaipunt: TERUGDRAAIPUNT_voor_top3.tgz) ===== */
.page-home .home-top3{display:block;padding:6px 20px 52px}
.home-top3[hidden]{display:none!important}
body:not(.page-home) .home-top3{display:none}
.ht3-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.ht3-head h2{font-size:19px;font-weight:900;color:var(--ink,#101828)}
.ht3-head span{font-size:12px;color:#93A1B8;font-weight:650}
.ht3-row{background:#fff;border:1px solid #DCE6F3;border-radius:14px;display:flex;align-items:center;gap:16px;padding:13px 20px;margin-bottom:9px;text-decoration:none;color:#101828}
.ht3-row:hover{border-color:#B9CBE4}
/* Eigen klasse, geen 'win': dat is elders de pil in vergelijktabellen
   (.win{display:inline-block;border-radius:999px;padding:4px 12px}). Die regel
   staat later in dit bestand en overschreef de flexrij, waardoor de nummer 1
   op de homepage als samengeperste pil werd getekend in plaats van als rij. */
.ht3-row.ht3-win{border:1.5px solid #28C76F;background:linear-gradient(90deg,#F2FFF8,#fff 45%)}
.ht3-rank{font-size:19px;font-weight:950;color:#64708B;width:18px}
.ht3-name{font-size:16.5px;font-weight:900;width:140px}
.ht3-fees{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:#64708B;margin-left:8px}
.ht3-price{margin-left:auto;text-align:right;font-size:19px;font-weight:950;white-space:nowrap}
.ht3-price small{font-size:11.5px;color:#64708B;font-weight:700}
.ht3-price.ok{color:#159A5D}
.ht3-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap;gap:8px}
.ht3-foot span{font-size:12px;color:#93A1B8}
.ht3-all{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #2563EB;color:#2563EB;font-size:14px;font-weight:850;padding:11px 20px;border-radius:12px;text-decoration:none}
.ht3-all:hover{background:#EEF4FB}
@media(max-width:700px){
  .ht3-name{width:auto;flex:1;min-width:0;font-size:15px}
  .ht3-fees{display:none}
  .ht3-row{gap:10px;padding:11px 14px}
  .ht3-price{font-size:16px}
}

/* Op een telefoon paste de naam niet meer naast de scorechip: "Backpack" werd
   afgekapt en de chip schoof eroverheen. De naam is hier het belangrijkste,
   dus onder 470px krimpt de chip tot alleen het cijfer. */
@media(max-width:470px){
  .ht3-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .score-chip .chip-txt{display:none}
  .score-chip{padding-inline:7px}
  .ht3-row{gap:9px;padding:11px 12px}
}

/* resultatenpagina: geen Bereken-knop in de navbar (calculator staat al in de zijbalk) */


/* ===== polish-laag app-pagina's (16 juli 2026) ===== */
::selection{background:#2563EB;color:#fff}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:88px}

/* n.n.b.-kaart: leesbaar i.p.v. spookachtig (audit #15) */
#tbl tr.mainrow.result-card-v2.no-price .result-top-v2{opacity:.74!important}
#tbl tr.mainrow.result-card-v2.no-price .result-detail-link{display:none!important}

/* mobiel: kop van de calculator blijft één regel met i rechts (audit #16) */
@media(max-width:760px){
  .calc-head{flex-wrap:nowrap!important}
  .calc-head h2{flex:1;min-width:0}
}

/* mobiel: leesvolgorde kaart = naam → fees → prijs/knop (audit #16) */
@media(max-width:760px){
  #tbl tr.mainrow.result-card-v2 .result-top-v2{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  #tbl tr.mainrow.result-card-v2 .result-brand-v2{order:1}
  #tbl tr.mainrow.result-card-v2 .result-fees-v2{order:2;margin-top:12px!important;flex-direction:row!important;align-items:baseline!important;gap:10px!important}
  #tbl tr.mainrow.result-card-v2 .result-price-v2{order:3;margin-top:12px!important;align-items:flex-start!important;text-align:left!important}
}

/* zachte overgangen op interactieve elementen */
.exchange-cta,.ht3-all,.score-chip,.nav-cta,.sortopt,.ht3-row{transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.exchange-cta:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(37,99,235,.28)!important}
.ht3-row:hover{transform:translateY(-1px)}

/* waarschuwingsregel op kaarten (verlies klantengeld) */
.result-bottom-v2 .trust-item.warn{color:#D64545}
@media(max-width:760px){
  .result-bottom-v2 .trust-item.warn{display:inline-flex!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}

/* ===== Header uniform met contentpagina's — QA 18 juli 2026 =====
   Zelfde menu-anker als content.css zodat het menu niet verspringt bij
   navigeren tussen dashboard- en contentpagina's. */
@media(min-width:1181px){
  .wrap.nav-grid{max-width:1320px!important;padding-left:24px!important;padding-right:24px!important;grid-template-columns:210px 1fr 320px!important}
  .wrap.nav-grid .nav-actions{justify-self:end}
  .wrap.nav-grid .navlinks{width:100%!important;min-width:0;display:flex!important;justify-content:center!important}
  .navlinks .nav-trigger{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
}

/* stabiele scrollbalk: header verschuift niet tussen korte en lange paginas */
html{overflow-y:scroll}

/* ===== Menu-omslagpunt gelijk aan contentpagina's (QA 18 juli, avond) =====
   Content wisselt naar hamburger onder 1181px; de app deed dat pas bij 1020px
   waardoor tussen 1020-1180px twee verschillende menus zichtbaar waren. */
@media(max-width:1180px){
  .wrap.nav-grid{padding-left:24px!important;padding-right:24px!important;grid-template-columns:auto 1fr!important}
  .wrap.nav-grid .nav-actions{justify-self:end}
  .navlinks{display:none!important}
  .mobile-menu-btn{display:inline-flex!important}
  .mobile-nav-panel:not([hidden]){display:block}
}
@media(max-width:900px){
  .nav-cta{display:none!important}
}

/* ===== Footer met kolommen (19 juli, wens Luc — 'zoals Gaslicht') ===== */
footer .wrap{max-width:1320px}
footer .footgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 44px;padding:38px 24px 28px;max-width:1320px;margin:0 auto}
footer .footcol strong{display:block;font-size:14px;color:var(--ink);margin-bottom:10px}
footer .footcol a{display:block;color:#53617A;font-size:13.5px;font-weight:600;padding:4px 0;text-decoration:none}
footer .footcol a:hover{color:#2563EB}
footer .footcol p{font-size:13px;color:#62708A;line-height:1.6;margin:6px 0 0}
footer .footbottom{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);padding:14px 24px;font-size:12.5px;color:#62708A;max-width:1320px;margin:0 auto}
@media(max-width:860px){footer .footgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){footer .footgrid{grid-template-columns:1fr}}

/* ===== Header polish: Stories + compactere acties (25 juli 2026) ===== */
@media(min-width:1321px){
  .wrap.nav-grid{
    max-width:1560px!important;
    grid-template-columns:210px minmax(0,1fr) auto!important;
    gap:20px!important;
  }
  /* De vaste breedtes per menu-item (92, 96, 82, 96, 90 px) waren op de Nederlandse
     labels afgestemd. Langere vertalingen liepen daardoor onder de knop rechts door:
     8 px overlap op 1440 px, 45 px op 1366 px. Elk item krijgt nu zijn eigen breedte. */
  .wrap.nav-grid .navlinks{gap:6px!important}
  .wrap.nav-grid .navlinks .nav-trigger{width:auto!important;padding-left:9px;padding-right:9px}
}
.nav-actions{gap:8px}
.nav-cta{
  height:38px;
  padding:0 13px;
  border-radius:10px;
  font-size:12.5px;
}
.langbtn,.currencybtn{height:38px;width:38px;border-radius:10px}
.langbtn{width:52px}
@media(max-width:1320px){
  .wrap.nav-grid{padding-left:24px!important;padding-right:24px!important;grid-template-columns:auto 1fr!important}
  .wrap.nav-grid .nav-actions{justify-self:end}
  .navlinks{display:none!important}
  .mobile-menu-btn{display:inline-flex!important}
  .mobile-nav-panel:not([hidden]){display:block}
}
/* disclaimerblok ingeklapt achter kopje (19 juli, wens Luc) */
.footdisc{max-width:1320px;margin:0 auto;padding:16px 24px 4px}
.footdisc summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#62708A}
.footdisc summary::-webkit-details-marker{display:none}
.footdisc summary::before{content:"+";font-size:16px;font-weight:700;color:#2563EB;line-height:1}
.footdisc[open] summary::before{content:"\2212"}
.footdisc summary:hover{color:#2563EB}
.footdisc .wrap{padding-top:10px}
.footdisc p{font-size:12.5px;line-height:1.6;color:#62708A;margin:0 0 10px}

footer .footsocial{display:inline-flex;align-items:center;gap:8px}
footer .footsocial a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;color:#101B33}
footer .footsocial a:hover{color:#2563EB;border-color:#A9C5FF}
footer .footsources{font-size:12px;color:#98A6BF}

.info-mega .mega-col + .mega-col{margin-top:14px!important}

/* P1 — result-card logo's op gelijke optische hoogte (breedte volgt) */
#tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-logo{
  height:28px!important;max-height:28px!important;
  width:auto!important;max-width:230px!important;
  object-fit:contain!important;object-position:left center!important;
}

/* ===== Footer v2 — dark premium (referentie op homepage; verzoek Luc 21 juli) ===== */
.ft2{background:linear-gradient(180deg,#0B1220 0,#080D18 100%);color:#C4CFE0;border-top:1px solid rgba(255,255,255,.06);margin-top:64px}
.ft2-inner{max-width:1320px;margin:0 auto;padding:0 40px}
.ft2-main{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:34px;padding:56px 0 42px}
.ft2-brand{max-width:290px}
.ft2-logo{height:26px;width:auto;filter:brightness(0) invert(1)}
.ft2-tag{font-size:13.5px;line-height:1.6;color:#8A98B0;margin:16px 0 20px}
.ft2-social{display:flex;gap:10px}
.ft2-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#C4CFE0;transition:.16s}
.ft2-social a:hover{border-color:#2563EB;color:#fff;background:rgba(37,99,235,.16)}
.ft2-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.ft2-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5D9DF6;margin-bottom:5px}
.ft2-col a{color:#AEBAD0;font-size:13.5px;text-decoration:none;transition:.14s}
.ft2-col a:hover{color:#fff}
.ft2-badges{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding:38px 0;border-top:1px solid rgba(255,255,255,.07);text-align:center}
.ft2-badge svg{color:#5D9DF6;margin-bottom:12px}
.ft2-badge strong{display:block;color:#EAF0FA;font-size:16px;font-weight:700;margin-bottom:6px}
.ft2-badge span{display:block;color:#8A98B0;font-size:12.5px;line-height:1.5;max-width:190px;margin:0 auto}
.ft2-disc{border-top:1px solid rgba(255,255,255,.07);padding:16px 0}
.ft2-disc summary{cursor:pointer;list-style:none;font-size:12.5px;font-weight:700;color:#9AA7BE;display:inline-flex;align-items:center;gap:8px}
.ft2-disc summary::-webkit-details-marker{display:none}
.ft2-disc summary::before{content:"+";color:#5D9DF6;font-weight:800;font-size:15px}
.ft2-disc[open] summary::before{content:"\2212"}
.ft2-disc p{font-size:12px;line-height:1.65;color:#77859C;margin:11px 0 0;max-width:none}
.ft2-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.07);padding:18px 0;font-size:12.5px;color:#77859C}
.ft2-bottom a{color:#AEBAD0;text-decoration:none}
.ft2-bottom a:hover{color:#fff}
@media(max-width:1080px){.ft2-main{grid-template-columns:1fr 1fr 1fr;gap:28px}.ft2-brand{grid-column:1/-1;max-width:none}.ft2-badges{grid-template-columns:repeat(2,1fr);gap:26px 16px}}
@media(max-width:640px){.ft2-main{grid-template-columns:1fr 1fr}.ft2-badges{grid-template-columns:1fr}.ft2-bottom{flex-direction:column;align-items:flex-start}.ft2-inner{padding:0 22px}}

/* ===== Homepage-hero: trust-strip + positionering (Luc 21 juli) ===== */
.hero-tagline{font-size:14.5px;font-weight:600;color:var(--muted);margin:-4px 0 0;max-width:44ch}
.hero-stats{display:flex;gap:28px;margin:24px 0 2px;flex-wrap:wrap}
.hero-stats>div{display:flex;flex-direction:column}
.hero-stats strong{font-family:'Archivo',sans-serif;font-size:24px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.hero-stats span{font-size:12px;color:var(--muted);margin-top:6px}
.hero-method-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;font-weight:700;color:#2563EB;text-decoration:none}
.hero-method-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ===== Trust-strip onder de hero (Luc 21 juli — Apple/Stripe-stijl, één rij) ===== */
.trust-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-strip .ts-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 0;padding:18px 24px}
.ts-item{font-size:13.5px;color:var(--muted);padding:6px 28px;white-space:nowrap;border-right:1px solid var(--line);line-height:1.3}
.ts-item:last-child{border-right:0}
.ts-item strong{color:var(--ink);font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.01em}
@media(max-width:760px){.ts-item{border-right:0;padding:6px 14px;font-size:13px}}

/* ===== Trust-strip v2 met icoontjes + gestapeld cijfer/label (mockup Luc) ===== */
.trust-strip .ts-inner{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;gap:14px 0;padding:18px 24px}
.trust-strip .ts-item{display:flex;align-items:center;gap:13px;padding:4px 22px;border-right:1px solid var(--line);flex:1 1 0;justify-content:center;min-width:150px;white-space:normal}
.trust-strip .ts-item:last-child{border-right:0}
.trust-strip .ts-item svg{color:#2563EB;flex:none}
.trust-strip .ts-txt{display:flex;flex-direction:column;line-height:1.18;text-align:left}
.trust-strip .ts-item strong{font-family:'Archivo',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.trust-strip .ts-item .ts-txt span{font-size:12.5px;color:var(--muted);margin-top:3px}
@media(max-width:820px){.trust-strip .ts-item{border-right:0;min-width:44%}}

/* ===== Homepage research-showcase (Luc — monument-kaarten onder de trust-strip) ===== */
.home-research{padding:30px 0 26px}
.hr-head{margin-bottom:24px;position:relative}
.hr-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2563EB;margin-bottom:10px}
.hr-head h2{font-family:'Archivo',sans-serif;font-size:clamp(26px,3vw,38px);line-height:1.08;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.hr-head p{font-size:16px;line-height:1.6;color:var(--muted);max-width:60ch;margin:0}
.hr-all{position:absolute;right:0;bottom:2px;font-size:14px;font-weight:700;color:#2563EB;text-decoration:none;white-space:nowrap}
.hr-all:hover{text-decoration:underline;text-underline-offset:3px}
.hr-row{display:flex;gap:18px;overflow-x:auto;padding:4px 0 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hr-row::-webkit-scrollbar{height:6px}
.hr-row::-webkit-scrollbar-thumb{background:#DCE6F3;border-radius:99px}
.hr-card{flex:0 0 calc((100% - 54px)/4);scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(16,27,51,.04),0 10px 26px -18px rgba(16,27,51,.16);transition:transform .22s,box-shadow .22s,border-color .18s}
.hr-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -22px rgba(16,27,51,.32);border-color:#B9CBE4}
.hr-img{position:relative;display:block;aspect-ratio:16/11;background-size:cover;background-position:center;background-color:#EEF2F8}
.hr-badge{position:absolute;top:12px;left:12px;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:7px;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.b-sec{background:#0B6B36}.b-reg{background:#2563EB}.b-cap{background:#7C3AED}.b-cost{background:#9A5700}.b-stk{background:#B4356B}.b-der{background:#0E7490}
.hr-body{display:block;padding:14px 16px 16px}
.hr-title{display:block;font-family:'Archivo',sans-serif;font-size:16.5px;font-weight:700;line-height:1.22;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.hr-desc{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
@media(max-width:640px){.hr-all{position:static;display:inline-block;margin-top:6px}.hr-card{flex-basis:240px}}
/* research-kaarten groter (4-breed) + Backpack-regel onder Top 3 (Luc) */
.home-research .hr-title{font-size:18px}
.home-research .hr-desc{font-size:13.5px}
@media(max-width:1080px){.hr-card{flex:0 0 300px!important}}
.ht3-why{font-size:13.5px;color:var(--muted);margin:16px 0 0;text-align:center}
.ht3-why a{color:#2563EB;font-weight:700;text-decoration:none}
.ht3-why a:hover{text-decoration:underline;text-underline-offset:3px}


/* ==== app-pagina's: rijke dropdown (mega-v2), overgenomen uit content.css ==== */
/* ===== Mega-v2 RIJK: icoon+titel+subtitel per sectie + featured + meta-rail (mockup Luc) ===== */
@media(min-width:1181px){
.mega-v2 .mega-kicker{display:none!important}
.nav-item .mega-panel.info-mega.mega-v2,.nav-item:hover .mega-panel.info-mega.mega-v2,.nav-item:focus-within .mega-panel.info-mega.mega-v2{
  display:grid!important;grid-template-columns:1fr 320px!important;width:980px!important;max-width:980px!important;max-height:none!important;overflow:visible!important;gap:0 28px!important;padding:12px 26px 18px!important;align-items:start!important}
.mega-v2 .mega-left{gap:0!important;overflow:visible!important;max-height:none!important}
.mega-v2 .mega-col.mc-rich{display:grid!important;grid-template-columns:52px minmax(160px,190px) 1fr;gap:0 18px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line);width:auto!important}
.mega-v2 .mega-left .mega-col.mc-rich:last-child{border-bottom:0}
.mega-v2 .mc-icon{grid-row:1/4;grid-column:1;width:44px;height:44px;border-radius:12px;background:#EEF3FF;display:flex;align-items:center;justify-content:center;color:#2563EB;flex:none}
.mega-v2 .mega-col.mc-rich .mega-section{grid-column:2;grid-row:1;font-family:'Archivo',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0;padding:0;border:0;text-transform:none}
.mega-v2 .mc-sub{display:none}
.mega-v2 .mc-links{grid-column:3;grid-row:1/4;display:flex;flex-direction:column;gap:2px}
.mega-v2 .mc-links a{display:flex!important;align-items:center;justify-content:space-between;gap:14px;color:#2563EB!important;font-size:14px;font-weight:700!important;padding:7px 6px 7px 0!important;background:none!important;white-space:nowrap}
.mega-v2 .mc-links a::after{content:"→";color:#2563EB;opacity:0;font-weight:600;margin-left:auto;transition:opacity .14s ease,transform .14s ease}
.mega-v2 .mc-links a:hover,.mega-v2 .mc-links a.mc-pointer-hover{color:#1D4ED8!important}.mega-v2 .mc-links a:hover::after,.mega-v2 .mc-links a.mc-pointer-hover::after,.mega-v2 .mc-links a:focus-visible::after{opacity:1;transform:translateX(2px)}
.mega-v2 .mega-col.mc-rich{position:relative}
.mega-v2 .mc-category-hit{
  grid-column:1/3!important;grid-row:1/4!important;align-self:stretch!important;z-index:0!important;
  min-height:64px!important;margin:-10px 0!important;padding:0!important;border-radius:12px!important;
  background:transparent!important;text-decoration:none!important;cursor:pointer!important;
  transition:background-color .14s ease,box-shadow .14s ease!important;
}
.mega-v2 .mc-icon,.mega-v2 .mega-col.mc-rich .mega-section,.mega-v2 .mc-sub{
  position:relative;z-index:1;pointer-events:none;
}
.mega-v2 .mc-category-hit:hover,.mega-v2 .mc-category-hit:focus-visible{
  background:#F1F5FD!important;box-shadow:inset 0 0 0 1px #DCE7F8!important;outline:none!important;
}
.mega-v2 .mega-col.mc-rich:has(.mc-category-hit:hover) .mega-section,
.mega-v2 .mega-col.mc-rich:has(.mc-category-hit:focus-visible) .mega-section{color:#1D4ED8!important}
.mega-v2 .mega-col.mc-rich:has(.mc-category-hit:hover) .mc-icon,
.mega-v2 .mega-col.mc-rich:has(.mc-category-hit:focus-visible) .mc-icon{background:#E5EDFF!important;color:#1D4ED8!important}
.mega-v2 .mega-right{grid-column:2;background:#F6F8FC;border-radius:16px;padding:16px;margin-top:12px;display:flex;flex-direction:column;gap:14px}
.mega-v2 .mega-featured{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;transition:opacity .2s,box-shadow .2s;box-shadow:0 10px 26px -18px rgba(16,27,51,.2)}
.mega-v2 .mega-featured.mf-fade{opacity:0}
.mega-v2 .mf-img{position:relative;display:block;aspect-ratio:16/9;background-size:cover;background-position:center;margin:12px 12px 0;border-radius:10px;overflow:hidden}
.mega-v2 .mf-img:not(.mf-img-empty){filter:brightness(1.25) saturate(.97);transition:filter .22s ease}
.mega-v2 .mega-featured:hover .mf-img:not(.mf-img-empty){filter:brightness(1.31) saturate(.99)}
.mega-v2 .mf-img .tlabel{position:absolute!important;top:8px;left:8px;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.mega-v2 .mf-body{display:block;padding:12px 14px 14px}
.mega-v2 .mf-title{display:block;font-family:'Archivo',sans-serif;font-size:16px;font-weight:800;color:var(--ink);margin:0 0 5px}
.mega-v2 .mf-desc{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin:0 0 9px}
.mega-v2 .mf-read{display:block;font-size:12.5px;font-weight:700;color:#2563EB}
.mega-v2 .mega-meta{display:flex;flex-direction:column}
.mega-v2 .mm-row{display:flex;align-items:center;gap:11px;padding:10px 6px;text-decoration:none;border-radius:9px}
.mega-v2 .mm-row:hover{background:#fff}
.mega-v2 .mm-ic{width:30px;height:30px;flex:none;color:#5D9DF6;display:flex;align-items:center;justify-content:center}
.mega-v2 .mm-ic svg{width:18px;height:18px}
.mega-v2 .mm-tx{display:flex;flex-direction:column;min-width:0}
.mega-v2 .mm-t{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.2}
.mega-v2 .mm-s{font-size:11.5px;color:var(--muted);line-height:1.3;margin-top:2px}
.mega-v2 .mm-ch{margin-left:auto;color:#9AA7BE;font-size:18px}
}

/* ===== Reviews-dropdown: merk-logo per exchange-link (mockup Luc) ===== */
.mega-v2 .mc-logo{width:22px;height:22px;border-radius:6px;object-fit:contain;background:#fff;flex:none;box-shadow:0 0 0 1px rgba(16,27,51,.07);padding:1px}
.mega-v2 .mc-mono{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#5D6B85;background:#EEF3FA;box-shadow:none;padding:0}
.mega-v2 .mc-links a.mc-haslogo{gap:11px}

/* Menustreepje volgt hover/open menu (feedback Luc): streepje onder gehoverde/open sectie, vaste actieve dimt zolang een andere sectie gehoverd wordt */
.nav-item:hover>.nav-trigger::after,
.nav-item:focus-within>.nav-trigger::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);border-radius:999px}
.navlinks:has(.nav-item:hover) .nav-item:not(:hover)>.nav-trigger.active::after,
.navlinks:has(.nav-item:focus-within) .nav-item:not(:focus-within)>.nav-trigger.active::after{background:transparent}

/* Final cascade guard for the compact Stories header. */
@media(min-width:1321px){
  .wrap.nav-grid{
    max-width:1560px!important;
    /* Was 372px. Het Nederlandse knoppenblok rechts is breder dan dat, dus liep het
       de middenkolom in: de laatste menulink kwam onder "Bereken jouw kosten" te
       liggen (8 px op 1440, 45 px op 1366, 68 px op 1321). Met auto krijgt de kolom
       de breedte die de knoppen echt nodig hebben, in elke taal. */
    grid-template-columns:210px minmax(0,1fr) auto!important;
    gap:20px!important;
  }
  .wrap.nav-grid .navlinks{display:flex!important;gap:8px!important;min-width:0!important}
}
/* Tussen 1321 en 1520 px is er simpelweg te weinig ruimte: de acht menulabels plus het
   knoppenblok rechts passen niet naast elkaar. In plaats van de laatste link onder de
   knop te laten verdwijnen worden de items hier compacter. Onder 1321 px neemt het
   hamburgermenu het over. */
@media(min-width:1321px) and (max-width:1520px){
  .wrap.nav-grid .navlinks{gap:0!important}
  .wrap.nav-grid .navlinks .nav-item .nav-trigger{padding:0 6px!important;font-size:13.5px!important}
}
.nav-actions{gap:8px!important}
.nav-cta{height:38px!important;padding:0 13px!important;border-radius:10px!important;font-size:12.5px!important}
.langbtn,.currencybtn{height:38px!important;width:38px!important;border-radius:10px!important}
.langbtn{width:52px!important}
@media(max-width:1320px){
  .wrap.nav-grid{grid-template-columns:auto 1fr!important}
  .wrap.nav-grid .navlinks{display:none!important}
  .mobile-menu-btn{display:inline-flex!important}
}

@media(min-width:1181px){
/* === Nav-uitlijning fix (feedback Luc, 25-07-2026): geen vaste itembreedtes, gelijkmatige spatiëring, compactere knoppen === */
.nav,.nav-grid{grid-template-columns:auto 1fr auto!important;gap:20px!important}
.nav>.navlinks,.nav-grid>.navlinks{min-width:0!important;width:100%!important;gap:2px!important;justify-content:center!important}
.nav .navlinks .nav-item .nav-trigger,.nav-grid .navlinks .nav-item .nav-trigger{width:auto!important;padding:0 12px!important;font-size:14px!important;height:64px;display:inline-flex;align-items:center;white-space:nowrap}
.nav .nav-actions,.nav-grid .nav-actions{gap:8px!important;justify-self:end}
.nav .nav-actions .nav-cta,.nav-grid .nav-actions .nav-cta{height:38px!important;padding:0 15px!important;font-size:13px!important}
.nav .nav-actions .langbtn,.nav .nav-actions .currencybtn,.nav-grid .nav-actions .langbtn,.nav-grid .nav-actions .currencybtn{height:34px!important}
}

/* ===== Homepage: Human Markets hero (goedgekeurd door Luc, 28-07-2026) ===== */
.homepage-human-v1 .page-home header.hero{
  min-height:calc(100svh - 64px);
  padding:46px 0 52px;
  justify-content:center;
  isolation:isolate;
  background:#061121;
  color:#fff;
}
.homepage-human-v1 .page-home .home-market-bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
  filter:saturate(.96) brightness(1.16) contrast(.96);
}
.homepage-human-v1 .page-home header.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,11,23,.82) 0%,rgba(4,11,23,.62) 34%,rgba(4,11,23,.22) 65%,rgba(4,11,23,.06) 100%),
    linear-gradient(180deg,rgba(4,11,23,.01) 0%,rgba(4,11,23,.05) 52%,rgba(4,11,23,.30) 100%);
}
.homepage-human-v1 .page-home header.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  height:auto;
  opacity:1;
  pointer-events:none;
  background:radial-gradient(circle at 78% 42%,rgba(50,108,239,.1),transparent 34%);
}
.homepage-human-v1 .page-home .hero-grid{
  z-index:2;
  width:100%;
  max-width:1320px;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:70px;
  align-items:center;
}
.homepage-human-v1 .page-home .hero-copy{
  max-width:720px;
  padding-top:0;
  color:#fff;
}
.homepage-human-v1 .page-home .home-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:#8DB2FF;
  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.homepage-human-v1 .page-home .home-hero-eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#19B6A7;
  box-shadow:0 0 0 5px rgba(25,182,167,.12);
}
.homepage-human-v1 .page-home h1{
  max-width:700px;
  margin:0 0 22px;
  color:#fff;
  font-size:clamp(50px,4.45vw,72px);
  line-height:1.01;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.homepage-human-v1 .page-home h1 .accent{color:#6896FF}
.homepage-human-v1 .page-home .lede{
  max-width:570px;
  color:rgba(236,242,252,.8);
  font-size:17px;
  line-height:1.65;
}
.homepage-human-v1 .page-home .hero-tagline{display:none}
.homepage-human-v1 .page-home .trust-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:24px 0 0;
}
.homepage-human-v1 .page-home .hero-method-link{
  order:-1;
  flex-basis:100%;
  margin:0 0 18px;
  color:#7FA8FF;
  font-size:14px;
}
.homepage-human-v1 .page-home .trust-item{
  display:inline-flex;
  align-items:center;
  gap:0;
  min-height:34px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(8,18,35,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
}
.homepage-human-v1 .page-home .trust-icon,
.homepage-human-v1 .page-home .trust-sub{display:none}
.homepage-human-v1 .page-home .trust-title{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:rgba(245,248,255,.88);
  font-size:10.5px;
  font-weight:750;
  line-height:1;
}
.homepage-human-v1 .page-home .trust-title::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2DD4A8;
  box-shadow:0 0 9px rgba(45,212,168,.45);
}
.homepage-human-v1 .page-home #calculator{
  width:420px;
  max-width:none;
  justify-self:end;
  padding:26px 28px 24px;
  border-color:rgba(222,229,240,.96);
  border-radius:20px;
  background:rgba(255,255,255,.97);
  box-shadow:0 32px 80px -30px rgba(0,0,0,.72);
  backdrop-filter:blur(12px);
}
.homepage-human-v1 .page-home #calculator .calc-head h2{
  max-width:330px;
  color:var(--ink);
  font-size:25px;
  line-height:1.04;
}
.homepage-human-v1 .page-home + .trust-strip{border-top:0}

@media(max-width:1100px){
  .homepage-human-v1 .page-home .hero-grid{
    grid-template-columns:minmax(0,1fr) 380px;
    gap:38px;
  }
  .homepage-human-v1 .page-home #calculator{width:380px}
  .homepage-human-v1 .page-home h1{font-size:clamp(46px,5vw,62px)}
}
@media(max-width:860px){
  .homepage-human-v1 .page-home header.hero{
    min-height:auto;
    padding:38px 0 46px;
  }
  .homepage-human-v1 .page-home .home-market-bg{object-position:48% center}
  .homepage-human-v1 .page-home header.hero::before{
    background:
      linear-gradient(180deg,rgba(4,11,23,.64) 0%,rgba(4,11,23,.8) 43%,rgba(4,11,23,.9) 100%),
      linear-gradient(90deg,rgba(4,11,23,.66),rgba(4,11,23,.22));
  }
  .homepage-human-v1 .page-home .hero-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .homepage-human-v1 .page-home .hero-copy{max-width:650px}
  .homepage-human-v1 .page-home #calculator{
    width:100%;
    max-width:500px;
    justify-self:start;
  }
}

@media(max-width:560px){
  .homepage-human-v1 .page-home header.hero{padding:30px 0 36px}
  .homepage-human-v1 .page-home h1{
    font-size:clamp(39px,11.2vw,50px);
    line-height:1.02;
  }
  .homepage-human-v1 .page-home .lede{font-size:16px}
  .homepage-human-v1 .page-home .trust-row{gap:8px}
  .homepage-human-v1 .page-home .trust-item{padding:8px 10px}
  .homepage-human-v1 .page-home .trust-title{font-size:10px}
  .homepage-human-v1 .page-home #calculator{padding:22px 20px 20px}
  .homepage-human-v1 .page-home #calculator .calc-head h2{font-size:23px}
}

/* Taalletters (punt 12) - Archivo heeft geen Hangul/Cyrillisch.
   Alleen actief op /ko/ en /ua/; overige talen ongewijzigd. */
html[lang="ko"] body{font-family:'Inter','Noto Sans KR',system-ui,sans-serif}
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3,html[lang="ko"] .brand,html[lang="ko"] .mega-kicker{font-family:'Archivo','Noto Sans KR',sans-serif}
html[lang="uk"] h1,html[lang="uk"] h2,html[lang="uk"] h3,html[lang="uk"] .brand,html[lang="uk"] .mega-kicker{font-family:'Archivo','Inter',system-ui,sans-serif}

/* ===== Mobiel menu: hoofdcategorie eerst, submenu na een tik (feedback Luc 01-08-2026) ===== */
.mnav-group + .mnav-group,.mnav-group + .mnav-direct,.mnav-direct + .mnav-group,.mnav-direct + .mnav-direct{border-top:1px solid var(--line)}
.mnav-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:16px;font-weight:800;color:var(--ink);
  padding:15px 10px;border-radius:10px;line-height:1.25;
}
.mnav-head:hover{background:var(--accent-soft)}
.mnav-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mnav-chev{width:19px;height:19px;flex:none;color:var(--muted);transition:transform .18s ease}
.mnav-head[aria-expanded="true"]{color:var(--accent)}
.mnav-head[aria-expanded="true"] .mnav-chev{transform:rotate(90deg);color:var(--accent)}
.mnav-sub{padding:2px 0 10px 10px;border-left:2px solid var(--line);margin:0 0 8px 12px}
.mobile-nav-panel .mnav-sub a{font-size:14.5px;font-weight:600;padding:9px 9px}
.mobile-nav-panel a.mnav-direct{font-size:16px;font-weight:800;padding:15px 10px}
.mobile-nav-panel a.mnav-all{font-weight:800;color:var(--accent)}
.mobile-nav-panel a.mnav-all::after{content:" \2192"}
.mobile-nav-panel{padding:8px}

/* ===== BEGIN STORIES-MENU-LAYOUT-V1 · 2026-08-02 =====
   Alleen layout. Geen menu-copy, linkvolgorde, vertaling, metadata of previewbeeld gewijzigd.
   Rollback: verwijder dit volledige gemarkeerde blok uit content.css en app.css. */
@media(min-width:1181px){
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mega-panel.info-mega.mega-v2,
  .nav-item:has(> .nav-trigger[href$="/stories/"]):hover .mega-panel.info-mega.mega-v2,
  .nav-item:has(> .nav-trigger[href$="/stories/"]):focus-within .mega-panel.info-mega.mega-v2{
    width:min(1160px,calc(100vw - 40px))!important;
    max-width:1160px!important;
    grid-template-columns:minmax(0,1fr) 340px!important;
    gap:0 30px!important;
    padding:12px 28px 20px!important;
    max-height:calc(100vh - 84px)!important;
    overflow:hidden!important;
  }
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mega-left{
    min-width:0!important;
    max-height:calc(100vh - 116px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:8px;
    scrollbar-width:thin;
    scrollbar-color:#CBD8EA transparent;
  }
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mega-col.mc-rich{
    grid-template-columns:52px 164px minmax(0,1fr)!important;
    gap:0 18px!important;
    padding:20px 0 8px!important;
    border-bottom:0!important;
  }
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-sub{
    max-width:18ch!important;
  }
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    align-items:start!important;
    gap:2px 24px!important;
  }
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a{
    display:flex!important;
    min-height:36px;
    padding:7px 9px!important;
    margin:0 0 2px;
    border-radius:8px;
    white-space:normal!important;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
  }
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a::after{
    opacity:0!important;
    transition:opacity .14s ease,transform .14s ease;
  }
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:hover::after,
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:focus-visible::after{
    opacity:1!important;
    transform:translateX(2px);
  }
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(3),
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(4),
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(5),
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(6),
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(7),
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(10){
    box-shadow:inset 2px 0 #DCE7FA;
  }
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(1){grid-column:1!important;grid-row:1!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(2){grid-column:1!important;grid-row:7!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(3){grid-column:2!important;grid-row:1!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(4){grid-column:2!important;grid-row:2!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(5){grid-column:2!important;grid-row:3!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(6){grid-column:2!important;grid-row:4!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(7){grid-column:2!important;grid-row:5!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(8){grid-column:1!important;grid-row:6!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(9){grid-column:2!important;grid-row:7!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(10){grid-column:2!important;grid-row:6!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(11){grid-column:1!important;grid-row:2!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(12){grid-column:1!important;grid-row:3!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(13){grid-column:1!important;grid-row:4!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(14){grid-column:1!important;grid-row:8!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(15){grid-column:1!important;grid-row:5!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(16){grid-column:2!important;grid-row:8!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(17){grid-column:1!important;grid-row:9!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(18){grid-column:2!important;grid-row:9!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(19){grid-column:1!important;grid-row:10!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(20){grid-column:2!important;grid-row:10!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mc-links a:nth-child(21){grid-column:1!important;grid-row:11!important}
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mega-right{
    width:340px;
    margin-top:12px!important;
    padding:16px!important;
    align-self:start;
  }
  .nav-item:has(> .nav-trigger[href$="/stories/"]) .mf-img{
    aspect-ratio:4/3;
  }
}
/* ===== END STORIES-MENU-LAYOUT-V1 ===== */

/* Oordeeltabel op de vergelijkingen: per onderwerp wie er wint. */
table.oordeel td:nth-child(2){white-space:nowrap;text-align:center}
table.oordeel td:nth-child(1){font-weight:700;white-space:nowrap}
table.oordeel td:nth-child(3){font-size:14.5px;line-height:1.5}
.win{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:800;font-size:13.5px;line-height:1.35;white-space:nowrap}
.win-a{background:#E7EEFF;color:#1B44C8}
.win-b{background:#E3F5EA;color:#137A45}
.win-draw{background:#FFF1DC;color:#9A5B00}
.win-none{background:#F0F2F6;color:#5A6478}
.win-dep{background:#FFF1DC;color:#9A5B00}
@media (max-width:640px){
  table.oordeel td:nth-child(1){white-space:normal}
  .win{padding:3px 9px;font-size:12.5px}
}

/* ===== COMPARE MENU: COMPLETE HEAD-TO-HEAD GRID V1 ===== */
.mega-v2 .mf-img .tlabel{display:inline-flex!important;align-items:center!important;color:#fff!important;background:#2563EB;font-size:9.5px!important;font-weight:800!important;letter-spacing:.055em!important;text-transform:uppercase!important;padding:4px 9px!important;border-radius:7px!important}
.mega-v2 .mf-img .tlabel-sec{background:#16A34A!important}
.mega-v2 .mf-img .tlabel-reg,.mega-v2 .mf-img .tlabel-der{background:#2563EB!important}
.mega-v2 .mf-img .tlabel-cap{background:#7C3AED!important}
.mega-v2 .mf-img .tlabel-cost{background:#F59E0B!important}
.mega-v2 .mf-img .tlabel-risk{background:#EF4444!important}
.mega-v2 .mf-img .tlabel-stk{background:#0891B2!important}
@media(min-width:1181px){
  .navlinks>.nav-item:first-child .mega-panel.info-mega.mega-v2{
    padding:8px 26px 12px!important;
  }
  .navlinks>.nav-item:first-child .mega-panel.mega-v2 .mega-left>.mega-col.mc-rich{
    padding:12px 0!important;
  }
  .navlinks>.nav-item:first-child .mega-panel.mega-v2 .mc-links a{
    padding-top:5px!important;
    padding-bottom:5px!important;
  }
  .navlinks>.nav-item:first-child .mega-panel.mega-v2 .mega-left>.mega-col.mc-rich:last-child .mc-links{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:24px!important;
    row-gap:2px!important;
  }
  .navlinks>.nav-item:first-child .mega-panel.mega-v2 .mega-left>.mega-col.mc-rich:last-child .mc-links a{
    min-width:0!important;
    white-space:normal!important;
  }
}
/* ===== END COMPARE MENU: COMPLETE HEAD-TO-HEAD GRID V1 ===== */

/* exchange-tokens in de kostencalculator */
.tokenblok{border:1px solid var(--line,#E4EAF3);border-radius:12px;padding:12px 14px 4px;margin:0 0 12px;background:#fff}
.tokenblok .tokenkop{display:block;font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#62708A;margin:0 0 10px}
.tokenblok .field{margin-bottom:10px}
.tokenblok .field label{font-size:12.5px}
.tokenveld-uit{opacity:.55}
.tokenveld-uit input{cursor:not-allowed}
.tokenblok{padding:14px;margin-bottom:12px}
.tokenblok .tokenkop{margin-bottom:12px}
.token-choice-field{max-width:none!important;margin-bottom:12px!important}
.token-choice-field select{width:100%}
.token-value-label{display:block;font-size:12.5px;font-weight:750;color:var(--ink,#101B33);margin:0 0 6px}
.token-combo-input{display:flex;align-items:stretch;border:1px solid var(--line,#DCE5F1);border-radius:11px;background:#F9FBFE;overflow:hidden;min-height:48px}
.token-combo-input:focus-within{border-color:#2864EA;box-shadow:0 0 0 3px rgba(40,100,234,.10)}
.token-combo-input .token-amount{min-width:0;flex:1;border:0!important;box-shadow:none!important;background:transparent!important;padding:10px 12px!important;font-variant-numeric:tabular-nums}
.token-unit-switch{display:flex;align-items:center;padding:4px;border-left:1px solid var(--line,#DCE5F1);background:#F2F6FC}
.token-unit{min-width:38px;height:34px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:#62708A;font-size:12px;font-weight:850;cursor:pointer}
.token-unit.active{background:#fff;color:#175CE5;box-shadow:0 1px 4px rgba(16,27,51,.12)}
.token-unit:disabled{opacity:.35;cursor:not-allowed}
.token-conversion{margin:8px 1px 12px;color:#42506A;font-size:12px;line-height:1.45}
.token-conversion>span{display:block;color:#77839A;margin-top:2px}
.token-conversion a{color:#2864EA;text-decoration:none}
.token-conversion.token-note{color:#6C778C}
.token-advanced-link{display:inline-flex;align-items:center;gap:5px;margin:2px 0 4px;color:#2864EA;font-size:12px;font-weight:800;text-decoration:none}
.token-advanced-link:hover{text-decoration:underline}
.token-bnb-pay{padding:2px 0 4px!important;align-items:flex-start!important}
.token-bnb-pay .ctext{font-size:12.5px;line-height:1.45}
@media(max-width:640px){
  .tokenblok{padding:13px}
  .token-unit{min-width:40px}
}

/* ---------------------------------------------------------------------------
   Bediening onder 1441 px.  Twee gaten gedicht, 9 augustus 2026.

   1. Het zijpaneel met de calculator stond uit onder 1441 px, terwijl de
      mobiele filterbalk pas aangaat onder 761 px. Tussen 761 en 1440 px —
      1366x768 en 1440x900 vallen daar middenin — had de bezoeker geen enkele
      instelling: geen volume, markt, regio of profiel, alleen 'Sorteren op'.
      De calculator komt hier terug als kaart op volle breedte boven de
      resultaten; boven 1440 px blijft het gewoon het zijpaneel.

   2. Drie regels zonder media query zetten de inhoud van de filterrij op elke
      breedte uit. Daardoor opende 'Filteren' op mobiel een leeg vlak en waren
      de filters op vergunningen en producten nergens meer bereikbaar. Ze staan
      hieronder weer aan; alleen de regiokeuze blijft uit, want die zit al in
      de calculator zelf.
--------------------------------------------------------------------------- */
@media(max-width:1440px){
  .side-calc-wrap{
    display:block;position:static;width:100%;max-width:1180px;
    margin:0 auto 18px;top:auto;z-index:auto;
  }
  .side-calc{padding:18px 18px 20px}
  .side-calc .calc-head h2,.side-calc .calc-head .calc-title{max-width:none}
  .side-calc .calc-fields.market-first{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .side-calc .profile-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
  .side-calc .field,
  .side-calc .field > *{min-width:0;max-width:100%}
  .side-calc input,
  .side-calc select,
  .side-calc .calc-select-btn{max-width:100%;box-sizing:border-box}

  /* De voorkeurenkaarten (producten, herkomst, zekerheid, yield, exchangekeuze) zijn
     voor een kolom van 318px getekend. Onder elkaar op volle breedte werden ze ruim
     900px hoog en duwden ze de resultaten van het scherm, en daarom stonden ze hier
     op display:none. Gevolg: op een laptop van 1366 of 1280px waren Proof of Reserves,
     nooit gehackt, yield op collateral, lending, herkomst en de exchangekeuze
     helemaal niet te bereiken. Ze staan nu naast elkaar in plaats van onder elkaar;
     zo passen ze wel en blijft de tabel in beeld. */
  .side-specs{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
    gap:12px;
    align-items:start;
  }

  .ddwrap.saved-filter{display:block!important}
  .fbar .perm-topbar{display:block!important}
}
@media(max-width:900px){
  .side-calc .calc-fields.market-first{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side-calc .profile-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .side-calc .calc-fields.market-first{grid-template-columns:1fr}
  .side-calc{padding:15px 13px 16px}
}

/* Deribit en Binance leveren een los beeldmerk; voeg de woordnaam toe. */
#tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-deribit::after,
#tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-binance::after{
  font-family:'Archivo',sans-serif;
  font-weight:850;
  line-height:1;
  letter-spacing:-.025em;
  color:var(--ink,#101B33);
  white-space:nowrap;
}
#tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-deribit::after{content:'Deribit'}
#tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-binance::after{content:'Binance'}

/* Eén vast merkvlak voorkomt dat interne witruimte en beeldverhouding van het
   bronbestand de logo- en linkpositie per resultaatkaart laten verspringen. */
@media(min-width:901px){
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:230px!important;
    height:44px!important;
    max-width:100%!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    gap:9px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-logo{
    width:auto!important;
    height:auto!important;
    max-width:180px!important;
    max-height:32px!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-coinbase .brand-logo{
    max-width:176px!important;
    max-height:31px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-backpack .brand-logo{
    max-width:164px!important;
    max-height:31px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-kraken .brand-logo,
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-kraken-pro .brand-logo{
    max-width:168px!important;
    max-height:29px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-deribit,
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-binance{
    width:100%!important;
    max-width:100%!important;
    gap:9px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-deribit::after,
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-binance::after{
    font-size:27px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-deribit .brand-logo,
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-binance .brand-logo{
    width:34px!important;
    height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    flex:0 0 34px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-detail-link{
    width:230px!important;
    margin-top:5px!important;
    text-align:center!important;
  }
}

@media(max-width:900px){
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap{
    display:flex!important;
    align-items:center!important;
    min-height:38px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup{
    align-items:center!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-deribit,
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-binance{
    gap:8px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-deribit::after,
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-binance::after{
    font-size:23px;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-deribit .brand-logo,
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup.brand-binance .brand-logo{
    width:34px!important;
    height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    object-fit:contain!important;
    flex:0 0 34px!important;
  }
}

/* ===== RESULT CARDS: GELIJKE HOOGTE EN VASTE UITLIJNING (13 aug 2026) =====
   De winnaar wordt al voldoende gemarkeerd door lint en groene rand. Verschillen
   in besparingstekst, badges of trust-items mogen de kaartmaat en hoofdlijnen
   daarom niet meer veranderen. Op mobiel blijft de hoogte inhoudsgestuurd. */
@media(min-width:901px){
  #tbl tr.mainrow.result-card-v2.winner>td.result-card-cell{
    background:#fff!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-top-v2{
    height:168px!important;
    min-height:168px!important;
    box-sizing:border-box!important;
    align-items:center!important;
  }

  #tbl tr.mainrow.result-card-v2 .exchange-main{
    display:grid!important;
    grid-template-rows:44px 24px 20px!important;
    align-content:center!important;
    min-height:88px!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap{grid-row:1!important}
  #tbl tr.mainrow.result-card-v2 .result-badges-v2{
    grid-row:2!important;
    align-content:center!important;
    min-height:24px!important;
    margin-top:0!important;
    overflow:hidden!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-detail-link{
    grid-row:3!important;
    align-self:end!important;
    margin-top:0!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-fees-v2{
    height:76px!important;
    justify-content:flex-start!important;
  }
  #tbl tr.mainrow.result-card-v2 .fee-label-v2{margin-bottom:0!important}
  #tbl tr.mainrow.result-card-v2 .fee-values-v2{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:5px!important;
    min-height:42px!important;
  }
  #tbl tr.mainrow.result-card-v2 .fee-values-v2 .mono,
  #tbl tr.mainrow.result-card-v2 .fee-tier-v2{
    display:block!important;
    flex:0 0 auto!important;
    line-height:1.2!important;
  }
  #tbl tr.mainrow.result-card-v2 .fee-tier-v2{
    margin:0!important;
    white-space:nowrap!important;
  }

  #tbl tr.mainrow.result-card-v2 .result-price-v2{
    height:124px!important;
    justify-content:flex-start!important;
    align-self:center!important;
  }
  #tbl tr.mainrow.result-card-v2 .exchange-cta{margin-top:auto!important}

  #tbl tr.mainrow.result-card-v2 .result-bottom-v2{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    width:100%!important;
    height:62px!important;
    min-height:62px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-bottom-v2 .trust-item{
    min-width:0!important;
    white-space:nowrap!important;
  }
}
/* ===== END RESULT CARDS: GELIJKE HOOGTE EN VASTE UITLIJNING ===== */

/* Plaats de exchange-logo's links in hun vaste merkvlak. De kolommen, rank en
   detail-link behouden hun bestaande positie en afmetingen. */
@media(min-width:901px){
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap,
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .logo-lockup{
    justify-content:flex-start!important;
  }
}

/* Definitieve desktopcorrectie: iedere kaart heeft dezelfde totale hoogte,
   ook wanneer een exchange nog geen score-/trustregel heeft. De merkruimte
   begint direct na het rangnummer in plaats van gecentreerd in de brede
   eerste kolom. Logo's worden optisch genormaliseerd; Coinbase mag niet
   groter ogen dan Backpack. */
@media(min-width:901px){
  #tbl tr.mainrow.result-card-v2 .exchange-main{
    justify-content:start!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-brand-v2 .rank{
    transform:translateY(-22px)!important;
  }
  #tbl tr.mainrow.result-card-v2 .result-detail-link{
    text-align:left!important;
  }
  #tbl tr.mainrow.result-card-v2 > td.result-card-cell:not(:has(.result-bottom-v2))::after{
    content:"";
    display:block;
    width:100%;
    height:62px;
    box-sizing:border-box;
    border-top:1px solid #ECF1F8;
  }
  #tbl tr.mainrow.result-card-v2 .result-logo-wrap .brand-coinbase .brand-logo{
    max-width:148px!important;
    max-height:27px!important;
  }
}

/* ---------- exchangerooster onder de calculator ---------- */
.tc-alle-exchanges{
  max-width:1160px;margin:72px auto 0;padding:0 20px 38px
}
.tc-alle-exchanges h2{
  max-width:none;margin:0 auto 12px;text-align:center;color:#101b33;
  font:800 clamp(26px,3vw,34px)/1.12 Archivo,Inter,system-ui,sans-serif;
  letter-spacing:-.035em
}
.tc-alle-exchanges p{
  max-width:780px;margin:0 auto 32px;text-align:center;
  color:#62708a;font:400 16px/1.65 Inter,system-ui,sans-serif;
  letter-spacing:-.008em
}
/* Rijen die zichzelf vullen en gecentreerd uitkomen: kaarten krijgen de breedte
   van hun inhoud, zodat 'Crypto.com' meer ruimte pakt dan 'Finst' en er geen
   halflege kolom overblijft als het aantal exchanges geen veelvoud van drie is. */
.tc-ex-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px
}
/* Vaste rijindeling 4-3-4-3-4 en daarna een gecentreerde slotrij. De
   regelbrekers staan in de markup op de bedoelde rijgrenzen, zodat variabele
   kaartbreedtes het gestaffelde patroon niet kunnen doorbreken. */
.tc-ex-br{flex:0 0 100%;width:100%;height:0;margin:0;padding:0;border:0}
@media (max-width:520px){.tc-ex-br{display:none}}

/* Kolommen, geen flex: de logokolom is 56px breed zodat een liggend woordmerk
   (Bybit heeft geen vierkant icoon) net zoveel optisch gewicht krijgt als een
   vierkant mark. De naamkolom begint bij elke kaart op dezelfde plek. */
.tc-ex{
  flex:0 0 auto;min-width:196px;max-width:none;
  min-height:88px;display:grid;grid-template-columns:56px auto auto;
  align-items:center;gap:14px;padding:14px 16px;
  border:1px solid rgba(214,222,235,.9);border-radius:20px;
  background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(251,252,254,.94));
  box-shadow:0 1px 1px rgba(16,27,51,.025),0 18px 42px -36px rgba(16,27,51,.42);
  text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background-color .2s ease
}
.tc-ex:hover{
  border-color:#c2cfe2;
  box-shadow:0 2px 2px rgba(16,27,51,.03),0 22px 48px -34px rgba(16,27,51,.36);
  transform:translateY(-2px);text-decoration:none
}
.tc-ex:focus-visible{
  outline:3px solid rgba(37,99,235,.24);outline-offset:3px;border-color:#8fb0f5
}
.tc-ex-logo{
  display:flex;align-items:center;justify-content:center;
  width:54px;height:48px;border-radius:0;
  background:transparent;box-shadow:none
}
/* Merken staan rechtstreeks op de kaart. De transparante logoruimte houdt
   verschillende vormen optisch gelijk zonder een tweede kaartje te maken. */
.tc-ex-logo img{max-width:40px;max-height:40px;width:auto;height:auto;object-fit:contain}
.tc-ex-logo img[src*="bybit.svg"]{max-width:48px}
.tc-ex-logo img[src*="gemini.svg"]{max-width:54px}
.tc-ex-naam{
  min-width:0;color:#101b33;
  font:700 15px/1.25 Inter,system-ui,sans-serif;letter-spacing:-.015em;
  white-space:nowrap
}
.tc-ex-score{
  display:inline-flex;align-items:baseline;gap:2px;margin-left:16px;padding:6px 9px;border-radius:999px;
  background:rgba(232,240,255,.78);color:#2864ea;
  box-shadow:inset 0 0 0 1px rgba(96,144,237,.08);
  font:800 13px/1 Inter,system-ui,sans-serif;letter-spacing:-.015em
}
.tc-ex-score::after{
  content:"/10";color:#7d91b8;font-size:9px;font-weight:700;letter-spacing:-.02em
}
/* Exchanges zonder score zien er hetzelfde uit als de rest; ze zijn alleen niet
   klikbaar, dus ook geen hover-effect dat een link suggereert. */
.tc-ex-leeg{cursor:default}
.tc-ex-leeg:hover{transform:none}

@media (max-width:900px){
  .tc-ex{min-width:176px}
}
@media (max-width:520px){
  /* Twee kolommen laten 'Crypto.com' niet heel afdrukken; op een telefoon is
     een kolom leesbaarder dan een afgekapte naam. */
  .tc-alle-exchanges{margin-top:48px;padding:0 16px 24px}
  .tc-alle-exchanges h2{font-size:26px}
  .tc-alle-exchanges p{margin-bottom:24px;font-size:15px;line-height:1.6}
  .tc-ex-grid{flex-direction:column;gap:9px}
  .tc-ex{min-width:0;max-width:none;width:100%}
  .tc-ex{min-height:78px;padding:11px 12px;border-radius:18px}
  .tc-ex-logo{width:50px;height:44px;border-radius:0;background:transparent;box-shadow:none}
  .tc-ex-logo img{max-width:38px;max-height:38px}
}

/* ===== ALL DESKTOP DROPDOWNS: LEFT-ALIGNED READING LIST V1 =====
   Categorieen staan onder elkaar. Alleen lange linklijsten worden over
   twee verticale kolommen verdeeld. Mobiele navigatie blijft ongewijzigd. */
@media (min-width:1181px){
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mega-left{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    min-width:0!important;
    max-height:calc(100vh - 110px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:8px!important;
    scrollbar-width:thin;
    scrollbar-color:#CBD8EA transparent;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mega-col.mc-rich{
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    grid-template-rows:44px auto!important;
    column-gap:16px!important;
    row-gap:2px!important;
    align-items:start!important;
    width:auto!important;
    padding:14px 0!important;
    border-bottom:1px solid var(--line)!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mega-left>.mega-col.mc-rich:last-child{
    border-bottom:0!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-icon{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mega-section{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    margin:0!important;
    text-align:left!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-links{
    grid-column:2!important;
    grid-row:2!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    min-width:0!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-links:has(>a:nth-child(7)){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    align-items:start!important;
    column-gap:24px!important;
    row-gap:0!important;
  }
  body .navlinks>.nav-item:first-child:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mega-left>.mega-col.mc-rich:last-child .mc-links:not(:has(>a:nth-child(7))){
    display:flex!important;
    grid-template-columns:none!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-links a{
    justify-content:flex-start!important;
    min-width:0!important;
    padding:5px 0!important;
    white-space:normal!important;
    text-align:left!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-links a::after{
    margin-left:6px!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-category-hit{
    grid-column:1/3!important;
    grid-row:1!important;
    min-height:44px!important;
    margin:0!important;
  }
}

/* ===== ALL DESKTOP DROPDOWNS: ONE SHARED LAYOUT V2 =====
   Dit is het bindende menucontract voor iedere desktopdropdown. Oude
   menu-specifieke varianten (o.a. Vergelijken en Stories) mogen de breedte,
   linkvolgorde of kolomindeling niet meer veranderen. Categorieen en links
   lezen van boven naar beneden; alleen lange lijsten krijgen een tweede
   verticale leeskolom. Mobiele navigatie blijft ongewijzigd. */
@media (min-width:1181px){
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2,
  body .navlinks>.nav-item:has(>.nav-trigger):hover .mega-panel.info-mega.mega-v2,
  body .navlinks>.nav-item:has(>.nav-trigger):focus-within .mega-panel.info-mega.mega-v2{
    width:min(960px,calc(100vw - 40px))!important;
    max-width:960px!important;
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:0 26px!important;
    padding:12px 26px 18px!important;
    max-height:calc(100vh - 84px)!important;
    overflow:hidden!important;
    align-items:start!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mega-left{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    min-width:0!important;
    max-height:calc(100vh - 114px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:8px!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mega-col.mc-rich{
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    grid-template-rows:44px auto!important;
    gap:2px 16px!important;
    width:auto!important;
    padding:14px 0!important;
    border-bottom:1px solid var(--line)!important;
    align-items:start!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mega-left>.mega-col.mc-rich:last-child{
    border-bottom:0!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-icon{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mega-section{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    margin:0!important;
    text-align:left!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-links{
    grid-column:2!important;
    grid-row:2!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    min-width:0!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-links:has(>a:nth-child(7)){
    display:block!important;
    columns:2 210px!important;
    column-gap:26px!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-links a{
    display:flex!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:5px 0!important;
    border-radius:0!important;
    box-shadow:none!important;
    white-space:normal!important;
    text-align:left!important;
    break-inside:avoid!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-links a::after{
    margin-left:6px!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mc-category-hit{
    grid-column:1/3!important;
    grid-row:1!important;
    min-height:44px!important;
    margin:0!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mega-right{
    grid-column:2!important;
    width:auto!important;
    margin-top:12px!important;
    padding:16px!important;
    align-self:start!important;
  }
  body .navlinks>.nav-item:has(>.nav-trigger) .mega-panel.info-mega.mega-v2 .mf-img{
    aspect-ratio:16/9!important;
  }
}
/* ===== END ALL DESKTOP DROPDOWNS: ONE SHARED LAYOUT V2 ===== */

/* Skip-link: WCAG 2.4.1. Onzichtbaar tot hij focus krijgt, dan linksboven in
   beeld. Toetsenbord- en schermlezergebruikers slaan er de hele navigatie mee
   over; met de muis ziet niemand hem. */
.ef-skip{position:absolute;left:-9999px;top:0;z-index:9999;background:#fff;color:#101b33;
  padding:10px 18px;border:1px solid rgba(214,222,235,.9);border-radius:0 0 12px 0;
  font:700 15px/1.3 Inter,system-ui,sans-serif;text-decoration:none;
  box-shadow:0 10px 24px -14px rgba(16,27,51,.45)}
.ef-skip:focus{left:0}

/* Juridische links in de footer. Ze stonden nergens buiten de juridische
   pagina's zelf, waardoor de privacyverklaring op 992 van de 1002 pagina's
   onbereikbaar was. */
.footlegal{display:inline-flex;flex-wrap:wrap;gap:14px;align-items:center}
.footlegal a{white-space:nowrap}

/* Mobiele sorteerselect voor de kostenvergelijker (UX-audit 23 aug 2026).
   Desktop houdt de bestaande sorteerbalk; dit blok bestaat alleen <=760px. */
#mobielSorteerWrap{display:none}
@media(max-width:760px){
  #mobielSorteerWrap{display:flex;gap:10px;align-items:center;margin:8px 0 14px}
  #mobielSorteerWrap label{font-weight:700;font-size:13.5px;white-space:nowrap}
  #mobielSorteerWrap select{flex:1;min-height:44px;padding:8px 12px;border:1px solid #d6deeb;
    border-radius:10px;font:600 14px/1.3 Inter,system-ui,sans-serif;background:#fff;color:#101b33}
}

/* UX-audit 23 aug 2026: de ⓘ "Hoe berekenen we?"-knop was 24x24; de klikzone
   is nu ~44px zonder het icoon te vergroten. */
.how{position:relative}
.how::after{content:"";position:absolute;inset:-12px}