:root {
  --saas-container: 1200px;
  --saas-wide-container: 1280px;
  --saas-side-padding: 24px;
  --saas-grid-gap: 24px;

  --saas-h1: 48px;
  --saas-h2: 32px;
  --saas-h3: 24px;
  --saas-h4: 20px;
  --saas-body-large: 18px;
  --saas-body: 16px;
  --saas-small: 14px;
  --saas-button: 15px;

  --saas-heading-line: 1.2;
  --saas-body-line: 1.6;

  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  --saas-button-height: 44px;
  --saas-button-padding: 14px 24px;
  --saas-radius-button: 8px;
  --saas-radius-card: 12px;
}

body {
  font-size: var(--saas-body) !important;
  line-height: var(--saas-body-line) !important;
}

section {
  padding-top: var(--space-80) !important;
  padding-bottom: var(--space-80) !important;
  padding-left: var(--saas-side-padding) !important;
  padding-right: var(--saas-side-padding) !important;
}

.container,
.page-shell,
.nav-container,
.footer-container,
.site-header-inner,
.site-footer-inner {
  max-width: var(--saas-container) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.wide-container,
.hero-container,
.hero-inner {
  max-width: var(--saas-wide-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.grid-2,
.grid-3,
.grid-4,
.footer-grid,
.feature-card,
.features-stack,
.promise-grid,
.persona-solution-cards,
.solution-overview-grid,
.wins-grid,
.card-grid {
  gap: var(--saas-grid-gap) !important;
}

main h1,
section h1,
.hero h1,
.hero-title,
.intro-card h1,
.detail-hero h1,
.pricing-hero h1,
.intro-block h1 {
  font-size: var(--saas-h1) !important;
  line-height: var(--saas-heading-line) !important;
  letter-spacing: -0.03em !important;
}

main h2,
section h2,
.section-heading h2,
.feature-head h2,
.solutions-overview-section > h2,
.persona-selector-header h2,
.wins-header h2,
.solutions-cta-section h2,
.body-copy h2 {
  font-size: var(--saas-h2) !important;
  line-height: var(--saas-heading-line) !important;
  letter-spacing: -0.03em !important;
}

main h3,
section h3,
article h3,
.card h3,
.feature-card h3,
.solution-card h3,
.wins-card h3,
.persona-panel h3,
.body-copy h3 {
  font-size: var(--saas-h3) !important;
  line-height: var(--saas-heading-line) !important;
  letter-spacing: -0.02em !important;
}

main h4,
section h4,
article h4,
.body-copy h4 {
  font-size: var(--saas-h4) !important;
  line-height: var(--saas-heading-line) !important;
}

main p,
section p,
article p,
main li,
section li,
article li,
td,
.feature-copy p,
.body-copy p,
.body-copy li,
.solution-overview-grid .solution-card p,
.wins-card p {
  font-size: var(--saas-body) !important;
  line-height: var(--saas-body-line) !important;
}

.lead,
.section-heading p,
.feature-sub,
.detail-lead,
.intro-card p,
.hero p,
.hero-copy p,
.pricing-hero p,
.cta-section p,
.solutions-cta-section p,
.persona-selector-header p,
.wins-header p {
  font-size: var(--saas-body-large) !important;
  line-height: var(--saas-body-line) !important;
}

.eyebrow,
.card-topline,
.solution-badge,
.solution-number,
.persona-chip,
.wins-label,
.footer-column h4,
th,
.anchor-strip a,
.menu-column h4 {
  font-size: var(--saas-small) !important;
  line-height: 1.4 !important;
}

.btn-primary,
.btn-secondary,
.cta-btn,
.page-cta,
button,
input[type="submit"],
.solution-link,
.persona-tab,
.nav-menu a,
.menu-column a {
  font-size: var(--saas-button) !important;
}

.btn-primary,
.btn-secondary,
.cta-btn,
.page-cta,
button,
input[type="submit"] {
  min-height: var(--saas-button-height) !important;
  padding: var(--saas-button-padding) !important;
  border-radius: var(--saas-radius-button) !important;
  line-height: 1 !important;
}

.card,
.feature-card,
.solution-card,
.wins-card,
.promise-item,
.data-panel,
.feature-list,
.pricing-card,
.persona-card,
.persona-solution-card,
.detail-meta div,
.detail-block,
.intro-card {
  padding: var(--space-24) !important;
  border-radius: var(--saas-radius-card) !important;
}

.section-heading {
  margin-bottom: var(--space-32) !important;
}

.section-heading h2,
.wins-header h2,
.persona-selector-header h2,
.solutions-overview-section > h2,
.body-copy h2 {
  margin-bottom: var(--space-16) !important;
}

.cta-buttons,
.hero-actions,
.offer-actions,
.cta-actions,
.cta-row,
.anchor-strip,
.persona-tabs {
  gap: var(--space-16) !important;
}

.navbar {
  min-height: 72px !important;
  padding-top: var(--space-16) !important;
  padding-bottom: var(--space-16) !important;
}

.logo img,
.site-logo img {
  max-height: 50px !important;
  height: 50px !important;
  width: auto !important;
}

.nav-menu {
  gap: var(--space-24) !important;
}

.footer {
  padding-top: var(--space-64) !important;
  padding-bottom: var(--space-32) !important;
}

.footer-grid {
  gap: 40px !important;
}

.footer p,
.footer a,
.footer-bottom p,
.footer-about,
.footer-column a {
  font-size: var(--saas-small) !important;
  line-height: var(--saas-body-line) !important;
}

img.hero-image,
.hero img {
  max-width: 700px !important;
}

.hero-banner img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

.feature-visual img,
.feature-image img {
  max-width: 500px !important;
}

.social-icons img {
  width: 24px !important;
  height: 24px !important;
}

@media (max-width: 1024px) {
  :root {
    --saas-side-padding: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --saas-h1: 40px;
    --saas-h2: 28px;
    --saas-h3: 22px;
    --saas-h4: 20px;
    --saas-body-large: 17px;
  }

  section {
    padding-top: var(--space-64) !important;
    padding-bottom: var(--space-64) !important;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .footer-grid,
  .solution-overview-grid,
  .wins-grid,
  .persona-grid {
    grid-template-columns: 1fr !important;
  }
}