/* Selected hero: option 01, left aligned. */
.hero{padding-top:66px;padding-bottom:38px}
.hero .hero-intro{display:block;max-width:var(--text-width);margin:0 auto 48px}
.hero h1{font-size:clamp(2.4rem,4.55vw,4rem);line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.hero h1>span{display:block}
.hero h1 .hero-title-primary{color:var(--text)}
.hero .hero-description{font-size:1rem;line-height:1.7;max-width:660px;margin:25px 0 0;text-wrap:pretty}
.hero .signal-figure canvas{height:225px}
#problem{border-top:0;margin-top:0;padding-top:68px}
@media(min-width:1500px){.hero{padding-top:83px}}
@media(max-width:800px){
  .hero{padding-top:43px;padding-bottom:25px}
  .hero h1{font-size:clamp(2.1rem,5.5vw,2.8rem);line-height:1.12}
  .hero .hero-intro{display:block;margin-bottom:35px}
  .hero .hero-description{font-size:1rem;line-height:1.65;max-width:600px;margin-top:21px}
  .hero .signal-figure canvas{height:178px}
  #problem{padding-top:49px}
}
@media(max-width:520px){
  .hero h1{font-size:clamp(2rem,7.65vw,2.5rem);line-height:1.13}
  .hero .hero-description{margin-top:21px;line-height:1.65}
  .hero .signal-figure canvas{height:156px}
}
@media print{.hero{padding-top:20px}}