:root {
  --background-color: #fff;
  --chevron-color: #f63;
  --chevron-after-color: #f63;
  --section-link-color: #333332;
  --section-link-border-hover: #f63;
  --section-h1-text-color: #14143c;
  --section-h2-text-color: #14143c;
  --section-h3-text-color: #14143c;
  --section-h4-text-color: #14143c;
  --section-h5-text-color: #333332;
}
.hero .heading-1, .hero h1, .section h1 { font-size: clamp(32px, -600px + 100vw, 60px); line-height: clamp(42px, -600px + 100vw, 70px); color: var(--section-h1-text-color); letter-spacing: -1px; }
@media only screen and (min-width: 600px) {
  .hero .heading-1, .hero h1, .section h1 { letter-spacing: -2px; }
}
.hero h2, .section h2 { font-size: clamp(22px, -600px + 100vw, 32px); line-height: clamp(32px, -600px + 100vw, 42px); color: var(--section-h2-text-color); letter-spacing: inherit; }
.section h3 { letter-spacing: inherit; font-size: 22px; line-height: 32px; color: var(--section-h3-text-color); }
.hero .heading-4, .section h4 { letter-spacing: inherit; color: var(--section-h4-text-color); font-size: 18px; line-height: 28px; }
.hero .heading-1, .hero h1, .hero h2, .hero .heading-4, .section h1, .section h2, .section h3, .section h4 { text-size-adjust: none; font-weight: bold; }
.hero p, .section p { color: var(--section-text-color); font-size: 18px; line-height: 30px; }
.section li { color: var(--section-text-color); font-size: 18px; line-height: 30px; }
.section ul > li { list-style: disc; }
.hero a, .section a { text-decoration: none; border-bottom-width: 1px; border-bottom-style: solid; transition: color 0.15s; border-bottom-color: var(--section-link-border-hover); color: var(--section-link-color); cursor: pointer; }
.hero a:hover, .section a:hover { color: var(--section-link-border-hover); }