/* Full artwork above readable page content; no cropping or text overlap. */
body{background-color:#f3f7f6}
.hero,.student-hero{position:relative}
.hero::before,.student-hero::before{content:"";display:block;width:min(100%,1672px);aspect-ratio:1672/941;margin:0 auto 36px;background-repeat:no-repeat;background-position:center;background-size:contain;border-radius:0}
/* Homepage uses home.css; lesson uses live-lesson.css. */
body.sos-home .hero{padding-top:0}
body.sos-home .hero::before{background-image:url('/assets/backgrounds/welcome.png')}
body.sos-home .visual{display:none}
body.sos-home .hero-grid{grid-template-columns:1fr;max-width:960px;text-align:center}
body.sos-home .hero-grid p{margin-left:auto;margin-right:auto}
body.sos-home .actions{justify-content:center}
body.sos-home h1 br{display:none}
body.sos-student .student-hero{padding-top:0;background:#e9f2f0}
body.sos-student .student-hero::before{background-image:url('/assets/backgrounds/journey.png')}
body.sos-lesson .hero{padding-top:0}
body.sos-lesson .hero::before{background-image:url('/assets/backgrounds/features.png')}
@media(max-width:640px){.hero::before,.student-hero::before{margin-bottom:24px}body.sos-home h1{font-size:32px}}

/* Keep banners proportional and learning content readable. */
.hero::before,.student-hero::before{max-width:1080px}
body.sos-student .student-hero{color:#173f43}
body.sos-student .student-hero h1,body.sos-student .student-hero .hero-stat strong{color:#173f43}
body.sos-student .student-hero .lead,body.sos-student .student-hero .hero-stat small{color:#3f6265}
body.sos-student .student-hero .eyebrow{color:#855d0d}
body.sos-student .student-hero .hero-stat>div{background:#fff;border:1px solid #cadcda}