:root {
  --font-body: var(--font-sans);
  --font-heading: var(--font-serif);
}

.display {
  font-family: var(--font-heading);
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  font-weight: 700;
  color: var(--color-ink);
}

@media (min-width: 1024px) {
  .display {
    font-size: 48px;
    line-height: 56px;
  }
}

.heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: 700;
  color: var(--color-ink);
}

.title {
  font-family: var(--font-body);
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
  font-weight: 700;
  color: var(--color-ink);
}

.body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
}

.body--muted {
  color: var(--color-muted-ink);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-muted-ink);
}

.logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-deep-moss);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--spacing-md);
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: 48px;
    line-height: 56px;
  }
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-muted-ink);
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 1024px) {
  .hero__subtitle {
    font-size: 18px;
    line-height: 28px;
  }
}

.feature-card__title {
  font-family: var(--font-body);
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--spacing-sm);
}

.feature-card__body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-muted-ink);
}

.faq__question {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--spacing-sm);
}

.faq__answer {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-muted-ink);
  margin-bottom: var(--spacing-md);
}

.contact__label {
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-muted-ink);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-xs);
}

.contact__email {
  font-family: var(--font-body);
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
  font-weight: 700;
  color: var(--color-deep-moss);
  margin-bottom: var(--spacing-sm);
}