/* The High Tech Society — shared design system. Loaded on all new sub-brand pages. */
:root{
  --ink:#111827; --muted:#475569; --line:#e8ecf2; --line-soft:#f1f5f9;
  --blue:#2563eb; --blue-fill:#1d4ed8; --blue-50:#eff6ff; --blue-edge:#cfe0fb; --blue-tint:#f6f9ff;
  --green:#047857; --green-50:#ecfdf5; --green-edge:#cde9da;
  --star:#f5a623; --warn:#b45309; --warn-50:#fffbeb; --warn-edge:#f6e6bf;
  --rose:#b91c1c; --rose-50:#fef2f2; --rose-edge:#f7d4d4;
  --head-bg:#fbfcfe; --stripe:#fafbfd;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
a{color:var(--blue-fill);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ===== site header — Editorial premium mega-menu (JS-free, full-bleed) ===== */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);}
.site-header .hairline{height:3px;background:linear-gradient(90deg,var(--blue) 0%,var(--blue-fill) 38%,var(--green) 100%);}
.site-header .bar{margin:0 auto;display:flex;align-items:center;gap:1.5rem;padding:0.85rem 1.2rem;}

/* brand: monogram tile + wordmark */
.site-header .brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);flex:0 0 auto;}
.site-header .mark{display:block;width:37px;height:40px;flex:0 0 auto;}
.site-header .brand .name{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink);white-space:nowrap;}
.site-header .brand .name b{font-weight:800;background:linear-gradient(90deg,#4F5BE8 0%,#8B3AD6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}

/* nav shell */
.site-header .primary-nav{margin-left:auto;}
.site-header .nav-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.site-header .nav-toggle{list-style:none;cursor:pointer;display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:var(--ink);}
.site-header .nav-toggle::-webkit-details-marker{display:none;}
.site-header .nav-toggle:hover{background:var(--blue-tint);}
.site-header .menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem;}
.site-header .menu > li{position:static;}
.site-header .menu > li > a,
.site-header .menu > li > .toggle{display:inline-flex;align-items:center;gap:.32rem;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--muted);text-decoration:none;padding:.55rem .55rem;border-radius:8px;border:0;background:transparent;cursor:pointer;white-space:nowrap;transition:color .15s ease,background .15s ease;}
.site-header .menu > li > a:hover,
.site-header .menu > li > .toggle:hover{color:var(--ink);background:var(--blue-tint);}
.site-header .menu > li > a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue);}
.site-header .caret{transition:transform .2s ease;}
.site-header .menu > li:hover .caret,
.site-header .menu > li:focus-within .caret{transform:rotate(180deg);}

/* focus visibility (WCAG) */
.site-header a:focus-visible,
.site-header .toggle:focus-visible,
.site-header .nav-toggle:focus-visible{outline:2px solid var(--blue-fill);outline-offset:2px;border-radius:8px;}

/* mega panel: full-width drop under the whole bar (anchored to the sticky header) */
.site-header .panel{position:absolute;left:0;right:0;top:100%;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 36px rgba(17,24,39,.10);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;pointer-events:none;}
.site-header .menu > li:hover > .panel,
.site-header .menu > li:focus-within > .panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.site-header .panel-inner{max-width:1100px;margin:0 auto;padding:1.75rem 1.2rem;}
.site-header .panel-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:2rem;}
.site-header .pcol h3{margin:0 0 .9rem;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-fill);padding-bottom:.55rem;border-bottom:1px solid var(--line-soft);}
.site-header .plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem;}
.site-header .plist a{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:600;padding:.45rem .55rem;border-radius:8px;transition:background .14s ease;}
.site-header .plist a:hover{background:var(--blue-tint);}
.site-header .plist a .meta{display:block;font-size:.76rem;font-weight:500;color:var(--muted);margin-top:.15rem;}
.site-header .plist a .rank{flex:0 0 auto;width:1.25rem;height:1.25rem;border-radius:5px;background:var(--blue-50);color:var(--blue-fill);font-size:.68rem;font-weight:800;display:grid;place-items:center;}
.site-header .viewall{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-size:.83rem;font-weight:700;color:var(--blue-fill);text-decoration:none;}
.site-header .viewall:hover{text-decoration:underline;}
.site-header .viewall .arr{transition:transform .15s ease;}
.site-header .viewall:hover .arr{transform:translateX(3px);}

/* featured card */
.site-header .feature{background:var(--blue-tint);border:1px solid var(--blue-edge);border-radius:12px;padding:1.1rem;}
.site-header .feature .tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--blue-fill);padding:.22rem .5rem;border-radius:999px;margin-bottom:.65rem;}
.site-header .feature h4{margin:0 0 .35rem;font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.site-header .feature p{margin:0 0 .7rem;font-size:.82rem;line-height:1.5;color:var(--muted);}
.site-header .stars-line{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.7rem;}
.site-header .stars-line .s{color:var(--star);font-size:.85rem;letter-spacing:.05em;}
.site-header .stars-line .score{font-size:.78rem;font-weight:700;color:var(--ink);}
.site-header .feature .flink{display:inline-flex;align-items:center;gap:.35rem;font-size:.83rem;font-weight:700;color:var(--blue-fill);text-decoration:none;}
.site-header .feature .flink:hover{text-decoration:underline;}

/* desktop: always-on horizontal nav */
@media(min-width:1130px){
  .site-header .nav-toggle{display:none;}
  .site-header .nav-cb{display:none;}
  .site-header .primary-nav .menu{display:flex !important;}
  .site-header .panel-grid.is-merged{grid-template-columns:repeat(4,1fr);gap:1.5rem;}
}

/* mobile: hamburger reveals a full-width stacked menu; mega panels render inline (no hover) */
@media(max-width:1129.98px){
  .site-header .nav-toggle{display:inline-flex;}
  .site-header .primary-nav .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 36px rgba(17,24,39,.12);padding:.5rem 1.2rem 1.25rem;max-height:calc(100vh - 64px);overflow-y:auto;}
  .site-header .nav-cb:checked ~ .menu{display:flex;}
  .site-header .menu > li{display:block;border-top:1px solid var(--line-soft);}
  .site-header .menu > li:first-child{border-top:0;}
  .site-header .menu > li > a,
  .site-header .menu > li > .toggle{display:flex;width:100%;justify-content:space-between;font-size:1rem;padding:.85rem .4rem;color:var(--ink);}
  .site-header .menu > li.is-open > .toggle .caret{transform:rotate(180deg);}
  .site-header .panel{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;pointer-events:auto;}
  .site-header .menu > li.is-open > .panel{display:block;}
  .site-header .panel-inner{max-width:none;margin:0;padding:0 0 .75rem;}
  .site-header .panel-grid{grid-template-columns:1fr;gap:1rem;}
  .site-header .viewall{margin-top:.4rem;padding:.6rem .4rem;}
  .site-header .feature .flink{padding:.6rem .4rem;}
  .site-header .feature{margin-bottom:.6rem;}
}

/* small phones: keep the single-line brand + hamburger inside a 360px viewport */
@media(max-width:560px){
  .site-header .brand .name{font-size:1.05rem;}
  .site-header .mark{width:34px;height:37px;}
}

/* narrow desktop (1130–1299px): shrink the whole header 10% (brand + nav + panels) + tighten gap so 6 dropdowns fit; hamburger zone (<1130px) unaffected */
@media(min-width:1130px) and (max-width:1299.98px){
  .site-header .menu{gap:.06rem;}
  /* brand (−20% to keep 6 dropdowns fitting) */
  .site-header .brand .name{font-size:1.16rem;}
  .site-header .mark{width:34px;height:37px;}
  /* top-level nav items (tighter padding: single-line brand is wider than the old stacked one) */
  .site-header .menu > li > a,
  .site-header .menu > li > .toggle{font-size:.81rem;padding:.55rem .38rem;}
  /* dropdown panel text */
  .site-header .pcol h3{font-size:.612rem;}
  .site-header .plist a{font-size:.81rem;}
  .site-header .plist a .meta{font-size:.684rem;}
  .site-header .plist a .rank{font-size:.612rem;}
  .site-header .viewall{font-size:.747rem;}
  .site-header .feature .tag{font-size:.576rem;}
  .site-header .feature h4{font-size:.9rem;}
  .site-header .feature p{font-size:.738rem;}
  .site-header .feature .flink{font-size:.747rem;}
  .site-header .stars-line .s{font-size:.765rem;}
  .site-header .stars-line .score{font-size:.702rem;}
}

/* ===== footer ===== */
.site-footer{margin-top:3rem;background:var(--head-bg);}
.site-footer .fcap{height:2px;background:linear-gradient(90deg,var(--blue) 0%,var(--blue-fill) 38%,var(--green) 100%);}
.site-footer .finner{max-width:1100px;margin:0 auto;padding:2.4rem 1.2rem 1.6rem;display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;}
.site-footer .fbrand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;}
.site-footer .fmark{display:block;flex:0 0 auto;}
.site-footer .fname{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;}
.site-footer .fname b{font-weight:800;background:linear-gradient(90deg,#4F5BE8 0%,#8B3AD6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.site-footer .ftag{margin:0;max-width:46ch;font-size:.92rem;color:var(--muted);}
.site-footer .fcats{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-top:.4rem;}
.site-footer .fcats a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.38rem .9rem;font-size:.82rem;font-weight:600;color:#334155;text-decoration:none;transition:background .14s ease,border-color .14s ease,color .14s ease;}
.site-footer .fcats a:hover{background:var(--blue-tint);border-color:var(--blue-edge);color:var(--ink);}
.site-footer .futil{display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem .9rem;font-size:.88rem;}
.site-footer .futil a{display:inline-block;padding:.5rem .25rem;color:var(--muted);font-weight:500;text-decoration:none;}
.site-footer .futil a:hover{color:var(--blue-fill);}
.site-footer .fsoc{display:flex;justify-content:center;gap:.55rem;}
.site-footer .fsoc a{width:32px;height:32px;border-radius:50%;background:var(--blue-50);border:1px solid var(--blue-edge);color:var(--blue-fill);display:inline-flex;align-items:center;justify-content:center;transition:background .14s ease,color .14s ease;}
.site-footer .fsoc a svg{width:16px;height:16px;}
.site-footer .fsoc a:hover{background:var(--blue-fill);color:#fff;}
.site-footer .flegal{margin:.4rem 0 0;font-size:.78rem;color:#64748b;max-width:72ch;}
.site-footer a:focus-visible{outline:2px solid var(--blue-fill);outline-offset:2px;}
.site-footer .fbrand:focus-visible,.site-footer .futil a:focus-visible{border-radius:8px;}

/* ===== page + article layout ===== */
.parent-main{max-width:1100px;margin:0 auto;padding:2rem 1.2rem 2.5rem;}
.article-grid{display:block;}
.article-head{max-width:760px;}
.article{max-width:760px;}
.article-head h1{font-size:2rem;line-height:1.16;letter-spacing:-.02em;font-weight:800;margin:.2rem 0 .6rem;}
.article h2{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;margin:2.6rem 0 1rem;}
.article h2,.article h3{scroll-margin-top:96px;}
.article h3{font-size:1.2rem;font-weight:700;margin:1.8rem 0 .6rem;}
.article p{font-size:1.125rem;line-height:1.7;margin:0 0 1.15rem;}
.hero-img{width:100%;border-radius:14px;border:1px solid var(--line);margin:0 0 1.6rem;}
.article .img-ph{display:block;margin:0 0 1.6rem;}
.toc-rail{margin:0 0 1.5rem;}
@media(min-width:961px){
  .article-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:0 3rem;align-items:start;}
  .article-head{grid-column:1;grid-row:1;}
  .article{grid-column:1;grid-row:2;}
  .toc-rail{grid-column:2;grid-row:1/span 2;position:static;top:84px;margin:0;}
}

/* ===== shared atoms ===== */
.stars{display:inline-block;position:relative;font-size:1.05rem;line-height:1;text-align:left;}
.stars .bg{color:#c8cdd8;} .stars .fg{color:var(--star);position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;width:0;}
.stars .fg.fill-0{width:0} .stars .fg.fill-5{width:5%} .stars .fg.fill-10{width:10%} .stars .fg.fill-15{width:15%} .stars .fg.fill-20{width:20%} .stars .fg.fill-25{width:25%} .stars .fg.fill-30{width:30%} .stars .fg.fill-35{width:35%} .stars .fg.fill-40{width:40%} .stars .fg.fill-45{width:45%} .stars .fg.fill-50{width:50%} .stars .fg.fill-55{width:55%} .stars .fg.fill-60{width:60%} .stars .fg.fill-65{width:65%} .stars .fg.fill-70{width:70%} .stars .fg.fill-75{width:75%} .stars .fg.fill-80{width:80%} .stars .fg.fill-85{width:85%} .stars .fg.fill-90{width:90%} .stars .fg.fill-95{width:95%} .stars .fg.fill-100{width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-weight:700;font-size:.88rem;border-radius:10px;padding:.65rem 1.2rem;border:2px solid transparent;cursor:pointer;text-decoration:none;}
.btn.primary{background:var(--blue-fill);color:#fff;box-shadow:0 5px 14px -6px rgba(29,78,216,.55);}
.btn.ghost{background:#fff;color:var(--blue-fill);border-color:var(--blue-fill);}
.btn.price{background:var(--green);color:#fff;flex-direction:column;gap:0;align-items:flex-start;}
.btn.price small{font-weight:500;font-size:.7rem;opacity:.92;}
.btn.buy{background:var(--blue-fill);color:#fff;font-size:.8rem;padding:.45rem .9rem;border-radius:8px;white-space:nowrap;}
.btn.buy.ghost{background:#fff;color:var(--blue-fill);}

/* ===== verdict ===== */
.verdict{background:var(--blue-50);border:1px solid var(--blue-edge);border-radius:14px;padding:1.5rem 1.6rem;margin:2.2rem 0;box-shadow:0 6px 20px -10px rgba(37,99,235,.18);}
.verdict .vlabel{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--blue);margin-bottom:.5rem;}
.verdict h3{font-size:1.2rem;line-height:1.3;margin:0 0 .75rem;font-weight:700;}
.verdict p{margin:0;font-size:1rem;color:var(--muted);}
.verdict .vrow {margin-bottom: 0.86em;}
.vrow{display:flex;gap:1.4rem;align-items:flex-start;}
.vmain{flex:1;}
.starblk{text-align:right;flex-shrink:0;padding-top:.2rem;}
.starblk .stars{font-size:1.5rem;letter-spacing:2px;}
.starblk .meta{margin-top:.5rem;font-size:.9rem;color:#334155;white-space:nowrap;}
.starblk .meta b{color:var(--ink);font-weight:800;} .starblk .meta .g{color:var(--green);font-weight:700;}
/* Phone widths: same failure as .product-cta. .starblk never shrinks (~110px of
   stars above a nowrap score), so .vmain is squeezed to 151px at 375px and the box
   grows to ~980px tall. Below 560px, stack the row and run the score out
   horizontally under the text; .vrow keeps align-items:flex-start, which is the
   left edge once the direction is column. Verdicts with no .starblk are unaffected. */
@media(max-width:560px){
  .vrow{flex-direction:column;gap:1rem;}
  .starblk{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;text-align:left;padding-top:0;}
  .starblk .meta{margin-top:0;}
}

/* ===== quick picks (floating ribbon) ===== */
.qp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:2.2rem 0;}
@media(max-width:760px){.qp-grid{grid-template-columns:1fr;}}
.qp{position:relative;overflow:visible;margin-top:.8rem;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 16px rgba(15,23,42,.06);display:flex;flex-direction:column;}
.qp.top{border-color:var(--blue);box-shadow:0 10px 26px rgba(37,99,235,.16);}
.qp .ribbon{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:.35rem;padding:.4rem .9rem;border-radius:999px;color:#fff;font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 4px 12px rgba(0,0,0,.18);}
.qp .ribbon svg{width:13px;height:13px;}
.rb-blue{background:var(--blue-fill);} .rb-green{background:var(--green);} .rb-violet{background:#7c3aed;}
.qp .body{padding:1.5rem 1.1rem 1.1rem;display:flex;flex-direction:column;flex:1;text-align:center;}
.qp .img{width:100%;aspect-ratio:4/3;border-radius:10px;margin-bottom:.8rem;background:repeating-linear-gradient(45deg,#e9ecf2 0 12px,#eef1f6 12px 24px);border:1px solid #e3e9f2;object-fit:cover;display:block;}
.qp .nm{font-weight:800;font-size:1rem;}
/* .body is a flex column, so .stars is blockified and stretched to the card width:
   the grey stars sit at the left edge and .fg's percentage width is measured
   against the whole card, so every fill-* reads as five full stars. align-self
   shrinks the item to the star text so both the centering and the fill work. */
.qp .stars{margin:.45rem auto .2rem;font-size:1.2rem;align-self:center;}
.qp .sc{font-size:.82rem;color:#64748b;font-weight:600;margin-bottom:.9rem;}
.qp .sc b{color:var(--ink);}
.qp .btn{margin-top:auto;width:100%;}

/* ===== product cta ===== */
.product-cta{position:relative;display:flex;gap:1.1rem;align-items:center;background:var(--blue-tint);border:1px solid var(--blue-edge);border-radius:14px;padding:1.25rem 1.4rem;margin:2.2rem 0;}
.product-cta .ribbon{position:absolute;top:-10px;left:16px;background:#0b1220;color:#34d399;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .55rem;border-radius:6px;}
.logo-link{display:block;flex-shrink:0;line-height:0;}
.product-cta .thumb{width:74px;height:74px;border-radius:12px;flex-shrink:0;background:repeating-linear-gradient(45deg,#dbe3f0 0 10px,#e7edf6 10px 20px);border:1px solid #cfd9ea;object-fit:cover;display:block;}
.product-cta .mid{flex:1;min-width:0;}
.product-cta .nm{font-weight:800;font-size:1.02rem;}
.product-cta .why{font-size:.86rem;color:var(--muted);margin-top:.15rem;line-height:1.45;}
.product-cta .right{text-align:right;flex-shrink:0;}
.product-cta .price{font-weight:800;font-size:1.05rem;margin-bottom:.45rem;}
.product-cta .price small{display:block;font-weight:500;font-size:.7rem;color:var(--muted);}
/* Stretched link: the card's button covers the whole card (both containers are
   position:relative), so clicks on the image/name/score land on the CTA. Any other
   link inside a card (e.g. in-prose links in .why) is lifted above the overlay. */
.qp .btn::after,.product-cta .btn::after{content:"";position:absolute;inset:0;border-radius:14px;}
.qp a:not(.btn),.product-cta a:not(.btn){position:relative;z-index:1;}
/* Phone widths: the three-column row runs out of room. .thumb (74px) and .right
   (~140px) are both flex-shrink:0, so .mid absorbs the whole shortfall and collapses
   to ~40px at 375px, wrapping .why one word per line. Below 560px, drop to a grid:
   logo + name/why on the first row, price + CTA on their own full-width row
   (same price-left / button-right footer as .review .rfoot). */
@media(max-width:560px){
  .product-cta{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:1.1rem;row-gap:1.1rem;}
  .product-cta .right{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem 1rem;text-align:left;}
  .product-cta .price{margin-bottom:0;}
}

/* ===== best-of comparison ===== */
.cmp-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:2.2rem 0;box-shadow:0 2px 10px rgba(15,23,42,.04);}
.scroll{overflow-x:auto;}
table.cmp{width:100%;border-collapse:collapse;font-size:.9rem;min-width:660px;}
table.cmp thead{background:var(--head-bg);}
table.cmp thead th{text-align:left;padding:.75rem .95rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#334155;font-weight:700;border-bottom:2px solid var(--line);}
table.cmp td,table.cmp tbody th{padding:.9rem .95rem;border-top:1px solid var(--line);vertical-align:middle;background:#fff;text-align:left;font-weight:400;}
table.cmp tr.top td,table.cmp tr.top th{background:var(--blue-tint);}
table.cmp tr.top > :first-child{box-shadow:inset 4px 0 0 var(--blue);}
/* CTA column sits right after Product so the button is visible without horizontal scroll; keep it as narrow as its button */
table.cmp thead th:nth-child(2):has(> .sr:only-child),table.cmp td:nth-child(2):has(> .btn.buy),table.cmp td:nth-child(2):empty{width:1%;white-space:nowrap;}
/* Product column holds its content: name wraps between words only, never below the stars row's width */
table.cmp tbody th{min-width:13rem;}
.prodcell{display:flex;align-items:center;gap:.7rem;}
.prodcell .th{width:42px;height:42px;border-radius:8px;flex-shrink:0;background:repeating-linear-gradient(45deg,#e4e9f1 0 8px,#eef2f8 8px 16px);border:1px solid #d3dbe7;object-fit:cover;display:block;}
.prodcell .nm{font-weight:800;}
.prodcell .tag{display:inline-flex;align-items:center;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--blue-fill);}
.ratecell .s{font-weight:800;} .ratecell small{color:var(--muted);font-weight:600;}
.prodcell .prodmeta{display:flex;flex-direction:column;gap:.1rem;min-width:min-content;}
.prodcell .nm{overflow-wrap:normal;word-break:normal;hyphens:none;}
.prodrate{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;}
.prodrate .stars{font-size:.9rem;}
.prodrate .rv{font-size:.76rem;color:var(--muted);font-weight:600;}
.prodrate .rv b{color:var(--ink);font-weight:800;}
.pricecell{font-weight:800;white-space:nowrap;} .pricecell small{font-weight:600;color:var(--muted);font-size:.74rem;margin-left:.3rem;}
.cellmuted{color:var(--muted);}

/* ===== plain data tables (no component class) ===== */
.scroll:has(> table:not(.cmp):not(.mtx)){border:1px solid var(--line);border-radius:14px;margin:2.2rem 0;box-shadow:0 2px 10px rgba(15,23,42,.04);}
.scroll > table:not(.cmp):not(.mtx){width:100%;border-collapse:collapse;font-size:.9rem;}
.scroll > table:not(.cmp):not(.mtx) thead{background:var(--head-bg);}
.scroll > table:not(.cmp):not(.mtx) thead th{text-align:left;padding:.75rem .95rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#334155;font-weight:700;border-bottom:2px solid var(--line);}
.scroll > table:not(.cmp):not(.mtx) td,.scroll > table:not(.cmp):not(.mtx) tbody th{padding:.9rem .95rem;border-top:1px solid var(--line);vertical-align:top;background:#fff;text-align:left;font-weight:400;}
.scroll > table:not(.cmp):not(.mtx) tbody tr:first-child td,.scroll > table:not(.cmp):not(.mtx) tbody tr:first-child th{border-top:0;}
.scroll > table:not(.cmp):not(.mtx) tbody th{font-weight:700;}

/* ===== feature matrix ===== */
.mtx-wrap{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;margin:2.2rem 0;box-shadow:0 1px 2px rgba(16,24,40,.04),0 18px 38px -22px rgba(16,24,40,.20);}
table.mtx{border-collapse:separate;border-spacing:0;width:100%;min-width:780px;table-layout:fixed;}
.mtx col.c-feat{width:220px;} .mtx col.c-prod{width:190px;}
.mtx th,.mtx td{padding:13px 16px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line);font-size:14px;}
.mtx .feat,.mtx .corner,.mtx .foot-feat{position:sticky;left:0;z-index:2;text-align:left;box-shadow:1px 0 0 0 var(--line);}
.mtx .corner{z-index:3;background:var(--head-bg);}
.mtx th.feat{background:#fff;font-weight:600;} .mtx tr.alt th.feat{background:var(--stripe);}
.mtx tbody td.cell{background:#fff;} .mtx tr.alt td.cell{background:var(--stripe);} .mtx tbody td.cell.win{background:var(--blue-tint);}
.mtx thead th{background:var(--head-bg);vertical-align:bottom;padding:18px 16px 16px;}
.mtx .ceyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--blue);margin-bottom:5px;}
.mtx .ctitle{display:block;font-size:14px;font-weight:700;}
.mtx .phead{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-height:104px;}
.mtx .pname{font-size:16px;font-weight:800;} .mtx .score{display:inline-flex;align-items:baseline;gap:4px;}
.mtx .star{color:var(--star);font-size:13px;align-self:center;} .mtx .snum{font-size:15px;font-weight:800;} .mtx .sden{font-size:11.5px;font-weight:600;color:var(--muted);}
.mtx .hprice{font-size:18px;font-weight:800;} .mtx .hprice .per{font-size:11px;font-weight:600;color:var(--muted);}
.mtx .wlabel{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-fill);background:var(--blue-50);border:1px solid var(--blue-edge);padding:3px 10px;border-radius:999px;}
.mtx .medal{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;}
.mtx td.win,.mtx th.win{border-left:1.5px solid var(--blue-edge);border-right:1.5px solid var(--blue-edge);}
.mtx thead th.win{background:var(--blue-tint);border-top:3px solid var(--blue);border-radius:14px 14px 0 0;}
.mtx tfoot td.win{background:var(--blue-tint);border-bottom:1.5px solid var(--blue-edge);border-radius:0 0 14px 14px;}
.mtx tr.grp th.gband{position:sticky;left:0;z-index:2;text-align:left;background:#f7f9fc;padding:10px 16px;font-size:11.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.mtx .gtick{display:inline-block;width:6px;height:6px;border-radius:2px;background:var(--blue);margin-right:9px;vertical-align:middle;}
.mtx .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid;}
.mtx .chip.yes{background:var(--green-50);color:var(--green);border-color:var(--green-edge);}
.mtx .chip.no{background:#f3f5f9;color:var(--muted);border-color:#e2e8f0;}
.mtx .chip .ic{font-weight:900;font-size:12px;}
.mtx .note{display:block;margin-top:6px;font-size:11.5px;font-weight:500;color:var(--muted);}
.mtx .pill{display:inline-block;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700;background:#f6f8fb;border:1px solid var(--line);}
.mtx td.win .pill{background:#fff;border-color:var(--blue-edge);}
.mtx tfoot td{border-bottom:none;padding:18px 16px;} .mtx td.foot-feat{background:#fff;}

/* ===== callouts ===== */
.callout{display:flex;gap:.85rem;align-items:flex-start;border:1px solid var(--bd);border-left:4px solid var(--ac);background:var(--tint);border-radius:10px;padding:1.05rem 1.2rem;margin:2.2rem 0;}
.callout .ico{flex-shrink:0;width:22px;height:22px;color:var(--ac);margin-top:1px;}
.callout .label{font-weight:800;font-size:.8rem;color:var(--ac);display:block;margin-bottom:.18rem;}
.callout p{margin:0;font-size:1.05rem;line-height:1.55;}
.c-tip{--ac:var(--green);--tint:var(--green-50);--bd:var(--green-edge);}
.c-warn{--ac:var(--warn);--tint:var(--warn-50);--bd:var(--warn-edge);}
.c-info{--ac:var(--blue-fill);--tint:var(--blue-50);--bd:var(--blue-edge);}

/* ===== pullquote (Option B chosen) ===== */
.pqB{position:relative;background:var(--blue-tint);border:1px solid var(--blue-edge);border-radius:14px;padding:1.7rem 1.6rem 1.4rem;margin:2.2rem 0;}
.pqB .badge{position:absolute;top:-17px;left:22px;width:40px;height:40px;border-radius:11px;background:var(--blue-fill);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(29,78,216,.6);}
.pqB .badge svg{width:21px;height:21px;}
.pqB p{font-size:1.26rem;line-height:1.42;font-weight:600;color:#0f1729;margin:.35rem 0 .5rem;}
.pqB cite{font-style:normal;font-size:.85rem;font-weight:600;color:var(--muted);}

/* ===== takeaways ===== */
.tkA{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:2.2rem 0;box-shadow:0 2px 12px rgba(15,23,42,.05);}
.tkA .hd{display:flex;align-items:center;gap:.6rem;background:var(--blue-tint);border-bottom:1px solid var(--blue-edge);padding:.85rem 1.15rem;font-weight:800;color:var(--blue-fill);font-size:.95rem;}
.tkA .hd svg{width:19px;height:19px;}
.tkA ul{list-style:none;margin:0;padding:.3rem 1.15rem;}
.tkA li{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--line-soft);font-size:1.05rem;}
.tkA li:last-child{border-bottom:none;}
.tkA li .mk{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--blue-50);border:1px solid var(--blue-edge);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.tkA li .mk svg{width:12px;height:12px;color:var(--blue-fill);}

/* ===== pros / cons ===== */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;}
@media(max-width:640px){.proscons{grid-template-columns:1fr;}}
.proscons .col{border:1px solid var(--bd);background:var(--tint);border-radius:12px;padding:1.1rem 1.25rem;}
.proscons .pros{--bd:var(--green-edge);--tint:var(--green-50);}
.proscons .cons{--bd:var(--rose-edge);--tint:var(--rose-50);}
.proscons h4{display:flex;align-items:center;gap:.45rem;margin:0 0 .6rem;font-size:.92rem;}
.proscons .pros h4{color:var(--green);} .proscons .cons h4{color:var(--rose);}
.proscons h4 svg{width:18px;height:18px;}
.proscons ul{list-style:none;margin:0;padding:0;}
.proscons li{display:flex;gap:.55rem;align-items:flex-start;padding:.28rem 0;font-size:1rem;line-height:1.5;}
.proscons li svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;}
.proscons .pros li svg{color:var(--green);} .proscons .cons li svg{color:var(--rose);}

/* ===== review block ===== */
.review{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:2.2rem 0;box-shadow:0 3px 16px rgba(15,23,42,.06);background:#fff;}
.review .rtop{display:flex;gap:1.1rem;padding:1.4rem 1.5rem;border-bottom:1px solid var(--line-soft);}
.review .rimg{width:120px;height:120px;flex-shrink:0;border-radius:12px;background:repeating-linear-gradient(45deg,#e4e9f1 0 11px,#eef2f8 11px 22px);border:1px solid #d3dbe7;object-fit:cover;display:block;}
.review .rhead{flex:1;min-width:0;}
.review .rbadge{display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--blue-fill);background:var(--blue-50);border:1px solid var(--blue-edge);padding:.18rem .55rem;border-radius:999px;margin-bottom:.4rem;}
.review h3{margin:0 0 .3rem;font-size:1.25rem;font-weight:800;letter-spacing:-.01em;}
.review .rrate{display:flex;align-items:center;gap:.6rem;}
.review .rrate .stars{font-size:1.15rem;letter-spacing:1px;}
.review .rrate .num{font-weight:800;} .review .rrate .num small{color:var(--muted);font-weight:600;}
.review .rbody{padding:1.3rem 1.5rem;}
.review .rbody p{margin:.2rem 0 .9rem;font-size:1.05rem;line-height:1.6;}
.review .whofor{font-size:.88rem;color:var(--muted);margin:.4rem 0 0;}
.review .whofor b{color:var(--ink);}
.review .rfoot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.5rem;background:var(--blue-tint);border-top:1px solid var(--blue-edge);flex-wrap:wrap;}
.review .rprice{font-weight:800;font-size:1.05rem;} .review .rprice small{font-weight:600;color:var(--muted);font-size:.75rem;}
.preinstalled{font-size:.85rem;font-weight:600;color:var(--muted);line-height:1.35;}

/* ===== faq ===== */
.faq{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:2.2rem 0;}
.faq details{border-bottom:1px solid var(--line);}
.faq details:last-child{border-bottom:none;}
.faq summary{list-style:none;cursor:pointer;padding:1.05rem 1.25rem;font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{background:var(--blue-tint);}
.faq summary .chev{width:18px;height:18px;color:var(--blue-fill);flex-shrink:0;transition:transform .2s;}
.faq details[open] summary .chev{transform:rotate(180deg);}
.faq .ans{padding:0 1.25rem 1.15rem;color:var(--muted);font-size:1.04rem;line-height:1.6;}

/* ===== byline + author bio ===== */
.byline2{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted);}
.av{width:1.9rem;height:1.9rem;border-radius:50%;background:linear-gradient(135deg,var(--blue),#9333ea);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex-shrink:0;overflow:hidden;}
.av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.byline2 a{color:var(--ink);font-weight:700;text-decoration:none;} .byline2 a:hover{color:var(--blue-fill);}
.authorbox{display:flex;gap:1.1rem;border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;margin:2.2rem 0;background:var(--stripe);}
.authorbox .av-lg{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#9333ea);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;flex-shrink:0;overflow:hidden;}
.authorbox .av-lg img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.authorbox .nm{font-weight:800;font-size:1.02rem;}
.authorbox .role{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--blue-fill);margin:.12rem 0 .45rem;}
.authorbox p{margin:0 0 .5rem;font-size:1rem;color:var(--muted);line-height:1.55;}
.authorbox a.more{font-size:.85rem;font-weight:700;color:var(--blue-fill);text-decoration:none;}

/* ===== related ===== */
section.related{margin:2.2rem 0;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media(max-width:760px){.related-grid{grid-template-columns:1fr;}}
.rcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:.15s;box-shadow:0 2px 8px rgba(15,23,42,.04);content-visibility:auto;contain-intrinsic-size:auto 260px;}
.rcard:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.10);}
.rcard .rt{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#e9ecf2 0 12px,#eef1f6 12px 24px);overflow:hidden;}
.rcard .rt img{width:100%;height:100%;object-fit:cover;display:block;}
.rcard .rb{padding:.8rem .9rem;}
.rcard .rtt{font-weight:700;font-size:.92rem;line-height:1.35;margin-top:.25rem;}

/* ===== breadcrumb ===== */
.breadcrumb{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--muted);flex-wrap:wrap;}
.breadcrumb a{color:var(--muted);text-decoration:none;} .breadcrumb a:hover{color:var(--blue-fill);}
.breadcrumb .sep{color:#c0c7d2;} .breadcrumb [aria-current]{color:var(--ink);font-weight:600;}

/* ===== TOC ===== */
.toc{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;background:#fff;max-width:280px;}
.toc .tt{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.6rem;}
.toc ul{list-style:none;margin:0;padding:0;}
.toc a{display:block;padding:.35rem .6rem;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:.86rem;line-height:1.35;border-radius:0 6px 6px 0;}
.toc a:hover{color:var(--ink);background:var(--blue-tint);}
.toc a.active{color:var(--blue-fill);font-weight:700;border-left-color:var(--blue);background:var(--blue-50);}

/* ===== hub page ===== */
.hub{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;}
.hub .hbar{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.3rem;background:#fff;border-bottom:1px solid var(--line);}
.hub .hbar .logo{font-weight:800;letter-spacing:-.02em;} .hub .hbar .logo span{color:var(--blue);}
.hub .hbar nav{display:flex;gap:.4rem;flex-wrap:wrap;} .hub .hbar nav a{font-size:.74rem;font-weight:600;background:#f1f5fc;color:var(--ink);padding:.3rem .6rem;border-radius:999px;text-decoration:none;}
.hub .hero{padding:2.75rem 2rem;background:linear-gradient(180deg,var(--blue-tint),#fff);border-bottom:1px solid var(--line);}
.hub .hero .ey{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--blue-fill);}
.hub .hero h1{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:.5rem 0;}
.hub .hero p{margin:0;max-width:60ch;color:var(--muted);font-size:.98rem;}
.hub .hbody{padding:1.75rem 2rem 2.5rem;}
.hub .secttl{font-size:1.05rem;font-weight:800;margin:2.5rem 0 1.25rem;}
.hub .hbody > .secttl:first-child{margin-top:0;}
.hub .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:1.5rem;}
@media(max-width:760px){.hub .grid{grid-template-columns:1fr;} .rcard{contain-intrinsic-size:auto 320px;}}

/* ===== touch ergonomics: lift tap targets toward a 44px pitch on touch-width layouts ===== */
@media(max-width:1129.98px){
  .site-footer .fsoc{gap:.6rem;}
  .site-footer .fsoc a{width:40px;height:40px;}
  .site-footer .fcats{gap:.55rem;}
  .site-footer .fcats a{padding:.55rem 1rem;}
  .breadcrumb a{display:inline-block;padding:.3rem .15rem;}
  .toc a{padding:.7rem .6rem;}
}

/* Sidebar recommendation box — new-chrome port.
   Metrics mirror .toc so the rail reads as one stack; colours are this system's
   own tokens (blue primary), not the legacy teal. .toc-rail is already sticky,
   so the box needs no sticky of its own. */
.rec-pick{max-width:280px;margin:1.25rem 0 0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.rec-pick-band{display:flex;align-items:center;gap:.45rem;margin:0;padding:.6rem .95rem;background:var(--ink);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.rec-pick-band::before{content:"\2605";font-size:.85rem;line-height:1;}
.rec-pick-body{padding:1rem 1.1rem 1.1rem;}
.rec-pick-shot{display:block;width:100%;height:auto;margin:0 0 .9rem;border-radius:8px;}
.rec-pick-head{margin:0 0 .8rem;padding-bottom:.75rem;border-bottom:1px solid var(--line-soft);}
.rec-pick-name{display:block;font-size:.98rem;font-weight:800;line-height:1.3;color:var(--ink);}
.rec-pick-copy{margin:0 0 1rem;font-size:.84rem;line-height:1.5;color:var(--muted);}
.rec-pick-cta{display:flex;width:100%;box-sizing:border-box;}
/* Rails marked .has-pick: the TOC scrolls away with the page and only the box pins.
   The rail drops the sticky it gets at line 172 and stretches to full grid height so
   the sticky child has travel. No overflow clipping here - any non-visible overflow
   on an ancestor silently kills position:sticky on its descendants. Opt-in via an
   explicit class rather than :has(), so the behaviour is visible in the markup and
   does not depend on selector support; rails without the class are untouched. */
@media(min-width:961px){
  .toc-rail.has-pick{position:static;align-self:stretch;}
  .toc-rail.has-pick .rec-pick{position:sticky;top:84px;}
}
/* Backstop: below ~560px of viewport the pinned box would outgrow it. */
@media(min-width:961px) and (max-height:560px){
  .toc-rail.has-pick .rec-pick-shot{display:none;}
}
/* Desktop only, matching the 961px grid breakpoint above: below it the rail stacks
   into the article flow and the box has no column to live in. */
@media(max-width:960px){
  .rec-pick{display:none;}
}