/* ============================================================
   Landing Pages — Base styles
   Common reset + header shared by every landing.
   Custom per-landing styles go in styles/<slug>.css and can
   override any rule here.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #222;
  line-height: 1.6;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #1E5D2D; }

/* ---- Header (CMS-style: solid green, logo on the left) ---- */
.landing-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1.4rem;
  background: #1E5D2D;
  color: #fff;
}
.landing-header__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.landing-header__logo img {
  height: 28px;
  width: auto;
  /* Force the logo to render white on the green header, just like in the CMS */
  filter: brightness(0) invert(1);
}

/* ---- Content wrapper (full-width by default) ----
   The landing's body is placed inside <main class="landing-content">.
   It spans the full window width so custom CSS can decide how to
   lay out the content (constrain with max-width, add its own grid,
   use full-bleed sections, etc.). Any per-landing stylesheet can
   override these rules. */
.landing-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.landing-content h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 1rem; letter-spacing: -0.02em; }
.landing-content h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 1.8rem 0 0.7rem; letter-spacing: -0.01em; }
.landing-content h3 { font-size: 1.1rem; margin: 1.4rem 0 0.5rem; }
.landing-content p  { margin: 0 0 1rem; }
.landing-content ul, .landing-content ol { margin: 0 0 1rem 1.5rem; padding: 0; }
.landing-content li { margin-bottom: 0.35rem; }

/* ---- Footer (optional) ---- */
.landing-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: #666;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .landing-header { padding: 0.7rem 1rem; }
  .landing-header__logo img { height: 24px; }
}