/* Sezione "Cosa cambia con ScoutHub?": due colonne con righe allineate (subgrid su desktop). */

.compare { padding-top: 32px; }

.compare__grid { display: grid; gap: 28px; margin-top: 32px; }
.compare__col { display: block; }

.compare__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.compare__badge { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; }
.compare__badge svg { width: 15px; height: 15px; }
.compare__badge--no { background: #B8B4BF; }
.compare__badge--yes { background: #46A972; }

.compare__list { margin: 0; padding: 0; list-style: none; }
.compare__list li {
  padding: 0 20px;
  background: var(--bg);
  display: flex;
  align-items: stretch;
}
.compare__list li:first-child { border-radius: 14px 14px 0 0; }
.compare__list li:last-child { border-radius: 0 0 14px 14px; }
.compare__col--no { --bg: #E8E6EB; --ic: var(--color-ink); }
.compare__col--yes { --bg: #E9F5EE; --ic: #2E9E5E; }

.compare__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-ink);
}
.compare__list li + li .compare__item { border-top: 2px solid rgba(255, 255, 255, 0.95); }
.compare__item svg { flex: none; width: 18px; height: 18px; color: var(--ic); }

@media (min-width: 900px) {
  .compare { padding-top: 40px; }
  .compare__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto repeat(5, 1fr);
    column-gap: 24px;
    row-gap: 0;
    margin-top: 44px;
  }
  .compare__col {
    display: grid;
    grid-row: 1 / span 6;
    grid-template-rows: subgrid;
  }
  .compare__list { display: contents; }
  .compare__head { font-size: 1.375rem; margin-bottom: 18px; }
  .compare__item { font-size: 1rem; }
}