:root {
  --pay-bg: #080b0a;
  --pay-panel: #101713;
  --pay-panel-2: #162019;
  --pay-line: rgba(238, 245, 241, 0.14);
  --pay-text: #eef5f1;
  --pay-muted: #aebbb4;
  --pay-green: #00e676;
  --pay-green-dark: #051b10;
}

.payment-page {
  color: var(--pay-text);
  background:
    radial-gradient(circle at 80% 8%, rgba(0, 230, 118, 0.15), transparent 28rem),
    var(--pay-bg);
  padding: 32px max(24px, calc((100vw - 1120px) / 2)) 96px;
}

.payment-page a { color: inherit; }

.payment-breadcrumbs { margin: 0 0 38px; }
.payment-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--pay-muted);
  font-size: 14px;
}
.payment-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: 0.5; }
.payment-breadcrumbs a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.payment-hero {
  max-width: 920px;
  padding: 64px 0 76px;
}
.payment-kicker {
  color: var(--pay-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.payment-hero h1 {
  color: var(--pay-text);
  font-size: clamp(42px, 7vw, 76px);
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin: 0 0 28px;
  max-width: 950px;
}
.payment-hero p {
  color: var(--pay-muted);
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.55;
  margin: 0 0 32px;
  max-width: 800px;
}
.payment-button {
  align-items: center;
  background: var(--pay-green);
  border: 2px solid var(--pay-green);
  border-radius: 999px;
  color: #031008 !important;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  text-decoration: none;
  transition: transform 150ms ease, background 150ms ease;
}
.payment-button:hover { transform: translateY(-2px); }
.payment-button:focus-visible,
.payment-page a:focus-visible,
.payment-search:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.payment-intro,
.payment-section,
.payment-action {
  border-top: 1px solid var(--pay-line);
  padding: 62px 0;
}
.payment-intro { max-width: 850px; }
.payment-intro p,
.payment-section p,
.payment-section li,
.payment-action p {
  color: var(--pay-muted);
  font-size: 18px;
  line-height: 1.72;
}
.payment-intro p:first-child { color: var(--pay-text); font-size: 23px; }
.payment-section h2,
.payment-action h2 {
  color: var(--pay-text);
  font-size: clamp(32px, 4.2vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 26px;
  max-width: 850px;
}
.payment-section p,
.payment-section > ul,
.payment-action p { max-width: 850px; }
.payment-section ul { padding-left: 22px; }
.payment-section li + li { margin-top: 10px; }

.payment-card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 32px;
}
.payment-card {
  background: var(--pay-panel);
  border: 1px solid var(--pay-line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 230px;
  padding: 26px;
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease;
}
.payment-card:hover { border-color: var(--pay-green); transform: translateY(-3px); }
.payment-card > span { color: var(--pay-green); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.payment-card > strong { font-size: 26px; line-height: 1.15; }
.payment-card > small { color: var(--pay-muted); font-size: 15px; line-height: 1.5; }

.payment-search-label { display: block; font-size: 14px; font-weight: 700; margin: 30px 0 9px; }
.payment-search {
  background: var(--pay-panel);
  border: 1px solid var(--pay-line);
  border-radius: 12px;
  color: var(--pay-text);
  font: inherit;
  max-width: 520px;
  min-height: 52px;
  padding: 0 16px;
  width: 100%;
}
.payment-search::placeholder { color: #849088; }
.payment-country-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  margin-top: 28px;
}
.payment-country {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--pay-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 88px;
  padding: 16px;
  text-decoration: none;
}
.payment-country span { color: var(--pay-muted); font-size: 13px; }
.payment-country.is-live { background: var(--pay-green-dark); border-color: rgba(0, 230, 118, 0.55); }
.payment-country.is-live span { color: var(--pay-green); }
.payment-country[hidden] { display: none; }

.payment-faq details { border-bottom: 1px solid var(--pay-line); max-width: 900px; padding: 21px 0; }
.payment-faq summary { color: var(--pay-text); cursor: pointer; font-size: 20px; font-weight: 650; line-height: 1.4; }
.payment-faq details p { margin-bottom: 0; }

.payment-sources ul { list-style: none; margin: 28px 0 0; padding: 0; }
.payment-sources li { align-items: baseline; border-bottom: 1px solid var(--pay-line); display: flex; gap: 18px; justify-content: space-between; padding: 15px 0; }
.payment-sources a { color: var(--pay-text); text-underline-offset: 3px; }
.payment-sources li span { font-size: 13px; white-space: nowrap; }
.payment-reviewed { font-size: 14px !important; }

.payment-related > div { display: flex; flex-wrap: wrap; gap: 12px; }
.payment-related a { border: 1px solid var(--pay-line); border-radius: 999px; padding: 10px 16px; text-decoration: none; }
.payment-related a:hover { border-color: var(--pay-green); }

.payment-action {
  background: var(--pay-panel-2);
  border: 1px solid rgba(0, 230, 118, 0.35);
  border-radius: 24px;
  margin-top: 42px;
  padding: 42px;
}
.payment-action h2 { font-size: clamp(30px, 4vw, 46px); }

@media (max-width: 700px) {
  .payment-page { padding: 22px 16px 64px; }
  .payment-breadcrumbs { margin-bottom: 18px; }
  .payment-hero { padding: 42px 0 56px; }
  .payment-intro, .payment-section { padding: 48px 0; }
  .payment-intro p, .payment-section p, .payment-section li, .payment-action p { font-size: 17px; }
  .payment-intro p:first-child { font-size: 20px; }
  .payment-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-country { min-height: 82px; padding: 13px; }
  .payment-sources li { align-items: flex-start; flex-direction: column; gap: 4px; }
  .payment-action { border-radius: 18px; padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .payment-button, .payment-card { transition: none; }
}