/* WarmGearReport: article pages (top list, single review, comparison, how-to, blog post). Link it after
   site.css. It reuses site.css for: .pill .chip .kind .btn .more-link .byline .season-badge .disclose
   .pc (pros/cons) .meter (battery bars) .faq .vs__pair/.vs__badge .crumbs .toc .stick .sample-chip.
   Every component is shown with sample content on styleguide.html. The TIDY KIT at the end of this
   file (2026-10-18: .fold .proscons .qpicks .tiles .factors .steps .choose .pickcard ...) is what the
   tidied article pages use; its markup is in the comment above each component. */

/* ---------- hero: breadcrumb, tags, H1, standfirst, byline, disclosure, facts, cover ---------- */
.ahero{position:relative;overflow:hidden;background:linear-gradient(180deg,#eaf1f8 0%,var(--ground) 100%)}
.ahero .hero__lines{opacity:.8}
.ahero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;padding-block:.9rem clamp(1.75rem,1.2rem + 2vw,3rem)}
.ahero__text{min-width:0}
.ahero__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.ahero h1,.ahero__title{margin-top:.8rem;font:800 clamp(1.95rem,1.3rem + 2.4vw,3.15rem)/1.06 var(--display);letter-spacing:-.03em;color:var(--ink);max-width:23ch}
.ahero__dek{margin-top:.7rem;max-width:38rem;font-size:1.08rem;color:var(--muted)}
.ahero .byline{margin-top:1rem}
.ahero .disclose{flex-wrap:wrap;margin-top:.55rem}
.ahero .disclose a{padding-block:.2rem}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.15rem}
.fact{display:inline-flex;align-items:center;gap:.55rem;padding:.35rem .85rem .35rem .35rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.84rem;font-weight:650;color:var(--text)}
.fact>span:first-child{display:grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:var(--ember-tint);color:var(--ember-600)}
.fact b{color:var(--ink);font:800 .98rem/1 var(--display)}
.ahero__media{position:relative}
.ahero__media::before{content:"";position:absolute;inset:-10% -8% -8% 8%;background:radial-gradient(closest-side,rgb(255 181 71/.38),rgb(234 106 51/.1) 60%,transparent 76%);filter:blur(10px)}
.acover{position:relative;aspect-ratio:16/10;border-radius:var(--r-xl);overflow:hidden;background:var(--frost-2);box-shadow:var(--sh-2)}
.acover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.acover__tag{position:absolute;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:999px;background:rgb(18 26 41/.75);color:#fff;font-size:.8rem;font-weight:750;backdrop-filter:blur(6px)}
/* --stack: blog posts and how-tos, the cover runs full width under the text */
.ahero--stack .ahero__media{max-width:60rem}
.ahero--stack .acover{aspect-ratio:21/9}

/* ---------- layout: the article column and the side rail ---------- */
.alayout{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;padding-block:clamp(1.25rem,1rem + 1.5vw,2.5rem) var(--sec)}
.amain{min-width:0}
.arail{display:grid;gap:1rem;align-content:start;min-width:0}
.arail .stick{display:grid;gap:1rem}

/* ---------- prose: .amain.prose holds the article. Wrap each H2 block in a plain <section id="…">.
   Rules apply to direct children (and to children of a plain direct <section>) so components placed
   in the flow keep their own styles. ---------- */
.prose{font-size:1.0625rem;line-height:1.72;color:var(--text)}
.prose>*+*,.prose>section:not([class])>*+*{margin-top:1.1rem}
.prose>section:not([class])+section{margin-top:clamp(2.5rem,2rem + 1.5vw,3.25rem)}
.prose :is(h2,h3,[id]){scroll-margin-top:6rem}
:is(.prose,.prose>section:not([class]))>:is(p,h2,h3),:is(.prose,.prose>section:not([class]))>:is(ul,ol):not([class]){max-width:44rem}
:is(.prose,.prose>section:not([class]))>h2{font-size:clamp(1.55rem,1.2rem + 1.2vw,2.05rem);line-height:1.14}
:is(.prose,.prose>section:not([class]))>*+h2{margin-top:2.5rem}
:is(.prose,.prose>section:not([class]))>h3{font-size:clamp(1.18rem,1.05rem + .5vw,1.4rem);line-height:1.22}
:is(.prose,.prose>section:not([class]))>*+h3{margin-top:1.9rem}
:is(.prose,.prose>section:not([class]))>:is(h2,h3)+*{margin-top:.6rem}
.prose :where(a:not([class])){color:var(--ember-text);font-weight:650;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.prose :where(a:not([class])):hover{text-decoration-thickness:2px}
.prose strong{color:var(--ink);font-weight:750}
.prose .lead{font-size:1.16rem;line-height:1.6;color:var(--ink)}
:is(.prose,.prose>section:not([class]))>ul:not([class])>li{position:relative;padding-left:1.55rem}
:is(.prose,.prose>section:not([class]))>ul:not([class])>li::before{content:"";position:absolute;left:.35rem;top:.66em;width:.45rem;height:.45rem;border-radius:999px;background:var(--ember)}
:is(.prose,.prose>section:not([class]))>ol:not([class]){counter-reset:ol}
:is(.prose,.prose>section:not([class]))>ol:not([class])>li{position:relative;counter-increment:ol;padding-left:2.25rem}
:is(.prose,.prose>section:not([class]))>ol:not([class])>li::before{content:counter(ol);position:absolute;left:0;top:.12em;width:1.6rem;height:1.6rem;border-radius:999px;background:var(--ink);color:#fff;font:800 .8rem/1.6rem var(--display);text-align:center}
:is(.prose,.prose>section:not([class]))>:is(ul,ol):not([class])>li+li{margin-top:.5rem}
:is(.prose,.prose>section:not([class]))>blockquote:not([class]){position:relative;padding:1.1rem 1.25rem 1.1rem 3.2rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1);font:600 1.12rem/1.5 var(--display);color:var(--ink)}
:is(.prose,.prose>section:not([class]))>blockquote:not([class])::before{content:"\201C";position:absolute;left:1rem;top:.85rem;font:800 2.8rem/1 var(--display);color:var(--ember)}
:is(.prose,.prose>section:not([class]))>blockquote:not([class]) cite{display:block;margin-top:.45rem;font:600 .84rem var(--body);font-style:normal;color:var(--muted)}
.afig{border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:var(--sh-1)}
.afig>img{width:100%;aspect-ratio:16/9;object-fit:cover}
.afig figcaption{padding:.65rem 1rem;font-size:.84rem;color:var(--muted);font-weight:600}

/* ---------- callouts: tip, safety / caution, note ---------- */
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;padding:1rem 1.15rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line)}
.callout__ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:13px;background:#fff;box-shadow:var(--sh-1)}
.callout__title{display:block;font:700 1.02rem/1.3 var(--display);color:var(--ink)}
.callout p{margin-top:.25rem;font-size:.94rem;line-height:1.55;color:var(--text)}
.callout ul{margin-top:.4rem;display:grid;gap:.3rem;font-size:.92rem}
.callout ul li{display:flex;gap:.45rem;align-items:flex-start}
.callout ul li .ic{width:1rem;height:1rem;margin-top:.2rem}
.callout a{color:var(--ember-text);font-weight:700}
.callout--tip{background:var(--glow-tint);border-color:#f6d7a6}
.callout--tip .callout__ico{color:var(--ember-600)}
.callout--safety{background:var(--bad-tint);border-color:#f3c4bf}
.callout--safety .callout__ico{color:var(--bad)}
.callout--safety .callout__title{color:#8f1c13}
.callout--note{background:var(--frost);border-color:var(--frost-2)}
.callout--note .callout__ico{color:#24477a}
.callout--ok{background:var(--ok-tint);border-color:#bfe3cf}
.callout--ok .callout__ico{color:var(--ok)}

/* ---------- quick picks: the whole ranking in one card, each row jumps to its pick ---------- */
.quick{border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1);overflow:hidden}
.quick__head{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;padding:1rem 1.2rem;background:var(--night);color:var(--night-text);overflow:hidden}
.quick__head::after{content:"";position:absolute;right:-3rem;top:-4rem;width:12rem;height:12rem;border-radius:999px;background:radial-gradient(closest-side,rgb(255 181 71/.28),transparent)}
.quick__head h2{position:relative;color:#fff;font-size:clamp(1.15rem,1rem + .6vw,1.4rem)}
.quick__head .pill{position:relative;background:rgb(255 181 71/.16);color:var(--glow)}
.qrow{display:grid;grid-template-columns:auto 3.6rem minmax(0,1fr);gap:.6rem .8rem;align-items:center;padding:.85rem 1.2rem;border-top:1px solid var(--line)}
.qrow:first-of-type{border-top:0}
.qrow--top{background:linear-gradient(90deg,var(--glow-tint),#fff 70%)}
.qrow__no{display:grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:var(--frost);color:var(--ink);font:800 .9rem/1 var(--display)}
.qrow--top .qrow__no{background:var(--ember-600);color:#fff}
.qrow img{width:3.6rem;height:3.6rem;border-radius:12px;object-fit:cover;background:var(--frost)}
.qrow__award{display:block;font-size:.78rem;font-weight:750;color:var(--ember-text)}
.qrow__name{display:block;padding-block:.2rem;font:700 1rem/1.25 var(--display);color:var(--ink);text-decoration:none}
a.qrow__name:hover{text-decoration:underline}
.qrow__why{display:block;margin-top:.15rem;font-size:.84rem;line-height:1.4;color:var(--muted)}
.qrow__cta{grid-column:1/-1}
.qrow__cta .btn{width:100%}

/* ---------- product pick block ---------- */
.pick{position:relative;display:grid;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1);overflow:hidden}
.pick--top{box-shadow:0 0 0 2px var(--ember),var(--sh-2)}
.pick__media{position:relative;aspect-ratio:4/3;background:var(--frost)}
.pick__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick__rank{position:absolute;left:.8rem;top:.8rem;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:999px;background:#fff;color:var(--ink);font:800 1.25rem/1 var(--display);box-shadow:var(--sh-1)}
.pick__rank--one{background:var(--ember-600);color:#fff}
.pick__award{position:absolute;left:.8rem;bottom:.8rem;display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .7rem;border-radius:999px;background:rgb(18 26 41/.82);color:#fff;font-size:.8rem;font-weight:750;backdrop-filter:blur(4px)}
.pick__award .ic{color:var(--glow)}
.pick__body{display:flex;flex-direction:column;padding:1.1rem 1.2rem 1.2rem;min-width:0}
.pick__type{font-size:.78rem;font-weight:700;color:var(--muted)}
.pick__name{margin-top:.2rem;font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem);line-height:1.15}
.pick__chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.7rem}
.pick__verdict{margin-top:.7rem;font-size:.98rem;line-height:1.6;color:var(--text)}
.pick__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-top:auto;padding-top:1rem}
.pick__cta small{font-size:.8rem;font-weight:650;color:var(--muted)}
.pick__more{display:grid;gap:1rem;padding:1.1rem 1.2rem 1.25rem;border-top:1px solid var(--line);background:linear-gradient(180deg,#fbfcfe,#fff)}
.pick__more>.pc,.pick__more>.meter{margin-top:0}
.pick__more .pc__col{background:#fff;border:1px solid var(--line)}
.pick__more .meter{max-width:26rem}
.pick__quote{grid-column:1/-1}
/* key specs: <ul class="specs"><li class="spec"><span class="spec__ico">icon</span><span><small>label</small><b>value</b></span></li> */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.spec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:center;padding:.6rem .7rem;border-radius:var(--r-s);background:var(--ground)}
.spec__ico{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:10px;background:#fff;color:var(--ember-600)}
.spec__ico .ic{width:1.05rem;height:1.05rem}
.spec small{display:block;font-size:.75rem;font-weight:700;line-height:1.2;color:var(--muted)}
.spec b{display:block;font-size:.92rem;line-height:1.25;color:var(--ink)}

/* ---------- spec / comparison table: scrolls inside its own box on phones ---------- */
.tablebox{border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1);overflow:hidden}
.tablebox__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;padding:1rem 1.15rem}
.tablebox__head h3{font-size:1.12rem}
.tablebox__head p{font-size:.84rem;font-weight:600;color:var(--muted)}
.tablebox__scroll{overflow-x:auto;scrollbar-width:thin;border-top:1px solid var(--line)}
.tablebox__hint{display:flex;align-items:center;gap:.4rem;padding:.6rem 1.15rem;border-top:1px solid var(--line);font-size:.8rem;font-weight:650;color:var(--muted)}
.ctable{width:100%;min-width:42rem;border-collapse:separate;border-spacing:0;font-size:.88rem;line-height:1.35}
.ctable th,.ctable td{padding:.75rem .9rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.ctable thead th{background:var(--frost);color:var(--ink);font-size:.8rem;font-weight:800;white-space:nowrap}
.ctable tbody th{position:sticky;left:0;z-index:1;min-width:11rem;background:#fff;color:var(--ink);font-weight:750;box-shadow:inset -1px 0 0 var(--line)}
.ctable thead th:first-child{position:sticky;left:0;z-index:2;box-shadow:inset -1px 0 0 var(--line-2)}
.ctable tbody tr:last-child>*{border-bottom:0}
.ctable .is-best>*{background:#fffaf2}
.ctable .is-best th{background:#fff5e6}
.ctable__prod{display:flex;align-items:center;gap:.6rem}
.ctable__prod img{width:2.6rem;height:2.6rem;border-radius:9px;object-fit:cover;background:var(--frost);flex:none}
.ctable__prod small{display:block;font-size:.75rem;font-weight:750;color:var(--ember-text)}
.yes,.no{display:inline-flex;align-items:center;gap:.3rem;font-weight:700}
.yes{color:var(--ok)}
.no{color:var(--bad)}
.yes .ic,.no .ic{width:1rem;height:1rem}
.ctable .btn{min-height:2.2rem;padding:.35rem .8rem;font-size:.8rem}

/* ---------- comparison extras: the two contenders and the rounds ---------- */
.duel{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);background:#fff}
.duel .vs__pair span{aspect-ratio:4/3}
.duel__names{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center;padding:.9rem 1.1rem;text-align:center}
.duel__names b{font:750 1rem/1.2 var(--display);color:var(--ink)}
.duel__names small{display:block;font-size:.78rem;font-weight:700;color:var(--muted)}
.duel__names i{font:800 .8rem var(--display);font-style:normal;color:var(--muted)}
.rounds{display:grid;gap:.5rem}
.round{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.75rem .9rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line)}
.round__ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:12px;background:var(--frost);color:#24477a}
.round b{display:block;color:var(--ink);font-size:.95rem;line-height:1.25}
.round small{display:block;font-size:.8rem;color:var(--muted)}
.round__win{padding:.3rem .7rem;border-radius:999px;background:var(--ember-tint);color:var(--ember-text);font-size:.8rem;font-weight:800;white-space:nowrap}
.round__win--tie{background:var(--frost);color:var(--ink)}

/* ---------- verdict box ---------- */
.final{position:relative;overflow:hidden;display:grid;gap:1.25rem;padding:clamp(1.4rem,1rem + 2vw,2.25rem);border-radius:var(--r-xl);background:var(--night);color:var(--night-text);isolation:isolate}
.final::before{content:"";position:absolute;right:-5rem;top:-6rem;width:20rem;height:20rem;border-radius:999px;background:radial-gradient(closest-side,rgb(255 181 71/.3),rgb(234 106 51/.08) 65%,transparent);z-index:-1}
.final__seal{display:inline-flex;align-self:start;justify-self:start;align-items:center;gap:.45rem;padding:.35rem .85rem;border-radius:999px;background:rgb(126 226 168/.14);color:#7ee2a8;font-size:.84rem;font-weight:800}
.final__seal--mixed{background:rgb(255 181 71/.16);color:var(--glow)}
.final__seal--no{background:rgb(255 155 143/.14);color:#ff9b8f}
.final h2{margin-top:.7rem;color:#fff;font-size:clamp(1.5rem,1.2rem + 1vw,2.05rem)}
.final__text{margin-top:.5rem;max-width:40rem;color:var(--night-text);font-size:1.02rem}
.final__split{display:grid;gap:.75rem}
.final__col{padding:1rem 1.1rem;border-radius:var(--r-m);background:var(--night-2);border:1px solid var(--night-line)}
.final__col b{display:flex;align-items:center;gap:.45rem;color:#fff;font-size:.92rem}
.final__col--yes b .ic{color:#7ee2a8}
.final__col--no b .ic{color:#ff9b8f}
.final__col ul{display:grid;gap:.3rem;margin-top:.45rem;font-size:.9rem;color:var(--night-muted)}
.final__col li{display:flex;gap:.45rem}
.final__col li::before{content:"";flex:none;width:.35rem;height:.35rem;margin-top:.55rem;border-radius:999px;background:var(--night-muted)}
.final__actions{display:flex;flex-wrap:wrap;gap:.5rem}
.final .btn--line{background:transparent;border-color:var(--night-line);color:#fff}
.final .btn--line:hover{border-color:#fff}

/* ---------- owner-quote card (light); a sample quote carries the hidden data-sample-quote attribute ---------- */
.oqs{display:grid;gap:1rem}
.oq{position:relative;display:flex;flex-direction:column;padding:1.2rem 1.25rem;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1)}
.oq__mark{font:800 3.6rem/.62 var(--display);color:var(--ember);height:1.7rem}
.oq blockquote{margin-top:.55rem;font:500 1.02rem/1.6 var(--body);color:var(--ink)}
.oq__ctx{display:inline-flex;align-self:flex-start;align-items:center;gap:.35rem;margin-top:.9rem;padding:.3rem .7rem;border-radius:999px;background:var(--frost);color:#24477a;font-size:.78rem;font-weight:750}
.oq figcaption{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.7rem;align-items:center;margin-top:auto;padding-top:1rem}
.oq__ctx+figcaption{margin-top:1rem;border-top:1px dashed var(--line-2)}
.oq figcaption img{width:2.6rem;height:2.6rem;border-radius:10px;object-fit:cover;background:var(--frost)}
.oq figcaption b{display:block;color:var(--ink);font-size:.88rem}
.oq figcaption span{display:block;color:var(--muted);font-size:.8rem}
.oq figcaption a{color:var(--ember-text);font-weight:700}
.oq--flat{box-shadow:none;border:1px solid var(--line);background:var(--ground)}

/* ---------- how-to: what you need, then the steps ---------- */
.needs{display:grid;gap:.9rem;padding:1.1rem 1.2rem;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1)}
.needs__facts{display:flex;flex-wrap:wrap;gap:.5rem}
.needs__title{display:flex;align-items:center;gap:.45rem;font:700 1rem/1.2 var(--display);color:var(--ink)}
.needs__title .ic{color:var(--ember-600)}
.needs ul{display:flex;flex-wrap:wrap;gap:.45rem}
.needs li{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem .4rem .45rem;border-radius:999px;background:var(--ground);font-size:.86rem;font-weight:650;color:var(--ink)}
.needs li>span{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:999px;background:#fff;color:var(--ember-600)}
.needs li .ic{width:.95rem;height:.95rem}
.howto{display:grid;gap:1rem;counter-reset:howto}
.howto__step{position:relative;display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.4rem 1rem;padding:1.1rem 1.15rem;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1);counter-increment:howto}
.howto__step::before{content:counter(howto);grid-row:span 3;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:14px;background:var(--ink);color:var(--glow);font:800 1.15rem/1 var(--display)}
.howto__step:not(:last-child)::after{content:"";position:absolute;left:calc(1.15rem + 1.375rem - 1px);top:4.1rem;bottom:-1.1rem;width:2px;background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 11px)}
.howto__step h3{font-size:1.1rem;line-height:1.25}
.howto__step p{font-size:.94rem;line-height:1.6;color:var(--text)}
.howto__meta{display:flex;flex-wrap:wrap;gap:.35rem}
.howto__img{grid-column:2;margin-top:.4rem;width:100%;aspect-ratio:16/9;border-radius:var(--r-m);object-fit:cover;background:var(--frost)}
.howto__warn{grid-column:2;display:flex;gap:.45rem;align-items:flex-start;margin-top:.2rem;padding:.55rem .7rem;border-radius:var(--r-s);background:var(--bad-tint);color:#8f1c13;font-size:.86rem;font-weight:650}
.howto__warn .ic{width:1rem;height:1rem;margin-top:.15rem}

/* ---------- related reads ---------- */
.related{display:grid;gap:.75rem}
.rel{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:.9rem;align-items:center;padding:.6rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.rel:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.rel__media{position:relative;aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;background:var(--frost)}
.rel__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rel h3{margin-top:.35rem;font-size:1rem;line-height:1.26}
.rel small{display:block;margin-top:.3rem;font-size:.8rem;font-weight:600;color:var(--muted)}

/* ---------- "how we pick" mini box (rail or article foot) ---------- */
.mini-method{padding:1.15rem 1.2rem;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1)}
.mini-method__title{display:flex;align-items:center;gap:.45rem;font-size:1.05rem}
.mini-method__title .ic{color:var(--ember-600)}
.mini-method ol{display:grid;gap:.6rem;margin-top:.8rem}
.mini-method li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:center}
.mini-method li>span:first-child{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:12px;background:var(--ink);color:var(--glow)}
.mini-method li .ic{width:1.05rem;height:1.05rem}
.mini-method b{display:block;font-size:.88rem;line-height:1.25;color:var(--ink)}
.mini-method small{display:block;font-size:.78rem;line-height:1.3;color:var(--muted)}
.mini-method .more-link{margin-top:.7rem;padding-block:.3rem;font-size:.9rem}

/* ---------- team box (article foot) ---------- */
.teambox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:1.25rem 1.3rem;border-radius:var(--r-l);background:linear-gradient(135deg,#fff 0%,#eef4fa 100%);border:1px solid var(--line)}
.teambox__mark{width:3.25rem;height:3.25rem}
.teambox__by{font:700 1.08rem/1.25 var(--display);color:var(--ink)}
.teambox p+p{margin-top:.3rem;font-size:.92rem;color:var(--text)}
.teambox__links{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem}

@media (min-width:40rem){
  .qrow{grid-template-columns:auto 4.25rem minmax(0,1fr) auto;padding-inline:1.25rem}
  .qrow img{width:4.25rem;height:4.25rem}
  .qrow__cta{grid-column:auto}
  .qrow__cta .btn{width:auto}
  .specs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .final__split{grid-template-columns:1fr 1fr}
  .oqs{grid-template-columns:1fr 1fr}
  .howto__step--img{grid-template-columns:2.75rem minmax(0,1fr) 12rem}
  .howto__step--img .howto__img{grid-column:3;grid-row:1/span 3;margin-top:0;aspect-ratio:4/3}
}
@media (min-width:48rem){
  .pick{grid-template-columns:minmax(15rem,.85fr) minmax(0,1.15fr)}
  .pick__media{aspect-ratio:auto;min-height:16rem}
  .pick__more{grid-column:1/-1}
  .related{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .rel{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding:0;overflow:hidden}
  .rel__media{aspect-ratio:16/10;border-radius:0}
  .rel>div:last-child{padding:.2rem 1rem 1.05rem}
}
@media (min-width:48rem) and (max-width:63.99rem){
  .arail .mini-method ol{grid-template-columns:1fr 1fr;column-gap:1.25rem}
}
@media (min-width:64rem){
  .ahero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:1rem 3.25rem;padding-block:1rem 3.25rem}
  .ahero__grid>.crumbs{grid-column:1/-1}
  .ahero--stack .ahero__grid{grid-template-columns:minmax(0,1fr)}
  .alayout{grid-template-columns:minmax(0,1fr) 18.5rem;gap:3rem}
  /* the rail: the method box (and a page's product box) lead and scroll away with the page; only the
     "On this page" box sticks, capped to the screen, so nothing is cut at laptop heights (1024x768,
     1280x800). Works whether .mini-method sits inside .stick or before it. */
  .arail{display:flex;flex-direction:column;gap:1rem}
  .arail .stick{display:contents}
  .arail .mini-method{order:-1}
  .arail .buybox{order:-2}
  .arail .toc--rail{position:sticky;top:5.75rem;max-height:calc(100vh - 7rem);overflow-y:auto;scrollbar-width:thin}
  .tablebox__hint{display:none}
  .ctable{min-width:0}
}

/* =================================================================================================
   TIDY KIT (2026-10-18): short, quiet components for the tidied article pages (top list, review,
   how-to, comparison). One line per block; the secondary detail goes in a closed native <details>.
   Markup is in the comment above each component; notes in _review/tidy-articles-A.md. Everything
   above this block (.quick/.qrow, .pick, .final, .howto, .mini-method, .oq ...) stays as it was for
   pages that have not moved yet.
   ================================================================================================= */

/* sdek: the one line (25 words at most) under a section's H2.  <p class="sdek">…</p> */
.prose .sdek,.sdek{max-width:42rem;color:var(--muted);font-size:1rem;line-height:1.55}

/* srcline: where a block's facts come from, said once per block (never a chip on every bullet).
   <p class="srcline"><svg class="ic"><use href="#i-file"/></svg>Specs from each maker's page</p> */
.srcline{display:flex;align-items:flex-start;gap:.4rem;font-size:.82rem;font-weight:650;line-height:1.4;color:var(--muted)}
.srcline .ic{width:.95rem;height:.95rem;margin-top:.1rem;flex:none;color:var(--ember-600)}

/* tipline: one short tip on a soft amber ground.  <p class="tipline"><svg class="ic"><use href="#i-bulb"/></svg><span><b>Between sizes?</b> …</span></p> */
.tipline{display:flex;align-items:flex-start;gap:.55rem;padding:.7rem .9rem;border-radius:var(--r-m);background:var(--glow-tint);border:1px solid #f6d7a6;font-size:.9rem;line-height:1.5;color:var(--text)}
.tipline .ic{width:1.1rem;height:1.1rem;margin-top:.15rem;flex:none;color:var(--ember-600)}
.tipline b{color:var(--ink)}

/* safeline: the ONE short safety line a product block keeps visible (battery, burn, fire, implant).
   <p class="safeline"><svg class="ic"><use href="#i-shield"/></svg>Battery marks: UL and cUL listed</p>
   --warn: a real warning (red ground). --ok: a listing or pass (green ground). */
.safeline{display:flex;align-items:flex-start;gap:.45rem;padding:.5rem .75rem;border-radius:var(--r-s);background:var(--frost);color:#24477a;font-size:.84rem;font-weight:650;line-height:1.4}
.safeline .ic{width:1rem;height:1rem;margin-top:.1rem;flex:none}
.safeline--warn{background:var(--bad-tint);color:#8f1c13}
.safeline--ok{background:var(--ok-tint);color:#11603c}

/* fold: a closed native <details> for secondary detail ("More about this pick", "What we could not
   confirm", long spec notes, sources). The summary is a full-width row, 46 px tall, with a chevron.
   <details class="fold"><summary class="fold__sum"><svg class="ic"><use href="#i-file"/></svg>More about this pick<svg class="ic ic--sm fold__chev"><use href="#i-down"/></svg></summary>
     <div class="fold__body">…</div></details>
   --flat: no frame of its own (inside a card that already has one). The frame is scoped to the article
   column with :where() (no extra weight): how-we-pick.css has a .fold of its own, and a page's own
   .fold rules still win. */
:where(.amain) .fold{border-radius:var(--r-m);background:#fff;border:1px solid var(--line)}
.fold__sum{display:flex;align-items:center;gap:.55rem;min-height:2.9rem;padding:.45rem 1rem;border-radius:inherit;font:750 .92rem/1.25 var(--body);color:var(--ink);cursor:pointer;list-style:none}
.fold__sum::-webkit-details-marker{display:none}
.fold__sum:hover{background:var(--ground)}
.fold__sum>.ic:first-child{color:var(--ember-600)}
.fold__chev{margin-left:auto;color:var(--muted);transition:transform .2s}
details[open]>summary .fold__chev{transform:rotate(180deg)}
.fold[open]>.fold__sum{border-bottom-left-radius:0;border-bottom-right-radius:0}
.fold__body{display:grid;gap:.9rem;padding:.35rem 1rem 1rem;font-size:.92rem;line-height:1.55;color:var(--text)}
.fold__body>p{max-width:44rem}
.fold__body>.meter{margin-top:0;max-width:26rem}
:where(.amain) .fold--flat{border:0;background:transparent}

/* kchips: 3-4 key facts as chips with an icon.
   <ul class="kchips"><li class="kchip"><svg class="ic"><use href="#i-flame"/></svg>4 heat zones</li></ul> */
.kchips{display:flex;flex-wrap:wrap;gap:.35rem}
.kchip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem .3rem .5rem;border-radius:999px;background:var(--ground);border:1px solid var(--line);font-size:.8rem;font-weight:700;line-height:1.3;color:var(--ink)}
.kchip .ic{width:.95rem;height:.95rem;color:var(--ember-600)}

/* vrows: label + one line each ("Best for", "Skip it if", "Bottom line"), in a product card or a
   review's verdict box.  <dl class="vrows"><div class="vrow vrow--yes"><dt><svg class="ic"><use href="#i-check"/></svg>Best for</dt><dd>…</dd></div></dl>
   --yes green tick, --no red cross, --line amber (bottom line). */
.vrows{display:grid;gap:.45rem;margin:0}
.vrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;align-items:start;font-size:.92rem;line-height:1.45}
.vrow dt{display:inline-flex;align-items:center;gap:.35rem;font-weight:800;color:var(--ink);white-space:nowrap}
.vrow dt .ic{width:1rem;height:1rem}
.vrow--yes dt .ic{color:var(--ok)}
.vrow--no dt .ic{color:var(--bad)}
.vrow--line dt .ic{color:var(--ember-600)}
.vrow dd{margin:0;color:var(--text)}

/* proscons: pros and cons in ONE card, two halves (stacked on phones, side by side from 40rem).
   Show 3 of each; put the rest in a closed <details class="proscons__more"> only when it hides 2+ lines.
   <div class="proscons"><div class="proscons__half proscons__half--pro"><h4 class="proscons__head"><span><svg class="ic"><use href="#i-check"/></svg></span>What owners like</h4><ul><li>…</li></ul></div>
     <div class="proscons__half proscons__half--con">…</div></div> */
.proscons{display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--r-m);background:#fff;border:1px solid var(--line);overflow:hidden}
.proscons__half{padding:.85rem 1rem .95rem}
.proscons__half--pro{background:linear-gradient(180deg,#f3faf6,#fff 5rem)}
.proscons__half--con{background:linear-gradient(180deg,#fdf6f5,#fff 5rem)}
.proscons__half+.proscons__half{border-top:1px solid var(--line)}
.proscons__head{display:flex;align-items:center;gap:.45rem;font:800 .86rem/1.25 var(--body);color:var(--ink)}
.proscons__head span{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:8px;flex:none}
.proscons__head .ic{width:.95rem;height:.95rem}
.proscons__half--pro .proscons__head span{background:var(--ok-tint);color:var(--ok)}
.proscons__half--con .proscons__head span{background:var(--bad-tint);color:var(--bad)}
.proscons ul{display:grid;gap:.4rem;margin-top:.55rem}
.proscons li{position:relative;padding-left:1.05rem;font-size:.88rem;line-height:1.45;color:var(--text)}
.proscons li::before{content:"";position:absolute;left:.1rem;top:.56em;width:.42rem;height:.42rem;border-radius:999px}
.proscons__half--pro li::before{background:var(--ok)}
.proscons__half--con li::before{background:var(--bad)}
.proscons__more>summary{display:inline-flex;align-items:center;gap:.35rem;min-height:2.75rem;margin-top:.2rem;font-size:.84rem;font-weight:750;color:var(--ember-text);cursor:pointer;list-style:none}
.proscons__more>summary::-webkit-details-marker{display:none}

/* qpicks: "Our quick picks", 3 product cards (award, image, name, one line, Check price).
   Phones: thumbnail beside the text; from 40rem: three columns, image on top.
   <div class="qpicks"><article class="qcard qcard--top"><a class="qcard__media" href="#pick-1"><img …><span class="qcard__rank">1</span></a>
     <div class="qcard__body"><span class="qcard__award">Best overall</span><h3 class="qcard__name"><a class="qcard__link" href="#pick-1">…</a></h3>
       <p class="qcard__line">…</p><div class="qcard__cta"><a class="btn btn--fire" …>Check price</a></div></div></article></div> */
.qpicks{display:grid;gap:.75rem}
.qcard{position:relative;display:grid;grid-template-columns:6rem minmax(0,1fr);gap:.85rem;align-items:start;padding:.75rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1)}
.qcard--top{box-shadow:0 0 0 2px var(--ember),var(--sh-1)}
.qcard__media{position:relative;display:block;aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;background:var(--frost)}
.qcard__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qcard__rank{position:absolute;left:.35rem;top:.35rem;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:999px;background:#fff;color:var(--ink);font:800 .88rem/1 var(--display);box-shadow:var(--sh-1)}
.qcard--top .qcard__rank{background:var(--ember-600);color:#fff}
.qcard__body{display:flex;flex-direction:column;min-width:0}
.qcard__award{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:750;line-height:1.3;color:var(--ember-text)}
.qcard__name{margin-top:.15rem;font-size:1.02rem;line-height:1.25}
.qcard__link{color:var(--ink);text-decoration:none}
.qcard__link:hover{text-decoration:underline}
.qcard__line{margin-top:.25rem;font-size:.86rem;line-height:1.45;color:var(--muted)}
.qcard__cta{margin-top:.65rem}

/* tiles: icon tiles, a title and one line each (method, what owners report, key differences).
   <ul class="tiles tiles--4"><li class="tile"><span class="tile__ico"><svg class="ic"><use href="#i-users"/></svg></span><b class="tile__title">Owner reports</b><span class="tile__line">…</span></li></ul> */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.tile{display:flex;flex-direction:column;gap:.3rem;padding:.9rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1);min-width:0}
.tile__ico{display:grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:14px;background:linear-gradient(135deg,var(--glow-tint),var(--ember-tint));color:var(--ember-600)}
.tile__title{margin-top:.25rem;font:700 .98rem/1.25 var(--display);color:var(--ink)}
.tile__line{font-size:.84rem;line-height:1.4;color:var(--muted)}
.tile__n{font:800 1.45rem/1 var(--display);color:var(--ink)}

/* factors: buying-guide factors, each ONE closed <details>: icon, title and its one line in the
   summary (a summary may hold a heading), the detail inside. Keep the four summary children in this order.
   <div class="factors"><details class="factor"><summary><span class="tile__ico"><svg class="ic">…</svg></span><h3>Heat zones</h3><span class="factor__line">…</span><svg class="ic ic--sm fold__chev"><use href="#i-down"/></svg></summary>
     <ul class="factor__body"><li>…</li></ul></details></div> */
.factors{display:grid;gap:.65rem;align-items:start}
.factor{border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1)}
.factor>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:.85rem;align-items:center;min-height:2.9rem;padding:.85rem 1rem;border-radius:inherit;cursor:pointer;list-style:none}
.factor>summary::-webkit-details-marker{display:none}
.factor>summary:hover{background:#fbfcfe}
.factor>summary>.tile__ico{grid-column:1;grid-row:1/span 2}
.factor>summary>h3{grid-column:2;grid-row:1;align-self:end;font-size:1.02rem;line-height:1.25}
.factor__line{grid-column:2;grid-row:2;align-self:start;margin-top:.15rem;font-size:.86rem;line-height:1.45;color:var(--muted)}
.factor>summary>.fold__chev{grid-column:3;grid-row:1/span 2}
.factor__body{display:grid;gap:.45rem;padding:0 1rem 1rem calc(1rem + 2.6rem + .85rem);font-size:.9rem;line-height:1.55;color:var(--text)}
.factor__body li{position:relative;padding-left:1rem}
.factor__body li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.4rem;height:.4rem;border-radius:999px;background:var(--ember)}
.factor__body b{color:var(--ink)}

/* steps: numbered steps in the article column, a bold title and one line each; put a .fold inside a
   step for its detail. Scoped to .amain: site.css owns the plain .steps/.step of the homepage, about,
   contact and how-we-pick (this file loads on those too); this block also switches off that version's
   dashed line and its two phone columns. Avoid h3/p inside a step (site.css styles .step h3/.step p).
   <ol class="steps"><li class="step"><b class="step__title">Take the battery out</b><span class="step__line">…</span></li></ol> */
.amain .steps{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;counter-reset:step}
.amain .steps::before{content:none}
.amain .step{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.1rem .85rem;align-items:start;align-content:start;padding:.8rem .95rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1);counter-increment:step}
.amain .step::before{content:counter(step);grid-row:1/span 3;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--ink);color:var(--glow);font:800 1rem/1 var(--display)}
.step__title{font:700 .98rem/1.3 var(--display);color:var(--ink)}
.step__line{font-size:.88rem;line-height:1.45;color:var(--text)}
.amain .step>.fold{grid-column:2;margin-top:.4rem}

/* choose: two split cards side by side ("Choose A if / Choose B if", "For women / For men").
   <div class="choose"><div class="choose__card"><h3 class="choose__head"><span class="choose__ico"><svg class="ic">…</svg></span>Choose the blanket if</h3><ul><li>…</li></ul></div>…</div>
   --b on the second card: the cool frost icon. A <p> works in place of the <ul>. */
.choose{display:grid;gap:.75rem}
.choose__card{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.1rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1);min-width:0}
.choose__head{display:flex;align-items:center;gap:.6rem;font-size:1.04rem;line-height:1.25}
.choose__ico{display:grid;place-items:center;flex:none;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--ember-tint);color:var(--ember-600)}
.choose__card--b .choose__ico{background:var(--frost);color:#24477a}
.choose__card ul{display:grid;gap:.35rem}
.choose__card li{position:relative;padding-left:1.05rem;font-size:.9rem;line-height:1.45}
.choose__card li::before{content:"";position:absolute;left:.1rem;top:.56em;width:.42rem;height:.42rem;border-radius:999px;background:var(--ember)}
.choose__card--b li::before{background:#24477a}
.choose__card>p{font-size:.92rem;line-height:1.5;color:var(--text)}

/* specdl: the full maker-spec list, usually inside a .fold.  <dl class="specdl"><div><dt>Battery</dt><dd>…</dd></div></dl> */
.specdl{display:grid;grid-template-columns:minmax(0,1fr);margin:0;border-top:1px solid var(--line)}
.specdl>div{display:grid;align-content:start;gap:.1rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.specdl>div:last-child{border-bottom:0}
.specdl dt{font-size:.76rem;font-weight:750;color:var(--muted)}
.specdl dd{margin:0;font-size:.88rem;line-height:1.45;color:var(--ink)}

/* oq--slim: one owner quote inside a card: the words, then "handle · Owner".
   <figure class="oq oq--slim" data-sample-quote><blockquote>…</blockquote><figcaption><b>handle</b> · Owner</figcaption></figure> */
.oq--slim{padding:.85rem 1rem;border-radius:var(--r-m);background:var(--ground);border:1px solid var(--line);box-shadow:none}
.oq--slim>blockquote:first-child{margin-top:0}
.oq--slim blockquote{margin-top:.45rem;font-size:.95rem;line-height:1.55}
.oq--slim blockquote::before{content:"\201C";margin-right:.1rem;font:800 1.5rem/0 var(--display);color:var(--ember);vertical-align:-.32rem}
.oq--slim figcaption{display:block;margin-top:.45rem;padding-top:0;font-size:.82rem;line-height:1.35;color:var(--muted)}
.oq--slim figcaption b{display:inline;font-size:.82rem}

/* pickcard: one ranked product as a card. Head = photo (rank + award on it) beside the body (type
   line, name, .vrows, .kchips, .safeline, buttons); foot = .proscons, one .oq--slim quote and a .fold
   "More about this pick".
   <article class="pickcard pickcard--top" id="pick-1"><div class="pickcard__head">
     <div class="pickcard__media"><img …><span class="pickcard__rank">1</span><span class="pickcard__award"><svg class="ic">…</svg>Best overall</span></div>
     <div class="pickcard__body"><p class="pickcard__type">…</p><h3 class="pickcard__name">…</h3> .vrows .kchips .safeline <div class="pickcard__cta">…</div></div></div>
     <div class="pickcard__foot"> .proscons · figure.oq.oq--slim · details.fold </div></article> */
.pickcard{border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1);overflow:hidden}
.pickcard--top{box-shadow:0 0 0 2px var(--ember),var(--sh-2)}
.pickcard__head{display:grid;grid-template-columns:minmax(0,1fr)}
.pickcard__media{position:relative;aspect-ratio:16/10;background:var(--frost)}
.pickcard__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pickcard__rank{position:absolute;left:.75rem;top:.75rem;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:999px;background:#fff;color:var(--ink);font:800 1.15rem/1 var(--display);box-shadow:var(--sh-1)}
.pickcard--top .pickcard__rank{background:var(--ember-600);color:#fff}
.pickcard__award{position:absolute;left:.75rem;bottom:.75rem;display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;background:rgb(18 26 41/.84);color:#fff;font-size:.8rem;font-weight:750;backdrop-filter:blur(4px)}
.pickcard__award .ic{width:1rem;height:1rem;color:var(--glow)}
.pickcard__body{display:flex;flex-direction:column;gap:.7rem;padding:1rem 1.1rem 1.1rem;min-width:0}
.pickcard__type{font-size:.78rem;font-weight:700;line-height:1.35;color:var(--muted)}
.pickcard__name{margin-top:-.45rem;font-size:clamp(1.2rem,1.08rem + .5vw,1.45rem);line-height:1.18}
.pickcard__cta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.1rem}
.pickcard__foot{display:grid;gap:.75rem;padding:0 1.1rem 1.1rem}

/* teambox--slim: the article foot as one line + the four links (about, method, money, corrections). */
.teambox--slim{align-items:start;padding:1rem 1.15rem}
.teambox--slim .teambox__mark{width:2.6rem;height:2.6rem}
.teambox--slim .teambox__links{margin-top:.55rem}

@media (min-width:40rem){
  .proscons{grid-template-columns:1fr 1fr}
  .proscons__half+.proscons__half{border-top:0;border-left:1px solid var(--line)}
  .qpicks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qcard{display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
  .qcard__media{aspect-ratio:4/3;border-radius:0}
  .qcard__rank{left:.6rem;top:.6rem;width:2.2rem;height:2.2rem;font-size:1rem}
  .qcard__body{flex:1;padding:.85rem 1rem 1rem}
  .qcard__cta{margin-top:auto;padding-top:.75rem}
  .choose{grid-template-columns:1fr 1fr}
  .specdl{grid-template-columns:1fr 1fr;column-gap:1.25rem}
  .specdl>div:nth-last-child(2):nth-child(odd){border-bottom:0}
}
@media (min-width:48rem){
  .tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .factors{grid-template-columns:1fr 1fr}
  .factors>.factor:last-child:nth-child(odd){grid-column:1/-1}
  .amain .steps--grid{grid-template-columns:1fr 1fr}
  .pickcard__head{grid-template-columns:minmax(15rem,.9fr) minmax(0,1.1fr)}
  .pickcard__media{aspect-ratio:auto;min-height:17rem}
  .pickcard__foot{padding-top:1.1rem}
}
@media (max-width:47.99rem){
  .pickcard__cta .btn,.qcard__cta .btn{min-height:44px}
}