/* The Developer API landing page (/api, web/api-page/index.html, src/web/api-landing.ts). Builds on /billing/pricing.css (the public
   header, .btn, the page column and the tokens it aliases) and the brand tokens (theme.css, atlas-tokens.css): no colour literal
   here, so dark, light and high contrast follow the theme. Nothing inline (the page runs under HOME_CSP). Logical properties for RTL. */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/brand/fonts/jetbrains-mono-latin-var.woff2?v=83c005d49d') format('woff2');
}

:root {
  --al-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --al-card: var(--panel);
  --al-edge: var(--line);
  --al-code-bg: var(--a-sunken);
  --al-soft: var(--a-accent-t1);
  --al-glow-a: var(--a-accent-t2);
  --al-glow-b: var(--a-cyan-t2);
  --al-gap: clamp(56px, 9vw, 112px);
}

.al { overflow-x: clip; }
.al h2 { font-size: var(--a-fs-display-s); line-height: var(--a-lh-tight); letter-spacing: -.02em; margin: 0 0 var(--a-sp-5); text-wrap: balance; }
.al h3 { margin: 0; }
.al code { font-family: var(--al-mono); font-size: .92em; }
.al-eyebrow { margin: 0 0 var(--a-sp-4); font-size: var(--a-fs-sm); font-weight: var(--a-fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--aqua-ink); }
.al-lede { margin: 0; color: var(--dim); font-size: var(--a-fs-lede); line-height: var(--a-lh-body); max-width: 60ch; text-wrap: pretty; }
.al-head { text-align: center; max-width: 760px; margin: 0 auto var(--a-sp-8); }
.al-head .al-lede { margin-inline: auto; }
.al-fine { margin: var(--a-sp-5) 0 0; color: var(--dim); font-size: var(--a-fs-md); }
.al-center { text-align: center; }

/* ---- 1 · hero ---------------------------------------------------------------------------------- */
.al-hero { position: relative; text-align: center; padding: clamp(56px, 9vw, 104px) 0 var(--a-sp-8); isolation: isolate; }
.al-hero::before {
  content: ''; position: absolute; z-index: -1; inset: -40px -20% auto; height: 520px; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 30% 30%, var(--al-glow-a), transparent 70%), radial-gradient(ellipse 45% 55% at 72% 40%, var(--al-glow-b), transparent 70%);
  filter: blur(8px);
}
.al-kicker {
  display: inline-flex; align-items: center; gap: var(--a-sp-4); margin: 0 0 var(--a-sp-7); padding: var(--a-sp-2) var(--a-sp-6) var(--a-sp-2) var(--a-sp-5);
  border: 1px solid var(--al-edge); border-radius: var(--a-r-pill); background: var(--glass); color: var(--text); font-size: var(--a-fs-md); font-weight: var(--a-fw-medium);
}
.al-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gain) 22%, transparent); }
.al-hero h1 {
  margin: 0 auto var(--a-sp-6); max-width: 18ch; font-size: var(--a-fs-display); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance;
}
.al-hero-sub { margin: 0 auto; max-width: 56ch; color: var(--dim); font-size: var(--a-fs-lede); text-wrap: pretty; }
.al-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-sp-5); margin-top: var(--a-sp-8); }
.al-hero-cta .btn { min-width: 190px; }
.al-hero-note { margin: var(--a-sp-6) 0 0; color: var(--dim); font-size: var(--a-fs-md); }

/* ---- 2 · exchanges ----------------------------------------------------------------------------- */
.al-venues { margin: var(--a-sp-8) auto 0; max-width: 1080px; text-align: center; }
.al-venues-t { margin: 0 0 var(--a-sp-6); color: var(--dim); font-size: var(--a-fs-md); font-weight: var(--a-fw-medium); letter-spacing: .02em; }
.al-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-sp-4); }
.al-pill {
  display: inline-flex; align-items: center; gap: var(--a-sp-4); padding: var(--a-sp-2) var(--a-sp-5) var(--a-sp-2) var(--a-sp-2);
  border: 1px solid var(--al-edge); border-radius: var(--a-r-pill); background: var(--al-card); color: var(--text); font-size: var(--a-fs-md); font-weight: var(--a-fw-medium);
}
.al-vlogo { width: 20px; height: 20px; border-radius: 50%; object-fit: contain; flex: none; display: block; }
.al-vlogo--none { display: inline-grid; place-items: center; background: var(--panel-2); color: var(--dim); font-size: var(--a-fs-xs); }
/* a logo with a light-drawn twin (Bybit, OKX: sources.json theme "dark") shows that twin on the dark theme */
.al-vlogo--d { display: none; }
:root:not([data-theme="light"]) .al-vlogo--l { display: none; }
:root:not([data-theme="light"]) .al-vlogo--d { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .al-vlogo--l { display: block; }
  :root:not([data-theme]) .al-vlogo--d { display: none; }
}

/* ---- split sections (endpoints, response format) ------------------------------------------------- */
.al-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: var(--al-gap); }
.al-split-copy { min-width: 0; }

/* ---- 3 · endpoint strip -------------------------------------------------------------------------- */
.al-endpoints { margin-top: var(--al-gap); }
.al-endpoints > .al-split { margin-top: 0; }
.al-marquee {
  margin-top: clamp(32px, 5vw, 56px); min-width: 0; overflow: hidden; padding-block: 2px; display: grid; gap: var(--a-sp-4); border-radius: var(--a-r-lg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.al-marquee:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.al-marquee-row { display: flex; overflow: hidden; gap: var(--a-sp-4); min-width: 0; }
.al-marquee-track { list-style: none; margin: 0; padding: 0; display: flex; flex: none; gap: var(--a-sp-4); min-width: max-content; }
.al-ep {
  display: inline-flex; align-items: center; gap: var(--a-sp-4); padding: var(--a-sp-4) var(--a-sp-5); white-space: nowrap;
  border: 1px solid var(--al-edge); border-radius: var(--a-r-md); background: var(--al-card); font-size: var(--a-fs-md);
}
.al-ep code { color: var(--text); font-size: var(--a-fs-md); }
.al-ep-m { font-family: var(--al-mono); font-size: var(--a-fs-xs); font-weight: var(--a-fw-semibold); letter-spacing: .04em; color: var(--aqua-ink); }
.al-ep-m--post { color: var(--primary); }
.al-ep-m--delete { color: var(--loss); }
@media (prefers-reduced-motion: no-preference) {
  .al-marquee-track { animation: al-scroll var(--al-dur, 70s) linear infinite; }
  .al-marquee-row.is-rev .al-marquee-track { animation-direction: reverse; --al-dur: 80s; }
  .al-marquee-row:nth-child(3) .al-marquee-track { --al-dur: 90s; }
  .al-marquee:hover .al-marquee-track, .al-marquee:focus-within .al-marquee-track { animation-play-state: paused; }
}
@keyframes al-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--a-sp-4))); } }
[dir="rtl"] .al-marquee-row { direction: ltr; }   /* route names read left to right in every language */
/* no motion: the rows wrap into a still list (every route visible, no copy) */
@media (prefers-reduced-motion: reduce) {
  .al-marquee { -webkit-mask-image: none; mask-image: none; }
  .al-marquee-row { flex-wrap: wrap; overflow: visible; }
  .al-marquee-track { flex-wrap: wrap; min-width: 0; }
  .al-marquee-copy { display: none; }
}

/* ---- code panels --------------------------------------------------------------------------------- */
.al-code { position: relative; min-width: 0; border: 1px solid var(--al-edge); border-radius: var(--radius); background: var(--al-code-bg); overflow: hidden; box-shadow: var(--plan-shadow); }
.al-code + .al-code { margin-top: var(--a-sp-5); }
.al-code-bar { display: flex; align-items: center; gap: var(--a-sp-5); padding: var(--a-sp-4) var(--a-sp-6); border-bottom: 1px solid var(--al-edge); background: var(--glass); }
.al-code-dots { display: inline-flex; gap: 6px; }
.al-code-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.al-code-lang { font-size: var(--a-fs-xs); font-weight: var(--a-fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.al-code-hdr { font-family: var(--al-mono); font-size: var(--a-fs-xs); color: var(--aqua-ink); }
.al-copy {
  margin-inline-start: auto; padding: var(--a-sp-2) var(--a-sp-5); border: 1px solid var(--al-edge); border-radius: var(--a-r-pill); background: transparent;
  color: var(--dim); font: inherit; font-size: var(--a-fs-xs); font-weight: var(--a-fw-semibold); cursor: pointer;
}
.al-copy:hover { color: var(--text); border-color: var(--edge-hover); }
.al-copy:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.al-code pre { margin: 0; padding: var(--a-sp-6) var(--a-sp-7); overflow-x: auto; direction: ltr; text-align: left; font-family: var(--al-mono); font-size: var(--a-fs-sm); line-height: 1.7; color: var(--a-fg-2); tab-size: 2; }
.al-code pre:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: calc(-1 * var(--a-ring-w)); }
.al-code code { font-size: inherit; }
.al-resp-code .al-code pre { max-height: 420px; }
.al-tok-m { color: var(--primary); font-weight: var(--a-fw-semibold); }
.al-tok-k { color: var(--aqua-ink); }
.al-tok-s { color: var(--warn); }
.al-tok-c { color: var(--a-fg-3); }
.al-req .al-code { box-shadow: var(--featured-glow); }
.al-req .al-code { border: 1px solid transparent; background: linear-gradient(var(--al-code-bg), var(--al-code-bg)) padding-box, var(--holo-edge) border-box; }

/* ---- 4 · intro + stats --------------------------------------------------------------------------- */
.al-intro { margin-top: var(--al-gap); }
.al-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-sp-6); }
.al-stat { display: flex; flex-direction: column; gap: var(--a-sp-4); min-width: 0; padding: var(--a-sp-7); border: 1px solid var(--al-edge); border-radius: var(--radius); background: var(--al-card); box-shadow: var(--plan-shadow); }
.al-stat h3 { font-size: var(--a-fs-lg); font-weight: var(--a-fw-semibold); }
.al-stat p { margin: 0; color: var(--dim); font-size: var(--a-fs-md); line-height: var(--a-lh-snug); }
.al-stat .al-stat-n {
  margin: 0 0 var(--a-sp-2); font-size: var(--a-fs-4xl); line-height: 1; font-weight: var(--a-fw-semibold); letter-spacing: -.03em; color: var(--text);
  background: var(--holo-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.al-stat .al-stat-ways { display: flex; flex-wrap: wrap; gap: var(--a-sp-2) var(--a-sp-4); margin: 0 0 var(--a-sp-2); font-size: var(--a-fs-xl); font-weight: var(--a-fw-semibold); color: var(--text); line-height: 1.3; }
.al-stat .al-stat-ways span[aria-hidden] { color: var(--dim); }
.al-hist { list-style: none; margin: var(--a-sp-2) 0 0; padding: 0; display: grid; gap: var(--a-sp-4); }
.al-hist li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a-sp-5); padding-bottom: var(--a-sp-4); border-bottom: 1px dashed var(--al-edge); font-size: var(--a-fs-md); }
.al-hist li:last-child { border-bottom: 0; padding-bottom: 0; }
.al-hist-tier { color: var(--dim); }
.al-hist-val { color: var(--text); font-weight: var(--a-fw-semibold); text-align: end; }

/* ---- 5 · response format ------------------------------------------------------------------------- */
.al-resp { align-items: start; }
.al-meta { margin: var(--a-sp-7) 0 0; display: grid; gap: var(--a-sp-5); }
.al-meta > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--a-sp-5); padding-top: var(--a-sp-5); border-top: 1px solid var(--al-edge); }
.al-meta dt code { color: var(--aqua-ink); font-size: var(--a-fs-md); }
.al-meta dd { margin: 0; color: var(--dim); font-size: var(--a-fs-md); line-height: var(--a-lh-snug); }

/* ---- 6 · features -------------------------------------------------------------------------------- */
.al-features { margin-top: var(--al-gap); }
.al-feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-sp-6); }
.al-feat {
  position: relative; display: flex; flex-direction: column; gap: var(--a-sp-5); min-width: 0; padding: var(--a-sp-7);
  border: 1px solid var(--al-edge); border-radius: var(--radius); background: var(--al-card); box-shadow: var(--plan-shadow); transition: border-color .15s, transform .15s;
}
.al-feat:hover { border-color: var(--edge-hover); }
.al-feat--charts { border: 1px solid transparent; background: linear-gradient(var(--al-card), var(--al-card)) padding-box, var(--holo-edge) border-box; }
.al-feat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--a-sp-4); }
.al-feat-i { width: 40px; height: 40px; padding: 9px; border-radius: var(--a-r-lg); background: var(--al-soft); color: var(--primary); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.al-feat-n { font-size: var(--a-fs-xs); font-weight: var(--a-fw-semibold); color: var(--dim); padding: var(--a-sp-1) var(--a-sp-4); border: 1px solid var(--al-edge); border-radius: var(--a-r-pill); white-space: nowrap; }
.al-feat h3 { font-size: var(--a-fs-lg); font-weight: var(--a-fw-semibold); }
.al-feat p { margin: 0; color: var(--dim); font-size: var(--a-fs-md); line-height: var(--a-lh-snug); }
.al-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a-sp-2); direction: ltr; }
.al-chips li { padding: 2px var(--a-sp-4); border-radius: var(--a-r-sm); background: var(--glass); border: 1px solid var(--al-edge); font-size: var(--a-fs-xs); color: var(--a-fg-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-chips code { font-size: var(--a-fs-xs); }
.al-feat-link { margin-top: auto; padding-top: var(--a-sp-2); font-size: var(--a-fs-md); font-weight: var(--a-fw-semibold); text-decoration: none; color: var(--primary); }
.al-feat-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .al-feat { transition: none; } }

/* ---- 7 · SDKs ------------------------------------------------------------------------------------ */
.al-sdks { margin-top: var(--al-gap); }
.al-sdk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-sp-6); }
.al-sdk { display: flex; flex-direction: column; gap: var(--a-sp-5); min-width: 0; }
.al-sdk h3 { font-size: var(--a-fs-lg); display: flex; align-items: baseline; gap: var(--a-sp-4); flex-wrap: wrap; }
.al-sdk-pkg { font-family: var(--al-mono); font-size: var(--a-fs-sm); font-weight: var(--a-fw-medium); color: var(--dim); }
.al-sdk .al-code { flex: 1; }

/* ---- 8 · pricing band ---------------------------------------------------------------------------- */
.al-band {
  position: relative; margin-top: var(--al-gap); padding: clamp(28px, 4vw, 48px); border-radius: calc(var(--radius) + 6px);
  border: 1px solid transparent; background: linear-gradient(var(--al-card), var(--al-card)) padding-box, var(--holo-edge) border-box;
  box-shadow: var(--featured-glow); display: grid; gap: var(--a-sp-7); overflow: hidden; isolation: isolate;
}
.al-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 80% at 100% 0%, var(--al-glow-a), transparent 60%); pointer-events: none; }
.al-band-copy { max-width: 640px; }
.al-band-copy p { margin: 0; color: var(--dim); }
.al-band-cta { display: flex; flex-wrap: wrap; gap: var(--a-sp-5); }
.al-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-sp-5); }
.al-tier { min-width: 0; padding: var(--a-sp-6); border: 1px solid var(--al-edge); border-radius: var(--radius); background: var(--glass); }
.al-tier.is-featured { border-color: var(--primary); }
.al-tier-name { margin: 0 0 var(--a-sp-4); font-weight: var(--a-fw-semibold); display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-sp-4); }
.al-elite { font-size: var(--a-fs-xs); font-weight: var(--a-fw-semibold); padding: 1px var(--a-sp-4); border-radius: var(--a-r-pill); background: var(--aqua-soft); color: var(--aqua-ink); }
.al-tier-p { margin: 0 0 var(--a-sp-5); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--a-sp-2); }
.al-tier-amt { font-size: var(--a-fs-3xl); font-weight: var(--a-fw-semibold); letter-spacing: -.02em; line-height: 1.1; }
.al-tier-per { color: var(--dim); font-size: var(--a-fs-md); }
.al-tier-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-sp-2); color: var(--dim); font-size: var(--a-fs-sm); }
.al-band--closed { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

/* ---- 9 · FAQ ------------------------------------------------------------------------------------- */
.al-faq { max-width: 820px; margin: var(--al-gap) auto 0; }
.al-faq h2 { text-align: center; margin-bottom: var(--a-sp-7); }
.al-faq details { border-bottom: 1px solid var(--al-edge); }
.al-faq details:first-of-type { border-top: 1px solid var(--al-edge); }
.al-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--a-sp-6);
  padding: var(--a-sp-6) var(--a-sp-2); font-weight: var(--a-fw-semibold); font-size: var(--a-fs-lg);
}
.al-faq summary::-webkit-details-marker { display: none; }
.al-faq summary::after { content: '+'; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--al-edge); border-radius: 50%; color: var(--dim); font-weight: var(--a-fw-regular); transition: transform .15s; }
.al-faq details[open] > summary::after { transform: rotate(45deg); }
.al-faq summary:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); border-radius: var(--a-r-md); }
.al-faq details p { margin: 0 var(--a-sp-2) var(--a-sp-5); color: var(--dim); max-width: 70ch; }
.al-faq details p:last-child { margin-bottom: var(--a-sp-6); }
.al-faq details a { font-weight: var(--a-fw-semibold); }
@media (prefers-reduced-motion: reduce) { .al-faq summary::after { transition: none; } }

/* ---- layout steps -------------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .al-stats, .al-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .al-split { grid-template-columns: minmax(0, 1fr); }
  .al-sdk-grid { grid-template-columns: minmax(0, 1fr); }
  .al-band--closed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .al-stats, .al-feat-grid, .al-tiers { grid-template-columns: minmax(0, 1fr); }
  .al-hero-cta .btn { flex: 1 1 100%; }
  .al-band-cta .btn { flex: 1 1 100%; }
  .al-meta > div { grid-template-columns: minmax(0, 1fr); gap: var(--a-sp-2); }
  .al-code pre { padding: var(--a-sp-5) var(--a-sp-6); font-size: var(--a-fs-sm); }
  .al-stat, .al-feat { padding: var(--a-sp-6); }
}
/* 1.2.8 (mobile audit: 91 route chips ran off a phone screen inside the moving strip): on a phone the routes are the still list
   of the no-motion rule above, every route on screen; a long route breaks at its slashes rather than leaving the card. */
@media (max-width: 600px) {
  .al-marquee { -webkit-mask-image: none; mask-image: none; }
  .al-marquee-row { flex-wrap: wrap; overflow: visible; }
  .al-marquee-track { flex-wrap: wrap; flex: 1 1 100%; min-width: 0; animation: none; }   /* flex: none kept it max-content wide */
  .al-marquee-copy { display: none; }
  .al-ep { white-space: normal; max-width: 100%; }
  .al-ep code { overflow-wrap: anywhere; }
}
@media (min-width: 1760px) { body[data-page="api"] { --pub-col: 1440px; } }