/* Self-hosted fonts (latin subset woff2, fetched from Google Fonts and served
   from /assets/fonts/ - no third-party font requests). Google serves Inter as
   one variable file covering weights 400-600 (identical URL for all three
   weights in its own stylesheet), so the three Inter rules reference a single
   file and the browser downloads it once. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--ink:#131038;--ink2:#3c3a55;--coral:#ff4e60;--coral-d:#c92a3c;--bg:#ffffff;--soft:#f7f7fb;
--line:#e8e8ee;--green:#0fa958;--radius:14px;}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink2);background:var(--bg);line-height:1.65;font-size:16px}
h1,h2,h3,h4,.logo{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);line-height:1.18}
h1{font-size:clamp(1.9rem,4.5vw,3.1rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;margin:2.2rem 0 .9rem}
h3{font-size:1.15rem;font-weight:600;margin:1.4rem 0 .5rem}
a{color:var(--coral-d);text-decoration:none}a:hover{text-decoration:underline}
.disc{background:var(--soft);border-bottom:1px solid var(--line);font-size:.78rem;text-align:center;padding:.45rem 1rem;color:#6b6980}
.disc a{color:#6b6980;text-decoration:underline}
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:1.4rem;padding:.7rem 1.2rem;flex-wrap:wrap}
.logo{font-weight:700;font-size:1.18rem;color:var(--ink)}.logo b{color:var(--coral)}
.nav a.nl{color:var(--ink2);font-size:.92rem;font-weight:500}
.nav .grow{flex:1}
.hero{background:linear-gradient(160deg,#fbd7dc 0%,#fdeef0 45%,#ffffff 100%);padding:3.6rem 1.2rem 3rem;text-align:center}
.hero p.sub{max-width:640px;margin:1rem auto 0;font-size:1.12rem;color:#565470}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.2rem}
.narrow{max-width:820px}
.stats{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.5rem;min-width:140px;box-shadow:0 4px 14px rgba(19,16,56,.05)}
.stat b{display:block;font-size:1.5rem;color:var(--ink);font-family:'Poppins'}
.stat span{font-size:.82rem;color:#6b6980}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:1rem;margin:1.4rem 0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:0 4px 14px rgba(19,16,56,.05)}
.card h3{margin:0 0 .35rem}.card p{font-size:.9rem;color:#6b6980}
.card a.more{display:inline-block;margin-top:.6rem;font-weight:600;font-size:.9rem}
.card a.more:after{content:" \2192"}
.rankcard{display:flex;gap:1.1rem;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:1.2rem;margin:.9rem 0;box-shadow:0 4px 14px rgba(19,16,56,.05);flex-wrap:wrap}
.rankn{font-family:'Poppins';font-weight:700;font-size:1.5rem;color:#fff;background:var(--ink);border-radius:10px;
width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:0 0 44px}
.rankbody{flex:1;min-width:230px}
.rankbody ul{margin:.5rem 0 0 1.1rem;font-size:.92rem}
.rankside{flex:0 0 168px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.score{font-family:'Poppins';font-weight:700;font-size:1.7rem;color:var(--ink)}
.score small{display:block;font-size:.7rem;font-weight:400;color:#6b6980}
.btn{display:inline-block;background:#d32f42;color:#fff!important;font-weight:600;padding:.62rem 1.3rem;border-radius:9px;
font-size:.95rem;text-decoration:none!important;transition:background .15s}
.btn:hover{background:var(--coral-d)}
.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:.18rem .6rem;border-radius:99px;margin-right:.4rem}
.b-coral{background:#ffe7ea;color:var(--coral-d)}.b-green{background:#e2f6ec;color:#0b7d42}
.b-gray{background:#efeff4;color:#565470}.b-amber{background:#fdf1de;color:#9a6716}
table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.92rem;background:#fff}
th,td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
th{background:var(--soft);color:var(--ink);font-weight:600;white-space:nowrap}
tr:nth-child(even) td{background:#fbfbfd}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0}
.tblwrap table{margin:0;min-width:560px}
.answer{background:var(--soft);border-left:4px solid var(--coral);border-radius:0 var(--radius) var(--radius) 0;
padding:1rem 1.2rem;margin:1.1rem 0;font-size:1.03rem}
.note{background:#fdf6ec;border:1px solid #f3ddb3;border-radius:10px;padding:.8rem 1rem;font-size:.9rem;margin:.9rem 0}
.grade{font-weight:700}
.faq h3{margin:1rem 0 .3rem;font-size:1.02rem}
.crumb{font-size:.82rem;color:#6e6c80;margin:1.1rem 0 .4rem}.crumb a{color:#6e6c80}
footer{background:var(--ink);color:#c9c7dd;margin-top:3.5rem;padding:2.5rem 1.2rem;font-size:.88rem}
footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.6rem}
footer .fh4{font-family:'Poppins',system-ui,sans-serif;font-weight:700;line-height:1.18;color:#fff;font-size:.95rem;margin-bottom:.6rem}
footer a{color:#c9c7dd;display:block;margin:.3rem 0}
footer .fine{grid-column:1/-1;border-top:1px solid #2c2950;padding-top:1.1rem;font-size:.78rem;color:#8f8cab}
.section{padding:2.2rem 0 .4rem}
.tag{font-size:.78rem;color:#6e6c80}
.sources{font-size:.82rem;color:#6e6c80;margin-top:1.6rem;border-top:1px solid var(--line);padding-top:.8rem}
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;max-width:520px}
.calc label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin:.8rem 0 .25rem}
.calc input{width:100%;padding:.55rem;border:1px solid var(--line);border-radius:8px;font-size:1rem}
.calc .res{font-family:'Poppins';font-size:1.6rem;font-weight:700;color:var(--ink);margin-top:1rem}
@media(max-width:640px){.rankside{flex:1 1 100%}}
figure.diagram{margin:1.6rem 0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
figure.diagram svg{width:100%;height:auto;display:block}
figure.diagram figcaption{font-size:.8rem;color:#6e6c80;margin-top:.5rem;font-weight:500}
.warn{background:#fff5f6;border:1px solid #ffd0d6;border-left:4px solid var(--coral);border-radius:10px;padding:.9rem 1.1rem;margin:1.2rem 0;font-size:.92rem}
.warn b{color:var(--coral)}
.okbox{background:#f2fbf5;border:1px solid #c8ecd4;border-left:4px solid #24a35a;border-radius:10px;padding:.9rem 1.1rem;margin:1.2rem 0;font-size:.92rem}
.herowrap{display:flex;gap:2.5rem;align-items:center;flex-wrap:wrap;max-width:1080px;margin:0 auto;padding:2.6rem 1.2rem 1rem}
.herowrap .htext{flex:1 1 340px}
.herowrap .hart{flex:0 1 400px;max-width:440px}
.heroimg{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 40px rgba(19,16,56,.28))}
.panelimg{width:100%;height:auto;display:block}
/* ranked "best panel" cards (top10-style anatomy) */
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin:1.1rem 0;box-shadow:0 4px 14px rgba(19,16,56,.06);overflow:hidden}
.rribbon{display:inline-flex;align-items:stretch;background:#fff0f2;border:1px solid #ffd0d6;border-top:0;border-left:0;border-bottom-right-radius:12px}
.rribbon .rrank{background:var(--ink);color:#fff;font-family:'Poppins';font-weight:700;font-size:1.15rem;display:flex;align-items:center;justify-content:center;width:40px;padding:.35rem 0}
.rribbon .rrlabel{color:var(--coral-d);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;padding:.35rem .95rem}
.rcard-in{display:flex;gap:1.3rem;align-items:flex-start;padding:1rem 1.3rem 1.3rem}
.rlogo{flex:0 0 124px;width:124px}
.rmid{flex:1 1 auto;min-width:0}
.rmid h3{margin:.1rem 0 .15rem;font-size:1.18rem}
.rsub{font-size:.82rem;color:#6b6980;margin-bottom:.2rem}
.rspecs{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.6rem 0;font-size:.84rem;color:#4a476a}
.rspecs b{color:var(--ink)}
.rchecks{list-style:none;margin:.6rem 0 0;padding:0;font-size:.92rem}
.rchecks li{position:relative;padding-left:1.5rem;margin:.32rem 0}
.rchecks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--green);font-weight:700}
.rright{flex:0 0 160px;text-align:center;display:flex;flex-direction:column;align-items:stretch;gap:.5rem}
.rscorenum{font-family:'Poppins';font-weight:700;font-size:2.3rem;line-height:1;color:var(--ink)}
.rscoreword{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#0a7a40;margin:-.1rem 0 .4rem}
.rright .btn{width:100%;padding:.6rem .5rem;font-size:.9rem}
.howbox{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:12px;padding:1rem 1.2rem;margin:1.1rem 0}
.howbox h4{margin:0 0 .3rem;font-size:1rem}
.howbox p{font-size:.9rem;margin:.3rem 0;color:#4a476a}
.howbox .statline{font-size:.82rem;font-weight:600;color:var(--ink);margin-top:.55rem}
@media(max-width:700px){.rcard-in{flex-direction:column}.rlogo{width:104px;flex-basis:104px;margin:0 auto}.rright{flex-basis:auto;width:100%}}
.btn.ghost{background:#fff;color:var(--ink)!important;border:1.5px solid var(--ink)}
.pickcard .pimg{width:88px;margin:0 auto .6rem}
.modelhero{display:flex;gap:1.3rem;align-items:center;margin:1rem 0 1.2rem;flex-wrap:wrap}
.modelhero .mh-img{flex:0 0 150px;width:150px;height:192px}
.modelhero .mh-txt{flex:1 1 300px}
.card .pimg{width:76px;margin:0 auto .5rem}
.brandcard .bchead{display:flex;align-items:center;gap:.7rem;margin-bottom:.35rem}
.brandcard .bchead h3{margin:0;font-size:1.15rem}
.blogo{flex:0 0 46px;width:46px;height:46px;border:1px solid var(--line);border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.blogo img{max-width:82%;max-height:82%;object-fit:contain;display:block}
.lmono{width:100%;height:100%;align-items:center;justify-content:center;font-family:'Poppins';font-weight:700;color:var(--coral-d);background:#fff0f2;font-size:.95rem}
/* ===== best-panels wide top10-style layout (scoped) ===== */
.stars{display:inline-flex;align-items:center;gap:1px;vertical-align:middle}
.star{display:block}
.rec-ribbon{display:inline-flex;align-items:center;gap:.35rem;background:var(--green);color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.32rem .72rem;border-radius:99px;line-height:1}
.rec-ribbon svg{color:#fff}
/* hero band (full-bleed) */
.bhero{position:relative;color:#fff;padding:3.4rem 1.2rem 3.2rem;
background:linear-gradient(90deg,rgba(13,9,32,.93) 0%,rgba(13,9,32,.74) 46%,rgba(13,9,32,.34) 100%),url('/assets/img/hero-red-panel.jpg');
background-size:cover;background-position:center}
.bhero-in{max-width:1120px;margin:0 auto}
.bhero h1{color:#fff;max-width:18ch;margin:0}
.bpill{display:inline-flex;align-items:center;gap:.42rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:.8rem;font-weight:600;padding:.32rem .82rem;border-radius:99px;margin-bottom:1rem}
.bpill svg{color:#7ef0a8}
.bsub{max-width:60ch;font-size:1.08rem;color:#ece9f6;margin:.85rem 0 1.4rem}
.bctas{display:flex;gap:.7rem;flex-wrap:wrap}
.bctas .btn{padding:.7rem 1.45rem}
/* top picks summary row */
.toppicks{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.1rem 0 2.3rem;margin-bottom:.4rem}
.toppicks h2{margin:0 0 1.1rem}
.tprow{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tpcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;box-shadow:0 4px 14px rgba(19,16,56,.05);display:flex;flex-direction:column}
.tpcard.tp-recommended{border-color:#bfe9cf;box-shadow:0 6px 18px rgba(15,169,88,.14)}
.tpcard .rec-ribbon{position:absolute;top:-11px;left:1.1rem}
.tpimgbox{height:132px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:.7rem;margin-top:.3rem}
.tpimg{max-width:100%;max-height:100%;object-fit:contain}
.tpimgbox .panelimg{max-height:100%;width:auto;max-width:100%}
.tpname{font-family:'Poppins';font-weight:600;font-size:1rem;line-height:1.25}
.tprate{display:flex;align-items:center;gap:.45rem;margin:.4rem 0}
.tprate b{font-family:'Poppins';font-size:1.05rem;color:var(--ink)}
.tpreason{font-size:.86rem;color:#5a5872;margin:.15rem 0 .8rem;flex:1}
.tplink{font-weight:600;font-size:.9rem}
/* two-column main */
.bwrap{padding-top:.2rem}
.bintro{max-width:840px}
.bmain{display:flex;gap:1.6rem;align-items:flex-start}
.bcol{flex:1 1 auto;min-width:0}
.brail{flex:0 0 300px;position:sticky;top:80px;display:flex;flex-direction:column;gap:1rem}
.railbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;box-shadow:0 4px 14px rgba(19,16,56,.05)}
.railbox h4{margin:0 0 .45rem;font-size:1rem}
.railbox p{font-size:.86rem;color:#4a476a;margin:0}
.railchecks{list-style:none;margin:0;padding:0;font-size:.86rem}
.railchecks li{position:relative;padding-left:1.5rem;margin:.42rem 0;color:#4a476a}
.railchecks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--green);font-weight:700}
.railstat-box{background:var(--ink);border-color:var(--ink)}
.railstat{font-size:.84rem;font-weight:600;color:#fff!important}
/* upgraded ranked cards */
.rcard-rec{border-color:#bfe9cf;box-shadow:0 6px 18px rgba(15,169,88,.14)}
.rtop{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.rtop .rec-ribbon{margin:.45rem .95rem .1rem 0}
.rlogo{flex:0 0 150px;width:150px;height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rphoto{max-width:100%;max-height:100%;object-fit:contain}
.rlogo .panelimg{max-height:100%;width:auto;max-width:100%}
.rrate{display:flex;align-items:center;gap:.5rem;margin:.15rem 0 .1rem}
.rrate b{font-family:'Poppins';font-size:1.05rem;color:var(--ink)}
@media(max-width:900px){.bmain{flex-direction:column}.brail{position:static;flex-basis:auto;width:100%}}
@media(max-width:760px){.tprow{grid-template-columns:1fr}}
@media(max-width:700px){.rlogo{margin:0 auto;width:150px;flex-basis:150px;height:180px}}
/* ===== universal product-photo box (.pbox) + brand lockups ===== */
.pbox{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.pbox .lmono{display:none;width:100%;height:100%;align-items:center;justify-content:center;font-family:'Poppins';font-weight:700;color:var(--coral-d);background:#fff0f2;font-size:1.35rem}
.brandhead{display:flex;align-items:center;gap:1rem;margin:0 0 .4rem;flex-wrap:wrap}
.brandhead .blogo{flex:0 0 58px;width:58px;height:58px}
.brandhead h1{margin:0}
.evpick-img{width:100%;height:120px;margin:0 0 .7rem}
.evbrandstrip{display:flex;flex-wrap:wrap;gap:1.1rem;margin:.6rem 0 1rem}
.evbrand{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:104px;text-align:center;font-size:.82rem;color:var(--ink2)}
.evbrand .blogo{flex:0 0 56px;width:56px;height:56px}
.cmplogos{display:flex;gap:.55rem;margin-bottom:.55rem}
.cmphead{display:flex;gap:1.4rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.cmpbrand{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink)}
.cmpbrand .blogo{flex:0 0 48px;width:48px;height:48px}
.cmpflags{display:flex;gap:1rem;margin:.6rem 0 1rem;flex-wrap:wrap}
.cmpflag{width:120px;height:150px;flex:0 0 auto}
/* ===== site logo mark ===== */
.logo{display:inline-flex;align-items:center;gap:.55rem}
.logo .lmark{display:block;flex:0 0 auto}
footer .fbrand{display:flex;align-items:center;gap:.55rem;margin-bottom:.6rem}
footer .fbrand .fh4{margin:0}
/* ===== homepage landing ===== */
.hero-land{text-align:left;padding:2.4rem 1.2rem 2.6rem}
.hero-land .herowrap{padding:0;max-width:1120px;align-items:center}
.hero-land .sub{margin:.8rem 0 1.3rem;max-width:52ch;font-size:1.1rem;color:#565470}
.hero-land .hart{flex:0 1 470px;max-width:480px}
.hctas{display:flex;gap:.7rem;flex-wrap:wrap;margin:0 0 1.5rem}
.hstats{display:flex;gap:.5rem 1.7rem;flex-wrap:wrap;font-size:.88rem;color:#565470;align-items:baseline}
.hstats b{font-family:'Poppins';font-size:1.08rem;color:var(--ink)}
.hstack{position:relative;width:min(440px,94vw);height:316px;margin:0 auto}
.hcard{position:absolute;top:32px;left:50%;width:190px;height:250px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 24px 44px rgba(19,16,56,.16),0 6px 14px rgba(19,16,56,.10)}
.hcard .pbox{border:0}
.hcard-c{width:210px;height:274px;top:6px;margin-left:-105px;z-index:3;box-shadow:0 30px 54px rgba(19,16,56,.22),0 8px 18px rgba(19,16,56,.12)}
.hcard-l{margin-left:-214px;transform:rotate(-7deg);z-index:1}
.hcard-r{margin-left:26px;transform:rotate(7deg);z-index:2}
@media(max-width:460px){.hstack{height:272px}.hcard{width:156px;height:206px}.hcard-c{width:178px;height:234px;margin-left:-89px}.hcard-l{margin-left:-172px}.hcard-r{margin-left:16px}}
@media(max-width:374px){.hstack{height:240px}.hcard{width:132px;height:176px}.hcard-c{width:152px;height:200px;margin-left:-76px}.hcard-l{margin-left:-146px}.hcard-r{margin-left:14px}}
/* brand logo belt */
.brandbelt{background:#fff;border-bottom:1px solid var(--line);padding:1.5rem 1.2rem 1.8rem}
.brandbelt .beltin{max-width:1120px;margin:0 auto}
.beltlabel{text-align:center;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6e6c80;margin-bottom:.9rem}
.lstrip{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;align-items:center}
.lstrip .blogo{width:58px;height:58px;flex:0 0 58px}
.lstrip .blogo img{filter:grayscale(1);opacity:.72;transition:filter .15s,opacity .15s}
.lstrip a:hover .blogo img{filter:none;opacity:1}
.lstrip .morebrands{font-size:.85rem;font-weight:600;white-space:nowrap;margin-left:.4rem}
/* category tiles */
.cattiles{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin:1.2rem 0 .4rem}
@media(max-width:1020px){.cattiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.cattiles{grid-template-columns:repeat(2,1fr)}}
a.cattile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem;text-align:center;box-shadow:0 4px 14px rgba(19,16,56,.05);color:var(--ink2);text-decoration:none!important;transition:transform .15s,box-shadow .15s}
a.cattile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(19,16,56,.10)}
.cattile .ctimg{display:block;height:118px;margin-bottom:.7rem}
.cattile .ctimg .pbox{border:0}
.cattile h3{margin:0 0 .25rem;font-size:.98rem}
.cattile p{font-size:.8rem;color:#6b6980;margin:0}
/* icon trio */
.whyrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.2rem 0}
@media(max-width:760px){.whyrow{grid-template-columns:1fr}}
.whycard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:0 4px 14px rgba(19,16,56,.05)}
.whycard .wicon{width:42px;height:42px;border-radius:11px;background:#ffe7ea;color:var(--coral-d);display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.whycard h3{margin:0 0 .3rem;font-size:1.02rem}
.whycard p{font-size:.88rem;color:#6b6980;margin:0}
/* pill chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 1.2rem}
a.chip{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:99px;padding:.34rem .9rem;font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none!important;box-shadow:0 2px 8px rgba(19,16,56,.04)}
a.chip:hover{border-color:var(--coral);color:var(--coral-d)}
/* ranked-card score breakdown bars */
.sbars{display:flex;flex-direction:column;gap:.34rem;margin:.15rem 0 .35rem;text-align:left}
.sbar{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:.5rem}
.sbar .sl{font-size:.68rem;font-weight:600;color:#6b6980;white-space:nowrap}
.sbar .track{height:6px;background:#efeff4;border-radius:99px;overflow:hidden}
.sbar .fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--coral),#ff7a88)}
/* database band */
.dbband{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;background:var(--ink);border-radius:var(--radius);padding:1.5rem 1.6rem;margin:2.2rem 0 .6rem}
.dbband .bimgs{display:flex;gap:.55rem}
.dbband .bimgs .pbox{width:72px;height:90px;border:0;border-radius:10px}
.dbband .btxt{flex:1 1 260px}
.dbband h3{color:#fff;margin:0 0 .25rem}
.dbband p{color:#c9c7dd;font-size:.9rem;margin:0}
/* ===== /panels/ filterable all-devices grid ===== */
.allband{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;flex-wrap:wrap;background:#fff0f2;border:1px solid #ffd0d6;border-radius:var(--radius);padding:.9rem 1.1rem;margin:1.1rem 0;font-size:.95rem}
.allband b{color:var(--ink)}
.allband .btn{padding:.5rem 1.05rem;font-size:.88rem}
.fbar{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;margin:1.2rem 0 .4rem;box-shadow:0 4px 14px rgba(19,16,56,.05)}
.fgroup{display:flex;flex-direction:column;gap:.35rem;min-width:0;max-width:100%}
.fgroup>span{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6e6c80}
.fbar select{padding:.44rem .55rem;border:1px solid var(--line);border-radius:8px;font-size:.88rem;background:#fff;color:var(--ink);font-family:inherit;max-width:200px}
.fchips{display:flex;flex-wrap:wrap;gap:.4rem}
.fchip{display:inline-flex;align-items:center;gap:.32rem;border:1px solid var(--line);border-radius:99px;padding:.26rem .66rem;font-size:.82rem;font-weight:600;color:var(--ink);background:#fff;cursor:pointer;white-space:nowrap}
.fchip input{accent-color:var(--coral);margin:0}
.fchip:has(input:checked){border-color:var(--coral);background:#fff0f2;color:var(--coral-d)}
#f-reset{cursor:pointer;font-family:inherit;align-self:flex-end}
.fmeta{display:flex;align-items:baseline;gap:.6rem 1.2rem;flex-wrap:wrap;margin:.6rem 0 .1rem}
#f-count{font-size:.92rem;font-weight:600;color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.9rem;margin:1rem 0 1.4rem}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.75rem;box-shadow:0 4px 14px rgba(19,16,56,.05);display:flex;flex-direction:column}
.pcimg{display:block;height:150px;margin:0 0 .55rem}
.pcbrand{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6e6c80}
.pcname{font-family:'Poppins';font-weight:600;font-size:.92rem;line-height:1.3;margin:.12rem 0 .3rem}
.pcname a{color:var(--ink)}
.pcwl{font-size:.78rem;color:#6b6980;margin-bottom:.5rem;flex:1}
.pcdeep{display:inline-block;background:#ffe7ea;color:var(--coral-d);font-size:.66rem;font-weight:700;padding:.08rem .45rem;border-radius:99px;margin-left:.2rem;white-space:nowrap;vertical-align:1px}
.pcprice{font-family:'Poppins';font-weight:700;font-size:.98rem;color:var(--ink)}
.pcprice .nv{font-family:'Inter';font-weight:500;font-size:.8rem;color:#6e6c80}
@media(max-width:640px){.pgrid{grid-template-columns:repeat(2,1fr);gap:.7rem}.pcimg{height:118px}}
/* ===== accessibility: skip link + visible keyboard focus ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;font-weight:600;padding:.6rem 1.1rem;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* ===== small screens: nav as one scrollable row, header unstuck ===== */
@media(max-width:700px){
header.site{position:static}
.nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:1.05rem}
.nav::-webkit-scrollbar{display:none}
.nav a.nl{padding:.55rem .1rem;white-space:nowrap}
.nav .logo{flex:0 0 auto}
}