/* NoFussDeal review-page styles.
   Loaded on top of editorial.css, which carries the tokens, the chrome and the
   footer. Only rules the review article needs live here, so the listing pages
   do not pay for them. */

/* hero */
/* On the header band (editorial.css): the head is teal, its copy light, and
   the gallery sits on white so product shots keep their own background. */
.hero{background:var(--band);border-bottom:0}
.hero h1{color:#fff}
.hero .stand{color:var(--band-text)}
.hero .byl{border-top-color:var(--band-rule);color:var(--band-muted)}
.hero .byl b,.hero .byl a{color:#fff}
.hero .gal-main{background:#fff;border-color:transparent}
.hero .gal-thumbs a{background:#fff;border-color:transparent}
.hero .gal-thumbs a:hover,.hero .gal-thumbs a[aria-selected="true"]{border-color:var(--mustard)}
/* The price bar used the same teal, so under a teal head the two merged into
   one slab. It steps down to the deeper teal the footer's newsletter row uses. */
.hero + .buybar{background:var(--band-deep);border-top:1px solid rgba(255,255,255,.1)}
/* padding-top/bottom, never the shorthand: .hero-grid shares its element with
   .wrap, and "padding:38px 0 34px" zeroed the wrap's side gutters. On a phone
   the headline ran into the screen edge; on desktop, once the head joined the
   teal band, it sat 28px left of the breadcrumb above it. */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;padding-top:38px;padding-bottom:34px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:26px}}
.kicker{display:inline-block;background:var(--flame-deep);color:#fff;padding:6px 12px;
  font:800 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
h1{font-size:clamp(31px,3.5vw,46px);line-height:1.08;margin:14px 0 0;max-width:24ch;text-wrap:balance}
.stand{font-size:19.5px;line-height:1.52;color:var(--body);margin:16px 0 0;max-width:56ch}
.byl{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:18px 0 0;padding-top:13px;border-top:1px solid var(--rule);
  font:400 13px/1.5 var(--sans);color:var(--muted)}
.byl b{color:var(--ink);font-weight:600}
.shot{background:transparent;border:0;padding:0;position:relative}
.shot img{aspect-ratio:1/1;object-fit:contain}
.scoretab{position:absolute;left:-1px;top:20px;z-index:2;background:var(--teal);color:#f2fbfa;
  padding:11px 15px;text-align:center}
.scoretab b{display:block;font:400 32px/1 Georgia,serif;font-variant-numeric:tabular-nums}
.scoretab span{font:700 9px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}

/* buy bar */
.buybar{background:var(--teal);color:#f2fbfa}
.buybar-in{display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding:18px 0}
.pr{font:400 33px/1 Georgia,serif;font-variant-numeric:tabular-nums}
.was{font-size:16px;opacity:.72;text-decoration:line-through;margin-left:9px}
.save{background:var(--mustard);color:#241a00;padding:5px 10px;
  font:800 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.buy{margin-left:auto;background:var(--flame-deep);color:#fff;text-decoration:none;padding:15px 28px;
  font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:background-color .18s,transform .12s}
.buy:hover{background:#8d280b}.buy:active{transform:translateY(1px)}
.disc{font:400 12.5px/1.55 var(--sans);opacity:.85;padding:0 0 16px;max-width:72ch}

/* answer-first summary: the block a generative engine quotes */
.answer{border:2px solid var(--ink);padding:26px 28px;margin:38px 0 0;background:var(--sand);
  scroll-margin-top:22px}
/* pretty, not balance: balance shortens line one to match line two, which
   left a wide empty gap to the right of "Is the" in a two-line heading.
   pretty fills each line and only stops a single word dangling alone. */
.answer h2{font-size:23px;margin-bottom:12px;text-wrap:pretty}
/* TL;DR reads as a label, not part of the sentence, so it is set apart in the
   metadata face rather than the serif the heading uses. */
.tldr{display:inline-block;vertical-align:2px;margin-right:10px;padding:5px 8px 4px;
  background:var(--flame-deep);color:#fff;border-radius:0;
  font:800 11px/1 var(--sans);letter-spacing:.11em}
@media(max-width:600px){.answer h2{font-size:20px}.tldr{font-size:10px;padding:3px 7px}}
.answer p{font-size:19.5px;line-height:1.55;color:var(--ink);margin:0 0 .8em}
.answer p:last-child{margin:0}
.answer .src{font:400 12.5px/1.5 var(--sans);color:var(--muted);
  margin-top:16px;padding-top:12px;border-top:1px solid var(--rule)}

section{padding:46px 0}
.sechead{margin:0 0 22px;padding-bottom:11px;border-bottom:2px solid var(--ink);
  display:flex;align-items:baseline;gap:13px}
.sechead h2{font-size:29px}
.sechead h2::before,.answer h2::before{counter-increment:sec;
  content:counter(sec,decimal-leading-zero);
  font:800 12px/1 var(--sans);color:var(--flame-deep);
  letter-spacing:.08em;margin-right:13px;vertical-align:2px}
/* the related-reviews band is navigation, not an article section, so it is
   neither numbered nor listed in the contents */
.sechead.nonum h2::before{content:none;counter-increment:none;margin-right:0}
body{counter-reset:sec}

.verdict .sechead h2::before{color:var(--flame)}
.lede{font-size:21px;line-height:1.55;color:var(--ink)}

/* key facts: definition list, atomic and extractable */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:0}
@media(max-width:1000px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.facts{grid-template-columns:1fr}}
.facts>div{background:var(--canvas);padding:15px 17px}
.facts dt{font:700 10.5px/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--teal);margin-bottom:6px}
.facts dd{margin:0;font-size:16.5px;color:var(--ink);line-height:1.4}

/* highlights */
.hl{list-style:none;margin:0;padding:0;counter-reset:h}
.hl li{padding:13px 0 13px 34px;position:relative;font-size:17.5px;line-height:1.5;border-bottom:1px solid var(--rule)}
.hl li::before{content:counter(h);counter-increment:h;position:absolute;left:0;top:14px;
  font:700 12px/1 var(--sans);color:var(--flame-deep)}

/* pros / cons */
.pc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule)}
@media(max-width:760px){.pc{grid-template-columns:1fr}}
.pc>div{padding:22px 24px}
.pc>div+div{border-left:1px solid var(--rule)}
@media(max-width:760px){.pc>div+div{border-left:0;border-top:1px solid var(--rule)}}
.pc .good{background:#f2f8f4}.pc .bad{background:#fdf4f2}
.pc h3{font:800 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;margin:0 0 14px}
.pc .good h3{color:var(--pro)}.pc .bad h3{color:var(--con)}
.pc ul{margin:0;padding:0;list-style:none;font-size:16.5px;line-height:1.5}
.pc li{padding:0 0 12px 21px;position:relative}
.pc li::before{position:absolute;left:0;font-weight:700}
.pc .good li::before{content:"\002B";color:var(--pro)}
.pc .bad li::before{content:"\2212";color:var(--con)}

/* methodology panel: prose facts converted to labelled rows */
.method{border:1px solid var(--rule);background:var(--sand)}
.method-row{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:14px 22px;border-bottom:1px solid var(--rule)}
.method-row:last-child{border-bottom:0}
@media(max-width:640px){.method-row{grid-template-columns:1fr;gap:4px}}
.method-row dt{font:700 10.5px/1.4 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--teal);padding-top:4px}
.method-row dd{margin:0;font-size:17px;line-height:1.5;color:var(--ink)}

/* metrics: number-led, no filled track */
.m{border-bottom:1px solid var(--rule);padding:16px 0;display:grid;grid-template-columns:1fr 76px;gap:24px;align-items:start}
.m-name{font-size:18px;color:var(--ink);margin:0 0 4px}
.m-det{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0;max-width:80ch}
.m-score{text-align:right}
.m-score b{font:400 30px/1 Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ink);display:block}
.m-score span{font:700 9.5px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal);display:block;margin-top:5px}

/* feature blocks: number-led, chips carry the measured values */
.feat{border-bottom:1px solid var(--rule);padding:24px 0;display:grid;grid-template-columns:56px 1fr;gap:22px}
@media(max-width:640px){.feat{grid-template-columns:1fr;gap:8px}}
.feat .n{font:400 32px/1 Georgia,serif;color:var(--flame-deep);font-variant-numeric:tabular-nums}
.feat h3{font-size:22px;margin:0 0 9px}
.feat p{margin:11px 0 0;max-width:80ch}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;padding:5px 10px;font:700 10.5px/1 var(--sans);
  letter-spacing:.07em;text-transform:uppercase;background:var(--teal);color:#f2fbfa}
.chip.m{background:var(--sand);color:var(--ink);border:1px solid var(--rule)}
.chip.m b{font-variant-numeric:tabular-nums}

/* setup: ordered steps, number in the margin */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{padding:15px 0 15px 44px;border-bottom:1px solid var(--rule);position:relative}
.steps li::before{content:counter(s);counter-increment:s;position:absolute;left:0;top:16px;
  font:700 13px/1 var(--sans);color:var(--flame-deep)}
.steps h3{font-size:18px;margin:0 0 5px}
.steps p{margin:0;font-size:16.5px;color:var(--body);max-width:78ch}

/* full test note stays in the DOM for crawlers, folded away for readers */
.more{margin-top:8px}
.more summary{cursor:pointer;font:600 13px/1 var(--sans);color:var(--flame-deep);
  list-style:none;display:inline-flex;gap:7px;padding:4px 0}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";font-weight:700}
.more[open] summary::before{content:"‘2"}
.more[open] summary{margin-bottom:4px}
.more .m-det{margin-top:2px}

.val{color:var(--ink);font-variant-numeric:tabular-nums lining-nums}

/* related reviews */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:820px){.rel{grid-template-columns:1fr}}
.relcard{text-decoration:none;display:block;position:relative}
.relcard img{aspect-ratio:4/3;object-fit:contain;background:var(--sand);border:1px solid var(--rule)}
.relscore{position:absolute;left:0;top:0;background:var(--teal);color:#f2fbfa;padding:6px 10px;
  font:400 17px/1 Georgia,serif}
.relcard h3{font-size:17.5px;line-height:1.35;margin:11px 0 0}
.relcard:hover h3{color:var(--flame-deep)}

.expandall{margin:0 0 6px}
#expand-all{background:none;border:1px solid var(--rule);color:var(--ink);cursor:pointer;
  padding:8px 14px;font:600 12px/1 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;transition:border-color .18s,color .18s}
#expand-all:hover{border-color:var(--flame-deep);color:var(--flame-deep)}
#expand-all:active{transform:translateY(1px)}
.more summary .hint{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.more[open]>.m-det{animation:reveal .22s ease both}
@keyframes reveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
/* a linked note opens highlighted so the anchor lands somewhere obvious */
.m:target{box-shadow:inset 3px 0 0 var(--flame-deep);padding-left:16px;margin-left:-19px}
tbody tr:hover td{background:var(--sand)}
tr.me:hover td{background:var(--cream)}
@media print{
  .more{display:block}
  .more summary{display:none}
  .more[open]>.m-det,.more>.m-det{display:block!important}
  details:not([open])>*:not(summary){display:block!important}
  .buy,.mast nav,.rel,.expandall{display:none}
}
@media(prefers-reduced-motion:reduce){.more[open]>.m-det{animation:none}}

/* ---------- gallery ---------- */
.shot{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;align-items:start}
.gal-main{position:relative;min-width:0;grid-column:2;grid-row:1;border:1px solid var(--rule)}
.gal-thumbs{grid-column:1;grid-row:1}
.gal-main img{display:none;aspect-ratio:1/1;object-fit:contain;width:100%;padding:14px}
.gal-main img.is-current{display:block}
.gal-main img:target{display:block}
/* :target lets the thumbnails work with zero JS */
.gal-main:has(img:target) img.is-current{display:none}
.gal-thumbs{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0 4px 0 0;
  max-height:520px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.gal-thumbs li{flex:0 0 auto;width:100%}
.gal-thumbs::-webkit-scrollbar{width:0;height:0;display:none}
.gal-thumbs a{display:block;border:1px solid var(--rule);background:var(--canvas);padding:3px;
  transition:border-color .16s}
.gal-thumbs a:hover{border-color:var(--flame-deep)}
.gal-thumbs a[aria-selected="true"]{border-color:var(--ink);border-width:2px;padding:2px}
.gal-thumbs img{aspect-ratio:1/1;object-fit:contain}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- table of contents ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:46px;align-items:start}
.layout .col{min-width:0}
.toc{font-family:var(--sans)}
.toc summary{font:800 10.5px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);padding-bottom:10px;border-bottom:2px solid var(--ink);
  cursor:default;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:block;padding:7px 0 7px 26px;position:relative;text-decoration:none;
  font-size:13.5px;line-height:1.35;color:var(--muted);transition:color .16s}
.toc a::before{counter-increment:t;content:counter(t,decimal-leading-zero);position:absolute;left:0;
  font-size:10px;font-weight:700;color:var(--faint);top:11px}
.toc a:hover{color:var(--flame-deep)}
.toc a.here{color:var(--ink);font-weight:600}
.toc a.here::before{color:var(--flame-deep)}
/* anchor targets must clear the sticky rail */
.sechead{scroll-margin-top:22px}

@media(max-width:1080px){
  .layout{grid-template-columns:1fr;gap:0}
  .toc{order:-1;padding-top:26px}
  .toc-wrap{border:1px solid var(--rule);padding:14px 16px;background:var(--sand)}
  .toc summary{cursor:pointer;border-bottom:0;padding-bottom:0;display:flex;justify-content:space-between}
  .toc summary::after{content:"+";font-size:15px}
  .toc-wrap[open] summary::after{content:"\2212"}
  .toc-wrap[open] ol{margin-top:12px;border-top:1px solid var(--rule);padding-top:6px}
  .toc ol{columns:2;column-gap:22px}
  .toc li{break-inside:avoid}
}
@media(max-width:560px){
  .toc ol{columns:1}
  /* single column: the strip moves under the photo and scrolls sideways.
     The desktop grid-column placements must be reset or they rebuild a
     two-column implicit grid and the strip overflows the viewport. */
  .shot{grid-template-columns:minmax(0,1fr);gap:10px}
  .gal-main{grid-column:1;grid-row:1}
  .gal-thumbs{grid-column:1;grid-row:2;min-width:0;width:100%;
    flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;padding:0 0 5px}
  .gal-thumbs li{flex:0 0 62px;width:62px;scroll-snap-align:start}

}

/* ---------- sticky rail: buy card above the contents list ---------- */
/* Pinned below the sticky header rather than at the top of the viewport, or the
   buy card slides underneath it. --head-h comes from editorial.css and already
   accounts for the utility bar being hidden on narrow screens; the fallback
   keeps this sane if the rail is ever rendered without that stylesheet. */
.railcol{order:2;grid-column:2;position:sticky;top:calc(var(--head-h, 0px) + 6px);
  align-self:start;
  display:flex;flex-direction:column;max-height:calc(100dvh - var(--head-h, 0px) - 12px);
  overflow:hidden;padding-top:4px}
.rail{flex:0 0 auto}
/* min-height:0 is what lets a flex child actually shrink and scroll */
.railcol .toc{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none}
/* Still scrolls on short screens (wheel, trackpad, touch); no visible bar. */
.railcol .toc::-webkit-scrollbar{width:0;height:0;display:none}
.rail{padding:0}
.buycard{border:1px solid var(--rule);background:var(--canvas);padding:11px}
.buycard img{width:100%;height:112px;object-fit:contain;background:var(--canvas);margin-bottom:8px;
  border-bottom:1px solid var(--rule);padding-bottom:8px}
.bc-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 9px;flex-wrap:wrap}
.bc-price{font:400 22px/1 Georgia,serif;color:var(--ink);margin:0;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bc-price s{font-size:13px;color:var(--muted);margin-left:7px;text-decoration-thickness:1px}
.bc-link,.bc-link:hover{text-decoration:none}
.gal-thumbs a{text-decoration:none}
.byl-link{text-decoration:none}
.byl-link:hover,.byl-link:focus-visible{text-decoration:underline}
.bc-name{font:400 13.5px/1.3 var(--serif-body);color:var(--ink);margin:0 0 7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-brand{font:400 11.5px/1.3 var(--sans);color:var(--muted);margin:0;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-cta{display:block;margin:0;text-align:center;padding:10px 8px;font-size:11px;letter-spacing:.06em}
.bc-our{margin:9px 0 0;padding-top:9px;border-top:1px solid var(--rule);
  display:flex;align-items:baseline;justify-content:center;gap:7px}
.bc-our-l{font:800 9.5px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.bc-our b{font:400 22px/1 Georgia,serif;color:var(--flame-deep);font-variant-numeric:tabular-nums}
.bc-our .stars{font-size:12px}
.bc-out{font:400 10.5px/1 var(--sans);color:var(--muted)}
.railcol .toc{padding-top:12px}
/* The sidebar list is a quick index: slightly smaller type, tighter rows. */
.railcol .toc a{font-size:12.5px;padding-top:6px;padding-bottom:6px}
.railcol .toc a::before{top:10px}

/* ---------- sticky buy bar (mobile only) ---------- */
.buybar-sticky{display:none}
@media(max-width:1080px){
  .railcol{position:static;grid-column:1;order:-2;max-height:none;overflow:visible;padding-top:34px}
  .rail{padding:0}
  .buycard{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start}
  .buycard img{margin:0;height:110px;border-bottom:0;padding-bottom:0}
  .buycard .bc-name,.buycard .bc-brand,.buycard .bc-price,
  .buycard .bc-cta{grid-column:2}
  .buycard .bc-our{grid-column:1/-1}
  .buybar-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--teal);color:#f2fbfa;border-top:1px solid rgba(255,255,255,.18);
    padding-bottom:env(safe-area-inset-bottom)}
  .bs-in{display:flex;align-items:center;gap:14px;max-width:1200px;margin:0 auto;padding:10px 18px}
  .bs-price{font:400 22px/1 Georgia,serif;font-variant-numeric:tabular-nums}
  .bs-score{font:400 13px/1 var(--sans);opacity:.85}
  .bs-in .buy{margin-left:auto;padding:12px 20px;font-size:12px}
  .foot-bar{padding-bottom:62px}
}
@media(max-width:520px){
  .buycard{grid-template-columns:88px 1fr;gap:13px}
  .buycard img{height:88px}
  .bs-price{font-size:19px}
  .bs-score{display:none}
}
@media print{.buybar-sticky{display:none}}

/* comparison table */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:16.5px;min-width:420px}
caption{text-align:left;font:400 15px/1.5 var(--sans);color:var(--muted);padding-bottom:12px}
/* Column headers only. The model column is now a row header (<th scope="row">),
   which is the correct markup for a comparison table — but it must read as a
   product name, not as a small-caps column label. */
thead th{text-align:left;font:700 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);padding:0 14px 9px 0;border-bottom:2px solid var(--ink)}
td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;vertical-align:top}
tbody th{text-align:left;font:400 16.5px/1.4 var(--serif-body);color:var(--ink);
  font-weight:400;padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
tbody th a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);
  padding-top:3px;padding-bottom:3px;display:inline-block}
tbody th a:hover{color:var(--flame-deep);border-bottom-color:var(--flame-deep)}
/* The reviewed row: sand ground and a flame edge. The edge selector has to be
   :first-child rather than td:first-child now that the cell is a th. */
tr.me td,tr.me th{background:var(--sand);color:var(--ink)}
tr.me th{font-weight:700}
tr.me td{font-weight:700}
/* The reviewed row is marked with rules above and below rather than a bar at
   its left edge. Every cell in this table is padded 12px 14px 12px 0 - no
   left padding - so text sits flush on the measure, aligned with the section
   heading and the body copy. A 3px inset shadow on the first cell was
   therefore drawn exactly where the product name starts, touching the
   letterforms and reading as a stray mark rather than an accent.

   Moving it into the left gutter is not available: .tablewrap is
   overflow-x:auto, so anything positioned outside the cell is clipped or
   widens the scroll area. Padding the cell instead would indent this row's
   text 12px past the MODEL header and every other row, which looks like a
   bug rather than emphasis.

   Horizontal rules have neither problem. They span the row, they respect the
   measure, and with border-collapse they meet the cell borders cleanly. The
   sand ground, the bold weight and the "Reviewed" label already identify the
   row; this just draws the boundary. */
tr.me>*{border-top:2px solid var(--flame-deep);border-bottom:2px solid var(--flame-deep)}

/* spec clusters */
.cluster{margin:0 0 26px}
.cluster h3{font:700 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);margin:0 0 10px}
.cluster dl{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;
  /* no container background: an unfilled cell must not paint */
  background:none;border:0}
@media(max-width:820px){.cluster dl{grid-template-columns:1fr}}
.cluster dl>div{background:var(--canvas);box-shadow:0 0 0 1px var(--rule);
  padding:13px 16px;display:flex;justify-content:space-between;gap:14px}
.cluster dt{font:400 15px/1.4 var(--sans);color:var(--muted)}
.cluster dd{margin:0;font-size:16px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}

/* quotes */
/* rating distribution: single hue, bar length carries magnitude, row label
   carries identity, so no legend and no categorical palette are needed.
   Gold validated against both surfaces (light #8a6100, dark #bb8722). */
/* The summary is a paragraph above the chart. It was the table's <caption>
   with white-space:nowrap, which set the table's minimum width - so once the
   sentence carried the "See the reviews on Amazon" link it pushed the bars
   into a horizontal scroll. As a paragraph it wraps, and the chart sizes to
   the bars. */
.dist-summary{color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 18px;max-width:62ch}
/* The label and the percentage shrink to their own text (width:1%); the track
   takes whatever is left, so the chart fits any width - down to a phone - with
   no horizontal scroll and no per-width overrides. */
/* min-width:0 overrides the global table{min-width:420px} - without it the
   chart cannot shrink below 420 and scrolls the page on a phone. */
.dist{width:100%;max-width:440px;min-width:0;border-collapse:collapse;margin:0 0 24px}
.dist th{font:600 14px/1 var(--sans);color:var(--ink);text-align:right;
  white-space:nowrap;width:1%;padding:6px 14px 6px 0;border:0;letter-spacing:0;text-transform:none;
  font-variant-numeric:tabular-nums}
.dist th .starglyph{color:var(--gold);margin-left:3px;font-size:12px}
.dist td{padding:6px 0;border:0}
.dist .track span{display:block;height:12px;border-radius:999px;background:var(--rule);overflow:hidden}
.dist .track i{display:block;height:12px;border-radius:999px;background:var(--gold)}
.dist tr:hover .track i{background:var(--flame-deep)}
.dist .pct{font:600 14px/1 var(--sans);color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;width:1%;padding-left:14px}

.qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:none;border:0}
@media(min-width:1401px){.qs.qs-3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1400px){.qs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.qs{grid-template-columns:1fr}}
.q{background:var(--canvas);box-shadow:0 0 0 1px var(--rule);padding:20px;display:flex;flex-direction:column}
/* Cards sit in a grid, so their text ran to different depths and the
   attributions landed at three different heights. The quote takes the
   free space and the attribution sits on the floor of every card. */
.q blockquote{flex:1 1 auto}
.q cite{margin-top:auto;padding-top:10px}
.q-more{white-space:nowrap}
/* 16.5px was the article's own reading size, which is too big for a 215px
   card column: it left only four or five words a line and forced wide gaps
   in the justified text. */
.q blockquote{margin:0 0 12px;font-size:15px;line-height:1.55;text-align:justify;hyphens:auto}
.q h3{font-size:15.5px;line-height:1.35;margin:6px 0 8px}
.q .stars{color:var(--gold);letter-spacing:2px;font-size:14px}
.q cite{font:400 12.5px/1.5 var(--sans);color:var(--muted);font-style:normal;display:block}
.ver{color:var(--pro);font-weight:700}

/* faq */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:16px 0;font-size:19px;color:var(--ink);
  font-family:var(--serif-display);list-style:none;display:flex;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--flame-deep);font-weight:700;font-family:var(--sans)}
.faq details[open] summary::before{content:"\2212"}
.faq p{padding:0 0 16px 28px;margin:0;font-size:17px;color:var(--body);max-width:72ch}

/* ---------- videos ----------
   One stage and a strip of every video beneath it. The stage is a thumbnail
   with a play control until it is clicked; the YouTube iframe is built only
   then, so a reader who scrolls past loads no embed at all. */
.sechead .vcount{margin-left:auto;font:700 11.5px/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.vp-stage{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:#0e0c0a;border:1px solid var(--rule);text-decoration:none}
.vp-stage img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .2s}
.vp-stage:hover img{opacity:1}
.vp-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:#8d280b;color:#fff;
  font:800 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .18s}
.vp-tri{font-size:15px;letter-spacing:0}
.vp-stage:hover .vp-play{background:var(--flame-deep)}
.vp-stage:focus-visible{outline:3px solid var(--flame-deep);outline-offset:3px}
.vp-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-top:13px}
.vp-title{flex:1 1 100%;font-size:21px;line-height:1.3;margin:0}
.vp-ch{font:400 13.5px/1.4 var(--sans);color:var(--muted)}

/* the strip: native horizontal scroll with snap, so touch and trackpads work
   without the script; the arrows are an upgrade the script reveals */
.vs-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:24px 0 10px;padding-top:12px;border-top:1px solid var(--hairline)}
.vs-lab{font:700 11.5px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.vs-navs{display:flex;gap:6px}
/* display:flex outranks the hidden attribute, so hidden has to be restated */
.vs-navs[hidden]{display:none}
.vs-nav{width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule);color:var(--ink);
  font:400 18px/1 Georgia,serif;transition:border-color .18s,color .18s}
.vs-nav:hover:not(:disabled){border-color:var(--flame-deep);color:var(--flame-deep)}
.vs-nav:active:not(:disabled){transform:translateY(1px)}
.vs-nav:disabled{opacity:.35;cursor:default}

.vstrip{list-style:none;margin:0;padding:0 0 12px;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(210px,calc(25% - 12px));gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin}
.vstrip>li{scroll-snap-align:start;min-width:0}
.vs-item{display:block;text-decoration:none;color:inherit;padding-top:8px;border-top:3px solid transparent}
.vs-item[aria-current="true"]{border-top-color:var(--flame-deep)}
.vs-item:focus-visible{outline:3px solid var(--flame-deep);outline-offset:2px}
.vs-th{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:#0e0c0a;border:1px solid var(--rule)}
.vs-th img{width:100%;height:100%;object-fit:cover;transition:opacity .18s}
.vs-item:hover .vs-th img{opacity:.82}
.vs-now{position:absolute;left:0;bottom:0;padding:5px 8px;background:var(--flame-deep);color:#fff;
  font:800 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.vs-item:not([aria-current="true"]) .vs-now{display:none}
.vs-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  margin:9px 0 4px;font:400 15.5px/1.35 var(--serif-display);
  color:var(--ink)}
.vs-item:hover .vs-title{color:var(--flame-deep)}
.vs-ch{display:block;font:400 12.5px/1.3 var(--sans);color:var(--muted)}
@media(max-width:620px){
  .vstrip{grid-auto-columns:72%}
  .vp-title{font-size:18px}
  .vp-play{padding:12px 18px}
}
@media(prefers-reduced-motion:reduce){.vp-stage img,.vs-th img{transition:none}}

/* verdict */
.verdict{background:var(--ink);color:var(--canvas);padding:44px 0 52px;margin-top:46px;
  width:100%;box-sizing:border-box;border-bottom:3px solid var(--flame)}
.verdict h2,.verdict h3{color:var(--canvas)}
.verdict .sechead{border-bottom-color:var(--flame)}
.vgrid{display:grid;grid-template-columns:190px 1fr;gap:38px}
@media(max-width:820px){.vgrid{grid-template-columns:1fr;gap:22px}}
.vscore{font:400 80px/.84 Georgia,serif;color:var(--flame);font-variant-numeric:tabular-nums}
.vscore small{display:block;font:700 11px/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-top:11px}
.verdict p{color:var(--canvas);opacity:.88}
.wsb{list-style:none;margin:16px 0 0;padding:0}
.wsb li{padding:11px 0 11px 24px;border-top:1px solid rgba(255,255,255,.14);position:relative;font-size:16.5px;opacity:.9}
.wsb li::before{content:"\2192";position:absolute;left:0;color:var(--flame)}
.bottomline{border-left:4px solid var(--flame);padding:2px 0 2px 19px;margin:24px 0 0;font-size:19px;line-height:1.55;opacity:1}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- touch targets (review-page controls) ----------
   WCAG 2.2 AA (2.5.8) wants 24x24 CSS px minimum. editorial.css covers the
   chrome; these are the controls that exist only on the article. Padding is
   added rather than font size, so the visual rhythm is unchanged. */
.byl-link{padding-top:4px;padding-bottom:4px;margin-top:-4px;margin-bottom:-4px;display:inline-block}
.method-link{padding-top:5px;padding-bottom:5px;display:inline-block}
.more summary{padding-top:8px;padding-bottom:8px}
.toc summary{padding-top:9px;padding-bottom:9px}
.faq summary{padding-top:10px;padding-bottom:10px}
@media(pointer:coarse),(max-width:1080px){
  .byl a{padding-top:4px;padding-bottom:4px;margin-top:-4px;margin-bottom:-4px;display:inline-block}
  .toc summary{padding-top:11px;padding-bottom:11px}
  .toc a{padding-top:12px;padding-bottom:12px}
  .faq summary{padding-top:15px;padding-bottom:15px}
  .more summary{padding-top:9px;padding-bottom:9px}
  .gal-thumbs a{min-height:44px}
  .vs-nav{width:44px;height:44px}
  /* the smallest label text gets a nudge for legibility on phones */
  .bc-brand{font-size:12.5px}
  .bc-our-l{font-size:10.5px}
  .save{font-size:11.5px}
}

/* ---------- phones and tablets: reading first ----------
   Desktop is unchanged. Below the two-column layout the buy card repeated what
   the teal price bar above and the sticky bar below already offer, and pushed
   the contents list and the article a screen further down, so it goes. */
@media(max-width:1080px){
  .rail{display:none}
  .railcol{padding-top:24px}
  .toc{padding-top:0}
}
@media(max-width:560px){
  /* hero: less air above the headline, a tighter deck and byline */
  .hero-grid{padding-top:22px;padding-bottom:24px;gap:20px}
  h1{font-size:28px;line-height:1.14;max-width:none}
  .kicker{padding:5px 10px;font-size:10.5px}
  .stand{font-size:17.5px;line-height:1.55;margin-top:12px}
  .byl{font-size:12.5px;gap:2px 12px;margin-top:14px;padding-top:11px}
  .scoretab{top:12px;padding:8px 11px}
  .scoretab b{font-size:26px}
  .gal-main img{padding:8px}
  /* the headline already names the product, so the crumb trail stops at the
     category instead of wrapping a cut-off listing name onto a second line */
  .crumbs li:last-child{display:none}

  /* price bar: price and saving on one line, a full-width button under them */
  .buybar-in{gap:12px 14px;padding:14px 0 12px}
  .pr{font-size:28px}
  .buybar .buy{margin-left:0;flex:1 1 100%;text-align:center;padding:14px 16px}
  .disc{font-size:12px;padding-bottom:14px}

  /* article body: 17.5px serif reads at a comfortable 40-45 characters a line */
  .layout .col{font-size:17.5px;line-height:1.6}
  section{padding-top:34px;padding-bottom:34px}
  .sechead{margin-bottom:16px;padding-bottom:9px}
  .sechead h2{font-size:23px;line-height:1.2}
  .answer{padding:20px 18px;margin-top:24px}
  .answer p{font-size:17.5px;line-height:1.55}
  .pc li{font-size:16px}
  .faq summary{font-size:17.5px;line-height:1.45}
  .faq p{font-size:16.5px}
  table{font-size:15px}
  .wsb li{font-size:16px}
  .bottomline{font-size:17.5px;padding-left:15px}
  /* contents list: open by default, so it has to be easy to read and tap */
  .toc a{font-size:15.5px;padding-left:30px}
  .toc a::before{font-size:11px;top:15px}
}

/* related band: sits between the ink verdict and the teal footer, so it uses
   the warm sand to step the page down rather than stacking two darks */
.relband{background:var(--sand);border-top:1px solid var(--rule);
  padding-top:44px;padding-bottom:48px}
.relband .sechead{border-bottom-color:var(--ink)}
.relband .relcard img{background:var(--canvas)}

/* comparison from owners: model, what owners who used both say, price */
table.cmp-owners th[scope="row"]{width:24%}
table.cmp-owners td:nth-child(2){font:400 15.5px/1.55 var(--serif-body);color:var(--ink);padding-right:22px}
table.cmp-owners td:last-child{white-space:nowrap;width:1%}
.cmp-date{display:block;font:400 12px/1.4 var(--sans);color:var(--muted)}
.cmp-na{font:400 13px/1.4 var(--sans);color:var(--muted)}
/* Our own review of an alternative (27 Sept 2026): an internal link, so it is
   styled as a site link rather than the sponsored Amazon one above it. */
.cmp-review{display:inline-block;margin-top:4px;font:600 12px/1.4 var(--sans);color:var(--teal,#0d5157);text-decoration:underline;text-underline-offset:2px}
.cmp-review:hover{text-decoration-thickness:2px}
@media (max-width:600px){table.cmp-owners{min-width:560px}}
/* Rivals table: facts from each listing as a short list; the owners column is secondary. */
table.cmp-rivals th[scope="row"]{width:20%}
table.cmp-rivals td:nth-child(2){font:400 14px/1.5 var(--sans);color:var(--ink);padding-right:18px}
table.cmp-rivals td:nth-child(3){font:400 14.5px/1.5 var(--serif-body);color:var(--ink);padding-right:18px}
.cmp-facts{margin:0;padding:0;list-style:none}
.cmp-facts li{padding:1px 0}
.cmp-facts li+li{border-top:1px solid var(--rule,#e5e5e5);margin-top:3px;padding-top:4px}
@media (max-width:600px){table.cmp-rivals{min-width:680px}}
.value-check{margin:22px 0 0;padding:16px 18px;border-left:3px solid var(--mustard,#c9a227);background:var(--paper-2,#faf8f2)}
.value-check h3{font:800 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px}
.value-check ul{margin:0 0 8px;padding-left:18px}
.value-check li{font:400 15px/1.5 var(--serif-body);padding:2px 0}
.owner-quote{margin:12px 0 4px;padding:2px 0 2px 14px;border-left:2px solid var(--rule,#e5e5e5);font:italic 400 15.5px/1.5 var(--serif-body);color:var(--ink)}
.owner-quote cite{display:block;margin-top:4px;font:normal 400 12px/1.4 var(--sans);color:var(--muted)}
/* Full width, not the 68ch reading measure: this paragraph sits directly under
   the section rule and above the card grid, both of which run the full column,
   so a short measure left a ragged gap on the right. */
.buyers-lede{font:400 17px/1.6 var(--serif-body);color:var(--ink);margin:0 0 22px;text-align:justify;hyphens:auto}