/* Hero type hierarchy. Four clear steps on the same centred stack: headline 64px, paragraph 17px on a 600px
   measure (three lines), the buttons, then the fact row at 15/13px pushed well below. Each block is
   narrower and lighter than the one above it, and the gaps grow going down so the top three read as one group.
   Loaded after home-hero.css and eshlon-refresh.css; same selectors, later wins. */
.product-hero .hero-intro h1{max-width:760px;margin:0 auto 20px;font-size:clamp(46px,5vw,64px);line-height:1.04;letter-spacing:-.045em}
.product-hero .hero-intro h1 span{color:#8f8f8f}
.product-hero .hero-intro>p{max-width:600px;margin:0 auto;font-size:17px;line-height:1.6;letter-spacing:0;color:#b4b4b4}
.product-hero .hero-buttons{margin-top:28px;gap:22px}
.esh-hero-facts{margin:56px auto 0;max-width:640px}
.esh-hero-facts .esh-hero-fact{padding:0 26px;font-size:13px;line-height:1.5;color:#8a8a8a}
.esh-hero-facts strong{font-size:15px;line-height:1.4;letter-spacing:-.01em;color:#e6e6e6;margin-bottom:2px}
@media(max-width:760px){
 .product-hero .hero-intro h1{font-size:clamp(38px,8vw,48px);line-height:1.08;margin-bottom:16px}
 .product-hero .hero-intro>p{max-width:34ch;font-size:15px;line-height:1.6}
 .product-hero .hero-buttons{margin-top:24px}
 .esh-hero-facts{margin-top:40px}
 .esh-hero-facts .esh-hero-fact{padding:0 16px;font-size:12px}
 .esh-hero-facts strong{font-size:14px}
}