/* Homepage: keep the right rail from squeezing the large product stage. */
.product-stage {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  min-width: 0;
}

.product-stage__copy,
.product-stage__visual {
  min-width: 0;
}

@media (max-width: 1440px) {
  .hero-copy {
    width: min(620px, calc(100vw - 360px));
  }

  .product-stage-wrap {
    inset: 0 292px 0 48px;
  }

  .product-stage {
    width: 100%;
    height: min(600px, calc(100svh - 160px));
    min-height: 0;
    gap: 24px;
    padding: 32px;
  }

  .product-stage__copy h2 {
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  }

  .product-rail {
    right: 18px;
    width: 252px;
    height: 540px;
  }

  .product-card {
    width: 236px;
    height: 160px;
    --launch-x: 0px;
  }
}

@media (max-width: 1280px) {
  .hero-copy {
    width: min(520px, calc(100vw - 320px));
  }

  .product-stage-wrap {
    inset: 0 268px 0 36px;
  }

  .product-stage {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 18px;
    padding: 24px;
    height: min(620px, calc(100svh - 148px));
  }

  .product-stage__visual {
    max-width: none;
  }

  .product-rail {
    width: 232px;
    right: 14px;
  }

  .product-card {
    width: 220px;
    height: 148px;
  }
}

@media (max-width: 1100px) {
  .page-home {
    height: auto;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 108px 24px 48px;
  }

  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    transform: none;
    opacity: 1;
    filter: none;
  }

  .product-stage-wrap {
    position: relative;
    inset: auto;
    margin-top: 26px;
  }

  .product-stage {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    display: none;
    min-height: auto;
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }

  .product-stage.is-visible {
    display: grid;
  }

  .product-rail {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    margin-top: 28px;
    transform: none;
    display: grid;
    gap: 12px;
  }

  .product-card {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 128px;
    transform: none !important;
  }
}

/* Products page: one document scroll root so the wheel works immediately. */
html[data-view="products"] {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}

html[data-view="products"] body {
  overflow: visible !important;
  height: auto !important;
  min-height: 100%;
}

html[data-view="products"] .app-shell,
html[data-view="products"] .page-products,
html[data-view="products"] .products-layout,
html[data-view="products"] .product-content-shell {
  overflow: visible !important;
  height: auto !important;
}

html[data-view="products"] .products-hero .product-scroll-reveal,
html[data-view="products"] .products-hero .product-animate-item {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* Product tabs: no entrance slam / jitter on the hero card. */
.product-detail.is-current {
  animation: none !important;
}

.product-detail.is-current .product-panel-copy,
.product-detail.is-current .product-media-board {
  animation: none !important;
}

.product-detail .product-panel-hero,
.product-detail .product-panel-hero.product-scroll-reveal,
.product-detail .product-panel-hero.product-scroll-reveal.is-inview {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.products-layout.is-tab-switching .product-detail,
.products-layout.is-tab-switching .product-scroll-reveal,
.products-layout.is-tab-switching .product-animate-item {
  transition: none !important;
  animation: none !important;
}