/* Nexa landing — the secure-payment card under the pricing CTA. Split out of pricing.css to
   keep both files small; uses the same site.css tokens.*/
/* ---------- secure payment card ----------
   The last thing a buyer checks before a one-time payment is who is holding the card and what
   happens after. Both live here, next to the buttons, instead of three clauses down the page.
   Hidden until pay.js has confirmed with the server which methods can actually take money. */
.px-pay {
  margin: 12px 2px 0; padding: 11px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-tint);
  box-shadow: inset 0 1px 1px var(--glass-spec);
}
.px-pay[hidden] { display: none; }
.px-pay-head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-60);
}
.px-pay-head svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.px-pay-head em {
  margin-left: auto; font-style: normal; letter-spacing: 0.01em; text-transform: none;
  font-size: var(--fs-body); font-weight: 500; color: var(--ink-40);
}


.px-pay-methods { margin-top: 10px; display: grid; gap: 8px; }
@media (min-width: 620px) { .px-pay-methods { grid-template-columns: 1fr 1fr; } }

.px-pay-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: var(--r-sm, 12px);
  border: 1px solid var(--hairline);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3), background 0.25s ease;
}
.px-pay-btn[hidden] { display: none; }
.px-pay-btn:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
.px-pay-btn:disabled { opacity: 0.55; cursor: progress; transform: none; }
/* Not-yet lane. Before the Stripe key lands the card row stays on the page but must read as
   unavailable at a glance — dashed edge, no lift, no pointer, and the arrow stays put. */
.px-pay-btn[data-soon] { border-style: dashed; cursor: not-allowed; }
.px-pay-btn[data-soon]:hover { border-color: var(--hairline); transform: none; }
.px-pay-btn[data-soon]:hover .arr { transform: none; color: var(--ink-40); }
/* Brand tiles: Stripe's own blurple square, PayPal's monogram on the white it is drawn for.
   Both keep their colour in light and dark — a custodian's mark is not a theme surface. */
.px-pay-btn .px-pay-mark { flex: none; display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 7px; }
.px-pay-btn .px-pay-mark svg { width: 62%; height: 62%; }
.px-pay-mark-stripe { background: #635bff; }
.px-pay-mark-paypal { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); }
.px-pay-copy { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.px-pay-copy b { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.01em; }
.px-pay-copy i { font-style: normal; font-size: var(--fs-body); color: var(--ink-40); }
.px-pay-btn .arr { margin-left: auto; color: var(--ink-40); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.4); }
.px-pay-btn:hover .arr { transform: translateX(4px); color: var(--accent); }

.px-pay-code { margin-top: 9px; }
.px-pay-code[hidden] { display: none; }
.px-pay-code-toggle {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-body); color: var(--ink-40); text-decoration: underline;
  text-underline-offset: 3px; transition: color 0.25s ease;
}
.px-pay-code-toggle:hover { color: var(--accent); }
.px-pay-code-row { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.px-pay-code-row[hidden] { display: none; }
.px-pay-code-row input {
  flex: 1 1 auto; min-width: 0; padding: 9px 11px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm, 12px);
  background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-body); letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 0.25s ease;
}
.px-pay-code-row input:focus { outline: none; border-color: var(--accent); }
.px-pay-code-hint { flex: none; font-size: var(--fs-body); color: var(--ink-40); }

/* One trust line, ended by Stripe's own wordmark — the mark says the rest. */
.px-pay-trust {
  margin: 10px 0 0; display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-body); color: var(--ink-40);
}
.px-pay-word { flex: none; height: 12px; width: auto; fill: #635bff; }

.px-pay-err { margin: 9px 0 0; font-size: var(--fs-body); color: var(--accent); }
.px-pay-err[hidden] { display: none; }