html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

main,
section,
.shell,
.hero,
.hero-visual,
.product-window,
.window-body,
.window-content,
.metric-row,
.case,
.case-grid,
.case-feature,
.dashboard-shot,
.pilot-grid,
.steps {
  min-width: 0;
  max-width: 100%;
}

img,
svg {
  max-width: 100%;
}

@media (max-width: 800px) {
  .hero {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero h1,
  .hero-copy,
  .hero-actions {
    width: 100%;
    max-width: 100%;
  }

  .hero h1 {
    overflow-wrap: anywhere;
  }

  .hero-visual {
    overflow: hidden;
  }

  .product-window {
    left: 0;
    right: 0;
    width: 100%;
  }

  .ticker {
    max-width: 100vw;
  }

}