/* WEB-06A–C, paying before sign-up. Builds on landing.css tokens.
 * Reference: wiki/sources/screens/landing/web-06{a,b,c}-*.png */

.pay-nav .nav__inner { display: flex; align-items: center; gap: 24px; min-height: 72px; flex-wrap: wrap; }
.pay-nav__help { margin-left: auto; font: 600 14px/1 var(--sans); }

.pay-steps { display: flex; align-items: center; gap: 10px; margin: 0 auto; font: 500 14px/1 var(--sans); }
.pay-step { display: flex; align-items: center; gap: 8px; color: var(--muted-dark); }
.pay-step + .pay-step::before { content: ""; width: 28px; height: 1px; background: var(--black); margin-right: 2px; }
.pay-step.is-current, .pay-step.is-done { color: var(--black); font-weight: 600; }
.pay-step__dot {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border: var(--line); border-radius: 50%; background: var(--white); font: 600 12px/1 var(--sans);
}
.is-current > .pay-step__dot { background: var(--yellow); }
.is-done > .pay-step__dot { background: var(--black); color: var(--white); }

.pay { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 72px; max-width: 1180px; }
.pay__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pay__title { font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.045em; }
.pay__lede { color: var(--muted-dark); font-size: 17px; max-width: 62ch; }

.pay-form { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: 600 14px/1.2 var(--sans); }
.field input {
  height: 50px; padding: 0 16px; border: var(--line); background: var(--white);
  font: 400 16px/1 var(--sans); color: var(--black);
}
.field input[aria-invalid="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.field__hint { font-size: 13px; color: var(--muted); }
.field__error { font-size: 13px; color: var(--red); font-weight: 600; }
.pay-form__submit { width: 100%; }

/* WEB-06D: two fields a row on wide screens, and the team-size stepper. */
.pay-form--team { max-width: 720px; }
.pay-form__pair { display: grid; gap: 20px; }
@media (min-width: 640px) { .pay-form__pair { grid-template-columns: 1fr 1fr; } }
.stepper { display: flex; width: max-content; border: var(--line); background: var(--white); }
.stepper .stepper__button { width: 56px; height: 50px; border: 0; background: var(--white); font: 600 20px/1 var(--sans); cursor: pointer; }
.stepper .stepper__button:hover { background: var(--yellow); }
.stepper input { width: 80px; border: 0; border-left: var(--line); border-right: var(--line); text-align: center; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.pay-alert { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px 20px; border: var(--line); background: var(--yellow); max-width: 560px; }

.pay-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: var(--line); background: var(--white); }
.pay-card h2 { font: 600 19px/1.2 var(--sans); letter-spacing: -0.02em; }
.pay-card .btn-row { margin-top: 4px; }

.copy-rows > div {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.copy-rows dt { grid-column: 1; font-size: 13px; color: var(--muted-dark); }
.copy-rows dd { grid-column: 1; font: 600 18px/1.3 var(--sans); overflow-wrap: anywhere; }
.copy-rows__ask { font-weight: 500 !important; font-size: 15px !important; }
.copy {
  grid-column: 2; grid-row: 1 / span 2; height: 34px; padding: 0 14px; border: var(--line);
  background: var(--white); font: 600 13px/1 var(--sans); cursor: pointer;
}
.copy.is-copied { background: var(--teal); }

.pay-aside { display: flex; flex-direction: column; gap: 20px; }
.order { padding: 28px; border: var(--line); background: var(--white); box-shadow: var(--shadow-lg); }
.order h2 { font: 600 20px/1.2 var(--sans); letter-spacing: -0.02em; }
.order__rows { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.order__rows > div { display: flex; justify-content: space-between; gap: 16px; }
.order__rows dt { color: var(--muted-dark); }
.order__rows dd { font-weight: 500; text-align: right; }
.order__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 16px; padding-top: 16px; border-top: var(--line); font: 600 20px/1.2 var(--sans);
}
.order__total b { font-size: 22px; }
.order__link { display: inline-block; margin-top: 14px; font: 500 14px/1.4 var(--sans); }

.promises { display: flex; flex-direction: column; gap: 14px; padding: 24px 28px; border: var(--line); }
.promises li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.promises li::before {
  content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  background: var(--black); color: var(--white); font-size: 13px;
}

.pay-done { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 56px; padding-bottom: 80px; text-align: center; }
.pay-done .pay__lede { margin: 0 auto; }
.pay-done__mark {
  display: grid; place-items: center; width: 96px; height: 96px; border: var(--line); border-radius: 50%;
  background: var(--teal); box-shadow: var(--coin-shadow); font: 700 44px/1 var(--sans);
}
.next-steps { display: grid; width: 100%; max-width: 1000px; margin-top: 16px; border: var(--line); text-align: left; }
.next-steps__item { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--white); }
.next-steps__item + .next-steps__item { border-top: var(--line); }
.next-steps__item b { font: 600 18px/1.2 var(--sans); }
.next-steps__item span:last-child { font-size: 14px; }
.next-steps__item.is-done { background: var(--teal); }
.next-steps__item.is-current { background: var(--yellow); }
.next-steps__item.is-done .pay-step__dot { background: var(--white); color: var(--black); }
.next-steps__item.is-current .pay-step__dot { background: var(--white); }

@media (max-width: 760px) {
  .pay-steps { order: 3; width: 100%; justify-content: center; padding-bottom: 12px; font-size: 13px; }
  .pay-step + .pay-step::before { width: 14px; }
}

@media (min-width: 960px) {
  .pay { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; padding-top: 72px; }
  .next-steps { grid-template-columns: repeat(3, 1fr); }
  .next-steps__item + .next-steps__item { border-top: 0; border-left: var(--line); }
}
.pay-error { margin: 0 0 16px; padding: 12px 16px; border: var(--line); background: var(--yellow); font: 600 14px/1.5 var(--sans); }
.field--check .check { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/1.5 var(--sans); cursor: pointer; }
.field--check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--black); flex: none; }
.field--check a { color: inherit; font-weight: 600; text-decoration: underline; }