.payPage {
  background: var(--night);
}

.paymentLock[hidden],
.paymentContent[hidden] {
  display: none !important;
}

.payHero {
  padding: 86px 0 92px;
  overflow: hidden;
}

.payHero__grid {
  display: grid;
  align-items: center;
  gap: 76px;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
}

.payHero__copy h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 750;
  letter-spacing: -0.058em;
  line-height: 1.02;
}

.payHero__copy h1 em {
  color: var(--cyan);
  font-style: normal;
}

.payHero__copy > p:not(.eyebrow) {
  max-width: 650px;
  margin: 28px 0 0;
  color: #b8c3d6;
  font-size: 18px;
}

.sellerLine {
  display: grid;
  max-width: 650px;
  margin-top: 34px;
  padding: 18px 0;
  border-block: 1px solid var(--line);
  gap: 4px;
}

.sellerLine span {
  color: var(--muted);
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sellerLine strong {
  font-size: 17px;
}

.orderTicket {
  position: relative;
  padding: 26px 28px 30px;
  border: 1px solid rgba(164, 181, 216, .27);
  background: linear-gradient(160deg, rgba(20, 28, 49, .98), rgba(8, 12, 23, .98));
  box-shadow: var(--shadow);
}

.orderTicket::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 84px;
  height: 84px;
  border-right: 4px solid var(--cyan);
  border-bottom: 4px solid var(--cyan);
  content: "";
}

.orderTicket__top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px dashed rgba(164, 181, 216, .26);
  color: var(--muted);
  font: 700 10px/1 var(--mono);
  letter-spacing: .1em;
}

.orderTicket__price {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 28px 0 24px;
}

.orderTicket__price small {
  color: var(--muted);
}

.orderTicket__price strong {
  font: 750 58px/1 var(--display);
  letter-spacing: -.05em;
}

.orderTicket__price b {
  margin-right: 4px;
  color: var(--amber);
  font: 700 24px/1 var(--mono);
}

.orderTicket dl {
  margin: 0;
  border-top: 1px solid var(--line);
}

.orderTicket dl div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.orderTicket dt {
  color: var(--muted);
}

.orderTicket dd {
  margin: 0;
  text-align: right;
}

.orderTicket > p {
  margin: 20px 0 0;
  padding-right: 54px;
  color: var(--muted);
  font-size: 12px;
}

.orderGate {
  padding: 74px 0;
  background: var(--paper);
  color: var(--paper-ink);
}

.orderGate__grid {
  display: grid;
  align-items: end;
  gap: 64px;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
}

.orderGate h2,
.paymentIntro h2,
.termsGrid h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(34px, 4.6vw, 54px);
  letter-spacing: -.04em;
  line-height: 1.08;
}

.orderGate__grid > div > p:last-child {
  margin: 20px 0 0;
  color: var(--muted-dark);
}

.orderForm label {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
}

.orderField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.orderField input {
  min-width: 0;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid #aeb8c8;
  border-right: 0;
  border-radius: 0;
  background: #fff;
  color: var(--paper-ink);
  font: 700 15px/1 var(--mono);
  text-transform: uppercase;
}

.orderField input[aria-invalid="true"] {
  border-color: #c83d4f;
  box-shadow: inset 0 0 0 1px #c83d4f;
}

.orderField .button {
  min-height: 54px;
  border: 0;
}

.fieldHelp,
.fieldStatus {
  margin: 10px 0 0;
  font-size: 12px;
}

.fieldHelp {
  color: var(--muted-dark);
}

.fieldStatus {
  min-height: 20px;
  color: #146b4a;
  font-weight: 700;
}

.fieldStatus[data-state="error"] {
  color: #a42636;
}

.paymentSection {
  padding: 94px 0 104px;
  background: #09101c;
}

.paymentIntro {
  display: grid;
  align-items: end;
  gap: 40px;
  grid-template-columns: 1fr auto;
}

.activeOrder {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.activeOrder span {
  color: var(--muted);
  font: 700 10px/1 var(--mono);
  letter-spacing: .1em;
}

.activeOrder strong {
  color: var(--cyan);
  font: 700 14px/1.3 var(--mono);
}

.paymentLock {
  display: grid;
  min-height: 290px;
  margin-top: 48px;
  padding: 44px;
  place-items: center;
  border: 1px dashed rgba(164, 181, 216, .34);
  background: rgba(255, 255, 255, .025);
  text-align: center;
}

.paymentLock span {
  color: var(--cyan);
  font: 400 54px/1 var(--mono);
}

.paymentLock strong {
  margin-top: 8px;
  font: 700 22px/1.3 var(--display);
}

.paymentLock p {
  max-width: 520px;
  margin: 7px 0 0;
  color: var(--muted);
}

.paymentContent {
  margin-top: 48px;
}

.qrGrid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.paymentCard {
  padding: 22px;
  border: 1px solid rgba(164, 181, 216, .24);
  background: #0d1524;
}

.paymentCard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
}

.paymentCard__head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.paymentCard__head p {
  margin: 0;
  font-weight: 700;
}

.paymentCard__head strong {
  font: 750 26px/1 var(--display);
}

.channelDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 14px rgba(126, 226, 184, .7);
}

.paymentCard--alipay .channelDot {
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(56, 189, 248, .7);
}

.qrFrame {
  display: grid;
  min-height: 510px;
  padding: 18px;
  place-items: center;
  background: #fff;
}

.qrFrame img {
  width: min(100%, 390px);
  height: auto;
  max-height: 520px;
  object-fit: contain;
}

.payeeNote {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.payeeNote strong {
  color: #fff;
}

.identityNotice {
  display: grid;
  margin-top: 22px;
  padding: 22px 24px;
  border-left: 4px solid var(--amber);
  background: rgba(255, 207, 102, .075);
  gap: 8px;
}

.identityNotice span {
  color: var(--amber);
  font: 700 10px/1 var(--mono);
  letter-spacing: .1em;
}

.identityNotice p {
  margin: 0;
  color: #cbd5e5;
  font-size: 14px;
}

.bankOption {
  display: grid;
  align-items: center;
  gap: 26px;
  margin-top: 22px;
  padding: 28px;
  border: 1px solid rgba(164, 181, 216, .24);
  background: linear-gradient(100deg, #121b30, #0d1524);
  grid-template-columns: 82px minmax(0, 1fr) auto;
}

.bankOption__mark {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 1px solid rgba(56, 189, 248, .38);
  color: var(--cyan);
  font: 750 13px/1.3 var(--mono);
  letter-spacing: .1em;
  text-align: center;
}

.bankOption .sectionKicker {
  margin-bottom: 8px;
}

.bankOption h3,
.afterPay h3,
.termsList h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 25px;
  letter-spacing: -.02em;
}

.bankOption p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.afterPay {
  display: grid;
  align-items: center;
  gap: 40px;
  margin-top: 22px;
  padding: 34px;
  background: var(--paper);
  color: var(--paper-ink);
  grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr);
}

.afterPay .sectionKicker {
  margin-bottom: 12px;
  color: var(--blue);
}

.afterPay p {
  margin: 10px 0 0;
  color: var(--muted-dark);
}

.afterPay__actions {
  display: grid;
  gap: 9px;
}

.afterPay__actions .button--line {
  border-color: rgba(17, 24, 39, .28);
  color: var(--paper-ink);
}

.afterPay__actions p {
  min-height: 20px;
  margin: 0;
  color: #146b4a;
  font-size: 12px;
  text-align: center;
}

.termsSection {
  padding: 98px 0;
  background: var(--paper);
  color: var(--paper-ink);
}

.termsGrid {
  display: grid;
  gap: 70px;
  grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr);
}

.termsList {
  border-top: 1px solid var(--line-dark);
}

.termsList article {
  display: grid;
  gap: 22px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line-dark);
  grid-template-columns: 42px 1fr;
}

.termsList article > span {
  color: var(--blue);
  font: 750 20px/1.2 var(--display);
}

.termsList p {
  margin: 7px 0 0;
  color: var(--muted-dark);
}

.termsList a {
  border-bottom: 1px solid currentColor;
  color: #315bd4;
}

@media (max-width: 920px) {
  .payHero__grid,
  .orderGate__grid,
  .termsGrid {
    gap: 48px;
    grid-template-columns: 1fr;
  }

  .orderTicket {
    width: min(100%, 620px);
  }

  .bankOption {
    grid-template-columns: 82px 1fr;
  }

  .bankOption .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .payHero {
    padding: 58px 0 68px;
  }

  .payHero__copy h1 {
    font-size: clamp(43px, 14vw, 60px);
  }

  .orderGate,
  .paymentSection,
  .termsSection {
    padding: 72px 0;
  }

  .orderField {
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .orderField input {
    border-right: 1px solid #aeb8c8;
  }

  .paymentIntro,
  .qrGrid,
  .afterPay {
    grid-template-columns: 1fr;
  }

  .activeOrder {
    justify-items: start;
  }

  .paymentLock {
    min-height: 230px;
    padding: 30px 20px;
  }

  .paymentCard {
    padding: 14px;
  }

  .qrFrame {
    min-height: 0;
    padding: 10px;
  }

  .qrFrame img {
    max-height: none;
  }

  .bankOption {
    grid-template-columns: 1fr;
  }

  .bankOption__mark {
    width: 70px;
    height: 70px;
  }

  .afterPay {
    padding: 26px 20px;
  }
}