/* Fit the complete first-view message above the persistent mobile CTA. */
.hero-visual{
 --hero-density:137;
 --hero-unit:min(6.6px,1vw,calc((100svh - 72px)/137));
}
.hero-heading{padding:calc(var(--hero-unit)*4.1) calc(var(--hero-unit)*5.6) calc(var(--hero-unit)*4.8)}
.hero-years{font-size:min(44px,calc(var(--hero-unit)*7.7));padding-top:0;line-height:1;transform:translateY(calc(var(--hero-unit)*2))}
.hero-years b{font-size:min(88px,calc(var(--hero-unit)*16));line-height:.9}
.hero-rank{font-size:min(64px,calc(var(--hero-unit)*11));margin-top:calc(var(--hero-unit)*-3.85);line-height:1.05}
.hero-rank>span{font-size:min(104px,calc(var(--hero-unit)*19))}
.hero-rank b{font-size:min(126px,calc(var(--hero-unit)*23))}
.hero-rank sup{font-size:clamp(9px,calc(var(--hero-unit)*2.6),13px)}
.hero-rank .rank-of{font-size:min(25px,calc(var(--hero-unit)*5.1))}
.hero-intro{font-size:min(46px,calc(var(--hero-unit)*8));margin-top:calc(var(--hero-unit)*3.85);line-height:1.4}
.hero-brand{margin-top:calc(var(--hero-unit)*4.87)}
.hero-brand img{display:block;width:min(100%,calc(var(--hero-unit)*96));height:auto;margin-inline:auto}
.hero-medal{width:min(170px,calc(var(--hero-unit)*29.7));top:calc(var(--hero-unit)*4.6);right:calc(var(--hero-unit)*3.1)}
.hero-benefits{padding:calc(var(--hero-unit)*4.1) 5px calc(var(--hero-unit)*5.1);align-items:center}
.hero-benefits span{font-size:clamp(10px,calc(var(--hero-unit)*2.82),15px);line-height:1.6}
.hero-benefits strong{font-size:min(46px,calc(var(--hero-unit)*7.7));line-height:1}
.hero-benefits strong b{font-size:min(84px,calc(var(--hero-unit)*16.4))}
@media(max-width:1040px){.hero-visual{--hero-unit:min(6.6px,1vw,calc((100svh - 208px)/137))}}
/* A short, wide screen uses the width instead of squeezing a tall stack. */
@media(max-height:540px) and (min-aspect-ratio:11/10){
 .hero-visual{--hero-density:86;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);--hero-unit:min(6.6px,1vw,calc((100svh - 72px)/86))}
 .hero-heading{padding-top:calc(var(--hero-unit)*3);padding-bottom:calc(var(--hero-unit)*3)}
 .hero-years{transform:none}
 .hero-rank{margin-top:calc(var(--hero-unit)*-1.7)}
 .hero-intro{font-size:min(34px,calc(var(--hero-unit)*8));margin-top:calc(var(--hero-unit)*2)}
 .hero-intro br{display:none}
 .hero-brand{margin-top:calc(var(--hero-unit)*3)}
 .hero-medal{width:min(110px,calc(var(--hero-unit)*22));top:calc(var(--hero-unit)*3);right:calc(var(--hero-unit)*3)}
 .hero-benefits{grid-template-columns:1fr;padding:8px 10px;gap:8px;border-top:0;border-left:1px solid #b0d2e04d}
 .hero-benefits>div{border-right:0;border-bottom:1px solid #b0d2e04d;padding-bottom:8px}
 .hero-benefits>div:last-child{padding-bottom:0}
 .hero-benefits strong b{font-size:min(70px,calc(var(--hero-unit)*16.4))}
 .hero-benefits span{font-size:clamp(10px,calc(var(--hero-unit)*2.82),14px)}
 .hero-audience{font-size:13px;padding:6px}
 .mobile-header{padding:4px 14px}
 .mobile-header img{width:100px}
 .mobile-header>a:last-child{font-size:12px;padding:6px 10px}
 .mobile-sticky{padding-top:4px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
 .mobile-sticky>span{display:none}
 .mobile-sticky .cta{padding:7px 4px;font-size:17px}
 .page-shell{padding-bottom:60px}
}
/* Reserve more space for the main message on compact portrait phones too. */
@media(max-width:1040px) and (max-height:600px){
 .hero-audience{font-size:13px;padding:6px}
 .mobile-header{padding:4px 14px}
 .mobile-header img{width:100px}
 .mobile-header>a:last-child{font-size:12px;padding:6px 10px}
 .mobile-sticky{padding-top:4px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
 .mobile-sticky>span{display:none}
 .mobile-sticky .cta{padding:7px 4px;font-size:17px}
 .page-shell{padding-bottom:60px}
}

/* Make the audience banner more prominent without crowding the first view. */
.hero-audience{font-size:22px;font-weight:900;line-height:1.45;letter-spacing:.03em;padding:12px 10px}
@media(max-width:600px){.hero-audience{font-size:clamp(14.5px,4.25vw,17px);line-height:1.5;letter-spacing:.01em;padding:10px 6px}}
@media(max-width:1040px) and (max-height:600px){.hero-audience{font-size:clamp(14px,4.25vw,16px);padding:7px 6px}}
@media(max-height:540px) and (min-aspect-ratio:11/10){.hero-audience{font-size:16px;padding:6px}}