/* Native UI lifted with the same crops as the App Store campaign v7.
   The source images remain intact; only the decorative viewport is cropped.
   Keep these layers separate from phone overflow and interactive controls. */
.app-popout {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  border-radius: 18px;
  box-shadow: 0 18px 32px -12px #142b3440, 0 4px 9px #142b3420;
  transform: rotate(-3deg);
}
.app-popout-crop {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #f3eee5;
}
.app-popout-crop img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  border-radius: 0;
}
.hero-product .spotlight-scene {
  position: relative;
  width: 236px;
  max-width: 58%;
}
.hero-product .spotlight-scene .daily-phone { width: 100%; max-width: none; }
.hero-product .spotlight-scene .daily-phone:hover { transform: none; }
/* Contain the existing garden artwork without clipping the lifted UI cards. */
.hero-product .hero-decor { overflow: clip; }
.spotlight-popout { width: 138%; left: -19%; top: 14%; border-radius: 21px; }
.spotlight-popout .app-popout-crop { aspect-ratio: 1210.44 / 645.3; }
.spotlight-popout img { width: 109.051%; left: -4.580%; top: -66.667%; }
.spotlight-popout::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #ffffff38;
  border-radius: inherit;
}
.growth-popout { width: 285px; max-width: 106%; left: 50%; top: 118px; translate: -50% 0; border-radius: 13px; }
.growth-popout .app-popout-crop { aspect-ratio: 1141.8 / 524.844; background: #0d1e17; }
.growth-popout img { width: 115.607%; left: -7.861%; top: -161.749%; }
.shared-popout-scene { position: relative; width: 250px; max-width: 85%; margin: 24px auto 40px; }
.shared-app .shared-popout-scene .phone { margin: 0 auto; }
.activity-popout { width: 112%; left: -6%; top: 51%; border-radius: 12px; transform: rotate(-4deg); }
.activity-popout .app-popout-crop { aspect-ratio: 1272.48 / 1012.404; }
.activity-popout img { width: 103.734%; left: -1.867%; top: -22.946%; }
/* The remaining phone stories keep their lifted cards in sync with tabs. */
.profile-popout-scene, .meal-popout-scene {
  position: relative;
  width: 250px;
  max-width: 74%;
}
.profile-popout-scene .phone, .meal-popout-scene .phone { width: 100%; }
.profile-routine-popout, .profile-weight-popout, .meal-detail-popout {
  --crop-x: .042; --crop-y: .590; --crop-w: .917; --crop-h: .067;
  width: 132%; left: -16%; top: 58%; border-radius: 13px;
}
:is(.profile-routine-popout, .profile-weight-popout, .meal-detail-popout) .app-popout-crop {
  aspect-ratio: calc(1320 * var(--crop-w)) / calc(2868 * var(--crop-h));
}
:is(.profile-routine-popout, .profile-weight-popout, .meal-detail-popout) img {
  width: calc(100% / var(--crop-w));
  left: calc(-100% * var(--crop-x) / var(--crop-w));
  top: calc(-100% * var(--crop-y) / var(--crop-h));
}
.profile-weight-popout {
  --crop-x: .513; --crop-y: .348; --crop-w: .444; --crop-h: .089;
  width: 65%; left: 48%; top: 34%; transform: rotate(4deg);
}
[data-profile="plants"] .profile-routine-popout {
  --crop-x: .04; --crop-y: .416; --crop-w: .92; --crop-h: .152;
  top: 40%;
}
[data-profile="plants"] .profile-weight-popout { display: none; }
.meal-detail-popout {
  --crop-x: .04; --crop-y: .716; --crop-w: .92; --crop-h: .274;
  top: 61%; width: 128%; left: -14%;
}
[data-meal="shop"] .meal-detail-popout {
  --crop-x: .041; --crop-y: .543; --crop-w: .918; --crop-h: .236;
  top: 51%;
}
[data-meal="feed"] .meal-detail-popout {
  --crop-x: .041; --crop-y: .538; --crop-w: .918; --crop-h: .243;
  top: 50%;
}
@media (max-width: 1100px) {
  .hero-product .spotlight-scene { width: 222px; }
  .profile-popout-scene, .meal-popout-scene { width: 240px; }
}
@media (max-width: 900px) {
  .hero-product .spotlight-scene { width: 210px; max-width: 65%; }
  .profile-popout-scene, .meal-popout-scene { width: 218px; }
}
@media (max-width: 700px) {
  .hero-product .spotlight-scene { width: 202px; max-width: 58%; }
  .spotlight-popout { width: 135%; left: -17.5%; border-radius: 17px; }
  .growth-popout { width: 270px; }
  .profile-popout-scene, .meal-popout-scene { width: 226px; }
}