@font-face {
  font-family: "Source Sans 3";
  src: url("./assets/source-sans-3-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("./assets/source-sans-3-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --font-saans: "Source Sans 3", sans-serif;
  --font-saans-mono: "SFMono-Regular", Menlo, Consolas, monospace;
  --type-display-xl-size: 72px;
  --type-display-xl-line: 1.05;
  --type-display-xl-track: -2px;
  --type-display-lg-size: 56px;
  --type-display-lg-line: 1.1;
  --type-display-lg-track: -1.4px;
  --type-display-md-size: 40px;
  --type-display-md-line: 1.15;
  --type-display-md-track: -.8px;
  --type-headline-size: 28px;
  --type-headline-line: 1.2;
  --type-headline-track: -.5px;
  --type-card-title-size: 22px;
  --type-card-title-line: 1.25;
  --type-card-title-track: -.3px;
  --type-subhead-size: 20px;
  --type-subhead-line: 1.4;
  --type-subhead-track: -.2px;
  --type-body-lg-size: 18px;
  --type-body-lg-line: 1.5;
  --type-body-lg-track: -.1px;
  --type-body-size: 16px;
  --type-body-line: 1.5;
  --type-body-sm-size: 14px;
  --type-body-sm-line: 1.5;
  --type-caption-size: 12px;
  --type-caption-line: 1.4;
  --type-button-size: 15px;
  --type-button-line: 1.2;
  --type-mono-size: 13px;
  --type-mono-line: 1.5;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-saans);
}

body {
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--type-body-line);
  letter-spacing: 0;
}

.display-xl {
  font-family: var(--font-saans);
  font-size: var(--type-display-xl-size);
  font-weight: 500;
  line-height: var(--type-display-xl-line);
  letter-spacing: var(--type-display-xl-track);
}

.display-lg,
.tools-heading h2 {
  font-family: var(--font-saans);
  font-size: var(--type-display-lg-size);
  font-weight: 500;
  line-height: var(--type-display-lg-line);
  letter-spacing: var(--type-display-lg-track);
}

.display-md,
.section-heading h2,
.build-intro h2,
.page-hero h1,
.guide-article h1,
.article-wrap h1,
.legal-content h1,
.plan h2,
.estimate strong {
  font-family: var(--font-saans);
  font-size: var(--type-display-md-size);
  font-weight: 500;
  line-height: var(--type-display-md-line);
  letter-spacing: var(--type-display-md-track);
}

.plan h2 span {
  display: inline-block;
  margin-left: 6px;
  white-space: nowrap;
}

.headline,
.feature-copy h3,
.footer-main h2,
.footer-copy h2,
.guide-section h2,
.resource-feature-copy h1,
.calculator h2,
.compare h2,
.faq h2,
.legal-content h2 {
  font-family: var(--font-saans);
  font-size: var(--type-headline-size);
  font-weight: 500;
  line-height: var(--type-headline-line);
  letter-spacing: var(--type-headline-track);
}

.card-title,
.book h3,
.resource-card h2,
.footer-preview h3,
.footer-card h3 {
  font-family: var(--font-saans);
  font-size: var(--type-card-title-size);
  font-weight: 500;
  line-height: var(--type-card-title-line);
  letter-spacing: var(--type-card-title-track);
}

.subhead,
.guide-intro-copy,
.article-beliefs div {
  font-family: var(--font-saans);
  font-size: var(--type-subhead-size);
  font-weight: 400;
  line-height: var(--type-subhead-line);
  letter-spacing: var(--type-subhead-track);
}

.body-lg,
.hero-copy > p,
.article-body p,
.legal-content p {
  font-family: var(--font-saans);
  font-size: var(--type-body-lg-size);
  font-weight: 400;
  line-height: var(--type-body-lg-line);
  letter-spacing: var(--type-body-lg-track);
}

.body,
.feature-copy p,
.guide-section p,
.guide-section li,
.resource-feature-copy p,
.faq p {
  font-family: var(--font-saans);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--type-body-line);
  letter-spacing: 0;
}

.body-sm,
.text-links a,
.resource-card p,
.footer-guide,
.footer-links a,
.footer-how,
.footer-columns a,
.inner-nav a,
.desktop-nav a,
.mobile-menu a,
.inner-mobile-nav a {
  font-family: var(--font-saans);
  font-size: var(--type-body-sm-size);
  font-weight: 400;
  line-height: var(--type-body-sm-line);
  letter-spacing: 0;
}

.caption,
.book small,
.book footer,
.chapter-pill,
.article-kicker,
.article-date,
.plan > small,
.plan .eyebrow,
.resource-card small,
.footer-fine,
.security,
.copyright,
.credit {
  font-family: var(--font-saans);
  font-size: var(--type-caption-size);
  font-weight: 400;
  line-height: var(--type-caption-line);
  letter-spacing: 0;
}

.button,
.inner-cta,
.dark-button,
.soft-button,
.tool-tabs button,
button {
  font-family: var(--font-saans);
  font-size: var(--type-button-size);
  font-weight: 500;
  line-height: var(--type-button-line);
  letter-spacing: 0;
}

.mono,
code,
pre,
.chapter-art span,
.guide-visual span,
.resource-card .thumb span,
.plan-art span,
.article-visual strong,
.network-core small,
.network-node {
  font-family: var(--font-saans-mono);
  font-size: var(--type-mono-size);
  font-weight: 400;
  line-height: var(--type-mono-line);
  letter-spacing: 0;
}

@media (max-width: 900px) {
  :root {
    --type-display-xl-size: 56px;
    --type-display-lg-size: 48px;
    --type-display-md-size: 36px;
  }
}

@media (max-width: 600px) {
  :root {
    --type-display-xl-size: 42px;
    --type-display-lg-size: 36px;
    --type-display-md-size: 32px;
    --type-headline-size: 26px;
    --type-card-title-size: 21px;
    --type-subhead-size: 19px;
    --type-body-lg-size: 17px;
  }
}