/* SpreadScout — design system (Theme B: Fintech — emerald/cyan, Sora + IBM Plex Sans) */
:root{
  --navy:#0c1b2a; --navy-2:#0c1b2a; --ink:#0f2233; --line:#dde8f0;
  --paper:#ffffff; --mist:#f0fdf9; --gold:#0891b2; --gold-d:#0891b2;
  --green:#0e9f6e; --red:#e11d48; --muted:#5a6b7a; --muted-2:#94a3b8;
  --cyan:#06b6d4;
  --shadow:0 1px 3px rgba(15,23,42,.05),0 6px 24px rgba(15,23,42,.08);
  --bg:#ffffff;
  --surface:#f4f8fb;
  --surface-2:#eaf2f8;
  --acc1:#06b6d4;
  --acc2:#2563eb;
  --acc:#06b6d4;
  --grad:linear-gradient(135deg,#06b6d4,#2563eb);
  --font-head:'Sora';  --font-body:'IBM Plex Sans';
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body,'Inter'),system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head,var(--font-body,'Inter')),Georgia,serif;color:var(--navy);line-height:1.15;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:12px 20px;border-radius:4px;transition:.18s;cursor:pointer;border:1px solid transparent}
.btn-gold{background:var(--gold);color:#1a1407;box-shadow:0 6px 18px rgba(200,162,75,.35)}
.btn-gold:hover{background:var(--gold-d);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-line{background:#fff;border-color:var(--line);color:var(--navy)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-d)}
.eyebrow{font-family:var(--font-body,'Inter');font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d)}
.stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;background:#eaf6f1;color:var(--green);border:1px solid #cdeadf}

.ribbon{position:fixed;top:14px;right:-44px;transform:rotate(45deg);background:var(--gold);color:#1a1407;font-size:11px;font-weight:700;letter-spacing:.08em;padding:6px 56px;z-index:200;box-shadow:var(--shadow)}

.topbar{background:var(--navy);color:#c7d2e2;font-size:12.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
.topbar b{color:#fff}.topbar .disc{color:#93a2bb}

header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head,var(--font-body,'Inter'));font-weight:600;font-size:21px;color:var(--navy)}
.brand .mark{width:34px;height:34px;display:grid;place-items:center;background:var(--navy);border-radius:9px}
.brand .mark svg{width:19px;height:19px}
.brand .tld{color:var(--gold-d)}
.menu{display:flex;gap:28px;font-size:14.5px;font-weight:500;color:var(--ink)}
.menu a{position:relative;padding:4px 0}.menu a:hover{color:var(--gold-d)}
.menu a.active{color:var(--gold-d)}
.nav-cta{display:flex;align-items:center;gap:14px}

.hero{background:radial-gradient(1200px 600px at 50% -12%,#064e3b 0%,var(--navy) 52%,#020617 100%);color:#fff;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;mask:radial-gradient(700px 360px at 80% 0,#000,transparent)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;padding:78px 24px 84px;align-items:center}
.hero h1{color:#fff;font-size:54px;font-weight:600;margin:18px 0 18px}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p.lede{font-size:18px;color:#cdd9ea;max-width:30em}
.hero .cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero .meta{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero .meta div{display:flex;flex-direction:column}
.hero .meta .n{font-family:var(--font-head,var(--font-body,'Inter'));font-size:26px;font-weight:600;color:#fff}
.hero .meta .l{font-size:12.5px;color:#9fb0ca;letter-spacing:.02em}

.scorecard{background:#fff;color:var(--ink);border-radius:6px;box-shadow:0 30px 60px rgba(4,12,26,.45);overflow:hidden;border:1px solid rgba(255,255,255,.4)}
.scorecard .sc-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--mist);border-bottom:1px solid var(--line)}
.sc-h .tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d)}
.sc-rank{font-size:12px;color:var(--muted);font-weight:600}
.sc-body{padding:20px}
.sc-broker{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sc-logo{width:46px;height:46px;border-radius:4px;background:linear-gradient(135deg,#0e2342,#1d4a86);display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--font-head,var(--font-body,'Inter'));font-size:18px}
.sc-broker h3{font-size:19px}.sc-broker .reg{font-size:12px;color:var(--muted)}
.score-big{font-family:var(--font-head,var(--font-body,'Inter'));font-size:34px;font-weight:700;color:var(--navy);line-height:1}
.sc-rows{margin-top:6px}
.sc-rows .r{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;border-top:1px dashed var(--line)}
.sc-rows .r span{color:var(--muted)}.sc-rows .r b{color:var(--ink);font-weight:600}
.sc-body .btn{width:100%;justify-content:center;margin-top:16px}

.trust{background:var(--navy-2);color:#aebed6;border-top:1px solid rgba(255,255,255,.06)}
.trust .wrap{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;padding:16px 24px;font-size:13px;font-weight:500}
.trust b{color:#fff}.trust .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}

section.block{padding:74px 0}
.sec-head{max-width:42em;margin-bottom:34px}
.sec-head h2{font-size:36px;font-weight:600}
.sec-head p{color:var(--muted);font-size:16.5px;margin-top:10px}

.tbl-wrap{border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{background:var(--navy);color:#dfe7f2;text-align:left;padding:15px 16px;font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
thead th:first-child{width:34%}
tbody td{padding:15px 16px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr:nth-child(even){background:var(--mist)}
tbody tr:hover{background:#eef3fb}
.bk{display:flex;align-items:center;gap:12px}
.bk .rk{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;flex:none}
.bk .lg{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--font-head,var(--font-body,'Inter'));font-size:15px;flex:none}
.bk h4{font-size:15.5px;font-family:var(--font-body,'Inter');font-weight:700;color:var(--navy)}
.bk .rr{font-size:11.5px;color:var(--muted)}
.rate{display:flex;flex-direction:column;gap:2px}
.rate b{font-family:var(--font-head,var(--font-body,'Inter'));font-size:18px;color:var(--navy)}.rate .stars{font-size:12px}
td .btn{padding:9px 16px;font-size:13.5px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(10,26,48,.13)}
.card .top{padding:20px 20px 0;display:flex;align-items:center;justify-content:space-between}
.card .lg{width:44px;height:44px;border-radius:4px;display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--font-head,var(--font-body,'Inter'))}
.card .sb{text-align:right}.card .sb b{font-family:var(--font-head,var(--font-body,'Inter'));font-size:24px;color:var(--navy);display:block;line-height:1}
.card .body{padding:14px 20px 20px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:19px;margin-bottom:4px}
.card .who{font-size:12.5px;color:var(--gold-d);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.card p.verdict{font-size:14px;color:var(--muted);margin:12px 0 14px}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:13px;margin-bottom:16px}
.pc .h{font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.pc .pro .h{color:var(--green)}.pc .con .h{color:var(--red)}
.pc li{list-style:none;padding-left:16px;position:relative;color:var(--ink);margin:3px 0}
.pc .pro li:before{content:"+";position:absolute;left:0;color:var(--green);font-weight:700}
.pc .con li:before{content:"–";position:absolute;left:0;color:var(--red);font-weight:700}
.card .foot{margin-top:auto;display:flex;gap:10px}
.card .foot .btn{flex:1;justify-content:center;padding:10px}

.method{background:var(--mist)}
.method .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.crit{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.crit .c{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.crit .c .ic{width:34px;height:34px;border-radius:8px;background:#eef3fb;display:grid;place-items:center;margin-bottom:10px;color:var(--navy)}
.crit .c h4{font-family:var(--font-body,'Inter');font-weight:700;font-size:14.5px;margin-bottom:3px}
.crit .c p{font-size:12.5px;color:var(--muted)}
.author{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px;box-shadow:var(--shadow)}
.author .row{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.author .av{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#1d4a86,#0e2342);color:#fff;display:grid;place-items:center;font-family:var(--font-head,var(--font-body,'Inter'));font-size:22px;font-weight:600;flex:none}
.author h4{font-size:18px}.author .role{font-size:13px;color:var(--gold-d);font-weight:600}
.author p{font-size:14px;color:var(--muted)}
.author .badges{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.author .badges span{font-size:11.5px;background:var(--mist);border:1px solid var(--line);padding:5px 10px;border-radius:20px;color:var(--ink);font-weight:500}

.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden}
.faq summary{padding:18px 20px;font-weight:600;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:22px;color:var(--gold-d);font-weight:400}
.faq details[open] summary:after{content:"–"}
.faq .a{padding:0 20px 20px;color:var(--muted);font-size:15px}

.band{background:radial-gradient(900px 400px at 20% 0,#16335c,var(--navy));color:#fff;border-radius:18px;padding:48px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.band h2{color:#fff;font-size:30px}.band p{color:#cdd9ea;margin-top:8px;max-width:34em}

footer{background:var(--navy);color:#9fb0ca;font-size:13.5px;margin-top:74px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding:56px 0 36px}
.foot-grid h5{color:#fff;font-family:var(--font-body,'Inter');font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.foot-grid a{display:block;padding:5px 0;color:#9fb0ca}.foot-grid a:hover{color:var(--gold)}
.foot-grid .brand{color:#fff;margin-bottom:12px}
.disclosure{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:12px;color:#7e8ca6;line-height:1.7}
.riskwarn{background:#3a2a12;border:1px solid #5c4520;color:#e8d3a6;font-size:12px;padding:12px 16px;border-radius:8px;margin-bottom:18px}
.copy{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;justify-content:space-between;color:#6f7e98;font-size:12px;flex-wrap:wrap;gap:10px}

/* live widgets */
.ticker{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:70px;z-index:99;transition:top .25s ease}
.markets{background:#fff}
.mkt-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}
.mkt-grid.lower{grid-template-columns:1fr 1fr;margin-top:22px}
.panel{border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.panel .ph{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--mist)}
.panel .ph h4{font-family:var(--font-body,'Inter');font-weight:700;font-size:14px;color:var(--navy);display:flex;align-items:center;gap:8px}
.panel .ph .live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.05em}
.panel .ph .live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.panel .pb{padding:0;min-height:60px}

/* ===== breadcrumb ===== */
.crumb{background:var(--mist);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.crumb .wrap{padding:12px 24px}
.crumb a:hover{color:var(--gold-d)}
.crumb b{color:var(--ink)}

/* ===== REVIEW PAGE ===== */
.rev-hero{background:linear-gradient(180deg,#0e2342,#0a1a30);color:#fff;padding:46px 0 40px}
.rev-hero .wrap{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.rev-id{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.rev-id .lg{width:74px;height:74px;border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--font-head,var(--font-body,'Inter'));font-size:30px;flex:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.rev-id h1{color:#fff;font-size:38px;font-weight:600}
.rev-id .regs{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.rev-id .regs span{font-size:11.5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:4px 10px;border-radius:20px;color:#dfe7f2}
.rev-lede{font-size:17px;color:#cdd9ea;max-width:42em;margin-bottom:22px}
.rev-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden}
.rev-quick .q{background:#0c1f3b;padding:14px 16px}
.rev-quick .q .l{font-size:11px;color:#93a6c4;text-transform:uppercase;letter-spacing:.05em}
.rev-quick .q .v{font-family:var(--font-head,var(--font-body,'Inter'));font-size:18px;color:#fff;margin-top:3px}
/* sticky score box */
.scorebox{background:#fff;color:var(--ink);border-radius:6px;box-shadow:0 30px 60px rgba(4,12,26,.5);overflow:hidden;position:sticky;top:90px}
.scorebox .sh{background:var(--gold);color:#1a1407;text-align:center;padding:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.scorebox .sbig{text-align:center;padding:22px 20px 12px}
.scorebox .sbig .num{font-family:var(--font-head,var(--font-body,'Inter'));font-size:58px;font-weight:700;color:var(--navy);line-height:.9}
.scorebox .sbig .out{font-size:13px;color:var(--muted)}
.scorebox .sbig .stars{font-size:18px;margin-top:6px}
.vband{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;vertical-align:middle}
.scorebox .sbig .vband{margin-left:8px}
.vband-exc{background:#dcfce7;color:#15803d}.vband-strong{background:#e0f2fe;color:#0369a1}
.vband-good{background:#fef9c3;color:#a16207}.vband-avg{background:#fee2e2;color:#b91c1c}.vband-low{background:#f3f4f6;color:#6b7280}
.trust-strip{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}
.ts-people{display:flex;flex-wrap:wrap;gap:22px}
.ts-person{display:flex;align-items:center;gap:9px}
.ts-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex:0 0 auto}
.ts-av.alt{background:var(--navy)}.ts-av.chk{background:#15803d;font-size:15px}
.ts-person .ts-role,.ts-updated .ts-role{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ts-person b,.ts-updated b{font-size:13.5px;color:var(--ink)}
.ts-updated{text-align:right}
.trust-note{background:#f7f9fc;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:12px 16px;font-size:13.5px;color:var(--ink);margin-bottom:22px;line-height:1.5}
.trust-note a{color:var(--gold-d);font-weight:600;white-space:nowrap}
@media (max-width:640px){.ts-updated{text-align:left}}
/* cost comparison table */
.ctable-wrap{margin:18px 0 8px}
.ctable{width:100%;border-collapse:collapse;font-size:13.5px}
.ctable th,.ctable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.ctable thead th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;background:var(--mist)}
.ctable td:first-child,.ctable th:first-child{color:var(--muted)}
.ctable .me{background:#fbf7ec;font-weight:700;color:var(--ink)}
.ctable tbody td.me{color:var(--ink)}
.ctable-note{font-size:11.5px;color:var(--muted-2);margin-top:6px}
/* yes/no */
.yn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700}
.yn.yes{background:#dcfce7;color:#15803d}.yn.no{background:#fee2e2;color:#b91c1c}
.yn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0}
.ync{border:1px solid var(--line);border-radius:4px;padding:12px 8px;text-align:center}
.ync span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
@media (max-width:640px){.yn-grid{grid-template-columns:repeat(3,1fr)}.ctable{font-size:12px}.ctable th,.ctable td{padding:8px}}
/* compare page */
.vs-hero{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 26px}
.vs-card{position:relative;border:1px solid var(--line);border-radius:4px;padding:22px;text-align:center;background:#fff}
.vs-card.is-winner{border-color:var(--gold);box-shadow:0 10px 30px rgba(193,154,73,.18)}
.vs-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a1407;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 12px;border-radius:999px}
.vs-id{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
.vs-lg{width:40px;height:40px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}
.vs-id b{font-size:18px;color:var(--ink)}
.vs-score{font-family:var(--font-head,var(--font-body,'Inter'));font-size:44px;font-weight:700;color:var(--navy);line-height:1}
.vs-score span{font-family:var(--font-body,'Inter');font-size:13px;color:var(--muted);margin-left:4px}
.vs-cta{display:block;margin:14px 0 8px;justify-content:center}
.vs-review{display:block;font-size:13px;color:var(--gold-d);font-weight:600}
.vs-table td.win{background:#dcfce7;color:#15803d;font-weight:700}
.vs-foot{margin-top:22px;font-size:14px;color:var(--ink)}.vs-foot a{color:var(--gold-d);font-weight:600}
@media (max-width:560px){.vs-hero{grid-template-columns:1fr}}
/* internal link grid */
.ilg-h{font-family:var(--font-head,var(--font-body,'Inter'));font-size:24px;color:var(--navy);margin:28px 0 14px}
.ilg-compare{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}
.ilg-compare a{font-size:13px;color:var(--ink);background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;transition:all .12s}
.ilg-compare a:hover{background:#fbf7ec;border-color:var(--gold);color:var(--gold-d)}
.ilg-reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ilg-card{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;background:#fff;transition:all .12s}
.ilg-card:hover{border-color:var(--gold);box-shadow:0 8px 22px rgba(4,12,26,.08)}
.ilg-lg{width:38px;height:38px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex:0 0 auto}
.ilg-card b{display:block;font-size:14px;color:var(--ink)}
.ilg-rt{font-size:11.5px;color:var(--muted)}
@media (max-width:860px){.ilg-reviews{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.ilg-reviews{grid-template-columns:1fr}}
/* find-my-broker quiz */
.quiz .q{margin-bottom:24px}
.quiz .q h3{font-size:17px;color:var(--ink);margin-bottom:12px}
.quiz .opts{display:flex;flex-wrap:wrap;gap:9px}
.quiz .opts button{font-size:14px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:4px;padding:11px 16px;cursor:pointer;transition:all .12s}
.quiz .opts button:hover{border-color:var(--gold)}
.quiz .opts button.sel{background:var(--navy);color:#fff;border-color:var(--navy)}
#quiz-go{margin-top:8px}
#quiz-go:disabled{opacity:.45;cursor:not-allowed}
.quiz-hint{font-size:12.5px;color:var(--muted);margin-top:10px}
.quiz-results{margin-top:18px}
.qr-h{font-family:var(--font-head,var(--font-body,'Inter'));font-size:26px;color:var(--navy);margin:10px 0 16px}
.qr-card{position:relative;display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:4px;padding:16px;margin-bottom:12px;background:#fff}
.qr-card.top{border-color:var(--gold);box-shadow:0 10px 30px rgba(193,154,73,.16)}
.qr-badge{position:absolute;top:-11px;left:16px;background:var(--gold);color:#1a1407;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 11px;border-radius:999px}
.qr-lg{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;flex:0 0 auto}
.qr-mid{flex:1;min-width:0}.qr-mid b{display:block;font-size:16px;color:var(--ink)}
.qr-why{font-size:12.5px;color:var(--muted);text-transform:capitalize}
.qr-rt{font-family:var(--font-head,var(--font-body,'Inter'));font-size:26px;font-weight:700;color:var(--navy)}.qr-rt small{font-size:12px;color:var(--muted);font-family:var(--font-body,'Inter')}
.qr-cta{display:flex;flex-direction:column;gap:4px;align-items:center}
.qr-rev{font-size:12px;color:var(--gold-d);font-weight:600}
.qr-foot{font-size:11.5px;color:var(--muted-2);margin-top:8px}
@media (max-width:560px){.qr-card{flex-wrap:wrap}.qr-rt{order:3}}
.scorebox .subs{padding:4px 20px 8px}
.subrow{margin:10px 0}
.subrow .t{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px}
.subrow .t b{color:var(--ink)}.subrow .t span{color:var(--muted)}
.subrow .t .wt{font-style:normal;font-size:10.5px;color:var(--muted-2);background:var(--mist);border-radius:4px;padding:1px 5px;margin-left:4px}
.bar{height:7px;background:var(--mist);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-d));border-radius:6px}
.scorebox .cta{padding:14px 20px 20px}
.scorebox .cta .btn{width:100%;justify-content:center}
.scorebox .cta .mini{text-align:center;font-size:11px;color:var(--muted-2);margin-top:8px}

/* review body / prose */
.rev-layout{display:grid;grid-template-columns:1fr 300px;gap:44px;padding:54px 0}
.toc{position:sticky;top:90px;align-self:start;border-left:2px solid var(--line);padding-left:16px}
.toc h5{font-family:var(--font-body,'Inter');font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.toc a{display:block;font-size:13.5px;color:var(--ink);padding:5px 0}.toc a:hover{color:var(--gold-d)}
.prose{max-width:none}
.prose h2{font-size:27px;margin:34px 0 12px;padding-top:8px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;font-family:var(--font-body,'Inter');font-weight:700;color:var(--navy);margin:22px 0 8px}
.prose p{font-size:16px;color:#2c3c52;margin:12px 0}
.prose ul{margin:12px 0 12px 4px}
.prose ul li{list-style:none;padding-left:24px;position:relative;margin:8px 0;font-size:15.5px;color:#2c3c52}
.prose ul li:before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.prose .lead{font-size:18px;color:var(--ink)}
.callout{background:var(--mist);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:16px 18px;margin:20px 0;font-size:15px}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.proscons .col{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.proscons .col h4{font-family:var(--font-body,'Inter');font-size:14px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.proscons .pro h4{color:var(--green)}.proscons .con h4{color:var(--red)}
.proscons li{list-style:none;padding-left:22px;position:relative;margin:8px 0;font-size:14.5px}
.proscons .pro li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.proscons .con li:before{content:"✕";position:absolute;left:0;color:var(--red);font-weight:700}
.dtable{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:18px 0}
.dtable .r{display:flex;justify-content:space-between;padding:12px 16px;font-size:14.5px;border-top:1px solid var(--line)}
.dtable .r:first-child{border-top:none}
.dtable .r:nth-child(even){background:var(--mist)}
.dtable .r span{color:var(--muted)}.dtable .r b{color:var(--ink)}

/* ===== BLOG ===== */
.page-head{background:radial-gradient(900px 420px at 80% -20%,#16335c,var(--navy));color:#fff;padding:60px 0 56px}
.page-head h1{color:#fff;font-size:46px;font-weight:600;max-width:16em}
.page-head p{color:#cdd9ea;font-size:18px;margin-top:14px;max-width:40em}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bpost{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.18s}
.bpost:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(10,26,48,.13)}
.bpost .thumb{height:160px;background:linear-gradient(135deg,#16335c,#0a1a30);position:relative;display:grid;place-items:center;color:#88a;overflow:hidden}
.bpost .thumb:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px}
.bpost .thumb .cat{position:absolute;top:12px;left:12px;background:var(--gold);color:#1a1407;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.03em}
.bpost .thumb .emoji{font-size:42px;position:relative}
.bpost .b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.bpost h3{font-size:19px;margin-bottom:8px;line-height:1.25}
.bpost p{font-size:14px;color:var(--muted);flex:1}
.bpost .m{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;color:var(--muted-2)}
.bpost .m .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#1d4a86,#0e2342);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--font-head,var(--font-body,'Inter'))}
.feat{display:grid;grid-template-columns:1.4fr 1fr;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:40px;background:#fff}
.feat .img{background:linear-gradient(135deg,#16335c,#0a1a30);min-height:300px;position:relative;display:grid;place-items:center;font-size:64px;color:#7e94c0}
.feat .img:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px}
.feat .c{padding:34px}
.feat .cat{display:inline-block;background:#eaf1fb;color:var(--navy);font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.03em;margin-bottom:14px}
.feat h2{font-size:30px;margin-bottom:12px}
.feat p{color:var(--muted);font-size:16px}

/* article */
.article{max-width:760px;margin:0 auto;padding:54px 24px}
.article .kicker{color:var(--gold-d);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
.article h1{font-size:42px;font-weight:600;margin:12px 0 16px;line-height:1.12}
.article .byline{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:28px;font-size:13.5px;color:var(--muted)}
.article .byline .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#1d4a86,#0e2342);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;font-family:var(--font-head,var(--font-body,'Inter'))}
.article .byline b{color:var(--ink)}

@media(max-width:980px){
  .rev-hero .wrap{grid-template-columns:1fr}
  .rev-layout{grid-template-columns:1fr}
  .toc{display:none}
  .scorebox{position:static}
}
@media(max-width:900px){
  .hero .wrap,.method .grid{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:40px}
  .cards,.blog-grid{grid-template-columns:1fr}
  .crit,.proscons,.rev-quick{grid-template-columns:1fr 1fr}
  .feat{grid-template-columns:1fr}
  .mkt-grid,.mkt-grid.lower{grid-template-columns:1fr}
  .menu,.topbar .disc{display:none}
  .tbl-wrap{overflow-x:auto}table{min-width:720px}
  .page-head h1{font-size:34px}.article h1{font-size:32px}
  .method-stats{grid-template-columns:repeat(2,1fr)!important}
}

/* methodology */
.method-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 34px}
.method-stats .ms{background:var(--navy);color:#fff;border-radius:12px;padding:18px 16px;text-align:center}
.method-stats .ms .n{font-family:var(--font-head,var(--font-body,'Inter'));font-size:30px;font-weight:700;color:var(--gold);line-height:1}
.method-stats .ms .l{font-size:12px;color:rgba(255,255,255,.72);margin-top:6px}
.crit h4 .pw{font-size:12px;font-weight:700;color:var(--gold-d);background:var(--mist);border-radius:5px;padding:2px 7px;margin-left:4px;vertical-align:middle}
.band-key{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.band-key .bk{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;padding:8px 12px}
.band-key .bkr{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.method-steps{counter-reset:ms;list-style:none;padding:0;margin:18px 0}
.method-steps li{position:relative;padding:0 0 16px 44px;margin:0}
.method-steps li::before{counter-increment:ms;content:counter(ms);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#1a1407;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}

/* awards */
.aw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.aw-card{border:1px solid var(--line);border-radius:4px;padding:18px;background:#fff;display:flex;flex-direction:column}
.aw-ribbon{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.aw-icon{font-size:20px}
.aw-cat{font-family:var(--font-head,var(--font-body,'Inter'));font-size:17px;font-weight:700;color:var(--navy)}
.aw-win{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.aw-lg{width:42px;height:42px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex:0 0 auto}
.aw-win b{display:block;font-size:15.5px;color:var(--ink)}
.aw-rt{font-size:11.5px;color:var(--muted)}
.aw-why{font-size:13.5px;color:var(--ink);line-height:1.5;flex:1;margin-bottom:14px}
.aw-cta{display:flex;align-items:center;gap:14px}
.aw-rev{font-size:13px;color:var(--gold-d);font-weight:600;white-space:nowrap}
.aw-foot{font-size:12.5px;color:var(--muted);margin-top:20px;text-align:center}.aw-foot a{color:var(--gold-d);font-weight:600}
@media (max-width:680px){.aw-grid{grid-template-columns:1fr}}
/* is-it-safe box */
.safe-box{border-radius:12px;padding:16px 18px;margin:14px 0 18px;border:1px solid var(--line)}
.safe-box.ok{background:#f0fdf4;border-color:#bbf7d0}
.safe-box.warn{background:#fffbeb;border-color:#fde68a}
.safe-badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.safe-box.ok .safe-badge{background:#dcfce7;color:#15803d}
.safe-box.warn .safe-badge{background:#fef3c7;color:#92400e}
.safe-box p{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
/* best-by-category hub */
.best-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.best-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;padding:20px;text-decoration:none;background:#fff;transition:all .12s}
.best-card:hover{border-color:var(--gold);box-shadow:0 10px 26px rgba(4,12,26,.08);transform:translateY(-2px)}
.best-icon{font-size:24px}
.best-card b{font-family:var(--font-head,var(--font-body,'Inter'));font-size:19px;color:var(--navy);margin:8px 0 4px}
.best-blurb{font-size:13.5px;color:var(--muted);line-height:1.5;flex:1}
.best-go{font-size:13px;color:var(--gold-d);font-weight:600;margin-top:12px}
/* category ranking rows */
.cat-list{display:flex;flex-direction:column;gap:10px}
.cat-row{display:grid;grid-template-columns:30px 46px 1fr auto auto auto;align-items:center;gap:14px;border:1px solid var(--line);border-radius:4px;padding:14px 16px;background:#fff}
.cat-row.top{border-color:var(--gold);box-shadow:0 8px 24px rgba(193,154,73,.14)}
.cat-rank{font-family:var(--font-head,var(--font-body,'Inter'));font-size:20px;font-weight:700;color:var(--muted);text-align:center}
.cat-row.top .cat-rank{color:var(--gold-d)}
.cat-lg{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px}
.cat-id b{display:block;font-size:16px;color:var(--ink)}
.cat-sub{font-size:11.5px;color:var(--muted)}
.cat-hl{text-align:right}
.cat-hl-l{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-2)}
.cat-hl-v{font-size:13.5px;font-weight:600;color:var(--ink)}
.cat-score .vband{font-size:15px;padding:6px 10px;background:#dcfce7;color:#15803d}
.cat-cta{display:flex;flex-direction:column;gap:4px;align-items:center}
.cat-rev{font-size:12px;color:var(--gold-d);font-weight:600}
.cat-note{font-size:12px;color:var(--muted);margin:16px 0 4px}.cat-note a{color:var(--gold-d);font-weight:600}
@media (max-width:760px){
  .best-grid{grid-template-columns:1fr}
  .cat-row{grid-template-columns:24px 40px 1fr auto;gap:10px}
  .cat-hl{display:none}.cat-cta .btn{padding:8px 12px}
}

/* =========================================================================
   THEME TOGGLE (works in both light + dark)
   ========================================================================= */
.theme-toggle{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:4px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;transition:border-color .18s,transform .18s,background .18s}
.theme-toggle:hover{transform:translateY(-1px)}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-toggle .moon{display:none}
html[data-theme="light"] .theme-toggle .sun{display:none}
html[data-theme="light"] .theme-toggle .moon{display:block}

/* =========================================================================
   PREMIUM DARK FINTECH SKIN  (default ON; disabled when html[data-theme="light"])
   Wrapped with native CSS nesting so the toggle can revert to the light base.
   Accent system: violet→cyan = energy/actions; gold = ratings/labels.
   ========================================================================= */
html:not([data-theme="light"]){
&{
  --acc1:#22d3ee; --acc2:#60a5fa; --acc:#22d3ee;
  --grad:linear-gradient(135deg,#22d3ee,#3b82f6);
  --bg:#06141d; --surface:#0c2230; --surface-2:#10303f;
  --gline:rgba(255,255,255,.09);
  /* flip text tokens to light */
  --ink:#e3f0f7; --muted:#8fb0c2; --muted-2:#727c93;
  --line:#1a3645; --mist:rgba(255,255,255,.04); --paper:#0c2230;
  --gold:#22d3ee; --gold-d:#22d3ee;
}
body{
  color:var(--ink);
  background:
    radial-gradient(900px 560px at 86% -120px, rgba(96,165,250,.16), transparent 60%),
    radial-gradient(760px 520px at -5% 8%, rgba(96,165,250,.09), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
h1,h2,h3,h4{color:#f3f5fb}
::selection{background:rgba(96,165,250,.35);color:#fff}

/* header / nav */
header{background:rgba(8,11,20,.72);backdrop-filter:blur(14px);border-bottom-color:var(--gline)}
.brand{color:#f3f5fb}.brand .mark{background:var(--grad)}
.menu{color:#c7cee0}.menu a:hover,.menu a.active{color:#a78bfa}
.eyebrow{color:#c9a64e}.stars{color:#ffc94d}

/* buttons */
.btn-gold{background:var(--grad);color:#0a0d18;box-shadow:0 8px 26px rgba(96,165,250,.40)}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 12px 36px rgba(96,165,250,.55)}
.btn-line{background:rgba(255,255,255,.05);border-color:var(--gline);color:#e7eaf3}
.btn-line:hover{border-color:var(--acc2);color:#fff}

/* hero */
.hero{background:
  radial-gradient(900px 520px at 80% -10%, rgba(96,165,250,.32), transparent 60%),
  radial-gradient(720px 520px at 8% 115%, rgba(96,165,250,.20), transparent 55%),
  linear-gradient(180deg,#0a0e1b,#070a14)}
.hero:after{content:"";position:absolute;width:520px;height:520px;right:-90px;top:-130px;
  background:conic-gradient(from 0deg,#8b5cf6,#22d3ee,#6366f1,#8b5cf6);
  filter:blur(95px);opacity:.30;border-radius:50%;animation:meshFloat 16s ease-in-out infinite;z-index:0}
@keyframes meshFloat{0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(-46px,34px) scale(1.14) rotate(40deg)}}
.hero .wrap{z-index:1}
.hero h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lede{color:#c4d0e6}.hero .meta .n{color:#fff}

/* hero scorecard = premium glass */
.scorecard{background:rgba(17,21,38,.72);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(96,165,250,.18)}
.scorecard .sc-h{background:rgba(255,255,255,.04);border-bottom-color:var(--gline)}
.sc-logo{background:var(--grad)}.score-big,.sc-broker h3{color:#fff}
.sc-rows .r{border-top-color:var(--gline)}

/* generic surfaces -> dark cards */
.card,.author,.crit .c,.faq details,.vs-card,.qr-card,.ilg-card,.bpost,.feat,
.proscons .col,.aw-card,.best-card,.cat-row,.panel,.dtable,.tbl-wrap,.quiz .opts button,
.method-stats .ms,.scorecard{border-color:var(--gline)}
.card,.author,.crit .c,.faq details,.vs-card,.qr-card,.ilg-card,.bpost,.feat,
.proscons .col,.aw-card,.best-card,.cat-row,.panel,.dtable,.quiz .opts button{background:var(--surface)}
.method-stats .ms{background:var(--surface-2)}
.card:hover,.bpost:hover{box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 30px rgba(96,165,250,.16);border-color:rgba(96,165,250,.35)}
.ilg-card:hover,.best-card:hover{border-color:rgba(96,165,250,.5);box-shadow:0 12px 32px rgba(96,165,250,.20)}
.cat-row.top,.vs-card.is-winner,.qr-card.top{border-color:rgba(96,165,250,.55);box-shadow:0 12px 36px rgba(96,165,250,.22)}

/* light text where base used dark navy */
.bk h4,.card .sb b,.cat-id b,.aw-cat,.best-card b,.ilg-card b,.vs-id b,.qr-mid b,.qr-rt,
.vs-score,.faq summary,.ilg-h,.qr-h,.prose h3,.panel .ph h4,.author h4,.toc a,
.score-big{color:#eef1f8}
.prose p,.prose ul li{color:#c3cadb}.prose .lead{color:#e7eaf3}
.crit .c h4,.aw-win b,.dtable .r b,.sc-rows .r b{color:#eef1f8}
.faq summary:after{color:#a78bfa}

/* accent links (gold-d -> violet for interactive) */
.vs-review,.cat-rev,.qr-rev,.aw-rev,.best-go,.vs-foot a,.cat-note a,.aw-foot a,
.trust-note a,.toc a:hover,.crumb a:hover,.ilg-compare a:hover,.foot-grid a:hover{color:#a78bfa}

/* tables */
thead th{background:#0c1326;color:#cdd7ea}
tbody td{border-top-color:var(--gline)}
tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
tbody tr:hover{background:rgba(96,165,250,.08)}
.bk h4{color:#eef1f8}
.dtable .r{border-top-color:var(--gline)}
.dtable .r:nth-child(even){background:rgba(255,255,255,.025)}
.ctable th,.ctable td{border-bottom-color:var(--gline)}
.ctable thead th{background:rgba(255,255,255,.04);color:var(--muted)}
.ctable .me{background:rgba(96,165,250,.14);color:#fff}
.ctable tbody td.me{color:#fff}

/* sticky scorebox = premium glass */
.scorebox{background:rgba(17,21,38,.82);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 50px rgba(96,165,250,.16)}
.scorebox .sh{background:var(--grad);color:#0a0d18}
.scorebox .sbig .num{color:#fff}
.subrow .t .wt{background:rgba(255,255,255,.06);color:#aab4cb}
.bar{background:rgba(255,255,255,.08)}
.bar i{background:var(--grad);box-shadow:0 0 12px rgba(96,165,250,.55)}

/* review + page heroes */
.rev-hero{background:radial-gradient(720px 360px at 85% -40%,rgba(96,165,250,.30),transparent 60%),linear-gradient(180deg,#0b1020,#070a14)}
.rev-quick{background:var(--gline);border-color:var(--gline)}.rev-quick .q{background:rgba(255,255,255,.04)}
.page-head{background:radial-gradient(820px 380px at 80% -20%,rgba(96,165,250,.30),transparent),linear-gradient(180deg,#0b1020,#070a14)}

/* sections / misc surfaces */
.method{background:rgba(255,255,255,.02)}
.crit .c .ic{background:rgba(96,165,250,.16);color:#cbbcff}
.feat .cat{background:rgba(96,165,250,.16);color:#cbbcff}
.band{background:radial-gradient(700px 320px at 20% 0,rgba(96,165,250,.38),transparent),linear-gradient(135deg,#11152a,#0a0e1b);border:1px solid var(--gline)}
.trust-note,.callout{background:rgba(255,255,255,.03);border-color:var(--gline);border-left-color:var(--acc1)}
.author .badges span{background:rgba(255,255,255,.05);border-color:var(--gline);color:#dfe5f1}
.author .av,.article .byline .av,.bpost .m .av{background:var(--grad)}
.quiz .opts button{color:#dfe5f1}
.quiz .opts button:hover{border-color:var(--acc2)}
.quiz .opts button.sel{background:var(--grad);border-color:transparent;color:#0a0d18}
.ilg-compare a{background:var(--surface);border-color:var(--gline);color:#cdd5e6}
.ilg-compare a:hover{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.45);color:#fff}
.ticker{background:rgba(8,11,20,.92);backdrop-filter:blur(10px);border-bottom-color:var(--gline)}.markets{background:transparent}
.panel .ph{background:rgba(255,255,255,.03);border-bottom-color:var(--gline)}

/* is-it-safe box (dark tints) */
.safe-box.ok{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.30)}
.safe-box.warn{background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.30)}
.safe-box p{color:#dfe5f1}

/* live market widgets — dark overrides */
.bv-card{background:var(--surface);border-color:var(--gline)}
.bv-card-sym,.bv-metal-name{color:#c7cee0}
.bv-card-px,.bv-metal-px{color:#f0f2f8}
.bv-metal{background:rgba(255,255,255,.03);border-color:rgba(200,162,75,.22)}
.bv-cal-head{background:var(--surface-2);color:var(--muted-2)}
.bv-cal-row{border-bottom-color:var(--gline)}
.bv-cal-time,.bv-num{color:#8a94ab}
.bv-cal-ev{color:#c7cee0}
.bv-cur{background:rgba(255,255,255,.10);color:#dde3f0}
.bv-news-item{color:#c7cee0;border-bottom-color:var(--gline)}
.bv-news-item:hover{background:rgba(255,255,255,.04)}
.bv-news-title{color:#dde3f0}
.bv-news-when{color:#6e7a8e}
/* pair selector dark */
.bv-ps-btn{border-color:var(--gline);color:var(--muted)}
.bv-ps-btn:hover{border-color:rgba(96,165,250,.5);color:#e2e8f0;background:rgba(255,255,255,.04)}
.bv-ps-btn.active{background:var(--grad);border-color:transparent;color:#0a0d18}
} /* ===== end dark-skin wrapper ===== */

/* ===== theme-independent: motion, logos, nav, sheen (apply in BOTH themes) ===== */
/* scroll-reveal (motion layer hooks; JS adds .reveal/.in). Apple-style variants. */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.7,.2,1),filter .7s ease;will-change:transform,opacity}
  .reveal.in{opacity:1;transform:none;filter:none}
  .reveal.r-scale{transform:translateY(22px) scale(.94)}
  .reveal.r-left{transform:translateX(-46px)}
  .reveal.r-right{transform:translateX(46px)}
  .reveal.r-blur{transform:translateY(16px);filter:blur(12px)}
  .reveal.r-pop{transform:translateY(26px) scale(.9)}
  .reveal.r-pop.in{transition:opacity .55s ease,transform .7s cubic-bezier(.34,1.45,.6,1)}
  /* per-heading internal stagger */
  .sec-head.reveal .eyebrow{opacity:0;transform:translateY(10px);transition:.6s .05s}
  .sec-head.reveal h2{opacity:0;transform:translateY(14px);transition:.6s .12s}
  .sec-head.reveal p{opacity:0;transform:translateY(14px);transition:.6s .2s}
  .sec-head.reveal.in .eyebrow,.sec-head.reveal.in h2,.sec-head.reveal.in p{opacity:1;transform:none}
}

/* ---- Animated "data" candlestick band (bars grow + stat counts up on scroll-in) ---- */
.candleband .cb-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.candleband h2{font-size:32px;margin:8px 0 12px}
.candleband .cb-copy p{color:var(--muted);font-size:17px;max-width:30em}
.candleband .cb-num{font-family:var(--font-head,var(--font-body,'Inter')),serif;color:var(--acc2,#22d3ee);font-weight:700}
.candleband .cb-chart{display:flex;align-items:flex-end;gap:9px;height:190px}
.candleband .cb-bar{flex:1;height:var(--h,50%);border-radius:5px;transform-origin:bottom;transform:scaleY(1);
  background:linear-gradient(180deg,var(--acc2,#22d3ee),var(--acc1,#8b5cf6));box-shadow:0 6px 18px rgba(96,165,250,.18)}
@media (prefers-reduced-motion:no-preference){
  .candleband.reveal .cb-bar{transform:scaleY(0)}
  .candleband.reveal.in .cb-bar{animation:cbGrow .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms) forwards}
}
@keyframes cbGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (max-width:760px){.candleband .cb-inner{grid-template-columns:1fr;gap:28px}.candleband .cb-chart{height:140px;gap:6px}}
/* real broker logos: white chip over the gradient tile; monogram shows if logo missing */
.sc-logo,.bk .lg,.card .lg,.cat-lg,.aw-lg,.vs-lg,.qr-lg,.ilg-lg,.rev-id .lg{position:relative;overflow:hidden}
.brokerlogo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:15%;background:#fff;border-radius:inherit;display:block}
.rev-id .lg .brokerlogo{padding:13%}

/* nav shrink on scroll (background is theme-aware) */
.nav{transition:height .25s ease}
header.scrolled .nav{height:56px}
header.scrolled ~ .ticker{top:56px}
html:not([data-theme="light"]) header.scrolled{background:rgba(8,11,20,.86);box-shadow:0 10px 30px rgba(0,0,0,.45)}
html[data-theme="light"] header.scrolled{background:rgba(255,255,255,.96);box-shadow:0 8px 26px rgba(10,26,48,.10)}
/* gradient CTA sheen on hover for primary buttons */
.btn-gold{position:relative;overflow:hidden}
.btn-gold:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn-gold:hover:after{left:130%}

/* ===== mobile navigation (hamburger) — both themes ===== */
.nav-burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;color:inherit;border-radius:4px;cursor:pointer}
.nav-burger svg{width:20px;height:20px}
@media (max-width:900px){
  .nav-burger{display:inline-flex}
  .menu{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:6px 24px 14px;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .28s ease,opacity .2s ease,visibility .28s;box-shadow:0 24px 44px rgba(0,0,0,.28)}
  header.open .menu{max-height:78vh;opacity:1;visibility:visible}
  .menu a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:16px}
  .menu a:last-child{border-bottom:none}
  .nav-cta .cta-rank{display:none}
}
@media (max-width:380px){ .topbar .wrap span:first-child{display:none} }

/* ---- Image pipeline slots (logo / blog hero / blog cards) ---- */
.brand .mark img{width:26px;height:26px;object-fit:contain;display:block}
.article-hero{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;margin:22px 0 6px;border:1px solid rgba(255,255,255,.08)}
.feat .img img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover}
.bpost .thumb img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.bpost .thumb .cat{z-index:3}

/* ---- Hero live-market chart backdrop (animated, reduced-motion safe) ---- */
.hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero .wrap{z-index:2}
.fx-chart{position:absolute;left:0;right:0;bottom:0;width:100%;height:72%;opacity:.5}
.fx-path{stroke-dasharray:1;stroke-dashoffset:1;animation:fxDraw 2.4s cubic-bezier(.4,0,.2,1) .25s forwards}
.fx-area{opacity:0;animation:fxFade 1.4s ease-out 1.7s forwards}
.fx-dot{fill:var(--acc2,#22d3ee);opacity:0;animation:fxDot 1s ease-out 2.3s forwards;filter:drop-shadow(0 0 6px var(--acc2,#22d3ee))}
.fx-candle{fill:var(--acc1,#8b5cf6);opacity:.42}
.fx-candle.fx-tick{transform-box:fill-box;transform-origin:center bottom;animation:fxTick 4.5s ease-in-out 2.8s infinite}
.fx-glow{position:absolute;border-radius:50%;filter:blur(64px);opacity:.4}
.fx-glow-1{width:420px;height:420px;left:-90px;bottom:-130px;background:radial-gradient(circle,var(--acc1,#8b5cf6),transparent 70%);animation:fxDrift1 17s ease-in-out infinite alternate}
.fx-glow-2{width:340px;height:340px;left:34%;top:-60px;background:radial-gradient(circle,var(--acc2,#22d3ee),transparent 70%);animation:fxDrift2 21s ease-in-out infinite alternate}
@keyframes fxDraw{to{stroke-dashoffset:0}}
@keyframes fxFade{to{opacity:1}}
@keyframes fxDot{to{opacity:1}}
@keyframes fxTick{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.3)}}
@keyframes fxDrift1{to{transform:translate(60px,-28px)}}
@keyframes fxDrift2{to{transform:translate(-46px,40px)}}
@media (max-width:760px){.fx-chart{height:52%;opacity:.38}.fx-glow{display:none}}
@media (prefers-reduced-motion:reduce){
  .fx-path{animation:none;stroke-dashoffset:0}
  .fx-area,.fx-dot{animation:none;opacity:1}
  .fx-candle.fx-tick,.fx-glow{animation:none}
}

/* ---- AEO article blocks: answer / key-takeaways / FAQ ---- */
.article .answer-block{background:var(--mist,#eef3fb);border-left:4px solid var(--acc1,#8b5cf6);border-radius:4px;padding:16px 18px;margin:6px 0 22px;font-size:17px;line-height:1.6}
.article .takeaways{background:var(--mist,#eef3fb);border:1px solid var(--line,#e3e9f3);border-radius:4px;padding:20px 22px;margin:0 0 26px}
.article .takeaways h2{font-size:18px;margin:0 0 10px}
.article .takeaways ul{margin:0;padding-left:18px}
.article .takeaways li{margin:6px 0;color:var(--ink)}
.post-faq{margin:36px 0 8px;border-top:1px solid var(--line,#e3e9f3);padding-top:26px}
.post-faq h2{font-size:24px;margin:0 0 14px}
.post-faq .faq-item{border:1px solid var(--line,#e3e9f3);border-radius:12px;padding:2px 16px;margin-bottom:10px;background:var(--card,#fff)}
.post-faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";float:right;color:var(--acc1,#8b5cf6);font-weight:700}
.post-faq details[open] summary::after{content:"−"}
.post-faq .faq-item p{margin:0 0 14px;color:var(--muted,#5a6a85)}

/* --- DNA variant tokens (apply_dna.py) --- */
.r--sharp{--r-card:4px;--r-btn:6px;--r-pill:6px;}
.r--soft{--r-card:12px;--r-btn:10px;--r-pill:999px;}
.r--pill{--r-card:18px;--r-btn:999px;--r-pill:999px;}
.d--compact{--sec-pad:52px;--lh:1.5;--wrap:1100px;}
.d--regular{--sec-pad:74px;--lh:1.6;--wrap:1160px;}
.d--airy{--sec-pad:100px;--lh:1.7;--wrap:1240px;}
.d--compact section.block{padding:var(--sec-pad,74px) 0}.d--airy section.block{padding:var(--sec-pad,74px) 0}.d--compact .wrap,.d--airy .wrap{max-width:var(--wrap,1160px)}.r--sharp .btn,.r--sharp .scorecard,.r--sharp .tbl-wrap,.r--sharp .panel,.r--sharp .best-card,.r--sharp .aw-card{border-radius:var(--r-card,10px)}.r--sharp .btn{border-radius:var(--r-btn,6px)}.r--pill .btn{border-radius:var(--r-btn,999px)}
/* hero variants: change the COMPOSITION, not just colour */
.hero--centered .hero .wrap{grid-template-columns:1fr!important;text-align:center;justify-items:center;gap:30px}.hero--centered .hero .meta{justify-content:center}.hero--centered .hero .cta-row{justify-content:center}.hero--centered .scorecard{max-width:560px;width:100%;margin:0 auto}
.hero--tablefirst .hero .wrap{grid-template-columns:1fr!important;padding-top:46px;padding-bottom:34px;max-width:var(--wrap,1160px)}.hero--tablefirst .hero .scorecard{display:none}.hero--tablefirst .hero .meta{margin-top:22px}
.hero--magazine .hero .wrap{grid-template-columns:1.5fr .5fr;text-align:left}
.hero--statband .hero .wrap{grid-template-columns:1fr!important}.hero--statband .hero .meta{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);width:100%;justify-content:space-between}
/* nav variant: centred logo */
.nav--centered .nav{position:relative}.nav--centered .brand{position:absolute;left:50%;transform:translateX(-50%)}
/* card variants */
.cards--bordered .scorecard,.cards--bordered .best-card,.cards--bordered .panel{box-shadow:none;border:1px solid var(--line)}.cards--flat .scorecard,.cards--flat .best-card,.cards--flat .panel{box-shadow:none;border:none;background:var(--surface)}
/* --- mobile hardening (added 2026-06-15): no horizontal scroll, fluid media, safe nav --- */
img,svg,video{max-width:100%;height:auto}
.tbl-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tv-lightweight-charts,.bv-chart-wrap,.cb-chart,.panel{max-width:100%}
@media (max-width:760px){
  html,body{overflow-x:hidden}
  .nav--centered .nav{position:static}.nav--centered .brand{position:static;left:auto;transform:none}
  .tv-lightweight-charts,.tv-lightweight-charts canvas,.tv-lightweight-charts table{max-width:100%!important}
  .bv-chart-wrap,.cb-chart{width:100%!important;max-width:100%!important}
  table:not(.bv-cal-table){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hero .wrap{padding-left:18px;padding-right:18px}
  .wrap{padding-left:18px;padding-right:18px}
  .btn{min-height:44px}
}

/* ======================================================================
   PHASE 2: COMPONENT VARIANT SYSTEM
   These variant classes are stamped onto <body> by apply_dna.py.
   ====================================================================== */

/* ---- BUTTON SYSTEM: solid-sharp (btns--sharp) ---- */
.btns--sharp .btn{border-radius:4px!important}
.btns--sharp .btn-gold{box-shadow:0 4px 14px rgba(6,182,212,.4);letter-spacing:.01em;font-weight:700}
.btns--sharp .btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(6,182,212,.55)}

/* ---- FOOTER STYLE: slim-single (footer--slim) ---- */
.footer--slim footer{margin-top:0}
.footer--slim .foot-grid{display:none!important}
.footer--slim .foot-slim{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1)}
.footer--slim .foot-slim .brand{color:#c7d2e2}
.footer--slim .foot-slim-links{display:flex;gap:20px;font-size:13px}
.footer--slim .foot-slim-links a{color:#9fb0ca;transition:.15s}
.footer--slim .foot-slim-links a:hover{color:var(--acc1)}
.footer--slim .disclosure{border-top:none;padding:0 0 16px;margin-top:0;text-align:center}
.footer--slim .copy{padding:0 0 16px;border-top:none;justify-content:center}
.footer--slim footer{padding:0 0 0}

/* ---- RANKING: data-table (ranking--table) ---- */
.ranking--table .cost-table-wrap{border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:var(--shadow);margin-top:0}
.ranking--table .cost-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ranking--table .cost-table thead th{background:var(--navy);color:#dfe7f2;text-align:left;padding:13px 16px;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ranking--table .cost-table thead th.sort-up:after{content:" ↑"}
.ranking--table .cost-table thead th.sort-down:after{content:" ↓"}
.ranking--table .cost-table thead th.sortable{cursor:pointer;user-select:none}
.ranking--table .cost-table thead th.sortable:hover{background:#0e233d}
.ranking--table .cost-table tbody td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:middle}
.ranking--table .cost-table tbody tr:nth-child(even){background:var(--surface)}
.ranking--table .cost-table tbody tr:hover{background:rgba(6,182,212,.05)}
.ranking--table .cost-table tbody tr:first-child td{background:rgba(6,182,212,.07)}
.ranking--table .ct-rk{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;display:inline-grid;place-items:center}
.ranking--table .ct-rk.top1{background:var(--acc1);color:#000}
.ranking--table .ct-broker{display:flex;align-items:center;gap:10px}
.ranking--table .ct-logo{width:36px;height:36px;border-radius:6px;background:linear-gradient(135deg,#0e2342,#1d4a86);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;flex:none;position:relative;overflow:hidden}
.ranking--table .ct-name{font-weight:700;font-size:15px;color:var(--navy)}
.ranking--table .ct-reg{font-size:11px;color:var(--muted)}
.ranking--table .ct-cost{font-family:var(--font-head,var(--font-body,'Inter'));font-size:17px;font-weight:700;color:var(--acc1)}
.ranking--table .ct-spread{font-size:13px;color:var(--ink);font-weight:600}
.ranking--table .ct-comm{font-size:12px;color:var(--muted)}
.ranking--table .ct-note{font-size:11px;color:var(--muted);margin-top:2px}
@media(max-width:900px){.ranking--table .cost-table-wrap{overflow-x:auto}.ranking--table .cost-table{min-width:680px}}

/* ---- COST CALCULATOR WIDGET (SpreadScout SIGNATURE) ---- */
.cost-calc{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:28px 24px 22px;margin-top:28px}
.cost-calc h3{font-size:20px;margin:0 0 6px;color:var(--navy)}
.cost-calc .calc-sub{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.calc-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end;margin-bottom:16px}
.calc-row label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:6px}
.calc-row input,.calc-row select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:4px;font-size:15px;font-family:var(--font-body,'Inter');background:#fff;color:var(--ink)}
.calc-row input:focus,.calc-row select:focus{outline:none;border-color:var(--acc1);box-shadow:0 0 0 3px rgba(6,182,212,.12)}
.calc-results{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.calc-result{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px;text-align:center}
.calc-result.winner{border-color:var(--acc1);background:rgba(6,182,212,.05)}
.calc-result .cr-broker{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.calc-result .cr-cost{font-family:var(--font-head,var(--font-body,'Inter'));font-size:22px;font-weight:700;color:var(--navy)}
.calc-result.winner .cr-cost{color:var(--acc1)}
.calc-result .cr-detail{font-size:11px;color:var(--muted);margin-top:4px}
.calc-result .cr-badge{display:block;margin-top:6px;font-size:10.5px;font-weight:700;color:var(--acc1);letter-spacing:.04em}
@media(max-width:760px){.calc-row{grid-template-columns:1fr}.calc-results{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.calc-results{grid-template-columns:1fr}}

/* Dark mode overrides for new components */
html:not([data-theme="light"]) .cost-calc{background:var(--surface);border-color:var(--gline)}
html:not([data-theme="light"]) .cost-calc h3{color:#eef1f8}
html:not([data-theme="light"]) .calc-row input,html:not([data-theme="light"]) .calc-row select{background:var(--surface-2);border-color:var(--gline);color:var(--ink)}
html:not([data-theme="light"]) .calc-result{background:var(--surface-2);border-color:var(--gline)}
html:not([data-theme="light"]) .calc-result.winner{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.35)}
html:not([data-theme="light"]) .ranking--table .cost-table thead th{background:#0c1326;color:#cdd7ea}
html:not([data-theme="light"]) .ranking--table .cost-table tbody td{border-top-color:var(--gline)}
html:not([data-theme="light"]) .ranking--table .cost-table tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
html:not([data-theme="light"]) .ranking--table .cost-table tbody tr:hover{background:rgba(34,211,238,.06)}
html:not([data-theme="light"]) .ranking--table .cost-table tbody tr:first-child td{background:rgba(34,211,238,.08)}
html:not([data-theme="light"]) .ranking--table .ct-name{color:#eef1f8}
html:not([data-theme="light"]) .ranking--table .cost-table-wrap{border-color:var(--gline)}

/* ======================================================================
   PHASE 3: FULL-PAGE VARIANT SYSTEM — the shared mid-page blocks
   (live-markets, methodology, section-head, FAQ) get a per-site skeleton
   so the WHOLE page diverges, not just the hero/ranking. Stamped on <body>.
   SpreadScout = split / left / split / plus  (commercial terminal feel).
   ====================================================================== */

/* ---- DATA LAYOUT: split widget grid (mkt--split) ---- */
.mkt--split .mkt-grid{grid-template-columns:1.7fr 1fr}
.mkt--split .mkt-grid.lower{grid-template-columns:1.35fr 1fr}
@media(max-width:760px){.mkt--split .mkt-grid,.mkt--split .mkt-grid.lower{grid-template-columns:1fr}}

/* ---- SECTION HEAD: left-aligned with accent rule (sh--left) ---- */
.sh--left .sec-head{max-width:46em;text-align:left;border-left:3px solid var(--acc1);padding-left:16px}

/* ---- METHOD LAYOUT: split — crit grid beside the author card (method--split) ---- */
.method--split .method .grid{grid-template-columns:1.1fr 1fr;align-items:start}
.method--split .crit{grid-template-columns:1fr 1fr}

/* ---- FAQ LAYOUT: bordered plus-cards (faq--plus) ---- */
.faq--plus .faq details{border:1px solid var(--line);border-radius:var(--r-card,8px)}