/* ==========================================================================
   cryptoinfra API documentation

   Palette: the brand's own blue ramp. The lockup artwork ships in two
   versions — one for light grounds and one for dark — and they do not use the
   same blues: #4aa3d2 / #266ea4 / #083c75 on paper, #6bc3f4 / #468cc4 /
   #285994 on ink. Those six values are the whole colour system. Every
   neutral is that navy desaturated, so paper and chrome read as the same
   family as the mark rather than as grey with a blue logo dropped on top.

   Type: Google Sans, self-hosted — the one good
   typeface guaranteed to be present with no network request. It is pushed
   towards a display voice where it matters — tight tracking on headings,
   tabular figures in tables, a 74ch measure — and left alone everywhere else.

   Dark values are declared twice on purpose: once behind the system
   preference, for visitors who never touch the toggle, and once behind
   [data-theme="dark"], so the toggle wins in both directions.
   ========================================================================== */

:root {
  color-scheme: light;

  /* brand ramp — light grounds */
  --brand-1: #4aa3d2;
  --brand-2: #266ea4;
  --brand-3: #083c75;
  --brand-ink: #141920;

  --bg: #f6f8fb;
  --bg-elev: #ffffff;
  --surface: #eef2f8;
  --surface-2: #e3eaf3;

  --text: #0c1622;
  --text-dim: #48586c;
  --text-faint: #68798d;

  --border: #e1e8f1;
  --border-strong: #c7d4e3;

  --accent: #1a5f96;
  --accent-hover: #0f4571;
  --accent-soft: #e9f1f9;
  --accent-line: #b6d1e8;
  --on-accent: #ffffff;

  --focus: #1a5f96;

  --get-fg: #12664a;
  --get-bg: #e0f2ea;
  --post-fg: #1a5f96;
  --post-bg: #e2edf7;
  --put-fg: #4b3ba6;
  --put-bg: #eae7f8;
  --patch-fg: #7d4f04;
  --patch-bg: #f8eddb;
  --delete-fg: #a52c2c;
  --delete-bg: #f8e7e7;

  --warn-bg: #fbf3e2;
  --warn-line: #dfb265;
  --important-bg: #fbeded;
  --important-line: #d98d8d;
  --tip-bg: #e3f2ec;
  --tip-line: #63b79a;

  --tk-key: #1a5f96;
  --tk-str: #12664a;
  --tk-num: #7d4f04;
  --tk-lit: #a52c2c;
  --tk-fn: #4b3ba6;
  --tk-flag: #63707f;

  --shadow-sm: 0 1px 2px rgb(8 32 60 / 0.07), 0 1px 1px rgb(8 32 60 / 0.04);
  --shadow-md: 0 10px 26px -14px rgb(8 32 60 / 0.28), 0 2px 6px rgb(8 32 60 / 0.05);
  --shadow-lg: 0 26px 64px -14px rgb(8 32 60 / 0.26), 0 4px 12px rgb(8 32 60 / 0.08);

  /* Google Sans throughout, self-hosted (assets/fonts.cb8f3e3710.css). Display and body
     are separate cuts of the same family — Text is drawn for small sizes — and
     Code carries every endpoint path, JSON block and address so a hash still
     lines up. Nothing here falls through to a system face. */
  --display: "Google Sans", sans-serif;
  --sans: "Google Sans Text", "Google Sans", sans-serif;
  --mono: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  --topbar-h: 60px;
  --sidebar-w: 262px;
  --toc-w: 228px;
  --measure: 74ch;
  --radius: 12px;
  --radius-sm: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --brand-1: #6bc3f4;
    --brand-2: #468cc4;
    --brand-3: #285994;
    --brand-ink: #ffffff;

    --bg: #070b12;
    --bg-elev: #0d131d;
    --surface: #121a26;
    --surface-2: #1a2432;

    --text: #e8eef7;
    --text-dim: #9db0c6;
    --text-faint: #7d8fa5;

    --border: #1c2635;
    --border-strong: #2c394b;

    --accent: #6bb8ee;
    --accent-hover: #96d0f7;
    --accent-soft: #0f2338;
    --accent-line: #24486b;
    --on-accent: #061421;

    --focus: #6bb8ee;

    --get-fg: #5cd0a4;
    --get-bg: #0b271f;
    --post-fg: #6bb8ee;
    --post-bg: #0e2338;
    --put-fg: #b0a4f5;
    --put-bg: #1a1836;
    --patch-fg: #e9b768;
    --patch-bg: #2a2211;
    --delete-fg: #ff9c95;
    --delete-bg: #311719;

    --warn-bg: #221c0e;
    --warn-line: #755c20;
    --important-bg: #281618;
    --important-line: #78393b;
    --tip-bg: #0c241e;
    --tip-line: #2c6653;

    --tk-key: #6bb8ee;
    --tk-str: #7fd7ae;
    --tk-num: #e9b768;
    --tk-lit: #ff9c95;
    --tk-fn: #b0a4f5;
    --tk-flag: #93a4b8;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.55);
    --shadow-md: 0 10px 26px -14px rgb(0 0 0 / 0.8), 0 2px 6px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 26px 64px -14px rgb(0 0 0 / 0.75), 0 4px 12px rgb(0 0 0 / 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-1: #6bc3f4;
  --brand-2: #468cc4;
  --brand-3: #285994;
  --brand-ink: #ffffff;

  --bg: #070b12;
  --bg-elev: #0d131d;
  --surface: #121a26;
  --surface-2: #1a2432;

  --text: #e8eef7;
  --text-dim: #9db0c6;
  --text-faint: #7d8fa5;

  --border: #1c2635;
  --border-strong: #2c394b;

  --accent: #6bb8ee;
  --accent-hover: #96d0f7;
  --accent-soft: #0f2338;
  --accent-line: #24486b;
  --on-accent: #061421;

  --focus: #6bb8ee;

  --get-fg: #5cd0a4;
  --get-bg: #0b271f;
  --post-fg: #6bb8ee;
  --post-bg: #0e2338;
  --put-fg: #b0a4f5;
  --put-bg: #1a1836;
  --patch-fg: #e9b768;
  --patch-bg: #2a2211;
  --delete-fg: #ff9c95;
  --delete-bg: #311719;

  --warn-bg: #221c0e;
  --warn-line: #755c20;
  --important-bg: #281618;
  --important-line: #78393b;
  --tip-bg: #0c241e;
  --tip-line: #2c6653;

  --tk-key: #6bb8ee;
  --tk-str: #7fd7ae;
  --tk-num: #e9b768;
  --tk-lit: #ff9c95;
  --tk-fn: #b0a4f5;
  --tk-flag: #93a4b8;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.55);
  --shadow-md: 0 10px 26px -14px rgb(0 0 0 / 0.8), 0 2px 6px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 26px 64px -14px rgb(0 0 0 / 0.75), 0 4px 12px rgb(0 0 0 / 0.45);
}

/* ---- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }

:where(a) { color: var(--accent); text-decoration: none; }
:where(a):hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 5px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; font-size: 14px;
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: none; text-decoration: none; color: var(--on-accent); }

/* ---- brand ------------------------------------------------------------- */
.brand { --wm-h: 15px; display: inline-flex; align-items: center; gap: 9px; color: var(--text); flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 22px; height: 22px; flex: none; }  /* square: the tile is 1:1 */

/* The wordmark is the traced lockup, tinted through a mask so it follows the
   theme. If masks are unavailable the element is still the word itself. */
.brand-word {
  font-weight: 700; font-size: 16px; letter-spacing: -.035em;
  color: var(--brand-ink);
}
@supports (mask-image: url("wordmark.ab7cb219de.svg")) or (-webkit-mask-image: url("wordmark.ab7cb219de.svg")) {
  .brand-word, .hero-word {
    display: inline-block; flex: none;
    width: calc(var(--wm-h) * 5.908); height: var(--wm-h);
    max-width: 100%;
    background-color: var(--brand-ink);
    -webkit-mask: url("wordmark.ab7cb219de.svg") no-repeat center / contain;
    mask: url("wordmark.ab7cb219de.svg") no-repeat center / contain;
    overflow: hidden; white-space: nowrap; text-indent: 120%;
  }
}
.brand-suffix {
  flex: none;
  padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--border-strong);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- topbar ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  height: var(--topbar-h);
  padding: 0 clamp(12px, 2vw, 24px);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-spacer { flex: 1 1 auto; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-dim);
  cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.icon-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border); }

.nav-toggle { display: none; }

.search-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 8px 0 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--text-faint);
  cursor: pointer; transition: border-color .14s ease, color .14s ease;
  min-width: 0;
}
.search-trigger:hover { border-color: var(--border-strong); color: var(--text-dim); }
.search-trigger-text { font-size: 13.5px; }
.search-kbd, kbd {
  font-family: var(--mono); font-size: 10.5px; line-height: 1;
  padding: 3px 5px; border-radius: 5px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-faint);
}

.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
}

/* ---- layout ------------------------------------------------------------ */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: clamp(20px, 3vw, 52px);
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(12px, 2vw, 28px);
  align-items: start;
}

.sidebar {
  position: sticky; top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 0 48px;
}
.sidebar-inner { padding-right: 8px; }
.nav-group {
  margin: 24px 0 8px; padding: 0 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-faint);
}
.nav-group:first-child { margin-top: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: block; padding: 6px 10px; border-radius: 7px;
  color: var(--text-dim); font-size: 14px; line-height: 1.45;
  transition: background .12s ease, color .12s ease;
}
.nav-list a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.nav-list a.is-active {
  background: var(--accent-soft); color: var(--accent);
  font-weight: 600; box-shadow: inset 2px 0 0 var(--accent);
}
.nav-list-ext a { font-family: var(--mono); font-size: 12.5px; }
/* The one hard break in the sidebar: guides above, the generated reference
   below. A rule and a slightly larger label, so the two halves read as halves
   and the product groups under it read as its children. */
.nav-section {
  margin: 30px 0 4px; padding: 14px 10px 0;
  border-top: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
}
.nav-section + .nav-group { margin-top: 10px; }
.sidebar-foot {
  margin: 30px 0 0; padding: 14px 10px 0;
  border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.7; color: var(--text-faint);
}
.sidebar-foot a { color: var(--text-faint); font-family: var(--mono); font-size: 11.5px; }
.sidebar-foot a:hover { color: var(--accent); }

/* The current page's own sections, nested under it — only the page you are on,
   so the sidebar shows depth where you are without becoming a wall. */
.nav-sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 10px; }
.nav-sub li { position: relative; }
.nav-sub a {
  display: block; padding: 4px 10px; border-radius: 6px;
  color: var(--text-faint); font-size: 13px; line-height: 1.4;
  transition: color .12s ease, background .12s ease;
}
.nav-sub a:hover { background: var(--surface); color: var(--text-dim); text-decoration: none; }
/* A hairline running the length of the group ties the children to the parent. */
.nav-sub { border-left: 1px solid var(--border); margin-left: 10px; }

.content {
  min-width: 0;
  padding: 30px 0 76px;
  max-width: var(--measure);
}
.content:focus { outline: none; }

/* ---- breadcrumb + page meta -------------------------------------------- */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin-bottom: 16px;
  font-size: 12.5px; line-height: 1.5;
}
.crumbs a { color: var(--text-faint); }
.crumbs a:hover { color: var(--accent); }
.crumb-sep { color: var(--border-strong); }
.crumb-section { color: var(--text-faint); }
.crumb-here { color: var(--accent); font-weight: 600; }

.page-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 2em;
  padding-bottom: 1.4em;
  border-bottom: 1px solid var(--border);
}
.meta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elev); color: var(--text-dim);
  font-size: 12px; font-weight: 550; letter-spacing: .002em;
  cursor: pointer; white-space: nowrap;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.meta-btn:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; background: var(--surface); }
.meta-btn svg { flex: none; opacity: .8; }
button.meta-btn { display: inline-grid; grid-auto-flow: column; align-items: center; }
.meta-btn .mb-done { display: none; color: var(--get-fg); }
.meta-btn.is-done .mb-idle { display: none; }
.meta-btn.is-done .mb-done { display: inline; }

/* ---- on this page ------------------------------------------------------ */
.toc-col { min-width: 0; }
.toc {
  position: sticky; top: calc(var(--topbar-h) + 30px);
  max-height: calc(100vh - var(--topbar-h) - 60px);
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: 24px;
}
.toc-title {
  margin: 0 0 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-faint);
}
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc li a {
  display: block; padding: 5px 12px; margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-faint); font-size: 12.75px; line-height: 1.45;
  transition: color .12s ease, border-color .12s ease;
}
.toc li.lvl-3 a { padding-left: 24px; }
.toc li a:hover { color: var(--text); text-decoration: none; }
.toc li a.is-current { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.toc-top {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 16px 0 0 12px;
  font-size: 12px; color: var(--text-faint);
}
.toc-top:hover { color: var(--accent); text-decoration: none; }
.toc-top .i-arrow { transform: rotate(-90deg); width: 13px; height: 13px; }

/* ---- prose ------------------------------------------------------------- */
.prose > :first-child { margin-top: 0; }
.prose :is(h1, h2, h3) { font-family: var(--display); }
.prose h1 {
  margin: 0 0 .5em;
  font-size: clamp(2.05rem, 1.5rem + 2vw, 2.85rem);
  line-height: 1.08; font-weight: 700; letter-spacing: -.036em;
}
.prose h2 {
  margin: 2.7em 0 .7em;
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.65rem);
  line-height: 1.22; font-weight: 680; letter-spacing: -.026em;
}
.prose h3 {
  margin: 2.1em 0 .6em;
  font-size: 1.14rem; line-height: 1.35; font-weight: 660; letter-spacing: -.016em;
}
.prose h4 {
  margin: 2em 0 .6em;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
.prose h5, .prose h6 { margin: 1.6em 0 .5em; font-size: 1rem; font-weight: 640; }
.prose p { margin: 0 0 1.05em; color: var(--text-dim); }
.prose h1 + p { font-size: 1.09rem; line-height: 1.62; color: var(--text-dim); }
.prose strong { color: var(--text); font-weight: 640; }
.prose em { font-style: italic; }
.prose hr { margin: 2.8em 0; border: 0; border-top: 1px solid var(--border); }

.prose ul, .prose ol { margin: 0 0 1.05em; padding-left: 1.35em; color: var(--text-dim); }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--text-faint); }
.prose ol > li::marker { font-variant-numeric: tabular-nums; font-weight: 600; }
.prose li > ul, .prose li > ol { margin: .35em 0; }

/* heading anchors */
.prose :is(h1, h2, h3, h4) { position: relative; scroll-margin-top: calc(var(--topbar-h) + 20px); }
.anchor {
  position: absolute; left: -.78em; top: 0;
  width: .78em; text-align: left;
  color: var(--border-strong); font-weight: 400; text-decoration: none;
  opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.prose :is(h1, h2, h3, h4):hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { text-decoration: none; color: var(--accent); }
@media (max-width: 1100px) { .anchor { display: none; } }

/* endpoint headings */
.prose h2.h-endpoint {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 3.2em; padding-top: 1.9em;
  border-top: 1px solid var(--border);
  font-size: 1.0625rem; letter-spacing: 0; font-weight: 600;
}
.verb {
  flex: none;
  padding: 3.5px 8px; border-radius: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .05em;
  line-height: 1.2; text-transform: uppercase;
  border: 1px solid transparent;
}
.verb-get { color: var(--get-fg); background: var(--get-bg); border-color: color-mix(in srgb, var(--get-fg) 22%, transparent); }
.verb-post { color: var(--post-fg); background: var(--post-bg); border-color: color-mix(in srgb, var(--post-fg) 22%, transparent); }
.verb-put { color: var(--put-fg); background: var(--put-bg); border-color: color-mix(in srgb, var(--put-fg) 22%, transparent); }
.verb-patch { color: var(--patch-fg); background: var(--patch-bg); border-color: color-mix(in srgb, var(--patch-fg) 22%, transparent); }
.verb-delete { color: var(--delete-fg); background: var(--delete-bg); border-color: color-mix(in srgb, var(--delete-fg) 22%, transparent); }
.route {
  font-family: var(--mono); font-size: .95rem; font-weight: 550;
  overflow-wrap: anywhere; color: var(--text);
}
.route .param { color: var(--accent); }

/* inline code */
.prose :not(pre) > code {
  font-family: var(--mono);
  font-size: .875em;
  padding: .14em .38em;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  overflow-wrap: anywhere;
}
.prose a > code { color: inherit; }

/* code blocks */
figure.code {
  margin: 1.4em 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
figure.code figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 8px 7px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.code-lang {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
button.copy {
  display: inline-grid; place-items: center;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--bg-elev);
  color: var(--text-dim); font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: color .14s ease, border-color .14s ease, background .14s ease;
}
button.copy > span { grid-area: 1 / 1; transition: opacity .14s ease; }
button.copy .copy-done { opacity: 0; color: var(--get-fg); }
button.copy .copy-fail { opacity: 0; color: var(--delete-fg); white-space: nowrap; }
button.copy:hover { color: var(--text); border-color: var(--text-faint); }
button.copy.is-done .copy-idle, button.copy.is-fail .copy-idle { opacity: 0; }
button.copy.is-done .copy-done { opacity: 1; }
button.copy.is-fail .copy-fail { opacity: 1; }
figure.code pre {
  margin: 0; padding: 14px 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
}
figure.code code {
  font-family: var(--mono); font-size: 13px; line-height: 1.62;
  color: var(--text); white-space: pre; tab-size: 2;
}
.tk-key { color: var(--tk-key); }
.tk-str { color: var(--tk-str); }
.tk-num { color: var(--tk-num); }
.tk-lit { color: var(--tk-lit); }
.tk-fn  { color: var(--tk-fn); font-weight: 600; }
.tk-flag { color: var(--tk-flag); }

/* tables */
.table-wrap {
  margin: 1.4em 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.table-wrap:focus-visible { outline-offset: -2px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 13.75px; font-variant-numeric: tabular-nums; }
.prose thead th {
  position: sticky; top: 0;
  text-align: left; font-weight: 660; color: var(--text);
  padding: 10px 14px; white-space: nowrap;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.prose tbody td {
  padding: 10px 14px; vertical-align: top; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.prose td:first-child { color: var(--text); }
.prose td:first-child code { color: var(--accent); font-weight: 550; }
.prose td :not(pre) > code { background: transparent; border-color: transparent; padding: 0; }
/* identifiers keep their integrity — the wrapper scrolls instead of breaking
   `asset_id` across two lines; only the trailing description cell may break. */
.prose td code, .prose th code { overflow-wrap: normal; }
.prose td:last-child code { overflow-wrap: anywhere; }
.prose table { min-width: 30rem; }
.prose th.ta-right, .prose td.ta-right { text-align: right; }

/* A rate is the thing a merchant came to the page for, so a bolded figure in a
   table cell is set as a figure — accent, tabular, and a size up from the prose
   around it — rather than just heavier body text. Scoped to `strong` inside a
   cell so it cannot bold ordinary emphasis elsewhere. */
.prose tbody td strong {
  color: var(--accent);
  font-weight: 640;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.008em;
  white-space: nowrap;
}
/* Status badge: :live: / :down:. A glowing dot reads at a glance in a
   status column, where a bare word gets skimmed past as more prose. The glow
   is a soft box-shadow halo in the same hue as the dot, tuned low enough to
   read as a status light rather than a warning flare. */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 550; white-space: nowrap;
}
/* The dot is a lit sphere (radial gradient, not a flat fill), so it reads as
   glowing on its own — the shadow only adds a THIN ambient ring around it. A
   wide, heavily-blurred box-shadow was the earlier attempt: it read as a
   smudge, not a glow, and its blur radius (8px) bled far enough past the dot
   that on the table's bottom-right cell it collided with `.table-wrap`'s
   rounded corner and got visibly sliced off. Total bleed here is ~4px, well
   inside a table cell's own padding, so the ring never reaches an edge. */
.status-dot {
  width: 8px; height: 8px; border-radius: 999px; flex: none;
}
.status-badge-live { color: #1c8a4d; }
.status-badge-live .status-dot {
  background: radial-gradient(circle at 32% 28%, #d4ffe6 0%, #4ade80 42%, #1f9d52 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #2ecc71 45%, transparent),
              0 0 3px 1px color-mix(in srgb, #2ecc71 80%, transparent);
}
.status-badge-breaking { color: #c23a3a; }
.status-badge-breaking .status-dot {
  background: #c23a3a;
  box-shadow: 0 0 0 3px rgba(194, 58, 58, 0.18);
}
.status-badge-down { color: #c23a3a; }
.status-badge-down .status-dot {
  background: radial-gradient(circle at 32% 28%, #ffe0e0 0%, #f87171 42%, #d92c2c 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 45%, transparent),
              0 0 3px 1px color-mix(in srgb, #ef4444 80%, transparent);
}
:root:not([data-theme="light"]) .status-badge-live { color: #4ade80; }
:root:not([data-theme="light"]) .status-badge-down { color: #f87171; }
:root[data-theme="dark"] .status-badge-live { color: #4ade80; }
:root[data-theme="dark"] .status-badge-down { color: #f87171; }

/* A two-column table with no header is a spec sheet (card attributes, limits):
   give the label column a fixed measure so the values line up as a column. */
.prose table:not(:has(thead th:nth-child(2):not(:empty))) td:first-child { width: 42%; }
.prose th.ta-center, .prose td.ta-center { text-align: center; }

/* quotes and callouts */
.prose blockquote {
  margin: 1.4em 0; padding: .1em 0 .1em 18px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-dim); font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.callout {
  margin: 1.5em 0; padding: 15px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-line);
  background: var(--accent-soft);
}
.callout p { color: var(--text); }
.callout > :last-child { margin-bottom: 0; }
.callout-warn { background: var(--warn-bg); border-left-color: var(--warn-line); }
.callout-important { background: var(--important-bg); border-left-color: var(--important-line); }
.callout-tip { background: var(--tip-bg); border-left-color: var(--tip-line); }

/* ---- card grid (the MCP clients) --------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: 14px;
  margin: 1.6em 0 2em;
}
.card {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 18px 18px 6px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
.prose .card h4.card-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 .55em;
  font-size: 15px; font-weight: 650; letter-spacing: -.012em;
  text-transform: none; color: var(--text);
}
.client-mark {
  width: 22px; height: 22px; flex: none;
  color: var(--text-faint);
}
.card p { font-size: 13.75px; line-height: 1.6; margin-bottom: 1em; }
.card figure.code { margin: auto 0 12px; box-shadow: none; background: var(--surface); }
.card figure.code figcaption { background: transparent; border-bottom-color: var(--border); }
.card figure.code pre { padding: 11px 13px; }
.card figure.code code { font-size: 12px; }

/* ---- pager + footer ----------------------------------------------------- */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 3.5em 0 0; padding-top: 26px;
  border-top: 1px solid var(--border);
}
.pager-link {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev);
  transition: border-color .14s ease, background .14s ease;
}
.pager-link:hover { border-color: var(--accent-line); text-decoration: none; background: var(--surface); }
.pager-link.next { text-align: right; }
.pager-dir { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 650; }
.pager-title { color: var(--text); font-weight: 600; font-size: 14.5px; }
.page-footer {
  margin-top: 2.6em; padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 12.75px;
}
.page-footer p { margin: 0 0 4px; }

/* ---- search ------------------------------------------------------------ */
.search-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: start center;
  padding: clamp(16px, 9vh, 110px) 16px 16px;
  background: color-mix(in srgb, #030811 52%, transparent);
  backdrop-filter: blur(3px);
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: min(660px, 100%);
  max-height: min(70vh, 620px);
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.search-field {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
}
.search-field input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 15.5px; outline: none;
}
.search-field input::placeholder { color: var(--text-faint); }
.search-results { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.search-results:empty { display: none; }
.s-item { display: block; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text); }
.s-item:hover, .s-item.is-active { background: var(--accent-soft); text-decoration: none; }
.s-item.is-active { box-shadow: inset 2px 0 0 var(--accent); }
.s-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.s-heading { font-weight: 620; font-size: 14.5px; letter-spacing: -.012em; }
.s-page {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
}
.s-text {
  margin: 2px 0 0; font-size: 12.75px; line-height: 1.5; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.s-text mark { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px; }
.s-empty { padding: 26px 14px; text-align: center; color: var(--text-faint); font-size: 14px; }
.search-hint {
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 9px 15px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-faint);
}

/* ---- scrim (mobile drawer) --------------------------------------------- */
.scrim {
  position: fixed; inset: var(--topbar-h) 0 0; z-index: 55;
  background: color-mix(in srgb, #030811 46%, transparent);
}
.scrim[hidden] { display: none; }

/* ==========================================================================
   landing page
   ========================================================================== */
.home { display: block; }
.home:focus { outline: none; }
.home > section, .home-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: clamp(18px, 5vw, 40px);
}

.kicker {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 18px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--text);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; color: var(--text); border-color: var(--text-faint); background: var(--surface); }
.btn .i-arrow { transition: transform .18s cubic-bezier(.2,.8,.3,1); }
.btn:hover .i-arrow { transform: translateX(3px); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-quiet:hover { background: var(--surface); border-color: var(--border); }

/* ---- hero: the one place the brand is taken large ---------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(48px, 9vh, 96px);
  padding-bottom: clamp(40px, 7vh, 78px);
  max-width: none !important;
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto;
  padding-inline: clamp(18px, 5vw, 40px);
}
/* the mark, repeated and faded — decorative, and the only loud thing here */
.hero-field {
  position: absolute; z-index: 0;
  top: -14%; right: max(-90px, -7vw);
  width: min(560px, 62vw); height: 128%;
  opacity: .6;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(255deg, #000 6%, transparent 74%);
  mask-image: linear-gradient(255deg, #000 6%, transparent 74%);
}
.hero-lockup { margin: 0; display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); }
.hero-mark {
  --wm-h: clamp(30px, 6.4vw, 52px);
  display: inline-flex; align-items: center; gap: clamp(12px, 2.2vw, 22px);
}
.hero-mark-svg {
  width: calc(var(--wm-h) * 2.1); height: calc(var(--wm-h) * 1.47);
  flex: none;
}
.hero-tagline {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: clamp(10px, 1.55vw, 12.5px);
  font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-faint);
}
.hero-lede {
  max-width: 56ch;
  margin: 26px 0 0;
  font-size: clamp(1rem, .95rem + .35vw, 1.16rem);
  line-height: 1.62;
  color: var(--text-dim);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chain-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 30px 0 0; padding: 0;
}
.chain-row li {
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-dim);
}

/* ---- stats strip -------------------------------------------------------- */
.strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 34px;
  margin-top: 8px !important;
  padding-block: 22px;
  border-block: 1px solid var(--border);
}
.strip dl { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 0; }
.strip dl > div { display: flex; flex-direction: column-reverse; gap: 2px; }
.strip dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-faint);
}
.strip dd {
  margin: 0;
  font-size: 27px; font-weight: 680; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.strip > p { margin: 0; max-width: 42ch; font-size: 13px; line-height: 1.6; color: var(--text-faint); }

/* ---- home blocks -------------------------------------------------------- */
.home-block { padding-block: clamp(38px, 5.5vh, 62px); }
.home-block > h2 {
  margin: 0 0 30px;
  font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.05rem);
  line-height: 1.15; font-weight: 700; letter-spacing: -.03em;
}
.home-block h3 { font-size: 1.02rem; font-weight: 650; letter-spacing: -.014em; margin: 0; }

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  gap: 14px;
}
.cap {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 20px 20px 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.cap:hover {
  text-decoration: none; color: var(--text);
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.cap-icon { width: 24px; height: 24px; color: var(--accent); margin-bottom: 14px; }
.cap-eyebrow {
  margin: 0 0 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
.cap-body { margin: 9px 0 16px; font-size: 13.75px; line-height: 1.6; color: var(--text-dim); }
.cap-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
}
.cap:hover .cap-more .i-arrow { transform: translateX(3px); }
.cap-more .i-arrow { transition: transform .18s cubic-bezier(.2,.8,.3,1); width: 13px; height: 13px; }

/* ---- quickstart --------------------------------------------------------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
}
.step {
  min-width: 0;
  padding: 20px 22px 4px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev);
}
.step-head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.step-n {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.step > p { margin: 0 0 14px; max-width: 68ch; font-size: 14.25px; color: var(--text-dim); }
.step code, .step-after code {
  font-family: var(--mono); font-size: .875em;
  padding: .14em .38em; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  overflow-wrap: anywhere;
}
.step figure.code { margin: 0 0 18px; }
.step figure.code pre code { border: 0; background: none; padding: 0; }
.step-after { margin: 22px 0 0; max-width: 68ch; font-size: 14.25px; color: var(--text-dim); }

/* ---- agents panel ------------------------------------------------------- */
.agents {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.agents h2 { margin: 0 0 16px; font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.05rem); line-height: 1.15; font-weight: 700; letter-spacing: -.03em; }
.agents p { margin: 0; max-width: 60ch; color: var(--text-dim); }
.agents code {
  font-family: var(--mono); font-size: .875em;
  padding: .14em .38em; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.agents-clients {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; list-style: none; margin: 0; padding: 0;
}
.agents-clients li {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 0;
  padding: 22px 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev);
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.agents-clients .client-mark { width: 26px; height: 26px; color: var(--text-faint); }

/* ---- full contents ------------------------------------------------------ */
.toc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: 26px 34px;
}
.toc-grid > div { min-width: 0; }
.home-nav { list-style: none; margin: 0; padding: 0; }
.home-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim); font-size: 14px;
}
.home-nav a:hover { color: var(--accent); text-decoration: none; }
.home-nav .i-arrow { opacity: 0; flex: none; transition: opacity .15s ease, transform .15s ease; }
.home-nav a:hover .i-arrow { opacity: 1; transform: translateX(2px); }

.home-footer {
  padding-block: 34px 54px;
  border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 12.75px;
}
.home-footer p { margin: 0 0 4px; }
.home-footer code { font-family: var(--mono); font-size: .92em; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc-col { display: none; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 0 clamp(16px, 5vw, 28px); }
  .nav-toggle { display: inline-grid; }
  .sidebar {
    position: fixed; z-index: 58;
    top: var(--topbar-h); bottom: 0; left: 0;
    width: min(300px, 84vw);
    max-height: none;
    padding: 20px 8px 40px 18px;
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    transform: translateX(-102%);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1);
    visibility: hidden;
  }
  .sidebar.is-open { transform: none; visibility: visible; }
  .content { padding-top: 24px; max-width: none; }
  .agents { grid-template-columns: minmax(0, 1fr); }
  .agents-clients { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  /* the field stays out of the reading column entirely on a phone */
  .hero-field { opacity: .3; top: -4%; right: -32%; width: 84vw; height: 46%; }
  .agents-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { padding-block: 20px; }
  .strip dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .strip dd { font-size: 23px; }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .search-trigger-text, .search-kbd { display: none; }
  .search-trigger { width: 34px; padding: 0; justify-content: center; }
  .brand-suffix { display: none; }
  .prose h2.h-endpoint { gap: 8px; padding-top: 1.5em; margin-top: 2.6em; }
  .route { font-size: .875rem; }
  figure.code code { font-size: 12.25px; }
  .prose table { font-size: 13px; }
  .prose thead th, .prose tbody td { padding: 9px 11px; }
  .pager { grid-template-columns: 1fr; }
  .pager-link.next { text-align: left; }
  .search-hint { display: none; }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; justify-content: center; }
  .btn-quiet { border-color: var(--border); background: var(--bg-elev); }
  .hero-cta { gap: 8px; }
}

@media print {
  .topbar, .sidebar, .toc-col, .pager, .search-overlay, .scrim, .skip-link, .page-meta { display: none !important; }
  .layout { display: block; }
  .content { max-width: none; padding: 0; }
}

/* ---- live pricing: tables filled from GET /v1/pricing at load ---------- */
.live-pricing { margin: 1rem 0 1.5rem; }
.live-pricing .table-wrap { margin: 0 0 .5rem; }
.live-pricing table { table-layout: auto; }
.live-pricing caption {
  caption-side: bottom; text-align: left;
  padding: 10px 14px; color: var(--text-dim); font-size: 12.5px;
  border-top: 1px solid var(--border);
}
/* the first column names the thing: it keeps its width and never breaks a
   sentence into a word per line */
.live-pricing td.what { color: var(--text); font-weight: 560; min-width: 13rem; width: 26%; }
.live-pricing td.what .live-sub, .live-pricing td.num .live-sub { white-space: normal; }
/* a figure: right, tabular, on one line; a description: left, wraps */
.live-pricing th.num, .live-pricing td.num { text-align: right; white-space: nowrap; }
.live-pricing td.num strong, .live-pricing td.plain { font-variant-numeric: tabular-nums; }
.live-pricing td.plain { color: var(--text-dim); }
.live-pricing td.rate { text-align: left; min-width: 16rem; }
.live-pricing td.text { color: var(--text-dim); }
.live-pricing .live-head {
  display: inline-block; color: var(--accent); font-weight: 640; font-size: 14.5px;
  letter-spacing: -.008em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.live-pricing .live-sub {
  display: block; margin-top: 3px;
  color: var(--text-dim); font-size: 12.5px; line-height: 1.5; font-weight: 400;
}
.live-pricing .live-chain { color: var(--text-faint); font-size: 11px; letter-spacing: .06em; font-weight: 600; margin-left: 4px; }
.live-pricing-fallback { color: var(--text-dim); font-size: 0.9rem; }
.live-pricing.is-live > .live-pricing-fallback { display: none; }
.live-pricing.is-unavailable > .live-pricing-fallback::after { content: ' (the sheet could not be loaded just now — call the endpoint directly.)'; }
.live-pricing-stamp { display: flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--text-faint); font-size: 0.8rem; line-height: 1.5; }
.live-pricing-stamp code { white-space: nowrap; }
.live-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18); }
.live-static { font-size: 0.75rem; color: var(--text-faint); }

/* Stacked: a table wider than its column, or any table on a phone, becomes a
   grid of cards — one row per card, the column names as labels. Decided by
   measuring (assets/app.7bb5c5c8e0.js fit()), never by a breakpoint alone. */
.live-pricing.is-stacked .table-wrap { overflow: visible; border: 0; background: transparent; border-radius: 0; }
.live-pricing.is-stacked table, .live-pricing.is-stacked tbody { display: block; min-width: 0; width: 100%; }
.live-pricing.is-stacked thead { display: none; }
.live-pricing.is-stacked tr {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 8px 20px; padding: 12px 14px 12px; margin-bottom: 8px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev);
}
.live-pricing.is-stacked tbody tr:hover td { background: transparent; }
.live-pricing.is-stacked td, .live-pricing.is-stacked td.num, .live-pricing.is-stacked td.plain,
.live-pricing.is-stacked td.rate, .live-pricing.is-stacked td.what, .live-pricing.is-stacked td.text {
  display: block; text-align: left; white-space: normal; padding: 0; border: 0; min-width: 0; width: auto;
}
.live-pricing.is-stacked td::before {
  content: attr(data-label); display: block; margin-bottom: 2px;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint);
}
.live-pricing.is-stacked td.what::before { display: none; }
.live-pricing.is-stacked td.what {
  grid-column: 1 / -1; font-size: 15px; font-weight: 620;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.live-pricing.is-stacked td.rate, .live-pricing.is-stacked td.text { grid-column: 1 / -1; }
.live-pricing.is-stacked td strong, .live-pricing.is-stacked .live-head { white-space: normal; }
.live-pricing.is-stacked caption { display: block; padding: 6px 2px 0; border: 0; }
@media (max-width: 620px) {
  .live-pricing.is-stacked tr { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 8px 16px; padding: 10px 12px; }
}

/* ---- fee calculator: the price sheet, applied to an amount ------------- */
.fee-calc-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elev);
  padding: 22px 22px 18px; margin: 0 0 10px;
  box-shadow: 0 1px 2px rgba(8, 60, 117, 0.04), 0 12px 32px -18px rgba(8, 60, 117, 0.25);
}
.fee-calc-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
}
.fee-calc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.fee-calc-kicker { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 640; }
.fee-calc-title { margin: 4px 0 0; font-size: 18px; letter-spacing: -.012em; font-weight: 660; }
.fee-calc-live {
  cursor: pointer; user-select: none;
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: #12664a; background: var(--tip-bg);
  border: 1px solid rgba(99, 183, 154, 0.45); border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
.fee-calc { display: grid; gap: 16px; margin: 0; }
.fee-calc-field { display: grid; gap: 8px; }
.fee-calc-field[hidden] { display: none; }
.fee-calc-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); font-weight: 640; }
/* segmented control */
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.seg-item { flex: 1 1 auto; position: relative; }
.seg-item input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg-item span {
  display: block; text-align: center; padding: 9px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 580; color: var(--text-dim); transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap;
}
.seg-item input:checked + span { background: var(--bg-elev); color: var(--accent); box-shadow: 0 1px 2px rgba(8, 60, 117, 0.12), 0 0 0 1px var(--accent-line); }
.seg-item input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
/* amount */
.fee-calc-amount { position: relative; display: flex; align-items: center; }
.fee-calc-amount input {
  width: 100%; font: inherit; font-size: 26px; font-weight: 640; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 12px 84px 12px 16px; -moz-appearance: textfield;
}
.fee-calc-amount input::-webkit-outer-spin-button, .fee-calc-amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fee-calc-amount input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.fee-calc-unit {
  position: absolute; right: 12px; font-size: 12px; font-weight: 660; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 10px; pointer-events: none;
}
.fee-calc-amount.is-mini input { font-size: 16px; font-weight: 580; padding: 9px 64px 9px 12px; border-radius: 10px; }
.fee-calc-amount.is-mini .fee-calc-unit { right: 8px; padding: 3px 8px; font-size: 11px; }
.fee-calc-select { font: inherit; font-size: 14.5px; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; }
.fee-calc-chip { display: inline-flex; align-items: center; gap: 9px; margin-top: 2px; font-size: 13.5px; color: var(--text-dim); cursor: pointer; }
.fee-calc-chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.fee-calc-chip input:checked + span { color: var(--text); }
/* your own fee */
.fee-calc-more { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 0 14px; }
.fee-calc-more summary { cursor: pointer; padding: 11px 0; font-size: 13.5px; font-weight: 600; color: var(--accent); list-style: none; }
.fee-calc-more summary::-webkit-details-marker { display: none; }
.fee-calc-more summary::before { content: '+'; display: inline-block; width: 18px; font-weight: 700; }
.fee-calc-more[open] summary::before { content: '–'; }
.fee-calc-more-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; padding: 2px 0 14px; }
.fee-calc-mini { display: grid; gap: 6px; font-size: 12px; color: var(--text-dim); font-weight: 600; }
/* receipt */
.fee-calc-out { margin-top: 18px; }
.fee-calc-receipt { border-radius: 14px; background: var(--surface); border: 1px solid var(--border); padding: 4px 16px; }
.fee-calc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.fee-calc-line:last-child { border-bottom: 0; }
.fee-calc-line span { color: var(--text-dim); }
.fee-calc-line strong { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 620; }
.fee-calc-line.is-live-figure strong { color: var(--accent); }
.fee-calc-tag { display: inline-block; margin-left: 8px; font-style: normal !important; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 7px; vertical-align: 1px; }
.fee-calc-tag.is-yours { color: var(--put-fg); background: var(--put-bg); }
.fee-calc-line.is-total { margin-top: 2px; padding-top: 14px; border-top: 2px solid var(--border-strong); }
.fee-calc-line.is-total span { color: var(--text); font-weight: 640; font-size: 15px; }
.fee-calc-line.is-total strong { font-size: 22px; letter-spacing: -.012em; color: var(--text); }
.fee-calc-hint { color: var(--text-dim); margin: 6px 0; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: 14px; text-align: center; }
.fee-calc-note { color: var(--text-faint); font-size: 12.5px; line-height: 1.55; margin: 10px 2px 0; }
@media (max-width: 560px) {
  .fee-calc-card { padding: 18px 14px 14px; border-radius: 14px; }
  .fee-calc-head { flex-direction: column; gap: 10px; }
  .seg-item span { padding: 8px 8px; font-size: 12.5px; white-space: normal; }
  .fee-calc-amount input { font-size: 22px; }
}

/* updating: the receipt dims while the sheet is re-read, the dot pulses */
.fee-calc-card.is-updating .fee-calc-out { opacity: .45; transition: opacity .15s; }
.fee-calc-out { transition: opacity .25s; }
.live-dot.is-busy { animation: fee-calc-pulse 0.9s ease-in-out infinite; }
@keyframes fee-calc-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .5; } }

/* skeleton: the card's shape while the sheet loads, bars where content goes */
.live-pricing.is-loading > .live-pricing-fallback { display: none; }
.sk { border-radius: 8px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: sk-shimmer 1.4s ease-in-out infinite; }
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.fee-calc-skeleton .sk-kicker { width: 110px; height: 11px; margin-bottom: 10px; }
.fee-calc-skeleton .sk-title { width: 60%; height: 20px; margin-bottom: 22px; }
.fee-calc-skeleton .sk-label { width: 80px; height: 11px; margin: 0 0 8px; }
.fee-calc-skeleton .sk-seg { height: 48px; border-radius: 12px; margin-bottom: 16px; }
.fee-calc-skeleton .sk-amount { height: 58px; border-radius: 12px; margin-bottom: 18px; }
.sk-receipt, .fee-calc-receipt.is-skeleton { padding: 14px 16px; }
.sk-receipt { border-radius: 14px; border: 1px solid var(--border); }
.sk-line { height: 14px; margin: 10px 0 14px; width: 100%; }
.sk-line:nth-child(2) { width: 88%; }
.sk-line:nth-child(3) { width: 76%; }
.sk-total { height: 24px; width: 100%; margin-top: 16px; border-radius: 10px; }
.fee-calc-receipt.is-skeleton .sk { animation-duration: 1s; }

/* the saving line: what the customer keeps versus burning TRX */
.fee-calc-line.is-saving { background: var(--tip-bg); margin: 8px -16px 0; padding: 12px 16px; border-bottom: 0; border-radius: 0 0 14px 14px; align-items: center; }
.fee-calc-line.is-saving + .fee-calc-line.is-total { margin-top: 8px; }
.fee-calc-line.is-saving span { color: #12664a; font-weight: 600; }
.fee-calc-line.is-saving .fee-calc-sub { display: block; font-style: normal; font-weight: 400; font-size: 12.5px; color: #12664a; opacity: .8; margin-top: 2px; }
.fee-calc-line.is-saving strong { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: #12664a; }
.fee-calc-line.is-saving strong b { font-size: 16px; }
.fee-calc-line.is-saving strong i { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; background: rgba(99, 183, 154, 0.25); border-radius: 999px; padding: 2px 8px; }