/* ──────────────────────────────────────────────────────────────────────────
 * TwitterScore API — pricing page redesign (Claude Design bundle "API Pricing")
 * Ported from the approved React/inline-style prototype into a Django-served,
 * theme-aware stylesheet. Everything is scoped under .tsapi-page and namespaced
 * .tsapi-* so it can't collide with global styles. Light is the default; dark
 * overrides hang off body.dark (the site's dark theme = body.dark).
 * ──────────────────────────────────────────────────────────────────────────*/

.tsapi-page {
  /* brand */
  --tsapi-brand: #0544FD;
  --tsapi-brand-deep: #0033AD;
  --tsapi-brand-bright: #1E57FD;
  /* text */
  --tsapi-ink: #101014;        /* primary text, flips per theme */
  --tsapi-ink-fixed: #101014;  /* intentionally-dark surfaces, constant */
  --tsapi-fg2: #303030;
  --tsapi-fg3: #484848;
  --tsapi-fg4: #656565;
  --tsapi-fg5: #878593;
  --tsapi-fg6: #A9A7B2;
  /* surfaces */
  --tsapi-bg: #FFFFFF;
  --tsapi-surface: #FFFFFF;
  --tsapi-elev: #F2F3F6;
  --tsapi-soft: #F3F3F3;
  --tsapi-border: #DDDCE5;
  --tsapi-border-soft: #EBEBEB;
  /* semantic */
  --tsapi-success: #1AA04B;
  --tsapi-success-bg: #E7F5EB;
  --tsapi-score-green: #22D04A;
  /* hero + highlight tints */
  --tsapi-hero-bg: #0544FD;
  --tsapi-brand-tint: rgba(5, 68, 253, 0.04);
  --tsapi-brand-tint-border: rgba(5, 68, 253, 0.18);
  --tsapi-brand-tint-soft: rgba(5, 68, 253, 0.08);
  /* fonts (Poppins/Roboto/Material Symbols loaded site-wide; mono added on page) */
  --tsapi-font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --tsapi-font-display: "Poppins", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --tsapi-font-mono: "Roboto Mono", "Menlo", Consolas, monospace;
  --tsapi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: var(--tsapi-font-body);
  color: var(--tsapi-ink);
  background: var(--tsapi-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  z-index: 0;
}

body.dark .tsapi-page {
  --tsapi-brand: #3D6BFF;
  --tsapi-brand-bright: #5A82FF;
  --tsapi-ink: #EDEEF2;
  --tsapi-fg2: #D7D8DE;
  --tsapi-fg3: #B4B6C0;
  --tsapi-fg4: #9498A4;
  --tsapi-fg5: #767886;
  --tsapi-fg6: #565863;
  --tsapi-bg: #0B0C10;
  --tsapi-surface: #1C1F2A;
  --tsapi-elev: #14161D;
  --tsapi-soft: #101218;
  --tsapi-border: #2C2F3A;
  --tsapi-border-soft: #232631;
  --tsapi-success: #34C76A;
  --tsapi-success-bg: rgba(52, 199, 106, 0.16);
  --tsapi-hero-bg: #0C1226;
  --tsapi-brand-tint: rgba(61, 107, 255, 0.10);
  --tsapi-brand-tint-border: rgba(61, 107, 255, 0.30);
  --tsapi-brand-tint-soft: rgba(61, 107, 255, 0.14);
}

/* keep Material Symbols glyphs from inheriting the global `span{color}` sniper */
.tsapi-page .material-symbols-outlined { color: inherit; line-height: 1; vertical-align: middle; }

/* ── Flush to the left sidebar (this page only) ───────────────────────────
 * Site default is .site-wrapper { padding-left: sidebar-width + 24px } — that
 * +24px breathing gap is what sits between the menu and this immersive page.
 * Drop it so the full-bleed hero/sheet butt right up against the sidebar.
 * (html-prefixed for specificity over sidebar-layout.css.) */
html body:not(.mobile) .site-wrapper { padding-left: 264px; }
html body:not(.mobile).sidebar-collapsed .site-wrapper { padding-left: 76px; }

/* ── Hide the top header ad banner on this page only ──────────────────────
 * Site-wide the header ad renders as a strip pinned to the top of the viewport
 * (#newProjectInfo, position:fixed) that shifts the topbar/sidebar down by
 * --ts-banner-h. This immersive page opts out of it entirely: hide the header
 * ad zone and force --ts-banner-h to 0 so the topbar/sidebar offsets stay
 * correct (no phantom gap at the top). */
[data-django-ads-zone="header"] { display: none !important; }
html { --ts-banner-h: 0px !important; }

.tsapi-page * { box-sizing: border-box; }
.tsapi-page a { color: inherit; text-decoration: none; }
.tsapi-page button { font-family: inherit; }
.tsapi-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tsapi-mono { font-family: var(--tsapi-font-mono); font-feature-settings: "tnum"; }

/* score-gradient text (fixed across themes) */
.tsapi-score-grad {
  background: linear-gradient(90deg, #FF6A1F 0%, #F5C518 48%, #22D04A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* entrance */
@media (prefers-reduced-motion: no-preference) {
  .tsapi-rise { opacity: 0; transform: translateY(14px); animation: tsapi-rise .6s var(--tsapi-ease) forwards; }
  @keyframes tsapi-rise { to { opacity: 1; transform: none; } }
}

/* ── buttons ─────────────────────────────────────────────────────────────*/
.tsapi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border-radius: 999px; padding: 13px 26px;
  font-size: 15.5px; font-weight: 600; font-family: var(--tsapi-font-display);
  border: none; transition: transform .15s var(--tsapi-ease), filter .15s var(--tsapi-ease);
}
.tsapi-btn:hover { filter: brightness(0.96); }
.tsapi-btn .material-symbols-outlined { font-size: 19px; }
.tsapi-btn-light { background: #fff; color: var(--tsapi-ink-fixed); }
.tsapi-btn-ghost-white { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.45); }
.tsapi-btn-brand { background: var(--tsapi-brand); color: #fff; }
.tsapi-btn-secondary { background: var(--tsapi-elev); color: var(--tsapi-ink); }
.tsapi-btn-dark { background: var(--tsapi-ink-fixed); color: #fff; }
/* Anchors styled as buttons must keep their variant text colour. `.tsapi-page a { color: inherit }`
   outranks the single-class variants, so a ghost-white <a> ("Talk to sales") would inherit the page
   ink — dark, hence invisible on the always-dark CTA — in light theme. Re-assert per variant. */
.tsapi-page a.tsapi-btn-light { color: var(--tsapi-ink-fixed); }
.tsapi-page a.tsapi-btn-ghost-white,
.tsapi-page a.tsapi-btn-brand,
.tsapi-page a.tsapi-btn-dark { color: #fff; }
.tsapi-page a.tsapi-btn-secondary { color: var(--tsapi-ink); }

/* ── hero ────────────────────────────────────────────────────────────────*/
.tsapi-hero {
  position: relative; overflow: hidden; background: var(--tsapi-hero-bg);
  padding: 64px 0 132px;
}
.tsapi-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1100px 460px at 78% 8%, rgba(255,255,255,0.16), transparent 60%);
}
.tsapi-hero::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -120px; top: -160px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); pointer-events: none;
}
.tsapi-hero-inner {
  position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 56px; align-items: center;
}
.tsapi-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; white-space: nowrap;
  border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; font-size: 13px; font-weight: 500; margin-bottom: 22px;
}
.tsapi-badge .material-symbols-outlined { font-size: 16px; }
.tsapi-hero-title {
  margin: 0; font-family: var(--tsapi-font-display); font-weight: 600; color: #fff;
  font-size: 52px; line-height: 58px; letter-spacing: -1.4px;
}
.tsapi-hero-sub {
  margin: 20px 0 0; color: rgba(255,255,255,0.86); font-size: 18px; line-height: 28px; max-width: 480px;
}
.tsapi-hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

/* trusted-by marquee */
.tsapi-trusted { position: relative; margin-top: 56px; }
.tsapi-trusted-label {
  text-align: center; color: rgba(255,255,255,0.74); font-size: 13px; font-weight: 500;
  letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 30px;
}
.tsapi-marquee { overflow: hidden; position: relative; }
.tsapi-marquee-fade { position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none; }
.tsapi-marquee-fade.l { left: 0; background: linear-gradient(90deg, var(--tsapi-hero-bg), transparent); }
.tsapi-marquee-fade.r { right: 0; background: linear-gradient(270deg, var(--tsapi-hero-bg), transparent); }
.tsapi-marquee-track {
  display: flex; width: max-content; animation: tsapi-marquee 55s linear infinite;
  will-change: transform; backface-visibility: hidden;
}
.tsapi-marquee:hover .tsapi-marquee-track { animation-play-state: paused; }
.tsapi-marquee-group { display: flex; align-items: center; gap: 76px; padding-right: 76px; flex-shrink: 0; }
.tsapi-logo-img {
  height: 50px; width: auto; display: block; flex-shrink: 0;
  filter: brightness(0) invert(1); opacity: 0.9;
  transform: translateZ(0); backface-visibility: hidden;
}
@keyframes tsapi-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .tsapi-marquee-track { animation: none; } }

/* ── white sheet (concave transition) ──────────────────────────────────────*/
.tsapi-sheet {
  position: relative; z-index: 2; margin-top: -40px; background: var(--tsapi-bg);
  border-radius: 40px 40px 0 0; padding-top: 80px;
}

/* ── section primitives ────────────────────────────────────────────────────*/
.tsapi-section { padding: 0 0 96px; }
.tsapi-section-band { padding: 80px 0 92px; background: var(--tsapi-elev); }
.tsapi-head { text-align: center; max-width: 660px; margin: 0 auto 38px; }
.tsapi-eyebrow {
  font-family: var(--tsapi-font-body); font-weight: 600; font-size: 13px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--tsapi-brand); margin-bottom: 12px;
}
.tsapi-h2 {
  margin: 0; font-family: var(--tsapi-font-display); font-weight: 600; font-size: 36px;
  letter-spacing: -0.5px; color: var(--tsapi-ink);
}
.tsapi-lead { margin: 12px 0 0; color: var(--tsapi-fg4); font-size: 16.5px; line-height: 26px; }

/* ── billing toggle ────────────────────────────────────────────────────────*/
.tsapi-billing {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px; flex-wrap: wrap; justify-content: center;
  background: var(--tsapi-elev); border-radius: 999px; border: 1px solid var(--tsapi-border);
}
.tsapi-billing-opt {
  display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  border-radius: 999px; padding: 9px 20px; font-family: var(--tsapi-font-body); font-weight: 500;
  font-size: 14px; background: transparent; color: var(--tsapi-fg5); transition: all .2s var(--tsapi-ease);
}
.tsapi-billing-opt.is-active {
  background: var(--tsapi-surface); color: var(--tsapi-ink); font-family: var(--tsapi-font-display);
  font-weight: 600; box-shadow: 0 1px 2px rgba(16,16,20,0.10);
}
.tsapi-save-pill {
  margin-left: 2px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  font-family: var(--tsapi-font-body); background: var(--tsapi-success-bg); color: var(--tsapi-success);
}

/* ── plan cards ────────────────────────────────────────────────────────────*/
.tsapi-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  align-items: stretch; max-width: 1200px; margin: 20px auto 0;
}
.tsapi-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--tsapi-surface); border-radius: 20px; border: 1px solid var(--tsapi-border);
  padding: 30px 22px 26px;
}
.tsapi-card.is-featured {
  border: 2px solid var(--tsapi-brand); padding: 32px 24px 26px; transform: translateY(-10px);
  box-shadow: 0 20px 48px rgba(5,68,253,0.16), 0 4px 12px rgba(16,16,20,0.06); z-index: 2;
}
.tsapi-badge-pop {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--tsapi-brand); color: #fff; font-family: var(--tsapi-font-display); font-weight: 600;
  font-size: 12px; letter-spacing: 0.2px; padding: 6px 16px; border-radius: 999px;
  text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 16px rgba(5,68,253,0.32);
}
.tsapi-card-name {
  margin: 0; font-family: var(--tsapi-font-display); font-weight: 600; font-size: 22px; color: var(--tsapi-ink);
}
.tsapi-card.is-featured .tsapi-card-name { color: var(--tsapi-brand); }
.tsapi-card-tag { margin: 8px 0 0; color: var(--tsapi-fg5); font-size: 13.5px; line-height: 20px; min-height: 40px; }
.tsapi-price { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; min-height: 46px; flex-wrap: wrap; }
.tsapi-price-amt {
  font-family: var(--tsapi-font-display); font-weight: 600; font-size: 46px;
  letter-spacing: -1.5px; color: var(--tsapi-ink); line-height: 1; font-feature-settings: "tnum";
}
.tsapi-price-amt.is-contact { font-size: 34px; letter-spacing: -1px; }
.tsapi-price-per { color: var(--tsapi-fg5); font-size: 15px; font-weight: 500; }
.tsapi-price-sub { margin-top: 6px; font-size: 12.5px; color: var(--tsapi-fg5); min-height: 18px; }
.tsapi-price-sub.is-saving { color: var(--tsapi-success); }
.tsapi-price-sub b { font-weight: 600; }

/* personal promo (?pay=API20) — struck-through base + discounted price + pill */
.tsapi-price-was {
  font-family: var(--tsapi-font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.5px;
  color: var(--tsapi-fg6); text-decoration: line-through; line-height: 1; align-self: center;
  font-feature-settings: "tnum";
}
.tsapi-price-was[hidden] { display: none; }
.tsapi-price-amt.is-promo { color: var(--tsapi-success); }
.tsapi-price-off {
  align-self: center; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  font-family: var(--tsapi-font-body); background: var(--tsapi-success-bg); color: var(--tsapi-success);
}
.tsapi-price-off[hidden] { display: none; }

/* promo banner under the billing toggle */
.tsapi-promo-wrap { margin-top: 22px; display: flex; justify-content: center; }
.tsapi-promo-banner {
  display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 14px;
  border: 1.5px dashed var(--tsapi-success); background: var(--tsapi-success-bg);
}
.tsapi-promo-msg {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; text-align: left;
  font-size: 14.5px; font-weight: 500; color: var(--tsapi-success); white-space: nowrap;
}
.tsapi-promo-msg .material-symbols-outlined { font-size: 20px; color: var(--tsapi-success); font-variation-settings: 'FILL' 1; }
.tsapi-promo-msg b { font-weight: 700; }
.tsapi-promo-code {
  align-self: stretch; display: inline-flex; align-items: center; padding: 0 16px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 1px; color: #fff;
  background: var(--tsapi-success); border-left: 1.5px dashed rgba(255,255,255,0.5);
}
@media (max-width: 560px) {
  .tsapi-promo-banner { flex-direction: column; align-items: stretch; }
  .tsapi-promo-msg { white-space: normal; justify-content: center; }
  .tsapi-promo-code { padding: 8px 16px; justify-content: center; border-left: none; border-top: 1.5px dashed rgba(255,255,255,0.5); }
}
.tsapi-cta {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; border-radius: 999px; padding: 13px 20px; margin-top: 20px;
  font-size: 15px; font-weight: 600; font-family: var(--tsapi-font-display); border: none;
  background: var(--tsapi-elev); color: var(--tsapi-ink); transition: filter .15s var(--tsapi-ease);
}
.tsapi-cta:hover { filter: brightness(0.94); }
.tsapi-cta.is-primary { background: var(--tsapi-brand); color: #fff; }
.tsapi-cta.is-dark { background: var(--tsapi-ink-fixed); color: #fff; }
.tsapi-cta.is-current { background: transparent; border: 1px solid var(--tsapi-border); color: var(--tsapi-fg4); cursor: default; }
.tsapi-cta.is-current:hover { filter: none; }
.tsapi-divider { height: 1px; background: var(--tsapi-border-soft); margin: 24px 0 18px; }
.tsapi-feat-head {
  font-size: 12.5px; font-weight: 600; color: var(--tsapi-fg4); text-transform: uppercase;
  letter-spacing: 0.4px; margin-bottom: 14px;
}
.tsapi-feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.tsapi-feat-item { display: flex; align-items: flex-start; gap: 11px; }
.tsapi-feat-item .material-symbols-outlined { font-size: 20px; flex-shrink: 0; color: var(--tsapi-score-green); font-variation-settings: 'FILL' 1; }
.tsapi-card.is-featured .tsapi-feat-item .material-symbols-outlined { color: var(--tsapi-brand); }
.tsapi-feat-item span:last-child { font-size: 14.5px; line-height: 20px; color: var(--tsapi-fg3); }
.tsapi-feat-item.is-strong span:last-child { color: var(--tsapi-ink); font-weight: 600; }
.tsapi-microrow {
  text-align: center; margin-top: 28px; color: var(--tsapi-fg5); font-size: 13.5px;
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
}
.tsapi-microrow span { display: inline-flex; align-items: center; gap: 7px; }
.tsapi-microrow .material-symbols-outlined { font-size: 18px; color: var(--tsapi-success); }

/* ── comparison table ──────────────────────────────────────────────────────*/
.tsapi-compare-toggle {
  margin-top: 14px; background: none; border: none; cursor: pointer; color: var(--tsapi-brand);
  font-size: 14.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px;
}
.tsapi-table {
  background: var(--tsapi-surface); border-radius: 16px; border: 1px solid var(--tsapi-border);
  overflow: hidden; max-width: 1100px; margin: 0 auto;
}
.tsapi-trow { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
.tsapi-table-head { border-bottom: 1px solid var(--tsapi-border); }
.tsapi-th { padding: 20px 12px; text-align: center; }
.tsapi-th.hi { background: var(--tsapi-brand-tint); border-left: 1px solid var(--tsapi-brand-tint-border); border-right: 1px solid var(--tsapi-brand-tint-border); }
.tsapi-th-name { font-family: var(--tsapi-font-display); font-weight: 600; font-size: 16px; color: var(--tsapi-ink); }
.tsapi-th.hi .tsapi-th-name { color: var(--tsapi-brand); }
.tsapi-th-price { font-size: 12.5px; color: var(--tsapi-fg5); margin-top: 2px; }
.tsapi-group-label {
  padding: 11px 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--tsapi-fg5); background: var(--tsapi-soft);
}
.tsapi-group-row { background: var(--tsapi-soft); }
.tsapi-datarow { border-top: 1px solid var(--tsapi-border-soft); align-items: center; }
.tsapi-td-label { padding: 15px 24px; font-size: 14px; color: var(--tsapi-fg3); }
.tsapi-td { padding: 15px 12px; text-align: center; display: grid; place-items: center; height: 100%; }
.tsapi-td.hi, .tsapi-group-row .tsapi-cell-hi { background: var(--tsapi-brand-tint); border-left: 1px solid var(--tsapi-brand-tint-border); border-right: 1px solid var(--tsapi-brand-tint-border); }
.tsapi-td .material-symbols-outlined { font-size: 20px; color: var(--tsapi-score-green); }
.tsapi-td.hi .material-symbols-outlined { color: var(--tsapi-brand); }
.tsapi-td .material-symbols-outlined.off { font-size: 18px; color: var(--tsapi-fg6); }
.tsapi-td-val { font-weight: 600; font-size: 14.5px; color: var(--tsapi-ink); }
.tsapi-td.hi .tsapi-td-val { color: var(--tsapi-brand); }

/* ── code explorer ─────────────────────────────────────────────────────────*/
.tsapi-explorer-grid { display: grid; grid-template-columns: 248px 1fr; gap: 24px; align-items: start; max-width: 1040px; margin: 0 auto; }
.tsapi-side {
  background: var(--tsapi-surface); border: 1px solid var(--tsapi-border); border-radius: 16px;
  padding: 12px; position: sticky; top: 88px;
}
.tsapi-side-group { margin-bottom: 10px; }
.tsapi-side-grouplabel { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--tsapi-fg5); padding: 8px 10px 6px; }
.tsapi-ep-btn {
  display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; border: none;
  border-radius: 10px; padding: 9px 10px; width: 100%; background: transparent; color: var(--tsapi-fg3);
  transition: background .15s var(--tsapi-ease);
}
.tsapi-ep-btn:hover { background: var(--tsapi-soft); }
.tsapi-ep-btn.is-active { background: var(--tsapi-brand-tint-soft); box-shadow: none; color: var(--tsapi-brand); }
.tsapi-ep-method {
  font-family: var(--tsapi-font-mono); font-size: 9.5px; font-weight: 700; color: var(--tsapi-fg6);
  border: 1px solid var(--tsapi-border); border-radius: 5px; padding: 2px 5px; line-height: 1;
}
.tsapi-ep-btn.is-active .tsapi-ep-method { color: var(--tsapi-brand); border-color: var(--tsapi-brand-tint-border); }
.tsapi-ep-label { font-size: 14px; font-weight: 400; font-family: var(--tsapi-font-body); }
.tsapi-ep-btn.is-active .tsapi-ep-label { font-weight: 600; font-family: var(--tsapi-font-display); }
.tsapi-ep-title { font-family: var(--tsapi-font-display); font-weight: 600; font-size: 20px; color: var(--tsapi-ink); margin-bottom: 4px; }
.tsapi-ep-summary { color: var(--tsapi-fg4); font-size: 14.5px; line-height: 22px; margin-bottom: 14px; }
.tsapi-inline-code { font-family: var(--tsapi-font-mono); font-size: 15px; background: var(--tsapi-elev); padding: 1px 7px; border-radius: 6px; color: var(--tsapi-brand); }
.tsapi-doc-link { text-align: center; margin-top: 30px; color: var(--tsapi-fg5); font-size: 14px; }
.tsapi-doc-link a { color: var(--tsapi-brand); font-weight: 500; }

/* dark code card (fixed dark across themes) */
.tsapi-codecard {
  background: #0D0E13; border-radius: 18px; border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 70px rgba(2,8,40,0.22); overflow: hidden;
}
.tsapi-codecard.is-teaser { border-radius: 16px; box-shadow: 0 24px 60px rgba(2,8,40,0.45); width: 100%; }
.tsapi-codebar {
  display: flex; align-items: center; gap: 8px; padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tsapi-dot { width: 11px; height: 11px; border-radius: 999px; flex-shrink: 0; }
.tsapi-dot.r { background: #FF5F57; } .tsapi-dot.y { background: #FEBC2E; } .tsapi-dot.g { background: #28C840; }
.tsapi-codebar-title {
  margin-left: 8px; font-family: var(--tsapi-font-mono); font-size: 12px; color: #6B6D7A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsapi-copybtn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06);
  color: #C9CBD3; border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 500;
  font-family: var(--tsapi-font-body); white-space: nowrap;
}
.tsapi-copybtn .material-symbols-outlined { font-size: 15px; }
.tsapi-codebody { padding: 20px 22px 22px; }
.tsapi-codecard.is-teaser .tsapi-codebody { padding: 16px 18px 18px; }
.tsapi-req { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.tsapi-method-badge {
  font-family: var(--tsapi-font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px;
  color: #86E59A; background: rgba(34,208,74,0.12); border: 1px solid rgba(34,208,74,0.25);
  border-radius: 6px; padding: 3px 8px;
}
.tsapi-req-url { font-family: var(--tsapi-font-mono); font-size: 13px; color: #C9CBD3; word-break: break-all; line-height: 18px; }
.tsapi-curl { margin: 0; font-family: var(--tsapi-font-mono); font-size: 12.5px; line-height: 20px; color: #8A8C99; white-space: pre-wrap; word-break: break-all; }
.tsapi-respline { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; }
.tsapi-respline .dot { width: 7px; height: 7px; border-radius: 999px; background: #22D04A; flex-shrink: 0; }
.tsapi-respline .ok { font-family: var(--tsapi-font-mono); font-size: 11.5px; font-weight: 600; color: #86E59A; }
.tsapi-respline .rule { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.tsapi-respline .score-note { font-size: 11.5px; color: #8A8C99; }
.tsapi-respline .score-note b { font-family: var(--tsapi-font-display); font-weight: 700; font-size: 14px; }
.tsapi-resp { margin: 0; font-family: var(--tsapi-font-mono); font-size: 13px; line-height: 21px; white-space: pre-wrap; word-break: break-word; }
.tsapi-codecard.is-teaser .tsapi-req-url,
.tsapi-codecard.is-teaser .tsapi-curl { font-size: 12px; }
.tsapi-codecard.is-teaser .tsapi-resp { font-size: 12px; }

/* ── use cases ─────────────────────────────────────────────────────────────*/
.tsapi-uc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tsapi-uc-card { background: var(--tsapi-surface); border-radius: 14px; border: 1px solid var(--tsapi-border); padding: 26px 22px; }
.tsapi-uc-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--tsapi-brand-tint-soft); display: grid; place-items: center; margin-bottom: 18px; }
.tsapi-uc-icon .material-symbols-outlined { font-size: 26px; color: var(--tsapi-brand); }
.tsapi-uc-title { margin: 0 0 8px; font-family: var(--tsapi-font-display); font-weight: 600; font-size: 18px; color: var(--tsapi-ink); }
.tsapi-uc-body { margin: 0; color: var(--tsapi-fg4); font-size: 14.5px; line-height: 22px; }

/* ── faq ───────────────────────────────────────────────────────────────────*/
.tsapi-faq-wrap { max-width: 860px; margin: 0 auto; }
.tsapi-faq-item { border-bottom: 1px solid var(--tsapi-border); }
.tsapi-faq-q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px;
  font-family: var(--tsapi-font-display); font-weight: 600; font-size: 18px; line-height: 26px; color: var(--tsapi-ink);
}
.tsapi-faq-q .material-symbols-outlined { font-size: 24px; color: var(--tsapi-fg4); flex-shrink: 0; }
.tsapi-faq-item.is-open .tsapi-faq-q .material-symbols-outlined { color: var(--tsapi-brand); }
.tsapi-faq-a { overflow: hidden; max-height: 0; transition: max-height .32s var(--tsapi-ease); }
.tsapi-faq-a > div { padding: 0 4px 22px; color: var(--tsapi-fg4); font-size: 15px; line-height: 24px; max-width: 760px; }

/* ── final CTA ─────────────────────────────────────────────────────────────*/
.tsapi-finalcta { padding: 0 0 96px; }
.tsapi-finalcta-card {
  position: relative; overflow: hidden; background: var(--tsapi-ink-fixed); border-radius: 28px;
  padding: 72px 40px; text-align: center;
}
.tsapi-finalcta-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 320px at 50% -30%, rgba(5,68,253,0.55), transparent 70%);
}
.tsapi-finalcta-inner { position: relative; }
.tsapi-finalcta-card h2 { margin: 0; font-family: var(--tsapi-font-display); font-weight: 600; color: #fff; font-size: 40px; letter-spacing: -0.8px; line-height: 46px; }
.tsapi-finalcta-card p { margin: 16px auto 0; color: rgba(255,255,255,0.72); font-size: 17px; line-height: 26px; max-width: 520px; }
.tsapi-finalcta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* ── responsive ────────────────────────────────────────────────────────────*/
/* tablet refinement: cards & use-cases 2-up, explorer stacks (sidebar → chip row) */
@media (max-width: 1024px) {
  .tsapi-cards { grid-template-columns: repeat(2, 1fr); }
  .tsapi-card.is-featured { transform: none; }
  .tsapi-uc-grid { grid-template-columns: repeat(2, 1fr); }
  .tsapi-explorer-grid { grid-template-columns: 1fr; }
  .tsapi-side { position: static; }
  .tsapi-side-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .tsapi-side-list .tsapi-ep-btn { width: auto; }
}
/* phone: matches the design's __narrow (< 760px) single-column layout */
@media (max-width: 760px) {
  .tsapi-hero { padding: 40px 0 72px; }
  .tsapi-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .tsapi-hero-title { font-size: 34px; line-height: 40px; letter-spacing: -1px; }
  .tsapi-h2 { font-size: 28px; }
  .tsapi-finalcta-card h2 { font-size: 30px; line-height: 36px; }
  .tsapi-cards { grid-template-columns: 1fr; max-width: 460px; }
  .tsapi-uc-grid { grid-template-columns: 1fr; gap: 14px; }
  /* comparison table → horizontal scroll to keep columns readable */
  .tsapi-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tsapi-table { min-width: 620px; }
  .tsapi-container { padding: 0 16px; }
}