/* Post-CDN audit fixes: responsive containment, nav breakpoints, and CLS polish. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

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

main,
header,
section,
footer,
.container,
.section-inner,
.hero-inner,
.footer-inner,
.content,
.content-panel,
.hero-copy,
.hero-media,
.card,
.faq-card,
.product-card,
.buy-card,
.cta,
.grid,
.pricing-grid {
  min-width: 0;
}

h1,
h2,
h3,
p,
li,
a,
span,
strong {
  overflow-wrap: break-word;
  word-break: normal;
}

.ss-nav-logo img,
nav img[src$="logonew.svg"] {
  width: 173px;
  height: auto;
  max-height: 40px;
}

@media (max-width: 1120px) {
  .ss-nav-links,
  nav .hidden.md\:flex {
    display: none !important;
  }

  .ss-mobile-toggle,
  nav .md\:hidden {
    display: inline-flex !important;
  }

  #mobile-menu.hidden {
    display: none !important;
  }

  #mobile-menu:not(.hidden) {
    display: block !important;
  }

  .ss-nav-inner {
    min-height: 72px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}

@media (max-width: 640px) {
  :root {
    --ss-mobile-measure: min(330px, calc(100vw - 48px));
  }

  body {
    width: 100%;
  }

  .max-w-7xl,
  .container,
  .section-inner,
  .hero-inner,
  .footer-inner,
  .content,
  .content-panel,
  .hero,
  .hero-copy,
  .hero-media,
  .cta,
  .callout,
  .buy-card,
  .card,
  .faq-card,
  .related-card {
    max-width: 100% !important;
  }

  header .container,
  header .max-w-7xl,
  header .relative.z-10,
  .hero .container,
  .hero-copy,
  .hero-content,
  .hero-text {
    width: var(--ss-mobile-measure) !important;
    max-width: var(--ss-mobile-measure) !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  header,
  .hero,
  .section,
  section {
    overflow: hidden;
  }

  h1,
  header h1,
  .hero h1 {
    max-width: calc(100vw - 32px) !important;
    max-width: var(--ss-mobile-measure) !important;
    font-size: clamp(1.55rem, 6.2vw, 1.85rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  h1 span,
  header h1 span,
  .hero h1 span,
  .h1-line {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  h2,
  .hero h2 {
    max-width: calc(100vw - 32px) !important;
    max-width: var(--ss-mobile-measure) !important;
    font-size: clamp(1.65rem, 7.2vw, 2.1rem) !important;
    line-height: 1.12 !important;
  }

  h3,
  section h3 {
    max-width: var(--ss-mobile-measure) !important;
    font-size: clamp(1.45rem, 6.4vw, 1.9rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  p,
  .intro,
  header p,
  .hero p {
    max-width: calc(100vw - 32px) !important;
    max-width: var(--ss-mobile-measure) !important;
    font-size: min(1rem, 16px);
    overflow-wrap: anywhere !important;
  }

  header ul,
  .hero ul {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.5rem !important;
    max-width: calc(100vw - 32px) !important;
    max-width: var(--ss-mobile-measure) !important;
  }

  header li,
  .hero li {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .btn,
  .button,
  .btn-primary,
  .btn-secondary,
  .ss-nav-cta,
  .ss-mobile-cta,
  .gold-primary,
  .gold-secondary,
  .cta a,
  .hero-actions a,
  .gold-home-actions a,
  header a[class*="bg-red"],
  header a[class*="bg-[#d92828]"] {
    width: var(--ss-mobile-measure);
    max-width: var(--ss-mobile-measure);
    white-space: normal !important;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .pricing-grid,
  .product-grid,
  .faq-grid,
  .grid {
    grid-template-columns: 1fr !important;
  }

  .size-table-wrap,
  .table-wrap,
  [style*="overflow-x:auto"] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ss-mobile-menu,
  #mobile-menu {
    max-width: 100vw;
  }
}