:root {
    /* Desktop (≥1024px) variables */
    --font-h1: 72px;
    --leading-h1: 74px;
    --weight-h1: 700;

    --font-h2: 48px;
    --leading-h2: 50px;
    --weight-h2: 700;

    --font-h3: 36px;
    --leading-h3: 40px;
    --weight-h3: 700;

    --font-h4: 28px;
    --leading-h4: 32px;
    --weight-h4: 700;

    --font-h5: 24px;
    --leading-h5: 28px;
    --weight-h5: 700;

    --font-h6: 20px;
    --leading-h6: 24px;
    --weight-h6: 700;

    /* Body text */
    --font-body-l: 18px;
    --leading-body-l: 26px;
    --weight-body-l: 350;

    --font-body-m: 16px;
    --leading-body-m: 24px;
    --weight-body-m: 350;

    --font-body-s: 14px;
    --leading-body-s: 20px;
    --weight-body-s: 350;

    --font-reference-m: 12px;
    --leading-reference-m: 18px;
    --weight-reference-m: 350;
}

/* Desktop styles */
h1,
.h1 {
    font-size: var(--font-h1);
    line-height: var(--leading-h1);
    font-weight: var(--weight-h1);
}

h2,
.h2 {
    font-size: var(--font-h2);
    line-height: var(--leading-h2);
    font-weight: var(--weight-h2);
}

h3,
.h3 {
    font-size: var(--font-h3);
    line-height: var(--leading-h3);
    font-weight: var(--weight-h3);
}

h4,
.h4 {
    font-size: var(--font-h4);
    line-height: var(--leading-h4);
    font-weight: var(--weight-h4);
}

h5,
.h5 {
    font-size: var(--font-h5);
    line-height: var(--leading-h5);
    font-weight: var(--weight-h5);
}

h6,
.h6 {
    font-size: var(--font-h6);
    line-height: var(--leading-h6);
    font-weight: var(--weight-h6);
}

.body-l {
    font-size: var(--font-body-l);
    line-height: var(--leading-body-l);
    font-weight: var(--weight-body-l);
}

.body-s {
    font-size: var(--font-body-s);
    line-height: var(--leading-body-s);
    font-weight: var(--weight-body-s);
}

.reference-m {
    font-size: var(--font-reference-m);
    line-height: var(--leading-reference-m);
    font-weight: var(--weight-reference-m);
}

/* Mobile overrides (<1024px) */
@media (max-width: 1023.98px) {
    :root {
        --font-h1: 48px; /* text-5xl */
        --leading-h1: 50px;

        --font-h2: 36px; /* text-4xl */
        --leading-h2: 40px;

        --font-h3: 30px; /* text-3xl (approx) */
        --leading-h3: 40px;

        --font-h4: 24px; /* text-2xl */
        --leading-h4: 32px;

        --font-h5: 20px; /* text-xl */
        --leading-h5: 28px;

        --font-h6: 20px; /* no change */
        --leading-h6: 24px;

        /* Body text and reference-m remain unchanged */
    }
}

@font-face {
    font-family: 'NeueFrutigerWorld';
    src: url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorldW02-Light.woff2)
            format('woff2'),
        url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorldW02-Light.woff)
            format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'NeueFrutigerWorld';
    src: url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorldW02-Light.woff2)
            format('woff2'),
        url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorldW02-Light.woff)
            format('woff');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'NeueFrutigerWorld';
    src: url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorldW02-Regular.woff2)
            format('woff2'),
        url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorldW02-Regular.woff)
            format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'NeueFrutigerWorld';
    src: url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorld-Medium.woff2)
            format('woff2'),
        url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorld-Medium.woff)
            format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueFrutigerWorld';
    src: url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorldW02-Bold.woff2)
            format('woff2'),
        url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorldW02-Bold.woff)
            format('woff');
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: 'NeueFrutigerWorld';
    src: url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorld-Heavy.woff2)
            format('woff2'),
        url(/public/fonts/NeueFrutigerWorld/NeueFrutigerWorld-Heavy.woff)
            format('woff');
    font-weight: 900;
    font-display: swap;
}

body {
    font-family: NeueFrutigerWorld, sans-serif;
    font-size: 16px;
    font-weight: 300;
}

p {
    margin-bottom: 15px;
    font-size: inherit;
}

h1,
.h1 {
    margin-bottom: 40px;
}

h2,
.h2 {
    margin-bottom: 30px;
}
h3,
.h3 {
    margin-bottom: 20px;
}

.text-lg {
    font-size: 18px;
    line-height: 26px;
}

.text-sm {
    font-size: 14px;
    line-height: 20px;
}

.text-xs {
    font-size: 12px;
    line-height: 18px;
}

.text-quiet {
    font-size: 12px;
    line-height: 18px;
    color: var(--c-quiet);
}

.text-text-quiet {
    color: var(--c-quiet);
}

.text-text-alternative {
    color: #fff;
}

.check {
    border-bottom: 2px solid;
    border-left: 2px solid;
    display: inline-block;
    font-size: 0;
    height: 8px;
    transform: rotate(-45deg);
    width: 15px;
}

.content-rules blockquote {
    border-left: 0.1875rem solid;
    margin-bottom: 0;
    padding: 0.75rem 1.25rem;
    font-size: 1.25rem;
    line-height: 1.5;
    margin-top: 1.5rem;
    margin-bottom: calc(1.5rem - 15px);
    font-style: italic;
}

figcaption.image-caption {
    border-left: 2px solid;
    opacity: 0.8;
    text-align: left;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    margin-top: 24px;
}