/* LIFT. polish: crisp original artwork, fully visible hero, readable step visuals. */
.hero{
  grid-template-rows:auto minmax(0,1fr);
  padding:clamp(26px,4svh,52px) clamp(12px,2vw,26px) clamp(35px,5svh,54px);
  height:calc(100svh - var(--nav));
  min-height:0;
  max-height:none;
}
.hero .hero-copy .primary{margin-top:clamp(26px,3.6svh,40px)}
.hero .hero-showcase{
  align-self:stretch;
  justify-self:center;
  width:min(1030px,89vw);
  max-width:100%;
  height:100%;
  min-height:0;
  padding:0;
  margin:clamp(35px,5svh,62px) auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero .hero-showcase img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:min(45svh,430px);
  aspect-ratio:1672/941;
  object-fit:contain;
  object-position:center;
  filter:none;
  image-rendering:auto;
}
.how{
  padding-top:clamp(120px,15svh,175px);
}
.step-card.optimise-card,.step-card.follow-card{min-height:580px}
.step-card.optimise-card .optimise-visual,
.step-card.follow-card .visual{
  flex:1 1 auto;
  display:flex;
  min-width:0;
  min-height:0;
  align-items:center;
  justify-content:center;
  padding:clamp(25px,3.1svh,36px) 0 24px;
}
.step-card.optimise-card .optimisation-screen{
  flex:0 0 auto;
  width:min(67%,162px);
  height:auto;
  max-width:162px;
  aspect-ratio:237/512;
  overflow:hidden;
}
.step-card.follow-card .mini-phone{
  flex:0 0 auto;
  width:min(70%,171px);
  height:auto;
  max-width:171px;
  aspect-ratio:1320/2868;
  padding:5px;
  overflow:hidden;
  border-radius:26px;
}
.step-card.follow-card .mini-phone img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  aspect-ratio:1320/2868;
  object-fit:cover;
  border-radius:21px;
  filter:none;
}
.method-guarantee{
  margin:clamp(72px,9svh,108px) auto 0;
  font-size:clamp(26px,2.7vw,39px);
  line-height:1.18;
  font-weight:650;
  letter-spacing:-.04em;
  max-width:900px;
}
@media(max-width:800px){
  .hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    height:calc(100svh - var(--nav));
    max-height:none;
    min-height:0;
    padding:clamp(20px,4svh,34px) 12px clamp(24px,4svh,38px);
  }
  .hero .hero-copy{flex:none}
  .hero .hero-copy .primary{margin-top:clamp(22px,3.8svh,35px)}
  .hero .hero-showcase{
    flex:1 1 auto;
    width:min(100%,720px);
    height:auto;
    max-width:720px;
    min-height:0;
    margin:clamp(26px,4.5svh,44px) auto 0;
    padding:0;
  }
  .hero .hero-showcase img{
    width:100%;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  .how{padding-top:clamp(90px,12svh,150px)}
}
@media(max-width:620px){
  .step-card.optimise-card,.step-card.follow-card{min-height:540px}
  .step-card.optimise-card .optimisation-screen{width:min(57%,158px);max-width:158px}
  .step-card.follow-card .mini-phone{width:min(59%,169px);max-width:169px}
  .method-guarantee{
    margin-top:clamp(58px,9svh,90px);
    font-size:clamp(25px,6.5vw,33px);
    line-height:1.2;
    max-width:360px;
  }
}
@media(max-height:650px){
  .hero{padding-top:clamp(12px,2svh,25px);padding-bottom:25px}
  .hero .hero-showcase{margin-top:clamp(12px,3svh,26px)}
  .hero .hero-showcase img{max-height:39svh}
}