/* ===========================================================================
   Design tokens
   =========================================================================== */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #04100a;
  --bg-2: #061811;
  --surface: #0a1e15;
  --surface-2: #0f2a1e;
  --surface-3: #143426;
  --border: #16382a;
  --border-2: #205239;

  --text: #e6f7ee;
  --text-2: #a3c8b4;
  --text-3: #5d8a72;

  --brand: #2ee68a;
  --brand-hover: #5cf0a4;
  --brand-soft: rgba(46, 230, 138, 0.12);
  --brand-glow: rgba(46, 230, 138, 0.35);
  --brand-contrast: #04160c;

  --green: #2ee68a;
  --green-soft: rgba(46, 230, 138, 0.12);
  --amber: #f5c451;
  --amber-soft: rgba(245, 196, 81, 0.14);
  --red: #ff7b72;
  --red-soft: rgba(255, 123, 114, 0.14);
  --blue: #5ec8f5;
  --blue-soft: rgba(94, 200, 245, 0.14);
  --purple: #c084fc;

  --code-bg: #020a06;
  --code-header: #061811;
  --code-text: #d7f2e4;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px rgba(46, 230, 138, 0.14), 0 12px 40px rgba(46, 230, 138, 0.14);

  --topbar-h: 62px;
  --chipnav-h: 56px;
  --maxw: 1180px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
  --bg: #f3faf6;
  --bg-2: #eaf5ee;
  --surface: #ffffff;
  --surface-2: #f1f9f4;
  --surface-3: #e3f2e9;
  --border: #d5e8dd;
  --border-2: #b6d4c3;

  --text: #062018;
  --text-2: #3d6152;
  --text-3: #7a9d8b;

  --brand: #0f8a4d;
  --brand-hover: #0b6d3d;
  --brand-soft: rgba(15, 138, 77, 0.10);
  --brand-glow: rgba(15, 138, 77, 0.20);
  --brand-contrast: #ffffff;

  --green: #0f8a4d;
  --green-soft: rgba(15, 138, 77, 0.10);
  --amber: #b45309;
  --amber-soft: rgba(180, 83, 9, 0.10);
  --red: #d92d20;
  --red-soft: rgba(217, 45, 32, 0.10);
  --blue: #0b72d0;
  --blue-soft: rgba(11, 114, 208, 0.10);

  --shadow-sm: 0 1px 2px rgba(6, 32, 24, 0.06);
  --shadow: 0 8px 24px rgba(6, 32, 24, 0.08);
  --shadow-lg: 0 24px 60px rgba(6, 32, 24, 0.14);
  --shadow-glow: 0 0 0 1px rgba(15, 138, 77, 0.10), 0 12px 40px rgba(15, 138, 77, 0.10);
}

/* ===========================================================================
   Base
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--chipnav-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0 0 1rem; color: var(--text-2); }
p:last-child { margin-bottom: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--text-2); }
li { margin-bottom: 0.4rem; }
code { font-family: var(--font-mono); font-size: 0.86em; }

:not(pre) > code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.12em 0.42em;
  color: var(--text);
  white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 400;
  background: var(--brand); color: var(--brand-contrast);
  padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ===========================================================================
   Ambient background
   =========================================================================== */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.ambient::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 30%, transparent 75%);
  opacity: 0.35;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.4; will-change: transform;
}
.orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--brand), transparent 70%);
  top: -160px; left: -120px;
  animation: drift-1 24s ease-in-out infinite;
}
.orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #10b981, transparent 70%);
  top: 30%; right: -160px;
  animation: drift-2 30s ease-in-out infinite;
  opacity: 0.25;
}
.orb-3 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, #5ec8f5, transparent 70%);
  bottom: -140px; left: 30%;
  animation: drift-3 26s ease-in-out infinite;
  opacity: 0.18;
}
@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(80px, 60px) scale(1.1); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, 80px) scale(0.9); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -60px) scale(1.15); }
}

/* ===========================================================================
   Hero-V big letter
   =========================================================================== */
.hero-v-big {
  font-size: 1.05em;
  font-weight: 900;
  letter-spacing: -0.03em;
}

/* ===========================================================================
   Hero tagline — continuous colour gradient
   =========================================================================== */
@keyframes tagline-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-tagline-text {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--text-2) 0%,
    var(--brand) 25%,
    #5ec8f5 50%,
    #c084fc 75%,
    var(--brand) 88%,
    var(--text-2) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: slide-up 0.9s var(--ease) forwards 0.25s, tagline-gradient 3.5s linear infinite;
  /* override the .line-tagline > span rule below */
  padding-top: 4px;
  font-weight: 600;
  font-size: 1em;
  letter-spacing: -0.02em;
}

/* =========================================================================
   "Developers" glitch word — clean filter+transform, no pseudo-elements
   ========================================================================= */
@keyframes glitch-flicker {
  0%,  78%, 87%, 93%, 100% {
    transform: translate(0, 0) skew(0deg);
    filter: none;
  }
  79% { transform: translate(-5px,  0px) skew(-3deg); filter: brightness(1.8) hue-rotate(30deg) saturate(3); }
  80% { transform: translate( 5px,  1px) skew( 3deg); filter: brightness(0.6) hue-rotate(-40deg); }
  81% { transform: translate(-3px, -1px);              filter: brightness(2.2) hue-rotate(180deg); }
  82% { transform: translate( 3px,  0px);              filter: brightness(1.2) hue-rotate(60deg); }
  83% { transform: translate( 0px,  0px);              filter: none; }
  84% { transform: translate(-4px,  1px) skew(-2deg); filter: brightness(1.6) hue-rotate(-20deg) saturate(2); }
  85% { transform: translate( 4px, -1px) skew( 2deg); filter: brightness(0.8) hue-rotate(90deg); }
  86% { transform: translate( 0px,  0px);              filter: none; }
  88% { transform: translate(-2px,  0px);              filter: brightness(1.4) hue-rotate(15deg); }
  89% { transform: translate( 2px,  0px);              filter: brightness(0.9) hue-rotate(-15deg); }
  90% { transform: translate( 0px,  0px);              filter: none; }
  91% { transform: translate(-3px,  1px);              filter: brightness(2) hue-rotate(200deg) saturate(4); }
  92% { transform: translate( 0px,  0px);              filter: none; }
}

.glitch-word {
  display: inline-block;
  -webkit-text-fill-color: var(--brand);
  color: var(--brand);
  animation: glitch-flicker 6s ease-in-out infinite;
  cursor: default;
}

/* ===========================================================================
   Hero mobile centering
   =========================================================================== */
@media (max-width: 900px) {
  .hero > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hero-sub {
    max-width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta { justify-content: center; }
  .hero-tag { align-self: center; }
  .hero-title .line { text-align: center; }
}

/* ===========================================================================
   Top bar
   =========================================================================== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(16px, 3vw, 32px) 0;
  display: flex; align-items: center; gap: 16px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex; align-items: center; gap: 11px;
  font-weight: 800; letter-spacing: -0.03em; color: var(--text); flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  position: relative;
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #0f8a4d, #2ee68a);
  color: #04160c; font-size: 14px;
  box-shadow: 0 0 0 1px rgba(46, 230, 138, 0.3), 0 6px 18px rgba(46, 230, 138, 0.28);
}
.brand-mark::after {
  content: ""; position: absolute; inset: -2px; border-radius: 12px;
  border: 1px solid var(--brand); opacity: 0.35;
  animation: pulse-ring 3s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.3); opacity: 0; }
}
.brand-name { font-size: 16px; }
.brand-tag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--brand); background: var(--brand-soft);
  border: 1px solid transparent; border-radius: 999px;
  padding: 3px 9px; letter-spacing: 0.02em;
}
.topbar-spacer { flex: 1; }
.search-trigger {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text-3); cursor: pointer;
  font-family: inherit; font-size: 13px;
  transition: all 0.2s var(--ease);
  min-width: 200px;
}
.search-trigger:hover {
  border-color: var(--border-2); color: var(--text-2);
  background: var(--surface-2);
}
.search-trigger .kbd {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px; color: var(--text-3);
}
.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 11px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.icon-btn:hover {
  background: var(--surface-2); color: var(--brand);
  border-color: var(--brand); transform: translateY(-1px);
}
.icon-btn:active { transform: translateY(0) scale(0.96); }

/* ===========================================================================
   Chip navigation
   =========================================================================== */
.chipnav {
  position: fixed; z-index: 190;
  top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  left: 0; right: 0;
  height: var(--chipnav-h);
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.chipnav-track {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  padding: 4px 0; width: 100%;
  scroll-behavior: smooth;
}
.chipnav-track::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px; font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
  transition: all 0.22s var(--ease);
}
.chip:hover {
  color: var(--text); border-color: var(--border-2);
  background: var(--surface-2); text-decoration: none;
  transform: translateY(-1px);
}
.chip.active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand); font-weight: 600;
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.chip i { font-size: 11px; opacity: 0.8; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.chip-dot.get    { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.chip-dot.post   { background: var(--green); box-shadow: 0 0 8px var(--green); }
.chip-divider {
  width: 1px; height: 20px;
  background: var(--border);
  flex-shrink: 0; margin: 0 4px;
}

/* ===========================================================================
   Main / layout
   =========================================================================== */
main {
  position: relative; z-index: 1;
  padding: calc(var(--topbar-h) + var(--chipnav-h) + 20px) clamp(16px, 3vw, 32px) 120px;
}
.wrap { max-width: var(--maxw); margin: 0 auto; }

[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 0.06s; }
[data-reveal][data-delay="2"] { transition-delay: 0.12s; }
[data-reveal][data-delay="3"] { transition-delay: 0.18s; }

/* ===========================================================================
   Hero
   =========================================================================== */
.hero {
  position: relative;
  padding: clamp(18px, 2.4vw, 28px) 0 clamp(30px, 5vw, 54px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 40px; } }

.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--brand); background: var(--brand-soft);
  border: 1px solid rgba(46, 230, 138, 0.25);
  border-radius: 999px; padding: 6px 14px;
  margin-bottom: 22px; letter-spacing: 0.02em;
}
.hero-tag .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 0 var(--brand-glow);
  animation: ping 2s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 var(--brand-glow); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hero-title {
  font-size: clamp(38px, 6vw, 68px);
  letter-spacing: -0.045em; line-height: 1.02;
  font-weight: 800; margin-bottom: 22px;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: slide-up 0.9s var(--ease) forwards;
}
.hero-title .line:nth-child(1) > span { animation-delay: 0.05s; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.15s; }
.hero-title .line:nth-child(3) > span { animation-delay: 0.25s; }
@keyframes slide-up { to { transform: translateY(0); } }

.hero-accent {
  background: linear-gradient(120deg, var(--brand), #5ec8f5, var(--brand));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Caret moved away from "PalestineX" with more margin-left */
.hero-caret {
  display: inline-block; width: 4px; height: 0.85em;
  background: var(--brand); vertical-align: text-bottom;
  margin-left: 16px; border-radius: 2px;
  animation: blink 1.05s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Smaller third line — styling delegated to .hero-tagline-text */
.hero-title .line-tagline > span {
  font-size: 0.5em;
  animation: slide-up 0.9s var(--ease) forwards 0.25s;
}

.hero-sub {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-2); max-width: 48ch; margin-bottom: 30px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-window {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(46, 230, 138, 0.08);
  overflow: hidden;
  animation: float-y 6s ease-in-out infinite;
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-window-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--code-header);
  border-bottom: 1px solid var(--border);
}
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot-r { background: #ff5f56; }
.dot-y { background: #ffbd2e; }
.dot-g { background: #27c93f; }
.hero-window-title {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-3); letter-spacing: 0.05em;
}
.hero-window-body {
  padding: 20px 18px;
  font-family: var(--font-mono); font-size: 12.5px;
  line-height: 1.85; color: var(--code-text);
  min-height: 160px;
}
.hero-window-body .k { color: #c084fc; }
.hero-window-body .s { color: #7dd3fc; }
.hero-window-body .f { color: #fbbf24; }
.hero-window-body .c { color: #5d8a72; }

/* The second block in the hero, added when the format options were documented.
   It sits under the main one with a hairline between them, so the pair reads as
   one continuous terminal rather than two competing cards. The negative top
   margin removes the padding the first block leaves behind, which would
   otherwise double the gap. */
.hero-window-body--sub {
  border-top: 1px solid var(--border);
  padding: 16px 18px;
  min-height: 0;
  background: rgba(20, 153, 84, .04);
}

.typing-cursor {
  display: inline-block; width: 7px; height: 14px;
  background: var(--brand); vertical-align: middle;
  animation: blink 1s steps(2) infinite;
}

/* ===========================================================================
   Buttons — pill style
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.24s var(--ease);
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), #10b981);
  color: var(--brand-contrast);
  box-shadow: 0 8px 24px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-ghost {
  background: var(--surface); border-color: var(--border-2); color: var(--text);
}
.btn-ghost:hover {
  background: var(--surface-2); border-color: var(--brand);
  color: var(--brand); transform: translateY(-2px);
}
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }
.btn .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0); animation: ripple 0.6s ease-out;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ===========================================================================
   Unified section (used by ALL sections — Overview, Quickstart, endpoints, Errors, SDKs)
   =========================================================================== */
.endpoint {
  position: relative;
  margin-bottom: clamp(48px, 8vw, 88px);
  scroll-margin-top: calc(var(--topbar-h) + var(--chipnav-h) + 20px);
}
.endpoint::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), transparent);
  border-radius: 3px;
  opacity: 0.6;
}

.endpoint-header {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.endpoint-num {
  font-family: var(--font-mono);
  font-size: 44px; font-weight: 700;
  color: var(--brand); line-height: 1;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  opacity: 0.9;
}
.endpoint-head-main { flex: 1; min-width: 260px; }
.endpoint-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.method-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid currentColor;
}
.method-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.method-pill.get    { color: var(--blue); background: var(--blue-soft); border-color: rgba(94,200,245,0.3); }
.method-pill.post   { color: var(--green); background: var(--green-soft); border-color: rgba(46,230,138,0.3); }

.endpoint-scope {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--border);
}
.endpoint-scope.brand {
  color: var(--brand);
  border-color: rgba(46, 230, 138, 0.3);
  background: var(--brand-soft);
}
.endpoint-name {
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.endpoint-summary {
  color: var(--text-2); font-size: 15px;
  max-width: 72ch; margin: 0;
}

.route-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--font-mono); font-size: 13px;
  margin-top: 18px;
}
.route-bar::before {
  content: "$";
  color: var(--brand); font-weight: 700; margin-right: 4px;
}
.route-base { color: var(--text-3); }
.route-path { color: var(--brand); font-weight: 600; }
.route-bar .copy-inline { margin-left: auto; }
.alias-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px; font-size: 12.5px; color: var(--text-3);
}

.endpoint-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-top: 32px;
}
@media (min-width: 960px) {
  .endpoint-body {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 40px;
  }
  /* Full-width body modifier — for sections without a side panel */
  .endpoint-body.is-full {
    grid-template-columns: minmax(0, 1fr);
  }
}

.endpoint-side { min-width: 0; }
.endpoint-side .panel + .panel { margin-top: 28px; }
.endpoint-main { min-width: 0; display: flex; flex-direction: column; gap: 28px; }

@media (min-width: 960px) {
  .endpoint-side {
    position: sticky; top: calc(var(--topbar-h) + var(--chipnav-h) + 24px);
    align-self: start; max-height: calc(100vh - var(--topbar-h) - var(--chipnav-h) - 48px);
    overflow-y: auto; padding-right: 8px;
  }
  .endpoint-side::-webkit-scrollbar { width: 6px; }
  .endpoint-side::-webkit-scrollbar-thumb {
    background: var(--border-2); border-radius: 999px;
  }
}

.panel { min-width: 0; }
.panel-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.panel-title i { color: var(--brand); font-size: 11px; }

/* ===========================================================================
   Stat cards
   =========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  overflow: hidden;
  transition: all 0.3s var(--ease);
}
.stat-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, var(--brand-soft), transparent 60%);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-2);
  box-shadow: var(--shadow);
}
.stat-card:hover::before { opacity: 1; }
.stat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  font-size: 14px; margin-bottom: 16px; position: relative;
}
.stat-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 6px; position: relative;
}
.stat-value {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--text); word-break: break-all; position: relative;
}
.stat-note {
  font-size: 12.5px; color: var(--text-3);
  margin-top: 6px; position: relative;
}

/* ===========================================================================
   Quick start steps — full code visible, no scroll
   =========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: all 0.3s var(--ease);
  overflow: hidden;
  min-width: 0;
}
.step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), transparent);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  border-color: var(--border-2);
  box-shadow: var(--shadow);
}
.step:hover::before { opacity: 1; }
.step-num {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(46, 230, 138, 0.2);
}
.step-title {
  font-size: 16px; font-weight: 700;
  margin-bottom: 8px; letter-spacing: -0.02em;
}
.step-desc { font-size: 13.5px; color: var(--text-2); margin-bottom: 16px; }

.step .code { min-width: 0; }
.step .code pre {
  padding: 12px 14px;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.step .code code {
  font-size: 10.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .step .code code { font-size: 11px; }
}
@media (max-width: 640px) {
  .step .code code { font-size: 11.5px; }
}

/* ===========================================================================
   Spec list
   =========================================================================== */
.spec-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.spec-item {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s var(--ease);
}
.spec-item:last-child { border-bottom: 0; }
.spec-item:hover { background: var(--surface-2); }
.spec-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.spec-name {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--brand);
}
.spec-type {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-3); padding: 2px 8px;
  border-radius: 6px; background: var(--surface-2);
  border: 1px solid var(--border);
}
.spec-loc {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--purple); padding: 2px 7px;
  border-radius: 6px; background: rgba(192, 132, 252, 0.12);
  letter-spacing: 0.04em;
}
.spec-req {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--red); padding: 2px 7px;
  border-radius: 999px; background: var(--red-soft);
  margin-left: auto;
}
.spec-opt {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3); padding: 2px 7px;
  border-radius: 999px; background: var(--surface-3);
  margin-left: auto;
}
.spec-desc { font-size: 13.5px; color: var(--text-2); margin: 0; }
.spec-desc code {
  background: var(--surface-2); border-color: var(--border);
  font-size: 0.9em;
}
.spec-enum {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
}
.spec-enum code {
  font-size: 11px; background: var(--surface-2);
  border-color: var(--border);
}

/* ===========================================================================
   Tabs
   =========================================================================== */
.tabs {
  display: inline-flex; gap: 3px; flex-wrap: wrap;
  margin-bottom: 14px;
  background: var(--surface-2);
  padding: 4px; border-radius: 12px;
  border: 1px solid var(--border);
  max-width: 100%;
}
.tab {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  color: var(--text-3);
  transition: all 0.22s var(--ease);
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  background: var(--surface); border-color: var(--border);
  color: var(--text); box-shadow: var(--shadow-sm);
}
.resp-tabs .tab[data-tone="success"][aria-selected="true"] { color: var(--green); }
.resp-tabs .tab[data-tone="warn"][aria-selected="true"]    { color: var(--amber); }
.resp-tabs .tab[data-tone="error"][aria-selected="true"]   { color: var(--red); }
.pane-hidden { display: none; }

/* ===========================================================================
   Code blocks
   =========================================================================== */
.code {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.22s var(--ease);
}
.code:hover { border-color: var(--border-2); }
.code-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 9px 16px;
  background: var(--code-header);
  border-bottom: 1px solid var(--border);
}
.code-lang {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.code-head .spacer { flex: 1; }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; }
.code code {
  font-family: var(--font-mono);
  font-size: 12.5px; line-height: 1.75;
  color: var(--code-text);
}

.copy-btn, .copy-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.copy-btn {
  background: rgba(46, 230, 138, 0.10); color: #9dd8bb;
  border: 1px solid rgba(46, 230, 138, 0.18);
}
.copy-btn:hover { background: rgba(46, 230, 138, 0.22); color: #d7f7e7; }
.copy-inline {
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}
.copy-inline:hover {
  background: var(--surface-3); color: var(--text);
  border-color: var(--border-2);
}
.copy-btn.done, .copy-inline.done {
  background: var(--green-soft); color: var(--green); border-color: transparent;
}

/* ===========================================================================
   Response terminal
   =========================================================================== */
.resp-terminal {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--code-bg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.resp-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--code-header);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11.5px;
}
.resp-bar::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  flex-shrink: 0;
}
.resp-bar.warn::before { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.resp-bar.error::before { background: var(--red); box-shadow: 0 0 8px var(--red); }
.resp-status {
  font-weight: 700; letter-spacing: 0.04em;
  color: var(--green);
}
.resp-bar.warn  .resp-status { color: var(--amber); }
.resp-bar.error .resp-status { color: var(--red); }
.resp-label { color: var(--text-3); }
.resp-time {
  color: var(--text-3); margin-left: auto;
  font-size: 11px;
}
.resp-terminal pre {
  margin: 0; padding: 16px 18px;
  overflow-x: auto;
  max-height: 420px;
}
.resp-terminal code {
  font-family: var(--font-mono);
  font-size: 12.5px; line-height: 1.75;
  color: var(--code-text);
}

/* ===========================================================================
   Callouts
   =========================================================================== */
.callout {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 16px 20px;
  background: var(--surface-2);
  font-size: 13.5px;
  overflow: hidden;
}
.callout::before {
  content: ""; position: absolute;
  top: 0; bottom: 0; left: 0; width: 3px;
}
.callout + .callout { margin-top: 12px; }
.callout-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700;
  color: var(--text); margin-bottom: 6px;
}
.callout p, .callout div { font-size: 13.5px; }
.callout-info  { background: var(--blue-soft); }
.callout-info::before  { background: var(--blue); }
.callout-warn  { background: var(--amber-soft); }
.callout-warn::before  { background: var(--amber); }
.callout-info  .callout-title i { color: var(--blue); }
.callout-warn  .callout-title i { color: var(--amber); }

/* ===========================================================================
   Try-it console
   =========================================================================== */
.console {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 200px at 0% 0%, var(--brand-soft), transparent 55%),
    var(--surface);
  padding: 24px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.console:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-glow);
}
.console-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.console-head .panel-title { margin-bottom: 0; }
.console-badge {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand);
  letter-spacing: 0.06em;
  margin-left: auto;
}
.console-fields {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
}
.field label .tag {
  font-size: 9px; padding: 2px 6px;
  background: var(--red-soft); color: var(--red);
  border-radius: 999px; font-weight: 700;
  letter-spacing: 0.06em;
}
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], select {
  width: 100%; padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s var(--ease);
  min-width: 0;
}
input::placeholder { color: var(--text-3); }
input:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
  background: var(--surface);
}
select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d8a72' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.console-actions {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-top: 20px;
}
.console-hint { font-size: 12px; color: var(--text-3); }
.result { margin-top: 20px; display: none; }
.result.show {
  display: block; animation: fade-up 0.4s var(--ease);
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.result-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
}
.status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.status-ok   { background: var(--green-soft); color: var(--green); }
.status-warn { background: var(--amber-soft); color: var(--amber); }
.status-bad  { background: var(--red-soft);   color: var(--red); }
.result-meta {
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--text-3);
}
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.2); border-top-color: currentColor;
  animation: spin 0.7s linear infinite; display: none;
}
.btn.loading .spinner { display: inline-block; }
.btn.loading i { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================================================================
   SDK cards
   =========================================================================== */
.sdk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.sdk-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: all 0.3s var(--ease);
  overflow: hidden;
}
.sdk-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-2);
  box-shadow: var(--shadow);
}
.sdk-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 22px; margin-bottom: 16px;
  background: var(--brand-soft); color: var(--brand);
}
.sdk-card h3 { font-size: 18px; margin-bottom: 8px; }
.sdk-card p { font-size: 13.5px; margin-bottom: 18px; }

/* ===========================================================================
   Footer
   =========================================================================== */
.footer {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text-3);
}
.footer-brand { display: flex; align-items: center; gap: 10px; }

/* ===========================================================================
   Floating dock
   =========================================================================== */
.dock {
  position: fixed; z-index: 150;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: all 0.35s var(--ease-2);
}
.dock.show {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.dock-btn {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2); cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.24s var(--ease);
  font-size: 15px;
}
.dock-btn:hover {
  color: var(--brand);
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

/* ===========================================================================
   Command palette
   =========================================================================== */
.palette {
  position: fixed; inset: 0; z-index: 400;
  display: none;
  align-items: flex-start; justify-content: center;
  padding-top: clamp(60px, 12vh, 140px);
  background: rgba(2, 12, 7, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade-in 0.2s var(--ease);
}
.palette.show { display: flex; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.palette-panel {
  width: min(560px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop-in 0.3s var(--ease-2);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.palette-input-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.palette-input-wrap i { color: var(--text-3); font-size: 15px; }
.palette-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: inherit; font-size: 15px; color: var(--text); padding: 0;
}
.palette-input::placeholder { color: var(--text-3); }
.palette-results { max-height: 380px; overflow-y: auto; padding: 8px; }
.palette-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 10px;
  color: var(--text-2); cursor: pointer;
  font-size: 14px;
  transition: all 0.15s var(--ease);
  text-decoration: none;
}
.palette-item:hover, .palette-item.focused {
  background: var(--brand-soft); color: var(--brand); text-decoration: none;
}
.palette-item i { width: 18px; text-align: center; font-size: 13px; opacity: 0.7; }
.palette-empty {
  padding: 28px 16px; text-align: center;
  color: var(--text-3); font-size: 13.5px;
}

/* ===========================================================================
   Toast
   =========================================================================== */
.toast {
  position: fixed; z-index: 500;
  left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 30px);
  background: var(--brand); color: var(--brand-contrast);
  font-size: 13.5px; font-weight: 600;
  padding: 11px 20px; border-radius: 999px;
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--brand-soft);
  opacity: 0; pointer-events: none;
  transition: all 0.3s var(--ease-2);
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 720px) {
  .search-trigger { min-width: 0; padding: 8px 10px; }
  .search-trigger span:not(.kbd) { display: none; }
  .search-trigger .kbd { display: none; }
  .brand-tag { display: none; }
  .endpoint-num { font-size: 32px; }
  .console-fields { grid-template-columns: 1fr; }
  .console-actions .btn { width: 100%; }
  .tabs { width: 100%; }
  .route-bar { font-size: 12px; }
  .route-base { display: none; }
  .resp-terminal pre { max-height: 320px; }
  .hero-title .line-tagline > span { font-size: 0.45em; }
}

/* ===========================================================================
   Additions layered on the extracted reference design system.
   These cover the pieces the static reference did not need (scroll-spy
   active state, filter palette, local toast, reveal) plus a hardened
   mobile pass for 320-430px viewports.
   =========================================================================== */

/* The docs page owns its own stacking + overflow context so nothing can either
   escape the page horizontally or sit on top of the site chrome. */
.zv-docs {
    position: relative;
    overflow-x: clip;
    max-width: 100%;
}

/* Every text node is allowed to shrink and wrap. This is what actually prevents
   horizontal overflow, far more reliably than clamping widths. */
.zv-docs h1, .zv-docs h2, .zv-docs h3,
.zv-docs p, .zv-docs li, .zv-docs span, .zv-docs code, .zv-docs a {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Long routes and code must never stretch the layout. */
.route-base, .route-path { overflow-wrap: anywhere; }
.zv-docs pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.zv-docs pre code { display: block; white-space: pre; }

/* ---- Scroll-spy active chip ------------------------------------------- */
.chip.active {
    background: var(--green-soft, rgba(20, 163, 84, 0.14));
    color: var(--green);
    border-color: var(--border-2);
}

/* ---- Scroll reveal ---------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; }
}

/* ---- Local "copied" toast --------------------------------------------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translate(-50%, 12px);
    z-index: 200;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    background: var(--surface-3, #143426);
    border: 1px solid var(--border-2, #205239);
    color: var(--text, #fff);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity 0.15s linear; transform: translate(-50%, 0); }
}

/* ---- Filter palette ---------------------------------------------------- */
.docs-filter {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
}
.docs-filter[hidden] { display: none !important; }

.docs-filter__box {
    position: relative;
    width: min(560px, 100%);
    margin-top: 8vh;
    background: var(--surface, #0a1e15);
    border: 1px solid var(--border-2, #205239);
    border-radius: var(--radius, 12px);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

.docs-filter__box > i {
    position: absolute;
    left: 14px;
    top: 16px;
    color: var(--text-3, #6b8a7c);
    pointer-events: none;
}

.docs-filter__box input {
    width: 100%;
    padding: 14px 42px;
    border: 0;
    border-bottom: 1px solid var(--border, #16382a);
    background: transparent;
    color: var(--text, #fff);
    font-family: var(--font-sans, inherit);
    font-size: 15px;
    outline: none;
}
.docs-filter__box input::placeholder { color: var(--text-3, #6b8a7c); }

.docs-filter__close {
    position: absolute;
    right: 10px;
    top: 11px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-3, #6b8a7c);
    cursor: pointer;
}
.docs-filter__close:hover { background: var(--surface-3); color: var(--text); }

.docs-filter__results { max-height: 46vh; overflow-y: auto; }

.docs-filter__hint {
    margin: 0;
    padding: 16px;
    color: var(--text-3, #6b8a7c);
    font-size: 13px;
}

.docs-filter__hit {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: var(--text, #fff);
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}
.docs-filter__hit:hover { background: var(--surface-3, #143426); }
.docs-filter__num {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--green);
    opacity: 0.8;
}

/* ===========================================================================
   Mobile hardening - 320 / 360 / 375 / 390 / 412 / 430
   =========================================================================== */
@media (max-width: 900px) {
    .zv-docs .hero { grid-template-columns: 1fr; }
    .zv-docs .endpoint-body { grid-template-columns: 1fr; }
    .zv-docs .endpoint-side { order: 2; }
    .zv-docs .endpoint-main { order: 1; }
}

@media (max-width: 640px) {
    /* Tighter page gutters so a 320px screen keeps usable measure. */
    .zv-docs .wrap { padding-inline: 14px; }

    .zv-docs .topbar { padding: 10px 14px; }
    .zv-docs .search-trigger span:not(.kbd) { display: none; }

    /* The chip nav is a horizontal scroller: it must scroll, never wrap into a
       tall block that pushes the first section down. */
    .zv-docs .chipnav-track {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .zv-docs .chipnav-track::-webkit-scrollbar { display: none; }
    .zv-docs .chip { flex: 0 0 auto; white-space: nowrap; }

    .zv-docs .hero-title { font-size: 30px; }
    .zv-docs .hero-sub { font-size: 14px; }

    .zv-docs .endpoint-header { padding: 16px; }
    .zv-docs .route-bar { flex-wrap: wrap; row-gap: 8px; }
    .zv-docs .route-base { flex: 1 1 100%; }

    .zv-docs .panel { padding: 14px; }

    /* Parameter rows stack instead of sitting side by side. */
    .zv-docs .spec-head { flex-wrap: wrap; row-gap: 4px; }
    .zv-docs .spec-desc { font-size: 12.5px; }

    /* Tabs become a scroll strip rather than wrapping to two ragged rows. */
    .zv-docs .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .zv-docs .tabs::-webkit-scrollbar { display: none; }
    .zv-docs .tab { flex: 0 0 auto; white-space: nowrap; }

    .zv-docs pre { font-size: 11.5px; padding: 12px; }
    .zv-docs .resp-bar { flex-wrap: wrap; row-gap: 4px; }
    .zv-docs .resp-time { margin-left: 0; }
}

@media (max-width: 380px) {
    .zv-docs .wrap { padding-inline: 11px; }
    .zv-docs .hero-title { font-size: 26px; }
    .zv-docs pre { font-size: 11px; padding: 10px; }
    .zv-docs .chip { font-size: 12px; padding: 6px 10px; }
    .zv-docs .brand-tag { display: none; }
    .zv-docs .docs-filter { padding: 8px; }
    .zv-docs .docs-filter__box { margin-top: 4vh; }
}

/* The reference design ships a light theme; PalestineX is dark-only, so pin the
   page to the dark palette regardless of the OS preference. */
.zv-docs { color-scheme: dark; }

/* ===========================================================================
   Inline SVG icons
   The page used to load Font Awesome from cdnjs. That stylesheet is on the
   default block-list of most ad blockers, and when it is blocked the icons
   collapse to invisible boxes while the buttons around them stay visible.
   Every icon is now an inline <svg> with `currentColor`, so it inherits the
   surrounding text colour, needs no request, and cannot be blocked.

   The reference design sized icons with `font-size` on an <i> element, which
   does nothing to an SVG, so each place that used to carry a font-size now
   gets an explicit SVG rule instead.
   =========================================================================== */
.zv-docs svg.zv-ico {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.19em;
  /* currentColor comes from the svg element's own stroke/fill attributes. */
}

/* --- brand mark: the real PalestineX lightning bolt, white on the green tile.
       The reference used a dark glyph, which read as a green box at a glance. */
.brand-mark {
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(46, 230, 138, 0.3), 0 6px 18px rgba(46, 230, 138, 0.28);
}
.brand-mark svg.zv-ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

/* --- top bar controls --- */
.search-trigger svg.zv-ico { width: 14px; height: 14px; }
.docs-back svg.zv-ico      { width: 13px; height: 13px; }
.docs-back--lg svg.zv-ico   { width: 14px; height: 14px; }

/* --- chip navigation --- */
.chip svg.zv-ico { width: 12px; height: 12px; opacity: 0.85; }
.chip.active svg.zv-ico { opacity: 1; }

/* --- buttons --- */
.hero-cta .btn svg.zv-ico,
.btn svg.zv-ico { width: 14px; height: 14px; }

/* --- copy controls --- */
.copy-btn svg.zv-ico,
.copy-inline svg.zv-ico { width: 12px; height: 12px; }

/* --- panel / section headings --- */
.panel-title svg.zv-ico { width: 12px; height: 12px; color: var(--brand); }
.endpoint-scope svg.zv-ico { width: 11px; height: 11px; }

/* --- catalogue + recipe furniture --- */
.cat-fresh svg.zv-ico { width: 14px; height: 14px; color: var(--brand); }
.cat-group svg.zv-ico { width: 12px; height: 12px; color: var(--text-3); }

/* --- filter palette (built by api-docs.js) --- */
.docs-filter__box > svg.zv-ico {
  position: absolute;
  left: 14px;
  top: 15px;
  width: 15px;
  height: 15px;
  color: var(--text-3);
  pointer-events: none;
}
.docs-filter__close svg.zv-ico { width: 14px; height: 14px; }

/* ===========================================================================
   Top bar on a phone
   The reference collapsed the search trigger to an icon but left it as a wide
   padded pill, and the Back control collapsed to an empty circle. Both are
   squared off here so the bar reads as three tidy controls: logo, search, back.
   =========================================================================== */
@media (max-width: 720px) {
  .zv-docs .search-trigger {
    min-width: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 11px;
  }
  .zv-docs .search-trigger svg.zv-ico { width: 15px; height: 15px; }
}

/* ===========================================================================
   Hero wordmark on a phone
   "Build with" is set at clamp(38px, 6vw, 68px), which collapses to ~30px on
   a 375px screen and makes the PalestineX line look like a subtitle. The
   wordmark is bumped independently so the brand stays the loudest thing in
   the hero without letting the headline itself overflow.
   =========================================================================== */
@media (max-width: 900px) {
  .hero-accent { font-size: 1.06em; }
}
@media (max-width: 640px) {
  .zv-docs .hero-title { font-size: 30px; }
  /* The wordmark line is enlarged on its own; .hero-accent is reset to 1em so
     the two rules cannot compound into an unpredictable size. */
  .zv-docs .hero-title .line:nth-child(2) { font-size: 1.22em; }
  .hero-accent { font-size: 1em; }
  .hero-v-big  { font-size: 1.08em; }
}
@media (max-width: 380px) {
  .zv-docs .hero-title { font-size: 26px; }
  .zv-docs .hero-title .line:nth-child(2) { font-size: 1.2em; }
}

/* ===========================================================================
   Documentation footer
   Replaces the reference design's single thin rule with a real, structured
   footer: identity + live status, an in-page index, the endpoint reference,
   and a way back into the platform. Four columns on a desktop, two on a
   tablet, one on a phone.
   =========================================================================== */
.docs-foot {
  margin-top: 72px;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(20, 153, 84, 0.07), transparent 70%),
    var(--bg-2, #061811);
}

.docs-foot__inner {
  padding: 44px 0 28px;
}

/* ---- column grid --------------------------------------------------------- */
.docs-foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px 28px;
}

/* ---- brand column -------------------------------------------------------- */
.docs-foot__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
.docs-foot__tile {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, #0f8a4d, #2ee68a);
  box-shadow: 0 0 0 1px rgba(46, 230, 138, 0.28), 0 8px 22px rgba(46, 230, 138, 0.22);
}
.docs-foot__tile svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #04160c;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.docs-foot__name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.docs-foot__blurb {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.65;
  max-width: 34ch;
  margin-bottom: 16px;
}

/* Live status, read from the real /api/v1/status endpoint. */
.docs-foot__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.docs-foot__dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(20, 153, 84, 0.16);
  animation: zv-doc-pulse 2.4s ease-in-out infinite;
}
.docs-foot__status[data-state="error"] .docs-foot__dot {
  background: #ff6b6b;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.16);
  animation: none;
}
@keyframes zv-doc-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

/* ---- link columns -------------------------------------------------------- */
.docs-foot__title {
  margin-bottom: 14px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.docs-foot__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.docs-foot__list li { margin: 0; }
.docs-foot__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--text-3);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.16s var(--ease), transform 0.16s var(--ease);
}
.docs-foot__list a:hover {
  color: var(--brand);
  text-decoration: none;
  transform: translateX(3px);
}
.docs-foot__list a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
.docs-foot__list code {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.docs-foot__verb {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-3);
  flex-shrink: 0;
}
.docs-foot__verb[data-verb="GET"]  { color: var(--blue, #5eb0ff); }
.docs-foot__verb[data-verb="POST"] { color: var(--green, #2ee68a); }

/* ---- bottom bar ---------------------------------------------------------- */
.docs-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 12.5px;
}
.docs-foot__spacer { flex: 1 1 auto; }
.docs-foot__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  opacity: 0.8;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .docs-foot__grid { grid-template-columns: 1fr 1fr; }
  .docs-foot__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .docs-foot__inner { padding: 32px 0 22px; }
  .docs-foot__grid { grid-template-columns: 1fr; gap: 26px; }
  .docs-foot__blurb { max-width: none; }
  .docs-foot__bar { flex-direction: column; align-items: flex-start; }
  .docs-foot__spacer { display: none; }
  .docs-foot__bar .docs-back--lg { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-foot__dot { animation: none; }
  .docs-foot__list a { transition: none; }
  .docs-foot__list a:hover { transform: none; }
}

/* ===========================================================================
   Back-to-Home control
   The API reference renders WITHOUT the site navbar, so the page carries its
   own explicit way back into the app. On a phone the brand lockup would eat
   the whole bar, so the control collapses to an icon below 640px.
   =========================================================================== */
.docs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), transform 0.18s var(--ease);
}
.docs-back:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
  transform: translateX(-2px);
}
.docs-back:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.docs-back__label { display: inline; }

@media (max-width: 640px) {
  .docs-back { width: 34px; padding: 0; justify-content: center; }
  .docs-back__label { display: none; }
  .docs-back:hover { transform: none; }
}

/* A roomier version for the page footer. */
.docs-back--lg {
  height: 42px;
  padding: 0 20px;
  font-size: 14.5px;
}
@media (max-width: 640px) {
  .docs-back--lg { width: auto; padding: 0 16px; }
  .docs-back--lg .docs-back__label { display: inline; }
}

/* ===========================================================================
   Live product catalogue
   Rendered from the same Product::allActive() + formatProduct() code path the
   public /api/v1/products endpoint uses, so the table can never disagree with
   the API. On a phone the table collapses into stacked cards.
   =========================================================================== */
.cat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cat-table th {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cat-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.cat-table tr:last-child td { border-bottom: 0; }
.cat-table tbody tr { transition: background 0.15s var(--ease); }
.cat-table tbody tr:hover { background: var(--surface-2); }

/* The product key is the single most important value on the page: it is what a
   developer passes to /order/buy, so it is rendered in mono and selectable. */
.cat-key {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid rgba(46, 230, 138, 0.22);
  border-radius: 6px;
  padding: 2px 7px;
  user-select: all;
  word-break: break-all;
}
.cat-title { color: var(--text); font-weight: 600; }
.cat-desc {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.5;
  max-width: 46ch;
}
.cat-cat {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}
.cat-price { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.cat-qty { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.cat-stock { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.cat-stock--in { color: var(--brand); font-weight: 600; }
.cat-stock--out { color: var(--text-3); }

/* On a phone the eight-column grid does not fit, so each row becomes a card
   with its own label/value pairs and nothing scrolls sideways. */
@media (max-width: 720px) {
  .cat-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cat-table, .cat-table tbody, .cat-table tr, .cat-table td { display: block; width: 100%; }
  .cat-table tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px 0;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .cat-table td { border: 0; padding: 6px 14px; }
  .cat-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .cat-desc { max-width: none; }
}

/* Category legend above the table. */
.cat-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.cat-group {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
}
.cat-group b { color: var(--text); font-weight: 600; }
.cat-group span { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

/* Small freshness stamp so a reader knows the table is not hand-written. */
.cat-fresh {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 12.5px;
}
.cat-fresh i { color: var(--brand); }

/* Numbered "how do I..." recipe cards. */
.recipe {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.recipe__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.recipe__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--brand-soft);
  border: 1px solid rgba(46, 230, 138, 0.28);
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.recipe__title { color: var(--text); font-weight: 700; font-size: 14px; }
.recipe__body { padding: 14px; }
.recipe__body > p { font-size: 13px; }
.recipe + .recipe { margin-top: 16px; }