/* Section rework: #payment. Every selector is scoped under #payment. */

/* Hint under the lead: shown until an offer is chosen, then the amounts replace it. */
#payment .pay-hint {
  margin-top: var(--stack-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--deep-soft);
}
#payment .pay-hint a {
  color: var(--ink);
}
#payment:has(.step-amount:not([hidden])) .pay-hint {
  display: none;
}

/* Steps: the percentage leads, the title is a notch smaller, the dollars come right under the title. */
#payment .steps {
  align-items: start;
}
#payment .step-mark {
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
#payment .step h3 {
  margin-top: 1.25rem;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
#payment .step .step-amount {
  margin-top: 0.375rem;
  font-size: 1.125rem;
  line-height: 1.3;
}
/* The one sentence in each step that protects or binds him. */
#payment .step .step-key {
  margin-top: 1rem;
  color: var(--ink);
  font-weight: 500;
}
#payment .step .step-key + p {
  margin-top: 1rem;
}

/* Phone: the rail keeps its place under the smaller mark. */
@media screen and (max-width: 899px) {
  #payment .step-mark {
    font-size: 1.875rem;
    line-height: 1.5rem;
  }
  #payment .step h3 {
    margin-top: 0;
    padding-top: 0.1875rem;
  }
  #payment .step {
    grid-template-columns: 4.75rem minmax(0, 1fr);
  }
  #payment .step::before {
    left: 1.9rem;
    top: 2.25rem;
  }

  /* "With every offer": one term per row, a hairline between rows. */
  #payment .terms-2 {
    gap: 0;
  }
  #payment .terms-2 > div {
    padding-block: 1.125rem;
    border-top: 1px solid var(--rule-on-light);
  }
  #payment .terms-2 > div:first-child {
    padding-top: 0;
    border-top: 0;
  }
  #payment .terms-2 > div:last-child {
    padding-bottom: 0;
  }
}

/* Both blocks: label above, four terms across, so the two rows line up. */
@media (min-width: 900px) {
  #payment .blk {
    grid-template-columns: minmax(0, 1fr);
  }
  #payment .terms-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  #payment .terms-2,
  #payment .terms-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media print {
  #payment .blk,
  #payment .terms > div {
    break-inside: avoid;
  }
}