:root{--ink:#111316;--ink2:#3A4049;--muted:#5F6670;--line:#ECECEE;--line2:#DCDDE0;--soft:#F6F6F7;--ph:#EDEEF0;--star:#B07A10;--head:'Inter Tight',Inter,system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.55 Inter,system-ui,sans-serif;font-feature-settings:'tnum' 1}
a{color:var(--ink)}a:hover{color:var(--muted)}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--head);letter-spacing:-.025em;margin:0}
.muted{color:var(--muted)}
.btn{display:inline-block;text-decoration:none;background:var(--ink);color:#fff;font-weight:500;font-size:14px;border-radius:8px;padding:11px 18px;border:1px solid var(--ink)}
.btn:hover{color:#fff;background:#2A2D33}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.ghost:hover{background:var(--soft);color:var(--ink)}

/* header */
.site-head{border-bottom:1px solid var(--line)}
.site-head .wrap{height:72px;display:flex;align-items:center;gap:40px}
.logo{text-decoration:none;font-family:var(--head);font-weight:700;font-size:20px;letter-spacing:-.03em}
.nav{display:flex;flex-wrap:wrap;gap:28px;font-size:14px;font-weight:500}
.nav a{text-decoration:none;color:var(--muted)}.nav a.on,.nav a:hover{color:var(--ink)}
.head-end{margin-left:auto;font-size:14px;font-weight:500}
.head-end a{text-decoration:none}

/* page intro */
.crumbs{margin:48px 0 0;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.intro{margin-top:20px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 64px}
.intro h1{flex:1 1 620px;max-width:800px;font-size:52px;line-height:1.05;font-weight:600;letter-spacing:-.035em}
.intro .side{flex:0 1 360px;font-size:15px;color:var(--ink2)}
.intro .side p{margin:0}.intro .side .meta{margin-top:14px;font-size:13px;color:var(--muted)}

.gallery{margin-top:40px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;height:380px}
.gallery>div{background:var(--ph);border-radius:14px;overflow:hidden}
.gallery .stack{display:grid;grid-template-rows:1fr 1fr;gap:12px;background:none}
.gallery img{width:100%;height:100%;object-fit:cover}

.picks{margin-top:40px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.picks>div+div{border-left:1px solid var(--line);padding-left:32px}
.picks .lab{margin:0;font-size:13px;color:var(--muted)}
.picks .name{margin:6px 0 0;font-family:var(--head);font-size:20px;font-weight:600;letter-spacing:-.02em}
.picks .sub{margin:2px 0 0;font-size:14px;color:var(--muted)}

/* ranked list */
.list{margin-top:8px}
.row{display:flex;flex-wrap:wrap;gap:28px 40px;padding:36px 0;border-bottom:1px solid var(--line)}
.row .pic{flex:0 0 340px;height:230px;background:var(--ph);border-radius:12px;position:relative;overflow:hidden}
.row .pic img{width:100%;height:100%;object-fit:cover}
.row .pic .logoimg{object-fit:contain;padding:36px;background:#fff;border:1px solid var(--line);border-radius:12px}
.rank{position:absolute;left:16px;top:14px;font-family:var(--head);font-size:15px;font-weight:600;background:#fff;border-radius:6px;padding:3px 9px;box-shadow:0 0 0 1px var(--line)}
.row .body{flex:1 1 380px;min-width:0;display:flex;flex-direction:column}
.row .cat{margin:0;font-size:13px;color:var(--muted)}
.row h2{margin-top:6px;font-size:28px;line-height:1.15;font-weight:600}
.row .facts{margin:10px 0 0;font-size:14px;color:var(--muted)}
.row .desc{margin:14px 0 0;font-size:15px;color:var(--ink2);max-width:600px}
.row .vendors{margin:auto 0 0;padding-top:16px;font-size:13px;color:var(--muted)}
.row .vendors a{color:var(--ink)}
.row .price{flex:0 0 200px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:16px;text-align:right}
.row .price .from{margin:0;font-size:13px;color:var(--muted)}
.row .price .amt{margin:2px 0 0;font-family:var(--head);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.row .price .unit{margin:6px 0 0;font-size:13px;color:var(--muted)}
dl.specs{margin:16px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;font-size:14px}
dl.specs dt{color:var(--muted);font-size:13px}dl.specs dd{margin:2px 0 0}

/* tables */
.sec{padding-top:80px}
.sec h2.big{font-size:32px;font-weight:600;letter-spacing:-.03em}
.tbl{margin-top:24px;overflow-x:auto}
.tbl table{width:100%;min-width:760px;border-collapse:collapse;font-size:14px;text-align:left}
.tbl th{padding:12px 16px 12px 0;font-weight:500;color:var(--muted);border-bottom:1px solid var(--ink)}
.tbl td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td:first-child{font-weight:600}

/* faq */
.faq{display:flex;flex-wrap:wrap;gap:40px 80px}
.faq h2{flex:1 1 280px;font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.faq .qs{flex:2 1 560px;min-width:0;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{font-weight:500;font-size:16px;cursor:pointer}
.faq details p{margin:10px 0 0;color:var(--ink2)}
.how{margin-top:32px;font-size:14px;color:var(--muted)}.how b{color:var(--ink);font-weight:500}
.notes{margin-top:24px;font-size:12px;color:var(--muted)}

/* hub */
.hubgrid{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.hubgrid h3{font-size:20px;font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.hubgrid ul{list-style:none;margin:0;padding:0}
.hubgrid li{border-bottom:1px solid var(--line)}
.hubgrid li a{display:block;padding:14px 0;text-decoration:none;font-weight:500}

/* footer */
.site-foot{margin-top:120px;background:var(--ink);color:#fff}
.site-foot .cols{padding:64px 32px 40px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;font-size:14px}
.site-foot .cols p{margin:0}
.site-foot .lab{color:#A9AEB6;margin-bottom:12px!important}
.site-foot a{color:#fff;text-decoration:none;display:block;line-height:2.1}
.site-foot .base{padding:20px 32px 32px;border-top:1px solid #2A2D33;font-size:13px;color:#A9AEB6}

@media (max-width:760px){
  .wrap{padding:0 20px}
  .site-head .wrap{height:60px;gap:16px}
  .nav{display:none}
  .crumbs{margin-top:28px}
  .intro h1{font-size:34px;flex-basis:100%}
  .gallery{height:220px;grid-template-columns:1fr}.gallery>div:not(:first-child){display:none}
  .picks{grid-template-columns:1fr;gap:0;padding:0}
  .picks>div{padding:14px 0!important;border-left:0!important;border-bottom:1px solid var(--line)}
  .row .pic{flex-basis:100%;height:200px}
  .row h2{font-size:24px}
  .row .price{flex-basis:100%;flex-direction:row;align-items:center;text-align:left}
  dl.specs{grid-template-columns:1fr 1fr}
  .hubgrid{grid-template-columns:1fr}
  .site-foot .cols{grid-template-columns:1fr 1fr}
}