/* The legacy template assigns dark colors directly to headings. */
body.payment-detail-page {
  background: #05070b;
}

.payment-detail h1,
.payment-detail h2,
.payment-detail h3,
.payment-detail__brand-card strong,
.payment-detail__notice strong,
.payment-detail__other strong {
  color: #f6f8f3 !important;
}

.payment-detail__hero::after {
  display: none !important;
}

.payment-detail__primary,
.payment-detail__primary:hover,
.payment-detail__primary:focus {
  color: #070a10 !important;
}

.payment-detail__secondary,
.payment-detail__secondary:hover,
.payment-detail__secondary:focus {
  color: #f8fafc !important;
}

.payment-detail__intro {
  color: #c0c7d2 !important;
}

.payment-detail__benefit-grid article {
  box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

.payment-detail__benefit-grid h3,
.payment-detail__steps h3 {
  color: #eef2ec !important;
}

.payment-detail__steps li p,
.payment-detail__notice p,
.payment-detail__cta span {
  color: #aab3c2 !important;
}

@media (max-width: 900px) {
  .payment-detail__hero {
    padding-top: 105px;
  }
}

@media (max-width: 560px) {
  .payment-detail h1 {
    font-size: 38px;
  }
}