:root {
    --type-font-sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --type-font-display: "IBM Plex Serif", "Georgia", serif;
    --type-font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --type-text: #1f2937;
    --type-text-muted: #475569;
    --type-heading: #0f172a;

    --type-size-lg: 1.75rem;
    --type-size-md: 1rem;
    --type-size-sm: 0.875rem;
    --type-size-body: 1rem;
    --type-size-support: 0.875rem;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--type-font-sans) !important;
    color: var(--type-text) !important;
    font-size: var(--type-size-body);
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--type-font-display) !important;
    color: var(--type-heading) !important;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin-top: 0;
}

h1 {
    font-size: clamp(2.1rem, 4vw, 3.3rem) !important;
}

h2 {
    font-size: clamp(1.75rem, 3vw, 2.35rem) !important;
}

h3 {
    font-size: 1.35rem !important;
}

h4 {
    font-size: 1.1rem !important;
}

/* Keep hero headline stronger than the rest of the page */
.hero h1 {
    font-size: clamp(2.25rem, 6vw, 4.5rem) !important;
    line-height: 1.1;
}

p,
li,
label,
small {
    font-family: var(--type-font-sans);
    color: var(--type-text-muted);
    line-height: 1.7;
}

code,
pre,
kbd,
samp {
    font-family: var(--type-font-mono);
}

.badge,
.hero-note,
.hero-note-link,
.faq-question {
    font-size: var(--type-size-support) !important;
    letter-spacing: 0.01em;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.7rem !important;
    }
}