/**
 * lg-page-isolation.css
 *
 * Opt-in collision pack for custom landing pages that also load site chrome
 * (style.css + #component-header / footer / CTA).
 *
 * Activate by wrapping page content in <div class="lg-page"> and linking this
 * file AFTER style.css and BEFORE the page's own <style> / CSS file.
 *
 * Does NOT touch header, footer, or CTA components.
 * Pages without .lg-page are unaffected.
 */

/* --------------------------------------------------------------------------
   style.css: main { display: inline-block } leaves a baseline gap (white seam)
   between the last dark page section and #component-cta-form-links.
   -------------------------------------------------------------------------- */
.lg-page main,
.lg-page #main-content {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Global element leaks from style.css
   :where() keeps specificity at (.lg-page) only so page class rules still win
   (e.g. .hero-badge, .hero-subheadline, .service-card__body).
   -------------------------------------------------------------------------- */
.lg-page :where(p) {
  font-size: 16px;
  line-height: 1.7;
  color: inherit;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.lg-page :where(h1),
.lg-page :where(h2),
.lg-page :where(h3),
.lg-page :where(h4),
.lg-page :where(h5),
.lg-page :where(h6) {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   .service-card — style.css uses display:grid; grid-template-columns:85px 1fr
   which squeezes body copy into the 85px icon column on custom landings.
   -------------------------------------------------------------------------- */
.lg-page .service-card {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-gap: 0;
  gap: 0;
  border: none;
  overflow: visible;
  z-index: auto;
}

/* --------------------------------------------------------------------------
   .section-title — style.css sets font-size: 100px (+ breakpoint scales).
   Neutralize so the page stylesheet can set its own size.
   -------------------------------------------------------------------------- */
.lg-page .section-title {
  font-size: inherit;
  line-height: inherit;
}

/* --------------------------------------------------------------------------
   .faq-section — style.css sets overflow:hidden (can clip open answers).
   -------------------------------------------------------------------------- */
.lg-page .faq-section {
  overflow: visible;
}

/* --------------------------------------------------------------------------
   .container — keep Bootstrap gutter unless the page overrides max-width.
   -------------------------------------------------------------------------- */
.lg-page .container {
  --bs-gutter-x: 30px;
}