/* Use the same phone proportions, gallery sizes and spacing as Whileaway. */
.skytrove-page .st-phone {
  position: relative;
  padding: 2.8%;
  border: 1px solid #646468;
  border-radius: 16% / 7.4%;
  background: #080808;
  box-shadow: inset 0 0 0 2px #222225, inset 0 0 0 3px #050505;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.1)) drop-shadow(0 22px 40px rgba(0,0,0,.3));
}
.skytrove-page .st-phone::after {
  content: "";
  position: absolute;
  top: 3.2%; left: 34.7%; width: 30.6%; height: 4.1%;
  border-radius: 999px; background: #000; pointer-events: none;
}
.skytrove-page .st-phone picture {
  display: block; width: 100%; max-width: none; margin: 0;
  border-radius: 14% / 6.5%; overflow: hidden; filter: none;
}
.skytrove-page .st-phone img {
  display: block; width: 100%; height: auto; border-radius: 0; filter: none;
}
.skytrove-page .wa-gallery__item .st-phone {
  box-sizing: border-box; width: 100%; max-width: 260px; margin-inline: auto;
  padding: 7px;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.1)) drop-shadow(0 16px 28px rgba(0,0,0,.28));
}
.skytrove-page .st-preview-note {
  color: var(--ink-muted); max-width: 75ch; font-size: var(--step--1);
  line-height: 1.6; margin: var(--s-7) 0 0;
}
.skytrove-page .st-preview-note + .st-preview-note { margin-top: var(--s-3); }
@media (max-width: 768px) {
  .skytrove-page .wa-gallery__item .st-phone { max-width: min(220px,58vw); padding: 6px; }
}

/* Three complementary app screens beneath the Moon feature. */
.skytrove-page .st-experience-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; margin-inline: auto; }
@media (max-width: 768px) { .skytrove-page .st-experience-gallery { grid-template-columns: 1fr; } }

/* Give the featured Moon screenshot more breathing room on desktop. */
@media (min-width: 769px) {
  .skytrove-page .app-shot { width: min(316px, 100%); }
}