@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/google-sans-flex.ttf") format("truetype");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-heading: var(--font-body);
  --font-body: "Google Sans Flex", Arial, sans-serif;
  --text-primary: #081b49;
  --text-secondary: #34466a;
  --text-muted: #64748b;
  --text-link: #0057d9;
  --text-inverse: #fff;
  --type-display-xl: 700 3.5rem/4rem var(--font-heading);
  --type-display-l: 700 3rem/3.5rem var(--font-heading);
  --type-h1: 700 2.5rem/3rem var(--font-heading);
  --type-h2: 600 2rem/2.5rem var(--font-heading);
  --type-h3: 600 1.5rem/2rem var(--font-heading);
  --type-h4: 600 1.25rem/1.75rem var(--font-heading);
  --type-h5: 600 1.125rem/1.625rem var(--font-heading);
  --type-h6: 600 1rem/1.5rem var(--font-heading);
  --type-body-large: 400 1.125rem/1.75rem var(--font-body);
  --type-body-medium: 400 1rem/1.5rem var(--font-body);
  --type-body-regular: 400 0.875rem/1.375rem var(--font-body);
  --type-body-small: 400 0.8125rem/1.25rem var(--font-body);
  --type-body-xs: 400 0.75rem/1.125rem var(--font-body);
  --type-navigation: 500 0.875rem/1.25rem var(--font-body);
  --type-button-large: 600 1rem/1.5rem var(--font-body);
  --type-button-medium: 600 0.875rem/1.25rem var(--font-body);
  --type-button-small: 600 0.75rem/1.125rem var(--font-body);
  --type-input-text: 400 0.875rem/1.25rem var(--font-body);
  --type-input-label: 600 0.8125rem/1.25rem var(--font-body);
  --type-product-title: 600 0.875rem/1.25rem var(--font-body);
  --type-product-metadata: 400 0.75rem/1.125rem var(--font-body);
  --type-table-header: 600 0.75rem/1.125rem var(--font-body);
  --type-table-cell: 400 0.8125rem/1.25rem var(--font-body);
  --type-badge: 600 0.6875rem/1rem var(--font-body);
  --type-caption: 400 0.75rem/1.125rem var(--font-body);
  --type-metric-large: 800 2.25rem/2.75rem var(--font-heading);
  --type-metric-medium: 800 1.75rem/2.25rem var(--font-heading);
  --type-metric-small: 700 1.375rem/1.875rem var(--font-heading);
}

.type-display-xl {
  font: var(--type-display-xl);
  letter-spacing: -0.02em;
}
.type-display-l {
  font: var(--type-display-l);
  letter-spacing: -0.02em;
}
h1, .type-h1 {
  font: var(--type-h1);
  letter-spacing: -0.02em;
}
h2, .type-h2 {
  font: var(--type-h2);
  letter-spacing: -0.015em;
}
h3, .type-h3 {
  font: var(--type-h3);
  letter-spacing: -0.01em;
}
h4, .type-h4 {
  font: var(--type-h4);
  letter-spacing: -0.01em;
}
h5, .type-h5 {
  font: var(--type-h5);
  letter-spacing: -0.005em;
}
h6, .type-h6 {
  font: var(--type-h6);
  letter-spacing: 0em;
}
.type-body-large {
  font: var(--type-body-large);
}
.type-body-medium {
  font: var(--type-body-medium);
}
body, .intro, .requirements, .type-body-regular {
  font: var(--type-body-regular);
}
.type-body-small {
  font: var(--type-body-small);
}
.type-body-xs {
  font: var(--type-body-xs);
}
.navigation, .menu-button, .type-navigation {
  font: var(--type-navigation);
}
.type-button-large {
  font: var(--type-button-large);
}
.button, .type-button-medium {
  font: var(--type-button-medium);
}
.popular a, .type-button-small {
  font: var(--type-button-small);
}
.search input, .type-input-text {
  font: var(--type-input-text);
}
.popular h2, .search label, .type-input-label {
  font: var(--type-input-label);
}
.type-product-title {
  font: var(--type-product-title);
}
.type-product-metadata {
  font: var(--type-product-metadata);
}
.type-table-header {
  font: var(--type-table-header);
}
.type-table-cell {
  font: var(--type-table-cell);
  font-variant-numeric: tabular-nums;
}
.type-badge {
  font: var(--type-badge);
}
.catalog-stats li, .type-caption {
  font: var(--type-caption);
}
.type-metric-large {
  font: var(--type-metric-large);
  font-variant-numeric: tabular-nums;
}
.type-metric-medium {
  font: var(--type-metric-medium);
  font-variant-numeric: tabular-nums;
}
.catalog-stats strong, .type-metric-small {
  font: var(--type-metric-small);
  font-variant-numeric: tabular-nums;
}
.type-weight-medium { font-weight: 500; }
.type-weight-semibold { font-weight: 600; }

@media (max-width: 1100px) {
  :root {
    --type-h1: 700 2.25rem/2.75rem var(--font-heading);
    --type-h2: 600 1.75rem/2.25rem var(--font-heading);
    --type-h3: 600 1.375rem/1.875rem var(--font-heading);
  }
}

@media (max-width: 740px) {
  :root {
    --type-h1: 700 1.75rem/2.25rem var(--font-heading);
    --type-h2: 600 1.5rem/2rem var(--font-heading);
    --type-h3: 600 1.25rem/1.75rem var(--font-heading);
    --type-h4: 600 1.125rem/1.625rem var(--font-heading);
  }
  #hero-title { font: 700 1.875rem/2.375rem var(--font-heading); }
}