body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background: var(--ivory);
  color: var(--ink-navy)
}

h1, h2, h3 {
  color: var(--ink-navy)
}

.dark h1, .dark h2, .dark h3 {
  color: var(--ink-100)
}

.eyebrow {
  color: var(--teal)
}

.dark .eyebrow {
  color: var(--teal-bright)
}

.lead {
  color: var(--ink-soft)
}

.dark .lead {
  color: var(--ink-300)
}

.btn-ghost {
  color: var(--ink-navy);
  border: 1px solid rgba(15, 38, 54, .22)
}

.btn-ghost:hover {
  border-color: var(--teal);
  color: var(--teal)
}

.dark .btn-ghost {
  color: var(--ink-100);
  border-color: var(--line-strong)
}

.dark .btn-ghost:hover {
  border-color: var(--teal-bright);
  color: var(--teal-bright)
}

.link {
  color: var(--teal)
}

.dark .link {
  color: var(--teal-bright)
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease
}

.reveal.in {
  opacity: 1;
  transform: none
}