/* Home keeps its established copy and outer Hero dimensions. */
.hero { background: var(--color-white); }
.hero-visual { position: relative; isolation: isolate; min-width: 0; height: 520px; }
.home-showcase { display: flex; flex-direction: column; justify-content: center; }
.home-showcase .quick-showcase-stage { height: calc(100% - 56px); max-height: none; aspect-ratio: auto; flex: 0 0 auto; }
.home-showcase .quick-showcase-frame { width: 84%; height: 86%; }
.home-showcase .quick-showcase-footer { min-height: 56px; }
.workflow-image img.image-pending { opacity: 0; }
.workflow-image img { transition: opacity 180ms ease-out; }
html.defer-home-media [data-deferred-background] { background-image: none !important; }
@media (max-width: 1000px) { .hero-visual { height: 500px; margin-top: 12px; } }
@media (min-width: 721px) and (max-width: 860px) {
  .hero-visual { max-width: calc(100vw - 432px); height: 400px; }
  .home-showcase .quick-showcase-footer { align-items: start; flex-direction: column; justify-content: center; gap: 0; min-height: 76px; }
  .home-showcase .quick-showcase-stage { height: calc(100% - 76px); }
}
@media (max-width: 720px) {
  /* Preserve the space previously occupied by the three stacked screenshots. */
  .hero-visual { height: auto; margin-top: 42px; padding-top: calc(153.4663% + 32px); }
  .home-showcase .quick-showcase-stage { position: absolute; inset: 0 0 56px; height: auto; }
  .home-showcase .quick-showcase-footer { position: absolute; inset: auto 0 0; }
  .home-showcase .quick-showcase-frame { width: 88%; height: 90%; }
}
@media (prefers-reduced-motion: reduce) { .workflow-image img { transition: none; } }