/* ============================================================
   ferramentasmcp.com — Design System
   Modern, trustworthy, conversion-optimized
   ============================================================ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variables ── */
:root {
  /* Brand Colors */
  --brand-primary: #6366f1;     /* Indigo — modern AI/tech */
  --brand-primary-dark: #4f46e5;
  --brand-primary-light: #818cf8;
  --brand-secondary: #10b981;   /* Emerald — trust/success */
  --brand-accent: #f59e0b;      /* Amber — badges/highlights */

  /* Neutrals */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Surfaces */
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-dark: #0f172a;
  --bg-dark-card: #1e293b;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Borders */
  --radius-sm: 0.375rem;
  --radius: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-glow: 0 0 0 3px rgb(99 102 241 / 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition: 250ms ease;
  --transition-slow: 400ms ease;

  /* Container */
  --container-max: 1200px;
  --container-padding: 1.25rem;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--gray-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Layout ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.section { padding: var(--space-16) 0; }
.section-lg { padding: var(--space-24) 0; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
/* Element-level defaults so bare <h2>/<h3> in article and review bodies
   don't inherit the browser default (24px) regardless of viewport.
   Class-based sizes below still win on specificity. */
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1.1; }
.text-6xl { font-size: 3.75rem; line-height: 1.05; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.text-muted { color: var(--gray-500); }
.text-primary { color: var(--brand-primary); }
.text-success { color: var(--brand-secondary); }
.text-center { text-align: center; }
.leading-tight { line-height: 1.25; }

/* ── Gradient Text ── */
.gradient-text {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border: 2px solid transparent;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.btn:hover::before { opacity: 1; }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 14px 0 rgb(99 102 241 / 0.4);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px 0 rgb(99 102 241 / 0.5);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: #fff;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--gray-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
  border-color: var(--gray-200);
}
.btn-ghost:hover {
  background: var(--gray-50);
  color: var(--gray-800);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: var(--radius-md);
}
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
}
.btn-full { width: 100%; }

/* CTA pulse animation */
.btn-primary.pulse {
  animation: pulse-shadow 2s infinite;
}
@keyframes pulse-shadow {
  0%, 100% { box-shadow: 0 4px 14px 0 rgb(99 102 241 / 0.4); }
  50% { box-shadow: 0 4px 28px 0 rgb(99 102 241 / 0.7); }
}

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
  transition: all var(--transition);
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--gray-300);
}
.card-featured {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary), var(--shadow-lg);
}
.card-body { padding: var(--space-6); }
.card-body-lg { padding: var(--space-8); }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-primary { background: rgb(99 102 241 / 0.1); color: var(--brand-primary); }
.badge-success { background: rgb(16 185 129 / 0.1); color: var(--brand-secondary); }
.badge-warning { background: rgb(245 158 11 / 0.1); color: var(--brand-accent); }
.badge-muted { background: var(--gray-100); color: var(--gray-600); }
.badge-recommended {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff;
  box-shadow: 0 2px 8px rgb(99 102 241 / 0.4);
}

/* ── Navigation ── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  transition: all var(--transition);
}
.navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--gray-900);
}
.logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: white;
  box-shadow: 0 2px 8px rgb(99 102 241 / 0.35);
}
.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav-link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: all var(--transition-fast);
}
.nav-link:hover { color: var(--gray-900); background: var(--gray-100); }
.nav-link.active { color: var(--brand-primary); background: rgb(99 102 241 / 0.08); }
.navbar-cta { margin-left: var(--space-4); }
.navbar-tools { display: flex; align-items: center; gap: var(--space-2); }
.navbar-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--gray-600);
  transition: all var(--transition-fast);
}
.navbar-search:hover { background: var(--gray-100); color: var(--gray-900); }
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}
.hamburger span {
  width: 22px;
  height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

/* ── Hero ── */
.hero {
  background: linear-gradient(160deg, #fff 0%, #f0f4ff 40%, #f8fafc 100%);
  padding: var(--space-20) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgb(99 102 241 / 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgb(16 185 129 / 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgb(99 102 241 / 0.08);
  border: 1px solid rgb(99 102 241 / 0.2);
  color: var(--brand-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}
.hero-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 800px;
}
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--gray-500);
  max-width: 600px;
  margin-bottom: var(--space-8);
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.stat-item { display: flex; flex-direction: column; }
.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-label { font-size: 0.8125rem; color: var(--gray-500); margin-top: 0.2rem; }

/* ── Search ── */
.search-box {
  position: relative;
  max-width: 560px;
}
.search-box input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 3rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: var(--font-sans);
  background: #fff;
  color: var(--gray-900);
  transition: all var(--transition-fast);
  outline: none;
  box-shadow: var(--shadow-sm);
}
.search-box input:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-glow);
}
.search-box input::placeholder { color: var(--gray-400); }
.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 1.1rem;
  pointer-events: none;
}

/* ── Star Rating ── */
.stars { display: flex; gap: 2px; }
.star { font-size: 0.875rem; }
.star.filled { color: var(--brand-accent); }
.star.empty { color: var(--gray-300); }
.star.half { color: var(--brand-accent); opacity: 0.55; }
.star-rating { display: inline-flex; align-items: center; gap: var(--space-2); }
.star-rating-sm .star { font-size: 0.75rem; }
.star-rating-sm .rating-value { font-size: 0.8125rem; }
.rating-value { font-size: 0.875rem; font-weight: 600; color: var(--gray-700); }

/* ── Tool Card ── */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tool-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.tool-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
}
.tool-logo.primary {
  background: linear-gradient(135deg, rgb(99 102 241 / 0.1), rgb(99 102 241 / 0.2));
  border-color: rgb(99 102 241 / 0.3);
}
.tool-meta { flex: 1; min-width: 0; }
.tool-name { font-size: 1.125rem; font-weight: 700; color: var(--gray-900); }
.tool-tagline { font-size: 0.8125rem; color: var(--gray-500); margin-top: 0.15rem; }
.tool-price-tag {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-100);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.tool-description { font-size: 0.9375rem; color: var(--gray-600); line-height: 1.6; }
.tool-features-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.feature-chip {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}
.mcp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mcp-native { background: rgb(16 185 129 / 0.1); color: #059669; border: 1px solid rgb(16 185 129 / 0.3); }
.mcp-extension { background: rgb(245 158 11 / 0.1); color: #d97706; border: 1px solid rgb(245 158 11 / 0.3); }

/* ── Pros/Cons ── */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.pros-cons-box { background: var(--gray-50); border-radius: var(--radius); padding: var(--space-4); }
.pros-cons-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}
.pros-cons-title.pros { color: var(--brand-secondary); }
.pros-cons-title.cons { color: #ef4444; }
.pros-cons-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
  line-height: 1.45;
}
.pros-cons-item .icon { flex-shrink: 0; margin-top: 0.1rem; }

/* ── Grid ── */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ── Section Headers ── */
.section-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--space-4); }
.section-subtitle { color: var(--gray-500); font-size: 1.0625rem; line-height: 1.6; }

/* ── Comparison Table ── */
.comparison-table { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--gray-200); }
.comparison-table table { width: 100%; border-collapse: collapse; }
.comparison-table th {
  background: var(--gray-50);
  padding: var(--space-4) var(--space-6);
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.comparison-table th.highlight { background: rgb(99 102 241 / 0.05); }
.comparison-table td {
  padding: var(--space-4) var(--space-6);
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.comparison-table td.highlight { background: rgb(99 102 241 / 0.03); }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:hover td { background: var(--gray-50); }
.comparison-table tr:hover td.highlight { background: rgb(99 102 241 / 0.06); }
.check { color: var(--brand-secondary); font-weight: 700; }
.cross { color: #ef4444; }

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}
/* FAQ uses native <details>/<summary>: works without JavaScript and is
   crawlable. The old button-based classes are kept below for compatibility. */
.faq-question {
  width: 100%;
  text-align: left;
  padding: var(--space-5) var(--space-6);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  transition: background var(--transition-fast);
}
.faq-question::-webkit-details-marker,
.faq-question::marker { display: none; content: ''; }
.faq-question:hover { background: var(--gray-50); }
.faq-question.open { background: var(--gray-50); color: var(--brand-primary); }
.faq-icon { flex-shrink: 0; transition: transform var(--transition-fast); font-size: 1.25rem; color: var(--gray-400); }
.faq-question.open .faq-icon { transform: rotate(45deg); color: var(--brand-primary); }

/* Open state, driven by the native attribute */
details.faq-item[open] > .faq-question { background: var(--gray-50); color: var(--brand-primary); }
details.faq-item[open] > .faq-question .faq-icon { transform: rotate(45deg); color: var(--brand-primary); }

.faq-answer {
  display: block;
  padding: 0 var(--space-6) var(--space-5);
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.7;
  border-top: 1px solid var(--gray-100);
}
.faq-answer p { margin: 0; }

/* ── CTA Section ── */
.cta-section {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--space-4); }
.cta-section p { color: rgba(255,255,255,0.85); font-size: 1.0625rem; max-width: 480px; margin: 0 auto var(--space-8); }
.btn-white {
  background: #fff;
  color: var(--brand-primary);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.btn-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--brand-primary); transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--brand-primary-dark); }
.breadcrumb-sep { color: var(--gray-300); }

/* ── Trust Signals ── */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-4) 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--gray-500);
  font-weight: 500;
}
.trust-icon { font-size: 1rem; }

/* ── Table of Contents ── */
.toc {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-8);
}
.toc-title { font-size: 0.875rem; font-weight: 700; color: var(--gray-700); margin-bottom: var(--space-3); }
.toc-list { display: flex; flex-direction: column; gap: var(--space-1); }
.toc-link {
  font-size: 0.875rem;
  color: var(--brand-primary);
  padding: 0.2rem 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.toc-link:hover { text-decoration: underline; }

/* ── Pill Tabs ── */
.tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.tab-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  background: var(--bg-card);
  transition: all var(--transition-fast);
}
.tab-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.tab-btn.active {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 2px 8px rgb(99 102 241 / 0.35);
}

/* ── Footer ── */
.footer {
  background: var(--bg-dark);
  color: var(--gray-400);
  padding: var(--space-12) 0 var(--space-8);
  margin-top: var(--space-20);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}
.footer-legal { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.footer-brand .logo { color: #fff; margin-bottom: var(--space-3); }
.footer-desc { font-size: 0.875rem; line-height: 1.6; max-width: 280px; }
.footer-col-title { font-size: 0.8125rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-4); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-link { font-size: 0.875rem; transition: color var(--transition-fast); }
.footer-link:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.8125rem;
}
.footer-bottom a { transition: color var(--transition-fast); }
.footer-bottom a:hover { color: #fff; }
.affiliate-disclosure {
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}

/* ── Sticky CTA Bar (mobile) ── */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(12px);
  padding: var(--space-3) var(--space-4);
  z-index: 200;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
}
.sticky-cta p { color: #fff; font-size: 0.875rem; font-weight: 500; }

/* ── Utility ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.w-full { width: 100%; }
.max-w-3xl { max-width: 768px; }
.max-w-4xl { max-width: 896px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-auto { margin-top: auto; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Article / Long Content ── */
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.625rem; margin-top: var(--space-10); margin-bottom: var(--space-4); }
.prose h3 { font-size: 1.25rem; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose p { font-size: 1rem; color: var(--gray-700); line-height: 1.8; margin-bottom: var(--space-5); }
.prose ul, .prose ol { padding-left: var(--space-6); margin-bottom: var(--space-5); }
.prose li { font-size: 1rem; color: var(--gray-700); line-height: 1.7; margin-bottom: var(--space-2); }
.prose strong { color: var(--gray-900); }
.prose a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.prose code { font-family: var(--font-mono); font-size: 0.875em; background: var(--gray-100); padding: 0.15em 0.4em; border-radius: 4px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root { --container-padding: 1rem; }
  .section { padding: var(--space-12) 0; }
  .section-lg { padding: var(--space-16) 0; }
  .hero { padding: var(--space-12) 0 var(--space-10); }

  .navbar-nav { display: none; }
  .navbar-cta { display: none; }
  .hamburger { display: flex; }

  /* Mobile nav (when open) */
  .navbar-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    z-index: 99;
    gap: var(--space-1);
  }
  .navbar-nav.open .navbar-cta { display: block; margin-left: 0; margin-top: var(--space-2); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .pros-cons { grid-template-columns: 1fr; }
  .hero-stats { gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 72px; }
  .comparison-table { font-size: 0.875rem; }
  .comparison-table th, .comparison-table td { padding: var(--space-3) var(--space-4); }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2rem; }
  .btn-lg { padding: 0.875rem 1.5rem; font-size: 0.9375rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-section { padding: var(--space-8) var(--space-4); }
}

/* ── Animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease forwards; }
.fade-in-up-delay-1 { animation-delay: 0.1s; opacity: 0; }
.fade-in-up-delay-2 { animation-delay: 0.2s; opacity: 0; }
.fade-in-up-delay-3 { animation-delay: 0.3s; opacity: 0; }

/* ── Print / Accessibility ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
/* ============================================================
   COMPONENT LAYER — added with the SEO/content expansion
   Appended into style.css at build-prep time.
   ============================================================ */

/* ── Layout containers ── */
.container-narrow {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-8) var(--container-padding) var(--space-16);
}
.container-wide { max-width: 1080px; }

/* ── Page headers ── */
.page-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.page-lede {
  font-size: 1.0625rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-6);
  max-width: 72ch;
}
.page-meta {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-bottom: var(--space-8);
}
.page-search { margin: var(--space-6) 0 var(--space-10); max-width: 560px; }

/* ── Skip link (a11y) ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--brand-primary);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  font-size: 0.875rem;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

/* ── Key takeaway (answer-engine extraction block) ── */
.key-takeaway {
  background: linear-gradient(135deg, rgb(99 102 241 / 0.07), rgb(16 185 129 / 0.05));
  border: 1px solid rgb(99 102 241 / 0.22);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
}
.key-takeaway-label {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}
.key-takeaway-text {
  font-size: 1rem;
  color: var(--gray-800);
  line-height: 1.75;
  margin: 0;
}

/* ── Author box (E-E-A-T) ── */
.author-box {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin: var(--space-6) 0 var(--space-8);
}
.author-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--brand-primary), #a78bfa);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
}
.author-info { min-width: 0; }
.author-name { font-size: 0.9375rem; color: var(--gray-800); margin-bottom: var(--space-1); }
.author-role { color: var(--gray-500); font-weight: 400; }
.author-bio { font-size: 0.875rem; color: var(--gray-600); line-height: 1.6; margin-bottom: var(--space-2); }
.author-meta { font-size: 0.8125rem; color: var(--gray-500); }
.author-expertise { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* ── Chips ── */
.chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}
.chip-sm { font-size: 0.6875rem; padding: 0.15rem 0.5rem; }

/* ── Breadcrumb (item-based markup) ── */
.breadcrumb-item { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ── Callouts ── */
.callout {
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  border: 1px solid;
}
.callout-title { font-weight: 700; font-size: 0.9375rem; margin-bottom: var(--space-2); }
.callout-body { font-size: 0.9375rem; line-height: 1.75; }
.callout-body p:last-child { margin-bottom: 0; }
.callout-info { background: rgb(99 102 241 / 0.06); border-color: rgb(99 102 241 / 0.25); }
.callout-info .callout-title { color: var(--brand-primary-dark); }
.callout-info .callout-body { color: var(--gray-700); }
.callout-warning { background: rgb(245 158 11 / 0.08); border-color: rgb(245 158 11 / 0.3); }
.callout-warning .callout-title { color: #b45309; }
.callout-warning .callout-body { color: var(--gray-700); }
.callout-success { background: rgb(16 185 129 / 0.07); border-color: rgb(16 185 129 / 0.28); }
.callout-success .callout-title { color: #047857; }
.callout-success .callout-body { color: var(--gray-700); }
.callout-body a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ── Pros / cons ── */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.pros-cons-box {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.pros-cons-title { font-size: 0.875rem; font-weight: 800; margin-bottom: var(--space-4); }
.pros-cons-title.pros { color: var(--brand-secondary); }
.pros-cons-title.cons { color: #dc2626; }
.pros-cons-list { display: flex; flex-direction: column; gap: var(--space-3); }
.pros-cons-list li { display: flex; gap: var(--space-2); font-size: 0.9375rem; color: var(--gray-700); line-height: 1.6; }
.icon-yes { color: var(--brand-secondary); flex-shrink: 0; font-weight: 700; }
.icon-no { color: #dc2626; flex-shrink: 0; font-weight: 700; }

/* ── Feature list ── */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); }
.feature-list li { display: flex; gap: var(--space-2); font-size: 0.9375rem; color: var(--gray-700); line-height: 1.6; }

/* ── Data tables ── */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-6) 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 480px; }
.data-table th, .data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}
.data-table thead th {
  background: var(--gray-50);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600);
  white-space: nowrap;
}
.data-table tbody th { font-weight: 600; color: var(--gray-900); }
.data-table tbody td { color: var(--gray-600); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--gray-50); }

/* ── Code blocks ── */
.code-figure { margin: var(--space-6) 0; }
.code-caption { font-size: 0.8125rem; font-weight: 600; color: var(--gray-500); margin-bottom: var(--space-2); }
.code-block {
  position: relative;
  background: var(--bg-dark);
  border-radius: var(--radius);
  padding: var(--space-5);
  overflow-x: auto;
  border: 1px solid rgb(255 255 255 / 0.08);
}
.code-block pre { margin: 0; }
.code-block code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #e2e8f0;
  white-space: pre;
}
.code-lang {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
}

/* ── Related links block ── */
.related-block {
  margin: var(--space-12) 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--gray-200);
}
.related-title { font-size: 1.25rem; margin-bottom: var(--space-5); }
.related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.related-list a {
  display: block;
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  height: 100%;
}
.related-list a:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.related-label { display: block; font-weight: 700; font-size: 0.9375rem; color: var(--gray-900); margin-bottom: var(--space-1); }
.related-desc { display: block; font-size: 0.8125rem; color: var(--gray-500); line-height: 1.55; }

/* ── Sources ── */
.sources {
  margin: var(--space-10) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.sources-title { font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-600); margin-bottom: var(--space-3); }
.sources-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.sources-list a { font-size: 0.875rem; color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
.sources-note { font-size: 0.8125rem; color: var(--gray-500); line-height: 1.6; margin: 0; }

/* ── Methodology note ── */
.methodology-note { font-size: 0.8125rem; color: var(--gray-500); margin: var(--space-4) 0; line-height: 1.6; }
.methodology-note a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ── Affiliate CTA ── */
.affiliate-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; }
.affiliate-cta-full { flex-direction: column; align-items: stretch; }
.affiliate-cta-full .btn { text-align: center; }
.affiliate-note {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.55;
  margin: 0;
}

/* ── Link helpers ── */
.link-arrow { color: var(--brand-primary); font-weight: 600; font-size: 0.875rem; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 2px; }
.link-list { display: flex; flex-direction: column; gap: var(--space-3); }
.link-list a { color: var(--brand-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.subsection-title { font-size: 1.0625rem; margin: var(--space-6) 0 var(--space-4); }
.section-title-sm { font-size: 1.5rem; margin-bottom: var(--space-2); }
.section-subtitle-sm { color: var(--gray-500); font-size: 0.9375rem; margin-bottom: var(--space-6); }
.section-more { margin-top: var(--space-5); }
.tools-section { margin-bottom: var(--space-12); }

/* ── Newsletter ── */
.newsletter {
  background: linear-gradient(135deg, var(--gray-900), #312e81);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-12) 0;
}
.newsletter-title { color: #fff; font-size: 1.375rem; margin-bottom: var(--space-2); }
.newsletter-desc { color: var(--gray-300); font-size: 0.9375rem; line-height: 1.65; margin-bottom: var(--space-5); max-width: 52ch; }
.newsletter-form { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.newsletter-input {
  flex: 1 1 240px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid rgb(255 255 255 / 0.2);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
}
.newsletter-input::placeholder { color: var(--gray-400); }
.newsletter-input:focus { outline: none; border-color: var(--brand-primary-light); box-shadow: 0 0 0 3px rgb(129 140 248 / 0.25); }
.newsletter-status { font-size: 0.875rem; min-height: 1.25rem; margin-bottom: var(--space-2); }
.newsletter-status.ok { color: #6ee7b7; }
.newsletter-status.err { color: #fca5a5; }
.newsletter-privacy { font-size: 0.75rem; color: var(--gray-400); margin: 0; }
.newsletter-privacy a { color: var(--gray-300); text-decoration: underline; }

/* ── 404 ── */
.notfound { text-align: center; }
.notfound-icon { font-size: 3.5rem; margin-bottom: var(--space-4); }
.notfound-links { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin: var(--space-8) 0; }

/* ── Contact list ── */
.contact-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0; }
.contact-list li { font-size: 0.9375rem; color: var(--gray-700); }
.contact-list a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
/* ============================================================
   COMPONENT LAYER 2 — ranking, tools, comparisons, servers
   ============================================================ */

/* ── Ranking list ── */
.ranking-list { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-8) 0; }
.ranking-card { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-5); padding: var(--space-6); align-items: start; }
.ranking-card.card:hover { transform: none; }
.ranking-position {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 900;
  background: var(--gray-100);
  color: var(--gray-600);
  flex-shrink: 0;
}
.ranking-card:nth-child(1) .ranking-position { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; font-size: 1.375rem; }
.ranking-card:nth-child(2) .ranking-position { background: var(--gray-200); color: var(--gray-700); font-size: 1.375rem; }
.ranking-card:nth-child(3) .ranking-position { background: #fde68a; color: #92400e; font-size: 1.375rem; }
.ranking-body { min-width: 0; }
.ranking-header { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.tool-emoji { font-size: 1.375rem; }
.ranking-name { font-size: 1.25rem; }
.ranking-name a { color: var(--gray-900); }
.ranking-name a:hover { color: var(--brand-primary); }
.ranking-badges { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ranking-desc { font-size: 0.9375rem; color: var(--gray-600); line-height: 1.65; margin-bottom: var(--space-3); }
.ranking-bestfor { font-size: 0.875rem; color: var(--gray-600); line-height: 1.6; margin-bottom: var(--space-4); }
.ranking-links { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ranking-tested { font-size: 0.75rem; color: var(--gray-400); }
.tool-price-tag {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.inline-source { font-size: 0.8125rem; color: var(--gray-500); margin-top: var(--space-3); }
.inline-source a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
.price-disclaimer {
  font-size: 0.875rem;
  color: var(--gray-500);
  line-height: 1.65;
  background: var(--gray-50);
  border-left: 3px solid var(--gray-300);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Tool cards (index / grids) ── */
.tool-card { display: flex; flex-direction: column; }
.tool-card:hover { transform: translateY(-3px); }
.tool-card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.tool-card-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.tool-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-100);
}

/* ── Tool review page ── */
.tool-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-10);
  align-items: start;
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}
.tool-header { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-6); }
.tool-logo-lg { width: 64px; height: 64px; font-size: 2rem; }
.tool-header-text { min-width: 0; }
.tool-header-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-1); }
.tool-header-title h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -0.02em; }
.tool-header-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.tool-sidebar { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: 84px; }
.sidebar-card { background: var(--bg-card); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: var(--space-5); }
.sidebar-cta { text-align: center; border-color: rgb(99 102 241 / 0.3); background: linear-gradient(180deg, rgb(99 102 241 / 0.04), transparent); }
.sidebar-cta-title { font-weight: 800; font-size: 1.125rem; margin-bottom: var(--space-3); }
.sidebar-price { font-size: 0.875rem; color: var(--gray-600); margin: var(--space-3) 0; }
.sidebar-title { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin-bottom: var(--space-4); }
.sidebar-links { display: flex; flex-direction: column; gap: var(--space-2); }
.sidebar-links a { font-size: 0.875rem; color: var(--gray-700); }
.sidebar-links a:hover { color: var(--brand-primary); }
.spec-list { display: flex; flex-direction: column; gap: var(--space-3); }
.spec-list > div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 0.8125rem; }
.spec-list dt { color: var(--gray-500); flex-shrink: 0; }
.spec-list dd { color: var(--gray-800); font-weight: 600; text-align: right; }
.spec-list dd a { color: var(--brand-primary); }

/* ── Comparison pages ── */
.comparison-card { display: flex; flex-direction: column; }
.comparison-icons { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.comparison-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.comparison-card-title { font-size: 1.0625rem; line-height: 1.4; margin-bottom: var(--space-3); }
.comparison-card-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0; }
.comparison-updated { font-size: 0.75rem; color: var(--gray-400); }
.comparison-tools { display: grid; gap: var(--space-5); margin: var(--space-8) 0; }
.comparison-tools-2 { grid-template-columns: repeat(2, 1fr); }
.comparison-tools-3 { grid-template-columns: repeat(3, 1fr); }
.comparison-tool { padding: var(--space-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); position: relative; }
.comparison-winner { border-color: var(--brand-secondary); box-shadow: 0 0 0 2px rgb(16 185 129 / 0.15); }
.winner-ribbon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-secondary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
}
.comparison-tool-name { font-size: 1.125rem; }
.comparison-tool-desc { font-size: 0.875rem; color: var(--gray-600); line-height: 1.6; }
.comparison-tool-tested { font-size: 0.75rem; color: var(--gray-400); }
.comparison-tool-cta { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin-top: auto; }

.verdict-box {
  background: linear-gradient(135deg, var(--gray-900), #312e81);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-10) 0;
}
.verdict-title { color: #fff; font-size: 1.5rem; margin-bottom: var(--space-4); }
.verdict-reason { color: var(--gray-200); font-size: 1rem; line-height: 1.75; margin-bottom: var(--space-4); }
.verdict-detail { color: var(--gray-300); font-size: 0.9375rem; line-height: 1.75; margin-bottom: var(--space-5); }
.verdict-box .affiliate-note { color: var(--gray-400); }
.comparison-section { margin-top: var(--space-10); }
.section-winner {
  font-size: 0.875rem;
  color: var(--gray-600);
  background: var(--gray-50);
  border-left: 3px solid var(--brand-secondary);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--space-4);
}
/* ============================================================
   COMPONENT LAYER 3 — servers, glossary, use-cases, blog, search
   ============================================================ */

/* ── Server directory ── */
.server-card { display: flex; flex-direction: column; }
.server-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.server-card-head > div { min-width: 0; }
.server-card-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.server-header { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); }
.server-name { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.server-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.transport-section { margin: var(--space-12) 0; }

/* ── Glossary ── */
.alpha-nav {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-6) 0 var(--space-10);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--gray-200);
}
.alpha-link {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: all var(--transition-fast);
}
.alpha-link:hover { background: var(--brand-primary); color: #fff; }
.glossary-group { margin-bottom: var(--space-10); scroll-margin-top: 84px; }
.glossary-letter {
  font-size: 1.25rem;
  color: var(--brand-primary);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--brand-primary);
  display: inline-block;
  margin-bottom: var(--space-5);
}
.glossary-list { display: flex; flex-direction: column; gap: var(--space-4); }
.glossary-entry {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  transition: border-color var(--transition-fast);
}
.glossary-entry:hover { border-color: var(--brand-primary); }
.glossary-entry dt { font-weight: 700; font-size: 1rem; margin-bottom: var(--space-1); }
.glossary-entry dt a { color: var(--gray-900); }
.glossary-entry dt a:hover { color: var(--brand-primary); }
.glossary-entry dd { font-size: 0.875rem; color: var(--gray-600); line-height: 1.6; margin: 0; }

/* ── Use cases ── */
.usecase-card { display: flex; flex-direction: column; }
.usecase-icon { font-size: 2rem; margin-bottom: var(--space-3); }
.usecase-title { font-size: 1.125rem; line-height: 1.35; margin-bottom: var(--space-2); }
.usecase-audience { font-size: 0.8125rem; font-weight: 600; color: var(--brand-primary); margin-bottom: var(--space-3); }
.usecase-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
}
.usecase-metric { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 0.8125rem; }
.usecase-metric-label { color: var(--gray-500); }
.usecase-metric-value { color: var(--gray-800); font-weight: 600; text-align: right; }
.pain-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; }
.pain-list li { display: flex; gap: var(--space-3); font-size: 0.9375rem; color: var(--gray-700); line-height: 1.6; }
.pain-list li span { color: #dc2626; flex-shrink: 0; font-weight: 700; }
.pitfall-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; }
.pitfall-list li { display: flex; gap: var(--space-3); font-size: 0.9375rem; color: var(--gray-700); line-height: 1.7; }
.pitfall-list li span { color: var(--brand-accent); flex-shrink: 0; }
.workflow-card {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.workflow-title { display: flex; align-items: center; gap: var(--space-3); font-size: 1.125rem; margin-bottom: var(--space-4); }
.workflow-number {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 800;
}
.workflow-steps { display: flex; flex-direction: column; gap: var(--space-3); counter-reset: step; margin-bottom: var(--space-4); }
.workflow-steps li {
  display: flex;
  gap: var(--space-3);
  font-size: 0.9375rem;
  color: var(--gray-700);
  line-height: 1.65;
  counter-increment: step;
}
.workflow-steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.workflow-payoff {
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.7;
  background: rgb(16 185 129 / 0.06);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: 0;
}

/* ── Blog ── */
.category-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-8) 0; }
.category-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: all var(--transition-fast);
}
.category-chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.category-count {
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
}
.featured-articles { margin: var(--space-10) 0; }
.article-card { display: flex; flex-direction: column; }
.article-card-meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.article-reading { font-size: 0.75rem; color: var(--gray-400); }
.article-card-title { font-size: 1.125rem; line-height: 1.4; margin-bottom: var(--space-3); }
.article-card-desc { font-size: 0.875rem; color: var(--gray-600); line-height: 1.65; margin-bottom: var(--space-4); }
.article-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0; }
.article-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
}
.article-row:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-md); }
.article-row-icon { font-size: 1.5rem; flex-shrink: 0; }
.article-row-body { min-width: 0; }
.article-row-title { font-size: 1.0625rem; line-height: 1.4; margin-bottom: var(--space-2); }
.article-row-desc { font-size: 0.875rem; color: var(--gray-600); line-height: 1.6; margin-bottom: var(--space-2); }
.article-row-meta { font-size: 0.75rem; color: var(--gray-400); margin: 0; }

/* ── Article page ── */
.article-header { margin-bottom: var(--space-6); }
.article-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.article-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.article-body { max-width: none; }
.article-body h2 { scroll-margin-top: 84px; }
.article-faq { margin-top: var(--space-12); }
.article-updated-footer {
  font-size: 0.8125rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gray-200);
}
.article-updated-footer a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ── Search ── */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-box:focus-within { border-color: var(--brand-primary); box-shadow: var(--shadow-glow); }
.search-icon { font-size: 0.9375rem; flex-shrink: 0; }
.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--gray-800);
  padding: var(--space-2) 0;
}
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--gray-400); }
.search-page-form { margin: var(--space-6) 0 var(--space-8); }
.search-summary { font-size: 0.9375rem; color: var(--gray-600); margin-bottom: var(--space-6); }
.search-group { margin-bottom: var(--space-10); }
.search-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.125rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gray-200);
}
.search-group-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
}
.search-results { display: flex; flex-direction: column; gap: var(--space-2); }
.search-result {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  transition: background var(--transition-fast);
}
.search-result:hover { background: var(--bg-card); box-shadow: var(--shadow-sm); }
.search-result-icon { font-size: 1.25rem; flex-shrink: 0; }
.search-result-body { min-width: 0; }
.search-result-title { display: block; font-weight: 700; font-size: 0.9375rem; color: var(--gray-900); margin-bottom: var(--space-1); }
.search-result-desc { display: block; font-size: 0.8125rem; color: var(--gray-500); line-height: 1.6; }
.search-empty { text-align: center; padding: var(--space-8) 0; }
.search-empty-icon { font-size: 3rem; margin-bottom: var(--space-4); }
.search-empty p { color: var(--gray-600); font-size: 0.9375rem; line-height: 1.7; max-width: 52ch; margin: 0 auto var(--space-6); }

/* ── Reduced-motion + responsive for new components ── */
@media (max-width: 1024px) {
  .tool-page-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-page-grid > * { min-width: 0; }
  .tool-sidebar { position: static; }
  .comparison-tools-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .pros-cons { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .comparison-tools-2 { grid-template-columns: 1fr; }
  .comparison-tools-3 { grid-template-columns: 1fr; }
  .ranking-card { grid-template-columns: 1fr; gap: var(--space-4); }
  .ranking-position { width: 40px; height: 40px; font-size: 1rem; }
  .ranking-card:nth-child(-n+3) .ranking-position { font-size: 1.125rem; }
  .newsletter { padding: var(--space-6); }
  .verdict-box { padding: var(--space-6); }
  .tool-header { flex-direction: column; }
  .server-header { flex-direction: column; }
  .author-box { flex-direction: column; }
}

/* ============================================================
   MOBILE TYPE SCALE + TOUCH TARGETS
   The text-* utilities and several headings kept their desktop
   sizes on small screens (e.g. h2.text-3xl rendered 30px at
   375px wide). Step them down and give controls a usable tap area.
   ============================================================ */
@media (max-width: 768px) {
  /* Type utilities: one notch down */
  .text-6xl { font-size: 2.25rem; line-height: 1.1; }
  .text-5xl { font-size: 2rem; line-height: 1.15; }
  .text-4xl { font-size: 1.75rem; line-height: 1.2; }
  .text-3xl { font-size: 1.25rem; line-height: 1.65rem; }
  .text-2xl { font-size: 1.125rem; line-height: 1.55rem; }

  /* Headings that had no mobile step at all */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.0625rem; }
  .page-title { font-size: 1.5rem; line-height: 1.25; }
  .section-title { font-size: 1.375rem; }
  .server-name { font-size: 1.375rem; }
  .tool-header-title h1 { font-size: 1.375rem; }
  /* .cta-section h2 outranks a bare h2, so it needs its own mobile step */
  .cta-section h2 { font-size: 1.25rem; }
  .cta-section p { font-size: 1rem; }
  .verdict-title { font-size: 1.25rem; }
  .verdict-reason { font-size: 0.9375rem; }
  .prose h2 { font-size: 1.25rem; margin-top: var(--space-8); }
  .prose h3 { font-size: 1.125rem; }
  /* Article bodies render bare <h2>/<h3> that had no rule, so they fell back
     to the browser default (24px) regardless of viewport. */
  .article-body h2 { font-size: 1.25rem; line-height: 1.3; }
  .article-body h3 { font-size: 1.0625rem; line-height: 1.4; }
  .stat-value { font-size: 1.375rem; }
  .related-title { font-size: 1.125rem; }
  .glossary-letter { font-size: 1.125rem; }
  .faq-icon { font-size: 1.125rem; }
  .hero-eyebrow { font-size: 0.75rem; }

  /* Tap targets >= 44px */
  .navbar-search { width: 44px; height: 44px; }
  .hamburger { width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  .faq-question { min-height: 48px; }
  .btn-sm { min-height: 40px; padding: 0.625rem 1rem; }
  .footer-link { display: inline-block; padding: 0.375rem 0; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.75rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.1875rem; }
  h3 { font-size: 1rem; }
  .stat-value { font-size: 1.25rem; }
  .page-title { font-size: 1.375rem; }
  .section-title { font-size: 1.25rem; }
  .tool-header-title h1 { font-size: 1.25rem; }
  .cta-section h2 { font-size: 1.1875rem; }
  .cta-section p { font-size: 0.9375rem; }
  .verdict-title { font-size: 1.1875rem; }
  .page-title { font-size: 1.3125rem; }
  .server-name { font-size: 1.25rem; }
  .prose h2 { font-size: 1.1875rem; }
  .article-body h2 { font-size: 1.1875rem; }
  .text-3xl { font-size: 1.1875rem; }

  /* Navbar must not push past the viewport at 320px */
  .navbar-inner { gap: var(--space-2); }
  .navbar-logo { font-size: 0.9375rem; gap: 0.375rem; min-width: 0; }
  .navbar-logo > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo-icon { width: 30px; height: 30px; font-size: 1rem; }
  .navbar-tools { flex-shrink: 0; gap: 0.25rem; }
  .navbar-search, .hamburger { width: 40px; height: 40px; }
}

@media (print) {
  .navbar, .footer, .sticky-cta, .newsletter, .affiliate-cta { display: none !important; }
  .prose, .article-body { max-width: none; }
}