html,
body,
#root {
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

.landing-nav-row,
.landing-brand-lockup,
.landing-nav-controls,
.landing-hero-content,
.landing-hero-content > div,
.landing-tilt,
.landing-dashboard-preview {
  min-width: 0;
}

@media (max-width: 640px) {
  .landing-nav-row {
    width: 100%;
  }

  .landing-brand-lockup {
    max-width: calc(100% - 8.25rem);
  }

  .landing-company-name {
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
  }

  .landing-nav-controls {
    gap: 0.25rem !important;
  }

  .landing-hero-content {
    width: 100%;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .landing-pill {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .landing-tilt,
  .landing-dashboard-preview {
    width: 100%;
    max-width: 100%;
    transform: none !important;
  }
}