/* Restore the owner's approved original five-iPhone artwork, without re-rendering the individual screens. */
.hero{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:#fff;
  height:calc(100svh - var(--nav));
  min-height:0;
  max-height:950px;
  padding:clamp(24px,4.7svh,54px) clamp(12px,2vw,26px) clamp(6px,1svh,14px);
  overflow:hidden;
  text-align:center;
}
.hero-copy{width:100%;margin-inline:auto;flex:0 0 auto;}
.hero-showcase{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  justify-self:center;
  box-sizing:border-box;
  width:min(1180px,100%);
  height:100%;
  min-height:0;
  min-width:0;
  margin:0 auto;
  padding:0;
}
.hero-showcase img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  aspect-ratio:1672/941;
  object-fit:contain;
  object-position:center;
  filter:none;
  transform:none;
}
@media(max-width:800px){
  .hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    height:calc(100svh - var(--nav));
    min-height:0;
    max-height:none;
    padding:clamp(20px,4svh,36px) 12px 22px;
  }
  .hero-showcase{
    display:flex;
    flex:1 1 0;
    align-self:center;
    width:100%;
    max-width:720px;
    min-height:0;
    height:auto;
    margin:clamp(18px,2.5svh,30px) auto 0;
    padding:0;
    align-items:center;
    justify-content:center;
  }
  .hero-showcase img{width:100%;height:auto;max-height:100%;object-fit:contain;}
}
@media(max-height:620px){
  .hero{padding-top:14px;padding-bottom:6px;}
  .hero-showcase{margin-top:8px;}
}