/**
 * Public site typography – font-size scale for marketing pages.
 * Link this before or with footer/faq/plans so shared partials and pages use a consistent scale.
 * Breakpoints: 768px (tablet/mobile), 480px (small phone).
 */
:root {
    --fs-hero: 4rem;
    --fs-h2: 3rem;
    --fs-h3: 1.5rem;
    --fs-body: 1.05rem;
    --fs-body-sm: 0.95rem;
    --fs-small: 0.9rem;
    --fs-caption: 0.8rem;
    --fs-badge: 0.9rem;
}

@media (max-width: 768px) {
    :root {
        --fs-hero: 2.25rem;
        --fs-h2: 1.875rem;
        --fs-h3: 1.35rem;
        --fs-body: 1rem;
        --fs-body-sm: 0.95rem;
        --fs-small: 0.875rem;
        --fs-caption: 0.8125rem;
        --fs-badge: 0.8rem;
    }
}

@media (max-width: 480px) {
    :root {
        --fs-hero: 1.875rem;
        --fs-h2: 1.5rem;
        --fs-h3: 1.2rem;
        --fs-body: 1rem;
        --fs-body-sm: 0.9375rem;
        --fs-small: 0.8125rem;
        --fs-caption: 0.75rem;
        --fs-badge: 0.75rem;
    }
}