body.aoc-variant {
  background:
    radial-gradient(circle at 12px 12px, rgba(33, 78, 155, .08) 1.5px, transparent 1.5px) 0 0 / 24px 24px,
    #e8eeed;
  color: #17314f;
}

.aoc-variant .site-header,
.aoc-variant .article {
  background: #f4f7f6;
}

.aoc-variant .site-header {
  border-bottom-color: #214e9b;
}

.aoc-variant .article {
  border-color: #214e9b;
  border-radius: 14px;
  box-shadow: 8px 8px 0 rgba(33, 78, 155, .16);
}

.aoc-variant .brand-kicker,
.aoc-variant .editorial-bylines a,
.aoc-variant .updated-copy strong {
  color: #214e9b;
}

.aoc-variant .aoc-signal-strip {
  border-color: #214e9b;
  background: #e9eff8;
  border-radius: 10px;
}

.aoc-variant .aoc-signal-strip strong {
  color: #17314f;
}

.aoc-variant .toc {
  background: #17314f;
  border-radius: 10px;
}

.aoc-variant .item {
  border-color: #214e9b;
  border-radius: 10px;
  box-shadow: 5px 5px 0 rgba(33, 78, 155, .13);
}

.aoc-variant .item-featured .card-ribbon {
  background: #214e9b;
  color: #f4f7f6;
}

.aoc-variant .button > a {
  background: #ff745d;
  border-color: #ff745d;
  color: #17314f;
  border-radius: 9px;
}

.aoc-variant .button > a:hover {
  background: #214e9b;
  border-color: #214e9b;
  color: #f4f7f6;
}

.aoc-variant .mobile-sticky {
  background: #17314f;
}

.aoc-variant .mobile-sticky .sticky-button {
  background: #ff745d;
  color: #17314f;
}

.aoc-variant .site-footer {
  background: #17314f;
}

.brand-line {
  align-items: flex-end;
}

.aoc-variant .item-featured .card-rank {
  display: none;
}

.aoc-variant .card-ribbon {
  grid-template-columns: 1fr;
  text-align: center;
}

@media (max-width: 600px) {
  .intro-copy::after {
    background: linear-gradient(transparent, #f4f7f6);
  }

  .sticky-offer strong {
    color: #fff;
  }
}