:root {
  --font-sans: "Aptos", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", var(--font-sans);
  --font-mono: "Cascadia Mono", "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-caption: 0.78rem;
  --type-kicker: 0.75rem;
  --type-h1: 3.25rem;
  --type-hero: 4.75rem;
  --type-h2: 2.35rem;
  --type-h3: 1rem;
  --leading-tight: 1.06;
  --leading-title: 0.98;
  --leading-body: 1.55;
  --leading-compact: 1.35;
  --tracking-label: 0.08em;
  --tracking-wide: 0.12em;
  --tracking-readable-label: 0.06em;
}

@media (max-width: 720px) {
  :root {
    --type-h1: 2.35rem;
    --type-hero: 2.85rem;
    --type-h2: 1.75rem;
  }
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  font-kerning: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
.brand {
  font-family: var(--font-display);
  text-wrap: balance;
}

p,
li,
dd {
  max-width: 72ch;
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

small,
figcaption,
.eyebrow,
.seo-kicker {
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-readable-label);
  line-height: var(--leading-compact);
}

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

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