/* The member app: five front-facing screens unfold with the page scroll. */
#mobile-app .rec-mobile-track {
  --rec-stage-height: min(760px, 82svh, calc(48vw + 160px));
  --rec-stage-top: clamp(24px, 5svh, 64px);
  --rec-unfold: 1;
  position: relative;
}
#mobile-app .rec-mobile-track.is-scroll-ready {
  height: calc(var(--rec-stage-height) + 95svh);
}
#mobile-app .rec-mobile-sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--rec-stage-height);
  margin: 0;
}
#mobile-app .is-scroll-ready .rec-mobile-sticky {
  position: sticky;
  top: var(--rec-stage-top);
}
#mobile-app .rec-mobile-screens {
  position: relative;
  width: 100%;
  height: calc(var(--rec-stage-height) - 80px);
  isolation: isolate;
}
#mobile-app .rec-mobile-device {
  --rec-offset: 0%;
  --rec-depth: 0;
  --rec-lift: 0px;
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(21%, 270px, 29svh);
  z-index: 3;
  transform: translate(calc(-50% + var(--rec-offset) * var(--rec-unfold)), calc(-50% + var(--rec-lift) * var(--rec-unfold))) scale(calc(1 - var(--rec-depth) * var(--rec-unfold)));
  transform-origin: center;
}
#mobile-app .rec-mobile-device[data-position="-2"] { --rec-offset: -190%; --rec-depth: .16; --rec-lift: 24px; z-index: 1; }
#mobile-app .rec-mobile-device[data-position="-1"] { --rec-offset: -100%; --rec-depth: .07; --rec-lift: 8px; z-index: 2; }
#mobile-app .rec-mobile-device[data-position="1"] { --rec-offset: 100%; --rec-depth: .07; --rec-lift: 8px; z-index: 2; }
#mobile-app .rec-mobile-device[data-position="2"] { --rec-offset: 190%; --rec-depth: .16; --rec-lift: 24px; z-index: 1; }
#mobile-app .rec-mobile-device:not([data-position="0"]) {
  opacity: clamp(0, calc(var(--rec-unfold) * 8), 1);
}
#mobile-app .rec-mobile-device img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1360 / 2759;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .10));
}
#mobile-app .rec-mobile-label {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--ds-muted, var(--muted));
  font: 12px/1.4 var(--sans, Arial, sans-serif);
  white-space: nowrap;
  opacity: clamp(0, calc((var(--rec-unfold) - .7) * 4), 1);
}
#mobile-app .rec-mobile-sticky figcaption {
  margin: 20px auto 0;
  max-width: 580px;
  padding: 0 18px;
  text-align: center;
  color: var(--ds-muted, var(--muted));
  font: 14px/1.65 var(--sans, Arial, sans-serif);
}
#mobile-app .rec-mobile-scroll-hint {
  display: none;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#mobile-app .is-scroll-ready .rec-mobile-scroll-hint { display: block; opacity: calc(1 - var(--rec-unfold)); }
#mobile-app .is-in-view .rec-mobile-device { will-change: transform, opacity; }
@media (max-width: 700px) {
  #mobile-app .rec-mobile-track { --rec-stage-height: min(490px, 70svh); }
  #mobile-app .rec-mobile-track.is-scroll-ready { height: calc(var(--rec-stage-height) + 70svh); }
  #mobile-app .rec-mobile-device { width: min(38%, 220px, 23svh); }
  #mobile-app .rec-mobile-device[data-position="-2"] { --rec-offset: -97%; --rec-depth: .34; --rec-lift: 14px; }
  #mobile-app .rec-mobile-device[data-position="-1"] { --rec-offset: -53%; --rec-depth: .16; --rec-lift: 5px; }
  #mobile-app .rec-mobile-device[data-position="1"] { --rec-offset: 53%; --rec-depth: .16; --rec-lift: 5px; }
  #mobile-app .rec-mobile-device[data-position="2"] { --rec-offset: 97%; --rec-depth: .34; --rec-lift: 14px; }
  #mobile-app .rec-mobile-label { display: none; }
  #mobile-app .rec-mobile-sticky figcaption { font-size: 12px; margin-top: 6px; padding: 0; }
}
/* Authoring and motion preferences always expose every image without a pin. */
body:is(.is-editing, .pro-editing) #mobile-app .rec-mobile-track {
  height: auto;
  --rec-unfold: 1 !important;
}
body:is(.is-editing, .pro-editing) #mobile-app .rec-mobile-sticky { position: relative; top: auto; }
body:is(.is-editing, .pro-editing) #mobile-app .rec-mobile-scroll-hint { display: none; }
@media (prefers-reduced-motion: reduce), print {
  #mobile-app .rec-mobile-track { height: auto !important; --rec-unfold: 1 !important; }
  #mobile-app .rec-mobile-sticky { position: relative !important; top: auto !important; }
  #mobile-app .rec-mobile-scroll-hint { display: none !important; }
  #mobile-app .rec-mobile-device { will-change: auto; }
}