@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

:root {
    /* Colors */
    --color-ink: #2E353A;
    --color-ink-secondary: #46535A;
    --color-muted: #7B898E;
    --color-line: #E7EEEA;

    --color-green: #7ED957;
    --color-teal: #13B5D5;
    --color-coral: #FF6A3D;
    --color-coral-dark: #F2542D;

    --color-soft: #F4F8F5;
    --color-soft-secondary: #EEF7FA;

    --color-white: #FFFFFF;
    --color-error-background: #FFF1EC;

    /* Font */
    --font-family: 'Lato', system-ui, sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;

    /* Font sizes */
    --font-size-body: 17px;

    --font-size-h1-hero: clamp(34px, 7.5vw, 60px);
    --font-size-h1-page: clamp(30px, 6vw, 46px);
    --font-size-h2: clamp(28px, 5vw, 44px);
    --font-size-h3: clamp(24px, 4vw, 36px);

    --font-size-lead: 19px;
    --font-size-text: 16px;
    --font-size-navigation: 15px;
    --font-size-label: 13px;
    --font-size-meta: 12.5px;

    /* Line heights */
    --line-height-body: 1.6;
    --line-height-text: 1.7;
    --line-height-h1-hero: 1.03;
    --line-height-h1-page: 1.12;
    --line-height-h2: 1.06;
    --line-height-h3: 1.1;

    /* Letter spacing */
    --letter-spacing-h1: -0.03em;
    --letter-spacing-heading: -0.025em;
    --letter-spacing-label: 0.15em;

    /* Border radius */
    --radius-small: 8px;
    --radius-medium: 11px;
    --radius-button: 13px;
    --radius-card: 18px;
    --radius-large: 24px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-card: 0 8px 26px rgba(12, 34, 38, 0.06);
    --shadow-raised: 0 16px 40px rgba(12, 34, 38, 0.07);
    --shadow-panel: 0 24px 60px rgba(12, 34, 38, 0.12);
    --shadow-cta: 0 10px 24px rgba(255, 106, 61, 0.3);

    /* Layout */
    --content-width: 1200px;
    --page-padding: 40px;

    /* Transitions */
    --transition-color: 0.15s ease;
    --transition-movement: 0.2s ease;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--color-white);
    color: var(--color-ink);

    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);

    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-teal);
    text-decoration: none;

    transition: color var(--transition-color);
}

a:hover {
    color: var(--color-coral-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-ink);
    font-weight: var(--font-weight-black);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

img {
    max-width: 100%;
}

@media (max-width: 900px) {
    :root {
        --page-padding: 28px;
    }
}

@media (max-width: 560px) {
    :root {
        --page-padding: 20px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}