/* Serpent API - Shared Styles */

/* Light theme (default) */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f7fa;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #6f7683;
  --accent: #0f8378;
  --accent-hover: #0f766e;
  --accent-glow: rgba(15, 131, 120, 0.2);
  --accent-light: #2dd4bf;
  --accent-dim: rgba(15, 131, 120, 0.1);
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --border: #e5e7eb;
  --border-light: #d1d5db;
  --navbar-bg: rgba(255,255,255,0.95);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.08);
  --code-bg: #f1f5f9;
  --modal-overlay: rgba(0,0,0,0.4);
  --loading-overlay: rgba(255,255,255,0.8);
  --toast-shadow: 0 10px 40px rgba(0,0,0,0.1);
  --skeleton-from: #e5e7eb;
  --skeleton-via: #f3f4f6;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-card: #111111;
  --bg-card-hover: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --text-muted: #8b8b8b;
  --accent: #14b8a6;
  --accent-hover: #0d9488;
  --accent-glow: rgba(20, 184, 166, 0.3);
  --accent-light: #2dd4bf;
  --accent-dim: rgba(20, 184, 166, 0.15);
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --border: #222222;
  --border-light: #333333;
  --navbar-bg: rgba(0,0,0,0.95);
  --card-shadow: none;
  --code-bg: #0a0a0a;
  --modal-overlay: rgba(0,0,0,0.8);
  --loading-overlay: rgba(0,0,0,0.8);
  --toast-shadow: 0 10px 40px rgba(0,0,0,0.3);
  --skeleton-from: #111111;
  --skeleton-via: #1a1a1a;
}

/* Smooth theme transition */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:not(.btn):hover {
  color: var(--accent-hover);
}

/* Navigation */
.navbar {
  padding: 1.5rem 2rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--navbar-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.nav-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-brand .brand-api {
  color: var(--accent);
  margin-left: 0.15rem;
}

.infinity-serpent {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 28px !important;
  height: 28px !important;
  background-image: url('/logo-serpent.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.infinity-serpent svg {
  display: none !important;
}

/* Anti-flash: hide nav regions until header.js has rendered the correct auth state.
   This MUST live in the stylesheet, not in header.js's injected <style> — an injected rule
   cannot suppress a flash caused by that same script not having run yet, so the static
   "Sign In / Get Started" markup was visible to everyone, logged in or not, until DOMContentLoaded.
   header.js still injects a duplicate of this rule; that copy is now redundant but harmless,
   and it keeps the guard working for visitors holding a cached older styles.css. */
.nav-links:not(.nav-ready),
.nav-buttons:not(.nav-ready),
.mobile-menu-links:not(.nav-ready),
.mobile-menu-buttons:not(.nav-ready) {
  visibility: hidden;
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
  list-style: none;
}

.nav-links li {
  display: flex;
  align-items: center;
}

.nav-links a {
  color: var(--text-secondary);
  font-weight: 500;
  transition: color 0.2s, border-color 0.2s;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #ffffff;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Buttons */
.btn {
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 131, 120, 0.3);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: #ffffff !important;
  box-shadow: 0 4px 15px var(--accent-glow);
  transform: translateY(-1px);
}

/* Dark theme keeps the brighter brand teal (--accent: #14b8a6), so the contrast has to
   come from the text instead: white on it is 2.49:1, near-black is 7.91:1 (and 5.26:1 on
   the darker :hover shade). `.btn` is 0.95rem and `.btn-lg` is 1.1rem, so neither reaches
   the WCAG large-text exemption and 4.5:1 applies. !important is required because
   .btn-primary above sets `color: #ffffff !important`. */
/* The same pair recurs wherever anything sits on the accent: white on #14b8a6 is 2.49:1
   everywhere, not only on the primary button. These five were found after the button fix and
   are the identical defect, so they take the identical remedy rather than a second approach. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .user-avatar,
[data-theme="dark"] .pricing-card.featured::before {
  color: #0b0b0b !important;
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--error);
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.btn-outline:hover {
  background: var(--accent);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Forms */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
}

.form-input::placeholder {
  color: var(--text-muted);
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f7683' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
}

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

.table th {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table tr:hover td {
  background: var(--bg-card-hover);
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
}

.stat-value.accent {
  color: var(--accent);
}

.stat-value.success {
  color: var(--success);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  padding-top: 6rem; /* Account for fixed navbar */
}

/* Page Header */
.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.page-subtitle {
  color: var(--text-secondary);
}

/* Grid layouts */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: none;
  }

  .container {
    padding: 1rem;
    padding-top: 5rem; /* Account for fixed navbar on mobile */
  }
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.badge-error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--error);
}

.badge-info {
  background: rgba(13, 148, 136, 0.15);
  color: var(--accent);
}

/* Code blocks */
.code-block {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.875rem;
  overflow-x: auto;
}

.api-key {
  font-family: 'Monaco', 'Menlo', monospace;
  background: var(--code-bg);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  word-break: break-all;
}

/* Alerts */
.alert {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.alert-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--success);
  color: var(--success);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
  color: var(--warning);
}

.alert-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error);
  color: var(--error);
}

.alert-info {
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid var(--accent);
  color: var(--accent);
}

/* Loading spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Pricing Table */
.pricing-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s;
}

.pricing-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.pricing-card.featured {
  border-color: var(--accent);
  position: relative;
}

.pricing-card.featured::before {
  content: 'Best Value';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #ffffff;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.pricing-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.pricing-price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.pricing-price span {
  font-size: 1rem;
  color: var(--text-secondary);
}

.pricing-desc {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.pricing-features {
  list-style: none;
  margin-bottom: 2rem;
}

.pricing-features li {
  padding: 0.5rem 0;
  color: var(--text-secondary);
}

.pricing-features li::before {
  content: '✓';
  color: var(--success);
  margin-right: 0.5rem;
}

/* Hero section */
.hero {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.hero-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-title span {
  color: var(--accent);
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 2rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Feature grid */
.features {
  padding: 4rem 2rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--card-shadow);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.feature-desc {
  color: var(--text-secondary);
}

/* Footer */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 3rem 2rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}

.footer-brand {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-brand span {
  color: var(--accent);
}

.footer-desc {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.footer-title {
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--text-secondary);
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-bottom {
  max-width: 1200px;
  margin: 2rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Footer: the Product list (2nd column, ~20 links) flows into two columns so the footer stays short.
   Selectors start at .footer so they outrank the per-page inline `.footer-container` overrides. */
.footer > .footer-container {
  grid-template-columns: 1.3fr 2fr 1fr 1fr;
  gap: 2.5rem;
}

.footer > .footer-container > :nth-child(2) .footer-links {
  columns: 2;
  column-gap: 2rem;
}

.footer .footer-links li {
  break-inside: avoid;
}

@media (max-width: 1024px) {
  .footer > .footer-container {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
  }

  .footer > .footer-container > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .footer > .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1rem;
  }

  .footer > .footer-container > :first-child,
  .footer > .footer-container > :nth-child(2) {
    grid-column: 1 / -1;
  }

  .footer > .footer-container > :nth-child(2) .footer-links {
    column-gap: 1rem;
  }

  .footer .footer-social {
    justify-content: center;
  }
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.tab {
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  position: relative;
  transition: color 0.2s;
}

.tab:hover {
  color: var(--text-primary);
}

.tab.active {
  color: var(--accent);
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Utility classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-muted { color: var(--text-muted); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.hidden { display: none !important; }

/* Toast Notifications */
.toast-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 1rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 9999;
  transform: translateX(120%);
  transition: transform 0.3s ease;
  max-width: 400px;
  box-shadow: var(--toast-shadow);
}

.toast-notification.show {
  transform: translateX(0);
}

.toast-notification.toast-success {
  border-color: var(--success);
}

.toast-notification.toast-error {
  border-color: var(--error);
}

.toast-notification.toast-warning {
  border-color: var(--warning);
}

.toast-notification.toast-info {
  border-color: var(--accent);
}

.toast-message {
  flex: 1;
  font-size: 0.9rem;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.toast-close:hover {
  color: var(--text-primary);
}

/* Loading States */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--loading-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.skeleton {
  background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-via) 50%, var(--skeleton-from) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.skeleton-title {
  height: 2rem;
  width: 60%;
  margin-bottom: 1rem;
}

.skeleton-button {
  height: 2.5rem;
  width: 120px;
}

/* Page Loading State */
.page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1rem;
}

.page-loading .spinner {
  width: 40px;
  height: 40px;
}

/* Error State */
.error-state {
  text-align: center;
  padding: 4rem 2rem;
}

.error-state-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.error-state h2 {
  margin-bottom: 0.5rem;
}

.error-state p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* Confirmation Dialog */
.confirm-dialog {
  text-align: center;
}

.confirm-dialog p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.confirm-dialog-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Plan Badges */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.plan-badge-free {
  background: rgba(107, 114, 128, 0.15);
  /* Was #9ca3af — an orphaned copy of the old --text-muted, left behind when that token moved.
     On its own tint (rgba(107,114,128,.15) over white composites to #e9eaec) it measured 2.11:1,
     the worst ratio on the site. The muted token itself only reaches 3.80 against that tint
     because the tint is not white, so this badge needs its own darker value to clear 4.5:1. */
  color: #5f6672;   /* 4.81:1 on #e9eaec */
}

.plan-badge-paid {
  background: rgba(13, 148, 136, 0.15);
  color: var(--accent);
}

.plan-badge-tier1 {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.plan-badge-tier2 {
  background: rgba(168, 85, 247, 0.15);
  color: #a78bfa;
}

/* ============================================================
   Custom Rate Limits CTA (used on pricing/dashboard/api-keys/
   billing/usage/docs/faq — anywhere users hit a limit ceiling)
   ============================================================ */
.custom-limits-cta {
  margin: 2.5rem auto;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 0% 0%, var(--accent-dim) 0%, transparent 55%),
    var(--bg-card);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: var(--card-shadow);
}

.custom-limits-cta-text {
  flex: 1 1 320px;
  min-width: 0;
}

.custom-limits-cta-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1.3;
}

.custom-limits-cta-title svg {
  color: var(--accent);
  flex-shrink: 0;
}

.custom-limits-cta-body {
  font-size: 0.94rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}

.custom-limits-cta-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.custom-limits-cta-actions .btn {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .custom-limits-cta {
    padding: 1.25rem;
    gap: 1rem;
  }
  .custom-limits-cta-title { font-size: 1rem; }
  .custom-limits-cta-body { font-size: 0.88rem; }
  .custom-limits-cta-actions { width: 100%; }
  .custom-limits-cta-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   Launch-urgency banner (index / pricing / dashboard /
   api-keys / billing)
   The navbar is `position: fixed`, so an in-flow banner placed
   at the top of the page renders UNDERNEATH it. Pages whose
   banner sits inside `.container` already get clearance from
   that container's padding-top; the rest need it here.
   `--nav-h` is re-measured at runtime by js/header.js.
   ============================================================ */
:root { --nav-h: 93px; }
@media (max-width: 768px) { :root { --nav-h: 69px; } }

.launch-urgency-banner {
  background: linear-gradient(90deg, #0d9488 0%, #14b8a6 100%);
  color: #fff;
  margin-top: var(--nav-h);
}

/* `.container` already reserves the navbar's height */
.container .launch-urgency-banner { margin-top: 0; }

.launch-urgency-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
}

.launch-urgency-banner strong { font-weight: 800; color: #fef3c7; }

.launch-urgency-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #fff;
  color: #0d9488 !important;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 0.42rem 0.9rem;
  border-radius: 8px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s, transform 0.18s;
}

.launch-urgency-cta:hover { background: #fef3c7; transform: translateY(-1px); }

/* The banner now provides the navbar clearance, so the hero that
   follows it must not reserve that space a second time. */
.launch-urgency-banner + .hero { padding-top: 3rem; }
.launch-urgency-banner + .pricing-hero { padding-top: 3.5rem; }

@media (min-width: 769px) {
  /* keep the fold exactly one screen tall with the banner above it */
  .launch-urgency-banner + .hero { min-height: calc(100vh - var(--nav-h)); }
}

@media (max-width: 768px) {
  .launch-urgency-inner {
    padding: 0.55rem 1rem;
    gap: 0.55rem;
    font-size: 0.82rem;
    line-height: 1.35;
  }
  .launch-urgency-cta { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
  .launch-urgency-banner + .hero { padding-top: 1.5rem; }
  .launch-urgency-banner + .pricing-hero { padding-top: 2rem; }
}

@media (max-width: 380px) {
  .launch-urgency-inner { font-size: 0.78rem; padding: 0.5rem 0.75rem; }
  .launch-urgency-cta { font-size: 0.76rem; padding: 0.36rem 0.7rem; }
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────────
   Canonical rules for the `Home / SERP API / <product>` trail. These were
   copy-pasted inline into 27 product pages in two near-identical variants, one
   of them under a `.breadcrumbs` class on a plain <div> with no landmark. The
   markup is now uniformly <nav class="breadcrumb" aria-label="Breadcrumb"> and
   the styling lives here.

   Pages with a different header layout (blog, docs, faq, playground, pricing)
   keep a smaller top padding as an inline override — their inline <style> comes
   after this file, so the cascade already favours them. */
.breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: var(--text-muted); margin: 0 0.5rem; }

@media (max-width: 768px) {
  .breadcrumb { padding-top: 5rem; }
}

/* ── Announcement rotator ────────────────────────────────────────────────────
   A `.launch-urgency-banner[data-rotator]` cross-fades between its two
   `.launch-slide` children (driven by /js/banner-rotator.js). Every rule here
   is scoped to `[data-rotator]`, so the plain banner rules above are untouched
   and a banner without the attribute renders exactly as before.

   NO LAYOUT SHIFT — both slides occupy the SAME grid cell (grid-area: 1/1),
   so the row is always sized to the TALLER of the two and the banner height
   is identical on either slide at every width. The inactive slide therefore
   keeps its box (it has to, for that sizing) but is hidden with
   visibility:hidden, NOT merely opacity:0, so its link is neither tabbable
   nor announced by a screen reader. */
.launch-urgency-banner[data-rotator] { overflow: hidden; }
/* One-cell grid = the stack. Both slides are always laid out; only paint differs. */
.launch-urgency-banner[data-rotator] .launch-rotator-stack { display: grid; grid-template-columns: 1fr; align-items: center; }
.launch-urgency-banner[data-rotator] .launch-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  /* fade out over 500ms, THEN drop out of the a11y/tab tree */
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}
.launch-urgency-banner[data-rotator] .launch-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms ease, visibility 0s linear 0s;
}
/* Reduced motion: no cross-fade at all (the JS also stops auto-rotating and
   parks on the first slide), so the banner is a plain static bar. */
@media (prefers-reduced-motion: reduce) {
  /* `.is-active` must be listed too: [attr] .class.class outranks [attr] .class,
     so a rule that named only `.launch-slide` would leave the ACTIVE slide still
     animating (measured transition-duration "0.5s, 0s" under reduced motion). */
  .launch-urgency-banner[data-rotator] .launch-slide,
  .launch-urgency-banner[data-rotator] .launch-slide.is-active { transition: none; }
}