/* ============================================================
   Software-list — "beste AI-klantenservicesoftware" (spoor 3)
   Per-optie kaart met eerlijke voor- en nadelen. Dedicated,
   hand-geschreven (dus niet geraakt door de Bootstrap-purge),
   gelaagd op tokens.css + site.css + feature-page.css +
   compare-page.css. Prefix: sl-
   ============================================================ */

.sl-group__head {
  max-width: 60ch;
  margin: 0 auto clamp(24px, 3vw, 38px);
  text-align: center;
}
.sl-group__head h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-navy-800);
  margin: 0 0 8px;
}
.sl-group__head p {
  color: var(--fg-3);
  font-size: 1rem;
  margin: 0;
}

.sl-list {
  display: grid;
  gap: 20px;
  max-width: 940px;
  margin-inline: auto;
}

.sl-entry {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--shadow-xs);
}
.sl-entry--us {
  border-color: color-mix(in oklch, var(--brand-orange) 35%, transparent);
  box-shadow: 0 12px 34px -16px rgba(235, 120, 14, 0.24), var(--shadow-xs);
}

.sl-entry__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.sl-entry__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-navy-800);
  margin: 0;
}
.sl-entry--us .sl-entry__name { color: var(--brand-orange-700); }
.sl-entry__tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--brand-navy-50);
  color: var(--brand-navy-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sl-entry--us .sl-entry__tag {
  background: var(--brand-orange-50);
  color: var(--brand-orange-700);
}
.sl-entry__lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 20px;
}

.sl-entry__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sl-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sl-col--plus .sl-col__head { color: var(--brand-navy-700); }
.sl-col--minus .sl-col__head { color: var(--fg-4); }
.sl-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.sl-col li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.sl-col li svg { flex: none; margin-top: 3px; }
.sl-col--plus li svg { color: var(--brand-orange); }
.sl-col--minus li svg { color: var(--brand-navy-300); }
.sl-col a {
  color: var(--brand-orange-700);
  font-weight: 600;
  border-bottom: 1px solid color-mix(in oklch, var(--brand-orange) 35%, transparent);
}
.sl-col a:hover { color: var(--brand-orange); border-bottom-color: currentColor; }

@media (max-width: 720px) {
  .sl-entry__cols { grid-template-columns: 1fr; gap: 16px; }
  .sl-entry__tag { margin-left: 0; }
}

/* "Ook het bekijken waard" — compact trio */
.sl-more {
  max-width: 940px;
  margin: clamp(28px, 3vw, 40px) auto 0;
}
.sl-more__head {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand-navy-800);
  text-align: center;
  margin: 0 0 18px;
}
.sl-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sl-more__card {
  background: var(--neutral-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-3);
}
.sl-more__card b { color: var(--brand-navy-800); font-weight: 700; }

@media (max-width: 720px) {
  .sl-more__grid { grid-template-columns: 1fr; }
}