/* Shared device frames — demo viewport 393×852 */

.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.icon--lg {
  width: 32px;
  height: 32px;
}

/* ── Phone shell (token-based) ── */
.phone {
  --demo-w: 393;
  --demo-h: 852;
  --phone-bezel: 12px;
  --phone-radius-outer: 36px;
  --phone-radius-screen: 27px;
  --phone-screen-w: 228px;
  --phone-shell-bg: #0a1a2e;
  --phone-shadow: rgba(6, 21, 40, 0.35) 0 24px 48px -12px;
  --phone-scale: calc(var(--phone-screen-w) / 393px);

  position: relative;
  margin: 0;
  flex-shrink: 0;
  background: var(--phone-shell-bg);
  border-radius: var(--phone-radius-outer);
  padding: var(--phone-bezel);
  box-shadow: var(--phone-shadow);
}

.phone--slim {
  --phone-bezel: 4px;
  --phone-radius-outer: 28px;
  --phone-radius-screen: 24px;
  --phone-shell-bg: #0c1f38;
  --phone-shadow: rgba(6, 21, 40, 0.28) 0 18px 40px -16px;
}

.phone--sm {
  --phone-screen-w: 196px;
}

/* No fake notch when showing real app UI in iframe */
.phone:has(.phone__frame) .phone__notch {
  display: none;
}

.phone__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 22px;
  background: var(--phone-shell-bg);
  border-radius: 0 0 14px 14px;
  z-index: 2;
  pointer-events: none;
}

.phone__screen {
  position: relative;
  width: var(--phone-screen-w);
  height: calc(var(--phone-screen-w) * 852 / 393);
  border-radius: var(--phone-radius-screen);
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

.phone__screen .phone__frame,
.phone__screen iframe.phone__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 393px;
  height: 852px;
  max-width: none;
  border: 0;
  transform: scale(var(--phone-scale));
  transform-origin: top left;
  pointer-events: none;
  background: #fff;
}

/* Stacked hero phones */
.phones {
  position: relative;
  width: min(100%, 372px);
  height: auto;
  min-height: 520px;
  margin-inline: auto;
}

.phones .phone {
  position: absolute;
}

.phones .phone--back {
  top: 0;
  left: 0;
  z-index: 1;
  transform: scale(0.93) rotate(-5deg);
  filter: saturate(0.92) brightness(0.92);
}

.phones .phone--front {
  bottom: 0;
  right: 0;
  z-index: 2;
}

@media (max-width: 768px) {
  .phones {
    min-height: 440px;
    transform: scale(0.92);
    transform-origin: top center;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .phones .phone--back {
    animation: phone-float-back 7.5s ease-in-out infinite;
  }

  .phones .phone--front {
    animation: phone-float-front 6.5s ease-in-out infinite;
  }
}

@keyframes phone-float-back {
  0%, 100% { transform: scale(0.93) rotate(-5deg) translateY(0); }
  50% { transform: scale(0.93) rotate(-5deg) translateY(-8px); }
}

@keyframes phone-float-front {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ── Browser chrome ── */
.browser {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--canvas);
  box-shadow: var(--shadow-card);
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--font-mono);
  color: var(--ink-soft);
}

.browser__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.browser__bar i:nth-child(1) { background: #ff5f57; }
.browser__bar i:nth-child(2) { background: #febc2e; }
.browser__bar i:nth-child(3) { background: #28c840; }

.browser__body {
  position: relative;
  min-height: 280px;
  background: var(--surface);
  overflow: hidden;
}

.browser__body iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  background: #fff;
}

.browser--wide .browser__body iframe {
  height: 360px;
}