body.comparison-hub-body {
  --problem-accent: #4f46e5;
  --problem-accent-mid: #818cf8;
  --problem-accent-soft: rgba(79, 70, 229, 0.12);
  --problem-accent-glow: rgba(79, 70, 229, 0.22);
}

body.comparison-hub-body .problems-page__hero--hub .problems-page__orb--1 {
  background: linear-gradient(145deg, #c7d2fe, #e0e7ff);
}

body.comparison-hub-body .problems-page__hero--hub .problems-page__orb--2 {
  background: linear-gradient(160deg, #ddd6fe, var(--problem-accent-soft));
}

body.comparison-hub-body .comparison-hub__group {
  margin-bottom: 48px;
}

body.comparison-hub-body .comparison-hub__group:last-child {
  margin-bottom: 0;
}

body.comparison-hub-body .comparison-hub__group-head {
  margin-bottom: 22px;
  max-width: 720px;
}

body.comparison-hub-body .comparison-hub__group-title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--problems-navy);
}

body.comparison-hub-body .comparison-hub__group-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 10px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--problem-accent-mid),
    var(--problem-accent-soft),
    transparent
  );
}

body.comparison-hub-body .comparison-hub__group-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--problems-muted);
}

body.comparison-hub-body .problems-page__hub-card--manual-testing {
  --hub-accent: #0d9488;
  --hub-accent-mid: #2dd4bf;
  --hub-accent-soft: rgba(13, 148, 136, 0.14);
}

body.comparison-hub-body .problems-page__hub-card--selenium {
  --hub-accent: #43b02a;
  --hub-accent-mid: #65d039;
  --hub-accent-soft: rgba(67, 176, 42, 0.14);
}

body.comparison-hub-body .problems-page__hub-card--playwright {
  --hub-accent: #2ead33;
  --hub-accent-mid: #45d04a;
  --hub-accent-soft: rgba(46, 173, 51, 0.14);
}

body.comparison-hub-body .problems-page__hub-card--cypress {
  --hub-accent: #6b7280;
  --hub-accent-mid: #9ca3af;
  --hub-accent-soft: rgba(107, 114, 128, 0.14);
}

body.comparison-hub-body .problems-page__hub-card--puppeteer {
  --hub-accent: #00d8a2;
  --hub-accent-mid: #34ebc0;
  --hub-accent-soft: rgba(0, 216, 162, 0.14);
}

body.comparison-hub-body .problems-page__hub-card--browserstack {
  --hub-accent: #f97316;
  --hub-accent-mid: #fb923c;
  --hub-accent-soft: rgba(249, 115, 22, 0.16);
}

body.comparison-hub-body .problems-page__hub-card--lambdatest {
  --hub-accent: #7c3aed;
  --hub-accent-mid: #a78bfa;
  --hub-accent-soft: rgba(124, 58, 237, 0.14);
}

body.comparison-hub-body .problems-page__hub-card--bugbug {
  --hub-accent: #2563eb;
  --hub-accent-mid: #60a5fa;
  --hub-accent-soft: rgba(37, 99, 235, 0.14);
}

body.comparison-hub-body .problems-page__hub-card--katalon {
  --hub-accent: #dc2626;
  --hub-accent-mid: #f87171;
  --hub-accent-soft: rgba(220, 38, 38, 0.14);
}

body.comparison-hub-body .problems-page__hub-card--leapwork {
  --hub-accent: #0891b2;
  --hub-accent-mid: #22d3ee;
  --hub-accent-soft: rgba(8, 145, 178, 0.14);
}

body.comparison-hub-body .problems-page__hub-card--testsigma {
  --hub-accent: #0d9488;
  --hub-accent-mid: #2dd4bf;
  --hub-accent-soft: rgba(13, 148, 136, 0.14);
}

body.comparison-hub-body .problems-page__hub-card-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: calc(var(--problems-radius-lg) + 2px) calc(var(--problems-radius-lg) + 2px) 0 0;
  background: linear-gradient(90deg, var(--hub-accent-mid), var(--hub-accent));
  pointer-events: none;
}

@media (max-width: 900px) {
  body.comparison-hub-body .comparison-hub__group {
    margin-bottom: 40px;
  }
}