/* ============================================
   TYPOGRAPHY CONSISTENCY LAYER (ALL PAGES)
   Loaded after page-specific styles to enforce a single scale.
   ============================================ */

:root {
  --type-hero-desktop: clamp(2.15rem, 3.2vw, 3rem);
  --type-hero-mobile: 1.875rem;
  --type-section-desktop: clamp(2rem, 3vw, 2.5rem);
  --type-section-mobile: 1.5rem;
  --type-body-desktop: 1.0625rem;
  --type-body-mobile: 0.95rem;
  --type-card-title-desktop: 1.125rem;
  --type-card-title-mobile: 0.9375rem;
  --type-card-body-desktop: 0.95rem;
  --type-card-body-mobile: 0.875rem;
  --type-micro-desktop: 0.875rem;
  --type-micro-mobile: 0.75rem;
}

/* Hero */
.hero-title,
.hero h1,
.hero-content-left h1,
.about-hero h1,
.compliance-hero h1,
.article-title,
.blog-header h1 {
  font-size: var(--type-hero-desktop) !important;
  line-height: 1.2 !important;
}

.hero-description,
.hero-subtitle,
.article-excerpt,
.blog-header p,
.section-description,
.integrations-description,
.client-description {
  font-size: var(--type-body-desktop) !important;
  line-height: 1.65 !important;
}

/* Section headers */
.section-title,
.section-header h2,
.section-header .section-title,
.faq-section .section-title,
.article-body h2:not(.faq-q) {
  font-size: var(--type-section-desktop) !important;
  line-height: 1.2 !important;
}

.section-subtitle,
.section-header p,
.faq-section .section-subtitle {
  font-size: var(--type-body-desktop) !important;
  line-height: 1.65 !important;
}

/* Card titles */
.bento-card-v2 h3,
.bento-card h3,
.bento-text h3,
.feature-card h3,
.feature-card h4,
.glass-card h3,
.solution-category h3,
.card-title,
.process-title,
.glance-card h3,
.challenge-point h3,
.solution-step h3,
.result-card h3,
.client-details h3,
.omni-card h3,
.step-content-v h3,
.article-cta h3,
.faq-summary h3,
.faq-item summary,
.faq-item summary h3,
.faq-q,
.article-body h3 {
  font-size: var(--type-card-title-desktop) !important;
  line-height: 1.4 !important;
}

/* Card and paragraph body */
.bento-card-v2 p,
.bento-card p,
.bento-text p,
.feature-card p,
.glass-card p,
.solution-category p,
.card-description,
.blog-card-excerpt,
.blog-preview-excerpt,
.glance-card p,
.challenge-point p,
.solution-step p,
.result-card p,
.solution-points li,
.integrations-features-list li,
.faq-answer,
.faq-item p,
.article-cta p,
.article-body p,
.article-body li,
.faq-a {
  font-size: var(--type-card-body-desktop) !important;
  line-height: 1.6 !important;
}

/* Metadata and small text */
.nav-link,
.dropdown-item,
.mobile-menu-links a,
.tag,
.card-category,
.blog-card-date,
.blog-card-link,
.blog-preview-link,
.security-badge small,
.client-confidentiality-note,
.metric-label,
.feature-compact-title {
  font-size: var(--type-micro-desktop) !important;
  line-height: 1.55 !important;
}

/* Keep metrics and stats visual hierarchy intact */
.metric-number,
.stat-value,
.about-dark-stat-value,
.result-item .metric-number {
  line-height: 1.15 !important;
}

/* Stop split-hero visual offsets from creating horizontal overflow */
@media (min-width: 1024px) {
  .hero,
  .hero-split-wrapper {
    overflow-x: clip !important;
  }

  .hero-split-wrapper .hero-visual-right {
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

/* Mobile scale */
@media (max-width: 768px) {
  .hero-title,
  .hero h1,
  .hero-content-left h1,
  .about-hero h1,
  .compliance-hero h1,
  .article-title,
  .blog-header h1 {
    font-size: var(--type-hero-mobile) !important;
    line-height: 1.25 !important;
  }

  .hero-description,
  .hero-subtitle,
  .article-excerpt,
  .blog-header p,
  .section-description,
  .integrations-description,
  .client-description,
  .section-subtitle,
  .section-header p,
  .faq-section .section-subtitle {
    font-size: var(--type-body-mobile) !important;
    line-height: 1.6 !important;
  }

  .section-title,
  .section-header h2,
  .section-header .section-title,
  .faq-section .section-title,
  .article-body h2:not(.faq-q) {
    font-size: var(--type-section-mobile) !important;
    line-height: 1.25 !important;
  }

  .bento-card-v2 h3,
  .bento-card h3,
  .bento-text h3,
  .feature-card h3,
  .feature-card h4,
  .glass-card h3,
  .solution-category h3,
  .card-title,
  .process-title,
  .glance-card h3,
  .challenge-point h3,
  .solution-step h3,
  .result-card h3,
  .client-details h3,
  .omni-card h3,
  .step-content-v h3,
  .article-cta h3,
  .faq-summary h3,
  .faq-item summary,
  .faq-item summary h3,
  .faq-q,
  .article-body h3 {
    font-size: var(--type-card-title-mobile) !important;
    line-height: 1.4 !important;
  }

  .bento-card-v2 p,
  .bento-card p,
  #analytics-carousel .bento-card p,
  #analytics-carousel .bento-card-content p,
  .analytics-bento-grid.mobile-carousel .bento-card p,
  .analytics-bento-grid.mobile-carousel .bento-card-content p,
  .bento-text p,
  .feature-card p,
  .glass-card p,
  .solution-category p,
  .card-description,
  .blog-card-excerpt,
  .blog-preview-excerpt,
  .glance-card p,
  .challenge-point p,
  .solution-step p,
  .result-card p,
  .solution-points li,
  .integrations-features-list li,
  .faq-answer,
  .faq-item p,
  .article-cta p,
  .article-body p,
  .article-body li,
  .faq-a {
    font-size: var(--type-card-body-mobile) !important;
    line-height: 1.55 !important;
  }

  .nav-link,
  .dropdown-item,
  .mobile-menu-links a,
  .tag,
  .card-category,
  .blog-card-date,
  .blog-card-link,
  .blog-preview-link,
  .security-badge small,
  .client-confidentiality-note,
  .metric-label,
  .feature-compact-title {
    font-size: var(--type-micro-mobile) !important;
    line-height: 1.5 !important;
  }
}