html,
body {
  color: var(--green-900);
  background: var(--section-surface-base);
}
body,
.wrap,
.main {
  background-color: var(--section-surface-base);
}
.productMenuPanel {
  background-color: var(--section-surface-base);
}
.sectionBlock {
  background-color: var(--section-surface-base);
}
.sectionAlt {
  background-color: var(--section-surface-alt) !important;
  background-image: none !important;
}

h1,
h2,
h3,
h4,
.sectionTitle,
.navLink,
.productMenuToggle,
.productMenuCopy strong {
  color: var(--primary-green);
}

/* Shared hierarchy. Homepage Product cards are intentionally excluded from this pass. */

/* Product-page heroes share one rhythm; the homepage hero remains its own composition. */
.planningHero,
.analysisHero,
.productAreaHero,
.workflowHero,
.customersHero {
  padding-top: clamp(76px, 8vw, 112px) !important;
  padding-bottom: clamp(84px, 9vw, 124px) !important;
}

.lead,
.sectionText,
.ctaText,
.productMenuCopy span {
  color: var(--green-400);
}
.sectionKicker {
  color: var(--blue-600);
}
.button.primary,
.headerCta {
  border-color: var(--primary-green);
  background: var(--primary-green);
  color: var(--primary-white);
}
.button.primary:hover,
.headerCta:hover {
  border-color: var(--green-600);
  background: var(--green-600);
  color: var(--primary-white);
}
.button.ghost,
.loginButton {
  border-color: var(--green-200);
  background: var(--card);
  color: var(--primary-green);
  box-shadow: none;
}
.button.ghost:hover,
.loginButton:hover {
  border-color: var(--primary-green);
  background: color-mix(in srgb, var(--primary-white) 60%, var(--card));
}
.productMenuLink:hover,
.productMenuLink:focus-visible {
  background: color-mix(in srgb, var(--primary-white) 60%, var(--card));
}
.ctaBand {
  border-color: var(--green-100);
}
.ctaBand {
  background-color: var(--card);
}
:focus-visible {
  outline-color: var(--aqua-600);
}