/* Tablet hero copy stays inside the opaque image compensation area. */
@media(min-width:681px) and (max-width:1100px){
 html body :is(.detail-hero,.business-hero,.results-hero) :is(.detail-hero-description,.business-hero-lead,.results-hero-description){font-size:16px!important;line-height:1.9!important;letter-spacing:0!important;color:#435b63!important;max-width:100%!important;white-space:normal!important;overflow-wrap:normal;text-wrap:wrap}
 html body :is(.detail-hero-meta,.business-hero-meta,.results-hero-meta){margin-bottom:14px!important}
 html body :is(.detail-hero,.business-hero,.results-hero) h1{line-height:1.45!important}
 html body :is(.detail-hero,.business-hero,.results-hero) :is(.detail-hero-description,.business-hero-lead,.results-hero-description){margin-top:16px!important;margin-bottom:0!important}
 html body .detail-hero-button{margin-top:22px!important}
}
@media(min-width:821px) and (max-width:1100px){
 html body :is(.detail-hero,.business-hero,.results-hero){--detail-hero-height:380px;--results-hero-height:380px;--hero-copy-width:48%;--hero-compensation-width:46%;--hero-compensation-fade-width:40px;--hero-media-boundary-width:40px}
 html body :is(.detail-hero-grid,.business-hero,.results-hero){height:380px!important;min-height:380px!important}
 html body :is(.detail-hero-copy,.business-hero-copy,.results-hero-copy){width:48%!important;padding:60px 18px 30px clamp(28px,3.4vw,38px)!important;justify-content:center!important;min-width:0}
 html body :is(.business-hero-copy-inner,.results-hero-copy-inner){top:0!important;width:100%!important}
 html body :is(.detail-hero,.business-hero,.results-hero) h1{font-size:32px!important;letter-spacing:0!important}
 html body :is(.detail-hero,.business-hero,.results-hero) :is(.detail-hero-tagline){font-size:16px!important;line-height:1.75!important;white-space:normal!important}
 html body :is(.detail-hero--about,.detail-hero--contact,.business-hero)::before,
 html body:is(.page-purchase,.page-brand-sales,.page-amazon,.page-oem) .detail-hero-media::before,
 html body .results-hero-media::after{width:calc(46% + 40px)!important;background:linear-gradient(90deg,#fcfcfa 0%,#fcfcfa calc(100% - 40px),rgba(252,252,250,0) 100%)!important}
 html body :is(.detail-hero-description-line,.brand-copy-tablet-readable>span,.oem-intro-tablet-readable>span,.company-hero-readable-lines>span){white-space:normal!important}
}
@media(min-width:821px) and (max-width:1100px){
 html body.page-company .detail-hero-copy{width:100%!important}
 html body .results-hero::before{width:calc(46% + 40px)!important;background:linear-gradient(90deg,#fcfcfa 0%,#fcfcfa calc(100% - 40px),rgba(252,252,250,0) 100%)!important}
 html body :is(.business-hero-copy-inner,.results-hero-copy-inner){transform:translateY(-18px)}
}
@media(min-width:681px) and (max-width:1100px){
 html body[class] :is(.detail-hero,.business-hero,.results-hero) :is(.detail-hero-description,.business-hero-lead,.results-hero-description){font-size:16px!important;line-height:1.9!important}
 html body .results-hero-description>.jp-phrase{display:inline-block!important;white-space:nowrap!important}
}
@media(min-width:821px) and (max-width:900px){html body .results-hero-description>br{display:none}}

/* Shared tablet title origin: independent of paragraph length; TOP MV excluded. */
@media(min-width:821px) and (max-width:1279px){
html body[class] :is(.detail-hero-copy,.business-hero-copy,.results-hero-copy){display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important;align-self:stretch!important;padding-top:86px!important;padding-bottom:24px!important;padding-left:clamp(28px,3.4vw,38px)!important;transform:none!important;translate:none!important;box-sizing:border-box}
html body[class] :is(.business-hero-copy-inner,.results-hero-copy-inner){position:static!important;top:auto!important;transform:none!important;translate:none!important;margin-top:0!important;padding-top:0!important}
html body[class] :is(.detail-hero-meta,.business-hero-meta,.results-hero-meta){height:18px!important;min-height:18px!important;margin:0 0 16px!important;line-height:18px!important;flex-shrink:0}
html body[class] :is(.detail-hero,.business-hero,.results-hero) .section-kicker{margin:0!important;line-height:18px!important}
html body[class] :is(.detail-hero,.business-hero,.results-hero) h1{margin:0!important;align-self:flex-start!important;text-align:left!important}
}
@media(min-width:1101px) and (max-width:1279px){html body[class] :is(.detail-hero-copy,.business-hero-copy,.results-hero-copy){padding-left:5vw!important}}

/* Portrait tablets follow the ABOUT hero image height and reading origin. */
@media(min-width:681px) and (max-width:820px){
html body[class][class] :is(.detail-hero,.business-hero,.results-hero){height:auto!important;min-height:0!important}
html body[class][class] .detail-hero-grid{display:flex!important;flex-direction:column!important;gap:0!important;height:auto!important;min-height:0!important}
html body[class][class] :is(.detail-hero-media,.business-hero-media,.results-hero-media){position:relative!important;inset:auto!important;order:0!important;width:100%!important;height:56.25vw!important;min-height:0!important;aspect-ratio:16/9!important;margin:0!important;flex:none!important;overflow:hidden}
html body[class][class] :is(.detail-hero-copy,.business-hero-copy,.results-hero-copy){position:relative!important;order:1!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:20px 32px 34px!important;transform:none!important;translate:none!important;box-sizing:border-box}
html body[class][class] :is(.business-hero-copy-inner,.results-hero-copy-inner){width:100%!important;position:static!important;transform:none!important;translate:none!important;margin:0!important;padding:0!important}
html body[class][class] :is(.detail-hero-meta,.business-hero-meta,.results-hero-meta){height:18px!important;min-height:18px!important;margin:0 0 16px!important;line-height:18px!important;flex-shrink:0}
html body[class][class] :is(.detail-hero,.business-hero,.results-hero) .section-kicker{margin:0!important;line-height:18px!important}
html body[class][class] :is(.detail-hero,.business-hero,.results-hero) h1{margin:0!important;text-align:left!important}
}
@media(min-width:821px) and (max-width:1279px){html body[class][class] :is(.detail-hero-copy,.business-hero-copy,.results-hero-copy){padding-top:74px!important}}@media(min-width:681px) and (max-width:820px){html body[class][class] :is(.detail-hero-copy,.business-hero-copy,.results-hero-copy){padding-top:8px!important}}