/* Fluid landing page: adapts to desktop, tablet and mobile widths without browser zoom. */
html, body, #root { width: 100%; max-width: 100%; margin: 0; }
body { overflow-x: hidden; }

/* Keep all landing containers inside the viewport while retaining readable max widths. */
#root > div.min-h-screen { width: 100%; min-width: 0; overflow-x: clip; }

@media (min-width: 768px) {
  header.sticky > div,
  section > .mx-auto,
  footer > .mx-auto {
    width: min(100% - 40px, 1400px);
    max-width: 1400px;
  }

  header.sticky > div { padding-left: 0 !important; padding-right: 0 !important; }
  section > .mx-auto { padding-left: 0 !important; padding-right: 0 !important; }
  footer > .mx-auto { padding-left: 0 !important; padding-right: 0 !important; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  header.sticky > div,
  section > .mx-auto,
  footer > .mx-auto {
    width: calc(100% - 48px);
  }

  header.sticky nav { gap: 20px !important; }
  section:first-of-type > div:first-child {
    grid-template-columns: minmax(340px, .86fr) minmax(0, 1.14fr) !important;
    gap: 24px !important;
  }

  section:first-of-type h1 { font-size: clamp(42px, 4.4vw, 52px) !important; }
  #how-preview { min-width: 0 !important; }
}

@media (min-width: 1280px) {
  section:first-of-type > div:first-child {
    min-height: 500px;
  }
}

@media (max-width: 767px) {
  header.sticky > div,
  section > .mx-auto,
  footer > .mx-auto {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Prevent text/buttons from forcing horizontal overflow. */
  h1, h2, h3, p, a, button, span { max-width: 100%; }
  button { white-space: normal; }

  section:first-of-type > div:first-child {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Fluid hero typography. */
  section:first-of-type h1 {
    font-size: clamp(32px, 10vw, 48px) !important;
    line-height: 1.05 !important;
  }

  section:first-of-type p { max-width: 100% !important; }

  /* Dashboard scales with the viewport instead of overflowing. */
  #how-preview {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #how-preview .psm-dashboard,
  #how-preview .psm-body,
  #how-preview .psm-main { min-width: 0 !important; max-width: 100% !important; }

  /* Pricing/cards always fit the available width. */
  #pricing .grid > div,
  #features .grid > div,
  #testimonials > div,
  #how > div,
  #support > div { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }

  /* Footer never creates a horizontal page. */
  footer { width: 100%; overflow: hidden; }
}

@media (max-width: 380px) {
  header.sticky > div { padding-left: 10px !important; padding-right: 10px !important; }
  section:first-of-type > div:first-child { padding-left: 14px !important; padding-right: 14px !important; }
  section:first-of-type h1 { font-size: clamp(30px, 10vw, 38px) !important; }
  #features, #pricing, #testimonials, #how, #support { padding-left: 14px !important; padding-right: 14px !important; }
}