/* Sub-page styles. Sits on top of landing.css. Used for non-home pages. */

/* ----- Page hero ----- */
.page-hero { padding: 96px 0 48px; }
@media (max-width: 760px) { .page-hero { padding: 56px 0 32px; } }
.page-hero .crumbs { font-size: 13px; color: var(--ink-tertiary); margin-bottom: 16px; }
.page-hero .crumbs a { color: var(--ink-tertiary); border-bottom: 1px solid transparent; }
.page-hero .crumbs a:hover { color: var(--ink); border-color: var(--hoist-coral); }
.page-hero .crumbs .sep { margin: 0 8px; color: var(--border-medium); }
@media (max-width: 620px) {
  .page-hero .crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
  }

  .page-hero .crumbs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
    margin: -14px -10px;
    border-radius: 8px;
    touch-action: manipulation;
  }

  .page-hero .crumbs .sep {
    margin: 0 2px;
  }
}
.page-hero h1 {
  font: 800 clamp(2rem, 4vw, 3.25rem)/1.08 var(--font-display);
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: 760px;
  text-wrap: balance;
}
.page-hero .lead { margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--ink-secondary); max-width: 680px; }
.page-hero .lead strong { color: var(--ink); font-weight: 600; }
.page-hero .meta { margin-top: 24px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ink-tertiary); }
.page-hero .meta .pill { padding: 4px 10px; border-radius: var(--radius-full); background: var(--surface-secondary); border: 1px solid var(--border-subtle); }

/* ----- Landing v2 legal / trust pages ----- */
.page-hero.legal-hero {
  padding: 88px 0 44px;
  text-align: center;
}

.page-hero.legal-hero .container {
  max-width: 884px;
}

.page-hero.legal-hero .crumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.page-hero.legal-hero .eyebrow {
  margin-bottom: 14px;
}

.page-hero.legal-hero h1 {
  max-width: none;
  margin: 0 auto;
}

.page-hero.legal-hero .accent {
  color: var(--hoist-coral-dark);
}

.page-hero.legal-hero .lead {
  margin-left: auto;
  margin-right: auto;
}

.page-hero.legal-hero .meta {
  justify-content: center;
  gap: 10px;
}

.legal-updated {
  margin: 0 0 22px;
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.legal-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-secondary);
}

.legal-card-grid,
.trust-card-grid,
.subpage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0 36px;
}

.legal-card,
.trust-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: border-color 220ms, box-shadow 220ms var(--ease-out-expo), transform 220ms;
}

.legal-card:hover,
.trust-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.legal-card-kicker,
.trust-card-kicker {
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hoist-coral-dark);
}

.legal-card h3,
.trust-card h3 {
  margin: 12px 0 8px;
  font: 700 18px/1.25 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.legal-card p,
.trust-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.subpage-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subpage-grid .gcard {
  min-height: 132px;
}

.legal-section-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 14px;
}

.article .legal-section-list {
  margin-left: 0;
}

.article .legal-section-list li {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  list-style: none;
}

.legal-final {
  margin: 56px 0 0;
  padding: 34px;
  border-radius: var(--radius-lg);
  background: var(--hoist-coral-dark);
  color: #fff;
}

.legal-final h2 {
  margin: 8px 0 0;
  color: #fff;
  font: 800 clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--font-display);
  letter-spacing: -0.03em;
}

.article .legal-final h2 {
  margin: 8px 0 0;
  color: #fff;
  font: 800 clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--font-display);
  letter-spacing: -0.03em;
}

.legal-final p {
  max-width: 680px;
  color: rgba(255,255,255,0.78);
}

.article .legal-final p {
  max-width: 680px;
  color: rgba(255,255,255,0.78);
}

.legal-final .eyebrow {
  color: rgba(255,255,255,0.74);
}

.legal-final .hero-cta {
  margin-top: 22px;
}

.legal-final .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.35);
  background: transparent;
}

.legal-final .btn-ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.65);
}

.article .legal-final .btn-primary {
  color: #fff;
  border-bottom: 0;
  padding: 14px 22px;
}

.article .legal-final .btn-ghost {
  color: #fff;
  border-bottom: 0;
  padding: 14px 22px;
}

/* ----- Standalone docs reference layout ----- */
body.docs-reference-body {
  --docs-accent: #ff5a73;
  --docs-accent-strong: #de2845;
  --docs-accent-soft: rgba(255, 90, 115, 0.14);
  --docs-bg: #0c0e13;
  --docs-bg-soft: #11141b;
  --docs-panel: #141821;
  --docs-panel-2: #181d27;
  --docs-code: #0a0c11;
  --docs-fg: #eceef2;
  --docs-fg-2: #a6acb8;
  --docs-fg-3: #6e7686;
  --docs-border: #20252f;
  --docs-border-2: #2a313d;
  --docs-green: #56c98a;
  --docs-blue: #6aa6ff;
  --docs-sidebar-w: 270px;
  --docs-toc-w: 220px;
  --docs-topbar-h: 56px;
  background: var(--docs-bg);
  color: var(--docs-fg);
  font-size: 15px;
  line-height: 1.65;
}

.docs-reference-body a {
  color: inherit;
  text-decoration: none;
}

.docs-reference-body ::selection {
  background: var(--docs-accent-soft);
}

.dx-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--docs-topbar-h);
  border-bottom: 1px solid var(--docs-border);
  background: rgba(12, 14, 19, 0.88);
  padding: 0 22px;
  backdrop-filter: blur(12px);
}

.dx-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--docs-fg);
  font-weight: 800;
}

.dx-brand img {
  width: 83px;
  height: auto;
  filter: invert(1) brightness(1.6);
}

.dx-brand .docs-tag {
  border: 1px solid var(--docs-accent-soft);
  border-radius: 5px;
  color: var(--docs-accent);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dx-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.dx-tb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--docs-fg-2);
  padding: 0 13px;
  font-size: 13.5px;
  font-weight: 600;
}

.dx-tb:hover {
  background: var(--docs-panel);
  color: var(--docs-fg);
}

.dx-tb.solid {
  background: var(--docs-accent-strong);
  color: #fff;
}

.dx-shell {
  display: grid;
  grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr) var(--docs-toc-w);
  align-items: start;
}

.dx-side {
  position: sticky;
  top: var(--docs-topbar-h);
  height: calc(100vh - var(--docs-topbar-h));
  overflow-y: auto;
  border-right: 1px solid var(--docs-border);
  padding: 26px 16px 40px;
}

.dx-side-group {
  margin-bottom: 24px;
}

.dx-side-label,
.dx-eyebrow,
.dx-toc-label {
  color: var(--docs-fg-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dx-side-label {
  padding: 0 10px 8px;
}

.dx-link {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border-radius: 7px;
  color: var(--docs-fg-2);
  padding: 7px 10px;
  font-size: 13.5px;
  font-weight: 600;
}

.dx-link:hover,
.dx-link.active {
  background: var(--docs-accent-soft);
  color: var(--docs-accent);
}

.dx-main {
  min-width: 0;
  max-width: 860px;
  padding: 44px 56px 120px;
}

.dx-eyebrow {
  margin-bottom: 14px;
  color: var(--docs-accent);
}

.dx-main h1 {
  margin: 0 0 14px;
  color: var(--docs-fg);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}

.dx-lede {
  max-width: 700px;
  margin: 0 0 18px;
  color: var(--docs-fg-2);
  font-size: 17px;
}

.dx-main h2 {
  margin: 46px 0 14px;
  color: var(--docs-fg);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0;
  scroll-margin-top: 72px;
}

.dx-main h3 {
  margin: 28px 0 10px;
  color: var(--docs-fg);
  font-size: 17px;
}

.dx-main p,
.dx-main li {
  color: var(--docs-fg-2);
}

.dx-main strong {
  color: var(--docs-fg);
}

.dx-main ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.dx-main code {
  border: 1px solid var(--docs-border);
  border-radius: 5px;
  background: var(--docs-panel-2);
  color: var(--docs-fg);
  padding: 1px 6px;
  font-family: var(--mono, monospace);
  font-size: 0.88em;
}

.dx-note {
  display: flex;
  gap: 12px;
  margin: 0 0 20px;
  border: 1px solid var(--docs-border-2);
  border-radius: 8px;
  background: var(--docs-panel);
  color: var(--docs-fg-2);
  padding: 15px 17px;
  font-size: 14px;
}

.dx-note .ic {
  color: var(--docs-accent);
  font-weight: 800;
}

.dx-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 24px;
}

.dx-card {
  min-width: 0;
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  background: var(--docs-panel);
  padding: 18px 20px;
}

.dx-card:hover {
  border-color: var(--docs-border-2);
}

.dx-card h3 {
  margin: 0 0 5px;
  font-size: 15px;
}

.dx-card p {
  margin: 0;
  color: var(--docs-fg-3);
  font-size: 13px;
  line-height: 1.5;
}

.dx-card .ic-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  border-radius: 8px;
  background: var(--docs-accent-soft);
  color: var(--docs-accent);
  margin-bottom: 12px;
  font-weight: 800;
}

.dx-endpoint,
.dx-code {
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  background: var(--docs-code);
}

.dx-endpoint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 16px;
}

.dx-endpoint .method {
  flex: 0 0 auto;
  border-radius: 6px;
  background: rgba(86, 201, 138, 0.12);
  color: var(--docs-green);
  padding: 3px 9px;
  font-family: var(--mono, monospace);
  font-size: 12px;
  font-weight: 800;
}

.dx-endpoint .method.blue {
  background: rgba(106, 166, 255, 0.12);
  color: var(--docs-blue);
}

.dx-endpoint .url {
  min-width: 0;
  color: var(--docs-fg);
  font-family: var(--mono, monospace);
  font-size: 13.5px;
  overflow-x: auto;
  white-space: nowrap;
}

.dx-code {
  margin: 0 0 22px;
  overflow: hidden;
}

.dx-code-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  border-bottom: 1px solid var(--docs-border);
  background: var(--docs-panel);
  color: var(--docs-fg-3);
  padding: 9px 14px;
  font-family: var(--mono, monospace);
  font-size: 12px;
}

.dx-code-head > span:first-child,
.docs-code-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.docs-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.82);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background 180ms, border-color 180ms, color 180ms, transform 120ms;
}

.docs-copy-button:hover {
  border-color: rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.docs-copy-button:active {
  transform: translateY(1px);
}

.docs-copy-button:focus-visible {
  outline: 2px solid var(--docs-accent, var(--hoist-coral));
  outline-offset: 2px;
}

.docs-copy-button:disabled {
  cursor: default;
  opacity: 0.84;
}

.docs-copy-button[data-copy-state="copied"] {
  border-color: rgba(86, 201, 138, 0.45);
  background: rgba(86, 201, 138, 0.14);
  color: var(--docs-green, #166534);
}

.docs-copy-button[data-copy-state="failed"] {
  border-color: rgba(255, 90, 115, 0.45);
  background: rgba(255, 90, 115, 0.14);
  color: var(--docs-accent, var(--hoist-coral-dark));
}

.docs-copy-status {
  min-width: 0;
  color: var(--docs-fg-3);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.dx-copy-button {
  margin-left: auto;
  flex: 0 0 auto;
}

.dx-code-head .docs-copy-status {
  color: var(--docs-fg-3);
}

.dx-code pre {
  margin: 0;
  overflow-x: auto;
  color: #d6dae2;
  padding: 16px 18px;
  font-family: var(--mono, monospace);
  font-size: 13px;
  line-height: 1.7;
}

.dx-table {
  width: 100%;
  margin: 0 0 24px;
  border: 1px solid var(--docs-border);
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  background: var(--docs-panel);
}

.dx-table th,
.dx-table td {
  border-bottom: 1px solid var(--docs-border);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.dx-table th {
  color: var(--docs-fg);
  font-size: 12px;
  text-transform: uppercase;
}

.dx-table td {
  color: var(--docs-fg-2);
}

.dx-toc {
  position: sticky;
  top: var(--docs-topbar-h);
  height: calc(100vh - var(--docs-topbar-h));
  overflow-y: auto;
  padding: 48px 22px 40px;
}

.dx-toc-label {
  margin-bottom: 12px;
}

.dx-toc a {
  display: block;
  border-left: 2px solid var(--docs-border);
  color: var(--docs-fg-3);
  padding: 5px 0 5px 12px;
  font-size: 13px;
}

.dx-toc a:hover,
.dx-toc a.active {
  border-left-color: var(--docs-accent);
  color: var(--docs-accent);
}

.dx-pager {
  display: flex;
  gap: 14px;
  margin-top: 56px;
}

.dx-pager a {
  flex: 1;
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  padding: 16px 18px;
}

.dx-pager a:hover {
  border-color: var(--docs-border-2);
}

.dx-pager .pg-dir {
  margin-bottom: 4px;
  color: var(--docs-fg-3);
  font-size: 12px;
}

.dx-pager .pg-title {
  color: var(--docs-fg);
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 1140px) {
  .dx-shell {
    grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr);
  }

  .dx-toc {
    display: none;
  }
}

@media (max-width: 820px) {
  .dx-top {
    gap: 10px;
    padding: 0 16px;
  }

  .dx-tb:not(.solid) {
    display: none;
  }

  .dx-shell {
    grid-template-columns: 1fr;
  }

  .dx-side {
    display: none;
  }

  .dx-main {
    max-width: none;
    padding: 32px 24px 80px;
  }

  .dx-main h1 {
    font-size: 32px;
  }
}

@media (max-width: 620px) {
  .dx-cards {
    grid-template-columns: 1fr;
  }

  .dx-endpoint {
    align-items: flex-start;
    flex-direction: column;
  }

  .dx-endpoint .url {
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dx-code pre {
    overflow-x: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .dx-table,
  .dx-table thead,
  .dx-table tbody,
  .dx-table tr,
  .dx-table th,
  .dx-table td {
    display: block;
  }

  .dx-table thead {
    display: none;
  }

  .dx-table tr {
    border-bottom: 1px solid var(--docs-border);
  }

  .dx-table td {
    display: grid;
    grid-template-columns: minmax(96px, 36%) 1fr;
    gap: 10px;
  }

  .dx-table td::before {
    content: attr(data-label);
    color: var(--docs-fg-3);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }
}

@media (max-width: 860px) {
  .legal-card-grid,
  .trust-card-grid,
  .subpage-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .page-hero.legal-hero {
    padding: 52px 0 30px;
  }

  .page-hero.legal-hero .crumbs a {
    margin: 0;
  }

  .legal-card,
  .trust-card,
  .legal-final {
    padding: 18px;
  }

  .legal-final .hero-cta {
    align-items: stretch;
  }

  .legal-final .btn {
    width: 100%;
    white-space: normal;
  }
}

/* ----- Article / reading column ----- */
.article { padding: 0 0 96px; }
.article-inner { width: 100%; max-width: 760px; margin: 0 auto; min-width: 0; }
.article-inner.wide { max-width: 960px; }
.article h2 { margin: 56px 0 16px; font: 700 26px/1.2 var(--font-display); letter-spacing: -0.025em; color: var(--ink); scroll-margin-top: 80px; text-wrap: balance; }
.article h3 { margin: 36px 0 12px; font: 700 19px/1.3 var(--font-display); letter-spacing: -0.02em; color: var(--ink); scroll-margin-top: 80px; }
.article h4 { margin: 24px 0 8px; font: 600 16px/1.4 var(--font-display); color: var(--ink); }
.article p { margin: 12px 0; font-size: 16px; line-height: 1.65; color: var(--ink-secondary); }
.article p strong { color: var(--ink); font-weight: 600; }
.article a { color: var(--ink); border-bottom: 1px solid var(--hoist-coral); padding-bottom: 1px; transition: background 200ms; }
.article a:hover { background: var(--hoist-coral-subtle); }
.article ul, .article ol { margin: 14px 0 14px 22px; }
.article ul li, .article ol li { font-size: 16px; line-height: 1.65; color: var(--ink-secondary); margin: 6px 0; }
.article ul li::marker { color: var(--hoist-coral); }
.article code { font-family: var(--font-mono); font-size: 13.5px; background: var(--surface-tertiary); padding: 2px 6px; border-radius: 4px; color: var(--ink); }
.article :not(pre) > code { overflow-wrap: anywhere; }
.article pre { max-width: 100%; margin: 20px 0; padding: 16px 18px; background: #0d1117; color: rgba(255,255,255,0.92); border-radius: var(--radius-md); overflow-x: auto; white-space: pre; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; font: 500 13px/1.6 var(--font-mono); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.38) transparent; box-shadow: inset -18px 0 16px -20px rgba(255,255,255,0.62); }
.article pre::-webkit-scrollbar, .sandbox-result::-webkit-scrollbar { height: 8px; }
.article pre::-webkit-scrollbar-track { background: transparent; }
.article pre::-webkit-scrollbar-thumb, .sandbox-result::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.36); border-radius: 999px; }
.article pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.article blockquote { margin: 24px 0; padding: 14px 20px; border-left: 3px solid var(--hoist-coral); background: var(--surface-secondary); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; color: var(--ink-secondary); }
.article hr { margin: 48px 0; border: 0; height: 1px; background: var(--border-subtle); }

/* ----- Tables (comparisons, pricing grids, glossary indexes) ----- */
.tbl, .data-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; }
.tbl th, .tbl td, .data-table th, .data-table td { min-width: 128px; padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: top; color: var(--ink-secondary); }
.tbl th, .data-table th { font-weight: 600; color: var(--ink); background: var(--surface-secondary); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.tbl td strong, .data-table td strong { color: var(--ink); font-weight: 600; }
.tbl td:last-child, .tbl th:last-child, .data-table td:last-child, .data-table th:last-child { min-width: 220px; }
.tbl .check { color: var(--match-strong); font-weight: 700; }
.tbl .cross { color: var(--ink-tertiary); font-weight: 500; }
.tbl .partial { color: var(--match-fair); font-weight: 600; }
.tbl-wrap, .table-scroll { position: relative; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: linear-gradient(to right, #fff 0, #fff calc(100% - 34px), #eef1f4 100%); scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(17,19,24,0.30) transparent; box-shadow: inset -30px 0 22px -24px rgba(17,19,24,0.72); }
.tbl-wrap::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { height: 8px; }
.tbl-wrap::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track { background: transparent; }
.tbl-wrap::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb { background: rgba(17,19,24,0.24); border-radius: 999px; }
.tbl-wrap .tbl, .table-scroll .data-table { min-width: 680px; margin: 0; }
.tbl-wrap .tbl th:first-child, .tbl-wrap .tbl td:first-child, .table-scroll .data-table th:first-child, .table-scroll .data-table td:first-child { padding-left: 18px; }
.tbl-wrap .tbl th:last-child, .tbl-wrap .tbl td:last-child, .table-scroll .data-table th:last-child, .table-scroll .data-table td:last-child { padding-right: 18px; }
.tbl-wrap code, .table-scroll code { white-space: nowrap; }
@media (max-width: 620px) {
  .tbl, .data-table { font-size: 13.5px; }
  .tbl th, .tbl td, .data-table th, .data-table td { min-width: 116px; padding: 12px 10px; }
  .tbl td:last-child, .tbl th:last-child, .data-table td:last-child, .data-table th:last-child { min-width: 210px; }
  .tbl-wrap .tbl { min-width: 640px; }
  .table-scroll .data-table { min-width: 760px; }
}

@media (max-width: 980px) {
  .article pre {
    padding: 14px 16px 18px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.65;
  }

  .article pre code {
    display: block;
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .article pre {
    overflow-x: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-shadow: none;
  }

  .article pre code {
    white-space: inherit;
    overflow-wrap: anywhere;
  }

  .article h3 + .tbl-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .article h3 + .tbl-wrap .tbl { display: block; min-width: 0; border-collapse: separate; font-size: 14px; }
  .article h3 + .tbl-wrap thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .article h3 + .tbl-wrap tbody { display: block; }
  .article h3 + .tbl-wrap tr { display: block; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: 8px; background: #fff; }
  .article h3 + .tbl-wrap td { display: grid; grid-template-columns: minmax(84px, 32%) 1fr; gap: 10px; align-items: start; min-width: 0; padding: 8px 0; border-bottom: 0; color: var(--ink-secondary); overflow-wrap: anywhere; }
  .article h3 + .tbl-wrap td + td { border-top: 1px solid var(--border-subtle); }
  .article h3 + .tbl-wrap td::before { font: 700 11px/1.4 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-tertiary); }
  .article h3 + .tbl-wrap td:nth-child(1)::before { content: "Name"; }
  .article h3 + .tbl-wrap td:nth-child(2)::before { content: "Type"; }
  .article h3 + .tbl-wrap td:nth-child(3)::before { content: "Description"; }

  .article .mcp-parameter-table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .article .mcp-parameter-table-wrap .mcp-parameter-table { display: block; min-width: 0; border-collapse: separate; font-size: 14px; }
  .article .mcp-parameter-table-wrap thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .article .mcp-parameter-table-wrap tbody { display: block; }
  .article .mcp-parameter-table-wrap tr { display: block; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: 8px; background: #fff; }
  .article .mcp-parameter-table-wrap .mcp-parameter-table td,
  .article .mcp-parameter-table-wrap .mcp-parameter-table td:first-child,
  .article .mcp-parameter-table-wrap .mcp-parameter-table td:last-child { display: grid; grid-template-columns: minmax(84px, 32%) 1fr; gap: 10px; align-items: start; min-width: 0; padding: 8px 0; border-bottom: 0; color: var(--ink-secondary); background: transparent; font-weight: 400; overflow-wrap: anywhere; }
  .article .mcp-parameter-table-wrap td + td { border-top: 1px solid var(--border-subtle); }
  .article .mcp-parameter-table-wrap td::before { font: 700 11px/1.4 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-tertiary); }
  .article .mcp-parameter-table-wrap td:nth-child(1)::before { content: "Name"; }
  .article .mcp-parameter-table-wrap td:nth-child(2)::before { content: "Type"; }
  .article .mcp-parameter-table-wrap td:nth-child(3)::before { content: "Description"; }
}

@media (max-width: 380px) {
  .article h3 + .tbl-wrap td { grid-template-columns: 1fr; gap: 4px; }
  .article .mcp-parameter-table-wrap .mcp-parameter-table td,
  .article .mcp-parameter-table-wrap .mcp-parameter-table td:first-child,
  .article .mcp-parameter-table-wrap .mcp-parameter-table td:last-child { grid-template-columns: 1fr; gap: 4px; }
}

/* ----- Supported-hosts matrix ----- */
.host-matrix-scroll {
  margin: 24px 0 32px;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.host-matrix {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  font-size: 14px;
}
.host-matrix th,
.host-matrix td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-secondary);
}
.host-matrix th {
  background: var(--surface-secondary);
  color: var(--ink);
  font: 700 12px/1.2 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.host-matrix tr:last-child td { border-bottom: 0; }
.host-matrix td:first-child { width: 18%; color: var(--ink); }
.host-matrix td:nth-child(2) { width: 18%; }
.host-matrix td:nth-child(3) { width: 22%; }
.host-matrix td:nth-child(4) { width: 16%; }
.host-matrix td:last-child { width: 26%; }
.host-matrix a { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .host-matrix-scroll {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .host-matrix {
    display: block;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }
  .host-matrix thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .host-matrix tbody,
  .host-matrix tr,
  .host-matrix td {
    display: block;
    width: 100%;
  }
  .host-matrix tr {
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: #fff;
  }
  .host-matrix td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 9px 0;
    border: 0;
    font-size: 14px;
    line-height: 1.5;
  }
  .host-matrix td:first-child,
  .host-matrix td:nth-child(2),
  .host-matrix td:nth-child(3),
  .host-matrix td:nth-child(4),
  .host-matrix td:last-child {
    width: 100%;
  }
  .host-matrix td:first-child { padding-top: 0; }
  .host-matrix td:last-child { padding-bottom: 0; }
  .host-matrix td::before {
    content: attr(data-label);
    color: var(--ink-tertiary);
    font: 700 11px/1.35 var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 430px) {
  .host-matrix tr { padding: 14px; }
  .host-matrix td {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
  }
}

/* ----- Bottom CTA blocks ----- */
.cta-block .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.cta-block .cta-row .btn {
  padding: 12px 18px;
  font-size: 14px;
}
.cta-block .cta-row .btn-outline {
  color: var(--ink);
  border: 1px solid var(--border-default);
  background: #fff;
}
.cta-block .cta-row .btn-outline:hover {
  background: var(--surface-secondary);
  border-color: var(--ink);
}
@media (max-width: 520px) {
  .cta-block .cta-row {
    align-items: stretch;
  }
  .cta-block .cta-row .btn {
    width: 100%;
    white-space: normal;
  }
}

/* ----- Callouts ----- */
.callout { margin: 24px 0; padding: 18px 20px; border-radius: var(--radius-md); background: var(--surface-secondary); border-left: 4px solid var(--hoist-coral); font-size: 15px; line-height: 1.6; color: var(--ink-secondary); }
.callout strong { color: var(--ink); }
.callout.warn { border-left-color: var(--status-warn-icon); background: var(--status-warn-bg); color: var(--status-warn-fg); }
.callout.info { border-left-color: var(--status-info-icon); background: var(--status-info-bg); color: var(--status-info-fg); }
.callout.success { border-left-color: var(--status-success-icon); background: var(--status-success-bg); color: var(--status-success-fg); }

/* ----- Card grids (used on /docs/mcp, /for, /compare indices, /glossary) ----- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; }
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .card-grid.two { grid-template-columns: 1fr; } }
.gcard { padding: 22px 22px 28px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: #fff; transition: border-color 250ms, box-shadow 250ms var(--ease-out-expo), transform 250ms; display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
.gcard:hover,
.gcard:focus-within { border-color: var(--border-default); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.gcard .label { font: 700 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--hoist-coral); }
.gcard h3 { font: 700 17px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--ink); margin: 0; }
.gcard p { font-size: 13.5px; line-height: 1.5; color: var(--ink-tertiary); margin: 0; }
.gcard .more { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.gcard .more::after { content: "→"; transition: transform 200ms; }
.gcard:hover .more::after { transform: translateX(2px); }

@media (max-width: 620px) {
  .gcard .more {
    align-self: flex-start;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0 14px;
    margin-left: -14px;
    margin-bottom: 4px;
    border-radius: 8px;
    touch-action: manipulation;
  }
}

/* ----- Anchor headings ----- */
.faq-page h3 { display: flex; align-items: baseline; gap: 12px; scroll-margin-top: 80px; }
.faq-page h3 .anchor-num { font: 700 12px/1 var(--font-mono); color: var(--hoist-coral-dark); flex-shrink: 0; padding-top: 2px; }
.faq-page .group { margin-top: 56px; }
.faq-page .group h2 { font-size: 22px; margin-bottom: 8px; }
.faq-page .group .group-desc { font-size: 14px; color: var(--ink-tertiary); margin-bottom: 16px; }

/* ----- Sandbox interactive ----- */
.sandbox-runner { margin: 32px 0; padding: 28px; max-width: 100%; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); }
.sandbox-runner * { min-width: 0; }
.sandbox-runner label { display: block; font: 600 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-tertiary); margin-bottom: 8px; }
.sandbox-runner select, .sandbox-runner input { width: 100%; min-width: 0; max-width: 100%; padding: 12px 14px; font: 400 15px/1.4 var(--font-mono); background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--ink); outline: 0; transition: border-color 150ms, box-shadow 150ms; }
.sandbox-runner select:focus, .sandbox-runner input:focus { border-color: var(--hoist-coral); box-shadow: 0 0 0 3px var(--hoist-coral-muted); }
.sandbox-runner .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.sandbox-runner .row > * { min-width: 0; }
.sandbox-runner .row > div { min-width: 0; }
.sandbox-runner .fixture-target-summary { margin: 10px 0 0; padding: 10px 12px; background: var(--surface-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font: 500 13px/1.45 var(--font-display); color: var(--ink-secondary); overflow-wrap: anywhere; }
.sandbox-runner .fixture-target-summary strong { display: block; margin-bottom: 4px; font: 700 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-tertiary); }
.sandbox-runner .fixture-target-summary span { display: block; }
.sandbox-runner .fixture-target-meta { margin-top: 2px; font: 500 12.5px/1.45 var(--font-mono); color: var(--ink-tertiary); }
.sandbox-runner .run-btn { width: 100%; padding: 14px; margin-top: 8px; }
.sandbox-code,
.sandbox-result { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.sandbox-result { margin-top: 20px; padding: 20px; max-width: 100%; background: #0d1117; color: rgba(255,255,255,0.92); border-radius: var(--radius-md); font: 500 13px/1.65 var(--font-mono); overflow-x: auto; }
.sandbox-result .k { color: #ff7b72; }
.sandbox-result .s { color: #a5d6ff; }
.sandbox-result .c { color: #7d8590; }
@media (max-width: 620px) {
  .sandbox-runner { padding: 20px; border-radius: var(--radius-lg); }
  .sandbox-runner .row { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .sandbox-runner { margin: 24px 0; padding: 16px; }
  .sandbox-runner select, .sandbox-runner input { padding: 11px 12px; font-size: 13px; line-height: 1.35; }
  .sandbox-runner .run-btn { padding: 12px; }
  .sandbox-code,
  .sandbox-result { padding: 14px; font-size: 12px; line-height: 1.6; }
}

.docs-code-wrap {
  max-width: 100%;
  margin: 20px 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  background: #0d1117;
  overflow: hidden;
}

.docs-code-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: #161b22;
  color: rgba(255,255,255,0.58);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.docs-code-title {
  flex: 1 1 auto;
}

.article .docs-code-wrap pre {
  margin: 0;
  border-radius: 0;
  box-shadow: inset -18px 0 16px -20px rgba(255,255,255,0.62);
}

.article .docs-copy-status {
  color: rgba(255,255,255,0.52);
}

.article .docs-copy-button[data-copy-state="copied"] {
  color: #4ade80;
}

.article .docs-copy-button[data-copy-state="failed"] {
  color: #ff8ba0;
}

/* ----- API access intake form ----- */
.intake-form { margin: 24px 0 40px; padding: 24px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-card); }
.intake-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.intake-field { display: flex; flex-direction: column; gap: 8px; font: 600 13px/1.3 var(--font-display); color: var(--ink); }
.intake-field.full { grid-column: 1 / -1; }
.intake-field input, .intake-field select, .intake-field textarea { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--ink); font: 400 15px/1.4 var(--font-display); outline: 0; transition: border-color 150ms, box-shadow 150ms; }
.intake-field textarea { min-height: 132px; resize: vertical; }
.intake-field input:focus, .intake-field select:focus, .intake-field textarea:focus { border-color: var(--hoist-coral); box-shadow: 0 0 0 3px var(--hoist-coral-muted); }
.intake-submit { margin-top: 18px; width: auto; }
.intake-note { color: var(--ink-tertiary); font-size: 13.5px; line-height: 1.5; margin-top: 12px; }
@media (max-width: 620px) {
  .intake-form { padding: 18px; }
  .intake-grid { grid-template-columns: 1fr; }
  .intake-submit { width: 100%; }
}
.intake-recovery { margin-top: 20px; padding: 18px; border: 1px solid var(--border-subtle); border-left: 4px solid var(--status-success-icon); border-radius: var(--radius-md); background: var(--status-success-bg); }
.intake-recovery[hidden] { display: none; }
.intake-recovery h3 { margin: 0 0 8px; font: 700 18px/1.25 var(--font-display); letter-spacing: 0; color: var(--ink); }
.intake-recovery p { margin: 8px 0 14px; font-size: 14.5px; line-height: 1.55; }
.intake-copy { min-height: 156px; font-family: var(--font-mono); }
.intake-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.article .intake-actions a { border-bottom: 0; }
@media (max-width: 520px) {
  .intake-actions .run-btn,
  .intake-actions .btn { width: 100%; }
}

/* ----- Page TOC (sticky on side, used on long pages like /trust, /docs) ----- */
.with-toc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: flex-start; }
.with-toc > * { min-width: 0; }
@media (max-width: 980px) { .with-toc { grid-template-columns: 1fr; gap: 24px; } }
.toc { position: sticky; top: 88px; padding: 8px 0 8px 16px; border-left: 1px solid var(--border-subtle); font-size: 13px; }
@media (max-width: 980px) { .toc { position: static; box-sizing: border-box; max-width: 100%; padding: 16px; background: var(--surface-secondary); border-radius: var(--radius-md); border: 0; overflow-wrap: anywhere; } }
.toc .label { font: 700 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-tertiary); margin-bottom: 12px; display: block; }
.toc ul { display: flex; flex-direction: column; gap: 8px; }
.toc a { color: var(--ink-secondary); display: block; padding: 2px 0; transition: color 200ms; }
.toc a:hover { color: var(--hoist-coral-dark); }

/* ----- Auto-injected TOC (ha-hdj) ----- */
/* Active link highlight */
.toc a.toc-active { color: var(--hoist-coral-dark); font-weight: 600; }
/* h3 sub-items are indented */
.toc li.toc-sub a { padding-left: 12px; font-size: 12px; color: var(--ink-tertiary); }
.toc li.toc-sub a:hover, .toc li.toc-sub a.toc-active { color: var(--hoist-coral-dark); }

/* Mobile collapsible "Jump to..." block (ha-hdj) */
.toc-mobile { margin-bottom: 32px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-secondary); overflow: hidden; display: none; }
@media (max-width: 768px) { .toc-mobile { display: block; } }
.toc-mobile summary { padding: 14px 18px; font: 600 14px/1.4 var(--font-display); color: var(--ink); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; transition: background 180ms, color 180ms; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary:hover { background: rgba(222, 40, 69, 0.06); }
.toc-mobile summary::after { content: '+'; font-size: 18px; color: var(--ink-tertiary); transition: transform 200ms; }
.toc-mobile[open] summary::after { transform: rotate(45deg); }
.toc-mobile ul { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 10px; animation: menuPanelIn 180ms var(--ease-out-expo) both; }
.toc-mobile li { list-style: none; }
.toc-mobile li.toc-sub { padding-left: 14px; }
.toc-mobile a { font-size: 14px; color: var(--ink-secondary); display: block; padding: 4px 0; border-bottom: 1px solid transparent; }
.toc-mobile a:hover { color: var(--hoist-coral-dark); }
@media (max-width: 620px) {
  .toc-mobile a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
  }

  .article h2 + ul li a:first-child,
  .article ul li > a:only-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    margin: -10px 0;
  }
}

/* ----- Compare-page hero stats ----- */
.compare-tldr { margin: 24px 0 8px; padding: 20px 22px; background: var(--surface-secondary); border-radius: var(--radius-md); border-left: 3px solid var(--hoist-coral); font-size: 15.5px; line-height: 1.55; color: var(--ink); }

/* ----- Persona page agent flows ----- */
.agent-flow { margin: 32px 0; padding: 28px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-secondary); }
.agent-flow .label { font: 700 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--hoist-coral); margin-bottom: 10px; }
.agent-flow h3 { margin: 4px 0 12px; font: 700 18px/1.3 var(--font-display); }

/* ----- Status badge inline ----- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); font: 700 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
.badge.live { background: var(--match-strong); color: #fff; }
.badge.beta { background: var(--match-fair); color: #fff; }
.badge.coral { background: var(--hoist-coral-dark); color: #fff; }
.badge.ghost { background: transparent; color: var(--ink-tertiary); border: 1px solid var(--border-default); }

/* ----- Page CTA section ----- */
.page-cta { padding: 64px 0 96px; background: var(--surface-secondary); }
.page-cta-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.page-cta h2 { font: 800 clamp(1.5rem, 3vw, 2.25rem)/1.15 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.page-cta p { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--ink-secondary); }
.page-cta .ctas { margin-top: 28px; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ----- Definition list (glossary index) ----- */
.dl { margin: 24px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--border-subtle); }
@media (max-width: 620px) { .dl { grid-template-columns: 1fr; } }
.dl-item { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--border-subtle); display: block; transition: background 180ms, padding-left 180ms var(--ease-out-expo); }
.dl-item:hover { background: var(--surface-secondary); padding-left: 8px; }
.dl-item .term { font: 700 16px/1.3 var(--font-display); color: var(--ink); letter-spacing: -0.015em; }
.dl-item .def { font-size: 13.5px; line-height: 1.5; color: var(--ink-tertiary); margin-top: 4px; }

/* ----- Changelog / blog list ----- */
.timeline { margin: 32px 0; }
.timeline-entry { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
.timeline-entry .date { font: 500 12px/1 var(--font-mono); color: var(--ink-tertiary); }
.timeline-entry h3 { margin: 6px 0 8px; font: 700 18px/1.3 var(--font-display); color: var(--ink); }
.timeline-entry p { font-size: 14.5px; line-height: 1.55; color: var(--ink-secondary); margin: 8px 0; }
.timeline-entry .tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); background: var(--hoist-coral-subtle); color: var(--hoist-coral-dark); font: 700 10px/1.4 var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 10px; vertical-align: middle; }
.timeline-entry .tag.fix { background: var(--surface-tertiary); color: var(--ink-secondary); }
/* ha-js0w: on mobile the tag wraps to its own line above the title so
   "REGULATORY What AFSA's…" doesn't read as a single concatenated string. */
@media (max-width: 620px) {
  .timeline-entry h3 .tag { display: block; margin: 0 0 8px; }
}

/* ha-js0w: persona-page FAQ numbers (01, 02, 03) use a shared class
   so we can bump the inline-number → question gap without touching
   each persona HTML file. */
.faq-num {
  font: 700 12px/1 var(--font-mono);
  color: var(--hoist-coral-dark);
  padding-right: 12px;
  vertical-align: 1px;
}

main [id],
.article pre,
.article :not(pre) > code,
.tbl-wrap,
.table-scroll,
.host-matrix-scroll,
.data-table,
.host-matrix {
  scroll-margin-top: var(--landing-sticky-scroll-offset, 88px);
}

/* ha-bmch.19: 390px public pages should stay readable without sideways table scanning. */
@media (max-width: 430px) {
  .article-inner.wide {
    max-width: 100%;
  }

  .article code,
  .tbl th,
  .tbl td,
  .tbl-wrap code {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tbl-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .tbl-wrap .tbl,
  .tbl {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: 14px;
  }

  .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .tbl tbody {
    display: grid;
    gap: 12px;
  }

  .tbl tr {
    display: block;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #fff;
  }

  .tbl th,
  .tbl td,
  .tbl-wrap .tbl th:first-child,
  .tbl-wrap .tbl td:first-child,
  .tbl-wrap .tbl th:last-child,
  .tbl-wrap .tbl td:last-child {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    border-bottom: 0;
  }

  .tbl td:first-child {
    color: var(--ink);
    background: var(--surface-secondary);
    font-weight: 600;
  }

  .tbl td + td {
    border-top: 1px solid var(--border-subtle);
  }

  .tbl .badge {
    white-space: normal;
  }

  .mobile-label-table td,
  .mobile-label-table td:first-child,
  .mobile-label-table td:last-child,
  .tbl-wrap .mobile-label-table td:first-child,
  .tbl-wrap .mobile-label-table td:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-items: start;
    color: var(--ink-secondary);
    background: transparent;
    font-weight: 400;
  }

  .mobile-label-table td::before {
    display: block;
    content: "";
    color: var(--ink-tertiary);
    font: 700 11px/1.35 var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .docs-overview-data-table td:nth-child(1)::before,
  .api-data-table td:nth-child(1)::before { content: "Dataset"; }
  .docs-overview-data-table td:nth-child(2)::before { content: "Question"; }
  .docs-overview-data-table td:nth-child(3)::before { content: "Status"; }
  .api-data-table td:nth-child(2)::before { content: "Use"; }
  .api-data-table td:nth-child(3)::before { content: "Question"; }

  .quickstart-interface-table td:nth-child(1)::before { content: "Interface"; }
  .quickstart-interface-table td:nth-child(2)::before { content: "Best for"; }
  .quickstart-interface-table td:nth-child(3)::before { content: "Auth"; }

  .cli-commands-table td:nth-child(1)::before { content: "Command"; }
  .cli-commands-table td:nth-child(2)::before { content: "Use"; }
  .cli-commands-table td:nth-child(3)::before { content: "API route"; }

  .api-endpoints-table td:nth-child(1)::before { content: "Endpoint"; }
  .api-endpoints-table td:nth-child(2)::before { content: "What it does"; }
  .api-endpoints-table td:nth-child(3)::before { content: "Auth"; }

  .mcp-scopes-table td:nth-child(1)::before { content: "Scope"; }
  .mcp-scopes-table td:nth-child(2)::before { content: "Allows"; }
  .mcp-tools-table td:nth-child(1)::before { content: "Tool"; }
  .mcp-tools-table td:nth-child(2)::before { content: "Answers"; }
  .mcp-interface-table td:nth-child(1)::before { content: "Use"; }
  .mcp-interface-table td:nth-child(2)::before { content: "Choose"; }
  .mcp-interface-table td:nth-child(3)::before { content: "Auth"; }

  .pricing-usage-table td:nth-child(1)::before { content: "Check"; }
  .pricing-usage-table td:nth-child(2)::before { content: "Billing"; }
  .pricing-usage-table td:nth-child(3)::before { content: "Notes"; }

  .status-live-table td:nth-child(1)::before,
  .status-access-table td:nth-child(1)::before { content: "Component"; }
  .status-live-table td:nth-child(2)::before,
  .status-access-table td:nth-child(2)::before { content: "Status"; }
  .status-live-table td:nth-child(3)::before,
  .status-access-table td:nth-child(3)::before { content: "Notes"; }

  .mobile-label-table td[data-label]::before {
    content: attr(data-label);
  }
}