/* SVT-CSS-MANIFEST — do not edit by hand
*
* svt-vs.css is built from these parts, IN THIS ORDER. Six of the seven
* sit PAST the SVT-MOBILE-BLOCK marker rather than spliced into the chain
* at it; only svt-vs-block.css precedes it, and the marker is inside that
* part. They are all listed here so a rebuild cannot lose one without the
* check noticing. The check strips this header before searching, so these
* fingerprint names cannot satisfy it.
*
* After ANY rebuild: php svt-vs-css-guard.php verify
* If it fails: php svt-vs-css-guard.php restore
*
* Generated 2026-09-17 02:32
*
* 1. svt-vs-block.css fingerprint: .vscore__logolink
* 2. svt-vs-h2h.css fingerprint: .h2h__panes
* 3. svt-vs-render.css fingerprint: .srcnote__read--a
* 4. svt-vs-verdict.css fingerprint: .onlycard__body
* 5. svt-vs-fixes.css fingerprint: .svt-bar-mark
* 6. svt-vs-tablefix.css fingerprint: .trophy
* 7. svt-vs-faq.css fingerprint: .vsfaq__panel
*/
.svtvs{--a:#C8842B;--a-soft:#FBF1E2;--b:#4974C4;--b-soft:#EAF0FB;
--ink:#12213B;--body:#4A576B;--line:#E6E2DA;--card:#fff;
--shadow:0 1px 2px rgba(18,33,59,.04),0 8px 24px rgba(18,33,59,.06);
background:#FDFAF4;color:var(--body);font-size:16px;line-height:1.6}
.svtvs *{box-sizing:border-box}
.svtvs h1,.svtvs h2,.svtvs h3,.svtvs h4{color:var(--ink);margin:0;line-height:1.2;font-weight:750}
.svtvs__wrap{max-width:1080px;margin:0 auto;padding:0 24px 80px}
.svtvs .hero{text-align:center;padding:24px 0 8px}
.svtvs .eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--b);margin:0 0 14px}
.svtvs .hero h1{font-size:clamp(30px,4.6vw,50px);letter-spacing:-.02em}
.svtvs .hero h1 em{font-style:normal;color:var(--body);font-weight:600;font-size:.72em;padding:0 .12em}
.svtvs .sub{max-width:640px;margin:28px auto 0;font-size:16.5px;text-align:center}
.svtvs .versus{display:grid;grid-template-columns:1fr 190px 1fr;gap:34px;align-items:center;margin:44px 0 0}
@media(max-width:900px){.svtvs .versus{grid-template-columns:1fr;gap:8px}
.svtvs .vside--b{text-align:left;align-items:flex-start}
.svtvs .vside--b .vrule,.svtvs .vside--b .blogo,.svtvs .vside--b .blogo-link{margin-left:0}
.svtvs .vside--b .vfeat li{flex-direction:row;text-align:left}
.svtvs .vmid{flex-direction:row;justify-content:center;align-items:flex-start;margin:26px 0;position:relative;gap:76px;
--svtvs-dial:116px;--svtvs-logo-h:44px}
.svtvs .vscore{flex:0 0 auto;width:var(--svtvs-dial)}}
.svtvs .vside{padding:4px 0;display:flex;flex-direction:column}
.svtvs .vside--a{align-items:flex-start}
.svtvs .vside--b{text-align:right;align-items:flex-end}
.svtvs .vrule{width:56px;height:4px;border-radius:4px;margin:0 0 18px}
.svtvs .vside--a .vrule{background:var(--a)}
.svtvs .vside--b .vrule{background:var(--b);margin-left:auto}
.svtvs .blogo-link{display:block;width:180px;max-width:100%;margin:0 0 12px;line-height:0;text-decoration:none}
.svtvs .vside--b .blogo-link{margin-left:auto}
.svtvs .blogo{width:180px;height:52px;max-width:100%;object-fit:contain;object-position:left center;display:block;margin:0}
.svtvs .vside--b .blogo{object-position:right center}
.svtvs .blink{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;text-decoration:none;
padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
transition:border-color .2s,background .2s,transform .2s;margin:0 0 20px}
.svtvs .blink svg{width:14px;height:14px;transition:transform .2s}
.svtvs .blink:hover{transform:translateY(-1px)}
.svtvs .vside--a .blink:hover{border-color:var(--a);background:var(--a-soft);color:var(--a)}
.svtvs .vside--b .blink:hover{border-color:var(--b);background:var(--b-soft);color:var(--b)}
.svtvs .blink:hover svg{transform:translateX(3px)}
.svtvs .vside h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.01em}
.svtvs .vside--a h2{color:var(--a,#C8842B)}
.svtvs .vside--b h2{color:var(--b,#4974C4)}
.svtvs .cat{font-size:14px;margin:2px 0 18px;opacity:.8}
.svtvs .vfeat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.svtvs .vfeat li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.svtvs .vside--b .vfeat li{flex-direction:row-reverse;text-align:right}
.svtvs .vfeat svg{flex:0 0 22px;width:22px;height:22px}
.svtvs .vside--a .vfeat svg{color:var(--a)}
.svtvs .vside--b .vfeat svg{color:var(--b)}
.svtvs .vmid{display:flex;flex-direction:column;align-items:center;gap:14px}
.svtvs .vhero{position:relative;display:flex;align-items:center;justify-content:center;height:290px;margin:4px 0 6px}
.svtvs .vhero__img{position:relative;z-index:1;line-height:0;filter:drop-shadow(0 14px 26px rgba(18,33,59,.16))}
.svtvs .vhero__img img{max-width:230px;max-height:280px;width:auto;height:auto;display:block}
.svtvs .vhero__disc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:250px;height:250px;border-radius:50%;z-index:0}
.svtvs .vhero--a .vhero__disc{background:var(--a-soft)}
.svtvs .vhero--b .vhero__disc{background:var(--b-soft)}
.svtvs .ring{position:relative;width:150px;height:150px}
.svtvs .ring>svg{width:150px;height:150px;transform:rotate(-90deg);display:block}
.svtvs .ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.svtvs .ring .track{stroke:var(--line)}
.svtvs .ring .val{stroke-dasharray:0 999;transition:stroke-dasharray 1.1s cubic-bezier(.22,1,.36,1)}
.svtvs .ring--a .val{stroke:var(--a)}
.svtvs .ring--b .val{stroke:var(--b)}
.svtvs .ring b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
font-size:34px;color:var(--ink);letter-spacing:-.02em}
.svtvs .ring b span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-top:2px;color:var(--body)}
.svtvs .vsbadge{width:64px;height:64px;border-radius:50%;display:block;overflow:hidden;padding:0;line-height:0;
flex:0 0 64px;background:none;box-shadow:none}
.svtvs .vsbadge img{width:100%;height:100%;display:block;object-fit:contain}
.svtvs .scalewrap{margin:44px auto 0;display:flex;flex-direction:column;align-items:center;max-width:640px;
padding:34px 24px 30px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.svtvs .scale{position:relative;width:100%;max-width:470px;height:200px}
.svtvs .beam{position:absolute;top:40px;left:50%;width:360px;height:12px;margin-left:-180px;border-radius:12px;
transform-origin:50% 50%;background:linear-gradient(90deg,var(--a) 0 48%,#D9D3C8 48% 52%,var(--b) 52% 100%)}
.svtvs .pivot{position:absolute;top:32px;left:50%;width:28px;height:28px;margin-left:-14px;border-radius:50%;
background:var(--ink);z-index:4;box-shadow:0 0 0 5px var(--card),0 0 0 7px var(--line)}
.svtvs .post{position:absolute;top:44px;left:50%;width:14px;height:110px;margin-left:-7px;background:var(--ink);border-radius:4px;z-index:1}
.svtvs .base{position:absolute;bottom:14px;left:50%;width:180px;height:14px;margin-left:-90px;background:var(--ink);border-radius:7px;z-index:2}
.svtvs .base:after{content:"";position:absolute;bottom:-11px;left:50%;width:240px;height:11px;margin-left:-120px;
background:rgba(18,33,59,.10);border-radius:50%;filter:blur(5px)}
.svtvs .arm{position:absolute;top:40px;width:0;height:0;transform-origin:50% 6px;z-index:3}
.svtvs .arm--a{left:calc(50% - 180px)}
.svtvs .arm--b{left:calc(50% + 180px)}
.svtvs .pan{position:absolute;top:6px;left:0;transform:translateX(-50%);transform-origin:50% 0}
.svtvs .pan__wire{position:absolute;top:0;left:50%;width:2px;height:38px;margin-left:-1px;background:rgba(18,33,59,.3)}
.svtvs .pan__dish{position:absolute;top:38px;left:50%;width:124px;margin-left:-62px;border-radius:13px;padding:13px 8px;text-align:center;color:#fff}
.svtvs .arm--a .pan__dish{background:var(--a);box-shadow:0 8px 20px rgba(200,132,43,.32)}
.svtvs .arm--b .pan__dish{background:var(--b);box-shadow:0 8px 20px rgba(73,116,196,.32)}
.svtvs .pan__dish strong{display:block;font-size:27px;line-height:1;font-variant-numeric:tabular-nums}
.svtvs .pan__dish span{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-top:5px}
.svtvs .scale__cap{margin:22px 0 0;font-size:14.5px;text-align:center;max-width:520px}
.svtvs .scale__cap b{color:var(--ink)}
@media(max-width:560px){.svtvs .beam{width:270px;margin-left:-135px}
.svtvs .arm--a{left:calc(50% - 135px)}.svtvs .arm--b{left:calc(50% + 135px)}
.svtvs .pan__dish{width:104px;margin-left:-52px}}
.svtvs .sec{margin:64px 0 0}
.svtvs .sec>header{text-align:center;max-width:660px;margin:0 auto 30px}
.svtvs .sec>header h2{font-size:clamp(21px,2.6vw,29px)}
.svtvs .sec>header p{margin:9px 0 0;font-size:15px}
.svtvs .sec.sec--match > header,
.svtvs .sec.sec--match > header h2,
.svtvs .sec.sec--match > header p {
max-width: none;
width: 100%;
}
.svtvs .panel{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.svtvs .panel--pad{padding:30px}
.svtvs .crit{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border-radius:16px;overflow:hidden}
@media(max-width:900px){.svtvs .crit{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svtvs .crit{grid-template-columns:1fr}}
.svtvs .cell{background:var(--card);padding:22px 18px 20px;text-align:center}
.svtvs .cell>svg{width:26px;height:26px;color:var(--b);opacity:.85}
.svtvs .cell h4{font-size:13.5px;margin:9px 0 16px}
.svtvs .bar{margin:0 0 9px;text-align:left}
.svtvs .bar .lab{display:flex;justify-content:space-between;font-size:11px;font-weight:700;margin:0 0 4px}
.svtvs .bar .lab .n{font-variant-numeric:tabular-nums}
.svtvs .bar--a .lab{color:var(--a)}
.svtvs .bar--b .lab{color:var(--b)}
.svtvs .trk{height:7px;border-radius:7px;background:#EFEBE3;overflow:hidden}
.svtvs .fill{height:100%;border-radius:7px;width:0;transition:width 1s cubic-bezier(.22,1,.36,1)}
.svtvs .bar--a .fill{background:var(--a)}
.svtvs .bar--b .fill{background:var(--b)}
.svtvs .bar--none .trk{background:repeating-linear-gradient(45deg,#F2EEE7,#F2EEE7 5px,#E9E4DB 5px,#E9E4DB 10px)}
.svtvs .won{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.55;margin:12px 0 0}
.svtvs .pool{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.svtvs .pool:last-child{border-bottom:0}
.svtvs .pool__name{font-size:14px;font-weight:700;color:var(--ink)}
.svtvs .pool__bars{display:flex;flex-direction:column;gap:7px}
.svtvs .prow{display:grid;grid-template-columns:1fr 42px;gap:12px;align-items:center}
.svtvs .prow .trk{height:11px;border-radius:11px}
.svtvs .prow .n{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.svtvs .prow--a .n{color:var(--a)}
.svtvs .prow--b .n{color:var(--b)}
.svtvs .prow--none .trk{background:repeating-linear-gradient(45deg,#F2EEE7,#F2EEE7 5px,#E9E4DB 5px,#E9E4DB 10px)}
.svtvs .prow--none .n{color:#A9A296}
.svtvs .match__head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}
.svtvs .match__head h3{font-size:20px}
.svtvs .match__meta{font-size:13.5px;opacity:.75;margin:6px 0 0}
.svtvs .winner{display:inline-flex;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
padding:5px 11px;border-radius:999px;background:var(--a);color:#fff}
.svtvs .winner--b{background:var(--b)}
.svtvs .winner--tie{background:var(--body)}
.svtvs .cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:22px 0 0}
@media(max-width:820px){.svtvs .cards{grid-template-columns:1fr}}
.svtvs .pcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.svtvs .pcard__top{padding:20px 20px 0;display:flex;gap:16px;align-items:flex-start}
.svtvs .pcard__img{flex:0 0 116px;height:128px;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:10px}
.svtvs .pcard__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.svtvs .pcard--a .pcard__img{background:var(--a-soft)}
.svtvs .pcard--b .pcard__img{background:var(--b-soft)}
.svtvs .pcard__sku{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.5;margin:0 0 4px}
.svtvs .pcard h4{font-size:16px;line-height:1.3}
.svtvs .pcard h4 a{color:inherit;text-decoration:none}
.svtvs .pcard h4 a:hover{text-decoration:underline}
.svtvs .pcard__price{font-size:15px;font-weight:800;color:var(--ink);margin:8px 0 0}
.svtvs .pcard__scores{display:flex;margin:18px 0 0;border-top:1px solid var(--line)}
.svtvs .pcard__scores div{flex:1;padding:13px 8px;text-align:center;border-right:1px solid var(--line)}
.svtvs .pcard__scores div:last-child{border-right:0}
.svtvs .pcard__scores strong{display:block;font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.svtvs .pcard__scores span{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.55}
.svtvs .pcard__pc{padding:16px 20px 20px;display:grid;gap:7px}
.svtvs .pc{display:flex;gap:9px;font-size:13.5px;line-height:1.45;align-items:flex-start}
.svtvs .pc svg{flex:0 0 17px;width:17px;height:17px;margin-top:2px}
.svtvs .pc--y svg{color:#2E9E6B}
.svtvs .pc--n svg{color:#D2544B}
.svtvs .only{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.svtvs .only{grid-template-columns:1fr}}
.svtvs .only__col{padding:24px}
.svtvs .panel.only__col--a{
background:var(--a-soft);
border-color:color-mix(in srgb,var(--a) 16%,#fff);
}
.svtvs .panel.only__col--b{
background:var(--b-soft);
border-color:color-mix(in srgb,var(--b) 16%,#fff);
}
.svtvs .only__col h4{font-size:15px;margin:0 0 14px;display:flex;align-items:center;gap:9px}
.svtvs .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.svtvs .dot--a{background:var(--a)}
.svtvs .dot--b{background:var(--b)}
.svtvs .chips{display:flex;flex-wrap:wrap;gap:8px}
.svtvs .chip{font-size:13px;font-weight:600;padding:7px 12px;border-radius:9px;background:#F5F1E9;color:var(--ink)}
.svtvs .chip b{opacity:.5;font-weight:700;margin-left:5px}
.svtvs .facts{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.svtvs .facts{grid-template-columns:1fr}}
.svtvs .facts__t{padding:14px 22px;font-size:14px;font-weight:800;color:#fff;display:flex;align-items:center;gap:11px}
.svtvs .facts__logolink{display:flex;align-items:center;line-height:0;text-decoration:none}
.svtvs .facts__t img{width:120px;height:28px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.svtvs .facts--a .facts__t{background:var(--a)}
.svtvs .facts--b .facts__t{background:var(--b)}
.svtvs .frow{display:flex;justify-content:space-between;gap:14px;padding:13px 22px;border-bottom:1px solid var(--line);font-size:14px}
.svtvs .frow:last-child{border-bottom:0}
.svtvs .frow b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.svtvs .verdict{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:30px;background:var(--b-soft);
border:1px solid #D4E0F5;border-radius:16px;margin:64px 0 0}
.svtvs .verdict>svg{width:40px;height:40px;color:var(--b)}
.svtvs .verdict h3{font-size:19px;margin:0 0 8px}
.svtvs .verdict p{margin:0 0 10px;font-size:15px}
.svtvs .verdict p:last-child{margin:0}
.svtvs .foot{margin:48px 0 0;padding:22px 0 0;border-top:1px solid var(--line);font-size:13px;opacity:.7;text-align:center}
.svtvs .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.svtvs .reveal.in{opacity:1;transform:none}
.svtvs .vmid .vmid__dialwrap{display:flex;align-items:center;justify-content:center;line-height:0}
.svtvs .versus,.svtvs .vmid,.svtvs .vscore{overflow:visible}
.svtvs .vmid.smash .vmid__dialwrap{will-change:transform}
.svtvs .vmid.smash .vmid__dialwrap.ring--a{animation:svtChargeA 1.05s cubic-bezier(.5,0,.35,1.4) both}
.svtvs .vmid.smash .vmid__dialwrap.ring--b{animation:svtChargeB 1.05s cubic-bezier(.5,0,.35,1.4) both}
.svtvs .vmid.is-settled .vmid__dialwrap{
animation:none!important;opacity:1!important;transform:none!important;will-change:auto}
.svtvs .vmid .vsbadge{opacity:0;transform:scale(.2) rotate(-25deg)}
.svtvs .vmid.smash .vsbadge{animation:svtImpact 2.25s .62s cubic-bezier(.2,1.6,.4,1) both}
.svtvs .vmid.smash .shock{animation:svtShock .5s .64s ease-out both}
@keyframes svtChargeA{0%{transform:translateX(-160px) scale(.72);opacity:0}
46%{transform:translateX(34px) scale(1.06);opacity:1}58%{transform:translateX(34px) scale(1.06)}
72%{transform:translateX(-14px) scale(.97)}86%{transform:translateX(5px) scale(1.01)}100%{transform:none}}
@keyframes svtChargeB{0%{transform:translateX(160px) scale(.72);opacity:0}
46%{transform:translateX(-34px) scale(1.06);opacity:1}58%{transform:translateX(-34px) scale(1.06)}
72%{transform:translateX(14px) scale(.97)}86%{transform:translateX(-5px) scale(1.01)}100%{transform:none}}
@keyframes svtImpact{0%{opacity:0;transform:scale(.2) rotate(-25deg)}
13%{opacity:1;transform:scale(1.34) rotate(6deg)}20%{opacity:1;transform:scale(1.18) rotate(0)}
64%{opacity:1;transform:scale(1.18) rotate(0)}78%{opacity:1;transform:scale(.94) rotate(0)}
100%{opacity:1;transform:scale(1) rotate(0)}}
.svtvs .versus .blogo{opacity:0}
.svtvs .versus.lineup .blogo{animation:svtLineup 1.8s 1.05s cubic-bezier(.3,0,.2,1) both}
@keyframes svtLineup{0%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(1.15)}
14%{opacity:1;transform:translate(var(--dx,0),var(--dy,0)) scale(1.15)}
56%{opacity:1;transform:translate(var(--dx,0),var(--dy,0)) scale(1.15)}
100%{opacity:1;transform:translate(0,0) scale(1)}}
.svtvs .versus .vhero__img,.svtvs .versus .vhero__disc{opacity:0}
.svtvs .versus.lineup .vhero__img{animation:svtRise .75s 2.15s cubic-bezier(.22,1,.36,1) both}
.svtvs .versus.lineup .vhero__disc{animation:svtDisc .8s 2.05s cubic-bezier(.22,1,.36,1) both}
.svtvs .versus .vside h2,.svtvs .versus .cat,.svtvs .versus .vfeat li,.svtvs .versus .blink{opacity:0}
.svtvs .versus.lineup .vside h2{animation:svtRise .6s 2.35s ease-out both}
.svtvs .versus.lineup .cat{animation:svtRise .6s 2.45s ease-out both}
.svtvs .versus.lineup .blink{animation:svtRise .6s 2.5s ease-out both}
.svtvs .versus.lineup .vfeat li:nth-child(1){animation:svtRise .6s 2.55s ease-out both}
.svtvs .versus.lineup .vfeat li:nth-child(2){animation:svtRise .6s 2.65s ease-out both}
.svtvs .versus.lineup .vfeat li:nth-child(3){animation:svtRise .6s 2.75s ease-out both}
@keyframes svtRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes svtDisc{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.svtvs .shock{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
border:3px solid var(--a);opacity:0;pointer-events:none}
@keyframes svtShock{0%{opacity:.55;transform:scale(.5)}100%{opacity:0;transform:scale(3.6)}}
.svtvs .vmid__badgewrap{position:relative;display:flex;align-items:center;justify-content:center}
/* Side-by-side dials: pin VS to page-center of the dial pair, on the dial centerline. */
@media(max-width:900px){
.svtvs .vmid__badgewrap{
position:absolute;
left:50%;
right:auto;
top:calc(var(--svtvs-logo-h,44px) + 9px + var(--svtvs-dial,116px) / 2);
transform:translate(-50%,-50%);
margin:0;
z-index:5;
}
}
.svtvs .versus.jolt{animation:svtJolt .32s .66s ease-out both}
@keyframes svtJolt{0%{transform:translateX(0)}22%{transform:translateX(-5px)}
46%{transform:translateX(4px)}70%{transform:translateX(-2px)}100%{transform:translateX(0)}}
@media(max-width:900px){.svtvs .versus.lineup .blogo{animation:svtRise .6s 1.05s ease-out both}}
@media(prefers-reduced-motion:reduce){
.svtvs .vmid.smash .vmid__dialwrap.ring--a,.svtvs .vmid.smash .vmid__dialwrap.ring--b,
.svtvs .vmid.smash .ring--a,.svtvs .vmid.smash .ring--b,.svtvs .vmid.smash .vsbadge,
.svtvs .vmid.smash .shock,.svtvs .versus.jolt,.svtvs .versus.lineup .blogo,
.svtvs .versus.lineup .vhero__img,.svtvs .versus.lineup .vhero__disc,
.svtvs .versus.lineup .vside h2,.svtvs .versus.lineup .cat,
.svtvs .versus.lineup .vfeat li,.svtvs .versus.lineup .blink{animation:none}
.svtvs .vmid .vsbadge,.svtvs .vmid__dialwrap,.svtvs .versus .blogo,.svtvs .versus .vhero__img,
.svtvs .versus .vside h2,.svtvs .versus .cat,.svtvs .versus .vfeat li,
.svtvs .versus .blink{opacity:1;transform:none}
.svtvs .versus .vhero__disc{opacity:1;transform:translate(-50%,-50%)}}
/* SVT-MOBILE-BLOCK v5 — VS page: dials, dumbbell charts, marks, scale fix.
Belongs at the END of svt-vs.css. Replaces everything from the marker down.
Consolidation of nine sequential appends (2026-09-06/07). Those had grown
to 30,812 bytes against an 18,735-byte base, with 31 selectors declared
more than once — .db__track four times, .db__dot four times, three separate
max-width:560px blocks. Every duplicate here is resolved to the value that
was actually winning, so what the file says and what the browser does are
the same thing again.
Nothing about the rendering changes. What is gone is the CSS that was
already doing nothing.
Colour comes from theme tokens, never literals: --svt-brass, --svt-click,
--svt-added, --svt-card. Change those in style.css and this page follows.
--ink (#12213B) and --line (#E6E2DA) stay local on purpose — they diverge
from --svt-ink and --svt-hairline, and reconciling them is a design call.
================================================================ */
/* ================================================================
TOKENS
================================================================ */
.svtvs {
--a: var(--svt-brass);
--b: var(--svt-click);
--card: var(--svt-card);
--a-soft: color-mix(in srgb, var(--a) 12%, #fff);
--b-soft: color-mix(in srgb, var(--b) 12%, #fff);
/* criteria marks are masks tinted by this; brass would read as brand A */
--svt-mark: rgba(38, 35, 30, .45);
}
/* ================================================================
SCORE DIALS — the product page's inverted circle
(.radial-progress.is-inverted): dark inset, white number, brand arc
over a track that turns sage once the fill lands.
Same half-mask markup and the same rating*18 / rating*36 arc math as
the product rings, so the motion matches. The segmented overlay is
new: 32 ticks, masked to the ring band only.
Smash charge lives on .vmid__dialwrap.ring--a / .ring--b, not the dial.
================================================================ */
.svtvs .vscore { display: flex; flex-direction: column; align-items: center;
gap: 9px; width: var(--svtvs-logo-w, 116px); }
.svtvs .vscore__logolink { display: block; line-height: 0; text-decoration: none; }
.svtvs .vscore__logo { display: block;
width: var(--svtvs-logo-w, 116px);
height: var(--svtvs-logo-h, 36px);
max-width: 100%; object-fit: contain; object-position: center; }
/* above 900px the seesaw already flies the full-size logos in beside the
dials, so the mini logo would be a duplicate */
@media (min-width: 901px) {
.svtvs .vscore__logo,
.svtvs .vscore__logolink { display: none; }
}
.svtvs .svtdial { --sz: 116px;
overflow: visible; width: var(--sz); height: var(--sz);
border-radius: 50%; position: relative; margin: 0;
background: transparent;
transition: none; }
.svtvs .svtdial.is-done { background: transparent; }
.svtvs .svtdial .circle .mask,
.svtvs .svtdial .circle .fill,
.svtvs .svtdial .circle .shadow { width: var(--sz); height: var(--sz);
position: absolute; border-radius: 50%;
backface-visibility: hidden; }
.svtvs .svtdial .circle .mask { clip: rect(0px, var(--sz), var(--sz), calc(var(--sz)/2)); }
.svtvs .svtdial .circle .mask .fill { clip: rect(0px, calc(var(--sz)/2), var(--sz), 0px); }
.svtvs .svtdial--a .circle .mask .fill { background-color: var(--a); }
.svtvs .svtdial--b .circle .mask .fill { background-color: var(--b); }
/* Ticks + empty remainder + no-glow: css/svt-score-ring.css.
Side colors stay here: --a brass / --b theme blue. */
/* VS disc is the wordmark mark, cropped from the site logo. */
.svtvs .vsbadge {
background: none;
box-shadow: none;
}
.svtvs .vsbadge img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/* absolute positioning belongs to the ROW layout only. .vmid is a row at or
below 560px; between 561 and 900 it is still a column, and an absolute
badge there left the flow and landed on top of the first dial. */
@media (min-width: 561px) {
.svtvs .vmid__badgewrap { position: relative; top: auto; left: auto;
transform: none; margin: 0; }
}
/* ================================================================
BALANCE SCALE — the arms never followed the beam (all widths)
The tilt JS animates .beam and .arm by the same angle and counter-
rotates .pan so the dishes hang level. But .arm is a 0x0 element with
transform-origin:50% 6px — its own position — so rotating it moves
nothing: the beam's ends swing, the pans stay put, and the scale
renders tilted and detached. The arms sit +/-180px from the pivot, so
the origin has to BE the pivot.
Check, if this ever looks wrong again: the two arms should sit
beam-width x tan(angle) apart vertically. 360px beam at 8.8deg = 55px.
================================================================ */
.svtvs .arm--a { transform-origin: 180px 6px; }
.svtvs .arm--b { transform-origin: -180px 6px; }
/* ================================================================
DUMBBELL CHARTS — criteria and social pools
Two dots on a fixed 0-10 rail with the gap drawn between them. The
gap is the page's subject, so it is a length you read rather than a
subtraction you perform, and both absolute positions stay on the
scale the section header promises — a diverging bar off a centre
line would have contradicted "measured against a fixed scale".
Rows sort by gap in svt-vs.js, widest first.
ANATOMY, top to bottom: mark + name / gap badge above the segment /
rail / values under their own dot / soft 0 and 10 anchors.
Values sit BESIDE their dot and offset outward. Pinned to the row
edges in fixed A-then-B order they crossed over whenever B led —
Certification Coverage printed 7.0 at the left edge with the orange
dot on the right. Proximity beats a 7px swatch every time.
Colour: #C8842B / #4974C4 pass the categorical checks with room —
worst adjacent dE 24.7 under protanopia against a floor of 8, 28.0
for normal vision against a floor of 15.
================================================================ */
.svtvs .crit { display: block; }
.svtvs .db {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 16px 14px;
box-shadow: var(--shadow);
}
/* the pools already sit inside .panel--pad, so that instance goes bare */
.svtvs .db--flush { border: 0; box-shadow: none; padding: 0; background: transparent; }
.svtvs .db__legend {
display: flex; gap: 16px; justify-content: flex-end;
margin: 0 0 14px;
font-size: 11px; font-weight: 700; letter-spacing: .02em;
color: var(--ink); opacity: .7;
}
.svtvs .db__legend span { display: inline-flex; align-items: center; gap: 6px; }
.svtvs .db__legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
/* the pools' one finding the rows cannot carry: do the sources agree */
.svtvs .db__consensus {
display: flex; flex-wrap: wrap; gap: 6px 18px;
margin: 0 0 14px; padding: 0 0 12px;
border-bottom: 1px solid var(--line);
font-size: 12px; color: var(--ink); opacity: .8;
}
.svtvs .db__consensus span { display: inline-flex; align-items: center; gap: 6px; }
.svtvs .db__consensus i { width: 8px; height: 8px; border-radius: 50%; }
.svtvs .db__consensus b { font-weight: 700; }
.svtvs .db__row { padding: 11px 0; border-top: 1px solid var(--line); }
.svtvs .db__row:first-of-type { border-top: 0; }
.svtvs .db__name { display: block; margin: 0 0 6px;
font-size: 13.5px; font-weight: 700; color: var(--ink); }
.svtvs .db__note { float: right; font-size: 11px; font-weight: 800;
color: var(--ink); opacity: .4; }
/* marks come from css/svt-bar-marks.css — nothing here duplicates that
file, these rules only size them for this page */
.svtvs .db__name .svt-bar-logo { width: 24px; height: 24px;
display: inline-block; vertical-align: -6px;
margin-right: 9px; flex: 0 0 auto; }
.svtvs .db__name .svt-bar-logo.is-brand { opacity: 1; }
/* inline-SVG fallback, for a criterion with no catalog mark */
.svtvs .db__icon { width: 24px; height: 24px; vertical-align: -6px; margin-right: 9px;
opacity: .45; stroke: currentColor; fill: none; }
.svtvs .db__plot { padding: 0 34px; }
.svtvs .db__track { position: relative; height: 56px; margin: 0; }
.svtvs .db__track:before {
content: ""; position: absolute; left: 0; right: 0; top: 26px;
height: 2px; border-radius: 2px; background: var(--line);
}
/* end caps — the rail is a fixed 0-10 scale, not a bar that ran out */
.svtvs .db__track:after {
content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 10px;
border-left: 1px solid var(--line); border-right: 1px solid var(--line);
pointer-events: none;
}
/* gap badge — starts over the low dot, rides out to the segment's middle */
.svtvs .db__badge {
position: absolute; top: 0; left: var(--lo); transform: translateX(-50%);
font-size: 11.5px; font-weight: 800; letter-spacing: .02em; line-height: 16px;
white-space: nowrap; opacity: 0;
transition: left .75s cubic-bezier(.22,1,.36,1);
}
.svtvs .db__badge--a { color: var(--a); }
.svtvs .db__badge--b { color: var(--b); }
.svtvs .db__badge--tie { color: var(--ink); }
.svtvs .db__row.is-in .db__badge {
left: calc((var(--lo) + var(--hi)) / 2); opacity: 1;
transition: left .75s cubic-bezier(.22,1,.36,1), opacity .4s ease .2s;
}
.svtvs .db__row.is-in .db__badge--tie { opacity: .4; }
/* segment grows out of the low dot */
.svtvs .db__seg {
position: absolute; top: 26px; left: var(--lo); width: 0;
height: 2px; border-radius: 2px;
transition: width .75s cubic-bezier(.22,1,.36,1);
}
.svtvs .db__seg--a { background: var(--a); }
.svtvs .db__seg--b { background: var(--b); }
.svtvs .db__row.is-in .db__seg { width: calc(var(--hi) - var(--lo)); }
/* dots — the high one slides out to its value */
.svtvs .db__dot {
position: absolute; top: 19px; width: 16px; height: 16px; margin-left: -8px;
border-radius: 50%; box-shadow: 0 0 0 2px var(--card);
transition: left .75s cubic-bezier(.22,1,.36,1);
}
.svtvs .db__dot--a { background: var(--a); }
.svtvs .db__dot--b { background: var(--b); }
.svtvs .db__dot--lo { left: var(--lo); }
.svtvs .db__dot--hi { left: var(--lo); }
.svtvs .db__row.is-in .db__dot--hi { left: var(--hi); }
/* values, below the rail, offset outward so they can never collide */
.svtvs .db__lab {
position: absolute; top: 38px; line-height: 16px;
font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
color: var(--ink); opacity: .75; white-space: nowrap;
transition: left .75s cubic-bezier(.22,1,.36,1);
}
.svtvs .db__lab--lo { left: var(--lo); transform: translateX(calc(-100% - 13px)); }
.svtvs .db__lab--hi { left: var(--lo); transform: translateX(13px); }
.svtvs .db__row.is-in .db__lab--hi { left: var(--hi); }
/* a value sitting on a rail end has no room outside it — flip it inward */
.svtvs .db__lab--hi.is-flip { transform: translateX(calc(-100% - 13px)); }
.svtvs .db__lab--lo.is-flip { transform: translateX(13px); }
.svtvs .db__end {
position: absolute; top: 38px; line-height: 16px;
font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
color: var(--ink); opacity: .28;
}
.svtvs .db__end--lo { left: 0; transform: translateX(-50%); }
.svtvs .db__end--hi { left: 100%; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
.svtvs .db__badge,
.svtvs .db__seg,
.svtvs .db__dot,
.svtvs .db__lab { transition: none; }
}
/* ================================================================
SOCIAL POOL ROWS — brand label per bar
Fixed label column: the two rows are separate grids, so `auto` would
size them differently and the bars would start at different x.
================================================================ */
.svtvs .prow { grid-template-columns: 96px 1fr 42px; }
.svtvs .prow__b { font-size: 12px; font-weight: 700; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.svtvs .prow--a .prow__b { color: var(--a); }
.svtvs .prow--b .prow__b { color: var(--b); }
/* ================================================================
VERDICT — tinted by whoever leads
Was hardcoded to --b-soft with a --b trophy, so it read as brand B's
on a page where A led. A dead heat keeps the neutral blue.
================================================================ */
.svtvs .verdict { display: grid; grid-template-columns: auto 1fr;
align-items: start; gap: 22px; }
.svtvs .verdict--a { background: var(--a-soft);
border-color: color-mix(in srgb, var(--a) 28%, #fff); }
.svtvs .verdict--a > svg { color: var(--a); }
.svtvs .verdict--b { background: var(--b-soft);
border-color: color-mix(in srgb, var(--b) 28%, #fff); }
.svtvs .verdict--b > svg { color: var(--b); }
.svtvs .verdict__logo {
display: block; height: 26px; width: auto; max-width: 150px;
object-fit: contain; object-position: left center; margin: 0 0 10px;
}
/* ================================================================
DESKTOP — two columns of rows
One column of eight rows made the tracks 982px wide: far more scale
than a 0-10 range needs, and it stretched small gaps into long
crawls. Two columns puts the track back to ~474px.
================================================================ */
@media (min-width: 901px) {
.svtvs .db { display: grid; grid-template-columns: 1fr 1fr;
column-gap: 34px; align-content: start;
padding: 22px 24px; }
.svtvs .db--flush { padding: 0; }
/* legend and consensus describe the whole set, so they span */
.svtvs .db__legend,
.svtvs .db__consensus { grid-column: 1 / -1; }
.svtvs .db__consensus { font-size: 13px; gap: 8px 26px; }
.svtvs .db__row { padding: 13px 0; }
/* first row of EACH column loses its rule, not just the first overall */
.svtvs .db__row:first-of-type,
.svtvs .db__row:nth-of-type(2) { border-top: 0; }
.svtvs .db__name { font-size: 15px; margin: 0 0 8px; }
.svtvs .db__lab { font-size: 12px; }
}
/* ================================================================
MOBILE
================================================================ */
@media (max-width: 560px) {
/* --- headline: dials side by side, badge centred between them ----
Four variables drive this, and everything that lines up reads from
them rather than restating a number:
--svtvs-col column width, identical both sides
--svtvs-logo-h the mini logo's box HEIGHT
--svtvs-gap logo-to-dial gap inside .vscore
--svtvs-dial dial diameter
The logo takes a real HEIGHT, not a max-height. A max-height did
nothing for a wordmark limited by WIDTH — it rendered 22px while
--svtvs-logo-h claimed 34, and the badge sat 12px low. And both
columns need the same width: sized to content they came out 116px
and 90px, so the pair sat off-centre. */
.svtvs .vmid { order: -1;
flex-direction: row;
justify-content: center;
align-items: flex-start;
position: relative;
gap: 72px;
margin: 6px 0 22px;
--svtvs-col: 116px;
--svtvs-logo-h: 36px;
--svtvs-gap: 9px;
--svtvs-dial: 96px; }
.svtvs .vscore { gap: var(--svtvs-gap);
width: var(--svtvs-col);
flex: 0 0 var(--svtvs-col); }
.svtvs .vscore__logo { width: var(--svtvs-col); height: var(--svtvs-logo-h); }
.svtvs .svtdial { --sz: var(--svtvs-dial); }
.svtvs .vmid__badgewrap {
position: absolute; left: 50%; right: auto;
top: calc(var(--svtvs-logo-h) + var(--svtvs-gap) + var(--svtvs-dial) / 2);
transform: translate(-50%, -50%) scale(.7);
margin: 0; z-index: 5;
}
/* --- scale, narrowed to fit --------------------------------------
At the 270px beam the dishes reached x=1 and x=373 in a 375px
viewport, touching both edges. */
.svtvs .scalewrap { padding: 26px 14px 24px; }
.svtvs .beam { width: 230px; margin-left: -115px; }
.svtvs .arm--a { left: calc(50% - 115px); transform-origin: 115px 6px; }
.svtvs .arm--b { left: calc(50% + 115px); transform-origin: -115px 6px; }
.svtvs .pan__dish { width: 96px; margin-left: -48px; padding: 10px 6px; }
.svtvs .pan__dish strong { font-size: 23px; }
/* --- brand blocks centred, feature rows still left-aligned -------- */
.svtvs .vside,
.svtvs .vside--b { align-items: center; text-align: center; }
.svtvs .vside .vrule,
.svtvs .vside--b .vrule { margin-left: auto; margin-right: auto; }
.svtvs .vside > img,
.svtvs .vside--b > img,
.svtvs .blogo,
.svtvs .vside--b .blogo,
.svtvs .blogo-link,
.svtvs .vside--b .blogo-link { margin-left: auto; margin-right: auto;
display: block; object-position: center; }
.svtvs .vfeat { margin-left: auto; margin-right: auto;
max-width: 300px; text-align: left; }
.svtvs .vside .vfeat li,
.svtvs .vside--b .vfeat li { flex-direction: row; text-align: left;
justify-content: flex-start; }
.svtvs .vside--b { border-top: 1px solid var(--line);
margin-top: 26px; padding-top: 26px; }
/* --- reclaim horizontal space — 108px of 375 was nested padding --- */
.svtvs .svtvs__wrap { padding-left: 14px; padding-right: 14px; }
.svtvs .panel--pad { padding: 18px 14px; }
.svtvs .versus { display: flex; flex-direction: column; gap: 0; }
/* --- product cards — the title column was 92px, 7 wrapped lines --- */
.svtvs .pcard__top { gap: 12px; align-items: flex-start; }
.svtvs .pcard__img { flex: 0 0 86px; width: 86px; }
.svtvs .pcard__img img { width: 100%; height: auto; }
.svtvs .pcard__top > div:not(.pcard__img) { flex: 1 1 auto; min-width: 0; }
/* --- charts ------------------------------------------------------ */
.svtvs .db__plot { padding: 0 34px; }
.svtvs .db__lab { font-size: 11.5px; }
.svtvs .db__lab--lo { transform: translateX(calc(-100% - 12px)); }
.svtvs .db__lab--hi { transform: translateX(12px); }
.svtvs .db__lab--hi.is-flip { transform: translateX(calc(-100% - 12px)); }
.svtvs .db__lab--lo.is-flip { transform: translateX(12px); }
.svtvs .db__name .svt-bar-logo,
.svtvs .db__icon { width: 20px; height: 20px; vertical-align: -5px; margin-right: 8px; }
/* --- social pool bars — the track was ~40px, encoded nothing ------ */
.svtvs .pool { display: block; padding: 10px 0; }
.svtvs .pool__name { margin-bottom: 6px; }
.svtvs .prow { grid-template-columns: 74px 1fr 38px; }
.svtvs .prow__b { font-size: 11px; }
.svtvs .prow .trk { flex: 1 1 auto; }
/* --- verdict ------------------------------------------------------ */
.svtvs .verdict { gap: 14px; }
.svtvs .verdict__logo { height: 22px; max-width: 120px; }
}
/* ================================================================
CONSOLIDATION CORRECTIONS
Added after diffing computed styles against the pre-consolidation
page, 39 elements x 18 properties, at 375 and 1200.
Two values moved. In both cases the old file had a later unscoped
rule accidentally overriding an earlier scoped one, and merging
resolved to the intended value instead of the winning one. The
promise was no visual change, so the winning values are restored
here rather than silently improved.
If you would rather have the intended values — 11.5px labels on
mobile, 11px name margin on desktop — delete this block. That is a
design decision, and it should be made deliberately rather than
inherited from a cascade accident.
================================================================ */
@media (min-width: 901px) {
/* was 6px, from the rows block's unscoped rule beating the desktop 11px */
.svtvs .db__name { margin: 0 0 6px; }
}
@media (max-width: 560px) {
/* was 12px, from the rows block's unscoped rule beating the mobile 11.5px */
.svtvs .db__lab { font-size: 12px; }
}
/* ============================================================
SVT — VS page, head-to-head tabs + linked categories.
Loads AFTER svt-vs-block.css. The deploy is two files now:
the consolidated block, then this. Next consolidation folds
it in and the deploy goes back to one.
============================================================ */
/* --- Rank tabs -------------------------------------------------
Radio inputs, not a JS widget. The panes work before svt-vs.js
parses, and the group is arrow-key navigable for free — a div
tab strip would need a roving tabindex and ARIA to match that.
The inputs stay in the tab order, so they are hidden by size
and opacity rather than display:none, which would remove them. */
.svtvs .h2h { position: relative; }
.svtvs .h2h__r {
position: absolute;
width: 1px; height: 1px;
margin: 0; padding: 0;
opacity: 0;
pointer-events: none;
}
.svtvs .h2h__tabs {
display: flex;
flex-wrap: wrap;
gap: 2px;
margin: 0 0 18px;
border-bottom: 1px solid var(--line, #E6E2DA);
}
.svtvs .h2h__tabs label {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .02em;
padding: 9px 13px 10px;
margin-bottom: -1px;
color: var(--ink, #12213B);
opacity: .45;
border-bottom: 2px solid transparent;
transition: opacity .16s ease, border-color .16s ease;
}
.svtvs .h2h__tabs label:hover { opacity: .75; }
.svtvs .h2h__panes > .h2h__pane { display: none; }
/* The inputs are the only inside .h2h, so nth-of-type on
them lines up 1:1 with nth-child on the panes and the labels. */
.svtvs .h2h__r:nth-of-type(1):checked ~ .h2h__panes > .h2h__pane:nth-child(1),
.svtvs .h2h__r:nth-of-type(2):checked ~ .h2h__panes > .h2h__pane:nth-child(2),
.svtvs .h2h__r:nth-of-type(3):checked ~ .h2h__panes > .h2h__pane:nth-child(3) {
display: grid;
align-items: stretch;
}
.svtvs .h2h__r:nth-of-type(1):checked ~ .h2h__tabs > label:nth-child(1),
.svtvs .h2h__r:nth-of-type(2):checked ~ .h2h__tabs > label:nth-child(2),
.svtvs .h2h__r:nth-of-type(3):checked ~ .h2h__tabs > label:nth-child(3) {
opacity: 1;
border-bottom-color: var(--svt-added, #3B6633);
}
/* Focus lands on the invisible input, so the ring is drawn on its
label instead — otherwise keyboard users see nothing move. */
.svtvs .h2h__r:nth-of-type(1):focus-visible ~ .h2h__tabs > label:nth-child(1),
.svtvs .h2h__r:nth-of-type(2):focus-visible ~ .h2h__tabs > label:nth-child(2),
.svtvs .h2h__r:nth-of-type(3):focus-visible ~ .h2h__tabs > label:nth-child(3) {
outline: 2px solid var(--svt-added, #3B6633);
outline-offset: -2px;
border-radius: 4px 4px 0 0;
opacity: 1;
}
/* --- Category links --------------------------------------------
Match headings are titles. Catalogue exit is .match__see, a
cream card under the heading. .match__catlink is unused. */
.svtvs .match__catlink {
color: inherit;
text-decoration: none;
border-bottom: 1.5px solid transparent;
transition: border-color .16s ease, color .16s ease;
}
.svtvs .match__catlink:hover,
.svtvs .match__catlink:focus-visible {
color: var(--svt-click, #4974C4);
border-bottom-color: currentColor;
}
.svtvs a.chip {
text-decoration: none;
color: inherit;
transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.svtvs a.chip:hover,
.svtvs a.chip:focus-visible {
color: var(--svt-added, #3B6633);
border-color: var(--svt-added, #3B6633);
}
@media (max-width: 560px) {
.svtvs .h2h__tabs { margin-bottom: 14px; }
.svtvs .h2h__tabs label { padding: 8px 11px 9px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.svtvs .h2h__tabs label,
.svtvs .match__catlink,
.svtvs .match__see,
.svtvs a.chip { transition: none; }
}
/* ============================================================
SVT — VS page: answer paragraph, evidence panels, source table
and commentary, merchant buttons, thin note, related pairs.
Third file in the deploy chain:
svt-vs-block.css → svt-vs-h2h.css → svt-vs-render.css
============================================================ */
/* --- The answer paragraph --------------------------------------
Sits directly under the H1, above anything interactive. Sized
between the H1 and body copy so it reads as a standfirst rather
than as the first paragraph of an article. */
.svtvs .hero__answer {
max-width: 62ch;
margin: 14px auto 0;
font-size: 17px;
line-height: 1.55;
color: var(--ink, #12213B);
opacity: .82;
text-wrap: pretty;
}
/* --- Scope caveat ----------------------------------------------
Categories both brands sell into that the comparison does not
cover. Deliberately quiet: it is a limitation, not a finding. */
.svtvs .thinnote {
max-width: 70ch;
margin: 0 auto 26px;
padding: 10px 14px;
font-size: 13.5px;
line-height: 1.5;
color: var(--ink, #12213B);
opacity: .62;
border-left: 2px solid var(--line, #E6E2DA);
}
/* --- Evidence ---------------------------------------------------
The stored attributes behind the criteria scores. Two columns,
counts right-aligned so the reader compares down a column rather
than reading prose. */
.svtvs .evid { margin: 26px 0 0; }
.svtvs .evid__intro {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.5;
opacity: .7;
color: var(--ink, #12213B);
}
/* stretch, not start: one brand may hold four warranty terms and the other
one, and two cards of wildly different heights read as a layout bug rather
than as the finding it actually is. */
.svtvs .evid__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: stretch;
}
/* Brand identity carried by the same two tokens the charts use, so a colour
change in the theme moves everything at once. */
.svtvs .evid__col {
padding: 20px 22px;
border-top: 2px solid transparent;
}
.svtvs .evid--a { border-top-color: var(--a, #C8842B); }
.svtvs .evid--b { border-top-color: var(--b, #4974C4); }
.svtvs .evid__col h4 {
margin: 0 0 14px;
font-size: 15px;
font-weight: 700;
letter-spacing: .01em;
color: var(--ink, #12213B);
}
.svtvs .evid--a h4 { color: var(--a, #C8842B); }
.svtvs .evid--b h4 { color: var(--b, #4974C4); }
.svtvs .evid__lab {
margin: 16px 0 7px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .5;
color: var(--ink, #12213B);
}
.svtvs .evid__col > .evid__lab:first-of-type { margin-top: 0; }
.svtvs .evid__list {
list-style: none;
margin: 0;
padding: 0;
}
.svtvs .evid__list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--line, #E6E2DA);
font-size: 14px;
line-height: 1.35;
color: var(--ink, #12213B);
}
.svtvs .evid__list li:last-child { border-bottom: 0; }
.svtvs .evid__list li b {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
font-weight: 700;
opacity: .75;
}
.svtvs .evid__of {
margin: 7px 0 0;
font-size: 12px;
opacity: .5;
color: var(--ink, #12213B);
}
.svtvs .evid__cite {
margin: 0 0 16px;
font-size: 13px;
line-height: 1.5;
opacity: .6;
color: var(--ink, #12213B);
}
.svtvs .evid__cite a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.svtvs .evid__cite a:hover,
.svtvs .evid__cite a:focus-visible { color: var(--svt-added, #3B6633); }
/* --- What each score is built from ------------------------------
The table view of the pool charts: same numbers, plus the sample
size and range the charts cannot show. Doubles as the accessible
equivalent of those charts. */
.svtvs .srctable {
margin: 24px 0 0;
overflow-x: auto;
}
.svtvs .srctable table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.svtvs .srctable__cap {
text-align: left;
padding: 0 0 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .5;
color: var(--ink, #12213B);
}
.svtvs .srctable thead th {
text-align: left;
padding: 0 10px 8px 0;
font-size: 12.5px;
font-weight: 700;
color: var(--ink, #12213B);
border-bottom: 1px solid var(--line, #E6E2DA);
}
.svtvs .srctable thead th:first-child { opacity: .5; font-weight: 600; }
.svtvs .srctable thead th:nth-child(2) { color: var(--a, #C8842B); }
.svtvs .srctable thead th:nth-child(3) { color: var(--b, #4974C4); }
.svtvs .srctable tbody th {
text-align: left;
padding: 11px 10px 11px 0;
font-weight: 600;
color: var(--ink, #12213B);
white-space: nowrap;
}
.svtvs .srctable tbody td {
padding: 11px 10px 11px 0;
vertical-align: top;
}
.svtvs .srctable tbody td b {
display: block;
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.2;
color: var(--ink, #12213B);
}
.svtvs .srctable__n,
.svtvs .srctable__rng {
display: block;
margin-top: 2px;
font-size: 11.5px;
line-height: 1.35;
opacity: .55;
color: var(--ink, #12213B);
}
.svtvs .srctable__none {
font-style: italic;
opacity: .45;
color: var(--ink, #12213B);
}
/* The row note reads the two numbers above it, so it belongs inside that
row's block. The rule goes between groups, not between a row and its
own note. */
.svtvs .srctable__noterow td {
padding: 0 0 12px;
font-size: 13px;
line-height: 1.5;
opacity: .68;
color: var(--ink, #12213B);
text-wrap: pretty;
}
.svtvs .srctable tbody tr { border-bottom: 0; }
.svtvs .srctable tbody tr.srctable__noterow + tr { border-top: 1px solid var(--line, #E6E2DA); }
/* The criteria section's own summary. Same voice as the source commentary,
so the two read as one page rather than two. */
.svtvs .critnote { margin-top: 4px; }
/* --- What the sources found -------------------------------------
Prose under the five charts, written from the same medians they
draw. Set narrow and left, because it is read, not scanned. */
.svtvs .poolnote {
max-width: 68ch;
margin: 22px 0 0;
padding: 18px 0 0;
border-top: 1px solid var(--line, #E6E2DA);
}
.svtvs .poolnote p {
margin: 0 0 10px;
font-size: 15px;
line-height: 1.6;
color: var(--ink, #12213B);
opacity: .85;
text-wrap: pretty;
}
.svtvs .poolnote__how {
font-size: 13px !important;
opacity: .55 !important;
margin-bottom: 0 !important;
}
/* --- Merchant exit ----------------------------------------------
Secondary by design. The page's job is the comparison; this is
what you press once it has done that job, so it does not compete
with the product title for attention. */
.svtvs .pcard__buy {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 8px 0 0;
padding: 0 16px;
height: 36px;
min-height: 36px;
box-sizing: border-box;
font-size: 12px;
font-weight: 700;
letter-spacing: .03em;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: var(--svt-cta-text, #3A1F03);
background: var(--svt-cta, #E2670F);
border: 1px solid var(--svt-cta, #E2670F);
border-radius: 3px;
box-shadow: none;
transition: background .15s ease, border-color .15s ease;
}
.svtvs .pcard__buy:hover,
.svtvs .pcard__buy:focus,
.svtvs .pcard__buy:focus-visible,
.svtvs .pcard__buy:active {
background: var(--svt-cta-deep, #B56815);
border-color: var(--svt-slate, #79746A);
color: var(--svt-cta-text, #3A1F03);
}
/* --- Related pairs ----------------------------------------------
Crawl path and escape hatch. Pill links, wrapping, no images —
this is navigation, and it sits below the verdict so it never
competes with it. */
.svtvs .relpairs__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.svtvs .relpairs__item {
display: inline-block;
padding: 9px 14px;
font-size: 13.5px;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
color: var(--ink, #12213B);
background: var(--svt-panel, #F5F1E9);
border-radius: 9px;
transition: color .16s ease, box-shadow .16s ease;
}
.svtvs .relpairs__item:hover,
.svtvs .relpairs__item:focus-visible {
color: var(--svt-added, #3B6633);
box-shadow: inset 0 0 0 1px var(--svt-added, #3B6633);
}
@media (max-width: 560px) {
.svtvs .hero__answer { font-size: 15.5px; margin-top: 12px; }
.svtvs .thinnote { font-size: 13px; margin-bottom: 20px; }
.svtvs .evid__cols { grid-template-columns: 1fr; gap: 14px; }
.svtvs .evid__col { padding: 16px 16px; }
.svtvs .relpairs__item { font-size: 13px; padding: 8px 12px; }
.svtvs .poolnote { margin-top: 18px; padding-top: 16px; }
.svtvs .poolnote p { font-size: 14.5px; }
.svtvs .srctable table { font-size: 13px; }
.svtvs .srctable tbody th,
.svtvs .srctable tbody td { padding: 10px 8px 10px 0; }
.svtvs .srctable tbody td b { font-size: 15px; }
.svtvs .srctable__n,
.svtvs .srctable__rng { font-size: 11px; }
.svtvs .srctable__noterow td { font-size: 12.5px; padding-bottom: 10px; }
/* The headline row was using 304 of the 347px available. Scaling the whole
row rather than each part keeps the dials, logos, numbers and badge in
exactly the proportions they already have — and `zoom` reflows, so the
content below moves down instead of being overlapped. The gap tightens to
pay for the extra width. */
.svtvs .vmid {
gap: 60px;
zoom: 1.15;
}
}
@media (prefers-reduced-motion: reduce) {
.svtvs .pcard__buy,
.svtvs .relpairs__item { transition: none; }
}
/* ============================================================
SVT — VS page: dial hand-off, one type scale, both tables,
link affordance, exclusive-category cards, and the verdict.
Fourth file in the deploy chain:
svt-vs-block.css → svt-vs-h2h.css → svt-vs-render.css
→ svt-vs-verdict.css
============================================================ */
/* --- Dial hand-off ----------------------------------------------
Rehub's custom.js animates every .radial-progress on document
ready, with no viewport gate. Our dials carry that class for its
geometry, so they were filled twice — once by Rehub at load, once
by svt-vs.js on reveal, with a visible reset to 0.0 between.
Gated on .svtvs--js, added by svt-vs.js at runtime, so a blocked
or failed script leaves Rehub's animation visible rather than an
empty ring. */
.svtvs--js .svtdial .percentage {
opacity: 0;
transition: opacity .18s ease;
}
.svtvs--js .svtdial.is-armed .percentage {
opacity: 1;
}
/* ============================================================
ONE TYPE SCALE — measured off what the page already does:
headings #12213B at 750, body #4A576B at 400, eyebrows
10.5px/800 uppercase with 1.05px tracking.
============================================================ */
.svtvs {
--svtvs-head: var(--ink, #12213B);
--svtvs-body: var(--muted, #4A576B);
}
.svtvs .hero__answer,
.svtvs .evid__intro,
.svtvs .poolnote p {
font-size: 15px;
line-height: 1.6;
font-weight: 400;
color: var(--svtvs-body);
opacity: 1;
}
.svtvs .thinnote,
.svtvs .evid__cite,
.svtvs .srctable__noterow td,
.svtvs .poolnote__how {
font-size: 13px !important;
line-height: 1.55;
font-weight: 400;
color: var(--svtvs-body);
opacity: .82 !important;
}
.svtvs .srctable__n,
.svtvs .srctable__rng,
.svtvs .evid__of {
font-size: 12px;
line-height: 1.45;
color: var(--svtvs-body);
opacity: .72;
}
.svtvs .evid__lab,
.svtvs .srctable__cap,
.svtvs .vwin__lead {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.05px;
text-transform: uppercase;
line-height: 1.6;
color: var(--svtvs-body);
opacity: .5;
}
.svtvs .evid__col h4 {
font-size: 15px;
font-weight: 750;
letter-spacing: normal;
line-height: 1.2;
}
.svtvs .srctable tbody th {
font-size: 13.5px;
font-weight: 700;
color: var(--svtvs-head);
}
.svtvs .srctable thead th {
font-size: 12px;
font-weight: 700;
}
.svtvs .srctable thead th:first-child { color: var(--svtvs-body); }
.svtvs .srctable tbody td b {
font-size: 16px;
font-weight: 800;
color: var(--svtvs-head);
}
.svtvs .panel .poolnote,
.svtvs .panel .critnote,
.svtvs .thinnote { max-width: none; }
/* ============================================================
LINKS LOOK LIKE LINKS
Colour alone is not an affordance — a green run of text in a grey
paragraph reads as emphasis, not as something to click. Every
in-copy link is green AND underlined at rest.
The category heading keeps heading colour: a full-size green H3
would outrank the section title it sits under. It gets the
permanent underline instead, which is the part that was missing.
============================================================ */
.svtvs .evid__cite a,
.svtvs .poolnote a,
.svtvs .hero__answer a,
.svtvs .thinnote a,
.svtvs .foot a,
.svtvs .vwin__all {
color: var(--svt-added, #3B6633);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
border-bottom: 0;
opacity: 1;
}
.svtvs .evid__cite a:hover,
.svtvs .poolnote a:hover,
.svtvs .hero__answer a:hover,
.svtvs .thinnote a:hover,
.svtvs .foot a:hover,
.svtvs .vwin__all:hover,
.svtvs .evid__cite a:focus-visible,
.svtvs .foot a:focus-visible,
.svtvs .vwin__all:focus-visible {
text-decoration-thickness: 2px;
}
.svtvs .match__head h3 a.match__catlink {
text-decoration: none;
border-bottom: 0;
}
.svtvs .match__head h3 a.match__catlink:hover,
.svtvs .match__head h3 a.match__catlink:focus-visible {
color: var(--svt-click, #4974C4);
}
/* --- Both tables, identically ----------------------------------- */
.svtvs .srctable__n,
.svtvs .srctable__rng { display: inline; }
.svtvs .srctable__rng::before {
content: " · ";
opacity: .55;
}
.svtvs .srctable tbody td b { margin-bottom: 1px; }
/* The same mark the chart uses for that row, so one section does not
name the same thing two ways. */
.svtvs .srctable__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 8px;
vertical-align: -5px;
}
.svtvs .srctable__mark:empty { display: none; }
.svtvs .srctable__mark > * { max-width: 100%; max-height: 100%; }
.svtvs .srctable__mark .db__icon { width: 18px; height: 18px; opacity: .55; }
.svtvs .critpanel .crit {
background: transparent;
border-radius: 0;
}
/* --- What only one of them sells --------------------------------
Was five words in a pill: the least visual block on the page, and
the one place a picture teaches something — "Under Sink" means
nothing until you see one. The image is that category's
best-scoring product. */
.svtvs .chips {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 10px;
}
.svtvs .onlycard {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 10px;
text-decoration: none;
background: color-mix(in srgb, #fff 70%, transparent);
border: 1px solid var(--line, #E6E2DA);
transition: border-color .16s ease, background-color .16s ease;
}
a.svtvs__noop, /* keeps the selector list valid if the tag is a span */
.svtvs a.onlycard:hover,
.svtvs a.onlycard:focus-visible {
background: #fff;
border-color: var(--svt-added, #3B6633);
}
.svtvs .onlycard__img {
flex: 0 0 42px;
width: 42px;
line-height: 0;
}
.svtvs .onlycard__img img {
width: 100%;
height: auto;
border-radius: 6px;
}
.svtvs .onlycard__body { min-width: 0; }
.svtvs .onlycard__t {
display: block;
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
color: var(--svtvs-head);
}
.svtvs .onlycard__n {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--svtvs-body);
opacity: .72;
}
/* --- The verdict ------------------------------------------------
The page's conclusion. The trophy carries a real halo — a drop
shadow alone was invisible against the tinted panel, so the glow
is a radial wash behind the mark plus two stacked shadows, with a
slow pulse for anyone who has not asked for less motion. */
.svtvs .verdict > svg {
width: 62px;
height: 62px;
flex: 0 0 62px;
padding: 9px;
box-sizing: border-box;
border-radius: 50%;
stroke-width: 1.5;
background: radial-gradient(circle at 50% 50%,
color-mix(in srgb, currentColor 30%, transparent) 0%,
color-mix(in srgb, currentColor 10%, transparent) 45%,
transparent 72%);
filter:
drop-shadow(0 0 8px color-mix(in srgb, currentColor 65%, transparent))
drop-shadow(0 0 20px color-mix(in srgb, currentColor 38%, transparent));
animation: svtTrophyGlow 3.2s ease-in-out infinite;
}
.svtvs .verdict--a > svg { color: var(--a, #C8842B); }
.svtvs .verdict--b > svg { color: var(--b, #4974C4); }
@keyframes svtTrophyGlow {
0%, 100% {
filter:
drop-shadow(0 0 8px color-mix(in srgb, currentColor 55%, transparent))
drop-shadow(0 0 18px color-mix(in srgb, currentColor 28%, transparent));
}
50% {
filter:
drop-shadow(0 0 13px color-mix(in srgb, currentColor 85%, transparent))
drop-shadow(0 0 30px color-mix(in srgb, currentColor 50%, transparent));
}
}
.svtvs .verdict > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 24px;
}
.svtvs .verdict > div > * { grid-column: 1 / -1; }
.svtvs .verdict > div > h3 {
grid-column: 1;
grid-row: 1;
margin: 0;
}
.svtvs .verdict__logo {
grid-column: 2;
grid-row: 1;
justify-self: end;
max-height: 72px;
width: auto;
max-width: 260px;
margin: 0;
}
/* --- The winner's shelf ------------------------------------------ */
.svtvs .vwin {
margin: 20px 0 0;
padding: 18px 0 0;
border-top: 1px solid color-mix(in srgb, var(--svtvs-head) 12%, transparent);
}
.svtvs .vwin__lead { margin: 0 0 12px; }
.svtvs .vwin__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.svtvs .vwin__card {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px;
border-radius: 10px;
text-decoration: none;
background: color-mix(in srgb, #fff 62%, transparent);
border: 1px solid transparent;
transition: border-color .16s ease, background-color .16s ease;
}
.svtvs .vwin__card:hover,
.svtvs .vwin__card:focus-visible {
background: #fff;
border-color: color-mix(in srgb, var(--svtvs-head) 14%, transparent);
}
.svtvs .vwin__img {
flex: 0 0 46px;
width: 46px;
line-height: 0;
}
.svtvs .vwin__img img {
width: 100%;
height: auto;
border-radius: 6px;
}
.svtvs .vwin__body { min-width: 0; }
.svtvs .vwin__t {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 13.5px;
font-weight: 700;
line-height: 1.3;
color: var(--svtvs-head);
}
.svtvs .vwin__meta {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--svtvs-body);
opacity: .8;
}
.svtvs .vwin__meta b {
font-weight: 800;
font-variant-numeric: tabular-nums;
opacity: 1;
}
.svtvs .vwin--a .vwin__meta b { color: var(--a, #C8842B); }
.svtvs .vwin--b .vwin__meta b { color: var(--b, #4974C4); }
.svtvs .vwin__all {
display: inline-block;
margin: 12px 0 0;
font-size: 13px;
font-weight: 600;
}
/* --- Criteria panel ---------------------------------------------- */
.svtvs .critpanel .srctable { margin-top: 20px; }
.svtvs .critpanel .critnote { margin-top: 4px; }
@media (max-width: 560px) {
/* Each value column is about 90px here. The figures fit; the words
are what wrap into four ragged lines, so the words go. */
.svtvs .srctable__u { display: none; }
.svtvs .srctable__mark { width: 17px; height: 17px; margin-right: 6px; }
.svtvs .srctable__mark .db__icon { width: 15px; height: 15px; }
.svtvs .chips { grid-template-columns: 1fr; }
.svtvs .vwin__grid { grid-template-columns: 1fr; gap: 8px; }
.svtvs .vwin__img { flex-basis: 54px; width: 54px; }
.svtvs .vwin__t { -webkit-line-clamp: 3; }
.svtvs .vwin { margin-top: 16px; padding-top: 14px; }
/* No room for a mark beside the heading: it stacks under, and it is
the thing that answers the question, so it stays large. */
.svtvs .verdict > div { grid-template-columns: minmax(0, 1fr); }
.svtvs .verdict > div > h3 { grid-column: 1; }
.svtvs .verdict__logo {
grid-column: 1;
grid-row: auto;
justify-self: start;
max-height: 56px;
max-width: 200px;
margin: 10px 0 6px;
}
.svtvs .verdict > svg { width: 50px; height: 50px; flex-basis: 50px; padding: 7px; }
.svtvs .hero__answer,
.svtvs .evid__intro,
.svtvs .poolnote p { font-size: 14.5px; }
.svtvs .srctable__noterow td { font-size: 12.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
.svtvs .vwin__card,
.svtvs .onlycard,
.svtvs--js .svtdial .percentage { transition: none; }
.svtvs .verdict > svg { animation: none; }
}
/* ============================================================
SVT — VS page corrections.
Fifth file in the deploy chain:
svt-vs-block.css → svt-vs-h2h.css → svt-vs-render.css
→ svt-vs-verdict.css → svt-vs-fixes.css
Five files is two too many. The next consolidation folds
render/verdict/fixes into the block and the chain goes back
to one; they are separate only so each correction stays
reviewable on its own.
============================================================ */
/* --- Table marks were rendering 0 x 0 ----------------------------
The row marks are mask-image spans: no intrinsic size, sized by
the chart CSS that normally wraps them. In a table cell they had
no dimensions at all, so max-width/max-height had nothing to cap
and all thirteen collapsed.
Sized to match the charts, so one section does not label the same
row two different ways. */
.svtvs .srctable__mark {
width: 22px;
height: 22px;
margin-right: 9px;
}
.svtvs .srctable__mark .svt-bar-logo,
.svtvs .srctable__mark .svt-bar-mark {
display: block;
width: 22px;
height: 22px;
background-size: contain;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.svtvs .srctable__mark img,
.svtvs .srctable__mark svg {
display: block;
width: 22px;
height: 22px;
}
.svtvs .srctable__mark .db__icon { opacity: .55; }
/* Row label matches the chart's row label exactly. */
.svtvs .srctable tbody th {
font-size: 13.5px;
font-weight: 700;
}
/* --- The verdict logo ---------------------------------------------
The base rule sets `height: 26px`. A max-height can never beat an
explicit height, which is why every increase so far did nothing. */
.svtvs .verdict__logo {
height: auto;
max-height: 76px;
width: auto;
max-width: 280px;
}
/* --- Verdict spacing ----------------------------------------------
Three separate problems: the logo sat hard against the first
paragraph, the trophy was small for the emphasis it carries, and
on a phone the trophy is a flex item that indents every line of
the block behind it. */
.svtvs .verdict {
gap: 20px;
align-items: flex-start;
}
.svtvs .verdict > svg {
width: 72px;
height: 72px;
flex: 0 0 72px;
padding: 11px;
margin-top: -4px;
}
.svtvs .verdict > div {
row-gap: 16px;
column-gap: 28px;
}
.svtvs .verdict > div > h3 { align-self: center; }
.svtvs .verdict__logo { align-self: center; }
/* --- Mini dials: withdrawn ----------------------------------------
A 46px ring reproduces the geometry but not the character — the
segmented band is what makes the headline dial read as a dial, and
it does not survive the reduction. The rules are kept, unused, so
the next attempt starts from measured numbers rather than guesses:
base 96px, 10px band, masks clipped at 96/48; the small one is
46px, 5px band, clipped at 46/23. */
/* Mini dials withdrawn: size via --svt-ring-sz on .svt-midial, paint from svt-score-ring.css. */
@media (max-width: 560px) {
/* --- The real cause of the stacked table text ------------------
The criterion column was taking 178px of 375, leaving 67px a
side — narrow enough that even "18 of 18 · 1.0–7.0" broke over
two lines. Fixed layout gives the numbers room; the row label
wraps instead, which is the thing that reads fine wrapped. */
.svtvs .srctable table { table-layout: fixed; width: 100%; }
.svtvs .srctable tbody th,
.svtvs .srctable thead th:first-child { width: 33%; }
.svtvs .srctable tbody td,
.svtvs .srctable thead th:not(:first-child) { width: 33.5%; }
.svtvs .srctable__n,
.svtvs .srctable__rng { font-size: 11px; }
.svtvs .srctable__mark { width: 18px; height: 18px; margin-right: 6px; }
.svtvs .srctable__mark .svt-bar-logo,
.svtvs .srctable__mark .svt-bar-mark,
.svtvs .srctable__mark img,
.svtvs .srctable__mark svg { width: 18px; height: 18px; }
/* The trophy is a flex item, so on a phone it was indenting every
line of the verdict behind it. It goes above instead, and the
text gets the full width. */
.svtvs .verdict {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.svtvs .verdict > svg {
width: 58px;
height: 58px;
flex-basis: 58px;
padding: 9px;
margin-top: 0;
}
.svtvs .verdict > div { row-gap: 14px; }
.svtvs .verdict__logo {
max-height: 60px;
max-width: 220px;
margin: 2px 0 4px;
}
}
/* ======================================================================
* svt-vs-tablefix.css — appended last in the chain.
*
* 1. The table overlap.
* 2. The verdict block: heading, then trophy + winner, then full-width body.
*
* Both are CSS-only. Neither needs the template touched.
* ====================================================================== */
/* ======================================================================
* 1. TABLE OVERLAP
*
* th[scope=row] carries white-space:nowrap. At desktop the table is
* table-layout:auto, the browser hands the column the 327px it asks for,
* and nothing is wrong. At mobile the table is table-layout:fixed at 33%,
* the header needs ~180px in a ~112px column, and nowrap means it
* overflows rather than wraps — painting straight across the value cell.
* That is the "Warranty & Support3.0" collision, and it is identical in
* both tables because both are .srctable.
* ====================================================================== */
.svtvs .srctable th[scope="row"] {
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
hyphens: auto;
}
.svtvs .srctable th[scope="row"] .srctable__mark {
flex: 0 0 auto;
}
@media (max-width: 767px) {
.svtvs .srctable {
table-layout: fixed;
width: 100%;
}
/* Rebalanced from 33/33.5/33.5. The label is the only cell carrying real
words; the value cells hold "10.0" plus a meta line that already drops
its noun words at this width via .srctable__u. */
.svtvs .srctable thead th:first-child,
.svtvs .srctable tbody th[scope="row"] {
width: 44%;
padding-right: 8px;
}
.svtvs .srctable thead th:nth-child(2),
.svtvs .srctable tbody td:nth-child(2),
.svtvs .srctable thead th:nth-child(3),
.svtvs .srctable tbody td:nth-child(3) {
width: 28%;
}
.svtvs .srctable td {
overflow-wrap: anywhere;
}
/* The note row spans everything and keeps its own full width. */
.svtvs .srctable .srctable__noterow > td {
width: auto;
}
}
/* ======================================================================
* 2. THE VERDICT BLOCK
*
* The markup is:
*
* .verdict > svg.trophy
* > div > h3 + img.verdict__logo + p + p + p + .vwin
*
* Two children, so the trophy occupies a full column and EVERYTHING in
* the wrapper is indented past it — the left gap on mobile, and the
* heading/logo drifting apart on desktop.
*
* display:contents dissolves the wrapper so its children become grid
* items of .verdict itself. Then the three lines can be placed the way
* they were asked for:
*
* row 1 So which should you buy? (full width)
* row 2 [trophy] [winner logo] (together, pronounced)
* row 3+ body and product cards (full width)
*
* No template change, and it holds at every width — the same grid does
* mobile and desktop, because the layout was never about screen size.
* ====================================================================== */
.svtvs .verdict {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
row-gap: 0;
align-items: center;
}
/* The wrapper stops being a box and its children join the grid. */
.svtvs .verdict > div {
display: contents;
}
.svtvs .verdict h3 {
grid-area: 1 / 1 / 2 / 3;
margin: 0 0 14px;
}
/* Row two, left: the trophy. Bigger, and lit. */
.svtvs .verdict > svg {
grid-area: 2 / 1 / 3 / 2;
width: 56px;
height: 56px;
margin: 0;
color: var(--svt-brass, #C8842B);
filter: drop-shadow(0 0 14px rgba(200, 132, 43, .5))
drop-shadow(0 1px 2px rgba(200, 132, 43, .35));
}
/* Row two, right: the winner. Sized off the row, not off a fixed height,
so a tall logo and a wide one both land the same. */
.svtvs .verdict .verdict__logo {
grid-area: 2 / 2 / 3 / 3;
justify-self: start;
align-self: center;
height: auto;
width: auto;
max-height: 56px;
max-width: min(260px, 100%);
margin: 0;
object-fit: contain;
object-position: left center;
}
/* Everything below runs the full width of the box. This is the line that
removes the left gap: without it, auto placement drops each paragraph
into column 2 and the trophy's column keeps indenting them. */
.svtvs .verdict p,
.svtvs .verdict .vwin,
.svtvs .verdict > div > p,
.svtvs .verdict > div > div {
grid-column: 1 / -1;
}
/* The body starts below the winner, not tight against it. */
.svtvs .verdict p:first-of-type {
margin-top: 18px;
}
@media (max-width: 767px) {
.svtvs .verdict {
column-gap: 12px;
}
.svtvs .verdict > svg {
width: 44px;
height: 44px;
}
.svtvs .verdict .verdict__logo {
max-height: 44px;
max-width: 100%;
}
.svtvs .verdict h3 {
margin-bottom: 10px;
}
}
/* ======================================================================
* svt-vs-faq.css - the common-questions block.
*
* Same type scale as the rest of the page: headings #12213B at 750,
* body #4A576B at 400. Nothing invented for this section.
*
* The rows are . The marker is drawn as a chevron so the block
* reads as a list of questions rather than a browser widget.
* ====================================================================== */
.svtvs .vsfaq__panel {
padding-top: 6px;
padding-bottom: 6px;
}
.svtvs .vsfaq__item {
border-top: 1px solid rgba(18, 33, 59, .09);
}
.svtvs .vsfaq__item:first-child {
border-top: 0;
}
.svtvs .vsfaq__q {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 0;
cursor: pointer;
list-style: none;
font-size: 16px;
font-weight: 750;
line-height: 1.35;
color: #12213B;
}
/* Safari and Chrome each need their own way of removing the triangle. */
.svtvs .vsfaq__q::-webkit-details-marker {
display: none;
}
/* The chevron. Rotates when the row opens. */
.svtvs .vsfaq__q::after {
content: "";
flex: 0 0 9px;
width: 9px;
height: 9px;
margin: 5px 0 0 auto;
border-right: 2px solid rgba(18, 33, 59, .38);
border-bottom: 2px solid rgba(18, 33, 59, .38);
transform: rotate(45deg);
transition: transform .18s ease, border-color .18s ease;
}
.svtvs .vsfaq__item[open] .vsfaq__q::after {
transform: rotate(-135deg);
margin-top: 8px;
border-color: var(--svt-brass, #C8842B);
}
.svtvs .vsfaq__q:hover::after {
border-color: var(--svt-brass, #C8842B);
}
.svtvs .vsfaq__a {
padding: 0 34px 18px 0;
}
.svtvs .vsfaq__a p {
margin: 0;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: #4A576B;
max-width: 68ch;
}
@media (max-width: 767px) {
.svtvs .vsfaq__q {
font-size: 15px;
padding: 14px 0;
gap: 10px;
}
.svtvs .vsfaq__a {
padding-right: 0;
padding-bottom: 16px;
}
.svtvs .vsfaq__a p {
font-size: 14.5px;
}
}
/* SVT-VS-PLOTROW — appended past the splice marker, like the last two
parts of the chain. The plot moved inside the table row it describes
(VS Page item 1), so it drops the rule it used to carry as a sibling. */
.svtvs .srctable__plotrow > td { padding: 0 0 6px; }
.svtvs .srctable__plotrow .db__row { border-top: 0; padding: 2px 0 0; }
@media (max-width: 560px) { .svtvs .srctable__plotrow .db__plot { padding: 0 26px; } }
/* ======================================================================
* Research notes — the visual half of VS Page item 2, 2026-09-13.
*
* The row split shipped 2026-09-10 and NOTHING ELSE DID. Measured on the
* rendered Staging page: not one CSS rule anywhere on the page matched
* .srcnote__read, .srcnote__read--a, .srcnote__read--b or .srcnote__prov.
* Both side classes computed to the identical rgb(74,87,107), both brand
* names to the identical rgb(18,33,59), and --a / --b sat two rules away
* holding the correct brass and blue. Emitted and unstyled is this
* project's most-recorded failure shape and it had reached the markup for
* the notes without anyone seeing it, because the classes read as done.
*
* What that cost: 2,104px of undifferentiated grey prose across 13 rows,
* 17% of a 12,567px page, the largest single note row 587px. The item
* asked whether they still read as a wall. They do.
*
* THE PROVENANCE COUNT IS THE PART THAT MATTERS MOST. Part 6 says "the
* count travels with the text — a reading carried by 18 products and one
* carried by 2 are not the same claim, and the page says which." It says
* which in the same 13px, the same colour, as the last clause of a
* 200-word paragraph. On the Reddit row SpringWell's reading is carried by
* ONE product of 17 and is presented with exactly the authority of
* Aquasana's, carried by 18 of 18. Demoting it to its own metadata line
* under a rule is what makes the count legible as a qualifier rather than
* as the end of a sentence.
* ====================================================================== */
.svtvs .srctable__noterow > td {
padding: 14px 16px 16px;
}
.svtvs .srcnote__fact {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.55;
color: var(--svt-ink, #26231E);
}
.svtvs .srcnote__read {
position: relative;
margin: 0 0 14px;
padding: 2px 0 0 14px;
border-left: 3px solid var(--svt-hairline, #E5E1D8);
max-width: 68ch;
font-size: 14px;
line-height: 1.6;
color: var(--svt-slate, #4A576B);
}
.svtvs .srcnote__read:last-child {
margin-bottom: 0;
}
/* The side colours already exist on this page as --a and --b. They were
never read here. */
.svtvs .srcnote__read--a { border-left-color: var(--a, var(--svt-brass, #C8842B)); }
.svtvs .srcnote__read--b { border-left-color: var(--b, var(--svt-click, #4974C4)); }
.svtvs .srctable tbody td .srcnote__read > b {
display: block;
margin: 0 0 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.svtvs .srctable tbody td .srcnote__read--a > b { color: var(--a, var(--svt-brass, #C8842B)); }
.svtvs .srctable tbody td .srcnote__read--b > b { color: var(--b, var(--svt-click, #4974C4)); }
/* Metadata, not the tail of the sentence. */
.svtvs .srcnote__prov {
display: block;
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid var(--svt-hairline, #E5E1D8);
font-size: 12px;
font-style: normal;
line-height: 1.4;
letter-spacing: 0.02em;
color: color-mix(in srgb, var(--svt-slate, #4A576B) 72%, transparent);
}
@media (max-width: 600px) {
.svtvs .srctable__noterow > td { padding: 12px 12px 14px; }
.svtvs .srcnote__read { padding-left: 11px; border-left-width: 2px; }
}
/* Per-row dual bars (criteria + social) and stacked verdict card.
Extra class .verdict-card beats the older trophy-grid .verdict rules. */
.svtvs .versus__cap {
margin: 24px auto 20px;
padding: 4px 0;
max-width: 520px;
font-size: 14.5px;
text-align: center;
color: var(--body, #4A576B);
}
.svtvs .versus__cap__brand {
font-weight: 700;
}
.svtvs .versus__cap__brand--a { color: var(--a, #C8842B); }
.svtvs .versus__cap__brand--b { color: var(--b, #4974C4); }
.svtvs .versus__cap__gap {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.svtvs .versus__cap__gap--a { color: var(--a, #C8842B); }
.svtvs .versus__cap__gap--b { color: var(--b, #4974C4); }
.svtvs .diffrows__legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
margin: 0 0 4px;
padding: 0 0 10px;
border-bottom: 1px solid var(--line, #E6E2DA);
font-size: 13px;
font-weight: 650;
color: var(--ink, #12213B);
}
.svtvs .diffrows__legend span {
margin-left: auto;
font-weight: 600;
opacity: .55;
font-variant-numeric: tabular-nums;
}
.svtvs .diffrows__swatch {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 6px;
border-radius: 2px;
vertical-align: -1px;
}
.svtvs .diffrows__swatch--a { background: var(--a, #C8842B); }
.svtvs .diffrows__swatch--b { background: var(--b, #4974C4); }
.svtvs .diffrows {
display: flex;
flex-direction: column;
gap: 0;
}
.svtvs .diffrow {
padding: 12px 0;
border-top: 1px solid var(--line, #E6E2DA);
}
.svtvs .diffrow:first-child { border-top: 0; padding-top: 12px; }
.svtvs .diffrow__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 6px;
}
.svtvs .diffrow__name {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 15px;
font-weight: 750;
color: var(--ink, #12213B);
}
.svtvs .diffrow__mark {
display: inline-flex;
width: 20px;
height: 20px;
flex: 0 0 20px;
}
.svtvs .diffrow__mark .svt-bar-logo,
.svtvs .diffrow__mark .svt-bar-mark {
display: block;
width: 20px;
height: 20px;
background-size: contain;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.svtvs .diffrow__gap {
flex: 0 0 auto;
font-size: 12px;
font-weight: 750;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
opacity: .7;
}
.svtvs .diffrow--a .diffrow__gap { color: var(--a, #C8842B); opacity: 1; }
.svtvs .diffrow--b .diffrow__gap { color: var(--b, #4974C4); opacity: 1; }
.svtvs .diffrow--tie .diffrow__gap { opacity: .55; }
.svtvs .diffrow__bars {
display: flex;
flex-direction: column;
gap: 5px;
}
.svtvs .diffbar {
display: grid;
grid-template-columns: minmax(6.5rem, 22%) minmax(0, 1fr) 2.4rem;
gap: 10px;
align-items: center;
}
.svtvs .diffbar__lab {
font-size: 12px;
font-weight: 650;
color: var(--ink, #12213B);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svtvs .diffbar__track {
position: relative;
height: 10px;
border-radius: 99px;
background: #EEEAE3;
overflow: hidden;
}
.svtvs .diffbar__fill {
display: block;
height: 100%;
width: 0;
border-radius: 99px;
min-width: 0;
}
.svtvs:not(.svtvs--js) .diffbar__fill,
.svtvs .diffrow.is-in .diffbar__fill {
width: var(--svt-bar-w, 0%);
}
.svtvs.svtvs--js .diffrow.is-in .diffbar__fill {
transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.svtvs.svtvs--js .diffrow.is-in .diffbar--b .diffbar__fill {
transition-delay: 70ms;
}
@media (prefers-reduced-motion: reduce) {
.svtvs .diffbar__fill {
width: var(--svt-bar-w, 0%);
transition: none;
}
}
.svtvs .diffbar--a .diffbar__fill { background: var(--a, #C8842B); }
.svtvs .diffbar--b .diffbar__fill { background: var(--b, #4974C4); }
.svtvs .diffbar__val {
font-size: 13px;
font-weight: 750;
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--ink, #12213B);
}
.svtvs .diffbar--none .diffbar__track {
height: 18px;
background: #E8E4DC;
}
.svtvs .diffbar--none .diffbar__val { opacity: .4; }
.svtvs .diffbar__empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 0 10px;
font-size: 11px;
font-weight: 650;
letter-spacing: .02em;
color: #8A857C;
white-space: nowrap;
}
.svtvs .diffrow__note {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.45;
color: var(--body, #4A576B);
}
.svtvs .srcnote__more {
margin: 8px 0 0;
}
.svtvs .srcnote__more summary {
cursor: pointer;
list-style: none;
font-size: 13px;
font-weight: 650;
color: var(--b, #4974C4);
}
.svtvs .srcnote__more summary::-webkit-details-marker { display: none; }
.svtvs .srcnote__more summary::before {
content: '';
display: inline-block;
width: 0;
height: 0;
margin-right: 6px;
border-left: 5px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
vertical-align: 1px;
}
.svtvs .srcnote__more[open] summary::before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
border-bottom: 0;
vertical-align: 2px;
}
.svtvs .srcnote__sides {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 20px;
margin: 10px 0 2px;
}
.svtvs .srcnote__side {
min-width: 0;
padding: 10px 0 0 12px;
border-left: 3px solid var(--svt-hairline, #E5E1D8);
}
.svtvs .srcnote__side--a { border-left-color: var(--a, #C8842B); }
.svtvs .srcnote__side--b { border-left-color: var(--b, #4974C4); }
.svtvs .srcnote__brand {
margin: 0 0 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.svtvs .srcnote__side--a .srcnote__brand { color: var(--a, #C8842B); }
.svtvs .srcnote__side--b .srcnote__brand { color: var(--b, #4974C4); }
.svtvs .srcnote__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--svt-slate, #4A576B);
}
.svtvs .srcnote__more .srcnote__prov { margin-top: 8px; }
@media (max-width: 700px) {
.svtvs .srcnote__sides { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.svtvs .diffbar {
grid-template-columns: minmax(0, 1fr) 2.4rem;
}
.svtvs .diffbar__lab {
grid-column: 1 / -1;
white-space: normal;
}
.svtvs .diffrows__legend span { margin-left: 0; }
}
.svtvs .verdict.verdict-card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 28px 32px 32px;
margin: 64px 0 0;
background: var(--svt-card, var(--card, #fff));
border: 1px solid var(--line, #E6E2DA);
border-radius: 16px;
box-shadow: var(--shadow, 0 1px 2px rgba(18,33,59,.04), 0 8px 24px rgba(18,33,59,.06));
scroll-margin-bottom: 24px;
}
.svtvs .verdict.verdict-card > svg { display: none; }
.svtvs .verdict.verdict-card h3 {
display: block;
grid-area: auto;
margin: 0 0 10px;
font-size: 22px;
letter-spacing: -.02em;
}
.svtvs .verdict.verdict-card p,
.svtvs .verdict.verdict-card .vwin,
.svtvs .verdict.verdict-card > div,
.svtvs .verdict.verdict-card > div > div {
grid-column: auto;
}
.svtvs .verdict.verdict-card p:first-of-type { margin-top: 0; }
.svtvs .verdict.verdict-card h3 + .verdict-card__kicker { margin-top: 4px; }
.svtvs .verdict.verdict-card .verdict-card__lean {
margin: 0 0 20px;
font-size: 16px;
line-height: 1.5;
color: var(--ink, #12213B);
font-weight: 600;
}
.svtvs .verdict.verdict-card .verdict-card__kicker {
margin: 0 0 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--body, #4A576B);
opacity: .55;
}
.svtvs .verdict.verdict-card .verdict-card__trade {
margin: 0 0 20px;
padding: 0 0 20px;
border-bottom: 1px solid var(--line, #E6E2DA);
}
.svtvs .verdict.verdict-card .verdict-card__trade p {
margin: 0 0 8px;
font-size: 15px;
}
.svtvs .verdict.verdict-card .verdict-card__trade p:last-child { margin-bottom: 0; }
.svtvs .verdict.verdict-card .verdict-card__picks { margin: 0 0 20px; }
.svtvs .verdict.verdict-card .verdict-card__picks .verdict-card__kicker {
margin: 0 0 12px;
width: 100%;
}
.svtvs .verdict.verdict-card .verdict-card__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.svtvs .verdict.verdict-card .verdict-card__pick {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 12px;
align-items: center;
min-width: 0;
padding: 12px;
border: 1px solid var(--line, #E6E2DA);
border-radius: 12px;
text-decoration: none;
color: inherit;
background: #FBF9F4;
}
.svtvs .verdict.verdict-card .verdict-card__pick:hover,
.svtvs .verdict.verdict-card .verdict-card__pick:focus-visible {
border-color: currentColor;
}
.svtvs .verdict.verdict-card .verdict-card__pick--a:hover,
.svtvs .verdict.verdict-card .verdict-card__pick--a:focus-visible { color: var(--a, #C8842B); }
.svtvs .verdict.verdict-card .verdict-card__pick--b:hover,
.svtvs .verdict.verdict-card .verdict-card__pick--b:focus-visible { color: var(--b, #4974C4); }
.svtvs .verdict.verdict-card .verdict-card__pickimg {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
overflow: hidden;
border-radius: 8px;
background: #fff;
}
.svtvs .verdict.verdict-card .verdict-card__pickimg img {
display: block;
width: 64px;
height: 64px;
object-fit: contain;
}
.svtvs .verdict.verdict-card .verdict-card__pickbody {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.svtvs .verdict.verdict-card .verdict-card__pickbrand {
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.svtvs .verdict.verdict-card .verdict-card__pick--a .verdict-card__pickbrand { color: var(--a, #C8842B); }
.svtvs .verdict.verdict-card .verdict-card__pick--b .verdict-card__pickbrand { color: var(--b, #4974C4); }
.svtvs .verdict.verdict-card .verdict-card__picktitle {
font-size: 14px;
font-weight: 650;
line-height: 1.3;
color: var(--ink, #12213B);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.svtvs .verdict.verdict-card .verdict-card__pickmeta {
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--body, #4A576B);
}
.svtvs .verdict.verdict-card .verdict-card__pickmeta b {
font-weight: 750;
color: var(--ink, #12213B);
}
.svtvs .verdict.verdict-card .verdict-card__brands {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 0;
font-size: 14px;
font-weight: 650;
}
.svtvs .verdict.verdict-card .verdict-card__brands a {
color: var(--ink, #12213B);
text-decoration: none;
border-bottom: 1px solid var(--line, #E6E2DA);
}
.svtvs .verdict.verdict-card .verdict-card__brands a:hover,
.svtvs .verdict.verdict-card .verdict-card__brands a:focus-visible {
color: var(--b, #4974C4);
border-bottom-color: currentColor;
}
@media (max-width: 767px) {
.svtvs .verdict.verdict-card {
padding: 22px 18px;
margin-top: 40px;
}
.svtvs .verdict.verdict-card .verdict-card__grid {
grid-template-columns: 1fr;
}
}
/* COMPARE tray is viewport-fixed. On VS, default to the collapsed tab
(count badge still visible) until the user expands it. Open tray then
pads the main column so charts and the verdict never sit under it.
Non-VS templates keep their own tray CSS. */
@media (min-width: 769px) {
body.single-svt_vs #re-compare-icon-fixed.has-thumbs:not(.rhhidden):not(.svt-vs-tray-open) {
width: auto !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
gap: 0 !important;
background: transparent !important;
border: none !important;
border-right: none !important;
border-radius: 12px 0 0 12px !important;
box-shadow: none !important;
overflow: visible !important;
}
body.single-svt_vs #re-compare-icon-fixed.has-thumbs:not(.rhhidden):not(.svt-vs-tray-open)::before {
content: none !important;
display: none !important;
}
body.single-svt_vs #re-compare-icon-fixed.has-thumbs:not(.rhhidden):not(.svt-vs-tray-open) > *:not(.re-compare-icon-toggle) {
display: none !important;
}
body.single-svt_vs #re-compare-icon-fixed.has-thumbs:not(.rhhidden):not(.svt-vs-tray-open) .re-compare-icon-toggle {
writing-mode: vertical-rl;
text-orientation: mixed;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: auto;
padding: 16px 9px !important;
border-radius: 12px 0 0 12px;
gap: 10px;
box-shadow: none;
}
body.single-svt_vs #re-compare-icon-fixed.has-thumbs:not(.rhhidden):not(.svt-vs-tray-open) .re-compare-icon-toggle::after {
content: "COMPARE";
flex: 0 0 auto;
font-size: 13px;
letter-spacing: 0.14em;
}
body.single-svt_vs #re-compare-icon-fixed.has-thumbs:not(.rhhidden):not(.svt-vs-tray-open) .re-compare-notice {
writing-mode: horizontal-tb;
text-orientation: mixed;
transform: none !important;
min-width: 22px !important;
height: 22px !important;
padding: 0 6px !important;
font-size: 12px !important;
}
body.single-svt_vs #re-compare-icon-fixed.has-thumbs:not(.rhhidden):not(.svt-vs-tray-open) .svt-compare-collapse {
display: none !important;
}
body.single-svt_vs:has(#re-compare-icon-fixed.has-thumbs.svt-vs-tray-open:not(.rhhidden)) .svtvs {
padding-right: calc(max(268px, var(--svt-compare-tray-w, 268px)) + 24px);
box-sizing: border-box;
}
}
/* Scale graphic retired; keep any leftover node from painting. */
.svtvs .scalewrap { display: none; }
/* ============================================================
SVT — VS polish (notes, H2H chips, numbers tiles, verdict,
denser hero). Desktop-first; hero tightening is ≥769 only.
============================================================ */
.svtvs .diffrow {
padding: 16px 0;
}
.svtvs .diffrow:first-child { padding-top: 14px; }
.svtvs .diffrow__note {
margin: 14px 0 0;
font-size: 14.5px;
line-height: 1.5;
color: var(--body, #4A576B);
}
.svtvs .srcnote__more {
margin: 12px 0 0;
}
.svtvs .srcnote__bullets {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
font-size: 13.5px;
line-height: 1.45;
color: var(--ink, #12213B);
}
.svtvs .srcnote__bullets li {
position: relative;
padding-left: 1.05em;
}
.svtvs .srcnote__bullets li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
opacity: .7;
}
.svtvs .srcnote__kicker {
margin: 8px 0 0;
font-size: 12px;
font-weight: 650;
letter-spacing: .02em;
opacity: .55;
}
.svtvs .srcnote__more .srcnote__prov { margin-top: 4px; }
.svtvs .h2h__tabs {
border-bottom: none;
gap: 8px;
margin: 0 0 14px;
}
.svtvs .h2h__tabs label {
padding: 6px 14px 7px;
margin: 0 0 0;
border: 1px solid #D6D1C7;
border-bottom: 1px solid #D6D1C7;
border-radius: 8px;
background: var(--svt-hairline, #E5E1D8);
color: var(--svt-ink, #26231E);
opacity: 1;
font-size: 13px;
font-weight: 550;
letter-spacing: 0;
}
.svtvs .h2h__tabs label:hover { opacity: .78; }
.svtvs .h2h__r:nth-of-type(1):checked ~ .h2h__tabs > label:nth-child(1),
.svtvs .h2h__r:nth-of-type(2):checked ~ .h2h__tabs > label:nth-child(2),
.svtvs .h2h__r:nth-of-type(3):checked ~ .h2h__tabs > label:nth-child(3) {
opacity: 1;
border-color: var(--ink, #12213B);
border-bottom-color: var(--ink, #12213B);
background: var(--ink, #12213B);
color: #FDFAF4;
}
.svtvs .h2h__r:nth-of-type(1):focus-visible ~ .h2h__tabs > label:nth-child(1),
.svtvs .h2h__r:nth-of-type(2):focus-visible ~ .h2h__tabs > label:nth-child(2),
.svtvs .h2h__r:nth-of-type(3):focus-visible ~ .h2h__tabs > label:nth-child(3) {
outline: 2px solid var(--ink, #12213B);
outline-offset: 2px;
border-radius: 8px;
}
.svtvs .panel.match {
margin: 0 0 16px;
padding: 20px 22px;
}
.svtvs .match__head { margin: 0 0 6px; gap: 12px; }
.svtvs .match__head h3 { font-size: 18px; }
.svtvs .match__scores {
margin: 0 0 12px;
font-size: 13px;
font-variant-numeric: tabular-nums;
opacity: .78;
}
.svtvs .match__scores b { color: var(--ink, #12213B); font-weight: 750; }
.svtvs .match__caps { margin: 0 0 12px; }
.svtvs .match__caplab {
margin: 8px 0 5px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.05px;
text-transform: uppercase;
opacity: .5;
}
.svtvs .match__caplab--a { color: var(--a, #C8842B); opacity: .85; }
.svtvs .match__caplab--b { color: var(--b, #4974C4); opacity: .85; }
.svtvs .capchips {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.svtvs .capchips li {
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
background: #F5F1E9;
color: var(--ink, #12213B);
}
.svtvs .capchips--a li,
.svtvs .capchips--b li { background: #F5F1E9; color: var(--ink, #12213B); }
.svtvs .capchips__more { opacity: .55; font-weight: 650; }
.svtvs .cards { gap: 12px; margin: 12px 0 0; }
.svtvs .pcard {
border-left-width: 4px;
}
.svtvs .pcard--a { border-left-color: var(--a, #C8842B); }
.svtvs .pcard--b { border-left-color: var(--b, #4974C4); }
.svtvs .pcard__top { padding: 14px 14px 0; gap: 12px; }
.svtvs .pcard__img { flex-basis: 88px; height: 96px; padding: 6px; }
.svtvs .pcard h4 { font-size: 14.5px; }
.svtvs .pcard__price { margin-top: 4px; font-size: 14px; }
.svtvs .pcard__buy { margin-top: 6px; }
.svtvs .pcard__scores {
display: block;
flex-wrap: unset;
gap: 0;
margin: 10px 14px 0;
padding: 0;
border-top: none;
}
.svtvs .pcard__scores > div:not(.svt-scoreclus) { display: none; }
.svtvs .pcard__pc { padding: 10px 14px 14px; gap: 5px; }
.svtvs .pc { font-size: 13px; }
.svtvs .facts { gap: 14px; }
.svtvs .facts .panel { overflow: hidden; }
.svtvs .facts__t { padding: 12px 16px; }
.svtvs .facts__overall {
display: block;
padding: 12px 16px 10px;
border-bottom: 1px solid var(--line, #E6E2DA);
}
.svtvs .facts__overall > span { display: none; }
.svtvs .facts__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 12px;
}
.svtvs .ftile {
padding: 10px 12px;
border-radius: 10px;
border-left: 4px solid var(--line, #E6E2DA);
}
.svtvs .facts--a .ftile {
background: var(--a-soft, #FBF1E2);
border-left-color: var(--a, #C8842B);
}
.svtvs .facts--b .ftile {
background: var(--b-soft, #EAF0FB);
border-left-color: var(--b, #4974C4);
}
.svtvs .ftile span {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
opacity: .55;
}
.svtvs .ftile b {
display: block;
margin-top: 4px;
font-size: 18px;
line-height: 1.2;
color: var(--ink, #12213B);
font-variant-numeric: tabular-nums;
}
.svtvs .verdict.verdict-card .verdict-card__leanstrip {
display: inline-flex;
align-self: flex-start;
margin: 4px 0 16px;
padding: 8px 14px;
border-radius: 12px;
background: var(--ink, #12213B);
color: #fff;
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.svtvs .verdict.verdict-card .verdict-card__trades {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 0 0 18px;
}
.svtvs .verdict.verdict-card .verdict-card__trades > * {
grid-column: auto;
min-width: 0;
}
.svtvs .verdict.verdict-card .verdict-card__when {
padding: 14px 16px;
border-radius: 12px;
border: 1px solid var(--line, #E6E2DA);
border-left-width: 4px;
}
.svtvs .verdict.verdict-card .verdict-card__when--a {
background: var(--a-soft, #FBF1E2);
border-color: color-mix(in srgb, var(--a, #C8842B) 28%, #fff);
border-left-color: var(--a, #C8842B);
}
.svtvs .verdict.verdict-card .verdict-card__when--b {
background: var(--b-soft, #EAF0FB);
border-color: color-mix(in srgb, var(--b, #4974C4) 28%, #fff);
border-left-color: var(--b, #4974C4);
}
.svtvs .verdict.verdict-card .verdict-card__when .verdict-card__kicker { margin: 0 0 6px; }
.svtvs .verdict.verdict-card .verdict-card__when p { margin: 0; font-size: 14.5px; }
.svtvs .verdict.verdict-card .verdict-card__picks { margin: 0 0 16px; }
@media (max-width: 700px) {
.svtvs .verdict.verdict-card .verdict-card__trades,
.svtvs .facts__grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
.svtvs .hero { padding: 12px 0 0; }
.svtvs .eyebrow { margin-bottom: 8px; }
.svtvs .hero__answer { margin-top: 10px; font-size: 16px; }
.svtvs .versus { margin-top: 18px; gap: 22px; }
.svtvs .vrule { margin-bottom: 10px; }
.svtvs .blogo-link { margin-bottom: 6px; }
.svtvs .blink { margin-bottom: 10px; padding: 6px 12px; }
.svtvs .vhero { height: 210px; margin: 0 0 4px; }
.svtvs .vhero__img img { max-width: 180px; max-height: 200px; }
.svtvs .vhero__disc { width: 190px; height: 190px; }
.svtvs .cat { margin: 2px 0 10px; }
.svtvs .vfeat { gap: 8px; }
.svtvs .versus__cap { margin-top: 24px; margin-bottom: 20px; }
.svtvs .thinnote { margin-bottom: 16px; }
}
/* ============================================================
SVT — VS polish 2 (2-col criteria, visual evidence, score
cluster discs + mini bars, logo-forward verdict).
============================================================ */
.svtvs .diffbar {
grid-template-columns: auto minmax(0, 1fr) 2.2rem;
gap: 8px;
}
.svtvs .diffbar__lab {
max-width: 7.2em;
}
.svtvs .critpanel .diffrows__legend {
margin: 0 0 12px;
padding: 0 2px 10px;
border-bottom: none;
}
.svtvs .critpanel .diffrow {
background: #fff;
border: 1px solid var(--line, #E6E2DA);
border-radius: 12px;
padding: 12px 14px;
box-shadow: 0 1px 2px rgba(18, 33, 59, .04);
}
.svtvs .critpanel .diffrow:first-child { padding-top: 12px; }
.svtvs .critpanel .diffrow__head { margin: 0 0 8px; }
.svtvs .critpanel .diffrow__name { font-size: 14px; }
.svtvs .critpanel .diffrow__gap {
padding: 3px 8px;
border-radius: 999px;
background: #F5F1E9;
font-size: 11px;
}
.svtvs .critpanel .diffrow--a .diffrow__gap { background: var(--a-soft, #FBF1E2); }
.svtvs .critpanel .diffrow--b .diffrow__gap { background: var(--b-soft, #EAF0FB); }
.svtvs .critpanel .diffrow__note {
margin: 8px 0 0;
font-size: 12.5px;
line-height: 1.4;
color: var(--body, #4A576B);
}
@media (min-width: 900px) {
.svtvs .critpanel .diffrows--grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 18px;
}
}
.svtvs .panel--pad .diffrow {
padding: 12px 0;
}
.svtvs .panel--pad .diffrow__note {
margin: 10px 0 0;
font-size: 13.5px;
line-height: 1.45;
}
.svtvs .srcnote__brand {
font-size: 11px;
}
.svtvs .srcnote__bullets {
font-size: 13px;
line-height: 1.42;
gap: 7px;
color: var(--ink, #12213B);
}
.svtvs .evid__block { margin: 16px 0 0; }
.svtvs .evid__block:first-of-type { margin-top: 4px; }
.svtvs .evid__compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
}
.svtvs .evid__side {
padding: 12px 14px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--line, #E6E2DA);
border-left-width: 4px;
}
.svtvs .evid--a { border-left-color: var(--a, #C8842B); }
.svtvs .evid--b { border-left-color: var(--b, #4974C4); }
.svtvs .evid__brand {
margin: 0;
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.svtvs .evid--a .evid__brand { color: var(--a, #C8842B); }
.svtvs .evid--b .evid__brand { color: var(--b, #4974C4); }
.svtvs .evid__cov {
margin: 4px 0 10px;
font-size: 13px;
color: var(--body, #4A576B);
}
.svtvs .evid__cov b {
font-size: 28px;
line-height: 1;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--ink, #12213B);
margin-right: 4px;
}
.svtvs .evid__bars {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.svtvs .evid__bars li {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(48px, 38%) 1.6rem;
gap: 8px;
align-items: center;
}
.svtvs .evid__term {
font-size: 12.5px;
font-weight: 650;
color: var(--ink, #12213B);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.svtvs .evid__track {
display: block;
height: 8px;
border-radius: 99px;
background: #EEEAE3;
overflow: hidden;
}
.svtvs .evid__track i {
display: block;
height: 100%;
width: 0;
border-radius: 99px;
background: var(--ink, #12213B);
min-width: 0;
}
.svtvs:not(.svtvs--js) .evid__track i,
.svtvs .evid__block.is-in .evid__track i {
width: var(--svt-bar-w, 0%);
}
.svtvs.svtvs--js .evid__block.is-in .evid__track i {
transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.svtvs.svtvs--js .evid__block.is-in .evid--b .evid__track i {
transition-delay: 70ms;
}
.svtvs.svtvs--js .evid__block.is-in .evid__bars li:nth-child(2) .evid__track i { transition-delay: 45ms; }
.svtvs.svtvs--js .evid__block.is-in .evid__bars li:nth-child(3) .evid__track i { transition-delay: 90ms; }
.svtvs.svtvs--js .evid__block.is-in .evid__bars li:nth-child(4) .evid__track i { transition-delay: 135ms; }
.svtvs.svtvs--js .evid__block.is-in .evid__bars li:nth-child(5) .evid__track i { transition-delay: 180ms; }
.svtvs.svtvs--js .evid__block.is-in .evid--b .evid__bars li:nth-child(1) .evid__track i { transition-delay: 70ms; }
.svtvs.svtvs--js .evid__block.is-in .evid--b .evid__bars li:nth-child(2) .evid__track i { transition-delay: 115ms; }
.svtvs.svtvs--js .evid__block.is-in .evid--b .evid__bars li:nth-child(3) .evid__track i { transition-delay: 160ms; }
.svtvs.svtvs--js .evid__block.is-in .evid--b .evid__bars li:nth-child(4) .evid__track i { transition-delay: 205ms; }
.svtvs.svtvs--js .evid__block.is-in .evid--b .evid__bars li:nth-child(5) .evid__track i { transition-delay: 250ms; }
@media (prefers-reduced-motion: reduce) {
.svtvs .evid__track i {
width: var(--svt-bar-w, 0%);
transition: none;
}
}
.svtvs .evid--a .evid__track i { background: var(--a, #C8842B); }
.svtvs .evid--b .evid__track i { background: var(--b, #4974C4); }
.svtvs .evid__bars b {
font-size: 12.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--ink, #12213B);
}
.svtvs .evid__empty {
margin: 0;
font-size: 13px;
opacity: .5;
}
@media (max-width: 700px) {
.svtvs .evid__compare { grid-template-columns: 1fr; }
}
.svt-scoreclus {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
min-width: 0;
}
.svtvs .pcard__scores .svt-scoreclus,
.svtvs .pcard__scores .svt-scoreclus__dial,
.svtvs .pcard__scores .svt-scoreclus__bars,
.svtvs .pcard__scores .svt-minibar,
.svtvs .pcard__scores .svt-minibar__row,
.svtvs .pcard__scores .svt-minibar__track {
flex: none;
padding: 0;
border: 0;
text-align: left;
opacity: 1;
}
.svtvs .pcard__scores .svt-scoreclus {
display: grid;
}
.svtvs .pcard__scores .svt-minibar__txt,
.svtvs .pcard__scores .svt-scoreclus__olab {
opacity: .5;
text-transform: uppercase;
letter-spacing: .04em;
font-size: 10.5px;
}
.svtvs .pcard__scores .svt-minibar__val,
.svtvs .pcard__scores .svt-minibar__fill {
opacity: 1;
text-transform: none;
letter-spacing: 0;
}
.svt-scoreclus__dial {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
flex: 0 0 auto;
}
.svt-scoreclus__olab {
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
opacity: .5;
}
.svt-scoreclus__bars {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.svt-minibar__lab {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
margin: 0 0 3px;
}
.svt-minibar__txt {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
font-size: 10.5px;
font-weight: 750;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .5;
}
.svtvs .svt-minibar__ico {
display: inline-block;
flex: 0 0 auto;
width: 13px;
height: 13px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.svtvs .svt-minibar__ico--usability {
-webkit-mask-image: url("svt-kit/icons/circle-check.svg?v=2");
mask-image: url("svt-kit/icons/circle-check.svg?v=2");
}
.svtvs .svt-minibar__ico--social {
-webkit-mask-image: url("svt-kit/icons/message-circle.svg?v=2");
mask-image: url("svt-kit/icons/message-circle.svg?v=2");
}
.svt-minibar__row {
display: block;
}
.svt-minibar__track {
height: 7px;
border-radius: 99px;
background: #EEEAE3;
overflow: hidden;
}
.svt-minibar__fill {
display: block;
height: 100%;
border-radius: 99px;
background: var(--ink, #12213B);
min-width: 0;
}
.svt-minibar--a .svt-minibar__fill { background: var(--a, #C8842B); }
.svt-minibar--b .svt-minibar__fill { background: var(--b, #4974C4); }
.svt-minibar__val {
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--ink, #12213B);
}
.svtvs .match__head {
align-items: center;
margin: 0 0 8px;
gap: 10px;
}
.svtvs .match__head h3 { font-size: 17px; }
.svtvs .match__lead {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.svtvs .match__caps { margin: 0 0 8px; }
.svtvs .match__caplab { margin: 6px 0 4px; }
.svtvs .capchips { gap: 5px; }
.svtvs .capchips li { padding: 3px 8px; font-size: 11.5px; }
.svtvs .cards { gap: 10px; margin: 10px 0 0; }
.svtvs .h2h__tabs { margin: 0 0 10px; gap: 6px; }
.svtvs .verdict.verdict-card {
padding: 22px 24px 24px;
margin-top: 48px;
}
.svtvs .verdict.verdict-card h3 { margin: 0 0 8px; font-size: 20px; }
.svtvs .verdict.verdict-card .verdict-card__leanrow {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 12px;
min-width: 0;
}
.svtvs .verdict.verdict-card .verdict-card__winlogo {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.svtvs .verdict.verdict-card .verdict-card__winlogo img {
display: block;
height: 52px;
width: auto;
max-width: 180px;
object-fit: contain;
object-position: left center;
}
.svtvs .verdict.verdict-card .verdict-card__leanstrip {
margin: 0;
padding: 7px 12px;
align-self: center;
}
.svtvs .verdict.verdict-card .verdict-card__leanrow--a .verdict-card__leanstrip {
background: var(--a, #C8842B);
color: #fff;
}
.svtvs .verdict.verdict-card .verdict-card__leanrow--b .verdict-card__leanstrip {
background: var(--b, #4974C4);
color: #fff;
}
.svtvs .verdict.verdict-card .verdict-card__trades { margin: 0 0 12px; gap: 10px; }
.svtvs .verdict.verdict-card .verdict-card__when { padding: 12px 14px; }
.svtvs .verdict.verdict-card .verdict-card__picks { margin: 0 0 12px; }
.svtvs .verdict.verdict-card.verdict-card--early {
margin-top: 24px;
padding: 18px 20px 16px;
}
.svtvs .verdict.verdict-card.verdict-card--early h3 { margin: 0 0 6px; font-size: 18px; }
.svtvs .verdict.verdict-card .verdict-card__close {
margin: -2px 0 12px;
font-size: 13.5px;
line-height: 1.4;
color: var(--body, #4A576B);
}
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__leanrow { margin: 0 0 16px; gap: 14px; }
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__winlogo img {
height: 56px;
max-width: 200px;
}
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__trades { margin: 0 0 10px; }
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__when { padding: 10px 12px; }
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__brands { margin: 0; }
.svtvs .srcnote__bullets {
color: var(--ink, #12213B);
}
.svtvs .srcnote__bullets li::before {
opacity: .7;
color: var(--ink, #12213B);
}
.svtvs .srcnote__text {
color: var(--ink, #12213B);
}
.svtvs .srcnote__prov {
color: var(--body, #4A576B);
}
.svtvs .panel.match { padding: 12px 14px; margin: 0 0 12px; }
.svtvs .match__head h3 { font-size: 16px; }
.svtvs .pcard__top { padding: 12px 12px 0; }
.svtvs .pcard__scores { margin: 8px 12px 0; }
.svtvs .pcard__pc { padding: 8px 12px 12px; }
.svtvs .critpanel .diffrows--grid { gap: 12px 14px; }
@media (min-width: 900px) {
.svtvs .critpanel .diffrows--grid { gap: 12px 14px; }
}
@media (max-width: 600px) {
.svtvs .diffbar {
grid-template-columns: minmax(0, 1fr) 2.2rem;
gap: 6px 8px;
}
.svtvs .diffbar__lab {
grid-column: 1 / -1;
max-width: none;
}
}
/* Hero smash lives on .vmid__dialwrap. Dial fill/numeral stay locked. */
.svtvs .vmid .svtdial { will-change: auto; }
.svtvs .versus .svtdial.svt-hero-dial {
--svt-ring-sz: 128px;
--sz: 128px;
width: 128px;
height: 128px;
flex: 0 0 128px;
}
.svtvs .versus .svtdial.svt-hero-dial.svtdial--a {
--svt-ring-fill: var(--a, var(--svt-brass, #C8842B));
}
.svtvs .versus .svtdial.svt-hero-dial.svtdial--b {
--svt-ring-fill: var(--b, var(--svt-click, #4974C4));
}
.svtvs .versus .svtdial.svt-hero-dial .inset .percentage,
.svtvs .versus .svtdial.svt-hero-dial .svt-score-num {
font-size: calc(var(--sz) * 0.44) !important;
font-weight: 800 !important;
letter-spacing: -0.03em;
line-height: 1 !important;
color: #fff !important;
}
.svtvs .versus .vscore { width: auto; }
@media (min-width: 901px) {
.svtvs .versus { grid-template-columns: 1fr auto 1fr; }
.svtvs .vmid {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
}
.svtvs .vmid .vscore,
.svtvs .vmid__badgewrap {
flex: 0 0 auto;
}
.svtvs .vmid__badgewrap {
position: relative;
top: auto;
left: auto;
transform: none;
margin: 0;
}
}
@media (max-width: 900px) {
.svtvs .versus .svtdial.svt-hero-dial {
--svt-ring-sz: var(--svtvs-dial, 116px);
--sz: var(--svt-ring-sz);
width: var(--sz);
height: var(--sz);
flex-basis: var(--sz);
}
}
@media (max-width: 560px) {
.svtvs .versus .svtdial.svt-hero-dial {
--svt-ring-sz: var(--svtvs-dial, 96px);
--sz: var(--svt-ring-sz);
}
}
/* Size tokens only. Paint, ticks, inset, and numeral live in svt-score-ring.css. */
.svtvs .svtdial .inset .percentage,
.svtvs .svtdial .inset .svt-score-num {
font-size: calc(var(--sz) * 0.44);
font-weight: 800;
line-height: 1;
padding: 0;
margin: 0;
color: #fff;
}
.svtvs .svtdial.svt-midial--card {
--svt-ring-sz: 100px;
--sz: 100px;
}
.svtvs .svt-scoreclus {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 20px;
row-gap: 6px;
align-items: center;
}
.svtvs .svt-scoreclus__dial { display: contents; }
.svtvs .svt-scoreclus__dial .svtdial {
grid-column: 1;
grid-row: 1;
align-self: center;
}
.svtvs .svt-scoreclus__olab {
grid-column: 1;
grid-row: 2;
justify-self: center;
margin: 0;
}
.svtvs .svt-scoreclus__bars {
grid-column: 2;
grid-row: 1;
align-self: center;
gap: 12px;
}
.svtvs .facts .svt-scoreclus { column-gap: 22px; }
.svtvs .pcard__scores .svt-minibar__txt,
.svtvs .pcard__scores .svt-scoreclus__olab,
.svtvs .facts .svt-minibar__txt,
.svtvs .facts .svt-scoreclus__olab,
.svtvs .pcard .svt-minibar__txt,
.svtvs .pcard .svt-scoreclus__olab {
opacity: .72;
color: var(--ink, #12213B);
}
/* Whole House: title · see all · shared | bars+leads cluster → tabs → cards */
.svtvs .panel.match {
padding: 18px 20px 20px;
margin: 0 0 20px;
}
.svtvs .match__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px 16px;
flex-wrap: wrap;
margin: 0 0 8px;
}
.svtvs .match__title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
min-width: 0;
flex: 0 1 auto;
}
.svtvs .match__head h3 {
font-size: 18px;
margin: 0;
min-width: 0;
}
.svtvs .match__see {
display: inline-flex;
align-items: center;
padding: 8px 14px;
background: var(--svt-page, #F2EEE6);
border: 1px solid var(--line, #E6E2DA);
border-radius: 14px;
color: var(--ink, #12213B);
font-size: 13px;
font-weight: 650;
line-height: 1.2;
text-decoration: none;
transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.svtvs .match__see:hover,
.svtvs .match__see:focus-visible {
color: var(--svt-click, #4974C4);
border-color: var(--svt-click, #4974C4);
background: #fff;
}
.svtvs .match__lead {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 28px;
flex: 0 0 auto;
margin-left: auto;
flex-wrap: wrap;
}
.svtvs .match__bars {
display: flex;
flex-direction: column;
gap: 7px;
width: 196px;
flex: 0 0 196px;
min-width: 0;
}
.svtvs .match__bar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
column-gap: 8px;
row-gap: 3px;
align-items: center;
}
.svtvs .match__lead .svt-minibar {
display: contents;
}
.svtvs .match__lead .svt-minibar__lab {
grid-column: 1 / -1;
margin: 0;
}
.svtvs .match__lead .svt-minibar__row {
grid-column: 1;
min-width: 0;
}
.svtvs .match__lead .svt-minibar__track {
height: 7px;
}
.svtvs .match__lead .match__n {
grid-column: 2;
grid-row: 2;
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
opacity: .55;
white-space: nowrap;
line-height: 1;
}
.svtvs .match__lead .winner {
flex: 0 0 auto;
align-self: center;
margin: 0;
}
@media (min-width: 769px) {
.svtvs .match__head {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.svtvs .match__title {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 20px;
flex: 1 1 auto;
min-width: 0;
}
.svtvs .match__head h3 {
grid-column: auto;
flex: 0 0 auto;
min-width: 0;
font-size: 18px;
line-height: 1.2;
padding-top: 0;
white-space: nowrap;
position: relative;
top: -29px;
}
.svtvs .match__see {
grid-column: auto;
flex: 0 0 auto;
padding: 7px 12px;
}
.svtvs .match__cov {
grid-column: auto;
flex: 0 0 auto;
}
.svtvs .match__cov summary {
white-space: nowrap;
}
.svtvs .match__see + .match__cov {
grid-column: auto;
justify-self: auto;
align-self: center;
}
.svtvs .match__lead {
flex-wrap: nowrap;
align-items: center;
gap: 20px;
margin-left: 0;
margin-top: 0;
justify-content: flex-end;
padding: 6px 14px 6px 10px;
background: var(--svt-page, #F2EEE6);
border-radius: 14px;
}
}
@media (max-width: 768px) {
.svtvs .match__lead {
width: 100%;
justify-content: flex-start;
align-items: flex-start;
margin-left: 0;
margin-right: 0;
margin-bottom: 14px;
text-align: left;
}
.svtvs .match__bars {
margin-left: 0;
margin-right: auto;
}
.svtvs .match__lead .winner {
margin-left: 0;
margin-right: 0;
}
}
.svtvs .match__cov {
margin: 0;
font-size: 13px;
color: var(--body, #4A576B);
}
.svtvs .match__cov summary {
cursor: pointer;
list-style: none;
width: fit-content;
max-width: 100%;
font-weight: 550;
opacity: .85;
color: inherit;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
text-underline-offset: 3px;
transition: color .16s ease, text-decoration-color .16s ease, opacity .16s ease;
}
.svtvs .match__cov summary::-webkit-details-marker,
.svtvs .match__cov summary::marker { display: none; content: none; }
.svtvs .match__cov summary:hover,
.svtvs .match__cov summary:focus-visible {
opacity: 1;
color: var(--svt-click, #4974C4);
text-decoration-color: currentColor;
outline: none;
}
.svtvs .match__cov[open] summary {
opacity: 1;
color: var(--svt-click, #4974C4);
text-decoration-color: currentColor;
}
.svtvs .match__cov p {
margin: 6px 0 0;
font-size: 12.5px;
line-height: 1.4;
opacity: .75;
max-width: 62ch;
}
.svtvs .match__caps,
.svtvs .match__caplab,
.svtvs .capchips { display: none !important; }
.svtvs .h2h__tabs {
margin: 10px 0 12px;
gap: 8px;
border-bottom: none;
}
.svtvs .cards {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto repeat(4, 1fr);
column-gap: 22px;
row-gap: 0;
margin: 0;
align-items: stretch;
}
.svtvs .pcard {
display: grid;
grid-template-rows: subgrid;
grid-row: span 7;
min-height: 0;
border: 1px solid var(--line, #E6E2DA);
border-left-width: 3px;
overflow: hidden;
}
.svtvs .pcard--a,
.svtvs .pcard--b {
background: var(--svt-page, #F2EEE6);
border-color: var(--line, #E6E2DA);
}
.svtvs .pcard--a { border-left-color: var(--a); }
.svtvs .pcard--b { border-left-color: var(--b); }
@media (max-width: 820px) {
.svtvs .cards {
grid-template-columns: 1fr;
grid-template-rows: none;
row-gap: 16px;
gap: 16px;
}
.svtvs .pcard {
display: block;
grid-row: auto;
}
.svtvs .pcard__pc {
display: grid;
padding: 8px 16px 14px;
gap: 4px;
height: auto;
align-content: start;
}
.svtvs .pcard__pc .pc {
padding: 0;
}
}
.svtvs .pcard--a .pcard__img,
.svtvs .pcard--b .pcard__img { background: transparent; }
.svtvs .pcard__scores,
.svtvs .pcard__scores div {
border: 0;
background: transparent;
padding: 0;
text-align: left;
}
.svtvs .pcard__scores {
margin: 8px 16px 0;
}
.svtvs .pcard .svt-minibar__val,
.svtvs .facts .svt-minibar__val {
font-size: 13px;
font-weight: 800;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.svtvs .pcard__scores .svt-scoreclus {
padding: 0;
}
.svtvs .svt-minibar__track,
.svtvs .pcard__scores .svt-minibar__track,
.svtvs .facts .svt-minibar__track {
display: block;
width: 100%;
min-width: 0;
flex: 1 1 auto;
height: 8px;
border-radius: 99px;
background: color-mix(in srgb, var(--ink, #12213B) 18%, var(--svt-page, #F2EEE6)) !important;
overflow: hidden;
}
.svtvs .svt-minibar__fill,
.svtvs .pcard__scores .svt-minibar__fill {
display: block;
height: 100%;
width: 0;
max-width: 100%;
border-radius: 99px;
}
.svtvs:not(.svtvs--js) .svt-minibar__fill,
.svtvs .is-in .svt-minibar__fill {
width: var(--svt-bar-w, 0%);
}
.svtvs.svtvs--js .is-in .svt-minibar__fill {
transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.svtvs.svtvs--js .is-in .svt-minibar--b .svt-minibar__fill,
.svtvs.svtvs--js .is-in .match__bar--b .svt-minibar__fill {
transition-delay: 70ms;
}
.svtvs.svtvs--js .is-in .svt-scoreclus__bars .svt-minibar:nth-child(2) .svt-minibar__fill {
transition-delay: 45ms;
}
.svtvs.svtvs--js .is-in .svt-scoreclus--b .svt-scoreclus__bars .svt-minibar:nth-child(2) .svt-minibar__fill {
transition-delay: 115ms;
}
@media (prefers-reduced-motion: reduce) {
.svtvs .svt-minibar__fill,
.svtvs .pcard__scores .svt-minibar__fill {
width: var(--svt-bar-w, 0%);
transition: none;
}
}
.svtvs .pcard h4 {
margin: 0;
overflow: visible;
display: block;
-webkit-line-clamp: unset;
}
.svtvs .pcard h4 a.svt-title-link {
display: block;
color: inherit;
text-decoration: none;
}
.svtvs .pcard h4 a.svt-title-link:hover .svt-title-rest {
text-decoration: underline;
}
.svtvs .pcard .svt-title-brand,
.svtvs .pcard .svt-title-rest {
display: block;
}
.svtvs .pcard .svt-title-brand {
font-size: 20px;
font-weight: 800;
line-height: 1.15;
margin: 0 0 4px;
}
.svtvs .pcard--a .svt-title-brand { color: var(--a, #C8842B); }
.svtvs .pcard--b .svt-title-brand { color: var(--b, #4974C4); }
.svtvs .pcard .svt-title-rest {
font-weight: 500;
font-size: 0.92em;
line-height: 1.3;
color: var(--ink, #12213B);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.svtvs .pcard__top {
align-items: stretch;
}
.svtvs .pcard__img {
align-self: start;
}
.svtvs .pcard__top > div:not(.pcard__img) {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1 auto;
min-width: 0;
}
.svtvs .pcard__sku,
.svtvs .pcard h4 {
align-self: stretch;
width: 100%;
}
.svtvs .pcard__deal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
margin-top: 8px;
padding-right: 16px;
box-sizing: border-box;
}
.svtvs .pcard__price {
margin: 0;
align-self: auto;
max-width: none;
text-align: left;
line-height: 1;
}
.svtvs .pcard__buy.svt-buy-now,
.svtvs .pcard a.pcard__buy {
align-self: auto;
max-width: 100%;
width: auto;
flex: 0 0 auto;
}
.svtvs .pcard__buy.svt-buy-now,
.svtvs .pcard a.pcard__buy {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0 16px;
height: 36px;
min-height: 36px;
box-sizing: border-box;
border: 1px solid var(--svt-cta, #E2670F);
border-radius: 3px;
background: var(--svt-cta, #E2670F);
color: var(--svt-cta-text, #3A1F03);
font-size: 12px;
font-weight: 700;
letter-spacing: .03em;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
box-shadow: none;
outline: none;
transition: background .15s ease, border-color .15s ease;
}
.svtvs .pcard__buy.svt-buy-now::before,
.svtvs .pcard a.pcard__buy::before {
content: none;
display: none;
}
.svtvs .pcard__buy.svt-buy-now .svt-buy-now__label {
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
.svtvs .pcard__buy.svt-buy-now:hover,
.svtvs .pcard__buy.svt-buy-now:focus,
.svtvs .pcard__buy.svt-buy-now:focus-visible,
.svtvs .pcard__buy.svt-buy-now:active,
.svtvs .pcard a.pcard__buy:hover,
.svtvs .pcard a.pcard__buy:focus,
.svtvs .pcard a.pcard__buy:focus-visible,
.svtvs .pcard a.pcard__buy:active {
background: var(--svt-cta-deep, #B56815);
border-color: var(--svt-slate, #79746A);
color: var(--svt-cta-text, #3A1F03);
}
.svtvs .pcard .svt-rank--compact {
margin: -6px 16px 0;
padding-left: 0;
box-sizing: border-box;
opacity: 1;
font-size: 12px;
text-align: right;
color: var(--ink, #12213B);
}
.svtvs .pcard--a .svt-rank strong { color: var(--a, #C8842B); }
.svtvs .pcard--b .svt-rank strong { color: var(--b, #4974C4); }
.svtvs .pcard .svt-rank--compact a.svt-rank__cat {
color: var(--ink, #12213B);
}
.svtvs .pcard__pc {
display: contents;
}
.svtvs .pcard__pc .pc {
padding: 4px 16px;
align-self: start;
align-items: flex-start;
}
.svtvs .pcard__pc .pc:first-child {
padding-top: 8px;
}
.svtvs .pcard__pc .pc:last-child {
padding-bottom: 14px;
}
.svtvs .pcard__pc .pc span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 820px) {
.svtvs .pcard__pc {
display: grid;
padding: 8px 16px 18px;
gap: 4px;
height: auto;
align-content: start;
}
.svtvs .pcard__pc .pc {
padding: 0;
}
}
/* Desktop Brand VS: face the mid, one stack axis per side. */
@media (min-width: 901px) {
.svtvs .vside {
--vside-stack: 300px;
--vhero-disc: 280px;
--vhero-inset: calc((var(--vside-stack) - var(--vhero-disc)) / 2);
}
.svtvs .vside--a {
align-items: flex-end;
text-align: right;
}
.svtvs .vside--b {
align-items: flex-start;
text-align: left;
}
.svtvs .vside--a .vrule { margin-left: auto; margin-right: var(--vhero-inset); }
.svtvs .vside--b .vrule { margin-left: var(--vhero-inset); margin-right: auto; }
.svtvs .vside--a .blogo-link { margin-left: auto; margin-right: var(--vhero-inset); margin-bottom: 14px; }
.svtvs .vside--b .blogo-link { margin-left: var(--vhero-inset); margin-right: auto; margin-bottom: 14px; }
.svtvs .vside--a .blink { margin-right: var(--vhero-inset); margin-bottom: 14px; }
.svtvs .vside--b .blink { margin-left: var(--vhero-inset); margin-bottom: 14px; }
.svtvs .vside--a .blogo { object-position: right center; }
.svtvs .vside--b .blogo { object-position: left center; }
.svtvs .vside h2,
.svtvs .vside .cat,
.svtvs .vside .vhero {
width: 100%;
max-width: var(--vside-stack);
}
.svtvs .vside .vhero { justify-content: center; height: var(--vhero-disc); }
.svtvs .vhero__img img { max-width: 250px; max-height: 260px; }
.svtvs .vhero__disc { width: var(--vhero-disc); height: var(--vhero-disc); }
.svtvs .vfeat { gap: 11px; }
.svtvs .vfeat li {
display: flex;
gap: 10px;
align-items: flex-start;
}
.svtvs .vfeat svg {
flex: 0 0 22px;
width: 22px;
height: 22px;
margin-top: 0;
}
.svtvs .vfeat span { flex: 0 0 auto; white-space: nowrap; }
.svtvs .vside--a .vfeat {
padding-right: var(--vhero-inset);
box-sizing: border-box;
}
.svtvs .vside--b .vfeat {
padding-left: var(--vhero-inset);
box-sizing: border-box;
}
.svtvs .vside--a .vfeat li {
flex-direction: row;
justify-content: flex-end;
text-align: right;
}
.svtvs .vside--b .vfeat li {
flex-direction: row-reverse;
justify-content: flex-end;
text-align: left;
}
.svtvs .vside--a h2,
.svtvs .vside--a .cat {
text-align: right;
padding-right: var(--vhero-inset);
padding-left: 0;
box-sizing: border-box;
}
.svtvs .vside--b h2,
.svtvs .vside--b .cat {
text-align: left;
padding-left: var(--vhero-inset);
padding-right: 0;
box-sizing: border-box;
}
.svtvs .vside--a h2,
.svtvs .vside--b h2 {
margin-top: 14px;
margin-bottom: 10px;
}
}
@media (max-width: 900px) {
.svtvs .vmid {
flex-direction: row;
align-items: flex-start;
justify-content: center;
}
.svtvs .vside--a,
.svtvs .vside--b {
align-items: flex-start;
text-align: left;
}
.svtvs .vside--a .vrule,
.svtvs .vside--b .vrule { margin-left: 0; margin-right: 0; }
.svtvs .vside--a .blogo-link,
.svtvs .vside--b .blogo-link { margin-left: 0; margin-right: 0; }
.svtvs .vside--a .blogo,
.svtvs .vside--b .blogo { object-position: left center; }
.svtvs .vside .vfeat li,
.svtvs .vside--b .vfeat li {
flex-direction: row;
text-align: left;
}
}
@media (max-width: 560px) {
.svtvs .vmid {
flex-direction: row;
align-items: flex-start;
justify-content: center;
}
.svtvs .vside,
.svtvs .vside--a,
.svtvs .vside--b { align-items: center; text-align: center; }
.svtvs .vside .vrule,
.svtvs .vside--a .vrule,
.svtvs .vside--b .vrule { margin-left: auto; margin-right: auto; }
.svtvs .blogo-link,
.svtvs .vside--a .blogo-link,
.svtvs .vside--b .blogo-link { margin-left: auto; margin-right: auto; }
.svtvs .blogo,
.svtvs .vside--a .blogo,
.svtvs .vside--b .blogo { object-position: center; }
}
.svtvs .verdict.verdict-card .verdict-card__leanrow {
align-items: center;
}
@media (min-width: 901px) {
.svtvs .verdict.verdict-card h3,
.svtvs .verdict.verdict-card.verdict-card--early h3 {
padding-left: 12px;
margin-bottom: 2px;
}
.svtvs .verdict.verdict-card .verdict-card__leanrow,
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__leanrow {
justify-content: center;
margin-top: 0;
margin-bottom: 20px;
padding-top: 0;
padding-bottom: 4px;
padding-left: 0;
}
.svtvs .verdict.verdict-card .verdict-card__brands,
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__brands {
margin-top: 12px;
margin-bottom: 8px;
padding-top: 4px;
padding-bottom: 4px;
}
.svtvs .versus__cap {
max-width: none;
white-space: nowrap;
}
.svtvs .pcard .svt-title-rest {
min-height: calc(1.3em * 2);
}
.svtvs .pcard__top > div:not(.pcard__img) {
min-height: 96px;
}
.svtvs .pcard__deal {
margin-top: auto;
padding-top: 8px;
}
.svtvs .pcard__price {
font-size: 18px;
font-weight: 800;
line-height: 1.1;
}
}
.svtvs .verdict.verdict-card .verdict-card__trades {
align-items: stretch;
}
.svtvs .verdict.verdict-card .verdict-card__when {
height: 100%;
box-sizing: border-box;
}
.svtvs .facts__grid {
align-items: stretch;
grid-auto-rows: 1fr;
}
.svtvs .ftile {
height: 100%;
box-sizing: border-box;
}
.svtvs .svt-scoreclus,
.svtvs .pcard__scores .svt-scoreclus,
.svtvs .facts .svt-scoreclus {
align-items: center;
}
.svtvs .svt-scoreclus__bars,
.svtvs .pcard__scores .svt-scoreclus__bars,
.svtvs .facts .svt-scoreclus__bars {
align-self: center;
justify-content: center;
}
/* Brand VS hero — mobile 2-col A|B strip under the dials.
Existing ≤900 / ≤560 rules stack A then B. This block is last so the
grid wins without touching dial tokens, smash, or ≥901 desktop. */
@media (max-width: 900px) {
.svtvs .hero {
padding-bottom: 0;
}
.svtvs .sub {
margin-bottom: 0;
}
.svtvs .versus {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 10px;
row-gap: 0;
align-items: stretch;
gap: 0 10px;
margin-top: 12px;
}
.svtvs .vmid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-column: 1 / -1;
grid-row: 1;
order: -1;
width: 100%;
max-width: none;
min-width: 0;
margin-top: 0;
margin-bottom: 14px;
position: relative;
align-items: start;
justify-content: initial;
justify-self: stretch;
gap: 0 10px;
zoom: 1;
}
.svtvs .vscore,
.svtvs .vscore--a,
.svtvs .vscore--b {
width: 100%;
max-width: none;
flex: none;
align-items: center;
}
.svtvs .vscore--a {
grid-column: 1;
grid-row: 1;
justify-self: stretch;
}
.svtvs .vscore--b {
grid-column: 2;
grid-row: 1;
justify-self: stretch;
}
.svtvs .vmid__badgewrap {
grid-column: 1 / -1;
grid-row: 1;
position: absolute;
left: 50%;
right: auto;
z-index: 5;
margin: 0;
}
.svtvs .vside,
.svtvs .vside--a,
.svtvs .vside--b {
min-width: 0;
align-items: stretch;
text-align: left;
padding: 12px;
border: 1px solid var(--line, #E6E2DA);
border-radius: 12px;
background: var(--card, #fff);
box-sizing: border-box;
height: auto;
}
.svtvs .vside--a {
grid-column: 1;
grid-row: 2 / span 9;
}
.svtvs .vside--b {
grid-column: 2;
grid-row: 2 / span 9;
}
.svtvs .vside,
.svtvs .vside--a,
.svtvs .vside--b {
display: grid;
grid-template-rows: subgrid;
align-content: start;
row-gap: 8px;
}
.svtvs .vside--b {
border-top: 1px solid var(--line, #E6E2DA);
margin-top: 0;
padding-top: 12px;
}
.svtvs .vside .vrule,
.svtvs .vside--a .vrule,
.svtvs .vside--b .vrule {
width: 100%;
max-width: 100%;
margin: 0;
margin-left: 0;
margin-right: 0;
align-self: start;
justify-self: stretch;
box-sizing: border-box;
}
.svtvs .vside .blogo-link,
.svtvs .vside--a .blogo-link,
.svtvs .vside--b .blogo-link,
.svtvs .vside > img.blogo,
.svtvs .vside--a > img.blogo,
.svtvs .vside--b > img.blogo,
.svtvs .vside .blogo,
.svtvs .vside--a .blogo,
.svtvs .vside--b .blogo {
display: none;
}
.svtvs .vside .blink,
.svtvs .vside--a .blink,
.svtvs .vside--b .blink {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
font-size: 11px;
font-weight: 700;
padding: 6px 5px 6px 8px;
margin: 0;
width: 100%;
max-width: 100%;
min-width: 0;
align-self: stretch;
justify-self: stretch;
height: auto;
white-space: normal;
line-height: 1.25;
gap: 2px;
border-radius: 10px;
border: 1.5px solid var(--line, #E6E2DA);
background: var(--card, #fff);
color: var(--ink, #12213B);
box-sizing: border-box;
overflow: hidden;
}
.svtvs .vside .blink__all {
display: none;
}
.svtvs .vside .blink__txt {
flex: 1 1 auto;
min-width: 0;
}
.svtvs .vside .blink svg {
width: 12px;
height: 12px;
flex: 0 0 12px;
margin-left: auto;
align-self: center;
}
.svtvs .vside .vhero,
.svtvs .vside--a .vhero,
.svtvs .vside--b .vhero {
display: flex;
align-items: center;
justify-content: center;
justify-self: stretch;
align-self: start;
height: 155px;
margin: 0 auto;
width: 100%;
max-width: none;
box-sizing: border-box;
}
.svtvs .vside .vhero__disc,
.svtvs .vside--a .vhero__disc,
.svtvs .vside--b .vhero__disc {
width: 148px;
height: 148px;
top: 50%;
left: 50%;
right: auto;
margin: 0;
transform: translate(-50%, -50%);
}
.svtvs .vside .vhero__img {
margin: 0 auto;
}
.svtvs .vhero__img img {
max-width: 128px;
max-height: 140px;
margin: 0 auto;
}
.svtvs .vside h2 {
font-size: 16px;
line-height: 1.25;
margin: 0;
width: 100%;
max-width: none;
padding: 0;
text-align: left;
align-self: start;
}
.svtvs .vside .cat {
font-size: 12px;
line-height: 1.35;
margin: 0;
width: 100%;
max-width: none;
padding: 0;
text-align: left;
}
.svtvs .vfeat {
display: contents;
}
.svtvs .vfeat li,
.svtvs .vside .vfeat li,
.svtvs .vside--b .vfeat li {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
gap: 8px;
font-size: 12.5px;
line-height: 1.35;
margin: 0;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
overflow: hidden;
}
.svtvs .vfeat span {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.svtvs .vfeat svg {
flex: 0 0 18px;
width: 18px;
height: 18px;
margin-top: 1px;
}
.svtvs .verdict.verdict-card .verdict-card__leanrow,
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__leanrow {
flex-direction: column;
align-items: center;
gap: 10px;
padding-top: 12px;
margin-top: 0;
margin-bottom: 14px;
}
.svtvs .verdict.verdict-card .verdict-card__winlogo,
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__winlogo {
flex: 0 0 auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.svtvs .verdict.verdict-card .verdict-card__winlogo img,
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__winlogo img {
height: 44px;
max-width: 180px;
margin-left: auto;
margin-right: auto;
object-position: center;
}
.svtvs .verdict.verdict-card .verdict-card__leanstrip,
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__leanstrip {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
align-self: center;
white-space: nowrap;
font-size: 13.5px;
line-height: 1.25;
padding: 8px 12px;
max-width: 100%;
box-sizing: border-box;
}
.svtvs .sec {
margin-top: 32px;
}
}
@media (max-width: 768px) {
.svtvs .match__lead {
width: 100%;
justify-content: center;
align-items: center;
margin-left: 0;
margin-right: 0;
margin-bottom: 14px;
text-align: center;
}
.svtvs .match__title {
width: 100%;
align-items: center;
text-align: center;
}
.svtvs .match__see {
margin-left: 0;
}
.svtvs .match__bars {
margin-left: auto;
margin-right: auto;
}
.svtvs .match__lead .winner {
margin-left: auto;
margin-right: auto;
}
.svtvs .match__head h3 {
align-self: flex-start;
padding-left: 0;
padding-bottom: 8px;
text-align: left;
}
.svtvs .match__title .match__cov {
margin-left: 0;
}
}
/* Keep fingerprint class present for the CSS guard. */
/* .trophy */
/* ==========================================================================
SVT VS — PORTABILITY AND PALETTE PASS, 2026-09-15
--------------------------------------------------------------------------
Appended on purpose. Every rule here overrides an earlier one of equal
specificity by source order, so nothing above this line is edited and
deleting this block restores the previous behaviour exactly.
MEASURED, NOT GUESSED. The rendered page was re-measured with the brand and
category names lengthened to "SpringWell Water Filtration Systems",
"Aquasana Home Water Filters Intl" and "Whole House Reverse Osmosis &
Softening". Baseline overflow at 1280px and at 375px was ZERO containers.
Under the long names it was three, listed against their fixes below. After
these rules it is zero again at both widths.
This matters because every one of those strings is category- or
brand-supplied. The template is about to carry twenty pages and then a
second category; the next brand name is not this brand name.
========================================================================== */
/* 1. THE CATEGORY TITLE ROW. Above 769px it is flex-flow:row with
flex-wrap:nowrap, holding a category name, a "See all" link and the
coverage summary — three category-supplied strings side by side. The
summary was additionally white-space:nowrap. Long names pushed
.match__cov 705px and .match__see 368px outside the row, over the score
box beside it. Letting the row wrap is the whole fix; the two support
rules stop the summary from refusing to break. */
@media (min-width: 769px) {
.svtvs .match__title { flex-wrap: wrap; }
.svtvs .match__cov { min-width: 0; }
.svtvs .match__cov summary { white-space: normal; }
}
/* 2. THE CRITERION GAP PILL carries a brand name — "+7.0 SpringWell" — and was
white-space:nowrap with flex:0 0 auto, so it could neither wrap nor
shrink. 37px outside .diffrow__head at 375px. */
.svtvs .diffrow__head { flex-wrap: wrap; }
.svtvs .diffrow__gap {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
/* 3. THE LEADS BADGE is a brand name set uppercase with letter-spacing, inside
an inline-flex pill at flex:0 0 auto. 9px outside .match__lead at 375px. */
.svtvs .winner {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
}
/* 4. PALETTE. The pro and con icons at lines 186-187 were the only two
hard-coded hex values left in this component, and neither is in the
design system: #2E9E6B is a bright emerald and #D2544B a coral, both
sitting inside a warm palette built on brass #C8842B, ink #26231E and
page #F2EEE6. --svt-pro and --svt-con exist for exactly this pair, so
the icons now follow the theme instead of standing outside it. */
.svtvs .pc--y svg { color: var(--svt-pro, #5F7D5A); }
.svtvs .pc--n svg { color: var(--svt-con, #A35D55); }
/* end SVT VS portability and palette pass */
/* ==========================================================================
SVT VS - SHAPE AND SPACING PASS, 2026-09-16
--------------------------------------------------------------------------
Appended, like the pass above it; nothing earlier is edited and deleting
this block restores the previous rendering.
Michael, 2026-09-16: no heavily rounded pills. Cards and panels keep their
radius; small controls take 8px, which is the Best / Second / Third tabs he
picked out as right. Track and fill bars stay round - they are bars, not
controls.
========================================================================== */
/* 1. RADIUS */
.svtvs .blink,
.svtvs .vside .blink,
.svtvs .vside--a .blink,
.svtvs .vside--b .blink { border-radius: 8px; }
.svtvs .winner { border-radius: 8px; }
.svtvs .diffrow__gap,
.svtvs .critpanel .diffrow__gap { border-radius: 8px; }
.svtvs .capchips li { border-radius: 6px; }
.svtvs .verdict.verdict-card .verdict-card__leanstrip,
.svtvs .verdict.verdict-card.verdict-card--early .verdict-card__leanstrip { border-radius: 8px; }
.svtvs .match__lead { border-radius: 10px; }
/* 2. CATEGORY BLOCK HEADER, DESKTOP. The heading was lifted 29px with
position:relative, which put it against the panel's top edge, and the
"See all" link sat under it as a lone pill. Now: the heading on its own
line at the panel's padding, the catalogue link and the coverage summary
on one line beneath it, the score box to the right. */
@media (min-width: 769px) {
.svtvs .panel.match { padding-top: 22px; }
.svtvs .match__head {
align-items: flex-start;
margin: 0 0 12px;
}
.svtvs .match__title {
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 20px;
}
.svtvs .match__head h3 {
position: static;
top: auto;
flex: 0 0 100%;
white-space: normal;
font-size: 20px;
}
}
/* The catalogue exit is a text link at every width. */
.svtvs .match__see,
.svtvs .match__see:hover,
.svtvs .match__see:focus-visible {
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.svtvs .match__see {
color: var(--svt-click, #4974C4);
font-weight: 600;
}
.svtvs .match__see::after {
content: "\2192";
margin-left: 6px;
}
.svtvs .match__see:hover,
.svtvs .match__see:focus-visible {
color: var(--svt-click-deep, #3A5FA3);
text-decoration: underline;
}
/* 3. BRAND LOGO OPTICAL SIZE. Every brand logo carries --svt-logo-k, measured
from its own pixels (svt-vs-cards.php). A compact mark such as iSpring's
filled about half the area a wordmark did in the same box. The scale property
changes paint only, so every box keeps its height. The origin follows
each logo's object-position so a left-aligned logo grows from its left
edge. Wordmarks carry no factor and do not move. */
.svtvs img.svt-brandlogo { scale: var(--svt-logo-k, 1); }
.svtvs .facts__t img { transform-origin: left center; }
/* The fact-card header is a 120x28 box, wider than any other, so a compact
mark loses most there; it takes the factor squared. Wordmarks are 1 either way. */
.svtvs .facts__t img.svt-brandlogo { scale: calc(var(--svt-logo-k, 1) * var(--svt-logo-k, 1)); }
@media (min-width: 901px) {
.svtvs .vside--a .blogo { transform-origin: right center; }
.svtvs .vside--b .blogo { transform-origin: left center; }
.svtvs .verdict.verdict-card .verdict-card__winlogo img { transform-origin: left center; }
}
/* end SVT VS shape and spacing pass */
/* LOGO KNOCKOUT, 2026-09-16. The fact-card header logo is painted white by
the #svt-logo-knockout filter (svt-vs-cards.php, printed in the footer)
instead of brightness(0) invert(1), so opaque white counters inside a logo
show the header colour rather than filling in. */
.svtvs .facts__t img { filter: url(#svt-logo-knockout); }
/* The verdict logo stands alone beside its lean strip, so it has nothing to
be balanced against, and scaled it ran into the strip (US Water at 1.24,
Live 2026-09-16). It renders at its box size. */
.svtvs .verdict.verdict-card .verdict-card__winlogo img.svt-brandlogo { scale: none; }
/* ============================================================
SVT VS pass 3 (2026-09-16): aligned bars, owner-report grid,
hero breathing room, collapsible category blocks on mobile.
============================================================ */
/* BARS START AT ONE X, AFTER BOTH NAMES. The label column was sized per row
(auto, capped at 7.2em), so each bar started wherever its own name ended and
long names were cut to "US Water Sys...". The two rows of a pair now share
one grid: the label column is as wide as the longer name, capped at 42% of
the row, and a name longer than that wraps to a second line rather than
squeezing the bar. At 600px and below the name already sits above its bar. */
@media (min-width: 601px) {
.svtvs .diffrow__bars {
display: grid;
grid-template-columns: fit-content(42%) minmax(0, 1fr) auto;
align-items: center;
column-gap: 10px;
row-gap: 5px;
}
.svtvs .diffrow__bars > .diffbar { display: contents; }
.svtvs .diffrow__bars .diffbar__lab {
display: flex;
align-items: center;
min-height: 24px;
max-width: none;
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: break-word;
line-height: 1.25;
}
.svtvs .diffrow__bars .diffbar__val { min-width: 2.2em; }
}
/* OWNER REPORTS USE THE CRITERIA LAYOUT: cards, two across from 900px. An odd
last card is centred on its own row at one column's width, in either grid. */
.svtvs .critpanel--pools .srcnote__sides { grid-template-columns: 1fr; }
.svtvs .critpanel--pools .diffrow__note { font-size: 13px; }
@media (min-width: 900px) {
.svtvs .critpanel .diffrows--grid > .diffrow:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - 7px);
}
}
/* HERO: room above the logos and under the dials once the hero stacks. */
@media (max-width: 900px) {
.svtvs .versus { margin-top: 24px; }
.svtvs .vmid { margin-bottom: 26px; --svtvs-gap: 12px; }
}
/* CATEGORY BLOCKS COLLAPSE ON MOBILE, OPEN BY DEFAULT. The toggle is hidden
until the page script runs, and it does nothing above 768px. Closed, a block
keeps its heading, bars and lead, and drops the product cards. */
.svtvs .match__toggle { display: none; }
@media (max-width: 768px) {
.svtvs .panel.match { position: relative; }
.svtvs .match__toggle:not([hidden]) {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--line, #E6E2DA);
border-radius: 8px;
background: #fff;
color: var(--ink, #12213B);
cursor: pointer;
}
.svtvs .match__toggle::before {
content: "";
width: 8px;
height: 8px;
margin-top: 4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(225deg);
transition: transform .2s ease, margin .2s ease;
}
.svtvs .match.is-shut .match__toggle::before { transform: rotate(45deg); margin-top: -4px; }
.svtvs .match--tog .match__title { padding-right: 40px; }
.svtvs .match.is-shut .match__body { display: none; }
.svtvs .match.is-shut .match__head { margin-bottom: 0; }
.svtvs .match.is-shut .match__lead { margin-bottom: 0; }
}
/* end SVT VS pass 3 */
/* SVT VS pass 4, 2026-09-16 */
/* SECTION HEADINGS USE THE SECTION'S WIDTH. The header was capped at 660px,
which broke "What and owners report" onto two lines with
room to spare. The intro lines keep the 660px measure; a heading that
still wraps is balanced. */
.svtvs .sec>header { max-width: none; }
.svtvs .sec>header h2 { text-wrap: balance; }
.svtvs .sec>header p { max-width: 660px; margin-left: auto; margin-right: auto; }
/* HERO LOGOS CLEAR THE DIALS ON A PHONE. A logo scaled by --svt-logo-k grows
from its centre, so its paint reached to within 2px of the dial. It now
grows upward from its bottom edge, and the gap is 16px for every logo. */
@media (max-width: 900px) {
.svtvs .versus { margin-top: 28px; }
.svtvs .vmid { --svtvs-gap: 16px; }
.svtvs .vscore__logo { transform-origin: center bottom; }
}
/* end SVT VS pass 4 */
/* SVT VS pass 6, 2026-09-16 */
/* THE VS BADGE CENTRES ON THE DIALS AT TABLET WIDTHS TOO. Between 561 and
900px the dials sit side by side in the two-column hero, but the badge's
centring rule only covered 560px and below: a later rule made it absolute
without a top or a transform, so it sat at the top of the row, level with
the logos and 32px right of centre. The logo-to-dial gap in that range was
9px while --svtvs-gap said 16, so both now read the variable. */
@media (min-width: 561px) and (max-width: 900px) {
.svtvs .vmid .vscore { gap: var(--svtvs-gap); }
.svtvs .vmid .vmid__badgewrap {
top: calc(var(--svtvs-logo-h, 44px) + var(--svtvs-gap, 16px) + var(--svtvs-dial, 116px) / 2);
transform: translate(-50%, -50%);
}
}
/* end SVT VS pass 6 */
/* SVT VS pass 6b, 2026-09-16 */
/* SECTION HEADINGS AND INTROS FILL THEIR LINES ON A PHONE. Balanced wrapping
split "What only Waterdrop sells - and only Berkey" into two half-width
lines, and the intro under "owners report" left "source." alone on its last
line. On a phone the first line now runs full width, and pretty wrapping
keeps a single word off the last line. Wider screens stay balanced. */
@media (max-width: 767px) {
.svtvs .sec>header h2,
.svtvs .sec>header p { text-wrap: pretty; }
}
/* "category by category" is one unbreakable piece. The heading stays on one
line when it fits; when it does not, the phrase moves to the next line
whole. Plain wrapping, because balanced or pretty wrapping would move
words from the brand pair down beside it. */
.svtvs .sec>header h2:has(.sec__h2line) { text-wrap: wrap; }
.svtvs .sec>header h2 .sec__h2line { display: inline-block; white-space: nowrap; }
/* end SVT VS pass 6b */
/* SVT VS pass 6e, 2026-09-16 */
/* BARS HAVE 3PX CORNERS. Michael: the bars read as pills. Every track and fill
on the page (criteria, owner reports, product-card and match minibars) takes
3px instead of a full round end. */
.svtvs .trk,
.svtvs .prow .trk,
.svtvs .diffbar__track,
.svtvs .diffbar__fill,
.svtvs .evid__track,
.svtvs .evid__track i,
.svt-minibar__track,
.svt-minibar__fill,
.svtvs .svt-minibar__track,
.svtvs .pcard__scores .svt-minibar__track,
.svtvs .facts .svt-minibar__track,
.svtvs .match__lead .svt-minibar__track,
.svtvs .svt-minibar__fill,
.svtvs .pcard__scores .svt-minibar__fill { border-radius: 3px; }
/* end SVT VS pass 6e */
/* SVT VS pass 6h, 2026-09-16 (Roadmap 1a, Content Standards 1.47-1.48). Appended, not edited in place.
1. Verdict reasons: the statement and its numbers set apart. Shared with product pages. */
/* SVT — verdict reasons, statement and numbers set apart. Shared by brand and product pages
(a patch to svt-vs.css). The criterion is bold ink; the numbers sit right in mono, the
picked side's number in its colour, the other muted after "vs"; a note wraps under both. */
.svtvs .verdict-card__when .verdict-card__why {
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: baseline;
margin: 0; padding: 7px 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
line-height: 1.4;
}
.svtvs .verdict-card__when .verdict-card__kicker + .verdict-card__why { border-top: 0; padding-top: 2px; }
.svtvs .verdict-card__crit { min-width: 0; }
.svtvs .verdict-card__crit b { font-weight: 700; color: var(--ink, #12213B); }
.svtvs .verdict-card__nums {
font-family: var(--svt-font-mono); font-size: 13px; white-space: nowrap; color: #7A7368;
display: inline-flex; align-items: baseline; gap: 5px;
}
.svtvs .verdict-card__nums b { font-weight: 600; font-size: 15px; }
.svtvs .verdict-card__when--a .verdict-card__nums b { color: var(--a, #C8842B); }
.svtvs .verdict-card__when--b .verdict-card__nums b { color: var(--b, #4974C4); }
.svtvs .verdict-card__nums i { font-style: normal; font-family: var(--svt-font-sans); font-size: 11px; }
.svtvs .verdict-card__note { grid-column: 1 / -1; font-size: 12.5px; color: #7A7368; }
/* Inside an alternative card */
.svtvs .pvp-why { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; font-size: 13px; }
.svtvs .pvp-alt--a .verdict-card__nums b { color: var(--a, #C8842B); }
.svtvs .pvp-alt--b .verdict-card__nums b { color: var(--b, #4974C4); }
/* Radius follows size (settled 2026-09-16): about a quarter of the height at most, so a small
element never reads as a pill. Chips about 24px tall take 4px; controls about 36px take 8px; cards take 12px. */
.svtvs .diffrow__gap { border-radius: var(--svt-radius-chip); }
/* 2. Radius tokens (child style.css :root). Gap chips take the chip token; the critpanel rule was a pill. */
.svtvs .critpanel .diffrow__gap,
.svtvs .diffrow__gap { border-radius: var(--svt-radius-chip, 4px); }
/* Buy Now takes one value site-wide; the two 3px rules above are overridden here. */
.svtvs .pcard__buy,
.svtvs .pcard__buy.svt-buy-now,
.svtvs .pcard a.pcard__buy { border-radius: var(--svt-radius-buy, 3px); }
/* 3. Brand FAQ on a phone: three questions show, the rest wait behind one control. */
.svtvs .vsfaq-more__r, .svtvs .vsfaq-more { display: none; }
@media (max-width: 767px) {
.svtvs .vsfaq--fold .vsfaq__item:nth-of-type(n+4) { display: none; }
.svtvs .vsfaq-more__r:checked ~ .vsfaq__item { display: block; }
.svtvs .vsfaq-more__r { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.svtvs .vsfaq-more {
display: flex; justify-content: center; margin: 12px 0 0; padding: 9px 12px; border-radius: var(--svt-radius-control, 8px);
border: 1px solid #D6D1C7; background: #FDFAF4; font-size: 13px; font-weight: 700; color: var(--ink, #12213B); cursor: pointer;
}
.svtvs .vsfaq-more__shut, .svtvs .vsfaq-more__r:checked ~ .vsfaq-more .vsfaq-more__open { display: none; }
.svtvs .vsfaq-more__r:checked ~ .vsfaq-more .vsfaq-more__shut { display: inline; }
.svtvs .vsfaq-more__r:focus-visible ~ .vsfaq-more { outline: 2px solid var(--ink, #12213B); outline-offset: 2px; }
}
/* end SVT VS pass 6h */
/* SVT VS - hero links (2026-09-16, Michael). The hero photo and the name under it open the page
they show: the product on a product page; on a brand page the photo opens that product and the
brand name opens the brand. Both keep their look; the name underlines on hover. */
.svtvs .vhero__link{display:block;line-height:0}
.svtvs .vhero__link img{transition:transform .2s ease}
.svtvs .vhero__link:hover img{transform:translateY(-3px)}
.svtvs .vside h2 .vside__name{color:inherit;text-decoration:none}
.svtvs .vside h2 .vside__name:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.svtvs .vhero__link:focus-visible,.svtvs .vside__name:focus-visible{outline:2px solid var(--ink,#12213B);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.svtvs .vhero__link img{transition:none}.svtvs .vhero__link:hover img{transform:none}}
/* end SVT VS hero links */
/* The FAQ fold's checkbox is the panel's first child, so :first-child stopped matching the first
question and a divider appeared above it. 2026-09-17. */
.svtvs .vsfaq__item:first-of-type{border-top:0}