/* A shared reading origin for laptop page heroes. */
@media(min-width:1101px) and (max-width:1800px){
 html body[class] :is(.detail-hero,.business-hero,.results-hero){--detail-hero-height:clamp(420px,34vw,520px);--results-hero-height:clamp(420px,34vw,520px);--hero-copy-width:46%;--hero-copy-x:clamp(48px,5vw,80px);--hero-compensation-width:44%;--hero-compensation-fade-width:48px;--hero-media-boundary-width:48px}
 html body[class] :is(.detail-hero-grid,.business-hero,.results-hero){height:var(--detail-hero-height)!important;min-height:0!important}
 html body[class] :is(.detail-hero,.business-hero,.results-hero)>.breadcrumb{top:16px!important;left:var(--hero-copy-x)!important}
 html body[class] :is(.detail-hero-copy,.business-hero-copy,.results-hero-copy){width:46%!important;height:100%;padding:86px 24px 30px var(--hero-copy-x)!important;justify-content:flex-start!important;align-items:flex-start!important;box-sizing:border-box;text-align:left}
 html body.page-company .detail-hero-copy{width:100%!important}
 html body[class] :is(.business-hero-copy-inner,.results-hero-copy-inner){width:100%;position:static;transform:none}
 html body[class] :is(.detail-hero-meta,.business-hero-meta,.results-hero-meta){margin:0 0 16px!important;min-height:18px;line-height:18px}
 html body[class] :is(.detail-hero,.business-hero,.results-hero) .section-kicker{margin:0!important;font-size:12px!important;line-height:18px!important;letter-spacing:.16em}
 html body[class] :is(.detail-hero,.business-hero,.results-hero) h1{margin:0!important;font-size:clamp(34px,2.64vw,36px)!important;line-height:1.45!important;letter-spacing:.02em!important;text-align:left;text-wrap:wrap}
 html body[class] :is(.detail-hero,.business-hero,.results-hero) .detail-hero-tagline{margin:16px 0 0!important;font-size:16px!important;line-height:1.8!important;letter-spacing:0!important;white-space:normal!important}
 html body[class] :is(.detail-hero,.business-hero,.results-hero) :is(.detail-hero-description,.business-hero-lead,.results-hero-description){width:100%!important;max-width:100%!important;margin:18px 0 0!important;font-size:16px!important;line-height:1.9!important;letter-spacing:0!important;color:#435b63!important;white-space:normal!important;text-wrap:wrap}
 html body[class] :is(.detail-hero,.business-hero,.results-hero) :is(.detail-hero-button,.button){margin-top:24px!important;font-size:14px!important;line-height:1.5!important;min-height:48px;box-sizing:border-box;white-space:nowrap}
 html body[class] :is(.detail-hero-description-line,.detail-hero-description .jp-phrase){white-space:normal!important}
 html body[class] :is(.detail-hero--about,.detail-hero--contact,.business-hero,.results-hero)::before,
 html body:is(.page-purchase,.page-brand-sales,.page-amazon,.page-oem) .detail-hero-media::before{width:calc(44% + 48px)!important;background:linear-gradient(90deg,#fcfcfa 0%,#fcfcfa calc(100% - 48px),rgba(252,252,250,0) 100%)!important}
}
@media(min-width:1600px) and (max-width:1800px){
 html body:is(.page-purchase,.page-brand-sales,.page-amazon,.page-oem) .detail-hero-grid{grid-template-columns:1fr}
 html body:is(.page-purchase,.page-brand-sales,.page-amazon,.page-oem) .detail-hero-media{position:absolute;inset:0;grid-column:1;width:100%;height:100%}
 html body:is(.page-purchase,.page-brand-sales,.page-amazon,.page-oem) .detail-hero-media>img{position:absolute;top:0;right:0;width:auto;height:100%;max-width:none;object-fit:contain;object-position:right center}
}
@media(min-width:1101px) and (max-width:1800px){
 html body:is(.page-purchase,.page-brand-sales,.page-amazon,.page-oem) .detail-hero-copy{background:transparent!important}
}
/* Fade from each image's actual edge, even when its aspect ratio leaves a margin. */
@media(min-width:1101px) and (max-width:1800px){
 html body:is(.page-purchase,.page-brand-sales,.page-amazon,.page-oem) .detail-hero-media>img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 16px,rgba(0,0,0,.65) 40px,#000 72px);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 16px,rgba(0,0,0,.65) 40px,#000 72px);
 }
}
/* Keep the white transition clear of the artwork in these wide scenes. */
@media(min-width:1101px) and (max-width:1800px){
 html body:is(.page-business,.page-results,.page-contact) :is(.business-hero-copy,.results-hero-copy,.detail-hero-copy){width:40%!important}
 html body:is(.page-business,.page-results,.page-contact) :is(.business-hero,.results-hero,.detail-hero--contact)::before{
  width:calc(40% + 32px)!important;
  background:linear-gradient(90deg,#fcfcfa 0%,#fcfcfa calc(100% - 32px),rgba(252,252,250,.6) calc(100% - 18px),rgba(252,252,250,0) 100%)!important;
 }
}
@media(min-width:1101px) and (max-width:1250px){
 html body:is(.page-business,.page-results,.page-contact) :is(.business-hero-copy,.results-hero-copy,.detail-hero-copy){width:38%!important}
 html body:is(.page-business,.page-results,.page-contact) :is(.business-hero,.results-hero,.detail-hero--contact)::before{width:calc(36% + 24px)!important;background:linear-gradient(90deg,#fcfcfa 0%,#fcfcfa calc(100% - 24px),rgba(252,252,250,0) 100%)!important}
}
@media(min-width:1101px) and (max-width:1250px){
 html body.page-results .results-hero-description>.jp-phrase{display:inline-block;white-space:nowrap!important}
 html body.page-results .results-hero-description>br{display:none}
}

/* Shared laptop title origin: independent of paragraph length; TOP MV excluded. */
@media(min-width:1280px) and (max-width:1800px){
html body[class][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:72px!important;padding-bottom:32px!important;padding-left:clamp(64px,6vw,100px)!important;transform:none!important;translate:none!important;box-sizing:border-box}
html body[class][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][class] :is(.detail-hero-meta,.business-hero-meta,.results-hero-meta){height:20px!important;min-height:20px!important;margin:0 0 16px!important;line-height:20px!important;flex-shrink:0}
html body[class][class] :is(.detail-hero,.business-hero,.results-hero) .section-kicker{margin:0!important;line-height:20px!important}
html body[class][class] :is(.detail-hero,.business-hero,.results-hero) h1{margin:0!important;align-self:flex-start!important;text-align:left!important}
}