/* Mobile artwork is displayed beside its own copy, never switched by scrolling. */
.mobile-phone-stage { display: none; }

@media (max-width: 600px) {
  .scroll-story {
    background: #fff url("assets/zingo/hero-gradient.webp") center top / 100% 800px no-repeat;
    overflow: hidden;
  }
  .story-layout {
    display: block;
    padding: 0 24px;
  }
  .story-copy { display: block; padding: 0; }
  .phone-sticky { display: none; }
  .story-step,
  .story-step:not(.intro-step) {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 38px;
    padding: 36px 0 62px;
  }
  .story-step.intro-step { padding-top: 118px; }
  .story-step > div { max-width: 100%; }
  .mobile-phone-stage {
    --mobile-phone-width: min(190px, 53vw);
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    min-height: 0;
    padding: 0;
    margin: 18px 0 36px;
    background: transparent;
    backdrop-filter: none;
  }
  .mobile-phone-stage .story-phone {
    width: var(--mobile-phone-width);
    height: auto;
    aspect-ratio: .485;
    flex: none;
    transform: none;
    border: 5px solid #202020;
    border-radius: 31px;
    box-shadow: 0 0 0 2px #62605b, 0 0 0 3px #181818, 10px 18px 35px #00000010;
  }
  .mobile-phone-stage .phone-scene,
  .mobile-phone-stage .hero-deco,
  .mobile-phone-stage .save-deco,
  .mobile-phone-stage .organize-deco,
  .mobile-phone-stage .trip-deco { transition: none; transform: none; }
  .mobile-phone-stage .phone-scene { padding: 0; container-type: normal; }
  .mobile-phone-stage .supplied-screen-art { zoom: 1; }
  .mobile-phone-stage .phone-island { width: 58px; height: 16px; top: 7px; }
  .mobile-phone-stage .phone-halo { display: none; }
  .mobile-phone-stage[data-active="0"] .phone-halo {
    display: block;
    width: 100%;
    height: 70%;
    top: 70%;
    background: radial-gradient(ellipse, #ffdc2928, transparent 70%);
  }
  .mobile-phone-stage .deco-globe {
    width: 115%;
    left: -7.5%;
    top: 60%;
    filter: none;
    -webkit-mask-image: linear-gradient(#0005, transparent 90%);
    mask-image: linear-gradient(#0005, transparent 90%);
  }
  /* Preserve the original compact hero composition instead of stretching it
     to the larger feature-phone height. Decoration positions use this canvas. */
  .mobile-phone-stage[data-active="0"] {
    width: min(100%, 360px);
    aspect-ratio: 1.08;
    margin: 18px auto 36px;
  }
  .mobile-phone-stage[data-active="0"] .story-phone {
    width: 42%;
    border-width: 4px;
    border-radius: 25px;
  }
  .mobile-phone-stage[data-active="0"] .phone-island {
    width: 46px;
    height: 13px;
    top: 5px;
  }
  /* Explicitly override both old compact/expanded navigation geometries. */
  .floating-nav,
  .floating-nav.expanded {
    top: 16px;
    height: 60px;
    width: calc(100% - 32px);
    max-width: 1200px;
    padding: 7px 7px 7px 18px;
    transition: none;
  }
  .floating-nav .brand,
  .floating-nav.expanded .brand,
  .floating-nav:not(.expanded) .brand { transform: none; transition: none; }
}