/* =============================================================
   NICHENCY — CONTAINERS
   layout/containers.css
   ============================================================= */

.container { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
.section { padding: 80px 0; width: 100%; }
.section-alt { background: var(--hero-bg); }
.section-header { text-align: center; margin-bottom: 56px; }
.section-header-centered { text-align: center !important; margin-bottom: 56px !important; }
.section-header-centered .eyebrow { margin-left: auto !important; margin-right: auto !important; }
.section-header-centered h2 { margin-left: auto !important; margin-right: auto !important; max-width: 800px !important; }
.section-header-centered p { margin-left: auto !important; margin-right: auto !important; max-width: 600px !important; }
.section-inner { max-width: var(--max); margin: 0 auto; padding: 0 40px; }

/* ── SHARED HERO SECTION ────────────────────────────────────────────────────
   Used by: pricing (html-pricing.html), contact (html-contact.html).
   These classes were previously in pages/about.css. Moved here when about.css
   was rewritten for the new about page design so the classes survive on all pages.
   NOTE: .hero-eyebrow base is in core/typography.css.
         .hero-content (max-width centring) is in pages/pricing.css.
         Responsive padding overrides are in layout/grid.css (@media blocks).
   ──────────────────────────────────────────────────────────────────────── */
.hero-section {
  background: var(--hero-bg);
  padding: 100px 0 80px;
  text-align: center;
  width: 100%;
  border-bottom: 1px solid var(--border);
}
.hero-headline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--dark-blue);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.hero-subheadline {
  font-family: 'Karla', sans-serif;
  font-size: 1.1rem;
  max-width: 680px;
  margin: 0 auto 16px;
  color: #666;
  font-weight: 400;
  line-height: 1.75;
}
.hero-trust-line {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 40px;
  font-style: italic;
}
/* Base flex layout for hero button rows.
   Responsive column-stack overrides live in layout/grid.css. */
.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}