:root{
  --bg:#eef2f5; --panel:#ffffff; --graph:#0f1b26; --graph2:#182a3a;
  --coral:#ff6a45; --coral-d:#e04d29; --mint:#1fae86; --ink:#1a2833;
  --muted:#5d6b78; --line:#dde5ec; --rad:14px;
  --shadow:0 8px 26px rgba(15,27,38,.11);
}
*{box-sizing:border-box}
html,body{width:100%;overflow-x:hidden;margin:0}
body{font-family:'Trebuchet MS','Segoe UI',Roboto,-apple-system,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.64;font-size:17px}
.shell{max-width:1140px;margin:0 auto;padding:0 22px}
a{color:#0f7a5e}
img{max-width:100%;height:auto}
h1,h2,h3{line-height:1.2;color:var(--graph);font-weight:800}
h1{font-size:2.05rem;margin:.15em 0 .35em}
h2{font-size:1.5rem;margin:1.75em 0 .5em;padding-left:12px;border-left:5px solid var(--coral)}
h3{font-size:1.18rem;margin:1.3em 0 .35em}

/* masthead */
header.masthead{background:var(--graph);position:sticky;top:0;z-index:40;
  box-shadow:0 2px 12px rgba(0,0,0,.22)}
.masthead-row{display:flex;align-items:center;flex-wrap:nowrap;gap:14px;min-height:64px}
.logo{color:#fff;font-weight:800;font-size:1.3rem;text-decoration:none;white-space:nowrap;letter-spacing:.3px}
.logo b{color:var(--coral)}
.nav-wrap{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;margin-left:auto}
.nav-main{display:flex;flex-wrap:nowrap;gap:2px}
.nav-main a{color:#c9d6e2;text-decoration:none;padding:8px 12px;border-radius:8px;font-size:.94rem;white-space:nowrap}
.nav-main a:hover,.nav-main a.active{background:rgba(255,255,255,.13);color:#fff}
.cta{background:var(--coral);color:#2a0f06;font-weight:800;text-decoration:none;padding:9px 17px;
  border-radius:9px;white-space:nowrap;box-shadow:0 3px 0 var(--coral-d)}
.cta:hover{filter:brightness(1.06)}
.burger{display:none;margin-left:auto;background:none;border:2px solid rgba(255,255,255,.5);
  color:#fff;font-size:1.35rem;line-height:1;border-radius:8px;padding:3px 11px;cursor:pointer}

/* breadcrumb */
.crumbs{font-size:.85rem;color:var(--muted);padding:15px 0 0}
.crumbs a{color:var(--muted)}.crumbs span{color:var(--ink)}

/* main */
main{display:block;padding-bottom:12px}
.hero-img{width:100%;max-height:430px;object-fit:cover;border-radius:var(--rad);
  box-shadow:var(--shadow);margin:.5em 0 1em;cursor:zoom-in}
p.lede{font-size:1.14rem;color:#243141;background:#fff;border-top:4px solid var(--coral);
  padding:16px 18px;border-radius:12px;box-shadow:var(--shadow);margin:.3em 0 1.2em}
p.note{background:#fff2ec;border:1px solid #ffcbb8;border-radius:12px;padding:12px 16px;color:#7a3320;font-size:.96rem}
ul,ol{padding-left:1.2em}
li{margin:.3em 0}
strong{color:var(--graph)}

/* verdict box */
.verdict{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow);padding:18px;margin:1.2em 0}
.verdict h3{margin:.1em 0 .3em}
.verdict .pros li::marker{color:var(--mint)}
.verdict .cons li::marker{color:var(--coral-d)}
.rating{display:inline-block;background:var(--mint);color:#04231a;font-weight:800;border-radius:9px;padding:4px 12px;font-size:1.1rem}

/* stat grid */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:1.2em 0}
.stat{background:var(--graph);color:#fff;border-radius:12px;padding:14px;text-align:center}
.stat b{display:block;font-size:1.35rem;color:var(--coral)}
.stat span{font-size:.82rem;color:#b7c4d1}

/* table */
.table-scroll{overflow-x:auto;margin:1.1em 0;border-radius:12px;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;background:var(--panel);min-width:520px}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem}
th{background:var(--graph2);color:#fff;font-weight:600}
tbody tr:nth-child(even){background:#f5f8fb}
td.y{color:var(--mint);font-weight:700}td.n{color:var(--coral-d);font-weight:700}

/* tabs */
.tabs{margin:1.3em 0}
.tab-btns{display:flex;flex-wrap:wrap;gap:6px}
.tab-btns button{background:#e3ebf2;border:1px solid var(--line);color:var(--graph);font-weight:700;
  padding:9px 16px;border-radius:10px 10px 0 0;cursor:pointer;font-size:.94rem}
.tab-btns button.on{background:var(--panel);border-bottom-color:var(--panel);color:var(--coral-d)}
.tabp{background:var(--panel);border:1px solid var(--line);border-radius:0 12px 12px 12px;padding:16px 18px;box-shadow:var(--shadow)}
.tabp[hidden]{display:none}

/* faq */
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:11px;margin:.55em 0;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;color:var(--graph);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--coral-d);font-weight:800}
.faq details[open] summary::after{content:'\2212'}
.faq details>div{padding:0 16px 14px;color:#33414f}

/* cta band */
.band{background:linear-gradient(135deg,var(--graph),var(--graph2));color:#fff;border-radius:var(--rad);
  padding:26px 22px;margin:1.9em 0;text-align:center;box-shadow:var(--shadow)}
.band h2{color:#fff;border:0;padding:0;margin-top:0}
.band .band-copy{color:#cdd8e4;max-width:660px;margin:.4em auto 1.1em}
.band .cta{display:inline-block;font-size:1.06rem;padding:13px 32px}

/* footer */
footer.foot{background:var(--graph);color:#bcc9d6;margin-top:28px;padding:26px 0 32px;font-size:.92rem}
footer.foot a{color:#cad6e3;text-decoration:none;margin-right:16px;display:inline-block;padding:3px 0}
footer.foot a:hover{color:#fff}
.foot-nav{margin:.4em 0 1em;line-height:2}
.foot-legal{color:#8492a2;font-size:.85rem;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;margin-top:10px}

#totop{position:fixed;right:16px;bottom:16px;background:var(--coral);color:#2a0f06;border:none;
  width:46px;height:46px;border-radius:50%;font-size:1.3rem;cursor:pointer;display:none;
  box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:45}
#totop.show{display:block}

.lightbox{position:fixed;inset:0;background:rgba(8,14,20,.92);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:20px;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:96%;max-height:92%;border-radius:12px}

@media(max-width:900px){
  body{font-size:16px}
  h1{font-size:1.66rem}h2{font-size:1.32rem}
  .burger{display:block}
  .masthead-row{flex-wrap:wrap}
  .nav-wrap{display:none;width:100%;flex-direction:column;align-items:stretch;margin-left:0;gap:4px;padding:8px 0 12px}
  .nav-wrap.open{display:flex}
  .nav-main{flex-direction:column;gap:2px}
  .nav-main a{padding:11px 8px}
  .cta{text-align:center;margin-top:6px}
  .verdict{grid-template-columns:1fr}
  .statgrid{grid-template-columns:1fr 1fr}
  .shell{padding:0 22px}
  .hero-img{max-height:250px}
}