/* Säästö-sivun hero: etusivun (.h4) mittakaava ja syvyys. Vain saasto/index.html lataa tämän. */
.hero.sub.sa-h{min-height:max(720px,100svh);padding:clamp(112px,12vh,148px) 0 clamp(64px,9vh,104px)}
.hero.sub.sa-h::before{background:
  radial-gradient(52% 62% at 76% 44%,rgba(31,203,79,.13),transparent 70%),
  radial-gradient(30% 34% at 88% 16%,rgba(240,90,70,.07),transparent 72%),
  radial-gradient(60% 50% at 0% 100%,rgba(31,203,79,.05),transparent 70%)}
.hero.sub.sa-h .wrap{grid-template-columns:minmax(0,600px) minmax(0,1fr)}
.hero.sub.sa-h h1.v3{font-size:clamp(46px,min(4.7vw,8.2vh),76px);line-height:.97;letter-spacing:-.025em;margin-top:20px}
.hero.sub.sa-h .lead.sub{margin-top:26px;max-width:44ch;font-size:clamp(18px,1.45vw,21px);line-height:1.5}
.hero.sub.sa-h .hero-cta.v3{margin-top:32px}
.hero.sub.sa-h .hero-cta .btn{font-size:18px;padding:18px 26px 18px 30px;box-shadow:0 0 0 rgba(31,203,79,0),0 18px 50px -14px rgba(31,203,79,.55)}
.hero.sub.sa-h .tbox{background:none;border-left:0;padding:0;margin-top:24px;max-width:56ch;font-size:14.5px}
/* kangas syttyy pehmeästi kuten etusivun pallo */
/* Puhdas CSS-animaatio: ei riipu JS:n lisäämästä luokasta, joten välimuistissa oleva vanha
   sa-hero.js tai JS-virhe ei voi jättää kangasta näkymättömäksi (lepotila = opacity 1). */
@keyframes sa-h-in{from{opacity:0}to{opacity:1}}
.hero.sub.sa-h .hero-world canvas{animation:sa-h-in 1.4s cubic-bezier(.2,.7,.2,1) .1s both}
@media (prefers-reduced-motion:reduce){.hero.sub.sa-h .hero-world canvas{animation:none}}
@media (max-width:1020px){
  .hero.sub.sa-h{min-height:0;padding-bottom:24px}
  .hero.sub.sa-h .wrap{grid-template-columns:minmax(0,1fr)}
  .hero.sub.sa-h .hero-world{height:min(132vw,580px);margin-top:8px}
}
@media (max-width:640px){
  .hero.sub.sa-h h1.v3{font-size:clamp(34px,10.4vw,58px)}
  .hero.sub.sa-h .lead.sub{font-size:17px}
  .hero.sub.sa-h .hero-cta .btn{font-size:16px;padding:15px 20px 15px 24px}
  .hero.sub.sa-h .tbox{margin-inline:auto}
}