/* The five iPhones stand upright: swivel around the vertical axis only. */
.fan {
  perspective: 880px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  isolation: isolate;
}
.fan > .phone {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  transition: none;
  box-shadow: 0 16px 32px -18px rgba(10, 19, 35, .35), 0 0 0 1px #565a5e;
}
.fan > .p1 { transform: translateY(19px) rotateY(43deg); z-index: 1; }
.fan > .p2 { transform: translateY(9px) rotateY(25deg); z-index: 3; }
.fan > .p3 { transform: translateY(0) rotateY(0deg); z-index: 5; }
.fan > .p4 { transform: translateY(9px) rotateY(-25deg); z-index: 3; }
.fan > .p5 { transform: translateY(19px) rotateY(-43deg); z-index: 1; }
.fan > .phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}
/* Never allow the glass icon or progress preview to stretch. */
.step-card .visual {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
}
.step-card .icon-visual > img {
  flex: none;
  display: block;
  width: clamp(125px, 18vw, 208px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain;
  border-radius: 21%;
}
.step-card .mini-phone {
  flex: none;
  display: block;
  position: relative;
  width: min(39%, 166px);
  max-width: 166px;
  height: auto;
  aspect-ratio: 237 / 512;
  overflow: hidden;
  border-radius: 26px;
  padding: 5px;
  background: #16181d;
  box-shadow: 0 20px 35px -24px rgba(0, 0, 0, .45);
}
.step-card .mini-phone img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 237 / 512;
  object-fit: cover;
  border-radius: 21px;
}
@media (max-width: 800px) {
  .fan {
    perspective: 650px;
    perspective-origin: 50% 52%;
  }
  .fan > .p1 { transform: translateY(9px) rotateY(43deg); }
  .fan > .p2 { transform: translateY(5px) rotateY(26deg); }
  .fan > .p3 { transform: translateY(0) rotateY(0deg); }
  .fan > .p4 { transform: translateY(5px) rotateY(-26deg); }
  .fan > .p5 { transform: translateY(9px) rotateY(-43deg); }
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 3svh, 32px) 16px 18px;
    height: calc(100svh - var(--nav));
  }
  .hero-copy { flex: none; }
  .fan {
    flex: 0 0 auto;
    align-self: center;
    width: min(100%, 550px);
    height: auto;
    margin: clamp(24px, 4.5svh, 48px) auto 0;
    padding: 0;
  }
  .fan > .phone { width: 28%; flex-basis: 28%; margin-inline: -5%; }
  .fan > .p3 { width: 31%; flex-basis: 31%; }
  .step-card .icon-visual > img { width: min(56vw, 196px) !important; }
  .step-card .mini-phone { width: min(39%, 152px); }
}