/* R12: a wider editorial hero and a connected payment chronology. */
@media (min-width: 701px) {
  .hero-picture {
    inset: 0 auto 0 22%;
    width: 90%;
    height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%);
    mask-image: linear-gradient(90deg, transparent, #000 25%);
  }

  .hero-picture img {
    object-position: left 58%;
  }

  .hero::after {
    background:
      linear-gradient(90deg,
        var(--paper) 0%,
        rgba(246, 249, 247, .99) 17%,
        rgba(246, 249, 247, .95) 31%,
        rgba(246, 249, 247, .82) 43%,
        rgba(246, 249, 247, .61) 54%,
        rgba(246, 249, 247, .28) 66%,
        rgba(246, 249, 247, 0) 79%),
      linear-gradient(0deg, var(--paper), rgba(246, 249, 247, 0) 13%);
  }

  .hero-copy {
    width: 62%;
    max-width: 760px;
  }

  .hero-description {
    width: 100%;
    max-width: 590px;
  }
}

@media (min-width: 1000px) and (min-height: 801px) {
  .hero h1 {font-size: clamp(56px, 5.6vw, 76px)}
  .hero h1 span:first-child {font-size: 1.45em}
  .hero-description {font-size: clamp(30px, 2.75vw, 40px)}
}

/* The four numbered stops form one schedule, not four separate cards. */
.payment-timeline {
  --timeline-gap: clamp(18px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--timeline-gap);
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.payment-timeline > li {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 8px 4px 0;
}

.payment-timeline > li:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 26px;
  left: 26px;
  width: calc(100% + var(--timeline-gap));
  height: 1px;
  background: #b8ccc6;
}

.payment-timeline .timeline-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #a9c3bc;
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
}

.payment-timeline .timeline-stage {
  display: block;
  min-height: 43px;
  margin-top: 23px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.payment-timeline strong {
  display: block;
  color: var(--forest);
  font-size: clamp(26px, 2.7vw, 39px);
  font-weight: 750;
  letter-spacing: -.06em;
  line-height: 1.12;
}

.payment-timeline .timeline-reserve strong {
  font-size: clamp(23px, 2.25vw, 32px);
  white-space: nowrap;
}

.payment-timeline h3 {
  margin: 18px 0 8px;
  font-size: 17px;
  line-height: 1.35;
}

.payment-timeline p {
  max-width: 245px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.installment-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
}

.installment-dots i {
  display: grid;
  place-items: center;
  min-width: 35px;
  min-height: 29px;
  padding: 3px 6px;
  border: 1px solid #a9c3bc;
  border-radius: 16px;
  font-style: normal;
  font-size: 11px;
}

@media (max-width: 900px) {
  .payment-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 27px;
  }

  .payment-timeline > li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0 20px;
    padding: 0 0 28px;
  }

  .payment-timeline > li:last-child {
    padding-bottom: 0;
  }

  .payment-timeline > li:not(:last-child)::after {
    top: 25px;
    left: 25px;
    width: 1px;
    height: calc(100% + 3px);
  }

  .payment-timeline .timeline-dot {
    grid-column: 1;
    grid-row: 1 / 6;
  }

  .payment-timeline .timeline-stage,
  .payment-timeline strong,
  .payment-timeline h3,
  .payment-timeline p,
  .payment-timeline .installment-dots {
    grid-column: 2;
  }

  .payment-timeline .timeline-stage {
    min-height: 0;
    margin: 0 0 6px;
  }

  .payment-timeline strong,
  .payment-timeline .timeline-reserve strong {
    font-size: clamp(26px, 4vw, 34px);
  }

  .payment-timeline h3 {
    margin: 9px 0 5px;
    font-size: 18px;
  }

  .payment-timeline p {
    max-width: 440px;
    font-size: 14px;
  }

  .installment-dots {
    margin-top: 10px;
  }
}

@media (max-width: 359px) {
  .payment-timeline > li {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 14px;
  }

  .payment-timeline .timeline-dot {
    width: 44px;
    height: 44px;
    font-size: 11px;
  }

  .payment-timeline > li:not(:last-child)::after {
    top: 22px;
    left: 22px;
  }

  .payment-timeline strong,
  .payment-timeline .timeline-reserve strong {
    font-size: 24px;
  }
}