/* One spacing scale and the homepage type stack.
   Linked after each page's own <style> so these tokens win
   on section rhythm without retuning individual cards. */
:root {
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-section: 80px;
  --space-section-mobile: 48px;
  --space-gap: 32px;
  --space-gap-mobile: 20px;
  --font-sans: "Montserrat", sans-serif;
}

html,
body {
  font-family: var(--font-sans);
}

body {
  font-size: 17px;
}

/* Homepage content sections. The hero keeps its viewport padding.
   The logo strip is nested in the hero and stays flush. */
.page-home > section:not(.hero):not(.trust-tag) {
  padding: var(--space-section) var(--space-md);
}

.page-home > section.trust-tag {
  padding: var(--space-section) var(--space-md) 0;
}

.page-home .problem-cards,
.page-home .features-grid,
.page-home .challenge-grid {
  gap: var(--space-gap);
}

.sol-wrap > .section,
.trust-wrap > .section {
  margin-bottom: var(--space-section);
}

main.blog-main {
  padding-bottom: var(--space-section);
  padding-inline: var(--space-md);
}

main.blog-main .page-header,
main.blog-main .cat-nav {
  margin-bottom: var(--space-lg);
}

main.blog-main .cards-grid {
  gap: var(--space-gap);
}

/* Long source URLs wrap. Advisory tables already scroll in their own wrappers. */
.post-body {
  overflow-wrap: anywhere;
}

.post-wrap,
.legal-page,
.team-wrap,
.profile,
.sol-wrap,
.trust-wrap {
  padding-bottom: var(--space-section);
  padding-inline: var(--space-md);
}

.post-wrap .recent-posts {
  margin-top: var(--space-section);
  padding-top: var(--space-gap);
}

.team-grid {
  gap: var(--space-gap);
}

.team-wrap .team-cta {
  margin-top: var(--space-section);
}

@media (max-width: 768px) {
  .page-home > section:not(.hero):not(.trust-tag) {
    padding: var(--space-section-mobile) var(--space-sm);
  }

  /* Business Impact is a div, so it misses the section gutter above. */
  .page-home .metrics-bar {
    padding-inline: var(--space-sm);
  }

  .page-home > section.trust-tag {
    padding: var(--space-section-mobile) var(--space-sm) 0;
  }

  .page-home .problem-cards,
  .page-home .features-grid,
  .page-home .challenge-grid,
  main.blog-main .cards-grid,
  .team-grid {
    gap: var(--space-gap-mobile);
  }

  main.blog-main,
  .post-wrap,
  .legal-page,
  .team-wrap,
  .profile,
  .sol-wrap,
  .trust-wrap {
    padding-bottom: var(--space-section-mobile);
    padding-inline: var(--space-sm);
  }

  .sol-wrap > .section,
  .trust-wrap > .section {
    margin-bottom: var(--space-section-mobile);
  }

  .post-wrap .recent-posts {
    margin-top: var(--space-section-mobile);
  }
}