/* Responsive overrides for the fixed-width (1440px) page designs.
   Loaded after each page's inline styles; rules use !important because
   inline style="" attributes otherwise always win over stylesheet rules. */

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

/* Outer 1440px page shell -> fluid width */
body > div[style*="width: 1440px"] {
  width: 100% !important;
  height: auto !important;
}

/* Let specific structural flex rows wrap instead of overflowing.
   (Deliberately NOT a blanket "all flex" rule: icon+label rows like the
   feature checklists and numbered steps rely on staying on one line and
   letting their text wrap internally — wrapping the row itself would push
   the icon onto its own line.) */
@media (max-width: 860px) {
  header, nav,
  [style*="display: flex; gap: 16px; padding-top:"],
  [style*="align-items: flex-end; gap: 48px"],
  [style*="align-items: center; gap: 48px"] {
    flex-wrap: wrap !important;
  }
}

/* Grids: 3 columns -> 2 on tablet, everything -> 1 column on mobile */
@media (max-width: 900px) {
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Section side padding: every <section>, plus header/footer, uses 96px
   horizontal padding at desktop size */
@media (max-width: 900px) {
  section, header, footer {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media (max-width: 600px) {
  section, header, footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Header grows instead of clipping once its nav wraps */
@media (max-width: 900px) {
  header {
    height: auto !important;
    row-gap: 14px;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  nav {
    justify-content: center !important;
    gap: 16px !important;
  }
}
@media (max-width: 480px) {
  header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* Footer: stack brand above links on mobile */
@media (max-width: 600px) {
  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  footer > div:last-child {
    gap: 12px 20px !important;
    flex-wrap: wrap !important;
  }
}

/* The download/CTA banners use margin (not padding) for their 96px inset */
@media (max-width: 900px) {
  [style*="margin: 0 96px"] {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
}
@media (max-width: 600px) {
  [style*="margin: 0 96px"] {
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 40px 28px !important;
  }
}

/* The index hero's absolutely-positioned decorative tiles are placed with
   hard-coded pixel offsets sized for a full desktop-width column; below
   that they overflow their column, so stack the hero and hide the art well
   before the generic grid/mobile breakpoints kick in. */
@media (max-width: 1100px) {
  #top {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="position: relative; height: 520px"] {
    display: none !important;
  }
}

/* Oversized placeholder art: shrink rather than overflow */
@media (max-width: 640px) {
  [style*="height: 380px"] {
    height: 200px !important;
  }
}

/* Consistent, smaller type scale on tablet/mobile */
@media (max-width: 900px) {
  h1 { font-size: 44px !important; line-height: 1.1 !important; }
  h2 { font-size: 32px !important; }
  h3 { font-size: 22px !important; }
}
@media (max-width: 600px) {
  h1 { font-size: 32px !important; }
  h2 { font-size: 26px !important; }
  h3 { font-size: 20px !important; }
  p { font-size: 16px !important; line-height: 1.6 !important; }
}