/* oMATIC Minds v0.6.8.51 Public main-site wide layout polish + footer full-width fix.
   Wider public_html content lanes with safe side padding so pages feel less boxed-in
   without running tight to the browser edges. Footer remains full browser width. */

:root {
  --om-public-wide-max: 1480px;
  --om-public-wide-pad: clamp(26px, 4vw, 86px);
  --om-public-readable-max: 900px;
}

/* Main public shell: wider than the old 1180px boxed lane. */
.site-header,
main {
  width: min(var(--om-public-wide-max), calc(100% - (var(--om-public-wide-pad) * 2))) !important;
  max-width: var(--om-public-wide-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Footer should span the browser width, not inherit the boxed page shell. */
.site-footer {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hero and primary grid sections get more horizontal room. */
.hero,
.hero.om-public-features-hero,
.om-public-page-hero,
.om-public-guest-launch,
.feature-grid,
.cta-panel,
.public-pricing-section,
.public-pricing-grid,
.public-model-providers-section,
.public-image-studio-section,
.security-grid,
.legal-version-panel,
.legal-archive-panel,
.contact-panel,
.hubspot-public-embed-box {
  max-width: var(--om-public-wide-max) !important;
}

/* Let key two/three-column public page sections breathe wider. */
.hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr) !important;
  gap: clamp(32px, 5vw, 82px) !important;
}

.hero-copy,
.om-public-page-copy,
.public-section-copy {
  max-width: min(100%, 920px) !important;
}

.hero-copy h1,
.om-public-page-hero h1 {
  max-width: min(100%, 980px) !important;
}

.hero-copy .lead,
.om-public-page-hero .lead,
.lead {
  max-width: min(100%, var(--om-public-readable-max)) !important;
}

.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2.2vw, 34px) !important;
}

/* Make large marketing rows/cards use wide layout without edge crowding. */
.om-public-wide,
.om-public-section,
.om-public-feature-row,
.om-public-provider-grid,
.om-public-use-case-grid,
.om-public-template-grid,
.om-public-security-grid,
.om-public-pricing-wrap {
  width: 100% !important;
  max-width: var(--om-public-wide-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep text-heavy legal/contact sections readable even inside wide page shell. */
.legal-version-body,
.legal-copy,
.policy-copy,
.terms-copy,
.contact-copy,
.hubspot-public-embed-box form {
  max-width: 980px !important;
}

/* Tablet: wider than old boxed layout but still padded. */
@media (max-width: 1100px) {
  :root {
    --om-public-wide-pad: clamp(22px, 4vw, 52px);
  }

  .hero {
    grid-template-columns: 1fr !important;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: keep safe padding and avoid edge crowding. */
@media (max-width: 760px) {
  :root {
    --om-public-wide-pad: 16px;
  }

  .site-header,
  main {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
  }

  .site-footer {
    width: 100% !important;
    max-width: none !important;
  }

  .feature-grid {
    grid-template-columns: 1fr !important;
  }
}