/* Landing Page — einheitliche Typo-Skala */

:root {
    --text-display-xl: clamp(2.35rem, 5.8vw, 4.1rem);
    --text-display-l: clamp(2rem, 4vw, 3rem);
    --text-h2: clamp(1.85rem, 3.6vw, 2.65rem);
    --text-h3: 1.05rem;
    --text-h3-lg: 1.1rem;
    --text-lead: clamp(1rem, 1.6vw, 1.125rem);
    --text-quote: clamp(1.05rem, 1.8vw, 1.2rem);
    --text-body: 0.9375rem;
    --text-body-lg: 1rem;
    --text-sm: 0.9rem;
    --text-sm-md: 0.95rem;
    --text-xs: 0.875rem;
    --text-2xs: 0.85rem;
    --text-badge: 0.8rem;
    --text-micro: 0.72rem;
    --text-price: clamp(2rem, 3.5vw, 2.5rem);
    --color-text: #121212;
    --color-text-muted: #5c5c6f;
    --color-text-soft: #3d3d4a;
    --color-text-faint: #6a6a7a;
}

/* —— Display & Headings —— */

.landing-page h1,
.landing-page .hero-title {
    font-family: var(--font-display);
    font-size: var(--text-display-xl);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.04em;
    color: var(--color-text);
}

.landing-page h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: var(--color-text);
}

.landing-page .testimonial-split__title {
    font-size: var(--text-display-l);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.landing-page h3 {
    font-family: var(--font-sans);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: inherit;
}

.landing-page h3.site-footer__heading {
    font-size: var(--text-sm-md);
    letter-spacing: -0.01em;
    color: #fff;
}

.landing-page h3.power-card__title,
.landing-page h3.pricing-card__name {
    font-size: var(--text-h3-lg);
    line-height: 1.2;
}

.landing-page h3.power-card__title,
.landing-page h3.power-mini__title,
.landing-page .power-features__title {
    color: #fff;
}

/* —— Lead & Body —— */

.landing-page .hero-lead,
.landing-page .features-lead,
.landing-page .pricing__lead,
.landing-page .solution__lead,
.landing-page .final-cta__lead,
.landing-page .testimonial-split__quote {
    font-size: var(--text-lead);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.01em;
    color: var(--color-text-muted);
}

.landing-page .hero-lead {
    line-height: 1.65;
}

.landing-page .features-lead,
.landing-page .pricing__lead,
.landing-page .solution__lead,
.landing-page .final-cta__lead,
.landing-page .testimonial-split__quote {
    line-height: 1.6;
}

.landing-page .hero-lead strong {
    font-weight: 500;
    color: var(--color-text-soft);
}

.landing-page .feature-card__text,
.landing-page .workflow-step__text,
.landing-page .solution-audiences li {
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--color-text-muted);
}

.landing-page .power-card__text,
.landing-page .power-mini__text {
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: #9a9aad;
}

.landing-page .solution-audiences li {
    font-weight: 500;
    color: var(--color-text-soft);
}

.landing-page .integrations-quote {
    font-size: var(--text-quote);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.02em;
    color: var(--color-text-soft);
}

/* —— UI: Header, Buttons, Badges —— */

.landing-page .site-nav a {
    font-size: var(--text-body);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.landing-page .site-header__cta,
.landing-page .integrations-cta,
.landing-page .pricing-card__cta,
.landing-page .solution__cta {
    font-size: var(--text-sm-md);
    font-weight: 600;
}

.landing-page .hero-cta,
.landing-page .final-cta__button {
    font-size: var(--text-body-lg);
    font-weight: 600;
}

.landing-page .hero-badge__tag {
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.landing-page .hero-badge__text {
    font-size: var(--text-badge);
    font-weight: 500;
}

.landing-page .workflow-step__num {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
}

.landing-page .pricing-toggle__label {
    font-size: var(--text-body);
    font-weight: 500;
}

.landing-page .pricing-toggle__label--active {
    font-weight: 600;
}

/* —— Pricing —— */

.landing-page .pricing-card__amount {
    font-family: var(--font-display);
    font-size: var(--text-price);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    display: block;
}

.landing-page .pricing-card__period,
.landing-page .pricing-card__list li {
    font-size: var(--text-sm);
    line-height: 1.2;
}

.landing-page .pricing-card__period {
    font-weight: 500;
}

.landing-page .pricing-card__tagline,
.landing-page .pricing-card--featured .pricing-card__price-equiv {
    font-size: var(--text-2xs);
    font-weight: 400;
    line-height: 1.4;
}

.landing-page .pricing-card__features-title {
    font-size: var(--text-badge);
    font-weight: 500;
}

/* —— Footer & Meta —— */

.landing-page .site-footer__follow,
.landing-page .site-footer__links a,
.landing-page .testimonial-split__cite {
    font-size: var(--text-body);
    font-weight: 400;
}

.landing-page .site-footer__heading {
    font-weight: 700;
}

.landing-page .site-footer__badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.landing-page .site-footer__credits {
    font-size: var(--text-xs);
    font-weight: 400;
}

.landing-page .site-footer__credits a {
    font-weight: 600;
}

.landing-page .integrations-author__name,
.landing-page .testimonial-split__cite strong {
    font-size: var(--text-body);
    font-weight: 600;
}

.landing-page .testimonial-split__cite {
    color: var(--color-text-muted);
}

.landing-page .testimonial-split__cite strong {
    color: var(--color-text);
}

@media (max-width: 640px) {
    .landing-page .hero-cta {
        font-size: 0.92rem;
    }
}

@media (max-width: 520px) {
    .landing-page .site-nav a {
        font-size: 0.88rem;
    }

    .landing-page .workflow-step__num {
        font-size: 0.78rem;
    }
}
