:root{
  --ink:#16213A;--ink-2:#3A4356;--muted:#5E6472;--paper:#FBFAF6;--card:#FFFFFF;--rule:#E6E1D3;--rule-2:#F0ECE2;
  --blue:#1E3A8A;--blue-2:#2B4FB8;--hl:#FFE14D;--hl-soft:#FFF3A8;--bad:#B3261E;--bad-bg:#FBEAE8;--good:#177245;--good-bg:#E3F3E9;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62}
img{max-width:100%;height:auto}
a{color:var(--blue)}
a:hover{color:var(--blue-2)}
:focus-visible{outline:3px solid var(--hl);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.narrow{max-width:760px}

/* header */
.site-head{background:#fff;border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:10}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:800;font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand svg{flex:none}
.nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14.5px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--hl)}
@media (max-width:720px){.nav{gap:6px 14px;font-size:14px}}

/* type */
h1,h2,h3{text-wrap:balance;line-height:1.12;margin:0}
h1{font-family:var(--serif);font-weight:900;font-size:clamp(30px,4.6vw,46px);letter-spacing:-.015em}
h2{font-family:var(--serif);font-weight:800;font-size:clamp(23px,3vw,30px);letter-spacing:-.01em;margin-top:44px;margin-bottom:12px}
h3{font-size:19px;font-weight:700;margin-top:26px;margin-bottom:8px}
p{margin:0 0 14px}
mark{background:linear-gradient(transparent 58%,var(--hl) 58%);color:inherit;padding:0 3px}
.kicker{font:600 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.lead{font-size:19px;color:var(--ink-2);max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:14px}
.prose{max-width:720px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:6px}

/* hero */
.hero{padding-block:40px 28px;background:radial-gradient(700px 240px at 88% 0%,rgba(255,225,77,.30),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:34px;align-items:start}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.byline{display:flex;gap:12px;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
.avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#FFF3A8,#FFE14D);display:grid;place-items:center;flex:none;border:1px solid var(--rule)}
.byline b{display:block;font-size:15px}
.byline small{color:var(--muted);font-size:13.5px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fact{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px}
.fact b{display:block;font-family:var(--serif);font-size:30px;font-weight:800;line-height:1}
.fact small{color:var(--muted);font-size:12.5px;line-height:1.3;display:block;margin-top:6px}
.clip{grid-column:1/-1;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:15px 17px;font-size:15px}
.clip .src{font:12px var(--mono);color:var(--muted);margin-bottom:6px}
.clip q{quotes:none;display:block;color:var(--ink-2)}
.clip q span,.hlq{background:var(--hl-soft);box-shadow:inset 0 -2px 0 var(--hl)}
.clip .v{margin-top:8px;font-weight:600}

/* ranking rows */
.list{display:flex;flex-direction:column;gap:14px;margin-block:18px 8px}
.row{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:18px;display:grid;grid-template-columns:28px 52px minmax(150px,1.1fr) minmax(170px,1.2fr) minmax(170px,1.2fr) 170px;gap:18px;align-items:center}
.row.first{border-color:#E0C94A;box-shadow:inset 0 0 0 1px #E0C94A}
.rk{font:700 14px var(--mono);color:var(--muted)}
.logo{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-weight:800;font-size:17px;color:#fff;letter-spacing:-.02em;flex:none}
.l-fiery{background:linear-gradient(135deg,#FF8A1F,#C2410C)}
.l-verde{background:linear-gradient(135deg,#2FB36D,#0B6B3A)}
.l-fs{background:linear-gradient(135deg,#7A5CFA,#3B1F9E)}
.l-hit{background:linear-gradient(135deg,#F2553D,#9C1B2E)}
.l-ice{background:linear-gradient(135deg,#2F8FE0,#0C4A9A)}
.l-gg{background:linear-gradient(135deg,#374151,#0B0F17)}
.nm b{font-size:17px;display:block}
.score{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.score strong{font-family:var(--serif);font-size:28px;font-weight:800;line-height:1}
.score span{font-size:12.5px;color:var(--muted)}
.badge{display:inline-block;font-size:12px;font-weight:600;background:var(--hl-soft);color:#6B5300;border-radius:5px;padding:2px 8px;margin-top:6px}
.bars{display:grid;gap:6px;font-size:12.5px}
.bars div{display:grid;grid-template-columns:96px 1fr 30px;gap:8px;align-items:center;color:var(--muted)}
.bars i{display:block;height:7px;border-radius:4px;background:#ECE8DC;position:relative;overflow:hidden}
.bars i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--blue);border-radius:4px}
.bars i.low::after{background:var(--bad)}
.bars em{font-style:normal;font:600 12px var(--mono);color:var(--ink);text-align:right}
.bonus small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35}
.bonus b{font-size:16px;display:block;line-height:1.3;margin:2px 0}
.warn{display:block;color:var(--bad);font-size:13px;margin-top:5px;line-height:1.35}
.cta{display:flex;flex-direction:column;gap:7px}
.go{display:block;background:var(--blue);color:#fff!important;font-weight:600;font-size:14.5px;padding:11px 14px;border-radius:9px;text-align:center;text-decoration:none;white-space:nowrap}
.go:hover{background:var(--blue-2)}
.rev{font-size:13.5px;text-align:center}
@media (max-width:920px){
  .row{grid-template-columns:52px 1fr;gap:14px}
  .row .rk{display:none}
  .row .bars,.row .bonus,.row .cta{grid-column:1/-1}
}
.disclose{font-size:14px;color:var(--muted);background:#fff;border:1px dashed var(--rule);border-radius:12px;padding:14px 16px;margin-top:10px}

/* generic blocks */
.box{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:20px 22px;margin-block:18px}
.box.hl{border-color:#E0C94A;background:#FFFCEB}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block:16px}
@media (max-width:720px){.two{grid-template-columns:1fr}}
.two .box{margin:0}
.pro li::marker{content:"+  ";color:var(--good);font-weight:800}
.con li::marker{content:"−  ";color:var(--bad);font-weight:800}
.tbl{overflow-x:auto;margin-block:16px;background:#fff;border:1px solid var(--rule);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:560px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule-2);vertical-align:top}
th{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#FCFBF7}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.na{color:var(--muted);font-style:italic}
.pill{display:inline-block;font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:99px}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.ok{background:var(--good-bg);color:var(--good)}
.pill.mid{background:var(--hl-soft);color:#6B5300}

/* review head */
.rhead{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-block:18px}
@media (max-width:720px){.rhead{grid-template-columns:auto 1fr}.rhead .cta{grid-column:1/-1}}
.rhead .logo{width:64px;height:64px;font-size:21px;border-radius:16px}
.scorecards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block:14px}
.scorecard{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px 16px}
.scorecard b{font-family:var(--serif);font-size:34px;font-weight:800;line-height:1}
.scorecard small{display:block;color:var(--muted);font-size:13px;margin-top:6px}

/* faq */
details{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:0 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--muted);font-weight:400}
details[open] summary::after{content:"−"}
details>div{padding-bottom:14px}

/* calculator */
.calc{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-block:18px}
@media (max-width:620px){.calc{grid-template-columns:1fr}}
.calc label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px}
.calc input,.calc select{width:100%;font:500 16px var(--mono);padding:10px 12px;border:1px solid #CFC9B8;border-radius:9px;background:#FFFEFA;color:var(--ink)}
.calc .out{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.calc .out div{background:#FCFBF7;border:1px solid var(--rule);border-radius:11px;padding:12px 14px}
.calc .out b{display:block;font:700 22px var(--mono);font-variant-numeric:tabular-nums}
.calc .out small{color:var(--muted);font-size:13px}
.calc .out .alert b{color:var(--bad)}

/* breadcrumbs, footer */
.crumbs{font-size:13.5px;color:var(--muted);padding-top:18px}
.crumbs a{color:var(--muted)}
main{padding-bottom:56px}
.site-foot{background:#16213A;color:#C9CFDB;font-size:14.5px;padding-block:36px}
.site-foot a{color:#fff}
.site-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
@media (max-width:720px){.site-foot .cols{grid-template-columns:1fr}}
.site-foot h4{color:#fff;font-size:14px;margin:0 0 10px;font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.age{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid #FFE14D;color:#FFE14D;font-weight:800;font-size:13px;margin-right:10px;vertical-align:middle}
.foot-note{border-top:1px solid #2C3A5C;margin-top:26px;padding-top:16px;font-size:13px;color:#98A2B6}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:720px){.site-head{position:static}}