/* Four app views share a stationary phone and advance with the page. */
#FrameHome > .mura-discovery-story {
  --story-top: 5rem;
  padding: 0 max(3rem, calc((100% - 70rem) / 2));
  overflow: visible;
}
#FrameHome .mura-discovery-story__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "intro phone";
  grid-template-rows: auto;
  column-gap: clamp(2rem, 5vw, 6rem);
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-block: 3rem;
}
#FrameHome .mura-discovery-story__intro { grid-area: intro; align-self: center; }
#FrameHome .mura-discovery-story #FrameInsightTitle { max-width: 28rem; margin: 0; text-align: left; }
#FrameHome .mura-discovery-story__intro > p {
  max-width: 38ch;
  margin: 1.5rem 0 0;
  color: #625f59;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}
#FrameHome .mura-discovery-story__phone { grid-area: phone; min-width: 0; align-self: center; }
#FrameHome .mura-discovery-story__viewer { display: contents; }
#FrameHome .mura-discovery-story__screen { margin: 0 auto 2rem; width: 100%; }
#FrameHome .mura-discovery-story__screen img { display: block; width: 100%; height: auto; }
#FrameHome .mura-discovery-story.is-enhanced .mura-discovery-story__phone {
  position: relative;
  width: min(100%, 21rem);
  aspect-ratio: 708 / 1410;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
}
#FrameHome .mura-discovery-story.is-enhanced .mura-discovery-story__screen {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
/* Keep the outgoing image opaque beneath the incoming one: no blank fade. */
#FrameHome .mura-discovery-story.is-enhanced .mura-discovery-story__screen.is-previous { opacity: 1; z-index: 1; }
#FrameHome .mura-discovery-story.is-enhanced .mura-discovery-story__screen.is-active { opacity: 1; z-index: 2; }
#FrameHome .mura-discovery-story.is-enhanced .mura-discovery-story__screen img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 144.63277%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -4.1015625%);
}
#FrameHome > .mura-discovery-story.is-scrollable { height: 330svh; }
#FrameHome .mura-discovery-story.is-scrollable .mura-discovery-story__stage {
  position: sticky;
  top: var(--story-top);
  height: calc(100svh - var(--story-top));
  box-sizing: border-box;
  padding-block: 2rem;
}
#FrameHome .mura-discovery-story.is-scrollable .mura-discovery-story__phone {
  width: auto;
  height: min(100%, 44rem);
  max-width: 100%;
}
@media (max-width: 960px) {
  #FrameHome > .mura-discovery-story { --story-top: 4rem; padding-inline: 1.5rem; }
  #FrameHome .mura-discovery-story__stage {
    max-width: 36rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "intro" "viewer";
    gap: 1rem;
    padding-block: 2.5rem;
  }
  #FrameHome .mura-discovery-story__intro { padding: 0; text-align: center; }
  #FrameHome .mura-discovery-story #FrameInsightTitle { max-width: 27rem; margin-inline: auto; text-align: center; font-size: clamp(1.625rem, 5.6vw, 2.25rem); }
  #FrameHome .mura-discovery-story__intro > p { max-width: 42ch; margin: .875rem auto 0; font-size: .9375rem; line-height: 1.5; }
  #FrameHome .mura-discovery-story__viewer {
    display: grid;
    grid-area: viewer;
    grid-template-areas: "phone";
    grid-template-rows: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
  }
  #FrameHome .mura-discovery-story.is-scrollable .mura-discovery-story__stage { display: contents; }
  #FrameHome .mura-discovery-story.is-scrollable .mura-discovery-story__intro { max-width: 36rem; margin-inline: auto; padding-block: 2rem; }
  #FrameHome .mura-discovery-story.is-scrollable .mura-discovery-story__viewer {
    position: sticky;
    top: var(--story-top);
    height: calc(100svh - var(--story-top));
    box-sizing: border-box;
    padding-block: 1rem;
  }
  #FrameHome .mura-discovery-story.is-scrollable .mura-discovery-story__phone { height: 100%; max-height: 48rem; }
}
@media (prefers-reduced-motion: reduce) {
  #FrameHome .mura-discovery-story * { transition: none !important; }
}