/* Editorial hierarchy and readable secondary copy across the concept family. */
body[data-ux-family]{--muted:#343832}
body:is([data-ux-family=article],[data-ux-family=diy],[data-ux-family=inspiration],[data-ux-family=review],[data-ux-family=first]) :is(.eyebrow,.meta,.byline,.category-link,.hero-top,.hero h1,.diy-hero h1,.inspo-hero h1){text-align:left;justify-content:flex-start}
body:is([data-ux-family=article],[data-ux-family=diy],[data-ux-family=inspiration],[data-ux-family=review],[data-ux-family=first]) :is(.hero,.hero-shell,.hero-top,.diy-hero,.inspo-hero){text-align:left}
body[data-ux-family] :is(.method-panel,.method-grid,.method-list,.method-foot,.method-note,.sources,.quiet-note,.field-hint,.section-top p,.section-head p,.pick-content p,.editorial-promise,.table-caption,.photo-label,.factor-weights,.facts-inline span,.metrics span,.rating-label,.award-kicker,.product-note,.score-origin,.proof-line){color:#343832}
body[data-ux-family] :is(.sources p,.sources li,.method-panel p,.method-grid p,.method-list p,.method-foot,.method-note){color:#30342e}
/* Whitespace separates editorial chapters; borders remain around controls, tables and comparisons. */
body[data-ux-family] :is(main>section,.section,.story-section,.product,.review-section,.step,.byline,.method-foot,.test-stats,.factor-weights,.pick-bottom,.total-rating,.subscores,.style-options,.product-caption,.issue,.product-section){border-top:0;border-bottom:0}
body[data-ux-family] :is(.pick-bottom,.total-rating){padding-top:16px}
body[data-ux-family] .compare-label{border-top:1px solid #d9dbd5}
body[data-ux-family] .byline{padding-top:8px}
body[data-ux-family] .method-foot{margin-top:24px;padding-top:0}
body[data-ux-family] .step{margin-bottom:0;padding-bottom:0}
body[data-ux-family] .step+.step{margin-top:64px}
body[data-ux-family] .step-top{margin-bottom:22px}
body[data-ux-family] .step-top+p{margin-top:0}
body[data-ux-family] .style-options{margin-top:26px}
body[data-ux-family] .product-caption{margin-top:20px}
body[data-ux-family] .issue+.issue{margin-top:14px}
body[data-ux-family] .tool-checks{gap:12px 24px;padding:18px 0}
body[data-ux-family] .tool-check{display:flex;align-items:flex-start;gap:10px;min-height:44px;font-size:15px;line-height:1.6;color:#252924}
body[data-ux-family] .tool-check input{flex:0 0 auto;width:21px;height:21px;margin:3px 0 0;accent-color:#30483c}
body[data-ux-family] .tool-check a{color:#252924;font-weight:500;text-decoration:underline;text-underline-offset:4px}
body[data-ux-family] .sources:has(.tool-checks){color:#252924}
body[data-ux-family] .sources:has(.tool-checks) summary{color:#252924}
body[data-ux-family] .sources:has(.tool-checks) p{color:#343832}
body[data-ux-family] .step-complete{color:#30483c}
@media(max-width:760px){
 body:is([data-ux-family=article],[data-ux-family=review],[data-ux-family=first]) .hero{align-items:stretch}
 body[data-ux-family=article] .hero :is(.eyebrow,.meta,.category-link,.byline){align-self:stretch;width:100%;margin-left:0;margin-right:0}
 body[data-ux-family=article] .hero .category-link{display:block}
 /* One model: identify it, show it, explain its scores, then give the full verdict. */
 body[data-ux-family=article] .product{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding-top:40px;padding-bottom:32px}
 body[data-ux-family=article] .product>.product-visuals,body[data-ux-family=article] .product>.product-copy{display:contents}
 body[data-ux-family=article] .product>.product-copy>*{order:4;margin-left:0;margin-right:0}
 body[data-ux-family=article] .product .product-copy>.award-line{order:0;margin:0}
 body[data-ux-family=article] .product .product-copy>h3{order:1;margin:0;font-size:31px}
 body[data-ux-family=article] .product .product-image{order:2;margin:0}
 body[data-ux-family=article] .product .factor-panel{order:3;margin:0}
 body[data-ux-family=article] .product :is(.review,.full-product-test){order:4;margin-top:0;margin-bottom:0}
 body[data-ux-family=article] .product .metrics{order:5;margin:0}
 body[data-ux-family=article] .product .fit{order:6;margin:0}
 body[data-ux-family=article] .product .proscons{order:7;margin:0}
 body[data-ux-family=article] .product .service{order:8;margin:0}
 body[data-ux-family=article] .product .product-buy{order:9;margin:0}
 body[data-ux-family=article] .product .subscores{order:10}
 body[data-ux-family] .step+.step{margin-top:52px}
 body[data-ux-family] .tool-checks{grid-template-columns:minmax(0,1fr);gap:8px}
 body[data-ux-family] .tool-check a{min-height:44px;align-content:start}
}
body[data-ux-family] .style-number{color:#65775e}
body[data-ux-family=retail] .topline b{color:#20753b}
@media(max-width:760px){body:is([data-ux-family=review],[data-ux-family=first]) :is(.hero-shell,.first-hero){align-items:stretch}}
body[data-ux-family] .eyebrow{text-align:left}