:root {
  --red: #00a7e1;
  --red-dark: #007fae;
  --ink: #171717;
  --paper: #f5f5f3;
  --cyan: #00a7e1;
  --magenta: #ec008c;
  --yellow: #ffe100;
  --black: #171717;
}

.site-header {
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg, var(--cyan) 0 25%, var(--magenta) 25% 50%, var(--yellow) 50% 75%, var(--black) 75%) 1;
}

.hero h1 span,
.why h2 span {
  color: var(--magenta);
}

.hero-copy::before,
.steps article:nth-child(1) span {
  background: var(--cyan);
}

.hero-copy::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 8px;
  top: clamp(2rem, 5vw, 4rem);
  left: calc(clamp(1.25rem, 6vw, 7rem) + 62px);
  background: linear-gradient(90deg, var(--magenta) 0 33%, var(--yellow) 33% 66%, var(--black) 66%);
}

.nav-quote,
.button-primary {
  background: var(--cyan);
  color: var(--black);
}

.nav-quote:hover,
.button-primary:hover {
  background: #22b9eb;
}

.trust-row span:nth-child(1)::before { color: var(--cyan); }
.trust-row span:nth-child(2)::before { color: var(--magenta); }
.trust-row span:nth-child(3)::before { color: var(--yellow); }

.price-card {
  background: var(--yellow);
  color: var(--black);
}

.ticker,
.quote {
  background: var(--magenta);
}

.product-card.featured {
  background: var(--cyan);
  color: var(--black);
}

.product-card.featured p {
  color: #083443;
}

.product-card.featured a span,
.product-card:nth-child(2) .product-icon,
.product-card:nth-child(5) .product-icon {
  color: var(--magenta);
}

.product-card:nth-child(3) .product-icon,
.product-card:nth-child(6) .product-icon {
  color: #c5aa00;
}

.why-points strong {
  color: var(--cyan);
}

.why-points article:nth-child(2) strong {
  color: var(--magenta);
}

.why-points article:nth-child(3) strong {
  color: var(--yellow);
}

.steps article:nth-child(2) span {
  background: var(--magenta);
}

.steps article:nth-child(3) span {
  background: var(--yellow);
  color: var(--black);
}

.policy {
  border-left-color: var(--magenta);
}

.inline-quote {
  color: #007fae;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--magenta);
  text-underline-offset: .18em;
}

.inline-quote:hover {
  color: var(--magenta);
}

footer {
  border-top: 7px solid transparent;
  border-image: linear-gradient(90deg, var(--cyan) 0 25%, var(--magenta) 25% 50%, var(--yellow) 50% 75%, #050505 75%) 1;
}

@media (max-width: 900px) {
  .hero-copy::after {
    top: 2rem;
  }
}