/* oMATIC Minds v0.6.8.64 Public text lane width polish.
   Gives public_html hero/page copy more horizontal room so headings and lead text
   do not look boxed in, while keeping safe side padding. */

:root {
  --om-public-wide-max: 1560px;
  --om-public-wide-pad: clamp(24px, 3.8vw, 76px);
  --om-public-hero-copy-max: 1080px;
  --om-public-hero-heading-max: 1120px;
  --om-public-hero-lead-max: 980px;
  --om-public-page-copy-max: 1040px;
}

/* Let the page shell use a little more of the browser without touching the edges. */
.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;
}

/* Desktop/laptop hero: keep the app card on the right, but give the headline more room. */
@media (min-width: 981px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px) !important;
    gap: clamp(30px, 4.4vw, 68px) !important;
    align-items: center !important;
  }

  .hero-copy,
  .om-public-page-copy,
  .public-section-copy {
    max-width: min(100%, var(--om-public-hero-copy-max)) !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

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

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

  .hero-card {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    justify-self: end !important;
  }
}

/* Page heroes and intro text areas across public_html should not stay stuck at the old narrow copy lane. */
.om-public-page-hero,
.om-public-section,
.public-pricing-section,
.public-model-providers-section,
.public-image-studio-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 {
  max-width: var(--om-public-wide-max) !important;
}

.om-public-page-copy,
.public-section-copy,
.public-pricing-intro,
.home-overview-copy,
.home-split-panel article,
.cta-panel {
  max-width: min(100%, var(--om-public-page-copy-max)) !important;
}

.home-overview-panel,
.home-split-panel,
.feature-grid,
.cta-panel,
.notice,
.panel {
  width: 100% !important;
  max-width: var(--om-public-wide-max) !important;
}

/* Tablet keeps single-column readability but still uses a wider lane than the old boxed layout. */
@media (max-width: 980px) {
  :root {
    --om-public-wide-pad: clamp(20px, 4vw, 48px);
    --om-public-hero-copy-max: 100%;
    --om-public-hero-heading-max: 100%;
    --om-public-hero-lead-max: 920px;
  }

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

  .hero-copy,
  .hero-copy h1,
  .hero h1,
  .hero-copy .lead,
  .hero .lead,
  .lead {
    max-width: 100% !important;
  }

  .hero-card {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* Mobile keeps the safe padding from the current build. */
@media (max-width: 760px) {
  :root {
    --om-public-wide-pad: 16px;
  }

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