/* /llmgateway/jazz.css — color + air pass over the LLM Gateway page.
   Loads AFTER provider-coverage.css so these declarations win on equal specificity.
   All changes are visual only (typography weight/tracking + accent colors).
   No layout / semantic changes. */

/* ────────────────────────────────────────────────────────────────────
   GLOBAL TONE
   Loosen tracking and lighten weights on the LLM Gateway page only.
   ──────────────────────────────────────────────────────────────────── */
.lift-hero h1 {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}
.lift-hero .lede,
.section-lede {
  color: #cbd5e1 !important;
  font-weight: 400 !important;
}
.lift-hero .kicker {
  color: #a5b4fc !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}

.section-h {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* Eyebrows across the page get a softer, jazzier tone */
.ts-eyebrow,
.ts-buyer-eyebrow,
.ts-provider-coverage .ts-eyebrow {
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}

/* ────────────────────────────────────────────────────────────────────
   PROVIDER CARDS — brand-tinted glow per provider
   Anthropic (warm), OpenAI (emerald), Gemini (azure), xAI (silver),
   Perplexity (teal).
   ──────────────────────────────────────────────────────────────────── */
.ts-provider-card h3 {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-size: 1.02rem !important;
}
.ts-provider-card p {
  color: #a8b3c5 !important;
}

/* Per-provider accent glow (drives the ::after radial + hover border) */
.ts-provider-card:nth-child(1)::after { background: radial-gradient(circle, rgba(245, 158, 11, 0.22), transparent 72%) !important; }
.ts-provider-card:nth-child(1):hover  { border-color: rgba(245, 158, 11, 0.55) !important; box-shadow: 0 18px 44px rgba(120, 53, 15, 0.30) !important; }

.ts-provider-card:nth-child(2)::after { background: radial-gradient(circle, rgba(16, 185, 129, 0.22), transparent 72%) !important; }
.ts-provider-card:nth-child(2):hover  { border-color: rgba(16, 185, 129, 0.55) !important; box-shadow: 0 18px 44px rgba(6, 78, 59, 0.32) !important; }

.ts-provider-card:nth-child(3)::after { background: radial-gradient(circle, rgba(99, 102, 241, 0.24), transparent 72%) !important; }
.ts-provider-card:nth-child(3):hover  { border-color: rgba(99, 102, 241, 0.55) !important; box-shadow: 0 18px 44px rgba(49, 46, 129, 0.32) !important; }

.ts-provider-card:nth-child(4)::after { background: radial-gradient(circle, rgba(226, 232, 240, 0.22), transparent 72%) !important; }
.ts-provider-card:nth-child(4):hover  { border-color: rgba(226, 232, 240, 0.45) !important; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.45) !important; }

.ts-provider-card:nth-child(5)::after { background: radial-gradient(circle, rgba(20, 184, 166, 0.24), transparent 72%) !important; }
.ts-provider-card:nth-child(5):hover  { border-color: rgba(20, 184, 166, 0.55) !important; box-shadow: 0 18px 44px rgba(13, 78, 73, 0.32) !important; }

/* ────────────────────────────────────────────────────────────────────
   BUYER TRIAD — audience-coded accent stripes
   Platform = cyan · Security = violet · Finance = emerald
   ──────────────────────────────────────────────────────────────────── */
.ts-buyer-card {
  position: relative !important;
  overflow: hidden !important;
}
.ts-buyer-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ts-buyer-accent, #67e8f9), transparent 70%);
  opacity: 0.85;
}
.ts-buyer-card h3 {
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  font-size: 1.08rem !important;
}
.ts-buyer-card p { color: #c5cfdc !important; }

.ts-buyer-triad-shell .ts-buyer-card:nth-child(1) { --ts-buyer-accent: #38bdf8; }
.ts-buyer-triad-shell .ts-buyer-card:nth-child(1) .ts-buyer-eyebrow { color: #7dd3fc !important; }
.ts-buyer-triad-shell .ts-buyer-card:nth-child(1):hover { border-color: rgba(56, 189, 248, 0.42) !important; }

.ts-buyer-triad-shell .ts-buyer-card:nth-child(2) { --ts-buyer-accent: #a78bfa; }
.ts-buyer-triad-shell .ts-buyer-card:nth-child(2) .ts-buyer-eyebrow { color: #c4b5fd !important; }
.ts-buyer-triad-shell .ts-buyer-card:nth-child(2):hover { border-color: rgba(167, 139, 250, 0.42) !important; }

.ts-buyer-triad-shell .ts-buyer-card:nth-child(3) { --ts-buyer-accent: #34d399; }
.ts-buyer-triad-shell .ts-buyer-card:nth-child(3) .ts-buyer-eyebrow { color: #6ee7b7 !important; }
.ts-buyer-triad-shell .ts-buyer-card:nth-child(3):hover { border-color: rgba(52, 211, 153, 0.42) !important; }

/* ────────────────────────────────────────────────────────────────────
   CAPABILITY GRID — six cards, six accents (rainbow strip on top)
   Cyan · Indigo · Emerald · Amber · Rose · Violet
   Force clean 3 × 2 grid on wide screens (was auto-fit, causing 5+1 wrap).
   ──────────────────────────────────────────────────────────────────── */
.cap-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
@media (max-width: 980px) {
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .cap-grid { grid-template-columns: 1fr !important; }
}

.cap-card {
  position: relative;
  border-radius: 18px !important;
  padding: 22px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}
.cap-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: linear-gradient(90deg, var(--cap-accent, #67e8f9), transparent 80%);
  opacity: 0.9;
  pointer-events: none;
}
.cap-card .icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 14px;
  border-radius: 14px;
  font-size: 1.35rem;
  background: var(--cap-icon-bg, rgba(103, 232, 249, 0.10));
  border: 1px solid var(--cap-icon-border, rgba(103, 232, 249, 0.22));
}
.cap-card h3 {
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  font-size: 1.04rem !important;
  color: #f1f5f9 !important;
}
.cap-card p { color: #c5cfdc !important; line-height: 1.62 !important; }

.cap-card:hover {
  transform: translateY(-2px);
  border-color: var(--cap-accent, rgba(103, 232, 249, 0.42)) !important;
  box-shadow: 0 18px 44px rgba(8, 47, 73, 0.24);
}

.cap-grid .cap-card:nth-child(1) { --cap-accent: #38bdf8; --cap-icon-bg: rgba(56, 189, 248, 0.10); --cap-icon-border: rgba(56, 189, 248, 0.28); }
.cap-grid .cap-card:nth-child(2) { --cap-accent: #818cf8; --cap-icon-bg: rgba(129, 140, 248, 0.10); --cap-icon-border: rgba(129, 140, 248, 0.28); }
.cap-grid .cap-card:nth-child(3) { --cap-accent: #34d399; --cap-icon-bg: rgba(52, 211, 153, 0.10); --cap-icon-border: rgba(52, 211, 153, 0.28); }
.cap-grid .cap-card:nth-child(4) { --cap-accent: #fbbf24; --cap-icon-bg: rgba(251, 191, 36, 0.10); --cap-icon-border: rgba(251, 191, 36, 0.32); }
.cap-grid .cap-card:nth-child(5) { --cap-accent: #fb7185; --cap-icon-bg: rgba(251, 113, 133, 0.10); --cap-icon-border: rgba(251, 113, 133, 0.30); }
.cap-grid .cap-card:nth-child(6) { --cap-accent: #c084fc; --cap-icon-bg: rgba(192, 132, 252, 0.10); --cap-icon-border: rgba(192, 132, 252, 0.30); }

/* ────────────────────────────────────────────────────────────────────
   ARCHITECTURE DIAGRAM — small chromatic lift
   ──────────────────────────────────────────────────────────────────── */
.ts-arch-node {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.ts-arch-node.ts-arch-gateway {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(99, 102, 241, 0.18)) !important;
  border-color: rgba(125, 211, 252, 0.55) !important;
}
.ts-arch-provider:nth-child(2) { border-color: rgba(245, 158, 11, 0.40); color: #fcd34d; }
.ts-arch-provider:nth-child(3) { border-color: rgba(16, 185, 129, 0.40); color: #6ee7b7; }
.ts-arch-provider:nth-child(4) { border-color: rgba(99, 102, 241, 0.45); color: #c4b5fd; }
.ts-arch-provider:nth-child(5) { border-color: rgba(226, 232, 240, 0.40); color: #e2e8f0; }
.ts-arch-provider:nth-child(6) { border-color: rgba(20, 184, 166, 0.45); color: #5eead4; }

/* ────────────────────────────────────────────────────────────────────
   ENGAGEMENT-SCOPE CALLOUT — subtler amber so it doesn't shout
   ──────────────────────────────────────────────────────────────────── */
.ts-capability-scope p {
  font-weight: 400 !important;
  color: #d4dbe6 !important;
}

@media (prefers-reduced-motion: reduce) {
  .cap-card { transition: none !important; }
  .cap-card:hover { transform: none !important; }
}

/* ────────────────────────────────────────────────────────────────────
   CTA BUTTONS — more contrast, more presence
   Header "Request Demo" + hero primary/glass on LLM Gateway page.
   ──────────────────────────────────────────────────────────────────── */

/* Header "Request Demo" — brighter gradient, bigger, glow on rest state */
.ts-site-header .ts-header-actions .ts-btn-primary {
  background: linear-gradient(135deg, #38bdf8 0%, #6366f1 55%, #a855f7 100%) !important;
  border: 1px solid rgba(165, 180, 252, 0.55) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  padding: 12px 22px !important;
  box-shadow:
    0 8px 24px rgba(56, 189, 248, 0.32),
    0 2px 6px rgba(99, 102, 241, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  text-shadow: 0 1px 0 rgba(15, 23, 42, 0.30) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}
.ts-site-header .ts-header-actions .ts-btn-primary:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 12px 30px rgba(56, 189, 248, 0.45),
    0 3px 10px rgba(168, 85, 247, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
.ts-site-header .ts-header-actions .ts-btn-primary:focus-visible {
  outline: 2px solid #7dd3fc !important;
  outline-offset: 3px !important;
}

/* Hero primary "Request access →" — beefier gradient + dark ink for contrast */
.lift-hero .btn-primary,
.btn-primary {
  background: linear-gradient(135deg, #67e8f9 0%, #a78bfa 55%, #f472b6 100%) !important;
  color: #0b1020 !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  padding: 0.85rem 1.8rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 10px 28px rgba(103, 232, 249, 0.35),
    0 4px 12px rgba(167, 139, 250, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease !important;
}
.lift-hero .btn-primary:hover,
.btn-primary:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
  box-shadow:
    0 14px 36px rgba(103, 232, 249, 0.48),
    0 6px 18px rgba(244, 114, 182, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

/* Hero glass "Book a 30-min walkthrough" — much more visible border + text */
.lift-hero .btn-glass,
.btn-glass {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(165, 180, 252, 0.55) !important;
  color: #f8fafc !important;
  font-weight: 600 !important;
  padding: 0.85rem 1.8rem !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 14px rgba(99, 102, 241, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}
.lift-hero .btn-glass:hover,
.btn-glass:hover {
  background: rgba(165, 180, 252, 0.12) !important;
  border-color: rgba(165, 180, 252, 0.85) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 8px 22px rgba(99, 102, 241, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}