/* HalalEdge — Theme D: Scholarly Islamic (warm espresso + gold + forest green)
   Design tokens for the Islamic / swap-free broker vertical. */
:root{
  --navy:#14100c; --navy-2:#14100c; --ink:#241c14; --line:#e8e0d2;
  --paper:#fffdf9; --mist:#f8f6f2; --gold:#cda348; --gold-d:#cda348;
  --green:#1ea672; --red:#b54232; --muted:#6b6052; --muted-2:#9a9082;
  --shadow:0 1px 2px rgba(10,26,48,.06),0 8px 30px rgba(10,26,48,.08);
  --bg:#fefcf8;
  --surface:#f6f2ea;
  --surface-2:#efe9dd;
  --acc1:#1ea672;
  --acc2:#cda348;
  --acc:#1ea672;
  --grad:linear-gradient(135deg,#1ea672,#15835a);
  --font-head:'Spectral';  --font-body:'Work 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.65;-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:1000px;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:8px;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 78% -8%,#2a1f14 0%,var(--navy) 46%,#0d0a06 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:10px;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:8px;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:8px;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:8px;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:8px;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:8px;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,#2a1f14,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}
.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:8px;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:10px;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:10px;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:8px;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:8px;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:8px;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:8px;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:8px;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:8px;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:8px;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:8px;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%,#2a1f14,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:8px;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,#2a1f14,#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:10px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:40px;background:#fff}
.feat .img{background:linear-gradient(135deg,#2a1f14,#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:8px;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:8px;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:8px;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:8px;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:8px;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:8px;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:#2bbd86; --acc2:#e0bd66; --acc:#2bbd86;
  --grad:linear-gradient(135deg,#2bbd86,#1f9a6c);
  --bg:#14100c; --surface:#1e1812; --surface-2:#272016;
  --gline:rgba(255,255,255,.09);
  /* flip text tokens to light */
  --ink:#efe7d8; --muted:#a89a83; --muted-2:#727c93;
  --line:#332a1e; --mist:rgba(255,255,255,.04); --paper:#1e1812;
  --gold:#e0bd66; --gold-d:#e0bd66;
}
body{
  color:var(--ink);
  background:
    radial-gradient(900px 560px at 86% -120px, rgba(43,189,134,.16), transparent 60%),
    radial-gradient(760px 520px at -5% 8%, rgba(224,189,102,.09), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
h1,h2,h3,h4{color:#f3f5fb}
::selection{background:rgba(43,189,134,.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(43,189,134,.40)}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 12px 36px rgba(43,189,134,.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(43,189,134,.32), transparent 60%),
  radial-gradient(720px 520px at 8% 115%, rgba(224,189,102,.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(43,189,134,.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(43,189,134,.16);border-color:rgba(43,189,134,.35)}
.ilg-card:hover,.best-card:hover{border-color:rgba(43,189,134,.5);box-shadow:0 12px 32px rgba(43,189,134,.20)}
.cat-row.top,.vs-card.is-winner,.qr-card.top{border-color:rgba(43,189,134,.55);box-shadow:0 12px 36px rgba(43,189,134,.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(43,189,134,.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(43,189,134,.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(43,189,134,.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(43,189,134,.55)}

/* review + page heroes */
.rev-hero{background:radial-gradient(720px 360px at 85% -40%,rgba(43,189,134,.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(43,189,134,.30),transparent),linear-gradient(180deg,#0b1020,#070a14)}

/* sections / misc surfaces */
.method{background:rgba(255,255,255,.02)}
.crit .c .ic{background:rgba(43,189,134,.16);color:#cbbcff}
.feat .cat{background:rgba(43,189,134,.16);color:#cbbcff}
.band{background:radial-gradient(700px 320px at 20% 0,rgba(43,189,134,.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(43,189,134,.14);border-color:rgba(43,189,134,.45);color:#fff}
.ticker,.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}
} /* ===== end dark-skin wrapper ===== */

/* ===== theme-independent: motion, logos, nav, sheen (apply in BOTH themes) ===== */
/* scroll-reveal (motion layer hooks; safe no-op until JS adds .reveal) */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
}
/* 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}
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:8px;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} }

/* ==========================================================================
   E-VERTICAL EXTENSIONS (Islamic brokers)
   ========================================================================== */

/* Score band badges — use .vband-* classes (never .band) */
.vband-gold  { background:#fff8e1;color:#92400e;border:1px solid #fde68a;border-radius:20px;font-size:11px;font-weight:700;padding:2px 10px;display:inline-block; }
.vband-green { background:#ecfdf5;color:#065f46;border:1px solid #6ee7b7;border-radius:20px;font-size:11px;font-weight:700;padding:2px 10px;display:inline-block; }
.vband-amber { background:#fffbeb;color:#92400e;border:1px solid #fcd34d;border-radius:20px;font-size:11px;font-weight:700;padding:2px 10px;display:inline-block; }
.vband-red   { background:#fef2f2;color:#991b1b;border:1px solid #fca5a5;border-radius:20px;font-size:11px;font-weight:700;padding:2px 10px;display:inline-block; }

/* Firm card */
.firm-card { background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:14px;position:relative; }
.firm-card:hover { box-shadow:var(--shadow);border-color:var(--gold); }
.fc-rank { position:absolute;top:16px;right:16px;font-family:var(--font-head,var(--font-body,'Inter')),serif;font-size:22px;font-weight:600;color:var(--gold-d);opacity:.7; }
.fc-head { display:flex;align-items:center;gap:12px; }
.fc-head h3 { font-size:18px;color:var(--navy); }
.fc-head > div:last-child { margin-left:auto; }
.fc-score { font-family:var(--font-head,var(--font-body,'Inter')),serif;font-size:26px;font-weight:700;color:var(--navy); }
.fc-score span { font-size:13px;color:var(--muted); }
.fc-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--mist);border-radius:8px;padding:12px; }
.fc-stats > div { display:flex;flex-direction:column;gap:2px; }
.fc-stats span { font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2); }
.fc-stats b { font-size:14px;color:var(--ink);font-weight:700; }
.fc-verdict { font-size:14px;color:var(--muted);line-height:1.5; }
.fc-btn { text-align:center;justify-content:center; }

/* Cards grid for homepage */
.cards-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px; }

/* Firm logo wrapper */
.firm-logo-wrap { position:relative;flex-shrink:0; }
.firm-logo { border-radius:8px;object-fit:contain; }
.firm-mono { display:grid;border-radius:8px; }

/* Ranking table */
.rank-table { width:100%;border-collapse:collapse;font-size:14px; }
.rank-table thead th { background:var(--navy);color:#dfe7f2;padding:12px 16px;text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase; }
.rank-table tbody td { padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle; }
.rank-table tbody tr:hover td { background:var(--mist); }
.rank-table .rk-num { font-family:var(--font-head,var(--font-body,'Inter')),serif;font-weight:700;color:var(--gold-d);font-size:18px; }
.rank-table .rk-score { font-family:var(--font-head,var(--font-body,'Inter')),serif;font-size:20px;font-weight:700;color:var(--navy); }
.rank-table .btn { padding:8px 16px;font-size:13px; }

/* Warning box (caution tier) */
.caution-box { background:#fef2f2;border:1.5px solid #fca5a5;border-radius:12px;padding:20px 24px;margin:1.5rem 0; }
.caution-box .cb-head { display:flex;align-items:center;gap:10px;font-weight:700;color:#991b1b;margin-bottom:8px;font-size:15px; }
.caution-box p { color:#7f1d1d;font-size:14px;line-height:1.65; }

/* Score pillar bars in review scorebox */
.subs { padding:4px 20px 8px; }
.subrow { display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px; }
.bar { flex:1;height:6px;background:var(--line);border-radius:99px;margin:0 12px;overflow:hidden; }
.bar i { display:block;height:100%;background:var(--gold);border-radius:99px; }
.subrow .sv { font-weight:700;color:var(--navy);min-width:28px;text-align:right; }

/* VS comparison */
.vs-hero-e { display:grid;grid-template-columns:1fr 60px 1fr;gap:16px;align-items:center;padding:40px 0; }
.vs-divider { text-align:center;font-family:var(--font-head,var(--font-body,'Inter')),serif;font-size:28px;color:var(--muted); }
.vs-firm { text-align:center; }
.vs-firm .vs-score { font-family:var(--font-head,var(--font-body,'Inter')),serif;font-size:42px;font-weight:700;color:var(--navy); }
.vs-winner { background:var(--gold);color:#1a1407;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em; }

/* dtable (key facts) */
.dtable-e { width:100%;border-collapse:collapse;font-size:14px; }
.dtable-e tr:nth-child(even) td { background:var(--mist); }
.dtable-e td { padding:10px 14px;border-bottom:1px solid var(--line); }
.dtable-e td:first-child { font-weight:600;color:var(--navy);width:44%; }
.dtable-e .yn-y { color:#1e8e6a;font-weight:700; }
.dtable-e .yn-n { color:#c0392b;font-weight:600; }

/* Comparison table (vs page) */
.cmp-table { width:100%;border-collapse:collapse;font-size:14px; }
.cmp-table thead th { background:var(--navy);color:#dfe7f2;padding:12px 16px;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em; }
.cmp-table tbody td { padding:12px 16px;border-bottom:1px solid var(--line); }
.cmp-table tbody tr:nth-child(even) td { background:var(--mist); }
.cmp-table .cmp-label { font-weight:600;color:var(--navy); }
.cmp-table .cmp-win { background:#ecfdf5;color:#065f46;font-weight:700; }

/* Firm finder quiz */
.quiz-wrap { max-width:640px;margin:0 auto; }
.quiz-step { display:none; }
.quiz-step.active { display:block; }
.quiz-q { font-family:var(--font-head,var(--font-body,'Inter')),serif;font-size:22px;color:var(--navy);margin-bottom:20px; }
.quiz-opts { display:flex;flex-direction:column;gap:12px; }
.quiz-opt { padding:14px 20px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-size:15px;transition:.15s;background:#fff;color:var(--ink);text-align:left;width:100%; }
.quiz-opt:hover { border-color:var(--gold);background:#fffbf2; }
.quiz-opt.selected { border-color:var(--gold);background:#fef9ee;font-weight:600; }
.quiz-nav { display:flex;gap:12px;margin-top:20px;align-items:center; }
.quiz-back { background:transparent;border:1px solid var(--line);color:var(--muted);padding:10px 18px;border-radius:8px;cursor:pointer;font-size:14px; }
.quiz-result-cards { display:flex;flex-direction:column;gap:16px;margin-top:24px; }
.quiz-result-card { display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:8px;padding:18px;background:#fff; }
.quiz-result-card.top-match { border-color:var(--gold);box-shadow:0 8px 24px rgba(200,162,75,.16); }
.qrc-info { flex:1; }
.qrc-info b { display:block;font-size:16px;color:var(--navy); }
.qrc-info span { font-size:13px;color:var(--muted); }
.qrc-score { font-family:var(--font-head,var(--font-body,'Inter')),serif;font-size:26px;font-weight:700;color:var(--navy); }
.quiz-progress { display:flex;gap:6px;margin-bottom:24px; }
.quiz-progress-dot { width:10px;height:10px;border-radius:50%;background:var(--line); }
.quiz-progress-dot.done { background:var(--gold); }

/* Breadcrumb */
.breadcrumb { display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);padding:20px 0 0; }
.breadcrumb a { color:var(--gold-d); }
.breadcrumb span { opacity:.5; }

/* Review hero (firm) */
.rev-hero-e { background:linear-gradient(180deg,#0e2342,#0a1a30);color:#fff;padding:46px 0 40px; }
.rev-hero-e .wrap { display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start; }
.rev-id-e { display:flex;align-items:center;gap:18px;margin-bottom:18px; }
.rev-id-e h1 { color:#fff;font-size:38px;font-weight:600; }
.rev-lede-e { font-size:17px;color:#cdd9ea;max-width:42em;margin-bottom:22px; }
.rev-quick-e { 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-e .q { background:#0c1f3b;padding:14px 16px; }
.rev-quick-e .q .l { font-size:11px;color:#93a6c4;text-transform:uppercase;letter-spacing:.05em; }
.rev-quick-e .q .v { font-family:var(--font-head,var(--font-body,'Inter')),serif;font-size:18px;color:#fff;margin-top:3px; }

/* Sticky score box */
.scorebox { background:#fff;color:var(--ink);border-radius:10px;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')),serif;font-size:58px;font-weight:700;color:var(--navy);line-height:.9; }
.scorebox .sbig .out { font-size:13px;color:var(--muted); }
.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 prose layout */
.rev-layout-e { display:grid;grid-template-columns:1fr 300px;gap:44px;padding:54px 0; }
.toc-e { position:sticky;top:90px;align-self:start;border-left:2px solid var(--line);padding-left:16px; }
.toc-e h5 { font-family:var(--font-body,'Inter');font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px; }
.toc-e a { display:block;font-size:13.5px;color:var(--ink);padding:5px 0; }
.toc-e a:hover { color:var(--gold-d); }
.trust-strip-e { 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.navy { background:var(--navy); }
.ts-av.green { background:#15803d;font-size:15px; }
.ts-role { display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em; }
.ts-updated { text-align:right; }

/* Pros / Cons grid */
.proscons-e { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0; }
.proscons-e .col { border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff; }
.proscons-e .col h4 { font-family:var(--font-body,'Inter');font-size:14px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px; }
.proscons-e .pro h4 { color:var(--green); }
.proscons-e .con h4 { color:var(--red); }
.proscons-e li { list-style:none;padding-left:22px;position:relative;margin:8px 0;font-size:14.5px; }
.proscons-e .pro li:before { content:"✓";position:absolute;left:0;color:var(--green);font-weight:700; }
.proscons-e .con li:before { content:"✕";position:absolute;left:0;color:var(--red);font-weight:700; }

/* FAQ accordion */
.faq-e details { border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden; }
.faq-e 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-e summary::-webkit-details-marker { display:none; }
.faq-e summary:after { content:"+";font-size:22px;color:var(--gold-d);font-weight:400; }
.faq-e details[open] summary:after { content:"-"; }
.faq-e .a { padding:0 20px 20px;color:var(--muted);font-size:15px; }

/* Awards grid */
.aw-grid-e { display:grid;grid-template-columns:repeat(2,1fr);gap:16px; }
.aw-card-e { border:1px solid var(--line);border-radius:8px;padding:18px;background:#fff;display:flex;flex-direction:column; }
.aw-ribbon-e { display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px; }
.aw-cat-e { font-family:var(--font-head,var(--font-body,'Inter')),serif;font-size:17px;font-weight:700;color:var(--navy); }
.aw-win-e { display:flex;align-items:center;gap:11px;margin-bottom:10px; }
.aw-why-e { font-size:13.5px;color:var(--ink);line-height:1.5;flex:1;margin-bottom:14px; }

/* Blog grid */
.blog-grid-e { display:grid;grid-template-columns:repeat(3,1fr);gap:26px; }
.bpost-e { border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column; }
.bpost-e .thumb-e { height:140px;background:linear-gradient(135deg,#2a1f14,#0a1a30);display:grid;place-items:center;font-size:40px; }
.bpost-e .b-e { padding:18px;display:flex;flex-direction:column;flex:1; }
.bpost-e h3 { font-size:18px;margin-bottom:8px;color:var(--navy); }
.bpost-e p { font-size:14px;color:var(--muted);flex:1; }
.bpost-e .read-more { font-size:13px;color:var(--gold-d);font-weight:600;margin-top:12px;display:inline-block; }

/* Page head (blog, methodology, etc.) */
.page-head { background:radial-gradient(900px 420px at 80% -20%,#2a1f14,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; }

/* Methodology stats */
.method-stats-e { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 34px; }
.method-stats-e .ms { background:var(--navy);color:#fff;border-radius:12px;padding:18px 16px;text-align:center; }
.method-stats-e .ms .n { font-family:var(--font-head,var(--font-body,'Inter')),serif;font-size:30px;font-weight:700;color:var(--gold);line-height:1; }
.method-stats-e .ms .l { font-size:12px;color:rgba(255,255,255,.72);margin-top:6px; }

/* Pillar cards (methodology) */
.pillars-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0; }
.pillar-card { background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px; }
.pillar-card h4 { font-family:var(--font-body,'Inter');font-weight:700;font-size:15px;color:var(--navy);margin-bottom:6px; }
.pillar-card .pw { font-size:12px;font-weight:700;color:var(--gold-d);background:var(--mist);border-radius:5px;padding:2px 8px;display:inline-block;margin-bottom:10px; }
.pillar-card p { font-size:13px;color:var(--muted); }

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

/* Dark mode overrides for e-vertical */
html:not([data-theme="light"]) .firm-card,
html:not([data-theme="light"]) .quiz-opt,
html:not([data-theme="light"]) .proscons-e .col,
html:not([data-theme="light"]) .faq-e details,
html:not([data-theme="light"]) .aw-card-e,
html:not([data-theme="light"]) .bpost-e,
html:not([data-theme="light"]) .pillar-card,
html:not([data-theme="light"]) .quiz-result-card { background:var(--surface);border-color:var(--gline); }
html:not([data-theme="light"]) .fc-head h3,
html:not([data-theme="light"]) .fc-score,
html:not([data-theme="light"]) .quiz-q,
html:not([data-theme="light"]) .aw-cat-e,
html:not([data-theme="light"]) .pillar-card h4 { color:#eef1f8; }
html:not([data-theme="light"]) .fc-stats { background:rgba(255,255,255,.04); }
html:not([data-theme="light"]) .rank-table thead th { background:#0c1326;color:#cdd7ea; }
html:not([data-theme="light"]) .rank-table tbody td { border-bottom-color:var(--gline); }
html:not([data-theme="light"]) .rank-table tbody tr:hover td { background:rgba(43,189,134,.08); }
html:not([data-theme="light"]) .rank-table .rk-score { color:#fff; }
html:not([data-theme="light"]) .scorebox { background:rgba(17,21,38,.82);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.10); }
html:not([data-theme="light"]) .scorebox .sh { background:var(--grad);color:#0a0d18; }
html:not([data-theme="light"]) .scorebox .sbig .num { color:#fff; }
html:not([data-theme="light"]) .bar { background:rgba(255,255,255,.08); }
html:not([data-theme="light"]) .bar i { background:var(--grad); }
html:not([data-theme="light"]) .caution-box { background:rgba(254,242,242,.08);border-color:rgba(252,165,165,.3); }
html:not([data-theme="light"]) .toc-e a { color:#c7cee0; }
html:not([data-theme="light"]) .vband-gold { background:rgba(255,248,225,.12);border-color:rgba(253,230,138,.3); }
html:not([data-theme="light"]) .vband-green { background:rgba(236,253,245,.12);border-color:rgba(110,231,183,.3); }
html:not([data-theme="light"]) .vband-amber { background:rgba(255,251,235,.12);border-color:rgba(252,211,77,.3); }
html:not([data-theme="light"]) .vband-red { background:rgba(254,242,242,.12);border-color:rgba(252,165,165,.3); }
html:not([data-theme="light"]) .rev-hero-e { background:radial-gradient(720px 360px at 85% -40%,rgba(43,189,134,.30),transparent 60%),linear-gradient(180deg,#0b1020,#070a14); }
html:not([data-theme="light"]) .rev-layout-e .proscons-e .col { background:var(--surface); }
html:not([data-theme="light"]) .cmp-table thead th { background:#0c1326;color:#cdd7ea; }
html:not([data-theme="light"]) .cmp-table tbody td { border-bottom-color:var(--gline); }
html:not([data-theme="light"]) .cmp-table .cmp-win { background:rgba(34,197,94,.12);color:#4ade80; }
html:not([data-theme="light"]) .cmp-table tbody tr:nth-child(even) td { background:rgba(255,255,255,.025); }
html:not([data-theme="light"]) .dtable-e td { border-bottom-color:var(--gline); }
html:not([data-theme="light"]) .dtable-e tr:nth-child(even) td { background:rgba(255,255,255,.025); }

/* Responsive */
@media(max-width:900px) {
  .cards-grid { grid-template-columns:1fr; }
  .rev-hero-e .wrap { grid-template-columns:1fr; }
  .rev-layout-e { grid-template-columns:1fr; }
  .toc-e { display:none; }
  .scorebox { position:static; }
  .rev-quick-e { grid-template-columns:repeat(2,1fr); }
  .vs-hero-e { grid-template-columns:1fr 40px 1fr; }
  .pillars-grid { grid-template-columns:repeat(2,1fr); }
  .aw-grid-e { grid-template-columns:1fr; }
  .blog-grid-e { grid-template-columns:1fr; }
  .method-stats-e { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .fc-stats { grid-template-columns:repeat(2,1fr); }
  .proscons-e { grid-template-columns:1fr; }
  .quiz-result-card { flex-wrap:wrap; }
}
@media(max-width:480px) {
  .fc-stats { grid-template-columns:1fr 1fr; }
  .vs-hero-e { grid-template-columns:1fr; }
  .vs-divider { display:none; }
  .pillars-grid { grid-template-columns:1fr; }
  .method-stats-e { grid-template-columns:1fr; }
}

/* ---- Image pipeline slots (logo + article hero) ---- */
.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:8px;margin:0 0 22px;border:1px solid rgba(0,0,0,.08)}

/* ---- AEO article blocks: answer / key-takeaways / FAQ ---- */
.answer-block{background:rgba(43,189,134,.07);border-left:4px solid var(--acc1,#8b5cf6);border-radius:8px;padding:16px 18px;margin:6px 0 22px;font-size:17px;line-height:1.65}
.takeaways{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:18px 22px;margin:0 0 26px}
.takeaways h2{font-size:18px;margin:0 0 10px}
.takeaways ul{margin:0;padding-left:18px}
.takeaways li{margin:6px 0}
.post-faq{margin:36px 0 8px;border-top:1px solid rgba(0,0,0,.1);padding-top:26px}
.post-faq h2{font-size:24px;margin:0 0 14px}
.post-faq .faq-item{border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:2px 16px;margin-bottom:10px}
.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;opacity:.85}

/* --- 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: pill-ghost-outline (btns--pill) ---- */
.btns--pill .btn{border-radius:999px!important}
.btns--pill .btn-gold{background:transparent;border:2px solid var(--acc1);color:var(--acc1);box-shadow:none}
.btns--pill .btn-gold:hover{background:var(--acc1);color:#fff;transform:translateY(-1px)}
.btns--pill .btn-ghost{border:2px solid rgba(255,255,255,.4);border-radius:999px!important}
.btns--pill .btn-ghost:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.btns--pill .btn-line{border:2px solid var(--line);border-radius:999px!important;background:transparent}
.btns--pill .btn-line:hover{border-color:var(--acc1);color:var(--acc1)}
/* Darker pill buttons in dark mode */
html:not([data-theme="light"]) .btns--pill .btn-gold{border-color:var(--acc1);color:var(--acc1)}
html:not([data-theme="light"]) .btns--pill .btn-gold:hover{background:var(--acc1);color:#000}

/* ---- FOOTER STYLE: mega-column (footer--mega) ---- */
.footer--mega footer{margin-top:0}
.footer--mega .foot-grid{grid-template-columns:1.8fr 1fr 1fr 1fr!important;padding:64px 0 40px;gap:40px}
.footer--mega .foot-brand-desc{font-size:13.5px;color:#9fb0ca;margin-top:10px;line-height:1.65;max-width:22em}
.footer--mega .foot-social{display:flex;gap:10px;margin-top:16px}
.footer--mega .foot-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.15);color:#9fb0ca;font-size:14px;transition:.15s;text-decoration:none}
.footer--mega .foot-social a:hover{border-color:var(--acc1);color:var(--acc1)}
.footer--mega .foot-newsletter{margin-top:18px}
.footer--mega .foot-newsletter p{font-size:12.5px;color:#9fb0ca;margin-bottom:10px}
.footer--mega .foot-email-row{display:flex;gap:8px}
.footer--mega .foot-email-row input{flex:1;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-size:13px;min-width:0}
.footer--mega .foot-email-row input::placeholder{color:#7e8ca6}
.footer--mega .foot-email-row input:focus{outline:none;border-color:var(--acc1)}
.footer--mega .foot-email-row button{padding:9px 18px;border-radius:999px;border:none;background:var(--acc1);color:#000;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
@media(max-width:900px){.footer--mega .foot-grid{grid-template-columns:1fr 1fr!important;gap:28px}}
@media(max-width:540px){.footer--mega .foot-grid{grid-template-columns:1fr!important}}

/* ---- RANKING: card-grid (ranking--cards) ---- */
.ranking--cards .broker-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:0}
.ranking--cards .broker-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card,12px);padding:26px;display:flex;flex-direction:column;gap:14px;position:relative;transition:.18s}
.ranking--cards .broker-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.15);border-color:var(--acc1)}
.ranking--cards .bc-rank{position:absolute;top:18px;right:20px;font-family:var(--font-head,var(--font-body,'Inter'));font-size:26px;font-weight:700;color:var(--acc1);opacity:.5;line-height:1}
.ranking--cards .bc-head{display:flex;align-items:center;gap:14px}
.ranking--cards .bc-logo{width:52px;height:52px;border-radius:10px;background:linear-gradient(135deg,#1e1812,#3d2a1a);display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--font-head,var(--font-body,'Inter'));font-size:19px;flex:none;position:relative;overflow:hidden}
.ranking--cards .bc-info{flex:1;min-width:0}
.ranking--cards .bc-info h3{font-size:19px;margin:0 0 4px;color:var(--navy)}
.ranking--cards .bc-info .bc-reg{font-size:12px;color:var(--muted)}
.ranking--cards .bc-score-wrap{text-align:right}
.ranking--cards .bc-score{font-family:var(--font-head,var(--font-body,'Inter'));font-size:30px;font-weight:700;color:var(--navy);line-height:1}
.ranking--cards .bc-score small{display:block;font-size:11px;color:var(--muted);font-family:var(--font-body,'Inter');font-weight:400}
.ranking--cards .bc-badges{display:flex;flex-wrap:wrap;gap:6px}
.ranking--cards .bc-badge{font-size:11px;font-weight:700;padding:3px 11px;border-radius:999px;letter-spacing:.04em}
.ranking--cards .bc-badge.halal{background:rgba(30,166,114,.15);color:#1ea672;border:1px solid rgba(30,166,114,.3)}
.ranking--cards .bc-badge.unlimited{background:rgba(43,189,134,.12);color:#1ea672;border:1px solid rgba(43,189,134,.28)}
.ranking--cards .bc-badge.caution{background:rgba(205,163,72,.12);color:#a07018;border:1px solid rgba(205,163,72,.28)}
.ranking--cards .bc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--surface);border-radius:8px;padding:12px}
.ranking--cards .bc-stats dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:3px;font-family:var(--font-body,'Inter')}
.ranking--cards .bc-stats dd{font-size:14px;font-weight:700;color:var(--ink);margin:0}
.ranking--cards .bc-verdict{font-size:13.5px;color:var(--muted);line-height:1.55}
.ranking--cards .bc-foot{display:flex;gap:10px;margin-top:auto}
.ranking--cards .bc-foot .btn{flex:1;justify-content:center;font-size:13.5px;padding:10px 12px}
@media(max-width:760px){.ranking--cards .broker-cards-grid{grid-template-columns:1fr}}

/* Dark mode for card-grid ranking */
html:not([data-theme="light"]) .ranking--cards .broker-card{background:var(--surface);border-color:var(--gline)}
html:not([data-theme="light"]) .ranking--cards .broker-card:hover{border-color:var(--acc1);box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 30px rgba(43,189,134,.12)}
html:not([data-theme="light"]) .ranking--cards .bc-info h3{color:#eef1f8}
html:not([data-theme="light"]) .ranking--cards .bc-score{color:#eef1f8}
html:not([data-theme="light"]) .ranking--cards .bc-stats{background:var(--surface-2)}
html:not([data-theme="light"]) .ranking--cards .bc-stats dd{color:#dfe5f1}
html:not([data-theme="light"]) .ranking--cards .bc-logo{background:linear-gradient(135deg,#0e1e14,#1a3520)}

/* ---- SHARIAH COMPLIANCE CHECKLIST (HalalEdge SIGNATURE) ---- */
.shariah-checklist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card,12px);padding:0;overflow:hidden}
.sc-panel-head{background:linear-gradient(135deg,var(--navy),#1e2a1e);color:#fff;padding:20px 24px}
.sc-panel-head h3{font-family:var(--font-head,var(--font-body,'Inter'));font-size:21px;color:#fff;margin:0 0 6px}
.sc-panel-head p{font-size:13.5px;color:rgba(255,255,255,.72);margin:0}
.sc-items{padding:6px 0}
.sc-item{display:flex;align-items:flex-start;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line)}
.sc-item:last-child{border-bottom:none}
.sc-icon{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;font-size:18px;flex:none;margin-top:2px}
.sc-icon.pass{background:rgba(30,166,114,.12);color:#1ea672}
.sc-icon.warn{background:rgba(205,163,72,.12);color:#a07018}
.sc-icon.info{background:rgba(6,182,212,.10);color:#0891b2}
.sc-item-body{}
.sc-item-body h4{font-family:var(--font-body,'Inter');font-weight:700;font-size:15px;color:var(--navy);margin:0 0 4px}
.sc-item-body p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}
.sc-item-body .sc-verdict{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700;padding:2px 10px;border-radius:999px}
.sc-verdict.pass{background:rgba(30,166,114,.12);color:#1ea672;border:1px solid rgba(30,166,114,.25)}
.sc-verdict.warn{background:rgba(205,163,72,.12);color:#a07018;border:1px solid rgba(205,163,72,.25)}
.sc-verdict.info{background:rgba(6,182,212,.10);color:#0272a0;border:1px solid rgba(6,182,212,.2)}
/* Dark mode for shariah panel */
html:not([data-theme="light"]) .shariah-checklist{background:var(--surface);border-color:var(--gline)}
html:not([data-theme="light"]) .sc-item{border-bottom-color:var(--gline)}
html:not([data-theme="light"]) .sc-item-body h4{color:#dfe5f1}
html:not([data-theme="light"]) .sc-icon.pass{background:rgba(43,189,134,.12)}
html:not([data-theme="light"]) .sc-icon.warn{background:rgba(224,189,102,.10)}
html:not([data-theme="light"]) .sc-verdict.pass{background:rgba(43,189,134,.12);color:#2bbd86;border-color:rgba(43,189,134,.25)}
html:not([data-theme="light"]) .sc-verdict.warn{background:rgba(224,189,102,.1);color:#e0bd66;border-color:rgba(224,189,102,.25)}

/* ======================================================================
   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>.
   HalalEdge = stack / center / timeline / ruled  (editorial single-column feel).
   ====================================================================== */

/* ---- DATA LAYOUT: stacked feed (mkt--stack) — single-column full-width panels ---- */
.mkt--stack .mkt-grid,.mkt--stack .mkt-grid.lower{grid-template-columns:1fr;gap:18px}
.mkt--stack .mkt-grid.lower{margin-top:18px}
.mkt--stack #markets .wrap{max-width:880px}
.mkt--stack .panel{border-left:3px solid var(--acc1)}

/* ---- SECTION HEAD: centered editorial (sh--center) ---- */
.sh--center .sec-head{max-width:none;text-align:center}
.sh--center .sec-head p{max-width:62ch;margin-left:auto;margin-right:auto}

/* ---- METHOD LAYOUT: numbered vertical timeline, full width (method--timeline) ---- */
.method--timeline .method .grid{grid-template-columns:1fr;gap:30px;align-items:stretch}
.method--timeline .crit{grid-template-columns:1fr;gap:0;counter-reset:mc;max-width:760px;margin:8px auto 0;position:relative}
.method--timeline .crit::before{content:"";position:absolute;left:24px;top:14px;bottom:14px;width:2px;background:var(--line)}
.method--timeline .crit .c{display:grid;grid-template-columns:50px 1fr;gap:16px;align-items:start;background:transparent!important;border:none!important;border-radius:0;padding:14px 0 18px;position:relative}
.method--timeline .crit .c .ic{grid-row:1/3;width:50px;height:50px;border-radius:50%;background:var(--acc1)!important;color:#fff!important;z-index:1;font-size:18px;margin:0}
.method--timeline .crit .c h4{counter-increment:mc;margin-top:6px}
.method--timeline .crit .c h4::before{content:counter(mc) ". "}
.method--timeline .author{max-width:760px;margin:0 auto}
@media(max-width:640px){.method--timeline .crit .c{grid-template-columns:40px 1fr;gap:12px}.method--timeline .crit::before{left:19px}}

/* ---- FAQ LAYOUT: ruled list with rotating chevron (faq--ruled) ---- */
.faq--ruled .faq-e details{border:none;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.faq--ruled .faq-e summary{padding:18px 0}
.faq--ruled .faq-e summary:after{content:"\203A";font-size:24px;transform:rotate(90deg);transition:transform .2s}
.faq--ruled .faq-e details[open] summary:after{transform:rotate(-90deg)}
.faq--ruled .faq-e .a{padding:0 0 18px}
html:not([data-theme="light"]) .faq--ruled .faq-e details{border-bottom-color:var(--gline);background:transparent}