/* Static extras — dark-mode buttons, segments, lazy shots. No Tailwind build. */

html.dark a.btn-pill,
html.dark a.btn-pill:hover,
html.dark a.btn-pill:visited {
  color: #fff;
}

html.dark button.btn-pill {
  color: #fff;
}

.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 980px;
  background: rgba(0, 0, 0, 0.06);
}

html.dark .seg {
  background: rgba(255, 255, 255, 0.1);
}

.seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #1d1d1f;
  font: inherit;
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 980px;
  cursor: pointer;
}

html.dark .seg button {
  color: #f5f5f7;
}

.seg button.is-on {
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

html.dark .seg button.is-on {
  background: #3a3a3c;
  color: #f5f5f7;
  box-shadow: none;
}

.shot-frame {
  min-height: 180px;
  background: #ececef;
}

html.dark .shot-frame {
  background: #111;
}

/* Align with site max-w-page (980px) so left/right gutters match nav/footer. */
.promo-gallery {
  max-width: 980px;
}

/* Portrait store slides: phone-scale, no second crop over the device chrome. */
.promo-gallery[data-device-view="mobile"] {
  max-width: 420px;
}

.promo-frame {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Mobile art already has gradient + phone bezel — don't clip it into a flat shot. */
.promo-gallery[data-device-view="mobile"] .promo-frame {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.promo-gallery[data-device-view="mobile"] .promo-shot {
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

html.dark .promo-frame {
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark .promo-gallery[data-device-view="mobile"] .promo-shot {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.promo-shot {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  transition: opacity 0.22s ease;
}

.promo-shot.is-swapping {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .promo-shot {
    transition: none;
  }
}

[data-support-panel][hidden],
[data-device-shots][hidden] {
  display: none;
}