/* ══════════════════════════════════════
   MAPLEINDEX — SHARED STYLES
   Apply to every page via:
   <link rel="stylesheet" href="/mapleindex.css">
══════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --maple:       #C8102E;
  --maple-light: #FFF0F2;
  --maple-mid:   rgba(200,16,46,0.12);
  --maple-dark:  #8f0b20;

  --bg:      #ffffff;
  --bg-2:    #f8f7f5;
  --bg-3:    #f1efe9;
  --surface: #ffffff;

  --text:   #141414;
  --text-2: #555550;
  --text-3: #999994;

  --border:        rgba(20,20,20,0.09);
  --border-md:     rgba(20,20,20,0.15);
  --border-strong: rgba(20,20,20,0.24);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  --font: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow:     0 4px 20px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-cta: 0 4px 14px rgba(200,16,46,0.3);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#111110; --bg-2:#1a1a18; --bg-3:#222220; --surface:#1a1a18;
    --text:#f0ede8; --text-2:#a8a8a2; --text-3:#666660;
    --border:rgba(240,237,232,0.08); --border-md:rgba(240,237,232,0.14); --border-strong:rgba(240,237,232,0.24);
    --maple-light:rgba(200,16,46,0.15);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.3); --shadow:0 4px 20px rgba(0,0,0,0.5);
    --shadow-cta:0 4px 14px rgba(200,16,46,0.4);
  }
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--maple); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── LAYOUT ── */
.page-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

/* ── HEADER ── */
.site-header { border-bottom: 1px solid var(--border); padding: 1rem 0; position: sticky; top: 0; background: var(--bg); z-index: 100; backdrop-filter: blur(10px); }
.trust-strip { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-3); flex-shrink: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none !important; cursor: pointer; }
.logo:hover { text-decoration: none !important; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name { font-size: 1rem; font-weight: 500; color: var(--text); letter-spacing: -0.3px; }
.logo-name span { color: var(--maple); }
.logo-sub { font-size: 0.68rem; color: var(--text-3); }

/* ── TRUST STRIP ── */
.trust-strip { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-3); }
.trust-dot { width: 6px; height: 6px; border-radius: 50%; background: #3B6D11; flex-shrink: 0; animation: pulse 2.5s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── TAB BAR ── */
.tab-bar { display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; }
.tab-btn { padding: 0.42rem 1.1rem; border-radius: 7px; font-size: 0.83rem; font-weight: 500; font-family: var(--font); cursor: pointer; border: none; background: transparent; color: var(--text-2); transition: all 0.15s; text-decoration: none; display: inline-flex; align-items: center; }
.tab-btn:hover { color: var(--text); text-decoration: none; }
.tab-btn.active { background: var(--surface); color: var(--text); border: 1px solid var(--border-md); box-shadow: var(--shadow-sm); }

/* ── FOOTER ── */
.site-footer { border-top: 1px solid var(--border); padding: 1.75rem 0; margin-top: 3rem; }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer-logo { font-size: 0.88rem; font-weight: 500; color: var(--text); }
.footer-logo span { color: var(--maple); }
.footer-disc { font-size: 0.68rem; color: var(--text-3); max-width: 500px; line-height: 1.65; margin-top: 0.3rem; }
.footer-links { display: flex; gap: 1.25rem; flex-shrink: 0; }
.footer-links a { font-size: 0.75rem; color: var(--text-3); text-decoration: none; }
.footer-links a:hover { color: var(--text-2); text-decoration: none; }

/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
  --maple:       #C8102E;
  --maple-light: #FFF0F2;
  --maple-mid:   rgba(200,16,46,0.12);
  --maple-dark:  #8f0b20;

  --bg:      #ffffff;
  --bg-2:    #f8f7f5;
  --bg-3:    #f1efe9;
  --surface: #ffffff;

  --text:   #141414;
  --text-2: #555550;
  --text-3: #999994;

  --border:        rgba(20,20,20,0.09);
  --border-md:     rgba(20,20,20,0.15);
  --border-strong: rgba(20,20,20,0.24);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  --font: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;
  --mono-zero: 'DM Mono', monospace; /* same font, zero suppressed via font-feature-settings */

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow:    0 4px 20px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-cta:0 4px 14px rgba(200,16,46,0.3);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#111110; --bg-2:#1a1a18; --bg-3:#222220; --surface:#1a1a18;
    --text:#f0ede8; --text-2:#a8a8a2; --text-3:#666660;
    --border:rgba(240,237,232,0.08); --border-md:rgba(240,237,232,0.14); --border-strong:rgba(240,237,232,0.24);
    --maple-light:rgba(200,16,46,0.15);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.3); --shadow:0 4px 20px rgba(0,0,0,0.5);
    --shadow-cta:0 4px 14px rgba(200,16,46,0.4);
  }
}

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
.page-wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.site-header{border-bottom:1px solid var(--border);padding:1rem 0;position:sticky;top:0;background:var(--bg);z-index:100;backdrop-filter:blur(10px)}
.trust-strip { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-3); flex-shrink: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}
.logo-mark{width:32px;height:32px;background:var(--maple);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;box-shadow:0 2px 8px rgba(200,16,46,0.35)}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-name{font-size:1rem;font-weight:500;color:var(--text);letter-spacing:-0.3px}
.logo-name span{color:var(--maple)}
.logo-sub{font-size:0.68rem;color:var(--text-3)}

/* ─ trust strip ─ */
.trust-strip{display:flex;align-items:center;gap:6px;font-size:0.7rem;color:var(--text-3)}
.trust-dot{width:6px;height:6px;border-radius:50%;background:#3B6D11;flex-shrink:0;animation:pulse 2.5s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* ─ tabs ─ */
.tab-bar{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:4px}
.tab-btn{padding:0.42rem 1.1rem;border-radius:7px;font-size:0.83rem;font-weight:500;font-family:var(--font);cursor:pointer;border:none;background:transparent;color:var(--text-2);transition:all 0.15s;text-decoration:none;display:inline-block}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{background:var(--surface);color:var(--text);border:1px solid var(--border-md);box-shadow:var(--shadow-sm)}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero{padding:2rem 0 1.4rem}
.hero-eyebrow{font-size:0.7rem;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;color:var(--maple);margin-bottom:0.55rem}
.hero-title{font-size:1.7rem;font-weight:500;letter-spacing:-0.5px;line-height:1.2;margin-bottom:0.45rem}
.hero-title em{color:var(--maple);font-style:normal}
.hero-sub{font-size:0.87rem;color:var(--text-2);max-width:500px;line-height:1.65}

/* ══════════════════════════════════════
   STAT CARDS
══════════════════════════════════════ */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:9px;margin-bottom:1.25rem}
.stat-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:0.85rem 1rem}
.stat-label{font-size:0.66rem;color:var(--text-3);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.stat-value{font-size:1.4rem;font-weight:500;letter-spacing:-0.5px;line-height:1;font-family:var(--font);font-variant-numeric:tabular-nums}
.stat-value.red{color:var(--maple)}

/* ══════════════════════════════════════
   FILTER BAR
══════════════════════════════════════ */
.filter-bar{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0.9rem 1rem;margin-bottom:1rem}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.filter-group{display:flex;flex-direction:column;gap:4px;flex:1;min-width:100px}
.filter-group.wide{flex:2;min-width:170px}
.filter-label{font-size:0.64rem;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:0.5px}
.filter-group input,.filter-group select{
  font-family:var(--font);font-size:0.8rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-md);
  border-radius:var(--radius-sm);padding:0.4rem 0.65rem;
  outline:none;transition:border-color 0.15s;width:100%;
  appearance:none;-webkit-appearance:none
}
.filter-group select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 4.5L11 1' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0.55rem center;padding-right:1.9rem
}
.filter-group input:focus,.filter-group select:focus{border-color:var(--maple);box-shadow:0 0 0 2px var(--maple-mid)}
.reset-btn{font-family:var(--font);font-size:0.77rem;color:var(--text-3);background:transparent;border:1px solid var(--border-md);border-radius:var(--radius-sm);padding:0.4rem 0.85rem;cursor:pointer;white-space:nowrap;align-self:flex-end;transition:all 0.15s}
.reset-btn:hover{color:var(--text-2);border-color:var(--border-strong)}

/* ─ tooltip icon ─ */
.tip{display:inline-flex;align-items:center;gap:3px}
.tip-icon{width:14px;height:14px;border-radius:50%;background:var(--bg-3);border:1px solid var(--border-md);font-size:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);cursor:help;flex-shrink:0}
/* tooltip bubble lives in <body> via JS — never clipped by overflow */
#tip-bubble{
  position:fixed;z-index:9999;pointer-events:none;
  background:var(--text);color:var(--bg);
  font-family:var(--font);font-size:0.68rem;line-height:1.5;
  padding:7px 11px;border-radius:var(--radius-sm);
  width:220px;white-space:normal;
  opacity:0;transition:opacity 0.15s;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* ══════════════════════════════════════
   RESULT META
══════════════════════════════════════ */
.result-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6rem;flex-wrap:wrap;gap:8px}
.result-count{font-size:0.79rem;color:var(--text-3)}
.result-count strong{color:var(--text-2);font-weight:500}
.sort-hint{font-size:0.72rem;color:var(--text-3)}

/* ══════════════════════════════════════
   TABLE
══════════════════════════════════════ */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:700px}
thead th{
  padding:0.6rem 0.85rem;text-align:left;
  font-size:0.66rem;font-weight:500;color:var(--text-3);
  text-transform:uppercase;letter-spacing:0.5px;
  border-bottom:1px solid var(--border);background:var(--bg-2);
  white-space:nowrap;cursor:pointer;user-select:none;transition:color 0.12s
}
thead th:hover{color:var(--text-2)}
thead th.sorted{color:var(--maple)}
.sort-arrow{display:inline-block;margin-left:3px;font-size:0.6rem;opacity:0.4}
.sorted .sort-arrow{opacity:1}
tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--bg-2)}
tbody tr:hover .row-cta{opacity:1}
tbody td{padding:0.75rem 0.85rem;vertical-align:middle}
.row-cta{opacity:0;transition:opacity 0.15s;font-size:0.7rem;color:var(--maple);font-weight:500;white-space:nowrap}

/* ══════════════════════════════════════
   BADGES
══════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:0.69rem;font-weight:500;white-space:nowrap;line-height:1.6}
.badge-green  {background:#EAF3DE;color:#3B6D11}
.badge-blue   {background:#E6F1FB;color:#185FA5}
.badge-amber  {background:#FAEEDA;color:#854F0B}
.badge-teal   {background:#E1F5EE;color:#0F6E56}
.badge-red    {background:#FCEBEB;color:#A32D2D}
.badge-gray   {background:var(--bg-3);color:var(--text-3);border:1px solid var(--border)}
.badge-maple  {background:var(--maple-light);color:var(--maple)}
.badge-purple {background:#EEEDFE;color:#534AB7}

/* clickable badge */
.badge-click{cursor:pointer;transition:filter 0.12s,transform 0.1s}
.badge-click:hover{filter:brightness(0.92);transform:scale(1.04)}
.badge-click.active-filter{outline:2px solid currentColor;outline-offset:1px}

@media(prefers-color-scheme:dark){
  .badge-green {background:rgba(59,109,17,0.22);color:#7fc03d}
  .badge-blue  {background:rgba(24,95,165,0.22);color:#5eaaf0}
  .badge-amber {background:rgba(133,79,11,0.25);color:#f0a93a}
  .badge-teal  {background:rgba(15,110,86,0.22);color:#35c99a}
  .badge-red   {background:rgba(163,45,45,0.22);color:#f07070}
  .badge-maple {background:rgba(200,16,46,0.18);color:#f04060}
  .badge-purple{background:rgba(83,74,183,0.2);color:#a89ff5}
}

.flags{display:flex;gap:4px;flex-wrap:wrap}

/* ══════════════════════════════════════
   TABLE CELL COMPONENTS
══════════════════════════════════════ */
.ticker{font-family:var(--mono);font-weight:500;font-size:0.85rem;color:var(--maple);letter-spacing:0.3px}
.etf-name{font-size:0.82rem;color:var(--text);line-height:1.3}
.etf-provider{font-size:0.69rem;color:var(--text-3);margin-top:2px}

.mer-cell{display:flex;align-items:center;gap:7px}
.mer-track{width:44px;height:4px;background:var(--border-md);border-radius:2px;overflow:hidden;flex-shrink:0}
.mer-fill{height:100%;border-radius:2px}
.mer-low {background:#3B6D11}
.mer-mid {background:#BA7517}
.mer-high{background:var(--maple)}
.mer-num {font-family:var(--font);font-variant-numeric:tabular-nums;font-size:0.75rem;white-space:nowrap}

.yield-num{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:0.85rem;font-weight:500}
.yield-high{color:#3B6D11}
.yield-mid {color:#BA7517}
.yield-low {color:var(--text-3)}

/* ══════════════════════════════════════
   BROKER TABLE CELLS
══════════════════════════════════════ */
.broker-row-cell{display:flex;align-items:center;gap:10px}
.broker-logo{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:500;flex-shrink:0;border:1px solid var(--border)}
.broker-name-text{font-size:0.85rem;font-weight:500}
.broker-sub{font-size:0.7rem;color:var(--text-3);margin-top:2px}

/* ─ dominant CTA button ─ */
.cta-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font);font-size:0.82rem;font-weight:500;
  color:#fff;background:var(--maple);
  border:none;border-radius:var(--radius-sm);
  padding:7px 14px;cursor:pointer;text-decoration:none;
  transition:all 0.15s;white-space:nowrap;
  box-shadow:var(--shadow-cta)
}
.cta-btn:hover{background:var(--maple-dark);box-shadow:0 6px 20px rgba(200,16,46,0.4);transform:translateY(-1px)}
.cta-btn:active{transform:translateY(0)}

/* secondary affiliate (outline style) */
.cta-outline{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font);font-size:0.76rem;font-weight:500;
  color:var(--maple);background:var(--maple-light);
  border:1.5px solid rgba(200,16,46,0.25);border-radius:var(--radius-sm);
  padding:5px 11px;cursor:pointer;text-decoration:none;
  transition:all 0.15s;white-space:nowrap
}
.cta-outline:hover{background:rgba(200,16,46,0.12);border-color:rgba(200,16,46,0.4)}
.no-link{font-size:0.78rem;color:var(--text-3)}

/* ─ "popular ETFs on this platform" strip inside broker table ─ */
.etf-pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.etf-pill{
  font-family:var(--mono);font-size:0.68rem;font-weight:500;
  color:var(--maple);background:var(--maple-light);
  border:1px solid rgba(200,16,46,0.15);
  border-radius:20px;padding:1px 8px;
  cursor:pointer;transition:all 0.12s
}
.etf-pill:hover{background:rgba(200,16,46,0.14);border-color:rgba(200,16,46,0.3)}

/* ══════════════════════════════════════
   BROKER BEST-FOR CLICK FILTER STRIP
══════════════════════════════════════ */
.bestfor-strip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem}
.bestfor-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:20px;font-size:0.78rem;font-weight:500;
  cursor:pointer;border:1.5px solid var(--border-md);
  background:var(--surface);color:var(--text-2);
  transition:all 0.14s;user-select:none
}
.bestfor-chip:hover{border-color:var(--border-strong);color:var(--text)}
.bestfor-chip.active{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ══════════════════════════════════════
   NO RESULTS
══════════════════════════════════════ */
.no-results{display:none;text-align:center;padding:3.5rem 1rem;color:var(--text-3);font-size:0.87rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.no-results strong{display:block;font-size:1.05rem;margin-bottom:0.35rem;color:var(--text-2)}

/* ══════════════════════════════════════
   PANELS
══════════════════════════════════════ */
.panel{display:none}
.panel.active{display:block}

/* ══════════════════════════════════════
   DRAWER
══════════════════════════════════════ */
.drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.38);z-index:200;backdrop-filter:blur(3px)}
.drawer-overlay.open{display:block;animation:fadeIn 0.2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.drawer{
  position:fixed;right:0;top:0;bottom:0;width:min(500px,100vw);
  background:var(--bg);border-left:1px solid var(--border);
  z-index:201;overflow-y:auto;display:none;flex-direction:column
}
.drawer.open{display:flex;animation:slideIn 0.22s ease}
@keyframes slideIn{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ─ drawer header ─ */
.drawer-header{padding:1.2rem 1.4rem 1rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1}
.drawer-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.65rem}
.drawer-ticker{font-family:var(--mono);font-size:0.78rem;font-weight:500;color:var(--maple);letter-spacing:0.4px}
.drawer-close-btn{background:var(--bg-2);border:1px solid var(--border);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;color:var(--text-2);transition:all 0.15s;flex-shrink:0}
.drawer-close-btn:hover{background:var(--bg-3);color:var(--text)}
.drawer-name{font-size:1rem;font-weight:500;line-height:1.3;margin-bottom:0.3rem}
.drawer-desc{font-size:0.82rem;color:var(--text-2);line-height:1.6}

/* ─ drawer body ─ */
.drawer-body{padding:1.2rem 1.4rem;flex:1}
.drawer-section{margin-bottom:1.4rem}
.drawer-section-title{font-size:0.65rem;font-weight:500;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-3);margin-bottom:0.7rem;padding-bottom:0.35rem;border-bottom:1px solid var(--border)}

.drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drawer-stat{background:var(--bg-2);border-radius:var(--radius);padding:0.7rem 0.85rem}
.drawer-stat-label{font-size:0.65rem;color:var(--text-3);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.4px}
.drawer-stat-value{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:500}
.drawer-stat-value.red{color:var(--maple)}
.drawer-stat-value.green{color:#3B6D11}

/* ─ "where to buy" broker cards in drawer ─ */
.buy-card{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:0.9rem 1rem;display:flex;align-items:center;
  justify-content:space-between;gap:12px;margin-bottom:8px;
  transition:background 0.12s
}
.buy-card:hover{background:var(--bg-2)}
.buy-card-left{display:flex;align-items:center;gap:10px;min-width:0}
.buy-logo{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:500;flex-shrink:0}
.buy-name{font-size:0.83rem;font-weight:500}
.buy-note{font-size:0.7rem;color:var(--text-3);margin-top:1px}
.buy-badge{font-size:0.68rem}

/* ══════════════════════════════════════
   HOLDINGS TABLE
══════════════════════════════════════ */
.holdings-list{width:100%}
.holdings-row{display:flex;align-items:center;gap:8px;padding:0.48rem 0;border-bottom:1px solid var(--border)}
.holdings-row:last-child{border-bottom:none}
.h-rank{font-family:var(--mono);font-size:0.64rem;color:var(--text-3);width:14px;flex-shrink:0;text-align:right}
.h-ticker{font-family:var(--mono);font-weight:500;font-size:0.78rem;color:var(--maple);width:46px;flex-shrink:0;white-space:nowrap}
.h-name{color:var(--text-2);font-size:0.76rem;line-height:1.3;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-right{display:flex;align-items:center;gap:7px;flex-shrink:0}
.h-weight-num{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:0.76rem;font-weight:500;color:var(--text);width:36px;text-align:right}
.h-bar-bg{width:56px;height:4px;background:var(--border-md);border-radius:2px;overflow:hidden;flex-shrink:0}
.h-bar-fill{height:100%;border-radius:2px;background:var(--maple);opacity:0.7;transition:width 0.3s ease}
.holdings-note{font-size:0.69rem;color:var(--text-3);margin-top:0.6rem;line-height:1.5;padding-top:0.5rem;border-top:1px solid var(--border)}
.holdings-link{display:inline-flex;align-items:center;gap:4px;font-size:0.76rem;font-weight:500;color:var(--maple);text-decoration:none;margin-top:0.65rem;transition:opacity 0.14s}
.holdings-link:hover{opacity:0.75}
.holdings-unavail{background:var(--bg-2);border-radius:var(--radius);padding:0.85rem 1rem;text-align:center}
.holdings-unavail p{font-size:0.8rem;color:var(--text-3);margin-bottom:0.5rem}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer{border-top:1px solid var(--border);padding:1.75rem 0;margin-top:3rem}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.footer-logo{font-size:0.88rem;font-weight:500;color:var(--text)}
.footer-logo span{color:var(--maple)}
.footer-disc{font-size:0.68rem;color:var(--text-3);max-width:500px;line-height:1.65;margin-top:0.3rem}
.footer-links{display:flex;gap:1.25rem;flex-shrink:0}
.footer-links a{font-size:0.75rem;color:var(--text-3);text-decoration:none}
.footer-links a:hover{color:var(--text-2)}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hero{animation:fadeUp 0.3s ease both}
.stats-row{animation:fadeUp 0.3s ease 0.06s both}
.filter-bar{animation:fadeUp 0.3s ease 0.1s both}
.table-wrap{animation:fadeUp 0.3s ease 0.14s both}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:620px){
  .hero-title{font-size:1.4rem}
  .stats-row{grid-template-columns:1fr 1fr}
  .filter-group{min-width:44%}
  .filter-group.wide{min-width:100%}
  .drawer{width:100vw}
  .trust-strip{display:none}
}

/* ══════════════════════════════════════
   CALCULATORS
══════════════════════════════════════ */
.calc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-bottom:2rem}
@media(max-width:900px){.calc-grid{grid-template-columns:1fr}}

.calc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.calc-card-header{padding:1.1rem 1.25rem 0.9rem;border-bottom:1px solid var(--border);background:var(--bg-2)}
.calc-card-eyebrow{font-size:0.65rem;font-weight:500;text-transform:uppercase;letter-spacing:0.6px;color:var(--maple);margin-bottom:0.3rem}
.calc-card-title{font-size:1rem;font-weight:500;letter-spacing:-0.2px}
.calc-card-sub{font-size:0.78rem;color:var(--text-2);margin-top:0.25rem;line-height:1.5}
.calc-card-body{padding:1.25rem}

/* inputs */
.calc-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:1rem}
.calc-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:130px}
.calc-label{font-size:0.68rem;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:0.4px}
.calc-field input,.calc-field select{
  font-family:var(--font);font-size:0.85rem;color:var(--text);
  background:var(--bg-2);border:1px solid var(--border-md);
  border-radius:var(--radius-sm);padding:0.5rem 0.7rem;
  outline:none;width:100%;transition:border-color 0.15s;
  appearance:none;-webkit-appearance:none
}
.calc-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 4.5L11 1' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0.6rem center;padding-right:2rem
}
.calc-field input:focus,.calc-field select:focus{border-color:var(--maple);box-shadow:0 0 0 2px var(--maple-mid)}

/* slider */
.slider-wrap{display:flex;align-items:center;gap:10px}
.slider-wrap input[type=range]{flex:1;accent-color:var(--maple)}
.slider-val{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:0.82rem;font-weight:500;min-width:32px;text-align:right;color:var(--text)}

/* result box */
.calc-result{
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:1rem 1.1rem;
  margin-top:0.25rem
}
.calc-result-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.35rem}
.calc-result-row:last-child{margin-bottom:0}
.calc-result-label{font-size:0.75rem;color:var(--text-2)}
.calc-result-val{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:0.9rem;font-weight:500}
.calc-result-val.highlight{font-size:1.2rem;color:var(--maple)}
.calc-result-val.green{color:#3B6D11}
.calc-divider{border:none;border-top:1px solid var(--border);margin:0.5rem 0}

/* chart bars */
.bar-chart{margin-top:1rem}
.bar-group{margin-bottom:0.6rem}
.bar-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.bar-label{font-size:0.73rem;color:var(--text-2)}
.bar-amount{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:0.73rem;color:var(--text-3)}
.bar-track{height:10px;background:var(--border-md);border-radius:5px;overflow:hidden}
.bar-fill{height:100%;border-radius:5px;transition:width 0.4s ease}
.bar-fill.profit{background:#3B6D11}
.bar-fill.fees{background:var(--maple);opacity:0.75}
.bar-fill.blue{background:#185FA5}

/* fee comparison scenario pills */
.scenario-strip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem}
.scenario-pill{
  padding:4px 11px;border-radius:20px;font-size:0.75rem;font-weight:500;
  cursor:pointer;border:1.5px solid var(--border-md);
  background:var(--surface);color:var(--text-2);transition:all 0.13s
}
.scenario-pill:hover{border-color:var(--border-strong);color:var(--text)}
.scenario-pill.active{background:var(--text);color:var(--bg);border-color:var(--text)}

/* "calculate fees" mini-link inside ETF table rows */
.calc-link{
  display:inline-flex;align-items:center;gap:3px;
  font-size:0.68rem;font-weight:500;color:var(--text-3);
  text-decoration:none;cursor:pointer;transition:color 0.12s;
  white-space:nowrap;margin-top:2px
}
.calc-link:hover{color:var(--maple)}

/* ETF search autocomplete dropdown */
.etf-search-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--surface);border:1px solid var(--border-md);
  border-radius:var(--radius);z-index:300;
  box-shadow:var(--shadow);max-height:220px;overflow-y:auto
}
.etf-search-option{
  padding:8px 12px;font-size:0.8rem;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--border);transition:background 0.1s
}
.etf-search-option:last-child{border-bottom:none}
.etf-search-option:hover{background:var(--bg-2)}
.etf-search-option:focus{background:var(--bg-3);outline:none;border-left:2px solid var(--maple)}
.etf-search-option-ticker{font-family:var(--mono);font-size:0.78rem;font-weight:500;color:var(--maple);width:46px;flex-shrink:0}
.etf-search-option-name{color:var(--text-2);font-size:0.78rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etf-search-option-mer{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:0.72rem;color:var(--text-3);flex-shrink:0}

/* selected ETF tag */
.selected-etf-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:20px;
  background:var(--maple-light);border:1px solid rgba(200,16,46,0.2);
  font-size:0.76rem;font-weight:500;color:var(--maple)
}
.selected-etf-tag button{
  background:none;border:none;cursor:pointer;
  color:var(--maple);font-size:0.85rem;line-height:1;padding:0;opacity:0.7
}
.selected-etf-tag button:hover{opacity:1}

/* comparison slots */
.cmp-slot{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border:1px solid var(--border-md);
  border-radius:var(--radius-sm);background:var(--bg-2);
  position:relative
}
.cmp-slot-label{font-size:0.68rem;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:0.4px;flex-shrink:0;width:40px}
.cmp-slot input{
  flex:1;border:none;background:transparent;outline:none;
  font-family:var(--font);font-size:0.82rem;color:var(--text)
}
.cmp-slot input::placeholder{color:var(--text-3)}
.cmp-slot-tag{display:none;align-items:center;gap:5px;font-size:0.76rem;font-weight:500;color:var(--maple)}
.cmp-slot-remove{background:none;border:none;cursor:pointer;color:var(--text-3);font-size:0.8rem;padding:0 2px;line-height:1;transition:color 0.12s}
.cmp-slot-remove:hover{color:var(--maple)}
.cmp-slot .etf-search-dropdown{top:calc(100% + 4px)}

/* ── merged calculator card ── */
#calc-merged{padding:0;overflow:hidden}
#calc-merged > div:first-child{border-bottom:1px solid var(--border);background:var(--bg-2);padding:1rem 1.25rem 0.9rem}
#calc-panel-fee .calc-card,
#calc-panel-div .calc-card{border-radius:0;box-shadow:none;border:none}

/* tickers stay mono but suppress slashed zeros */
.ticker,.drawer-ticker,.h-ticker,.h-rank,.etf-search-option-ticker,
.etf-pill,[style*="font-family:var(--mono)"] {
  font-feature-settings: "zero" 0;
}
/* result numbers use sans with tabular alignment — consistent, no slashed zeros */
.calc-result-val,.stat-value,.drawer-stat-value,.slider-val,
.bar-amount,.mer-num,.yield-num,.h-weight-num,.etf-search-option-mer {
  font-variant-numeric: tabular-nums;
}

/* ── formatted number inputs ── */
.num-input{
  font-family:var(--font);font-size:0.88rem;font-variant-numeric:tabular-nums;
  color:var(--text);background:var(--bg-2);
  border:1px solid var(--border-md);border-radius:var(--radius-sm);
  padding:0.45rem 0.65rem;outline:none;width:100%;
  transition:border-color 0.15s;
}
.num-input:focus{border-color:var(--maple);box-shadow:0 0 0 2px var(--maple-mid)}
/* inline inputs inside port ETF rows */
.num-input-inline{
  font-family:var(--font);font-variant-numeric:tabular-nums;
  font-size:0.82rem;color:var(--text);
  background:transparent;border:none;outline:none;padding:0;width:100%;
}

/* ── simple/advanced toggle ── */
.mode-toggle{display:flex;gap:0;margin-bottom:1rem;border:1px solid var(--border-md);border-radius:var(--radius-sm);overflow:hidden;width:fit-content}
.mode-btn{padding:5px 14px;font-size:0.75rem;font-weight:500;font-family:var(--font);cursor:pointer;border:none;background:transparent;color:var(--text-3);transition:all 0.13s}
.mode-btn.active{background:var(--text);color:var(--bg)}
.mode-btn:hover:not(.active){color:var(--text-2);background:var(--bg-3)}
.advanced-row{transition:opacity 0.2s}

/* ── input helper hint ── */
.calc-hint{font-size:0.67rem;color:var(--text-3);margin-top:3px;line-height:1.4}

/* ── verdict box ── */
.verdict{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:var(--radius);
  margin-bottom:0.75rem;border:1px solid transparent
}
.verdict.good {background:rgba(59,109,17,0.1); border-color:rgba(59,109,17,0.25)}
.verdict.warn {background:rgba(200,16,46,0.09); border-color:rgba(200,16,46,0.22)}
.verdict.neutral{background:var(--bg-2);border-color:var(--border)}
.verdict-icon{font-size:1rem;flex-shrink:0;line-height:1.3}
.verdict-text{font-size:0.78rem;line-height:1.5;color:var(--text-2)}
.verdict-text strong{color:var(--text);font-weight:500}

/* ── cheaper alternative suggestion ── */
.alt-suggestion{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(59,109,17,0.08);border:1px solid rgba(59,109,17,0.2);
  border-radius:var(--radius);padding:10px 12px;margin-bottom:0.75rem;flex-wrap:wrap;gap:8px
}
.alt-suggestion-text{font-size:0.78rem;color:var(--text-2);line-height:1.4;flex:1;min-width:0}
.alt-suggestion-text strong{color:#3B6D11;font-weight:500}
.alt-btn{
  font-family:var(--font);font-size:0.73rem;font-weight:500;
  color:#3B6D11;background:rgba(59,109,17,0.12);
  border:1px solid rgba(59,109,17,0.25);border-radius:var(--radius-sm);
  padding:5px 10px;cursor:pointer;white-space:nowrap;transition:all 0.13s
}
.alt-btn:hover{background:rgba(59,109,17,0.2)}

/* ── broker CTA strip inside calculators ── */
.calc-broker-strip{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;background:var(--bg-2);
  border:1px solid var(--border);border-radius:var(--radius);
  margin-top:0.75rem
}
.calc-broker-label{font-size:0.7rem;color:var(--text-3);flex-shrink:0}
.calc-broker-btn{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font);font-size:0.75rem;font-weight:500;
  color:var(--maple);background:var(--maple-light);
  border:1px solid rgba(200,16,46,0.22);border-radius:var(--radius-sm);
  padding:4px 10px;cursor:pointer;text-decoration:none;transition:all 0.13s;white-space:nowrap
}
.calc-broker-btn:hover{background:rgba(200,16,46,0.14)}

/* ── preset scenario buttons ── */
.preset-strip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem}
.preset-btn{
  padding:5px 12px;border-radius:20px;font-size:0.73rem;font-weight:500;
  cursor:pointer;border:1.5px solid var(--border-md);
  background:var(--surface);color:var(--text-2);transition:all 0.13s
}
.preset-btn:hover{border-color:var(--border-strong);color:var(--text);background:var(--bg-2)}
.preset-btn.active{background:var(--maple);color:#fff;border-color:var(--maple)}

/* ── line chart ── */
.line-chart-wrap{margin-top:1rem;position:relative}
.line-chart-wrap canvas{width:100%!important;height:160px!important}

/* ── add ETF button (progressive comparison) ── */
.add-etf-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-sm);
  font-size:0.8rem;color:var(--text-3);cursor:pointer;transition:all 0.13s;
  background:transparent;width:100%;font-family:var(--font)
}
.add-etf-btn:hover{border-color:var(--maple);color:var(--maple);background:var(--maple-light)}

/* ══════════════════════════════════════
   MOBILE TABLE OPTIMIZATION
══════════════════════════════════════ */
@media(max-width:700px){

  /* ── ETF TABLE — one true row per ETF ── */
  /* Override min-width and overflow so mobile CSS takes effect */
  .table-wrap { overflow-x: visible !important; }
  #etf-table { min-width: 0 !important; width: 100% !important; }
  #broker-table { min-width: 0 !important; width: 100% !important; }

  /* Header — show but abbreviated to match flex row columns */
  #etf-table thead { display: block; }
  #etf-table thead tr {
    display: flex !important;
    align-items: center;
    padding: 6px 12px;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
  }
  #etf-table thead th {
    border: none;
    padding: 0;
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-3);
    white-space: nowrap;
    cursor: default;
  }
  /* Match exact column widths from body rows */
  #etf-table thead th:nth-child(1) { width: 46px; flex-shrink: 0; }   /* Ticker */
  #etf-table thead th:nth-child(2) { display: none; }                  /* Name — hidden */
  #etf-table thead th:nth-child(3) { flex: 1; }                        /* Best For */
  #etf-table thead th:nth-child(4) { display: none; }                  /* Asset — hidden */
  #etf-table thead th:nth-child(5) { width: 46px; flex-shrink: 0; text-align: right; } /* MER */
  #etf-table thead th:nth-child(6) { width: 40px; flex-shrink: 0; text-align: right; } /* Yield */
  #etf-table thead th:nth-child(7),
  #etf-table thead th:nth-child(8),
  #etf-table thead th:nth-child(9) { display: none; }

  /* Each TR becomes a flex row — everything on one line */
  #etf-table tbody tr {
    display: flex !important;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    min-height: 0;
  }
  #etf-table tbody tr:active { background: var(--bg-2); }
  #etf-table td { border: none; padding: 0; flex-shrink: 0; }

  /* 1. Ticker — fixed narrow width */
  #etf-table td:nth-child(1) { width: 46px; }
  #etf-table td:nth-child(1) .ticker { font-size: 0.85rem; }

  /* 2. Name — HIDDEN */
  #etf-table td:nth-child(2) { display: none; }

  /* 3. Best For badge — grows to fill space */
  #etf-table td:nth-child(3) { flex: 1; min-width: 0; }
  #etf-table td:nth-child(3) .badge { font-size: 0.68rem; padding: 2px 7px; }

  /* 4. Asset — HIDDEN */
  #etf-table td:nth-child(4) { display: none; }

  /* 5. MER — fixed, hide bar show number only */
  #etf-table td:nth-child(5) { width: 46px; text-align: right; }
  #etf-table td:nth-child(5) .mer-track { display: none; }
  #etf-table td:nth-child(5) .mer-num { font-size: 0.75rem; }

  /* 6. Yield — fixed */
  #etf-table td:nth-child(6) { width: 40px; text-align: right; }
  #etf-table td:nth-child(6) .yield-num { font-size: 0.75rem; }

  /* 7–9. Hide the rest */
  #etf-table td:nth-child(7),
  #etf-table td:nth-child(8),
  #etf-table td:nth-child(9) { display: none; }

  /* ── BROKER TABLE — hide wide columns, keep key info ── */
  /* Keep table layout but hide non-essential columns */
  #broker-table th:nth-child(4),
  #broker-table td:nth-child(4),
  #broker-table th:nth-child(5),
  #broker-table td:nth-child(5),
  #broker-table th:nth-child(6),
  #broker-table td:nth-child(6),
  #broker-table th:nth-child(7),
  #broker-table td:nth-child(7),
  #broker-table th:nth-child(8),
  #broker-table td:nth-child(8) { display: none; }

  /* Tighten remaining columns */
  #broker-table { width: 100%; table-layout: fixed; }
  #broker-table th { font-size: 0.68rem; padding: 6px 8px; white-space: normal; line-height: 1.3; }
  #broker-table td { font-size: 0.78rem; padding: 8px; }
  #broker-table td:nth-child(1),
  #broker-table th:nth-child(1) { width: auto; }
  #broker-table td:nth-child(2),
  #broker-table th:nth-child(2) { width: 68px; text-align: center; }
  #broker-table td:nth-child(3),
  #broker-table th:nth-child(3) { width: 56px; text-align: center; }
  #broker-table td:nth-child(9),
  #broker-table th:nth-child(9) { width: 80px; }

  /* Compact broker name cell */
  .broker-logo-wrap { gap: 6px; }
  .broker-logo { width: 26px; height: 26px; font-size: 0.65rem; }
  .broker-name { font-size: 0.8rem; }
  .broker-note { display: none; }

  /* General */
  .table-wrap { border-radius: 0; }
  .filter-bar { padding: 0.75rem; gap: 8px; }
  .filter-row { gap: 6px; }
  .filter-group select { font-size: 0.8rem; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .sort-hint { display: none; }
  .result-meta { flex-direction: column; gap: 4px; }
}

:root {
  --mi-maple:     #C8102E;
  --mi-maple-lt:  #FFF0F2;
  --mi-maple-mid: rgba(200,16,46,0.12);
  --mi-maple-dk:  #8f0b20;
  --mi-bg:        #ffffff;
  --mi-bg2:       #f8f7f5;
  --mi-bg3:       #f1efe9;
  --mi-surf:      #ffffff;
  --mi-t:         #141414;
  --mi-t2:        #555550;
  --mi-t3:        #999994;
  --mi-b:         rgba(20,20,20,0.09);
  --mi-bm:        rgba(20,20,20,0.15);
  --mi-bs:        rgba(20,20,20,0.24);
  --mi-rsm:       6px;
  --mi-r:         10px;
  --mi-rlg:       14px;
  --mi-f:         'DM Sans', sans-serif;
  --mi-mono:      'DM Mono', monospace;
  --mi-sh-sm:     0 1px 3px rgba(0,0,0,0.06);
  --mi-sh-cta:    0 4px 14px rgba(200,16,46,0.3);
}
@media(prefers-color-scheme:dark){
  :root{
    --mi-bg:#111110;--mi-bg2:#1a1a18;--mi-bg3:#222220;--mi-surf:#1a1a18;
    --mi-t:#f0ede8;--mi-t2:#a8a8a2;--mi-t3:#666660;
    --mi-b:rgba(240,237,232,0.08);--mi-bm:rgba(240,237,232,0.14);--mi-bs:rgba(240,237,232,0.24);
    --mi-maple-lt:rgba(200,16,46,0.15);
    --mi-sh-sm:0 1px 3px rgba(0,0,0,0.3);
    --mi-sh-cta:0 4px 14px rgba(200,16,46,0.4);
  }
}

.mi-pg *,.mi-pg *::before,.mi-pg *::after{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0;padding:0;background:var(--mi-bg)}
.mi-pg{font-family:var(--mi-f);background:var(--mi-bg);color:var(--mi-t);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;font-size:15px}

.mi-w{max-width:1180px;width:100%;margin:0 auto;padding:0 1.5rem}

/* Header */
.mi-hdr{border-bottom:1px solid var(--mi-b);padding:1rem 0;position:sticky;top:0;background:var(--mi-bg);z-index:100;backdrop-filter:blur(10px)}
.mi-hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.mi-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.mi-logo-mk{width:32px;height:32px;background:var(--mi-maple);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;box-shadow:0 2px 8px rgba(200,16,46,0.35)}
.mi-logo-txt{display:flex;flex-direction:column;line-height:1.15}
.mi-logo-nm{font-size:1rem;font-weight:500;color:var(--mi-t);letter-spacing:-0.3px;font-family:var(--mi-f)}
.mi-logo-nm span{color:var(--mi-maple)}
.mi-logo-sub{font-size:0.68rem;color:var(--mi-t3);font-family:var(--mi-f)}
.mi-trust{display:flex;align-items:center;gap:6px;font-size:0.7rem;color:var(--mi-t3);font-family:var(--mi-f)}
.mi-dot{width:6px;height:6px;border-radius:50%;background:#3B6D11;flex-shrink:0;animation:mi-pulse 2.5s ease infinite}
@keyframes mi-pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.mi-nav{display:flex;gap:4px}
.mi-nav a{padding:0.42rem 1.1rem;border-radius:7px;font-size:0.83rem;font-weight:500;font-family:var(--mi-f);border:1px solid transparent;background:transparent;color:var(--mi-t2);transition:all 0.15s;text-decoration:none;display:inline-block}
.mi-nav a:hover{color:var(--mi-t)}
.mi-nav a.on{background:var(--mi-bg2);color:var(--mi-t);border-color:var(--mi-bm);box-shadow:var(--mi-sh-sm)}

/* Breadcrumb */
.mi-bc{padding:0.75rem 0;display:flex;align-items:center;gap:6px;font-size:0.72rem;color:var(--mi-t3);font-family:var(--mi-f)}
.mi-bc a{color:var(--mi-t3);text-decoration:none}
.mi-bc a:hover{color:var(--mi-t2)}
.mi-bc-sep{opacity:0.4}

/* Hero */
.mi-hero{padding:1.5rem 0 1.4rem;animation:mi-up 0.3s ease both}
@keyframes mi-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.mi-ey{font-size:0.7rem;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;color:var(--mi-maple);margin-bottom:0.55rem;font-family:var(--mi-f)}
.mi-h1{font-size:1.7rem;font-weight:500;letter-spacing:-0.5px;line-height:1.2;margin-bottom:0.45rem;font-family:var(--mi-f)}
.mi-h1 em{color:var(--mi-maple);font-style:normal}
.mi-hsub{font-size:0.87rem;color:var(--mi-t2);max-width:560px;line-height:1.65;font-family:var(--mi-f)}
.mi-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:0.9rem}
.mi-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:0.76rem;font-weight:500;background:var(--mi-bg2);border:1px solid var(--mi-bm);color:var(--mi-t2);font-family:var(--mi-f)}

/* Filter bar */
.mi-fb{background:var(--mi-bg2);border:1px solid var(--mi-b);border-radius:var(--mi-rlg);padding:0.9rem 1rem;margin-bottom:1rem;animation:mi-up 0.3s ease 0.08s both}
.mi-fsl{font-size:0.63rem;font-weight:500;color:var(--mi-t3);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:0.55rem;font-family:var(--mi-f)}
.mi-fr{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.mi-fg{display:flex;flex-direction:column;gap:4px;flex:1;min-width:110px}
.mi-fl{font-size:0.64rem;font-weight:500;color:var(--mi-t3);text-transform:uppercase;letter-spacing:0.5px;font-family:var(--mi-f)}
.mi-fg select{font-family:var(--mi-f);font-size:0.8rem;color:var(--mi-t);background:var(--mi-surf);border:1px solid var(--mi-bm);border-radius:var(--mi-rsm);padding:0.4rem 1.9rem 0.4rem 0.65rem;outline:none;transition:border-color 0.15s;width:100%;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 4.5L11 1' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.55rem center}
.mi-fg select:focus{border-color:var(--mi-maple);box-shadow:0 0 0 2px var(--mi-maple-mid)}
.mi-fdiv{width:100%;height:1px;background:var(--mi-b);margin:0.7rem 0}
.mi-rbtn{font-family:var(--mi-f);font-size:0.77rem;color:var(--mi-t3);background:transparent;border:1px solid var(--mi-bm);border-radius:var(--mi-rsm);padding:0.4rem 0.85rem;cursor:pointer;white-space:nowrap;align-self:flex-end;transition:all 0.15s}
.mi-rbtn:hover{color:var(--mi-t2);border-color:var(--mi-bs)}
.mi-aft{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:0.65rem}
.mi-aftag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:0.72rem;font-weight:500;background:var(--mi-maple-lt);color:var(--mi-maple);border:1px solid rgba(200,16,46,0.2);font-family:var(--mi-f)}
.mi-aftag-x{cursor:pointer;opacity:0.7;font-size:0.8rem;line-height:1}
.mi-aftag-x:hover{opacity:1}

/* Result meta */
.mi-rm{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6rem;flex-wrap:wrap;gap:8px}
.mi-rc{font-size:0.79rem;color:var(--mi-t3);font-family:var(--mi-f)}
.mi-rc strong{color:var(--mi-t2);font-weight:500}
.mi-sh2{font-size:0.72rem;color:var(--mi-t3);font-family:var(--mi-f)}

/* Badges */
.mi-bdg{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:0.69rem;font-weight:500;white-space:nowrap;line-height:1.6;font-family:var(--mi-f)}
.mi-g {background:#EAF3DE;color:#3B6D11}
.mi-bl{background:#E6F1FB;color:#185FA5}
.mi-am{background:#FAEEDA;color:#854F0B}
.mi-tl{background:#E1F5EE;color:#0F6E56}
.mi-gr{background:var(--mi-bg3);color:var(--mi-t3);border:1px solid var(--mi-b)}
.mi-mp{background:var(--mi-maple-lt);color:var(--mi-maple)}
@media(prefers-color-scheme:dark){
  .mi-g {background:rgba(59,109,17,0.22);color:#7fc03d}
  .mi-bl{background:rgba(24,95,165,0.22);color:#5eaaf0}
  .mi-am{background:rgba(133,79,11,0.25);color:#f0a93a}
  .mi-tl{background:rgba(15,110,86,0.22);color:#35c99a}
  .mi-mp{background:rgba(200,16,46,0.18);color:#f04060}
}

/* Table */
.mi-twrap{overflow-x:auto;border:1px solid var(--mi-b);border-radius:var(--mi-rlg);background:var(--mi-surf);animation:mi-up 0.3s ease 0.14s both}
.mi-tbl{width:100%;border-collapse:collapse;min-width:640px}
.mi-tbl thead th{padding:0.6rem 0.85rem;text-align:left;font-size:0.66rem;font-weight:500;color:var(--mi-t3);text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--mi-b);background:var(--mi-bg2);white-space:nowrap;cursor:pointer;user-select:none;transition:color 0.12s;font-family:var(--mi-f)}
.mi-tbl thead th:hover{color:var(--mi-t2)}
.mi-tbl thead th.mi-sorted{color:var(--mi-maple)}
.mi-sarr{display:inline-block;margin-left:3px;font-size:0.6rem;opacity:0.4}
.mi-sorted .mi-sarr{opacity:1}
.mi-tbl tbody tr{border-bottom:1px solid var(--mi-b);transition:background 0.1s}
.mi-tbl tbody tr:last-child{border-bottom:none}
.mi-tbl tbody tr:hover{background:var(--mi-bg2)}
.mi-tbl tbody td{padding:0.7rem 0.85rem;vertical-align:middle}
.mi-tk{font-family:var(--mi-mono);font-weight:500;font-size:0.85rem;color:var(--mi-maple);letter-spacing:0.3px}
.mi-enm{font-size:0.82rem;color:var(--mi-t);line-height:1.3}
.mi-eprov{font-size:0.69rem;color:var(--mi-t3);margin-top:2px;font-family:var(--mi-f)}
.mi-ynum{font-family:var(--mi-f);font-variant-numeric:tabular-nums;font-size:0.85rem;font-weight:500}
.mi-yh{color:#3B6D11}.mi-ym{color:#BA7517}.mi-yl{color:var(--mi-t3)}
.mi-mer-cell{display:flex;align-items:center;gap:7px}
.mi-mer-track{width:44px;height:4px;background:var(--mi-bm);border-radius:2px;overflow:hidden;flex-shrink:0}
.mi-mer-fill{height:100%;border-radius:2px}
.mi-mer-lo{background:#3B6D11}.mi-mer-md{background:#BA7517}.mi-mer-hi{background:var(--mi-maple)}
.mi-mer-num{font-family:var(--mi-f);font-variant-numeric:tabular-nums;font-size:0.75rem;white-space:nowrap}
.mi-flags{display:flex;gap:4px;flex-wrap:wrap}

/* No results */
.mi-none{display:none;text-align:center;padding:3.5rem 1rem;color:var(--mi-t3);font-size:0.87rem;background:var(--mi-surf);border:1px solid var(--mi-b);border-radius:var(--mi-rlg);font-family:var(--mi-f)}
.mi-none strong{display:block;font-size:1.05rem;margin-bottom:0.35rem;color:var(--mi-t2)}

/* Sections */
.mi-sec{margin:2rem 0}
.mi-sec-ey{font-size:0.67rem;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;color:var(--mi-maple);margin-bottom:0.4rem;font-family:var(--mi-f)}
.mi-sec-tt{font-size:1.1rem;font-weight:500;letter-spacing:-0.3px;margin-bottom:1rem;font-family:var(--mi-f);color:var(--mi-t)}

/* Insights */
.mi-ig{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.mi-ic{background:var(--mi-bg2);border:1px solid var(--mi-b);border-radius:var(--mi-r);padding:0.9rem 1rem;display:flex;gap:10px;align-items:flex-start}
.mi-ii{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.mi-it{font-size:0.8rem;color:var(--mi-t2);line-height:1.55;font-family:var(--mi-f)}
.mi-it strong{display:block;color:var(--mi-t);font-weight:500;margin-bottom:2px;font-size:0.82rem}

/* How to choose */
.mi-hg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.mi-hc{background:var(--mi-surf);border:1px solid var(--mi-b);border-radius:var(--mi-r);padding:0.9rem 1rem}
.mi-hs{font-size:0.63rem;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;color:var(--mi-maple);margin-bottom:4px;font-family:var(--mi-f)}
.mi-ht{font-size:0.87rem;font-weight:500;color:var(--mi-t);margin-bottom:4px;font-family:var(--mi-f)}
.mi-hd{font-size:0.77rem;color:var(--mi-t2);line-height:1.55;font-family:var(--mi-f)}

/* CTA */
.mi-cta{background:var(--mi-bg2);border:1px solid var(--mi-b);border-radius:var(--mi-rlg);padding:1.5rem;margin:2rem 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.mi-cta-ey{font-size:0.67rem;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;color:var(--mi-maple);margin-bottom:0.3rem;font-family:var(--mi-f)}
.mi-cta-tt{font-size:1.05rem;font-weight:500;letter-spacing:-0.2px;margin-bottom:0.25rem;font-family:var(--mi-f);color:var(--mi-t)}
.mi-cta-sb{font-size:0.8rem;color:var(--mi-t2);line-height:1.55;max-width:400px;font-family:var(--mi-f)}
.mi-cta-fs{display:flex;flex-direction:column;gap:4px;margin-top:0.7rem}
.mi-cta-f{display:flex;align-items:center;gap:7px;font-size:0.77rem;color:var(--mi-t2);font-family:var(--mi-f)}
.mi-cta-d{width:5px;height:5px;border-radius:50%;background:var(--mi-maple);flex-shrink:0}
.mi-btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--mi-f);font-size:0.85rem;font-weight:500;color:#fff;background:var(--mi-maple);border:none;border-radius:var(--mi-rsm);padding:9px 18px;cursor:pointer;text-decoration:none;transition:all 0.15s;white-space:nowrap;box-shadow:var(--mi-sh-cta)}
.mi-btn:hover{background:var(--mi-maple-dk);box-shadow:0 6px 20px rgba(200,16,46,0.4);transform:translateY(-1px)}

/* FAQ */
.mi-faq{display:flex;flex-direction:column;gap:6px}
.mi-fqi{border:1px solid var(--mi-b);border-radius:var(--mi-r);overflow:hidden}
.mi-fqq{width:100%;text-align:left;padding:0.9rem 1rem;background:var(--mi-surf);border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mi-f);font-size:0.85rem;font-weight:500;color:var(--mi-t);transition:background 0.12s}
.mi-fqq:hover{background:var(--mi-bg2)}
.mi-fqch{font-size:0.65rem;color:var(--mi-t3);flex-shrink:0;transition:transform 0.2s}
.mi-fqi.open .mi-fqch{transform:rotate(180deg)}
.mi-fqa{display:none;padding:0.8rem 1rem 0.9rem;font-size:0.8rem;color:var(--mi-t2);line-height:1.7;border-top:1px solid var(--mi-b);background:var(--mi-bg2);font-family:var(--mi-f)}
.mi-fqi.open .mi-fqa{display:block}

/* Links */
.mi-lg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}
.mi-lc{display:flex;align-items:center;gap:10px;background:var(--mi-surf);border:1px solid var(--mi-b);border-radius:var(--mi-r);padding:0.8rem 1rem;text-decoration:none;color:var(--mi-t);transition:all 0.14s}
.mi-lc:hover{border-color:var(--mi-bs);background:var(--mi-bg2);transform:translateY(-1px)}
.mi-li{font-size:1.1rem;flex-shrink:0}
.mi-lt{font-size:0.83rem;font-weight:500;color:var(--mi-t);font-family:var(--mi-f)}
.mi-ls{font-size:0.7rem;color:var(--mi-t3);margin-top:1px;font-family:var(--mi-f)}
.mi-la{margin-left:auto;font-size:0.75rem;color:var(--mi-t3);flex-shrink:0}

/* Disclaimer */
.mi-disc{background:var(--mi-bg2);border:1px solid var(--mi-b);border-radius:var(--mi-r);padding:0.9rem 1rem;font-size:0.72rem;color:var(--mi-t3);line-height:1.65;margin:2rem 0;display:flex;gap:8px;align-items:flex-start;font-family:var(--mi-f)}

/* Footer */
.mi-ftr{border-top:1px solid var(--mi-b);padding:1.75rem 0;margin-top:2rem;background:var(--mi-bg)}
.mi-ftr-in{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.mi-ftr-logo{font-size:0.88rem;font-weight:500;color:var(--mi-t);font-family:var(--mi-f)}
.mi-ftr-logo span{color:var(--mi-maple)}
.mi-ftr-disc{font-size:0.68rem;color:var(--mi-t3);max-width:500px;line-height:1.65;margin-top:0.3rem;font-family:var(--mi-f)}
.mi-ftr-links{display:flex;gap:1.25rem;flex-shrink:0}
.mi-ftr-links a{font-size:0.75rem;color:var(--mi-t3);text-decoration:none;font-family:var(--mi-f)}
.mi-ftr-links a:hover{color:var(--mi-t2)}

@media(max-width:620px){
  .mi-h1{font-size:1.4rem}
  .mi-cta{flex-direction:column;align-items:flex-start}
  .mi-fg{min-width:44%}
  .mi-trust{display:none}
}

/* ── SITE NAV ── */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: nowrap; }
.site-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.site-nav a { padding: 0.42rem 1.1rem; border-radius: 7px; font-size: 0.83rem; font-weight: 500; font-family: var(--font); border: 1px solid transparent; background: transparent; color: var(--text-2); transition: all 0.15s; text-decoration: none; display: inline-block; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a.active { background: var(--bg-2); color: var(--text); border-color: var(--border-md); box-shadow: var(--shadow-sm); }

/* ══════════════════════════════════════
   BEST MONTHLY INCOME ETFs PAGE (bmi-)
══════════════════════════════════════ */

.bmi-bc { padding: 0.75rem 0; display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-3); }
.bmi-bc a { color: var(--text-3); text-decoration: none; }
.bmi-bc a:hover { color: var(--text-2); }
.bmi-bc-sep { opacity: 0.4; }

.bmi-hero { padding: 1.5rem 0 1.4rem; }
.bmi-ey { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--maple); margin-bottom: 0.55rem; }
.bmi-h1 { font-size: 1.7rem; font-weight: 500; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 0.45rem; }
.bmi-h1 em { color: var(--maple); font-style: normal; }
.bmi-hsub { font-size: 0.87rem; color: var(--text-2); max-width: 560px; line-height: 1.65; }
.bmi-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 0.9rem; }
.bmi-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px; font-size: 0.76rem; font-weight: 500; background: var(--bg-2); border: 1px solid var(--border-md); color: var(--text-2); }

.bmi-fb { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.9rem 1rem; margin-bottom: 1rem; }
.bmi-fsl { font-size: 0.63rem; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 0.55rem; }
.bmi-fr { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.bmi-fg { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 110px; }
.bmi-fl { font-size: 0.64rem; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.bmi-fg select { font-family: var(--font); font-size: 0.8rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-md); border-radius: var(--radius-sm); padding: 0.4rem 1.9rem 0.4rem 0.65rem; outline: none; transition: border-color 0.15s; width: 100%; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 4.5L11 1' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.55rem center; }
.bmi-fg select:focus { border-color: var(--maple); box-shadow: 0 0 0 2px var(--maple-mid); }
.bmi-fdiv { width: 100%; height: 1px; background: var(--border); margin: 0.7rem 0; }
.bmi-rbtn { font-family: var(--font); font-size: 0.77rem; color: var(--text-3); background: transparent; border: 1px solid var(--border-md); border-radius: var(--radius-sm); padding: 0.4rem 0.85rem; cursor: pointer; white-space: nowrap; align-self: flex-end; transition: all 0.15s; }
.bmi-rbtn:hover { color: var(--text-2); border-color: var(--border-strong); }
.bmi-aft { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 0.65rem; }
.bmi-aftag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 500; background: var(--maple-light); color: var(--maple); border: 1px solid rgba(200,16,46,0.2); }
.bmi-aftag-x { cursor: pointer; opacity: 0.7; font-size: 0.8rem; line-height: 1; }
.bmi-aftag-x:hover { opacity: 1; }

.bmi-rm { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; flex-wrap: wrap; gap: 8px; }
.bmi-rc { font-size: 0.79rem; color: var(--text-3); }
.bmi-rc strong { color: var(--text-2); font-weight: 500; }
.bmi-sh2 { font-size: 0.72rem; color: var(--text-3); }

.bmi-twrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.bmi-tbl { width: 100%; border-collapse: collapse; min-width: 580px; }
.bmi-tbl thead th { padding: 0.6rem 0.85rem; text-align: left; font-size: 0.66rem; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); background: var(--bg-2); white-space: nowrap; cursor: pointer; user-select: none; transition: color 0.12s; }
.bmi-tbl thead th:hover { color: var(--text-2); }
.bmi-tbl thead th.bmi-sorted { color: var(--maple); }
.bmi-sarr { display: inline-block; margin-left: 3px; font-size: 0.6rem; opacity: 0.4; }
.bmi-sorted .bmi-sarr { opacity: 1; }
.bmi-tbl tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
.bmi-tbl tbody tr:last-child { border-bottom: none; }
.bmi-tbl tbody tr:hover { background: var(--bg-2); }
.bmi-tbl tbody td { padding: 0.7rem 0.85rem; vertical-align: middle; }
.bmi-none { display: none; text-align: center; padding: 3.5rem 1rem; color: var(--text-3); font-size: 0.87rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.bmi-none strong { display: block; font-size: 1.05rem; margin-bottom: 0.35rem; color: var(--text-2); }

.bmi-sec { margin: 2rem 0; }
.bmi-sec-ey { font-size: 0.67rem; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--maple); margin-bottom: 0.4rem; }
.bmi-sec-tt { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.3px; margin-bottom: 1rem; color: var(--text); }

.bmi-ig { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.bmi-ic { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; display: flex; gap: 10px; align-items: flex-start; }
.bmi-ii { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.bmi-it { font-size: 0.8rem; color: var(--text-2); line-height: 1.55; }
.bmi-it strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; font-size: 0.82rem; }

.bmi-hg { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.bmi-hc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; }
.bmi-hs { font-size: 0.63rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--maple); margin-bottom: 4px; }
.bmi-ht { font-size: 0.87rem; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.bmi-hd { font-size: 0.77rem; color: var(--text-2); line-height: 1.55; }

.bmi-cta { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin: 2rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.bmi-cta-ey { font-size: 0.67rem; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--maple); margin-bottom: 0.3rem; }
.bmi-cta-tt { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.2px; margin-bottom: 0.25rem; color: var(--text); }
.bmi-cta-sb { font-size: 0.8rem; color: var(--text-2); line-height: 1.55; max-width: 400px; }
.bmi-cta-fs { display: flex; flex-direction: column; gap: 4px; margin-top: 0.7rem; }
.bmi-cta-f { display: flex; align-items: center; gap: 7px; font-size: 0.77rem; color: var(--text-2); }
.bmi-cta-d { width: 5px; height: 5px; border-radius: 50%; background: var(--maple); flex-shrink: 0; }
.bmi-btn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font); font-size: 0.85rem; font-weight: 500; color: #fff; background: var(--maple); border: none; border-radius: var(--radius-sm); padding: 9px 18px; cursor: pointer; text-decoration: none; transition: all 0.15s; white-space: nowrap; box-shadow: var(--shadow-cta); }
.bmi-btn:hover { background: var(--maple-dark); box-shadow: 0 6px 20px rgba(200,16,46,0.4); transform: translateY(-1px); text-decoration: none; }

.bmi-faq { display: flex; flex-direction: column; gap: 6px; }
.bmi-fqi { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bmi-fqq { width: 100%; text-align: left; padding: 0.9rem 1rem; background: var(--surface); border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--font); font-size: 0.85rem; font-weight: 500; color: var(--text); transition: background 0.12s; }
.bmi-fqq:hover { background: var(--bg-2); }
.bmi-fqch { font-size: 0.65rem; color: var(--text-3); flex-shrink: 0; transition: transform 0.2s; }
.bmi-fqi.open .bmi-fqch { transform: rotate(180deg); }
.bmi-fqa { display: none; padding: 0.8rem 1rem 0.9rem; font-size: 0.8rem; color: var(--text-2); line-height: 1.7; border-top: 1px solid var(--border); background: var(--bg-2); }
.bmi-fqi.open .bmi-fqa { display: block; }

.bmi-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; }
.bmi-lc { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 1rem; text-decoration: none; color: var(--text); transition: all 0.14s; }
.bmi-lc:hover { border-color: var(--border-strong); background: var(--bg-2); transform: translateY(-1px); text-decoration: none; }
.bmi-li { font-size: 1.1rem; flex-shrink: 0; }
.bmi-lt { font-size: 0.83rem; font-weight: 500; color: var(--text); }
.bmi-ls { font-size: 0.7rem; color: var(--text-3); margin-top: 1px; }
.bmi-la { margin-left: auto; font-size: 0.75rem; color: var(--text-3); flex-shrink: 0; }

.bmi-disc { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; font-size: 0.72rem; color: var(--text-3); line-height: 1.65; margin: 2rem 0; display: flex; gap: 8px; align-items: flex-start; }

@media (max-width: 620px) {
  .bmi-h1 { font-size: 1.4rem; }
  .bmi-cta { flex-direction: column; align-items: flex-start; }
  .bmi-fg { min-width: 44%; }
}

/* ── NAV DROPDOWNS ── */
.nav-dropdown { position: relative; }
.nav-dropdown-btn { padding: 0.42rem 1.1rem; border-radius: 7px; font-size: 0.83rem; font-weight: 500; font-family: var(--font); border: 1px solid transparent; background: transparent; color: var(--text-2); transition: all 0.15s; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-dropdown-btn:hover { color: var(--text); }
.nav-dropdown-btn.active { background: var(--bg-2); color: var(--text); border-color: var(--border-md); box-shadow: var(--shadow-sm); }
.nav-dropdown-arrow { font-size: 0.6rem; opacity: 0.6; transition: transform 0.2s; }
.nav-dropdown-btn.open .nav-dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border-md); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 240px; z-index: 200; padding: 6px; }
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-section { font-size: 0.63rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-3); padding: 0.6rem 0.85rem 0.3rem; }
.nav-dropdown-menu a { display: block; padding: 0.45rem 0.85rem; font-size: 0.82rem; color: var(--text-2); text-decoration: none; border-radius: var(--radius-sm); transition: all 0.12s; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: var(--bg-2); color: var(--text); text-decoration: none; }
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 6px 0; }