/* ---------- HERO PHONE DISPLAY FALLBACK ---------- */
/* The display stays legible even while a story asset is loading or unavailable. */
.device-phone__screen {
  background: var(--surface);
}

.device-phone__media {
  background: var(--surface);
}

.device-story__slide--brand {
  background: var(--surface);
}

.device-story__slide--quote {
  background: var(--surface);
}

/* Keep the active story above the display fallback in all browsers. */
.device-story__slide.is-active {
  visibility: visible;
  opacity: 1;
}