/* b-source.be — supplemental header overrides (logo + hamburger), loaded after Astro CSS */
.wf-header .wrap.in{min-height:74px}
.lg{white-space:nowrap;display:flex;align-items:center;gap:11px;text-decoration:none}
.lg:hover{text-decoration:none}
.lg .logomark{height:48px!important;width:48px!important;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.20))}
.lg .logotype{font-family:'Saira',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;
  font-size:1.6rem;letter-spacing:-.02em;line-height:1;color:#0C436F}
.lg .logotype em{font-style:normal;font-weight:700;color:#e0a400}
.wf-footer .lg .logomark{height:42px!important;width:42px!important}
.wf-footer .lg .logotype{font-size:1.45rem;color:#fff}
.wf-footer .lg .logotype em{color:#f5c518}

/* --- OPERATOR / BRAND logos: massive + all the same size (2:1 rounded-rect tiles) --- */
.ltile,.ltile.sm,.rev-h .ltile,.pick .h .ltile{
  width:180px!important;min-width:180px!important;height:90px!important;
  border-radius:12px!important;background:#fff!important;padding:6px!important}
.ltile.xs{width:116px!important;min-width:116px!important;height:58px!important;border-radius:10px!important;padding:4px!important}
.ltile img{width:100%!important;height:100%!important;object-fit:contain!important}
.trow{align-items:center}
.trow .brand{gap:14px}
@media(min-width:761px){
  .tl .trow{grid-template-columns:40px minmax(230px,1.8fr) 1fr 1.1fr .7fr auto!important}
}
.navtoggle{display:none}
.burger{display:none}

@media (max-width:760px){
  .wf-header .wrap.in{position:relative;flex-wrap:wrap;align-items:center;min-height:60px}
  .wf-header .lg .logomark{height:42px!important;width:42px!important}
  .wf-header .lg .logotype{font-size:1.4rem}

  .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:40px;padding:9px;margin-left:auto;background:transparent;border:0;cursor:pointer}
  .burger span{display:block;width:100%;height:2.5px;background:#0C436F;border-radius:2px;transition:transform .2s,opacity .2s}

  .wf-header .nav{display:none;order:3;flex-basis:100%;width:100%;flex-direction:column;
    align-items:stretch;gap:2px;margin-top:10px;padding-top:8px;border-top:1px solid var(--color-primary-100,#e5e9ef)}
  .navtoggle:checked ~ .nav{display:flex}

  .wf-header .nav a:not(.btn){color:#0C436F!important;padding:12px 8px;border-radius:8px;font-size:1rem;font-weight:700}
  .wf-header .nav a:not(.btn):hover{background:#f2f6fa}
  .wf-header .nav .dd{display:block!important}
  .wf-header .nav .dd summary{color:#0C436F;padding:12px 8px;font-size:1rem;font-weight:700}
  .wf-header .nav .ddm{position:static;box-shadow:none;background:#f5f7fa;margin:2px 0 4px;min-width:0}
  .wf-header .nav .ddm a{color:#0C436F!important;padding:10px 16px}
  .wf-header .nav .btn-gold{margin:10px 8px 4px;justify-content:center;padding:12px}

  /* burger → X when open */
  .navtoggle:checked ~ .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .navtoggle:checked ~ .burger span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* --- ABOVE-THE-FOLD on mobile: H1 + author + updated, then the table + its H2 --- */
  .hero{padding:18px 0 20px}
  .hero .wrap.in{grid-template-columns:1fr;gap:0}
  .hero .sub,.hero .trust,.hero .pick,.hero .mtop3{display:none!important}
  .hero .eyebrow{margin-bottom:10px}
  .hero h1{margin-bottom:.3em}
  .hero .meta{margin-top:12px;padding-top:12px}
  /* lift the toplist: drop the stat cards and section eyebrows on small screens */
  .statrow{display:none!important}
  .flow .kick{display:none}
  .flow.w{padding-top:16px}
  .flow.w .sechead{margin-top:0}
  /* homepage topic links stay visible (not a statrow) */
  .topiclinks{display:flex!important}
}
/* ===== AUTHOR CARDS (auteurs / over-ons) ===== */
.author{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid #e7ebf1;
  border-radius:14px;padding:16px 18px;margin:16px 0;box-shadow:0 2px 12px rgba(15,51,85,.05)}
.author img{width:66px;height:66px;border-radius:50%;flex:none;object-fit:cover;border:2px solid #f5c518}
.author .nm{font-family:'Saira',sans-serif;font-weight:800;color:#12212f;font-size:1.1rem}
.author .sub{color:#6b7787;font-size:.9rem;line-height:1.5;margin-top:2px}
.author .sub a{color:#0c436f;font-weight:600}

/* ===== CONTENT / COMPARISON TABLES ===== */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4rem 0;border-radius:14px}
.tablewrap table{margin:0!important;min-width:560px}
.prose table,table.tbl{width:100%;border-collapse:collapse;font-size:.94rem;margin:1.4rem 0;
  background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;
  box-shadow:0 2px 14px rgba(15,51,85,.06)}
.prose table th,table.tbl th{background:linear-gradient(180deg,#12406b,#0f3355);color:#fff;
  font-family:'Saira',sans-serif;font-weight:700;text-align:left;padding:13px 18px;font-size:.9rem;
  border:0;white-space:nowrap;letter-spacing:.01em}
.prose table td,table.tbl td{padding:12px 18px;border-top:1px solid #edf1f6;vertical-align:top;color:#33414f}
.prose table tbody tr:nth-child(even) td,table.tbl tbody tr:nth-child(even) td{background:#f6f9fc}
.prose table tbody tr:hover td,table.tbl tbody tr:hover td{background:#eef5fd}
.prose table td:first-child,table.tbl td:first-child{font-weight:700;color:#12212f;white-space:nowrap}
.prose table td strong{color:#0f3355}

/* ===== AFFILIATE TABLE — ranked rows with speed bar ===== */
.optable{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.oprow{display:grid;grid-template-columns:64px 210px minmax(200px,1fr) minmax(280px,1.35fr) 170px;
  gap:22px;align-items:center;background:#fff;border:1px solid #e7ebf1;border-radius:18px;
  padding:16px 22px;box-shadow:0 3px 14px rgba(15,51,85,.06)}
.oprow.top{border:2px solid #7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.10),0 12px 30px rgba(124,58,237,.14)}
.op-rank{font-family:'Saira',sans-serif;font-weight:800;font-style:italic;font-size:2.5rem;
  color:#7c3aed;text-align:center;line-height:1}
.op-logo{height:78px;background:#fff;border:1px solid #e7ebf1;border-radius:12px;
  display:flex;align-items:center;justify-content:center;padding:10px 14px}
.op-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.op-badge{display:inline-block;background:#fff6e0;color:#b07d09;border:1px solid #f0d688;
  font-family:'Saira',sans-serif;font-weight:700;text-transform:uppercase;font-size:.66rem;
  letter-spacing:.05em;padding:4px 11px;border-radius:999px;margin-bottom:7px}
.op-name{font-family:'Saira',sans-serif;font-weight:800;font-size:1.3rem;color:#12212f;line-height:1.15}
.op-bonus{color:#7c3aed;font-weight:600;font-size:.98rem;margin-top:3px}
.op-speed-top{font-weight:600;color:#12212f;margin-bottom:9px;font-size:.98rem}
.op-bar{height:9px;background:#ece5f6;border-radius:999px}
.op-bar span{position:relative;display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#f5a623,#ec6f1f 45%,#7c3aed)}
.op-bar span::after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;background:#7c3aed;box-shadow:0 0 0 2.5px #fff}
.op-bar-labels{display:flex;justify-content:space-between;font-size:.72rem;color:#6b7787;margin-top:6px}
.op-cta{text-align:center}
.op-cta .btn{width:100%;justify-content:center;font-size:1.02rem;padding:14px 16px}
.op-fine{font-size:.72rem;color:#6b7787;margin-top:7px}
@media(max-width:760px){
  .oprow{grid-template-columns:50px 1fr;gap:8px 14px;padding:14px 16px;border-radius:14px}
  .op-rank{grid-column:1;grid-row:1;font-size:1.9rem}
  .op-logo{grid-column:2;grid-row:1;justify-self:start;height:60px;width:160px}
  .op-main{grid-column:1/3;grid-row:2}
  .op-speed{grid-column:1/3;grid-row:3;margin-top:2px}
  .op-cta{grid-column:1/3;grid-row:4}
}

/* nested nav: fit 6 dropdowns; let long menus scroll */
.wf-header .nav{gap:2px}
.wf-header .nav .dd summary{padding:8px 9px;white-space:nowrap}
.wf-header .nav .ddm{max-height:min(70vh,460px);overflow-y:auto}
@media(min-width:761px){ .wf-header .nav .ddm{min-width:230px} }

/* homepage topic links */
.topiclinks{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 4px}
.topiclinks a{flex:1 1 180px;background:#fff;border:1px solid var(--line,#dfe7ef);border-radius:10px;
  padding:12px 14px;font-family:'Saira',sans-serif;font-weight:700;color:#12212f;text-decoration:none;
  box-shadow:0 2px 10px rgba(15,51,85,.06)}
.topiclinks a:hover{border-color:#f5c518}
.topiclinks a span{display:block;font-weight:500;font-size:.82rem;color:#6b7787;margin-top:2px}