@layer utilities {
    .h1,
    .h2 {
        font-weight: 600;
    }

    .h1 {
        font-size: clamp(31px, 4.4vw, 60px);
        line-height: 1.08;
        letter-spacing: -0.025em;
        text-wrap: balance;
    }

    .h1--hero {
        font-size: clamp(36px, 4.6vw, 64px);
    }

    .h2 {
        font-size: clamp(30px, 3.4vw, 46px);
        line-height: 1.12;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }

    .h2--lg {
        font-size: clamp(30px, 3.4vw, 48px);
    }

    .h2--cta {
        font-size: clamp(30px, 3.6vw, 48px);
        line-height: 1.1;
    }

    .h2--cta-lg {
        font-size: clamp(30px, 3.8vw, 52px);
        line-height: 1.1;
    }

    .h2--card {
        font-size: clamp(26px, 2.6vw, 34px);
        line-height: 1.15;
        letter-spacing: normal;
        text-wrap: wrap;
    }

    .title-xl {
        font-size: clamp(24px, 2.4vw, 30px);
        font-weight: 600;
        line-height: 1.15;
    }

    .title-teaser {
        font-size: clamp(24px, 2.4vw, 32px);
        font-weight: 600;
        line-height: 1.2;
    }

    .title-lg {
        font-size: clamp(22px, 2.2vw, 28px);
        font-weight: 600;
    }

    .title-28,
    .title-24,
    .title-22,
    .title-21,
    .title-20,
    .title-19,
    .title-18 {
        font-weight: 600;
        line-height: 1.3;
    }

    .title-28 {
        font-size: 28px;
    }

    .title-24 {
        font-size: 24px;
    }

    .title-22 {
        font-size: 22px;
    }

    .title-21 {
        font-size: 21px;
    }

    .title-20 {
        font-size: 20px;
    }

    .title-19 {
        font-size: 19px;
    }

    .title-18 {
        font-size: 18px;
    }

    .lead {
        font-size: 20px;
    }

    .text-19 {
        font-size: 19px;
    }

    .text-18 {
        font-size: 18px;
    }

    .text-17 {
        font-size: 17px;
    }

    .text-16 {
        font-size: 16px;
    }

    .text-15 {
        font-size: 15px;
    }

    .text-14 {
        font-size: 14px;
    }

    .text-13 {
        font-size: 13px;
    }

    .text-medium {
        font-weight: 500;
    }

    .text-semibold {
        font-weight: 600;
    }

    .text-muted {
        color: var(--fg-muted);
    }

    .text-accent {
        color: var(--color-accent);
    }

    .text-accent--block {
        display: block;
    }

    .text-center {
        text-align: center;
    }

    .nowrap {
        white-space: nowrap;
    }

    .caption {
        color: var(--fg-muted);
        font-size: 14px;
    }

    .footnote {
        margin-top: 16px;
        color: var(--fg-muted);
        font-size: 14px;
    }
}