.download-card {
  align-self: end;
}

.steps li {
  grid-template-columns: 44px 102px minmax(0, 1fr);
  align-items: center;
  gap: 17px;
}

.step-screen {
  margin: 0;
  width: 102px;
  position: relative;
}

.step-screen img {
  display: block;
  width: 100%;
  border: 4px solid #172019;
  border-radius: 18px;
  box-shadow: 0 8px 20px #1d2b1c20;
}

.step-screen figcaption {
  color: var(--muted);
  display: block;
  font: 9px "DM Mono", monospace;
  letter-spacing: .3px;
  margin-top: 7px;
  text-align: center;
}

.download-card > p {
  color: var(--muted);
  margin: 0 0 16px;
  font-size: 15px;
}

.download-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 14px;
}

@media (max-width: 800px) {
  .download-card {
    margin-top: 44px;
  }

  .steps li {
    grid-template-columns: 28px 78px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
  }

  .step-screen { width: 78px; }
  .step-screen img { border-width: 3px; border-radius: 14px; }
  .step-screen figcaption { font-size: 8px; margin-top: 5px; }
  .steps h3 { font-size: 19px; }
}

.phone-gallery {
  height: 570px;
  position: relative;
  isolation: isolate;
}

.phone-gallery .phone-frame {
  background: #172019;
  padding: 8px;
  border-radius: 39px;
  box-shadow: 0 25px 60px #1d2b1c30;
  margin: 0;
  position: absolute;
  width: 236px;
}

.phone-gallery .phone-frame img { border-radius: 32px; }

.phone-gallery figcaption {
  position: absolute;
  left: 50%;
  bottom: -31px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--muted);
  font: 11px "DM Mono", monospace;
}

.phone-gallery .phone-frame-front.reveal.is-visible { z-index: 3; left: 50%; top: 20px; transform: translateX(-50%) !important; width: 260px !important; }
.phone-gallery .phone-frame-back.reveal.is-visible { z-index: 1; left: 0; top: 115px; transform: rotate(-9deg) !important; }
.phone-gallery .phone-frame-side.reveal.is-visible { z-index: 2; right: 0; top: 145px; transform: rotate(9deg) !important; }

@media (max-width: 800px) {
  .phone-gallery { height: 700px; margin-top: 45px; }
  .phone-gallery .phone-frame { width: 42vw; max-width: 180px; padding: 6px; border-radius: 30px; margin-top: 0; }
  .phone-gallery .phone-frame img { border-radius: 24px; }
  .phone-gallery .phone-frame-front.reveal.is-visible { width: 46vw !important; max-width: 200px; top: 0; transform: translateX(-50%) !important; }
  .phone-gallery .phone-frame-back.reveal.is-visible { top: 280px; transform: rotate(-7deg) !important; }
  .phone-gallery .phone-frame-side.reveal.is-visible { top: 280px; transform: rotate(7deg) !important; }
  .phone-gallery .phone-frame-front figcaption { display: none; }
  .phone-gallery figcaption { bottom: -27px; font-size: 9px; }
}