/* common/typography.css */
body:not(.blog-page) .section-padding { padding-top: var(--space-16); padding-bottom: var(--space-16); }
@media (min-width: 1024px) {
    body:not(.blog-page) .section-padding { padding-top: var(--space-16); padding-bottom: var(--space-16); }
}

.blog-page .section-padding { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 1024px) {
    .blog-page .section-padding { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

.prose-site { max-width: none; line-height: 1.75; color: var(--stone-700); }
.prose-site h2, .prose-site h3, .prose-site h4, .prose-site h5, .prose-site h6 { color: var(--stone-900); }
.prose-site h2 { margin-top: 2rem; margin-bottom: 1rem; font-size: 1.4rem; font-weight: 700; }
.prose-site h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1rem; font-weight: 600; }
.prose-site p { margin: 0 0 1rem; }
.prose-site ul, .prose-site ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.prose-site li { margin-bottom: 0.5rem; }
.prose-site a { color: var(--brand-700); font-weight: 600; }
.prose-site strong { font-weight: 700; }

/* global buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.75rem; padding: 0.625rem 1rem; font-weight: 600; transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base); border: 1px solid transparent; text-decoration: none; will-change: transform; }
.btn-primary { background: linear-gradient(135deg, #19c46d 0%, #006850 100%); color: #ffffff; box-shadow: 0 12px 32px rgba(30, 166, 98, 0.18); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(30, 166, 98, 0.22); }
.btn-secondary { background: rgba(255, 255, 255, 0.15); color: #f8fafc; border: 1.5px solid rgba(255, 255, 255, 0.3); }
.btn-outline { background: transparent; color: var(--stone-700); border-color: var(--stone-300); }
.btn-outline-dark { background: transparent; color: #e6e6e6; border: 1px solid rgba(255, 255, 255, 0.15); }

/* ============================================================
   GLOBAL HEADING TYPOGRAPHY SYSTEM
   Provides consistent font sizing, weight, spacing, and
   responsive scaling across all pages and components.
   ============================================================ */

/* Primary page heading (Hero H1) - Desktop: ~2.52rem, Tablet: ~2.1rem, Mobile: ~1.54rem */
h1 {
    font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: clamp(1.54rem, 3.64vw, 2.52rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 0.6rem;
    color: #111827;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Section heading (H2) - Desktop: ~2.4rem (95% of H1), Tablet: ~1.9rem, Mobile: ~1.46rem */
h2 {
    font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: clamp(1.46rem, 3.5vw, 2.4rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    color: #111827;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Subsection heading (H3) - Desktop: ~1.7rem (71% of H2), Tablet: ~1.2rem, Mobile: ~1rem */
h3 {
    font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: clamp(1rem, 2.3vw, 1.7rem);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.4rem;
    color: #111827;
}