/* Decorative fallback only: never substitute unrelated app screens or asset notes. */
.nesting-phone:has(> .nesting-phone-missing) { display: none; }
.home-experience .health-inner:has(.nesting-phone-missing) { grid-template-columns: .9fr 1.1fr; }
.home-experience .health-inner:has(.nesting-phone-missing) .data-card { grid-column: 2; }
@media (max-width: 620px) {
  .home-experience .health-inner:has(.nesting-phone-missing) { grid-template-columns: 1fr; }
  .home-experience .health-inner:has(.nesting-phone-missing) .data-card { grid-column: 1; }
}
.nesting-phone .nesting-phone-missing,
.home-experience .lens-phone .nesting-phone-missing {
  border: 0;
  border-radius: 28px;
  background: radial-gradient(ellipse at 28% 30%, #f3dfe7 0, transparent 58%),
    radial-gradient(ellipse at 75% 70%, #dae9ed 0, transparent 60%), #faf5f0;
}
.home-experience .image-slot.image-unavailable {
  background: radial-gradient(ellipse at 28% 30%, #f3dfe7 0, transparent 58%),
    radial-gradient(ellipse at 75% 70%, #dae9ed 0, transparent 60%), #faf5f0;
}
.nesting-phone img[hidden], .image-slot img[hidden] { display: none; }

/* Keep the hero portrait readable; the phone overlaps only its outer edge. */
.home-experience .hero-cinematic .hero-lifestyle {
  left: 0;
  right: auto;
  top: 50%;
  width: 64%;
  height: auto;
  aspect-ratio: 4 / 5;
  transform: translateY(-50%);
}
.home-experience .hero-cinematic .hero-phone {
  width: 44%;
  right: 0;
  bottom: 4%;
  margin: 0;
}

/* Tablet: separate columns, rather than layering the phone over the subject. */
@media (min-width: 621px) and (max-width: 900px) {
  .home-experience .hero-cinematic .hero-composition {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 0;
  }
  .home-experience .hero-cinematic .hero-lifestyle,
  .home-experience .hero-cinematic .hero-phone {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }
}

/* Mobile: the full portrait and static phone occupy separate rows. */
@media (max-width: 620px) {
  .home-experience .hero-cinematic .hero-composition {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 20px;
    min-height: 0;
  }
  .home-experience .hero-cinematic .hero-lifestyle {
    position: relative;
    inset: auto;
    width: min(100%, 400px);
    height: auto;
    aspect-ratio: 1;
    transform: none;
  }
  .home-experience .hero-cinematic .hero-phone {
    position: relative;
    inset: auto;
    width: min(80%, 280px);
    justify-self: center;
  }
}