@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ===== DESIGN TOKENS ===== */
:root {
  --bg: #fafbfe;
  --bg-alt: #f1f3f9;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --text: #0f172a;
  --text-secondary: #334155;
  --muted: #5f6d80;
  --brand: #2f55d4;
  --brand-2: #4361ee;
  --brand-3: #06b6d4;
  --brand-light: #eef2ff;
  --brand-border: #b8ccf8;
  --brand-dark: #2344ae;
  --brand-hover: #2344ae;
  --accent-warm: #f59e0b;
  --accent-green: #10b981;
  --accent-rose: #f43f5e;
  /* Accent text needs 4.5:1; the display shades above are for fills and borders. */
  --accent-rose-text: #be123c;
  --brand-3-text: #0e7490;
  --line: #e2e8f0;
  --line-subtle: #f1f5f9;

  /* Dark section tokens */
  --dark-bg: #0f172a;
  --dark-surface: #1e293b;
  --dark-text: #f1f5f9;
  --dark-muted: #94a3b8;
  --dark-line: #334155;

  /* Shadows - layered for depth */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.03);
  --shadow-brand: 0 4px 24px rgba(47, 85, 212, 0.12), 0 1px 3px rgba(47, 85, 212, 0.06);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: 0.2s ease;
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Product marks (Contact / Strand / Surface) — shared starfield tile */
  --product-logo-space-fill: #070b14;
  --product-logo-space-tile: url("/icons/products/logo-starfield.svg");
  --product-logo-tile-size: 80px;

  /* Aliases used by generated docs / older rules */
  --text-muted: var(--muted);
  --text-color: var(--text);
  --border-color: var(--line);
  --accent-color: var(--brand);
  --bg-subtle: var(--bg-alt);
  --code-bg: #f1f5f9;
  --code-header-bg: #e8eef6;
  --callout-info-bg: #eef2ff;
  --callout-warn-bg: #fffbeb;
  --callout-success-bg: #f0fdf4;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg: #0f172a;
  --bg-alt: #1e293b;
  --surface: #1e293b;
  --surface-raised: #293548;
  --text: #f1f5f9;
  --text-secondary: #cbd5e1;
  --muted: #94a3b8;
  --brand-light: rgba(47, 85, 212, 0.15);
  --brand-border: rgba(75, 111, 230, 0.3);
  --brand-dark: #7b96f2;
  --brand-hover: #4b6fe6;
  --line: #334155;
  --line-subtle: #1e293b;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-brand: 0 4px 24px rgba(47, 85, 212, 0.2), 0 1px 3px rgba(47, 85, 212, 0.1);

  --accent-rose-text: #fb7185;
  --brand-3-text: #22d3ee;

  --code-bg: #0b1120;
  --code-header-bg: #111827;
  --callout-info-bg: #141e42;
  --callout-warn-bg: #1c1400;
  --callout-success-bg: #052e16;
}

[data-theme="dark"] .site-header {
  background: rgba(15, 23, 42, 0.85);
  border-bottom-color: rgba(51, 65, 85, 0.6);
}

[data-theme="dark"] .site-footer {
  background: var(--surface);
}

[data-theme="dark"] .docs-content pre {
  background: #0b1120;
  border-color: #1e293b;
}

[data-theme="dark"] .docs-content :not(pre) > code {
  background: rgba(47, 85, 212, 0.15);
  color: #7b96f2;
}

[data-theme="dark"] .admonition {
  background: rgba(47, 85, 212, 0.1);
}

[data-theme="dark"] .admonition-warning {
  background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .admonition-warning .admonition-title {
  color: #fbbf24;
}

[data-theme="dark"] .admonition-danger {
  background: rgba(244, 63, 94, 0.1);
}

[data-theme="dark"] .admonition-danger .admonition-title {
  color: #fb7185;
}

[data-theme="dark"] tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .docs-search {
  background: var(--bg);
  color: var(--text);
}

[data-theme="dark"] .nav-cta {
  color: #fff !important;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  display: flex;
  align-items: center;
}

.theme-toggle:hover {
  color: var(--brand);
  border-color: var(--brand-border);
  background: var(--brand-light);
}

/* ===== KEYFRAMES ===== */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-6px) rotate(0.5deg); }
  66% { transform: translateY(-3px) rotate(-0.5deg); }
}

@keyframes glow-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 85, 212, 0.15); }
  50% { box-shadow: 0 0 0 8px rgba(47, 85, 212, 0); }
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.015; }
  50% { opacity: 0.04; }
}

@keyframes float-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

@keyframes border-rotate {
  0% { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

/* ===== NOISE TEXTURE OVERLAY ===== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  transition: color var(--transition);
}

img {
  max-width: 100%;
}

/* ===== LAYOUT ===== */
.container {
  width: min(1140px, calc(100% - 3rem));
  margin: 0 auto;
}

.container-wide {
  width: min(1440px, calc(100% - 3rem));
  margin: 0 auto;
}

/* ===== HEADER ===== */
.site-header {
  position: sticky;
  top: 0;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  background: rgba(250, 251, 254, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  z-index: 20;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
}

.brand {
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: opacity var(--transition);
}

.brand:hover {
  opacity: 0.8;
}

.brand-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

nav a {
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  transition: background var(--transition), color var(--transition);
}

nav a:hover,
nav a[aria-current="page"] {
  background: var(--brand-light);
  color: var(--brand-dark);
}

.nav-cta {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px;
  padding: 0.4rem 1rem !important;
  margin-left: 0.5rem !important;
  box-shadow: 0 2px 8px rgba(47, 85, 212, 0.2);
  transition: all var(--transition) !important;
}

.nav-cta:hover {
  box-shadow: 0 4px 16px rgba(47, 85, 212, 0.35) !important;
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--brand-hover), var(--brand-2)) !important;
}

.nav-cta-soon {
  cursor: default;
  opacity: 0.85;
}

.nav-cta-soon:hover {
  box-shadow: 0 2px 8px rgba(47, 85, 212, 0.2) !important;
  transform: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
}

/* ===== NAV DROPDOWN ===== */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  transition: background var(--transition), color var(--transition);
}

.nav-dropdown-trigger::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger {
  background: var(--brand-light);
  color: var(--brand-dark);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 320px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(47, 85, 212, 0.04);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown:hover .nav-dropdown-trigger::after {
  transform: rotate(-135deg) translateY(-2px);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease;
}

.nav-dropdown-item:hover {
  background: var(--brand-light);
}

.nav-dropdown-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
  background-color: var(--product-logo-space-fill);
  background-image: var(--product-logo-space-tile);
  background-size: var(--product-logo-tile-size) var(--product-logo-tile-size);
  background-repeat: repeat;
  padding: 3px;
  box-sizing: border-box;
  overflow: hidden;
}

.nav-dropdown-icon-surface {
  transform: scale(1.22);
}

.nav-dropdown-item strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--text);
}

.nav-dropdown-item span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 1px;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 8rem 0 5rem;
  text-align: center;
  overflow: visible;
  background: var(--bg);
}

/* Homepage hero: skip the fade-in blank so the three layers are on first paint. */
.hero-home {
  /* Same bottom gap as .section-spacious + .band-subtle before a .band-dark. */
  padding: 5.25rem 0 calc(5rem + clamp(24px, 3.5vw, 56px));
}

.hero-home .hero-products {
  margin-top: 4.5rem;
}

.hero-home .hero-products .section-header-center {
  margin-bottom: 2.25rem;
}

.hero-home .hero-products .eyebrow {
  margin-bottom: 0;
}

.hero-home .product-grid {
  margin-top: 0;
  text-align: left;
}

.hero-home + .band-dark {
  padding-top: calc(2.75rem + clamp(20px, 3vw, 48px));
}

.hero-home + .band-dark > .section {
  padding-top: 2rem;
}

.hero-inner {
  position: relative;
  z-index: 2;
}

/* Radial glow behind hero */
.hero-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(
    circle,
    rgba(47, 85, 212, 0.08) 0%,
    rgba(124, 58, 237, 0.04) 30%,
    rgba(6, 182, 212, 0.02) 50%,
    transparent 70%
  );
  pointer-events: none;
  animation: pulse-glow 8s ease-in-out infinite;
}

/* Dot grid background */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(47, 85, 212, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.3;
  animation: dot-pulse 6s ease-in-out infinite;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black, transparent);
  pointer-events: none;
}

/* ===== TYPOGRAPHY ===== */
.eyebrow {
  color: var(--brand);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0.25rem 0 1.25rem;
  font-weight: 800;
  text-wrap: balance;
}

.hero h1 {
  background: linear-gradient(135deg, var(--text) 0%, var(--brand) 50%, var(--brand-2) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s ease infinite;
  line-height: 1.15;
  padding-bottom: 0.1em;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  font-weight: 750;
  text-wrap: balance;
}

h3 {
  font-size: 1.1rem;
  font-weight: 650;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.lead {
  width: min(640px, 100%);
  margin: 0 auto 1.75rem;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.7;
}

.cta-headline {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ===== BUTTONS ===== */
.actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
}

.btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 2px 12px rgba(47, 85, 212, 0.25), inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
}

/* shimmer sweep on primary buttons */
.btn.primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: shimmer 4s ease-in-out infinite;
}

.btn.primary:hover {
  box-shadow: 0 8px 30px rgba(47, 85, 212, 0.35), inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.btn.primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(47, 85, 212, 0.3);
}

.btn.ghost {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text-secondary);
  backdrop-filter: blur(8px);
}

.btn.ghost:hover {
  border-color: var(--brand-border);
  background: var(--brand-light);
  color: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-lg {
  padding: 0.85rem 1.85rem;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

.btn-soon {
  cursor: default;
  opacity: 0.85;
  pointer-events: none;
}

.btn.primary.btn-soon:hover {
  transform: none;
  box-shadow: 0 2px 12px rgba(47, 85, 212, 0.25), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn.ghost.btn-soon:hover {
  transform: none;
  border-color: var(--line);
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: none;
}

.btn.primary.btn-soon::after {
  animation: none;
}

/* ===== HERO CODE SNIPPET ===== */
.hero-code {
  max-width: 520px;
  margin: 2.5rem auto 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #0f172a;
  border: 1px solid #1e293b;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(47, 85, 212, 0.08),
    0 24px 60px -12px rgba(47, 85, 212, 0.15);
  text-align: left;
  position: relative;
  z-index: 1;
  transform: perspective(800px) rotateX(2deg);
  transition: transform 0.4s ease;
}

.hero-code:hover {
  transform: perspective(800px) rotateX(0deg) translateY(-4px);
}

.hero-code-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.65rem 1rem;
  background: #1e293b;
  border-bottom: 1px solid #334155;
}

.hero-code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #334155;
}

.hero-code-dot:nth-child(1) { background: #f87171; }
.hero-code-dot:nth-child(2) { background: #fbbf24; }
.hero-code-dot:nth-child(3) { background: #34d399; }

.hero-code-lang {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  font-family: "JetBrains Mono", monospace;
}

.hero-code pre {
  margin: 0;
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  line-height: 1.7;
  overflow-x: auto;
}

.hero-code code {
  font-family: "JetBrains Mono", "Fira Code", Menlo, monospace;
  color: #e2e8f0;
}

.hero-code .code-kw { color: #c084fc; }
.hero-code .code-str { color: #34d399; }
.hero-code .code-cmt { color: #94a3b8; font-style: italic; }

/* ===== HERO METRICS ===== */
.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line-subtle);
  position: relative;
  z-index: 1;
}

.hero-metrics div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-lg);
  /* A white chip needs a real edge on the near-white page; a white border
     and half-opaque fill washed out to nothing on the light theme. */
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  cursor: default;
}

.hero-metrics div:hover {
  background: var(--surface);
  border-color: var(--brand-border);
  box-shadow: var(--shadow), 0 0 20px rgba(47, 85, 212, 0.08);
  transform: translateY(-3px);
}

.hero-metrics strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.hero-metrics span {
  font-size: 0.8rem;
  color: var(--muted);
}

[data-theme="dark"] .hero-metrics div {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .hero-metrics div:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ===== SECTIONS ===== */
.section {
  padding: 4rem 0;
}

.section-spacious {
  padding: 5rem 0;
}

.section-tight {
  padding: 1.5rem 0 0;
}

/* ===== FLOATING DEPTH BLOBS ===== */
.section-spacious {
  position: relative;
  overflow: hidden;
}

.section-spacious::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 85, 212, 0.06) 0%, transparent 70%);
  top: calc(-100px + var(--parallax-y, 0px));
  right: -100px;
  animation: float-blob 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.section-spacious::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.05) 0%, transparent 70%);
  bottom: calc(-80px - var(--parallax-y, 0px));
  left: -80px;
  animation: float-blob 25s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}

.section-spacious > * {
  position: relative;
  z-index: 1;
}

.band-dark .section-spacious::before {
  background: radial-gradient(circle, rgba(47, 85, 212, 0.1) 0%, transparent 70%);
}

.band-dark .section-spacious::after {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
}

/* ===== FULL-WIDTH BANDS ===== */
.band {
  width: 100%;
  position: relative;
}

.band-subtle {
  background: var(--bg-alt);
  padding-bottom: clamp(24px, 3.5vw, 56px);
}

.band-dark {
  background: var(--dark-bg);
  color: var(--dark-text);
  clip-path: polygon(0 clamp(20px, 3vw, 48px), 100% 0, 100% calc(100% - clamp(20px, 3vw, 48px)), 0 100%);
  padding-top: calc(5rem + clamp(20px, 3vw, 48px));
  padding-bottom: calc(5rem + clamp(20px, 3vw, 48px));
  margin-top: calc(-1 * clamp(20px, 3vw, 48px));
  margin-bottom: calc(-1 * clamp(20px, 3vw, 48px));
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  --spotlight-opacity: 0;
}

/* Cursor-following spotlight on dark bands */
.band-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--spotlight-x) var(--spotlight-y),
    rgba(47, 85, 212, 0.08) 0%,
    rgba(124, 58, 237, 0.04) 25%,
    transparent 60%);
  opacity: var(--spotlight-opacity);
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.band-dark .eyebrow {
  color: var(--brand-3);
}

/* The brand blue eyebrow is 2.3:1 on the dark page background; the dark
   theme's lighter brand token reads. (Contrast sweep, 2026-09-09.) */
[data-theme="dark"] .eyebrow {
  color: var(--brand-dark);
}

.band-dark .lead {
  color: var(--dark-muted);
}

.band-dark h2 {
  color: var(--dark-text);
}

.band-dark .muted {
  color: var(--dark-muted);
}

.band-cta {
  clip-path: polygon(0 clamp(20px, 3vw, 48px), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(5rem + clamp(20px, 3vw, 48px));
  margin-top: calc(-1 * clamp(20px, 3vw, 48px));
  background: linear-gradient(135deg, var(--dark-bg) 0%, #0f1845 50%, var(--dark-bg) 100%);
  color: var(--dark-text);
  position: relative;
  overflow: hidden;
}

.band-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(47, 85, 212, 0.15) 0%, rgba(124, 58, 237, 0.05) 40%, transparent 60%);
  animation: pulse-glow 5s ease-in-out infinite;
  pointer-events: none;
}

.band-cta .lead {
  color: var(--dark-muted);
}

.band-cta .btn.ghost {
  border-color: var(--dark-line);
  background: rgba(255,255,255,0.05);
  color: var(--dark-text);
  backdrop-filter: blur(8px);
}

.band-cta .btn.ghost:hover {
  border-color: var(--brand-border);
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ===== GRIDS ===== */
.grid {
  display: grid;
  gap: 1.5rem;
  perspective: 1200px;
}

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

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

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

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

/* ===== CARDS ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from var(--border-angle, 0deg), var(--brand), var(--brand-2), var(--brand-3), var(--brand));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 2px;
}

.card:hover {
  box-shadow: var(--shadow-lg), 0 1px 0 rgba(255,255,255,0.8) inset, 0 0 30px rgba(47, 85, 212, 0.1);
  transform: translateY(-6px) rotateX(2deg);
  border-color: transparent;
}

.card:hover::before {
  opacity: 1;
  animation: border-rotate 3s linear infinite;
}

/* Dark band card overrides */
.band-dark .card {
  background: var(--dark-surface);
  border-color: var(--dark-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.band-dark .card:hover {
  border-color: rgba(47, 85, 212, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.band-dark .card h3 {
  color: var(--dark-text);
}

.muted {
  color: var(--muted);
}

/* ===== SECTION HEADERS ===== */
.section-header-center {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.section-header-center .lead {
  margin-bottom: 0;
}

.section-header-center h2 {
  margin-bottom: 0.75rem;
}

/* ===== COMPARISON TABLE ===== */
.comparison-table {
  margin-top: 2.5rem;
  overflow-x: auto;
  transform: perspective(1000px) rotateX(1deg);
  transition: transform 0.4s ease;
}

.comparison-table:hover {
  transform: perspective(1000px) rotateX(0deg);
}

.comparison-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
}

.comparison-table thead th {
  padding: 1.1rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: #1e293b !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid #334155 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.comparison-table thead th:first-child {
  background: var(--dark-surface);
  color: var(--dark-muted);
  text-align: left;
  width: 22%;
}

.comparison-table th.col-without {
  background: #1e293b !important;
  color: #fff !important;
  text-align: center;
}

.comparison-table .col-with {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  text-align: center;
}

.comparison-table tbody td {
  padding: 1rem 1.5rem;
  border-top: 1px solid #334155 !important;
  border-bottom: 1px solid #334155 !important;
  background: #1e293b !important;
  font-size: 0.93rem;
  line-height: 1.5;
}

.comparison-table tbody tr {
  background: var(--dark-surface);
  transition: background 0.2s ease;
}

.comparison-table tbody tr:hover td {
  background: #263354;
}

.comparison-table .cap-label {
  font-weight: 600;
  color: #f1f5f9;
  background: #1e293b;
  white-space: nowrap;
  font-size: 0.88rem;
}

.comparison-table .cell-without {
  color: #94a3b8;
  background: #1e293b;
  text-align: center;
  font-style: italic;
}

.comparison-table .cell-with {
  text-align: center;
  color: #fff;
  background: #1e293b;
  font-weight: 500;
}

.comparison-table .cell-with::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-3), var(--brand));
  margin-right: 0.6rem;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}

.comparison-table code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85em;
  background: rgba(47, 85, 212, 0.15);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--brand-3-text);
}

/* ===== HOMEPAGE STACK MATRIX ===== */
.stack-matrix {
  display: grid;
  grid-template-columns: auto auto 8.25rem;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem 1.1rem 1.1rem;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.stack-matrix-head,
.stack-matrix-row {
  display: contents;
}

.stack-matrix-head p {
  margin: 0;
  padding-bottom: 0.55rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid #334155;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  text-align: center;
}

.stack-matrix-head p:last-child {
  grid-column: 3;
  text-align: center;
}

.stack-matrix-systems {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stack-tile {
  display: grid;
  grid-template-columns: 2.05rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  row-gap: 0.15rem;
  width: 13.75rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.8rem 0.7rem 0.7rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%),
    #0f172a;
  border: 1px solid #334155;
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.stack-tile-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.stack-tile strong {
  grid-column: 2;
  display: block;
  color: #f1f5f9;
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.stack-tile p {
  grid-column: 2;
  margin: 0;
  color: #94a3b8;
  font-size: 0.74rem;
  line-height: 1.35;
  font-weight: 400;
}

.stack-tile-contact {
  border-color: rgba(47, 85, 212, 0.28);
}

.stack-tile-contact .stack-tile-icon {
  background: rgba(47, 85, 212, 0.18);
  color: #93c5fd;
}

.stack-tile-contact:hover {
  border-color: rgba(47, 85, 212, 0.55);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
}

.stack-tile-strand {
  border-color: rgba(124, 58, 237, 0.28);
}

.stack-tile-strand .stack-tile-icon {
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
}

.stack-tile-strand:hover {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
}

.stack-tile-surface {
  border-color: rgba(34, 211, 238, 0.22);
}

.stack-tile-surface .stack-tile-icon {
  background: rgba(34, 211, 238, 0.12);
  color: #67e8f9;
}

.stack-tile-surface:hover {
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
}

@media (hover: hover) {
  .stack-tile:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-tile {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .stack-tile:hover {
    transform: none;
  }
}

.stack-matrix-join {
  width: 10px;
  align-self: center;
  height: 10px;
  border-top: 2px solid #64748b;
  border-right: 2px solid #64748b;
  transform: rotate(45deg);
}

.stack-matrix-join-contact {
  border-color: #60a5fa;
}

.stack-matrix-join-strand {
  border-color: #a78bfa;
}

.stack-matrix-join-surface {
  border-color: #22d3ee;
}

.stack-matrix-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 0.5rem;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.stack-matrix-product img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.stack-matrix-product strong {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 650;
}

.stack-matrix-product-contact {
  border-color: rgba(47, 85, 212, 0.5);
  background:
    radial-gradient(circle at 50% 20%, rgba(47, 85, 212, 0.28), transparent 60%),
    #0f172a;
}

.stack-matrix-product-strand {
  border-color: rgba(124, 58, 237, 0.5);
  background:
    radial-gradient(circle at 50% 20%, rgba(124, 58, 237, 0.28), transparent 60%),
    #0f172a;
}

.stack-matrix-product-strand img {
  filter: saturate(1.6) brightness(1.15) contrast(1.05);
}

.stack-matrix-product-surface {
  border-color: rgba(34, 211, 238, 0.45);
  background:
    radial-gradient(circle at 50% 20%, rgba(34, 211, 238, 0.2), transparent 60%),
    #0f172a;
}

.stack-matrix-product-surface img {
  transform: scale(1.18);
}

@media (max-width: 900px) {
  .stack-matrix {
    display: block;
    width: 100%;
  }

  .stack-matrix-head,
  .stack-matrix-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .stack-matrix-head p:last-child {
    grid-column: 1;
    display: none;
  }

  .stack-matrix-join {
    display: none;
  }

  .stack-matrix-row + .stack-matrix-row {
    margin-top: 0.65rem;
  }

  .stack-tile {
    width: auto;
    min-width: 0;
    flex: 1 1 calc(50% - 0.5rem);
  }

  .stack-matrix-product {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0.65rem 0.9rem;
    text-align: left;
  }

  .stack-matrix-product img {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 600px) {
  .stack-matrix {
    padding: 0.9rem;
  }

  .stack-tile {
    flex: 1 1 100%;
  }
}

/* ===== PRODUCT CARDS ===== */
.product-grid {
  position: relative;
  z-index: 2;
}

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(170deg, #0f172a 0%, #0f1845 40%, #0f172a 100%);
  color: var(--dark-text);
  border: 1px solid rgba(75, 111, 230, 0.25);
  box-shadow: 0 0 0 1px rgba(75, 111, 230, 0.08), 0 4px 24px rgba(0, 0, 0, 0.2);
}

.product-card ul {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1.5rem;
}

/* Pin the CTA to the card bottom so all three align regardless of body length;
   the list's bottom margin keeps a gap on the tallest card. */
.product-card .card-actions {
  margin-top: auto;
}

.product-card ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  color: #b8c5d6;
  line-height: 1.45;
}

.product-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.product-card-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  margin: 0 auto 0.6rem;
  border-radius: 14px;
  background-color: var(--product-logo-space-fill);
  background-image: var(--product-logo-space-tile);
  background-size: var(--product-logo-tile-size) var(--product-logo-tile-size);
  background-repeat: repeat;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  animation: float-slow 6s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card-icon {
  transform: scale(1.05);
  animation-play-state: paused;
}

.product-card h3 {
  text-align: center;
  color: var(--dark-text);
}

.product-card .muted {
  color: #b8c5d6;
}

.product-card .btn.ghost {
  color: var(--dark-text);
  border-color: rgba(255, 255, 255, 0.2);
  background: transparent;
}

.product-card .btn.ghost:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.product-card-contact {
  border-top: 4px solid transparent;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.product-card-contact:hover {
  border-top-color: var(--brand);
}

.product-card-contact::before {
  display: none;
}

.product-card-contact ul li::before {
  background: var(--brand);
  opacity: 0.7;
}

.product-card-strand {
  border-top: 4px solid transparent;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.product-card-strand:hover {
  border-top-color: var(--brand-2);
}

.product-card-strand .product-card-icon {
  filter: saturate(1.6) brightness(1.15) contrast(1.05);
}

.product-card-strand::before {
  display: none;
}

.product-card-strand ul li::before {
  background: var(--brand-2);
  opacity: 0.7;
}

.product-card-surface {
  border-top: 4px solid transparent;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.product-card-surface:hover {
  border-top-color: #22d3ee;
}

.product-card-surface .product-card-icon {
  transform: scale(1.22);
}

.product-card-surface::before {
  display: none;
}

.product-card-surface ul li::before {
  background: #22d3ee;
  opacity: 0.7;
}

.card-actions {
  justify-content: flex-start;
  margin-top: 1.25rem;
}

.product-chip-alt {
  background: linear-gradient(135deg, var(--brand-2), #a855f7);
}

/* ===== SDK CARDS ===== */
.sdk-card {
  text-align: center;
  background: linear-gradient(170deg, #0f172a 0%, #0f1845 40%, #0f172a 100%);
  color: var(--dark-text);
  border: 1px solid rgba(75, 111, 230, 0.25);
  box-shadow: 0 0 0 1px rgba(75, 111, 230, 0.08), 0 4px 24px rgba(0, 0, 0, 0.2);
}

.sdk-card h3 {
  color: var(--dark-text);
}

.sdk-card .muted {
  color: #b8c5d6;
}

.sdk-card::before {
  display: none;
}

.sdk-card:hover {
  transform: translateY(-6px);
}

.sdk-icon-img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sdk-card:hover .sdk-icon-img {
  transform: scale(1.1);
  box-shadow: var(--shadow-brand);
}

/* ===== AI VISUAL ===== */
.ai-home-section {
  padding: 4rem 0 6rem;
}
.ai-visual {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ai-visual-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-visual-card:hover {
  box-shadow: var(--shadow-brand);
  transform: translateX(-6px);
  border-left-color: var(--brand-2);
}

.ai-visual-card strong {
  display: block;
  margin-bottom: 0.1rem;
}

.ai-visual-card .muted {
  font-size: 0.88rem;
  margin: 0;
}

.ai-logo-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.ai-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.ai-logo:hover {
  opacity: 1;
}

.ai-logo-mcp {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* ===== USE CASE CARDS ===== */
.usecase-card {
  text-align: center;
  padding-top: 2.25rem !important;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
a.usecase-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
a.usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.usecase-card::before {
  display: none;
}

/* Material Symbols on use case cards (see BaseLayout font link) */
.usecase-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 28px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.usecase-link-card .usecase-card-icon {
  margin: 0 0 0.75rem;
  align-self: flex-start;
}

.usecase-card:hover .usecase-card-icon,
.usecase-link-card:hover .usecase-card-icon {
  transform: translateY(-2px);
}

.usecase-card-icon-ops {
  background: rgba(47, 85, 212, 0.12);
  color: var(--brand);
}

.usecase-card-icon-api {
  background: rgba(124, 58, 237, 0.12);
  color: var(--brand-2);
}

.usecase-card-icon-ai {
  background: rgba(6, 182, 212, 0.12);
  color: #0891b2;
}

.band-dark .usecase-card-icon-ops {
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
}

.band-dark .usecase-card-icon-api {
  background: rgba(167, 139, 250, 0.15);
  color: #c4b5fd;
}

.band-dark .usecase-card-icon-ai {
  background: rgba(34, 211, 238, 0.12);
  color: #67e8f9;
}

/* ===== TRUST STRIP ===== */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  justify-content: center;
}

.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(47, 85, 212, 0.04);
  transition: all 0.3s ease;
}

.trust-strip span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  flex-shrink: 0;
}

.trust-strip span:hover {
  border-color: var(--brand-border);
  color: var(--brand-dark);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

[data-theme="dark"] .trust-strip span {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--text);
  box-shadow: none;
}

[data-theme="dark"] .trust-strip span:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--brand-border);
  color: var(--brand-dark);
}

/* ===== TIMELINE STEPS ===== */
.timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 1rem;
}

/* Connecting line - background track */
.timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 3rem;
  right: 3rem;
  height: 3px;
  background: var(--line);
  border-radius: 3px;
}

/* Animated gradient fill over the track */
.timeline::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 3rem;
  right: 3rem;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3));
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline.is-visible::after {
  transform: scaleX(1);
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 1;
}

.timeline-node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--line);
  position: relative;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

/* Fill nodes when section scrolls into view */
.timeline.is-visible .timeline-step:nth-child(1) .timeline-node { border-color: var(--brand); transition-delay: 0.2s; }
.timeline.is-visible .timeline-step:nth-child(2) .timeline-node { border-color: var(--brand); transition-delay: 0.4s; }
.timeline.is-visible .timeline-step:nth-child(3) .timeline-node { border-color: var(--brand); transition-delay: 0.6s; }
.timeline.is-visible .timeline-step:nth-child(4) .timeline-node { border-color: var(--brand-2); transition-delay: 0.8s; }
.timeline.is-visible .timeline-step:nth-child(5) .timeline-node { border-color: var(--brand-3); transition-delay: 1.0s; }

.timeline-node::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline.is-visible .timeline-node::after {
  opacity: 1;
  transform: scale(1);
}

.timeline.is-visible .timeline-step:nth-child(1) .timeline-node::after { transition-delay: 0.3s; }
.timeline.is-visible .timeline-step:nth-child(2) .timeline-node::after { transition-delay: 0.5s; }
.timeline.is-visible .timeline-step:nth-child(3) .timeline-node::after { transition-delay: 0.7s; }
.timeline.is-visible .timeline-step:nth-child(4) .timeline-node::after { transition-delay: 0.9s; }
.timeline.is-visible .timeline-step:nth-child(5) .timeline-node::after { transition-delay: 1.1s; }

.timeline-step:hover .timeline-node {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 6px rgba(47,85,212,0.12);
  animation: glow-ring 2s ease-in-out infinite;
}

.timeline-step:hover .timeline-node::after {
  opacity: 1;
  transform: scale(1);
}

.timeline-content {
  margin-top: 1rem;
  max-width: 160px;
}

.timeline-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  margin-bottom: 0.35rem;
}

.timeline-content p {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

/* ===== PRODUCT PAGES ===== */

/* Screenshot showcase (hero-level screenshot) */
/* Product hero (dark variant) */
.hero-product {
  background: linear-gradient(170deg, #0f172a 0%, #0f1845 40%, #0f172a 100%);
  color: var(--dark-text);
}
.hero-product .hero-glow {
  background: radial-gradient(
    circle,
    rgba(47, 85, 212, 0.15) 0%,
    rgba(124, 58, 237, 0.08) 30%,
    rgba(6, 182, 212, 0.04) 50%,
    transparent 70%
  );
}
.hero-product .hero-grid {
  background-image: radial-gradient(circle, rgba(47, 85, 212, 0.2) 1px, transparent 1px);
  opacity: 0.4;
}
.hero-product .eyebrow {
  color: var(--brand-3);
}
.hero-product .lead {
  color: rgba(241, 245, 249, 0.7);
}
.hero-product .btn.ghost {
  color: var(--dark-text);
  border-color: rgba(255, 255, 255, 0.2);
  background: transparent;
}
.hero-product .btn.ghost:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}
.product-hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}
.product-hero-brand .eyebrow {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
}
.product-hero-nameplate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 640px;
  text-align: center;
  position: relative;
  padding: 2rem 2.5rem 1.75rem;
}
.product-hero-logo {
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: 24px;
  background-color: var(--product-logo-space-fill);
  background-image: var(--product-logo-space-tile);
  background-size: var(--product-logo-tile-size) var(--product-logo-tile-size);
  background-repeat: repeat;
  padding: 14px;
  box-sizing: border-box;
  overflow: hidden;
  filter: drop-shadow(0 12px 40px rgba(47, 85, 212, 0.35))
         drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.hero-product-surface .product-hero-logo {
  transform: scale(1.22);
}

.product-hero-tagline {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark-text);
  margin: 0;
  position: relative;
  z-index: 1;
}
.product-hero-tagline .highlight {
  background: linear-gradient(135deg, #7b96f2, var(--brand-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.screenshot-showcase {
  max-width: 900px;
  margin: 3rem auto 0;
  position: relative;
  z-index: 1;
}

.screenshot-showcase .screenshot-placeholder {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(47, 85, 212, 0.08),
    0 0 40px rgba(47, 85, 212, 0.06);
  transform: perspective(1000px) rotateX(2deg);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.screenshot-showcase .screenshot-placeholder:hover {
  transform: perspective(1000px) rotateX(0deg) scale(1.005);
  box-shadow:
    0 32px 100px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(47, 85, 212, 0.12),
    0 0 60px rgba(47, 85, 212, 0.08);
}

.hero-product .screenshot-showcase .screenshot-placeholder {
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(47, 85, 212, 0.2),
    0 0 60px rgba(47, 85, 212, 0.12);
}
.hero-product .screenshot-showcase .screenshot-placeholder:hover {
  box-shadow:
    0 32px 100px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(47, 85, 212, 0.3),
    0 0 80px rgba(47, 85, 212, 0.15);
}

/* Step cards with numbers */
.step-card {
  text-align: center;
}

.step-card::before {
  display: none;
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 4px 16px rgba(47, 85, 212, 0.3);
}

/* Feature cards */
.feature-card {
  text-align: center;
}

.feature-card::before {
  display: none;
}

.feature-card .ai-logo-row {
  margin-bottom: 0.75rem;
}

/* Node type badges */
.node-card {
  text-align: center;
}

.node-card::before {
  display: none;
}

.node-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.node-badge-trigger { background: rgba(47, 85, 212, 0.15); color: var(--brand); }
.node-badge-logic { background: rgba(245, 158, 11, 0.15); color: var(--accent-warm); }
.node-badge-action { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
.node-badge-ai { background: rgba(124, 58, 237, 0.15); color: var(--brand-2); }
.node-badge-code { background: rgba(6, 182, 212, 0.15); color: var(--brand-3); }
.node-badge-approval { background: rgba(244, 63, 94, 0.15); color: var(--accent-rose); }

.band-dark .node-badge-trigger { background: rgba(47, 85, 212, 0.25); }
.band-dark .node-badge-logic { background: rgba(245, 158, 11, 0.25); }
.band-dark .node-badge-action { background: rgba(16, 185, 129, 0.25); }
.band-dark .node-badge-ai { background: rgba(124, 58, 237, 0.25); }
.band-dark .node-badge-code { background: rgba(6, 182, 212, 0.25); }
.band-dark .node-badge-approval { background: rgba(244, 63, 94, 0.25); }

/* Integration cards */
.integration-card {
  text-align: center;
  padding: 1.5rem;
}

.integration-card::before {
  display: none;
}

.integration-card strong {
  display: block;
  margin-bottom: 0.35rem;
}

/* Connector icon grid */
.connector-category {
  margin-bottom: 2.5rem;
}
.connector-category:last-child {
  margin-bottom: 0;
}
.connector-category-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.connector-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.connector-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 96px;
  padding: 1rem 0.5rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.connector-tile:hover {
  transform: translateY(-3px);
  border-color: var(--brand-border);
  box-shadow: 0 6px 20px rgba(47, 85, 212, 0.1);
}
.connector-tile img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.connector-tile span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
}
.connector-tile-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-light);
  border-radius: 8px;
  letter-spacing: -0.02em;
}

/* Product page code grid */
.product-code-grid .hero-code {
  margin: 0;
  max-width: none;
  height: 100%;
}

/* ===== CTA ===== */
.cta {
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta .btn.primary {
  font-size: 1.1rem;
  padding: 1rem 2.25rem;
  box-shadow: 0 4px 24px rgba(47, 85, 212, 0.3), 0 0 60px rgba(47, 85, 212, 0.15);
  animation: cta-pulse 3s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(47, 85, 212, 0.3), 0 0 60px rgba(47, 85, 212, 0.15); }
  50% { box-shadow: 0 4px 32px rgba(47, 85, 212, 0.4), 0 0 80px rgba(47, 85, 212, 0.25); }
}

/* ===== SPLIT / OFFSET LAYOUTS ===== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Give the screenshot/visual more room than the copy so dense dashboard
   captures are legible without needing the zoom control. Every .split on the
   site is .split-left, which places the visual in the first grid column. */
.split-left {
  grid-template-columns: 1.55fr 1fr;
}

.split-left .split-visual {
  order: -1;
}

.split-text .eyebrow {
  text-align: left;
}

.split-text h2 {
  text-align: left;
}
.section-partner-logo {
  height: 2.5rem; width: auto; display: block; margin-bottom: 0.5rem; opacity: 0.85;
}

.split-text .muted {
  text-align: left;
}

/* ===== STORY RAIL (legacy) ===== */
.story-rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.story-rail article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.story-rail article:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.story-rail article:first-child {
  border-top: 3px solid var(--accent-rose);
}

.story-rail article:last-child {
  border-top: 3px solid var(--accent-green);
}

.story-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.7rem;
  border-radius: 6px;
  margin: 0 0 0.75rem;
}

.story-rail article:first-child .story-kicker {
  color: var(--accent-rose-text);
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

.story-rail article:last-child .story-kicker {
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

/* ===== FEATURE EMPHASIS ===== */
.feature-emphasis {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.feature-emphasis h2 {
  background: linear-gradient(135deg, var(--text), var(--brand));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== PRODUCT CHIPS ===== */
.product-chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.6rem;
}

/* ===== PRICING ===== */
.pricing-intro-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: -0.5rem;
  margin-bottom: 2rem;
}

.product-pricing-header {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.pricing-cards {
  margin-bottom: 0.5rem;
}

.plan-card {
  text-align: center;
  position: relative;
  padding: 2rem 1.5rem !important;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.plan-card.featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-brand);
  background: linear-gradient(180deg, rgba(47, 85, 212, 0.02) 0%, var(--surface) 100%);
}

.plan-card.featured:hover {
  box-shadow: 0 0 0 2px var(--brand), 0 8px 30px rgba(47, 85, 212, 0.2);
}

.plan-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  margin: 0 0 0.5rem;
  box-shadow: 0 2px 6px rgba(47, 85, 212, 0.25);
}

.plan-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--text);
}

.plan-price {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--text);
  letter-spacing: -0.02em;
}

.plan-price span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
}

/* ===== DOCS SELECTOR ===== */
.selector-card {
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.selector-card:hover {
  transform: translateY(-4px);
}

.selector-card-icon {
  width: 140px;
  height: 140px;
  object-fit: contain;
  display: block;
  margin: 0 auto 0.75rem;
  border-radius: 24px;
  background-color: var(--product-logo-space-fill);
  background-image: var(--product-logo-space-tile);
  background-size: var(--product-logo-tile-size) var(--product-logo-tile-size);
  background-repeat: repeat;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.selector-card h2 {
  text-align: center;
  margin-bottom: 0.75rem;
}

.selector-card-contact {
  border-top: 4px solid var(--brand);
}

.selector-card-contact::before {
  display: none;
}

.selector-card-contact:hover {
  border-color: var(--brand);
  border-top-color: var(--brand);
  box-shadow: var(--shadow-brand);
}

.selector-card-strand {
  border-top: 4px solid var(--brand-2);
}

.selector-card-strand .selector-card-icon {
  filter: saturate(1.6) brightness(1.15) contrast(1.05);
}

.selector-card-strand::before {
  display: none;
}

.selector-card-strand:hover {
  border-color: var(--brand-2);
  border-top-color: var(--brand-2);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15);
}

.selector-card-surface {
  border-top: 4px solid #22d3ee;
}

.selector-card-surface .selector-card-icon {
  padding: 0;
  object-fit: cover;
}

.selector-card-surface::before {
  display: none;
}

.selector-card-surface:hover {
  border-color: #22d3ee;
  border-top-color: #22d3ee;
  box-shadow: 0 4px 20px rgba(34, 211, 238, 0.12);
}

/* Guaranteed gap above the button: margin-top:auto collapses to 0 on the
   tallest card, so the list carries the minimum spacing. */
.selector-card ul {
  margin-bottom: 1.5rem;
}
.selector-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.docs-lead {
  max-width: 820px;
}

.docs-chooser-hint {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.docs-chooser-hint span {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  text-align: center;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-border);
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all var(--transition);
}

.docs-chooser-hint span:hover {
  background: var(--brand-border);
  box-shadow: var(--shadow-sm);
}

.docs-quick-links {
  margin-top: 1.5rem;
}

/* Related pages */
/* No card around the chips — the chips carry their own borders, so the box was
   a container inside a container holding four small things and a lot of air. */
.docs-related {
  display: block;
  margin-top: 2.5rem;
}

.docs-related h3 {
  margin: 0 0 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted, #64748b);
}

/* Chips rather than a run of inline links — at full width a flex row of bare
   text links reads as one long sentence and the targets are hard to hit. */
.docs-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.docs-related li a {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color var(--transition), background var(--transition);
}

.docs-related li a:hover {
  border-color: var(--brand);
  background: var(--brand-light, rgba(75, 111, 230, 0.06));
}

/* Prev / Next pager — two equal halves so the row reads as one control and
   fills the column instead of leaving a gap in the middle. */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

[data-theme="dark"] .docs-pager {
  border-color: #334155;
}

.docs-pager-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  padding: 0.9rem 1.15rem;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e2e8f0);
  transition: border-color 0.15s, background 0.15s;
}

.docs-pager-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* The arrow does the "which way" work so the label doesn't have to shout. */
.docs-pager-arrow {
  flex: none;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text-muted, #64748b);
  transition: color 0.15s, transform 0.15s;
}

.docs-pager-link.next {
  justify-content: flex-end;
}

.docs-pager-link:hover .docs-pager-arrow {
  color: var(--brand);
}

.docs-pager-link.prev:hover .docs-pager-arrow {
  transform: translateX(-2px);
}

.docs-pager-link.next:hover .docs-pager-arrow {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .docs-pager-arrow {
    transition: color 0.15s;
  }

  .docs-pager-link:hover .docs-pager-arrow {
    transform: none;
  }
}

[data-theme="dark"] .docs-pager-link {
  border-color: #334155;
}

.docs-pager-link:hover {
  border-color: var(--brand);
  background: var(--brand-light, rgba(75, 111, 230, 0.06));
}

/* Scoped to the label span only. text-transform inherits, so a bare
   `.docs-pager-link span` also hit the wrapper and uppercased the page title
   inside it ("AI Skills" → "AI SKILLS"). */
.docs-pager-body > span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
}

.docs-pager-link strong {
  font-size: 0.95rem;
  color: var(--brand);
}

.docs-pager-link.next {
  text-align: right;
  grid-column: 2;
}

.docs-pager-spacer {
  display: block;
}

@media (max-width: 640px) {
  .docs-pager {
    grid-template-columns: 1fr;
  }

  .docs-pager-link.next {
    grid-column: 1;
  }
}

.docs-back-link {
  margin-top: 1.25rem;
  font-weight: 600;
}

.docs-back-link a {
  text-decoration: none;
  color: var(--brand);
}

.docs-back-link a:hover {
  text-decoration: underline;
}

/* Brand blue on the dark raised surface is 2.3:1; use the lighter brand token. */
[data-theme="dark"] .docs-pager-link strong,
[data-theme="dark"] .docs-back-link a,
[data-theme="dark"] .swagger-back a,
[data-theme="dark"] .docs-links-list a,
[data-theme="dark"] .doc-anchor,
[data-theme="dark"] .docs-content a:not(.btn) {
  color: var(--brand-dark);
}

/* ===== DOCS LAYOUT ===== */
.topic-hint {
  display: inline-block;
  margin: 0.2rem 0 1.1rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-border);
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: 0.88rem;
  font-weight: 600;
}

/* Docs shell. This is an app-like three-column layout, not a marketing page,
   so it earns more width than .container-wide gives it. The extra width goes to
   the chrome (sidebar, TOC) and to wide content — tables, code, screenshots —
   while prose keeps a readable measure. See .docs-content below. */
.docs-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 2.25rem;
  align-items: start;
}

.docs-layout--with-toc {
  grid-template-columns: 300px minmax(0, 1fr) 250px;
}

.docs-layout.container-wide {
  width: min(1600px, calc(100% - 3rem));
}

@media (min-width: 1700px) {
  .docs-layout.container-wide {
    width: min(1760px, calc(100% - 4rem));
  }

  .docs-layout--with-toc {
    grid-template-columns: 320px minmax(0, 1fr) 280px;
    gap: 2.75rem;
  }
}

.docs-sidebar {
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 0.9rem;
}

.docs-sidebar h2 {
  font-size: 1rem;
  margin-bottom: 0.7rem;
}

.docs-sidebar-head {
  position: sticky;
  top: 0;
  background: var(--surface);
  padding-bottom: 0.65rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--line);
}

.docs-search {
  width: 100%;
  padding: 0.46rem 0.58rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 0.86rem;
  transition: all var(--transition);
}

.docs-search:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47, 85, 212, 0.12);
}

.docs-sidebar ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.docs-sidebar li {
  margin: 0;
}

.sidebar-group {
  margin-top: 0.45rem;
}

.sidebar-group summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
  padding: 0.25rem 0.1rem;
}

.sidebar-group summary::-webkit-details-marker {
  display: none;
}

.sidebar-subgroup {
  margin-top: 0.2rem;
}

.sidebar-subgroup summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}

.sidebar-subgroup summary:hover {
  color: var(--brand-dark);
}

.sidebar-subgroup summary::-webkit-details-marker {
  display: none;
}

.sidebar-subgroup ul {
  padding-left: 0.75rem;
}

.docs-sidebar a {
  display: block;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--muted);
  transition: background var(--transition), color var(--transition);
}

.docs-sidebar a:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
}

.sidebar-link.active {
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 600;
  border-left: 3px solid var(--brand);
}

.docs-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2.5rem 3rem 3rem;
  min-width: 0;
  line-height: 1.7;
}

/* Prose keeps a readable measure no matter how wide the shell gets — past
   ~80 characters a line, the eye loses its place returning to the left edge.
   Everything that actually benefits from width opts out just below. */
.docs-content > p,
.docs-content > ul,
.docs-content > ol,
.docs-content > blockquote,
.docs-content > .callout,
.docs-content > .steps {
  max-width: 78ch;
}

/* Wide content uses the full column: tables you'd otherwise scroll, code you'd
   otherwise wrap, and screenshots — which are the whole point of having room. */
.docs-content > .table-wrap,
.docs-content > .code-block,
.docs-content > p:has(img) {
  max-width: none;
}

.docs-content > p:has(img) {
  margin-bottom: 0.5rem;
}

.docs-content h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  line-height: 1.25;
}

.docs-content h2 {
  font-size: 1.45rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 84px;
}

.docs-content h3 {
  font-size: 1.15rem;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 84px;
}

.docs-content h1:first-of-type + p {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.docs-content p {
  margin-bottom: 1rem;
}

.docs-content ul,
.docs-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.docs-content li {
  margin-bottom: 0.4rem;
}

.docs-content h2:first-of-type {
  margin-top: 2rem;
}

.docs-page-toc {
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 0.9rem;
}

.docs-page-toc h3 {
  margin-top: 0.2rem;
  font-size: 0.92rem;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-item {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 0.28rem 0.45rem;
  color: var(--muted);
  font-size: 0.84rem;
  transition: background var(--transition), color var(--transition);
}

.toc-item:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
}

.toc-h3 {
  margin-left: 0.55rem;
}

.toc-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.docs-page-toc a.active {
  color: var(--brand);
  font-weight: 500;
}

.docs-layout--strand .sidebar-link.active {
  border-left-color: var(--brand-2);
}

.docs-layout--surface .sidebar-link.active {
  border-left-color: #22d3ee;
}

/* Generated-docs code chrome — light wells, dark terminals */
.code-block {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--code-header-bg);
}

.code-label {
  font-size: 0.72rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.copy-btn {
  font-size: 0.72rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.copy-btn:hover {
  color: var(--text);
  background: var(--bg-alt);
  border-color: var(--brand-border);
}

.code-body {
  overflow-x: auto;
}

.code-body pre {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  /* The well supplies the background, so the text must follow the theme:
     a fenced block with no language kept the dark-terminal light text on
     the light well and disappeared (1.1:1). Prism token colors still win. */
  color: var(--text);
}

/* Outranks the later .docs-content pre/code rules; Prism token spans keep
   their own colors. */
.docs-content .code-body pre,
.docs-content .code-body pre code {
  color: var(--text);
}

.callout {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
}

.callout strong {
  display: inline;
}

.callout-info {
  background: var(--callout-info-bg);
  border-left: 3px solid var(--brand);
}

.callout-warning {
  background: var(--callout-warn-bg);
  border-left: 3px solid var(--accent-warm);
}

.callout-success {
  background: var(--callout-success-bg);
  border-left: 3px solid var(--accent-green);
}

.steps {
  margin: 1.5rem 0;
}

.step {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.step-body h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.step-body p {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.docs-content img {
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: zoom-in;
  display: block;
  transition: border-color 0.15s;
}

.docs-content img:hover {
  border-color: var(--brand);
}

.docs-content :is(h2, h3, h4, h5, h6) {
  scroll-margin-top: 90px;
}

.doc-anchor {
  margin-left: 0.4em;
  color: var(--brand);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s;
}

.docs-content :is(h2, h3, h4, h5, h6):hover .doc-anchor,
.doc-anchor:focus {
  opacity: 1;
}

.doc-anchor:hover {
  text-decoration: underline;
}

@media (hover: none) {
  .doc-anchor {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-content img {
    transition: none;
  }
}

.docs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background: rgba(8, 11, 20, 0.92);
  cursor: zoom-out;
}

.docs-lightbox.open {
  display: flex;
}

.docs-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
}

.docs-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.docs-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.docs-lightbox-hint {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: rgba(241, 245, 249, 0.6);
}

.swagger-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}

.swagger-back {
  margin-bottom: 1.5rem;
}

.swagger-back a {
  color: var(--brand);
  text-decoration: none;
  font-size: 0.95rem;
}

.swagger-back a:hover {
  text-decoration: underline;
}

.swagger-ui .topbar {
  display: none;
}

.swagger-ui .info hgroup.main {
  margin: 0;
}

.swagger-ui .info .title,
.swagger-ui .opblock-tag,
.swagger-ui .btn {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.swagger-ui .info .title {
  color: var(--text);
}

.swagger-ui .opblock .opblock-summary-method,
.swagger-ui .opblock .opblock-summary-path,
.swagger-ui table tbody tr td:first-of-type {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

[data-theme="dark"] .swagger-ui,
[data-theme="dark"] .swagger-ui .info .title,
[data-theme="dark"] .swagger-ui .opblock-tag,
[data-theme="dark"] .swagger-ui p,
[data-theme="dark"] .swagger-ui .markdown p,
[data-theme="dark"] .swagger-ui .markdown li,
[data-theme="dark"] .swagger-ui table thead tr th,
[data-theme="dark"] .swagger-ui table tbody tr td,
[data-theme="dark"] .swagger-ui .parameter__name,
[data-theme="dark"] .swagger-ui label,
[data-theme="dark"] .swagger-ui .tab li {
  color: var(--text);
}

[data-theme="dark"] .swagger-ui .scheme-container,
[data-theme="dark"] .swagger-ui section.models,
[data-theme="dark"] .swagger-ui .opblock {
  background: var(--surface);
}

[data-theme="dark"] .swagger-ui .opblock {
  border-color: var(--line);
}

[data-theme="dark"] .swagger-ui .model-box,
[data-theme="dark"] .swagger-ui input[type="text"],
[data-theme="dark"] .swagger-ui select,
[data-theme="dark"] .swagger-ui textarea {
  background: var(--bg);
  color: var(--text);
  border-color: var(--line);
}

.docs-content > h1 + h1 {
  display: none;
}

.docs-links-list {
  margin-top: 0.25rem;
}

.docs-links-list li {
  margin-bottom: 0.28rem;
}

.docs-links-list a {
  text-decoration: none;
  color: var(--brand);
  font-weight: 500;
  transition: all var(--transition);
}

.docs-links-list a:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

/* ===== LISTS ===== */
ul {
  margin: 0.65rem 0 0;
  padding-left: 1.15rem;
}

li {
  margin-bottom: 0.25rem;
}

li::marker {
  color: var(--brand);
}

/* ===== TABLES ===== */
.table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

th,
td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}

th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr {
  transition: background var(--transition);
}

tbody tr:hover {
  background: rgba(47, 85, 212, 0.03);
}

/* ===== FOOTER ===== */
.site-footer {
  margin-top: 0;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3)) 1;
  background: var(--surface);
}

.footer-content {
  min-height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.footer-content a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-content a:hover {
  color: var(--brand-2);
  text-decoration: underline;
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3));
  transform-origin: left;
  transform: scaleX(0);
  z-index: 10000;
  pointer-events: none;
}

/* ===== SECTION PROGRESS DOTS ===== */
.section-dots {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100;
}

.section-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.4;
}

.section-dots .dot:hover {
  opacity: 0.8;
  border-color: var(--brand);
}

.section-dots .dot.active {
  opacity: 1;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 0 8px rgba(47, 85, 212, 0.4);
  transform: scale(1.3);
}

/* ===== SCROLL HINT ===== */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.scroll-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-hint span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.scroll-hint-arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  animation: bounce-arrow 2s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes bounce-arrow {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.6; }
  50% { transform: rotate(45deg) translateY(6px); opacity: 1; }
}

/* ===== SCROLL REVEAL ANIMATION ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="left"] {
  transform: translateX(-40px) translateY(0);
}

[data-reveal="right"] {
  transform: translateX(40px) translateY(0);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0);
}

/* Staggered children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Children beyond the staggered six reveal together after the ramp;
   without this catch-all, a 7th+ child stays invisible forever. */
[data-reveal-stagger].is-visible > * { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.2s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.3s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.4s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.5s; }
/* Hover transitions on revealed cards must not inherit the stagger delay. */
[data-reveal-stagger].is-visible > *:hover { transition-delay: 0s; }

/* ===== ADMONITIONS (docs) ===== */
.admonition {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border-left: 4px solid var(--brand);
  background: var(--brand-light);
}

.admonition-title {
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--brand-dark);
}

.admonition-warning {
  border-left-color: var(--accent-warm);
  background: #fffbeb;
}

.admonition-warning .admonition-title {
  color: #92400e;
}

.admonition-danger {
  border-left-color: var(--accent-rose);
  background: #fff1f2;
}

.admonition-danger .admonition-title {
  color: #9f1239;
}

/* ===== CODE BLOCKS (docs) ===== */
.docs-content pre {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.6;
  border: 1px solid #1e293b;
}

.docs-content code {
  font-family: "JetBrains Mono", "Fira Code", Menlo, Monaco, monospace;
  font-size: 0.88em;
}

.docs-content :not(pre) > code {
  background: var(--brand-light);
  color: var(--brand-dark);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ===== PRICING PAGE ===== */
.pricing-hero-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
  color: var(--dark-text);
}

.pricing-product-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 14px;
  background-color: var(--product-logo-space-fill);
  background-image: var(--product-logo-space-tile);
  background-size: var(--product-logo-tile-size) var(--product-logo-tile-size);
  background-repeat: repeat;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
}

.pricing-product-icon-strand {
  filter: saturate(1.6) brightness(1.15) contrast(1.05);
}

.pricing-product-icon-surface {
  transform: scale(1.22);
}

.product-pricing-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.product-pricing-header h2 {
  margin: 0;
}

.product-pricing-header .muted {
  margin: 0;
}

.plan-card .btn {
  margin-top: auto;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1.25rem;
  text-align: left;
  flex: 1;
}

.plan-features li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}

.plan-features li:last-child {
  border-bottom: 0;
}

.plan-features li::before {
  content: "\2713  ";
  color: var(--brand);
  font-weight: 700;
}

/* Collapsible comparison tables */
.pricing-details {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.pricing-details summary {
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand);
  padding: 0.5rem 0;
  user-select: none;
}

.pricing-details summary:hover {
  color: var(--brand-hover);
}

.pricing-details .table-wrap {
  margin-top: 0.75rem;
}

.pricing-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.pricing-actions .pricing-details {
  margin: 0;
}

.cu-calc-link {
  font-size: 0.85rem !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap;
}

/* ===== PRICING ADD-ONS & INCLUDES STRIP ===== */
.pricing-addons {
  margin-top: 1.5rem;
}

.pricing-addon-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
}

.pricing-addon-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--heading);
  margin-right: 0.5rem;
}

.pricing-addon-option {
  font-size: 0.88rem;
  color: var(--text);
  background: var(--brand-light);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius);
}

.pricing-addon-option strong {
  color: var(--brand);
}

.pricing-addon-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin-left: auto;
}

.pricing-includes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding: 0.75rem 0;
}

.pricing-includes-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  margin-right: 0.25rem;
}

.pricing-includes span {
  font-size: 0.85rem;
  color: var(--text);
  padding: 0.2rem 0;
}

.pricing-includes span:not(:last-child)::after {
  content: "\00b7";
  margin-left: 0.75rem;
  color: var(--muted);
}

/* Surface lists what it detects rather than which features ship, so the entries
   are sentences rather than labels. The inline middot run the other products use
   is unreadable at that length. */
.pricing-includes-stacked {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
  gap: 0.4rem 2rem;
}

.pricing-includes-stacked .pricing-includes-label {
  grid-column: 1 / -1;
  margin-bottom: 0.35rem;
}

/* The inline variant separates items with a middot via
   .pricing-includes span:not(:last-child)::after — which is more specific than a
   plain .pricing-includes-stacked span::after and wins, leaving a stray dot after
   every row. Match its shape so this actually overrides it. */
.pricing-includes.pricing-includes-stacked span:not(:last-child)::after {
  content: none;
  margin-left: 0;
}

.pricing-includes-stacked span {
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}

.pricing-includes-stacked span::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-size: 0.9em;
}

.pricing-note-block {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.pricing-note-block h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.pricing-note-block p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 70ch;
}

.pricing-note-block p:last-child { margin-bottom: 0; }

.bundle-card {
  background: linear-gradient(135deg, rgba(47, 85, 212, 0.05), rgba(124, 58, 237, 0.08), rgba(6, 182, 212, 0.05));
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 3rem;
}

.bundle-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.bundle-inner h2 {
  margin-bottom: 0.5rem;
}

.bundle-inner p {
  margin: 0;
  color: var(--muted);
}

/* ===== CU CALCULATOR ===== */
.cu-calc {
  max-width: 900px;
  margin: 0 auto;
}

.cu-calc-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.cu-preset {
  background: var(--dark-surface);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  cursor: pointer;
  text-align: left;
  color: var(--dark-muted);
  transition: all var(--transition);
  font-family: inherit;
}

.cu-preset strong {
  display: block;
  font-size: 0.88rem;
  color: var(--dark-text);
  margin-bottom: 0.15rem;
}

.cu-preset span {
  font-size: 0.78rem;
  line-height: 1.3;
}

.cu-preset:hover {
  border-color: rgba(47, 85, 212, 0.4);
  background: rgba(47, 85, 212, 0.08);
}

.cu-preset.active {
  border-color: var(--brand);
  background: rgba(47, 85, 212, 0.12);
  box-shadow: 0 0 0 1px var(--brand), 0 4px 12px rgba(47, 85, 212, 0.2);
}

.cu-preset.active strong {
  color: #fff;
}

.cu-calc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  background: var(--dark-surface);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-xl);
  padding: 2rem;
}

.cu-calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cu-input-group label {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dark-text);
  margin-bottom: 0.5rem;
}

.cu-input-val {
  font-weight: 700;
  color: var(--brand-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
}

.cu-input-group input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--dark-line);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.cu-input-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 2px 8px rgba(47, 85, 212, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.cu-input-group input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.cu-input-group input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 2px 8px rgba(47, 85, 212, 0.4);
  border: none;
  cursor: pointer;
}

.cu-input-range {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--dark-muted);
  margin-top: 0.25rem;
}

/* Results */
.cu-calc-results {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cu-result-formula {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cu-formula-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--dark-muted);
  font-family: "JetBrains Mono", monospace;
}

.cu-formula-label {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dark-muted);
  min-width: 70px;
}

.cu-formula-expr {
  color: var(--dark-muted);
  opacity: 0.7;
  font-size: 0.78rem;
}

.cu-formula-eq {
  color: var(--dark-muted);
}

.cu-formula-row strong {
  color: #fff;
  font-size: 1.1rem;
}

.cu-unit {
  color: var(--brand-3);
  font-weight: 600;
  font-size: 0.78rem;
}

/* Tier bars */
.cu-tier-bars {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cu-tier-row {
  display: grid;
  grid-template-columns: 65px 1fr 55px;
  gap: 0.75rem;
  align-items: center;
}

.cu-tier-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark-text);
  text-align: right;
}

.cu-tier-track {
  height: 8px;
  background: var(--dark-line);
  border-radius: 4px;
  overflow: hidden;
}

.cu-tier-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-3));
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 0;
}

.cu-tier-fill.warn {
  background: linear-gradient(90deg, var(--accent-warm), #f59e0b);
}

.cu-tier-fill.over {
  background: linear-gradient(90deg, var(--accent-rose), #ef4444);
}

.cu-tier-label {
  font-size: 0.72rem;
  color: var(--dark-muted);
  font-family: "JetBrains Mono", monospace;
}

/* Verdict */
.cu-verdict {
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin: 0;
}

.cu-verdict-ok {
  color: var(--brand-3);
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.cu-verdict-over {
  color: var(--accent-warm);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Dark section pricing cards */
.pricing-dark-card {
  background: var(--dark-surface);
  border-color: var(--dark-line);
  color: var(--dark-text);
}

.pricing-dark-card::before {
  display: none;
}

.pricing-dark-card h3 {
  color: var(--dark-text);
}

.pricing-dark-card li {
  color: var(--dark-muted);
}

/* Docs quick links grid */
.docs-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.docs-quick-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--text);
  transition: all var(--transition);
}

.docs-quick-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.docs-quick-card strong {
  font-size: 0.95rem;
}

.docs-quick-card .muted {
  font-size: 0.82rem;
}

.section-alt {
  background: var(--bg-alt);
}

.section-gradient {
  background: linear-gradient(180deg, var(--bg) 0%, var(--brand-light) 50%, var(--bg) 100%);
}

.hero-subtle {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .section-dots {
    display: none;
  }

  /* Disable horizontal reveals on mobile */
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(28px);
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .grid.five,
  .docs-chooser-hint {
    grid-template-columns: 1fr;
  }



  /* Reduce clip-path angles on mobile */
  .band-dark {
    clip-path: polygon(0 16px, 100% 0, 100% calc(100% - 16px), 0 100%);
    padding-top: calc(5rem + 16px);
    padding-bottom: calc(5rem + 16px);
    margin-top: -16px;
    margin-bottom: -16px;
  }

  .band-cta {
    clip-path: polygon(0 16px, 100% 0, 100% 100%, 0 100%);
    padding-top: calc(5rem + 16px);
    margin-top: -16px;
  }

  .story-rail {
    grid-template-columns: 1fr;
  }

  .docs-layout,
  .docs-layout--with-toc {
    grid-template-columns: 1fr;
  }

  .docs-sidebar,
  .docs-page-toc {
    position: static;
    max-height: none;
  }

  .hero {
    text-align: left;
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  .hero-home {
    padding-top: 4rem;
    padding-bottom: calc(3.5rem + clamp(24px, 3.5vw, 56px));
  }

  .hero-grid {
    display: none;
  }

  .hero-glow {
    display: none;
  }

  .lead {
    margin-left: 0;
  }

  .actions {
    justify-content: flex-start;
  }

  .hero-metrics {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .hero-metrics div {
    flex-direction: row;
    gap: 0.5rem;
  }

  .split,
  .split-left,
  .split-right {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .split-left .split-visual {
    order: 0;
  }

  .comparison-table thead th,
  .comparison-table tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }

  .comparison-table .cap-label {
    white-space: normal;
  }

  .ai-visual {
    gap: 1rem;
  }

  .bundle-inner {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .pricing-hero-title {
    font-size: 1.8rem;
  }

  .product-pricing-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .docs-quick-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cu-calc-presets {
    grid-template-columns: 1fr 1fr;
  }

  .cu-calc-body {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .timeline {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .timeline::before {
    top: 0;
    bottom: 0;
    left: 14px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .timeline::after {
    top: 0;
    bottom: 0;
    left: 14px;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }

  .timeline.is-visible::after {
    transform: scaleY(1);
  }

  .timeline-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding-bottom: 1.5rem;
  }

  .timeline-content {
    margin-top: 0;
    margin-left: 1rem;
    max-width: none;
  }

  .trust-strip {
    justify-content: flex-start;
  }

  .docs-chooser-hint {
    flex-direction: column;
    gap: 0.5rem;
  }

  .plan-price {
    font-size: 1.6rem;
  }

  .section-spacious {
    padding: 3.5rem 0;
  }
}

@media (max-width: 600px) {
  .product-hero-logo {
    width: 110px;
    height: 110px;
  }
  .product-hero-nameplate {
    padding: 1.25rem 1rem 1rem;
  }

  .nav {
    min-height: 60px;
  }

  .nav-dropdown-menu {
    min-width: 260px;
    left: 0;
    transform: translateX(0) translateY(4px);
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
    transform: translateX(0) translateY(0);
  }

  nav a {
    font-size: 0.84rem;
    padding: 0.35rem 0.5rem;
  }

  .hero {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }

  .hero-home {
    padding-bottom: calc(3rem + clamp(24px, 3.5vw, 56px));
  }

  .section {
    padding: 2.5rem 0;
  }

  .section-spacious {
    padding: 3rem 0;
  }

  .card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }

  .connector-tile {
    width: 76px;
    padding: 0.75rem 0.35rem;
  }
  .connector-tile img {
    width: 28px;
    height: 28px;
  }
  .connector-icon-grid {
    gap: 0.6rem;
  }

  .docs-quick-grid {
    grid-template-columns: 1fr;
  }

  .cu-calc-presets {
    grid-template-columns: 1fr;
  }

  .cu-formula-expr {
    display: none;
  }

  .docs-content {
    padding: 1.5rem;
  }
}

/* ===== FOOTER GRID ===== */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  padding: 3rem 0 1.5rem;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-col strong {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}
.footer-col a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-col a:hover {
  color: var(--brand);
}
.footer-tagline {
  font-size: 0.85rem;
  max-width: 260px;
  margin-top: 0.25rem;
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== SDK INSTALL ===== */
.sdk-install-row {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  margin-top: auto;
  min-width: 0;
}

/* Explicit colors: --brand-light is a tint on the dark theme, which made the
   command text vanish against the box (2026-09-09). */
.sdk-install {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  background: var(--dark-surface, #1e293b);
  color: #c7d2fe;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  white-space: nowrap;
  /* Clip rather than scroll: the copy button carries the full command, and
     a scroll container here rendered as an opaque light layer on dark. */
  overflow: hidden;
  text-overflow: ellipsis;
}

.sdk-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  padding: 0;
  background: var(--dark-surface, #1e293b);
  color: #c7d2fe;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.sdk-copy .material-symbols-outlined { font-size: 18px; }
.sdk-copy:hover { color: #fff; border-color: var(--brand-border); }
.sdk-copy.is-copied { color: #4ade80; }

[data-theme="dark"] .sdk-install,
[data-theme="dark"] .sdk-copy {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.2);
  color: var(--text);
}

[data-theme="dark"] .sdk-copy:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .sdk-copy.is-copied { color: #4ade80; }

/* ===== SCREENSHOT TABS ===== */
.screenshot-tab-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.screenshot-tab {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--border-light, rgba(255,255,255,0.15));
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.band-dark .screenshot-tab {
  color: var(--dark-muted);
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}
.band-dark .screenshot-tab:hover:not(.active) {
  color: var(--dark-text);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}
.screenshot-tab.active,
.screenshot-tab:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.screenshot-panel {
  display: none;
}
.screenshot-panel.active {
  display: block;
}
.screenshot-placeholder {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(47, 85, 212, 0.1);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.screenshot-placeholder:not(.screenshot-missing) {
  display: block;
  background: transparent;
  border: none;
}

.screenshot-placeholder.screenshot-missing {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark-surface, #1a1a2e);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
}

.screenshot-placeholder:hover {
  transform: scale(1.02);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 40px rgba(47, 85, 212, 0.1);
}
.screenshot-img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}
.screenshot-expand {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
  pointer-events: none;
}
.screenshot-placeholder:hover .screenshot-expand { opacity: 1; }
.screenshot-expand svg {
  width: 16px; height: 16px; stroke: #fff; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.screenshot-fallback {
  display: none;
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
}
.screenshot-fallback span {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary-dark, #e2e8f0);
}
.screenshot-missing .screenshot-img {
  display: none;
}
.screenshot-missing .screenshot-fallback {
  display: block;
}

/* ===== Screenshot Carousel ===== */
.screenshot-carousel {
  position: relative;
  width: 100%;
}

.carousel-track {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.carousel-track:hover .carousel-arrow {
  opacity: 1;
}

.carousel-arrow:hover {
  background: rgba(47, 85, 212, 0.7);
  border-color: rgba(47, 85, 212, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.carousel-arrow-prev {
  left: 12px;
}

.carousel-arrow-next {
  right: 12px;
}

.carousel-slide {
  display: none;
  animation: carouselFadeIn 0.4s ease;
}

.carousel-slide.active {
  display: block;
}

@keyframes carouselFadeIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border-light, rgba(255,255,255,0.2));
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.carousel-dot:hover {
  border-color: var(--brand, #2f55d4);
  transform: scale(1.2);
}

.carousel-dot.active {
  background: var(--brand, #2f55d4);
  border-color: var(--brand, #2f55d4);
}

/* ===== FAQ ===== */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.faq-item summary {
  padding: 1.25rem 0;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text-secondary);
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  content: "−";
}
.faq-item p {
  padding: 0 0 1.25rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.faq-item a {
  color: var(--brand);
}

/* ===== LEGAL PAGES ===== */
.legal-content {
  max-width: 800px;
}
.legal-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
}
.legal-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.legal-content p {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 0.75rem;
}
.legal-content ul {
  color: var(--text-secondary);
  line-height: 1.8;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.legal-content a {
  color: var(--brand);
}
.legal-content a:hover {
  text-decoration: underline;
}

/* ===== USE CASE PAGES ===== */

/* Link cards on index */
.usecase-link-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.usecase-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.usecase-link-card h2 {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}
.card-arrow {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--brand);
  font-weight: 500;
  font-size: 0.9rem;
}

/* Mini cards (cross-cutting capabilities) */
.mini-card {
  padding: 1.25rem 1.5rem;
}
.mini-card strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}
.mini-card .muted {
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Problem grid */
.uc-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.uc-problem-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
}
.uc-problem-card strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--accent-rose-text);
}
.uc-problem-card p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* Steps */
.uc-steps {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.uc-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.uc-step-number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 0.15rem;
}
.uc-step-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.uc-step-content p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.uc-step-content :not(pre) > code {
  background: var(--bg-alt);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
}

/* Feature list within steps */
.uc-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.uc-feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.uc-feature strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}
.uc-feature .muted {
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Code blocks in use cases */
.uc-code {
  background: #1e293b;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
}
.uc-code-header {
  background: #0f172a;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: #94a3b8; /* header is always dark; the light-theme muted token is 3.7:1 here */
  font-family: 'JetBrains Mono', monospace;
}
.uc-code pre {
  margin: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}
.uc-code code {
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  background: none;
  padding: 0;
  border-radius: 0;
}
.uc-code .code-kw { color: #c084fc; }
.uc-code .code-str { color: #34d399; }
.uc-code .code-cmt { color: #94a3b8; font-style: italic; }

/* JSON syntax colors (build-time highlighting via <JsonBlock>). The block is
   always dark (#1e293b), so these fixed colors hold in both site themes. */
.uc-code .json-key { color: #7dd3fc; }
.uc-code .json-str { color: #34d399; }
.uc-code .json-num { color: #fbbf24; }
.uc-code .json-bool { color: #c084fc; }

/* Architecture flow */
.uc-architecture {
  margin: 2rem auto;
  max-width: 800px;
}
.uc-arch-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.uc-arch-node {
  background: var(--dark-surface, #1e293b);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-align: center;
  min-width: 120px;
}
.uc-arch-node strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
}
.uc-arch-node span {
  color: #94a3b8;
  font-size: 0.8rem;
}
.uc-arch-node-end {
  border-color: var(--brand);
  /* Tint OVER the dark surface; a flat rgba here left white text on pale blue. */
  background: linear-gradient(rgba(47, 85, 212, 0.22), rgba(47, 85, 212, 0.22)),
    var(--dark-surface, #1e293b);
}
.uc-arch-arrow {
  color: #64748b;
  font-size: 1.5rem;
  padding: 0 0.25rem;
}
.uc-arch-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.uc-arch-detail strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.uc-arch-detail p {
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}
.band-dark .uc-arch-detail strong { color: #fff; }
.band-dark .uc-arch-detail p { color: #94a3b8; }
.band-dark .uc-arch-detail code {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.85em;
}

/* Connector tag cloud */
.uc-connector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.uc-connector-tag {
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
}

/* Model cards */
.uc-model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}
.uc-model-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.uc-model-card strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.25rem;
}
.uc-model-card .muted {
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
  .uc-problem-grid {
    grid-template-columns: 1fr;
  }
  .uc-step {
    flex-direction: column;
    gap: 0.75rem;
    /* The base rule aligns to flex-start, which in a column container sizes the
       content box to its max-content width and pushed it past the viewport. */
    align-items: stretch;
  }
  .uc-feature-list {
    grid-template-columns: 1fr;
  }
  .uc-arch-flow {
    flex-direction: column;
    gap: 0.25rem;
  }
  .uc-arch-arrow {
    transform: rotate(90deg);
    font-size: 1.2rem;
  }
  .uc-arch-details {
    grid-template-columns: 1fr;
  }
  .uc-model-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== BLOG ===== */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.blog-card h2 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}
.blog-date {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
}
.blog-author {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
}
.blog-date + .blog-author::before {
  content: "·";
  margin: 0 0.4em;
}

/* ===== Editorial page hero =====
   Dark treatment that matches the social share card. Applied to every blog post
   header (a dark band containing a post date) and to any page header marked with
   .hero-editorial (use cases, docs, pricing, blog listing), without touching
   other dark bands site-wide (products and home keep their own heroes). */
.band-dark:has(.blog-date),
.band-dark.hero-editorial {
  background:
    radial-gradient(1000px 560px at 82% -30%, rgba(124, 58, 237, 0.30), transparent 60%),
    radial-gradient(820px 560px at 108% 8%, rgba(47, 85, 212, 0.30), transparent 62%),
    radial-gradient(760px 560px at -12% 130%, rgba(6, 182, 212, 0.14), transparent 60%),
    #0b1020;
}
.band-dark:has(.blog-date)::before,
.band-dark.hero-editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(900px 620px at 50% 34%, #000, transparent 82%);
  mask-image: radial-gradient(900px 620px at 50% 34%, #000, transparent 82%);
  pointer-events: none;
}
.band-dark:has(.blog-date) .section-header-center,
.band-dark.hero-editorial .section-header-center {
  position: relative;
  z-index: 1;
  max-width: 840px;
}
.band-dark:has(.blog-date) .blog-date,
.band-dark:has(.blog-date) .blog-author {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #93b4fb;
}
.band-dark.hero-editorial .eyebrow {
  color: #93b4fb;
}
.band-dark:has(.blog-date) h1,
.band-dark.hero-editorial h1 {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: #f8fafc;
  margin-top: 1.1rem;
  text-wrap: balance;
}
.band-dark:has(.blog-date) h1::after,
.band-dark.hero-editorial h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  border-radius: 3px;
  margin: 1.5rem auto 0;
  background: linear-gradient(90deg, #4361ee, #a855f7, #06b6d4);
}
.band-dark:has(.blog-date) .lead,
.band-dark.hero-editorial .lead {
  color: #a7b6cc;
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
}

/* Blog article */
.blog-content {
  /* One width for every kind of content so prose and code share the same left
     and right edges. Wider than the old 740px so code and screenshots aren't
     boxed in and cut off on larger screens. */
  max-width: 840px;
}
.blog-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
}
.blog-content h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.blog-content p {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.blog-content ul, .blog-content ol {
  color: var(--text-secondary);
  line-height: 1.8;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.blog-content a {
  color: var(--brand);
}
.blog-content a:hover {
  text-decoration: underline;
}
/* Brand blue is a 2.9:1 link on the dark ground; use the lifted shade there. */
[data-theme="dark"] .blog-content a,
[data-theme="dark"] .card-arrow {
  color: var(--brand-dark);
}
.blog-content :not(pre) > code {
  background: var(--bg-alt);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
}
.blog-content em {
  font-style: italic;
}
.blog-cta {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 1rem;
}

/* ===== PRISM LIGHT TOKEN CONTRAST =====
   Prism's default light theme puts strings at 3.1:1 and parameters near 2:1
   on the light code wells. Darken those tokens on the light theme only; the
   dark theme keeps prism-tomorrow untouched. */
html:not([data-theme="dark"]) .docs-content .token.string,
html:not([data-theme="dark"]) .docs-content .token.char,
html:not([data-theme="dark"]) .docs-content .token.builtin,
html:not([data-theme="dark"]) .docs-content .token.inserted,
html:not([data-theme="dark"]) .docs-content .token.attr-value {
  color: #3b6d11;
}

html:not([data-theme="dark"]) .docs-content .token.comment,
html:not([data-theme="dark"]) .docs-content .token.prolog,
html:not([data-theme="dark"]) .docs-content .token.doctype,
html:not([data-theme="dark"]) .docs-content .token.cdata,
html:not([data-theme="dark"]) .docs-content .token.punctuation {
  color: #4b5563;
}

html:not([data-theme="dark"]) .docs-content .token.decorator,
html:not([data-theme="dark"]) .docs-content .token.annotation,
html:not([data-theme="dark"]) .docs-content .token.important,
html:not([data-theme="dark"]) .docs-content .token.regex,
html:not([data-theme="dark"]) .docs-content .token.variable {
  color: #9a5b00;
}

html:not([data-theme="dark"]) .docs-content .token.operator,
html:not([data-theme="dark"]) .docs-content .token.entity,
html:not([data-theme="dark"]) .docs-content .token.url {
  color: #7a4f1d;
  background: transparent;
}

html:not([data-theme="dark"]) .docs-content .token.function,
html:not([data-theme="dark"]) .docs-content .token.class-name {
  color: #b42457;
}

html:not([data-theme="dark"]) .docs-content .token.parameter,
html:not([data-theme="dark"]) .docs-content .token.number {
  color: #8a5a12;
}

/* ---------------------------------------------------------------------------
   Brand blue on dark grounds
   --------------------------------------------------------------------------
   #2f55d4 reads at roughly 2:1 on the dark band and on the tinted chip
   backgrounds, in light mode too, because those grounds are dark regardless of
   theme. Lift the text to the same shade dark mode already uses for links. */
.band-dark .card-arrow,
.band-dark .timeline-label,
.band-dark .eyebrow,
.ai-home-section .card-arrow,
.ai-home-section .timeline-label,
.timeline-label,
.card-arrow {
  color: var(--brand);
}

.band-dark .card-arrow,
.band-dark .timeline-label,
.ai-home-section .card-arrow,
.ai-home-section .timeline-label,
.band-dark .usecase-card-icon,
.band-dark .connector-tile-icon {
  color: #93a9f5;
}

[data-theme="dark"] .connector-tile-icon,
[data-theme="dark"] .usecase-card-icon,
[data-theme="dark"] .card-arrow,
[data-theme="dark"] .timeline-label {
  color: var(--brand-dark);
}

/* Node badges sit on 15-25% tints of their own hue: the display shade is never
   readable there, so each gets a lifted text shade. */
.node-badge-trigger { color: #93a9f5; }
.node-badge-ai { color: #b9a6fb; }
.node-badge-approval { color: #fda4af; }
.node-badge-logic { color: #fcd34d; }
.node-badge-action { color: #6ee7b7; }
.node-badge-code { color: #67e8f9; }

/* ---------------------------------------------------------------------------
   Swagger UI (the three /api-reference pages)
   --------------------------------------------------------------------------
   Swagger's stylesheet hardcodes #3b4151 body text and pastel method badges.
   On our dark ground that text lands near 1.4:1, and white-on-pastel badges are
   about 2:1 in both themes. Repaint both. */

/* Method badges: white text needs a much darker fill than Swagger's pastels. */
.swagger-ui .opblock.opblock-get .opblock-summary-method,
.swagger-ui .opblock-get .opblock-summary-method { background: #1a6bb5; }
.swagger-ui .opblock.opblock-post .opblock-summary-method,
.swagger-ui .opblock-post .opblock-summary-method { background: #1e7e4f; }
.swagger-ui .opblock.opblock-put .opblock-summary-method,
.swagger-ui .opblock-put .opblock-summary-method { background: #8f5000; }
.swagger-ui .opblock.opblock-delete .opblock-summary-method,
.swagger-ui .opblock-delete .opblock-summary-method { background: #a51f1f; }
.swagger-ui .opblock.opblock-patch .opblock-summary-method,
.swagger-ui .opblock-patch .opblock-summary-method { background: #0f6e63; }
.swagger-ui .opblock .opblock-summary-method { color: #fff; }

.swagger-ui .info .title small pre.version,
.swagger-ui .info .title small.version-stamp {
  background: #3f5f00;
}

.swagger-ui .btn.authorize,
.swagger-ui .btn.authorize svg {
  color: #1e7e4f;
  fill: #1e7e4f;
  border-color: #1e7e4f;
}

/* Dark theme: everything Swagger leaves at its hardcoded slate. */
[data-theme="dark"] .swagger-ui .opblock .opblock-summary-path,
[data-theme="dark"] .swagger-ui .opblock .opblock-summary-path a,
[data-theme="dark"] .swagger-ui .opblock .opblock-summary-path span,
[data-theme="dark"] .swagger-ui .opblock .opblock-summary-description,
[data-theme="dark"] .swagger-ui .opblock-description-wrapper p,
[data-theme="dark"] .swagger-ui .opblock-external-docs-wrapper p,
[data-theme="dark"] .swagger-ui .opblock-title_normal p,
[data-theme="dark"] .swagger-ui .opblock-section-header h4,
[data-theme="dark"] .swagger-ui .opblock-section-header > label,
[data-theme="dark"] .swagger-ui .tab li button.tablinks,
[data-theme="dark"] .swagger-ui .responses-inner h4,
[data-theme="dark"] .swagger-ui .responses-inner h5,
[data-theme="dark"] .swagger-ui .response-col_status,
[data-theme="dark"] .swagger-ui .response-col_links,
[data-theme="dark"] .swagger-ui .parameter__type,
[data-theme="dark"] .swagger-ui .parameter__in,
[data-theme="dark"] .swagger-ui .parameter__deprecated,
[data-theme="dark"] .swagger-ui .model,
[data-theme="dark"] .swagger-ui .model-title,
[data-theme="dark"] .swagger-ui .model-toggle,
[data-theme="dark"] .swagger-ui .prop-type,
[data-theme="dark"] .swagger-ui .prop-format,
[data-theme="dark"] .swagger-ui .servers > label,
[data-theme="dark"] .swagger-ui .scheme-container .schemes-title,
[data-theme="dark"] .swagger-ui .info .base-url,
[data-theme="dark"] .swagger-ui .info li,
[data-theme="dark"] .swagger-ui .info table,
[data-theme="dark"] .swagger-ui .opblock-tag small,
[data-theme="dark"] .swagger-ui .renderedMarkdown p,
[data-theme="dark"] .swagger-ui .download-url-wrapper .select-label span {
  color: var(--text);
}

[data-theme="dark"] .swagger-ui .parameter__type,
[data-theme="dark"] .swagger-ui .parameter__in,
[data-theme="dark"] .swagger-ui .prop-format,
[data-theme="dark"] .swagger-ui .opblock-tag small {
  color: var(--text-secondary);
}

[data-theme="dark"] .swagger-ui .opblock .opblock-section-header {
  background: var(--bg-alt);
  border-color: var(--line);
}

[data-theme="dark"] .swagger-ui .opblock-body pre.microlight,
[data-theme="dark"] .swagger-ui .highlight-code > .microlight {
  background: var(--code-bg);
}

[data-theme="dark"] .swagger-ui .model-box,
[data-theme="dark"] .swagger-ui section.models .model-container {
  background: var(--bg-alt);
}

[data-theme="dark"] .swagger-ui .responses-table .response-col_description,
[data-theme="dark"] .swagger-ui table.model tr td {
  color: var(--text);
}

[data-theme="dark"] .swagger-ui svg:not(:root) {
  fill: var(--text-secondary);
}

[data-theme="dark"] .swagger-ui .opblock-tag {
  border-bottom-color: var(--line);
}

/* Eyebrows, inline code and Prism attribute names on dark grounds */
/* Only the heroes that sit on a dark ground; the home hero is light in light
   mode and keeps the brand blue. */
.hero-product .eyebrow,
.band-dark .eyebrow,
[data-theme="dark"] .hero .eyebrow {
  color: #93a9f5;
}

.band-dark .comparison-table code,
.ai-home-section .comparison-table code {
  color: #67e8f9;
}

html:not([data-theme="dark"]) .docs-content .token.attr-name,
html:not([data-theme="dark"]) .docs-content .token.selector,
html:not([data-theme="dark"]) .docs-content .token.tag {
  color: #4d7300;
}

/* Swagger's own stylesheet loads after ours on the api-reference pages, so the
   badge and heading repaints need the extra id-free specificity of html body. */
html body .swagger-ui .opblock.opblock-get .opblock-summary-method { background: #1a6bb5; }
html body .swagger-ui .opblock.opblock-post .opblock-summary-method { background: #1e7e4f; }
html body .swagger-ui .opblock.opblock-put .opblock-summary-method { background: #8f5000; }
html body .swagger-ui .opblock.opblock-delete .opblock-summary-method { background: #a51f1f; }
html body .swagger-ui .opblock.opblock-patch .opblock-summary-method { background: #0f6e63; }
html body .swagger-ui .opblock.opblock-head .opblock-summary-method,
html body .swagger-ui .opblock.opblock-options .opblock-summary-method { background: #4b5563; }
html body .swagger-ui .opblock .opblock-summary-method { color: #fff; }

html body .swagger-ui .btn.authorize,
html body .swagger-ui .btn.authorize span,
html body .swagger-ui .btn.authorize svg { color: #1e7e4f; fill: #1e7e4f; }
html body .swagger-ui .btn.authorize { border-color: #1e7e4f; }

html body .swagger-ui .info .title small pre { background: #3f5f00; }

html[data-theme="dark"] body .swagger-ui h1,
html[data-theme="dark"] body .swagger-ui h2,
html[data-theme="dark"] body .swagger-ui h3,
html[data-theme="dark"] body .swagger-ui h4,
html[data-theme="dark"] body .swagger-ui h5,
html[data-theme="dark"] body .swagger-ui .opblock .opblock-summary-path,
html[data-theme="dark"] body .swagger-ui .opblock .opblock-summary-path span,
html[data-theme="dark"] body .swagger-ui .opblock .opblock-summary-description,
html[data-theme="dark"] body .swagger-ui .renderedMarkdown p,
html[data-theme="dark"] body .swagger-ui .markdown p,
html[data-theme="dark"] body .swagger-ui .response-col_status,
html[data-theme="dark"] body .swagger-ui .parameter__name,
html[data-theme="dark"] body .swagger-ui .model-title,
html[data-theme="dark"] body .swagger-ui .model,
html[data-theme="dark"] body .swagger-ui table thead tr th,
html[data-theme="dark"] body .swagger-ui table tbody tr td,
html[data-theme="dark"] body .swagger-ui .tab li button.tablinks,
html[data-theme="dark"] body .swagger-ui .opblock-section-header h4,
html[data-theme="dark"] body .swagger-ui .servers > label,
html[data-theme="dark"] body .swagger-ui .info .base-url,
html[data-theme="dark"] body .swagger-ui label {
  color: var(--text);
}

html[data-theme="dark"] body .swagger-ui .parameter__type,
html[data-theme="dark"] body .swagger-ui .parameter__in,
html[data-theme="dark"] body .swagger-ui .prop-format,
html[data-theme="dark"] body .swagger-ui .opblock-tag small {
  color: var(--text-secondary);
}

html[data-theme="dark"] body .swagger-ui .opblock .opblock-section-header {
  background: var(--bg-alt);
}

/* Text links on the page ground: brand blue is 2.9:1 in dark mode. */
[data-theme="dark"] .legal-content a,
[data-theme="dark"] .pricing-details summary,
[data-theme="dark"] .pricing-note a,
[data-theme="dark"] .section a:not(.btn):not(.card):not(.usecase-card):not(.nav-link),
[data-theme="dark"] .docs-links-list a {
  color: var(--brand-dark);
}

/* Swagger's own link and code accents */
html body .swagger-ui .info a.link,
html body .swagger-ui .info .base-url,
html body .swagger-ui span.url {
  color: #1a5fa8;
}

html[data-theme="dark"] body .swagger-ui .info a.link,
html[data-theme="dark"] body .swagger-ui .info .base-url,
html[data-theme="dark"] body .swagger-ui span.url {
  color: var(--brand-dark);
}

html[data-theme="dark"] body .swagger-ui .btn.authorize,
html[data-theme="dark"] body .swagger-ui .btn.authorize span,
html[data-theme="dark"] body .swagger-ui .btn.authorize svg {
  color: #6ee7b7;
  fill: #6ee7b7;
}
html[data-theme="dark"] body .swagger-ui .btn.authorize { border-color: #6ee7b7; }

html[data-theme="dark"] body .swagger-ui .markdown code,
html[data-theme="dark"] body .swagger-ui .renderedMarkdown code,
html[data-theme="dark"] body .swagger-ui .markdown pre code {
  color: #d8b4fe;
  background: rgba(216, 180, 254, 0.12);
}

/* ---------------------------------------------------------------------------
   Code blocks inside flex/grid children on narrow screens
   --------------------------------------------------------------------------
   A flex or grid child defaults to min-width:auto, so it refuses to shrink below
   the min-content width of a `pre` inside it. The pre's own overflow-x:auto then
   never engages and the whole column stretches instead — on a 375px phone the
   use-case step columns grew to 676px and the page laid out at 607px, clipping
   the header nav. Letting these wrappers shrink to zero puts the scroll back on
   the code block where it belongs. */
.uc-step-content,
.uc-code,
.uc-steps,
.uc-step,
.product-code-block,
.product-code-grid > *,
.hero-code,
.sdk-install-row,
.split > *,
.card {
  min-width: 0;
}

.uc-code pre,
.product-code-block pre,
.hero-code pre {
  max-width: 100%;
}

@media (max-width: 768px) {
  /* Long single-token commands (install lines) have no break opportunity, so
     let the box scroll rather than push the page wider than the viewport. */
  .sdk-install-row {
    overflow-x: auto;
  }

  .blog-content svg,
  .uc-architecture svg {
    max-width: 100%;
    height: auto;
  }
}

/* ---------------------------------------------------------------------------
   Mobile navigation
   --------------------------------------------------------------------------
   The desktop link row needs about 513px. With no collapse, a 375px phone laid
   the whole document out at 607px and clipped the header off the right edge on
   every page. Below 900px the links move into a panel behind a menu button. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
    order: 3;
  }

  .site-header .nav {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .site-header nav {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.5rem 0 1rem;
    border-top: 1px solid var(--line);
  }

  .site-header nav.is-open {
    display: flex;
  }

  .site-header nav > a,
  .site-header nav .nav-dropdown-trigger {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.25rem;
    font-size: 1rem;
  }

  /* The products dropdown becomes a plain inline list — hover menus have no
     equivalent on touch. */
  .site-header .nav-dropdown {
    width: 100%;
  }

  .site-header .nav-dropdown-menu {
    position: static;
    display: block;
    min-width: 0;
    width: 100%;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0 0 0 0.5rem;
  }

  .site-header .nav-dropdown-item {
    padding: 0.55rem 0.25rem;
  }

  .site-header .nav-dropdown-item span {
    display: none;
  }

  .site-header .nav-cta,
  .site-header .theme-toggle {
    align-self: flex-start;
    margin-top: 0.35rem;
  }
}

@media (max-width: 768px) {
  .uc-step-content {
    width: 100%;
  }

  /* Long unbroken tokens (URLs, template paths) in docs tables and prose have no
     break opportunity and drag the document wider than the phone viewport. */
  .docs-content :not(pre) > code,
  .blog-content :not(pre) > code {
    overflow-wrap: anywhere;
  }

  .docs-content table {
    table-layout: fixed;
    width: 100%;
  }

  .screenshot-tabs {
    overflow-x: auto;
  }

  .blog-content .btn,
  .blog-cta .btn {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}