:root {
    --display: "DM Sans", "Segoe UI", Arial, sans-serif;
    --body: "DM Sans", "Segoe UI", Arial, sans-serif;
}

html { font-size: 16px; }

body {
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
}

button, input, textarea, select { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    text-wrap: balance;
}

p, li { text-wrap: pretty; }

.kicker, .eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.carousel-content { width: min(680px, 72vw); }

.carousel-content h1 {
    font-family: var(--display);
    font-size: clamp(2rem, 3.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
    max-width: 14ch;
    margin: 0;
    text-transform: none;
}

.carousel-content h1 em,
.home-store-heading h2 em,
.blog-heading h2 em,
.downloads-page-hero h1 em,
.store-hero h1 em {
    color: inherit;
    font-style: normal;
}

.carousel-content h1 em { color: var(--lime); }

.home-store-heading h2,
.blog-heading h2,
.instagram-copy h2,
.download-showcase-heading h2,
.store-hero h1,
.downloads-page-hero h1,
.search-page h1,
.payment-status h1,
.section-heading h2,
.downloads-intro h2 {
    font-family: var(--display);
    font-size: clamp(2.25rem, 4.6vw, 4.25rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-transform: none;
    white-space: normal;
}

.home-store-heading h2 em,
.blog-heading h2 em { color: #5f8e00; }

.instagram-copy h2 {
    margin: 0;
    max-width: 18ch;
}

.article-page h1 {
    font-family: var(--display);
    font-size: clamp(2.125rem, 4.8vw, 3.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.035em;
    max-width: 19ch;
}

.blog-card h3,
.story-copy h3,
.story-card h3,
.download-title h3,
.download-card h3,
.search-result h2,
.store-empty h2,
.download-empty h3 {
    font-family: var(--display);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-transform: none;
}

.product-content h2,
.product-content h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

.blog-heading > p,
.store-hero > p,
.download-showcase-heading > p,
.article-content,
.product-description { line-height: 1.7; }

@media (max-width: 760px) {
    html { font-size: 15px; }

    .carousel-content { width: 78vw; }

    .carousel-content h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        max-width: 13ch;
    }

    .home-store-heading h2,
    .blog-heading h2,
    .instagram-copy h2,
    .download-showcase-heading h2,
    .store-hero h1,
    .downloads-page-hero h1,
    .search-page h1,
    .payment-status h1,
    .section-heading h2,
    .downloads-intro h2 {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.1;
    }

    .article-page h1 { font-size: clamp(2rem, 9vw, 3rem); }
}