.comparison-hero h1 {
  max-width: 21ch;
  margin-bottom: 24px;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.1;
}

.comparison-lead {
  max-width: 76ch;
  font-size: 1.18rem;
}

.comparison-hero .button-group {
  margin-top: 28px;
}

.comparison-reviewed,
.comparison-note {
  margin-top: 24px;
  color: #4c6170;
  font-size: 0.9rem;
}

.comparison-table-scroll {
  overflow-x: auto;
  border: 1px solid #dbe5e1;
  border-radius: 12px;
  background: #fff;
}

.comparison-table-scroll:focus-visible {
  outline: 3px solid #147d77;
  outline-offset: 4px;
}

.comparison-page table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.94rem;
}

.systems-table {
  min-width: 1050px;
  table-layout: fixed;
}

.workflow-table {
  min-width: 640px;
}

.comparison-page caption {
  padding: 18px 20px;
  color: #2c4358;
  text-align: left;
  font-weight: 600;
}

.comparison-page th,
.comparison-page td {
  padding: 20px;
  border-top: 1px solid #dbe5e1;
  vertical-align: top;
  overflow-wrap: break-word;
}

.comparison-page thead th {
  background: #18384a;
  color: #fff;
}

.comparison-page tbody th {
  background: #f4f8f7;
  font-weight: 650;
}

.systems-table tbody td:nth-child(2) {
  background: #edf7f4;
}

.comparison-page td a {
  color: #126b65;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.comparison-table-hint {
  color: #4c6170;
  font-size: 0.9rem;
}

@media (min-width: 1200px) {
  .comparison-table-hint {
    display: none;
  }
}

@media (max-width: 640px) {
  .comparison-page th,
  .comparison-page td {
    padding: 16px;
  }
}