/*
 * Mobile clipping fix — homepage, Data Cleanser, and shared hero surfaces.
 * Targets 320–768px viewports (validated at 390px).
 */

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

.container {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 768px) {
  .hero {
    overflow-x: clip;
    position: relative;
  }

  .hero .container,
  .hero-grid,
  .hero-grid > div,
  .home-hero {
    min-width: 0;
    max-width: 100%;
  }

  .hero h1,
  .hero .lede,
  .hero-ctas,
  .hero-trust,
  .sds-truststrip,
  .sds-productcard {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .hero-ctas {
    flex-wrap: wrap;
  }

  .hero-strata {
    width: 100%;
    max-width: 100vw;
    left: 0;
    right: 0;
    transform: none;
  }

  .hero-strata span {
    max-width: 85vw !important;
  }

  .sds-ctaband,
  .sds-footer,
  .ms-nav,
  .ms-mega {
    overflow-x: clip;
  }

  .sds-nav__inner,
  .ms-nav__inner {
    min-width: 0;
    max-width: 100%;
  }

  .cols4--products .sds-productcard {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .hero-strata span {
    width: auto !important;
    max-width: 120% !important;
  }

  .sds-ctaband__strata span,
  .sds-footer__strata span {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }

  .hero h1 {
    font-size: clamp(1.625rem, 7vw, 2.25rem);
  }
}

@media (max-width: 390px) {
  .hero .sds-badge--mono {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    padding-inline: 10px;
  }
}