.payment-main {
  padding-top: var(--space-5);
  padding-bottom: calc(var(--space-12) * 2);
}

.payment-page-container { min-width: 0; }

.payment-hero {
  max-width: 860px;
  padding-top: var(--space-6);
}

.payment-hero h1 {
  margin: 0;
  font-size: var(--font-size-64);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.payment-hero p {
  max-width: 68ch;
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-20);
  line-height: 1.5;
}

.payment-tabs { margin-top: var(--space-8); }
.payment-panels { min-width: 0; margin-top: var(--space-8); }

.payment-panel {
  min-width: 0;
  max-width: 1180px;
  animation: payment-panel-in 220ms var(--ease) both;
}

.payment-priority-grid {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.payment-priority-plate,
.payment-result-plate,
.payment-copy-plate {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
}

.payment-priority-plate {
  background: var(--color-surface-muted);
}

.payment-priority-plate h4,
.payment-result-plate h4 {
  margin: 0;
  font-size: var(--font-size-20);
  line-height: 1.3;
}

.payment-copy-plate h3,
.payment-business-lead h3 {
  margin: 0;
  font-size: var(--font-size-24);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.payment-priority-plate p,
.payment-copy-plate p,
.payment-business-lead p,
.payment-result-plate p {
  max-width: 65ch;
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-16);
  line-height: 1.55;
}

.payment-business-lead p { color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent); }

.payment-result-plate,
.payment-copy-plate { background: var(--color-surface-muted); }

.payment-method-list {
  display: grid;
  gap: var(--space-4);
}

.payment-method-row {
  min-height: 176px;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  border-radius: var(--radius-xl);
  background: var(--color-surface-muted);
}

.payment-method-illustration {
  max-width: 100%;
  width: 176px;
  height: 136px;
  display: block;
  object-fit: contain;
}

.payment-method-row > div,
.payment-business-lead > div { min-width: 0; }

.payment-method-row h3 {
  margin: 0;
  font-size: var(--font-size-20);
  line-height: 1.3;
}

.payment-method-row p {
  max-width: 72ch;
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
  line-height: 1.5;
}

.payment-exception-note {
  margin-top: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-surface-muted);
}

.payment-exception-note h3 { margin: 0; font-size: var(--font-size-20); line-height: 1.3; }
.payment-exception-note p { max-width: 75ch; margin: var(--space-3) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-16); line-height: 1.55; }

.payment-limit-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: var(--space-3);
}

.payment-limit-grid > div {
  min-height: 112px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-lg);
  color: var(--color-text-inverse);
  background: var(--color-surface-inverse);
}

.payment-limit-grid strong { font-size: var(--font-size-32); line-height: 1; }

.payment-limit-grid span {
  color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent);
  font-size: var(--font-size-14);
}

.payment-business-lead {
  padding: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: var(--space-8);
  align-items: center;
  border-radius: var(--radius-xl);
  color: var(--color-text-inverse);
  background: var(--color-surface-inverse);
}

.payment-business-illustration {
  max-width: 100%;
  width: 176px;
  height: 136px;
  display: block;
  justify-self: end;
  object-fit: contain;
}

.payment-business-grid {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.payment-memo {
  margin-top: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-surface-muted);
  overflow: hidden;
}

.payment-memo summary {
  min-height: 72px;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  color: var(--color-text);
  font-size: var(--font-size-20);
  font-weight: var(--weight-bold);
  list-style: none;
  cursor: pointer;
}

.payment-memo summary::-webkit-details-marker { display: none; }
.payment-memo summary:hover { color: var(--color-accent); }
.payment-memo summary .ds-icon { width: 18px; height: 18px; transition: transform var(--duration-fast) var(--ease); }
.payment-memo[open] summary .ds-icon { transform: rotate(180deg); }

.payment-memo-content {
  max-width: 820px;
  padding: 0 var(--space-6) var(--space-6);
}

.payment-memo-content p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-16);
  line-height: 1.6;
}

.payment-memo-content p + p { margin-top: var(--space-3); }

@keyframes payment-panel-in {
  from { opacity: .72; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1199px) {
  .payment-priority-plate,
  .payment-result-plate,
  .payment-copy-plate,
  .payment-business-lead { padding: var(--space-6); }
}

@media (max-width: 1024px) {
  .payment-main {
    padding-top: var(--space-4);
    padding-bottom: var(--space-20);
  }

  .payment-hero { padding-top: var(--space-5); }
  .payment-tabs { margin-top: var(--space-6); }
  .payment-panels { margin-top: var(--space-8); }

  .payment-method-row {
    grid-template-columns: 144px minmax(0, 1fr);
    gap: var(--space-5);
  }

  .payment-method-illustration { width: 144px; height: 112px; }
  .payment-limit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-business-illustration { width: 144px; height: 112px; justify-self: start; }
}

@media (max-width: 767px) {
  .payment-main {
    padding-top: var(--space-3);
    padding-bottom: var(--space-16);
  }

  .payment-hero { padding-top: var(--space-3); }
  .payment-hero h1 { line-height: 1.08; }
  .payment-tabs { margin-top: var(--space-4); }
  .payment-tabs > .ds-tab {
    height: 40px;
    min-height: 40px;
    padding: 0 var(--space-4);
  }
  .payment-panels { margin-top: var(--space-6); }

  .payment-priority-grid,
  .payment-business-grid,
  .payment-business-lead,
  .payment-method-row,
  .payment-limit-grid { grid-template-columns: minmax(0, 1fr); }

  .payment-method-row {
    min-height: 0;
    padding: var(--space-4);
    gap: var(--space-3);
    align-items: start;
  }

  .payment-method-illustration,
  .payment-business-illustration { width: 144px; height: 112px; }

  .payment-exception-note,
  .payment-priority-plate,
  .payment-result-plate,
  .payment-copy-plate,
  .payment-business-lead { padding: var(--space-5); }

  .payment-limit-grid { margin-top: var(--space-5); }
  .payment-limit-grid > div { min-height: 96px; padding: var(--space-4); }
  .payment-business-grid,
  .payment-memo { margin-top: var(--space-6); }

  .payment-memo summary {
    min-height: 60px;
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .payment-memo summary .ds-icon { flex: 0 0 auto; }
  .payment-memo-content { padding: 0 var(--space-4) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .payment-panel { animation: none; }
  .payment-memo summary .ds-icon { transition: none; }
}