/* Keep every app preview navigable exactly like the Excel showcase. */
.hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] {
  isolation: isolate;
}

.hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] > :not(.workbook-nav):not(.workbook-dots) {
  transition: opacity .14s ease, filter .14s ease;
}

.hero.hero-second-screen .app-demo-stage[data-app-demo-carousel].is-frame-changing > :not(.workbook-nav):not(.workbook-dots) {
  opacity: .985;
  filter: saturate(.98);
}

.hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] .workbook-nav {
  z-index: 12;
}

.hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] .workbook-dots {
  z-index: 12;
}

.hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] .workbook-dots button {
  cursor: pointer;
  background: color-mix(in srgb, var(--app-accent, #5b5fc7) 28%, transparent);
}

.hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] .workbook-dots button:hover,
.hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] .workbook-dots button:focus-visible {
  background: color-mix(in srgb, var(--app-accent, #5b5fc7) 56%, transparent);
}

.hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] .workbook-dots button.active {
  background: var(--app-accent, #5b5fc7);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--app-accent, #5b5fc7) 22%, transparent), 0 0 0 1px rgba(255,255,255,.54);
}

.hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] .workbook-dots button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--app-accent, #5b5fc7) 48%, transparent);
  outline-offset: 3px;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] .workbook-dots button { background: rgba(91,95,199,.28); }
  .hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] .workbook-dots button.active { background: var(--app-accent, #5b5fc7); }
}

/* Static release screenshots use the same stage geometry and controls as Excel. */
.hero.hero-second-screen .office-release-screenshot-stage[data-office-release-carousel] {
  overflow: visible;
}

.hero.hero-second-screen .office-release-screenshot-track {
  position: relative;
  width: 100%;
  aspect-ratio: 930 / 440;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  background: #f3f4f5;
  box-shadow: 0 24px 50px rgba(29, 43, 51, .18),
              0 0 0 1px rgba(255, 255, 255, .6) inset;
  pointer-events: none;
}

.office-release-screenshot-slide {
  position: absolute;
  inset: 0;
  margin: 0;
}

.office-release-screenshot-slide[hidden] {
  display: none;
}

.office-release-screenshot-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-second-screen .app-demo-stage[data-app-demo-carousel] > :not(.workbook-nav):not(.workbook-dots) {
    transition: none;
  }
}