/* Shared visual language for customer-facing pages. Gateway operations are separate. */
.client-site {
  color-scheme: dark;
  --bg: #080e1d;
  --panel: #0f192e;
  --surface: #0f192e;
  --surface-raised: #14213a;
  --text: #e8f0ff;
  --muted: #92a3bf;
  --line: #25344e;
  --line-soft: #1d2b43;
  --brand: #59e1e8;
  --brand-strong: #82eef2;
  --accent: #9da7ff;
  --accent-soft: #1b2543;
  --success: #75e1b5;
  --warning: #f7c77b;
  --danger: #ff9ca7;
  --shadow: 0 16px 44px #02071530;
  --header-offset: 112px;
  background: radial-gradient(ellipse at 75% 0, #12334b50, transparent 42rem), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  min-width: 0;
  -webkit-font-smoothing: antialiased;
}
.client-site ::selection { background: #59e1e833; color: #f2ffff; }
.client-site :focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.client-site [id] { scroll-margin-top: var(--header-offset); }
.client-site [hidden], .client-site .hidden { display: none !important; }
.client-site .main { max-width: 1320px; padding: 48px 40px 72px; width: 100%; }
.client-site .main > *, .client-site :is(.grid, .split, .docs-grid, .docs-hero, .hero, .capability-split) > * { min-width: 0; }
.client-site .topbar {
  backdrop-filter: blur(18px);
  background: #0a1223ee;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: none;
  gap: 20px;
  height: auto;
  min-height: 78px;
  padding: 16px max(28px, calc((100vw - 1240px) / 2));
}
.client-site .topbar .brand { color: #edf6ff; flex-shrink: 0; font-size: 22px; gap: 11px; letter-spacing: -.7px; }
.client-site .brand-mark { background: linear-gradient(135deg, #61e8ef, #83a6ff); border-radius: 10px; color: #071724; font-size: 22px; font-weight: 800; height: 36px; width: 36px; }
.client-site .nav { gap: 10px 22px; min-width: 0; }
.client-site .nav :is(a, button) { color: #a0b1ca; font-size: 12px; font-weight: 550; line-height: 1.5; transition: color .15s; }
.client-site .nav :is(a, button):hover, .client-site .nav a[aria-current=page] { color: var(--brand); }
.client-site .nav :is(a[href="/register"], a[href="/console"]) { background: #14323e; border: 1px solid #397c8a; border-radius: 7px; color: #9ff0f1; padding: 8px 13px; }
.client-site .language-switcher { background: #111e34; border-color: #2e405c; color: #b8cee8; }
.client-site .language-switcher select { background: transparent; border: 0; color: inherit; font-size: 12px; min-height: 26px; padding: 3px 18px 3px 3px; }
.client-site .language-switcher select option { background: #14213a; color: var(--text); }
.client-site .eyebrow { color: #79dde8; font-size: 10px; font-weight: 700; letter-spacing: 1.7px; line-height: 1.6; margin-bottom: 12px; }
.client-site h1 { color: #f0f6ff; font-size: clamp(32px, 4.3vw, 58px); font-weight: 650; letter-spacing: -1.7px; line-height: 1.15; overflow-wrap: anywhere; }
.client-site h2 { color: #e8f2ff; font-size: clamp(23px, 2.3vw, 31px); font-weight: 600; letter-spacing: -.65px; line-height: 1.3; }
.client-site h3 { color: #dfebfc; font-size: 17px; font-weight: 600; letter-spacing: -.2px; line-height: 1.4; }
.client-site p { color: var(--muted); line-height: 1.8; }
.client-site :is(p, li, .features) { overflow-wrap: break-word; }
.client-site strong { color: #d7e7fa; }
.client-site .muted { color: var(--muted); }
.client-site .section { margin-top: 42px; }
.client-site .section-lead { font-size: 15px; line-height: 1.9; }
.client-site .section-header { gap: 20px; margin-bottom: 22px; }
.client-site .section-header h2 { margin-bottom: 0; }
.client-site :is(.panel, .card, .hero-visual, .intro-panel, .plan-card, .stat-card, .metric-card) { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.client-site :is(.panel, .card) { padding: 28px; }
.client-site :is(.insight-card, .scenario-card, .value-strip > div, .docs-callout, .docs-toc a, .process-grid > div, .error-list > div, .billing-summary-grid > div, .billing-help, .payment-summary, .payment-rules > div, .confirm-box, .api-grid > div, .ip-chip, .support-grid > div, .support-list > div, .copy-line, .copy-box) { background: #111e33; border-color: var(--line); border-radius: 10px; }
.client-site :is(.insight-card, .scenario-card, .plan-card, .card) { transition: border-color .18s; }
.client-site :is(.insight-card, .scenario-card, .plan-card, .card):hover { border-color: #3a5976; }
.client-site .btn { background: var(--brand); border: 1px solid var(--brand); border-radius: 8px; color: #071b29; font: inherit; font-size: 12px; font-weight: 750; min-height: 42px; padding: 10px 18px; transition: background .15s, border-color .15s; }
.client-site .btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.client-site .btn.secondary { background: #142139; border-color: #31435f; color: #c5d7f0; }
.client-site .btn.secondary:hover { background: #1b2c48; border-color: #537193; }
.client-site .btn.danger { background: #3b2332; border-color: #704253; color: #ffb0bb; }
.client-site .btn:disabled { cursor: not-allowed; opacity: .55; }
.client-site .text-link { color: #7ae9ed; font-weight: 600; }
.client-site .text-link:hover { color: #b0fbff; }
.client-site .actions { align-items: center; gap: 12px; }
.client-site :is(input, select, textarea) { background: #0a1426; border-color: #526b8c; border-radius: 8px; color: #e5efff; font-size: 14px; min-width: 0; }
.client-site :is(input, textarea)::placeholder { color: #7c92b2; opacity: 1; }
.client-site :is(input, select, textarea):focus { border-color: #55cbd8; }
.client-site :is(input[type=checkbox], input[type=radio]) { accent-color: var(--brand); }
.client-site :is(label, legend) { color: #a8bdd8; font-size: 12px; font-weight: 600; }
.client-site :is(.field-caption, .field-help) { color: #91a8c7; font-size: 12px; line-height: 1.7; }
.client-site .code, .client-site .terminal { background: #080f1f; border: 1px solid #243852; border-radius: 10px; color: #a7dce9; }
.client-site .code { max-width: 100%; overflow-x: auto; tab-size: 2; }
.client-site .terminal { overflow-x: auto; }
.client-site .terminal .muted { color: #7897b7; }
.client-site :not(pre) > code { color: #9fe8ed; }
.client-site .ops-board { background: #0c182c; border: 1px solid #2d4461; box-shadow: var(--shadow); }
.client-site .ops-row { background: #14223b; }
.client-site .ops-row strong { color: #dff3ff; }
.client-site .ops-row span { color: #94b0cf; }
.client-site .node { background: #111e34; border-color: #2e4361; border-radius: 9px; }
.client-site .features { color: #9eb2ce; line-height: 1.85; }
.client-site .features li::marker { color: #59cbd6; }
.client-site .price { color: #e4f4ff; font-variant-numeric: tabular-nums; }
.client-site .notice { background: #12273b; border-left-color: #5fcfdf; color: #b5d1e9; }
.client-site .error { color: var(--danger); }
.client-site :is(.payment-order-message, .order-message) { background: #322d20; border-color: #605335; color: #e1c58d; }
.client-site .network-note { background: #152340; border-color: #34466f; }
.client-site .empty-state { background: #101d31; border-color: #304663; color: #98afce; }
.client-site .payment-stepper { background: #0e1a2e; border-color: var(--line); }
.client-site .payment-stepper span { background: #15253e; color: #8ca5c5; }
.client-site .payment-stepper span.active { background: #163a3b; color: #8ae8d2; }
.client-site .order-card { background: #0f1b30; border-color: var(--line); }
.client-site .order-filter button { background: #12213a; border-color: var(--line); color: #9db3d0; }
.client-site .order-filter button.active { background: #15333e; border-color: #367b8a; color: #88eaef; }
.client-site :is(.status-pill, .network-pill) { background: #172942; border: 1px solid #2d4666; color: #a8c1df; }
.client-site .status-pill.paid { background: #13382f; border-color: #285f4e; color: #82e1ba; }
.client-site :is(.status-pill.pending, .status-pill.paying) { background: #34301f; border-color: #675935; color: #f1ca81; }
.client-site :is(.status-pill.failed, .status-pill.canceled, .status-pill.expired) { background: #3a2231; border-color: #674056; color: #eba8b5; }
.client-site :is(.status-pill.neutral, .network-pill) { background: #172942; color: #adc0dd; }
.client-site .table-wrap { max-width: 100%; overflow-x: auto; }
.client-site table { color: #b6c9e2; }
.client-site th { background: #101d32; border-color: var(--line); color: #8ea8c9; font-size: 11px; font-weight: 650; }
.client-site td { border-color: var(--line-soft); line-height: 1.75; }
.client-site tbody tr:hover { background: #14223a66; }
.client-site .toast { background: #14243e; border-color: var(--line); border-left-color: var(--accent); color: var(--text); }
.client-site .toast.error { border-left-color: var(--danger); color: var(--text); }
.client-site .toast.notice { border-left-color: var(--brand); color: var(--text); }
.client-site .legal-nav a { background: #101d32; border-color: var(--line); color: #9db2d0; }
.client-site .legal-nav a:hover, .client-site .legal-nav a[aria-current=page] { background: #14303d; border-color: #397887; color: #93eff1; }
.client-site .totp-qr { background: #fff; border-color: #dce5ed; padding: 18px; }
.client-site .totp-qr figcaption { color: #455976; }
.client-site .totp-secret { color: #b9f3ef; }
.client-site .site-footer { align-items: center; border-top-color: var(--line); color: #7e96b7; font-size: 12px; gap: 18px; margin-top: 52px; max-width: 1320px; padding: 30px 40px; }
.client-site .site-footer a { color: #91a9ca; font-size: 12px; line-height: 1.8; }
.client-site .site-footer a:hover { color: var(--brand); }
@media (max-width: 1100px) {
  .client-site .topbar { padding-left: 28px; padding-right: 28px; }
  .client-site .nav { gap: 10px 16px; }
}
@media (max-width: 860px) {
  .client-site { --header-offset: 180px; }
  .client-site .topbar { align-items: stretch; gap: 16px; padding: 18px 24px; }
  .client-site .topbar .brand { align-self: flex-start; }
  .client-site .nav { justify-content: flex-start; }
  .client-site .main { padding: 32px 24px 52px; }
  .client-site .site-footer { padding: 26px 24px; }
}
@media (max-width: 520px) {
  .client-site .topbar { padding: 16px 18px; }
  .client-site .nav { gap: 12px 17px; }
  .client-site .main { padding: 26px 18px 44px; }
  .client-site h1 { font-size: 33px; letter-spacing: -.8px; }
  .client-site h2 { font-size: 23px; }
  .client-site :is(.panel, .card) { padding: 22px 18px; }
  .client-site .section { margin-top: 30px; }
  .client-site .site-footer { padding: 24px 18px; }
  .client-site .totp-secret { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .client-site *, .client-site *::before, .client-site *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}