/* VoiceBloom public-site header system.
   Keep page-specific layouts, but use one scale and two intentional surfaces:
   white for image-led product heroes, soft mint for centered information heroes. */
:root {
  --vb-header-ink: #1d2826;
  --vb-header-muted: #53635d;
  --vb-header-surface: #e6f4ed;
}

/* Image-led landing and audience pages. */
.home-hero,
.aud-hero,
.edu-hero,
.price-hero {
  background: #fff !important;
}

.home-hero h1,
.aud-hero h1,
.edu-hero h1,
.price-hero h1 {
  color: var(--vb-header-ink) !important;
  font-size: clamp(38px, 4.6vw, 52px) !important;
  font-weight: 500 !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
}

/* Centered guide, demo, company, and FAQ headers. */
.page-hero,
.blog-head {
  background: var(--vb-header-surface) !important;
  color: var(--vb-header-ink) !important;
  padding-top: clamp(50px, 6vw, 72px) !important;
  padding-bottom: clamp(50px, 6vw, 72px) !important;
}

.page-hero h1,
.blog-head h1 {
  width: min(100%, 920px);
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--vb-header-ink) !important;
  font-size: clamp(32px, 3.6vw, 44px) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em !important;
}

.page-hero p,
.blog-head p {
  color: var(--vb-header-muted) !important;
}

/* Long-form comparison and blog article titles use the same restrained cap. */
.post-head h1,
article > header h1 {
  color: var(--vb-header-ink) !important;
  font-size: clamp(32px, 3.5vw, 42px) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em !important;
}

@media (max-width: 640px) {
  .home-hero h1,
  .aud-hero h1,
  .edu-hero h1,
  .price-hero h1,
  .page-hero h1,
  .blog-head h1,
  .post-head h1,
  article > header h1 {
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }

  .page-hero,
  .blog-head {
    padding: 44px 18px !important;
  }
}