/* ---------- Comparison ---------- */
.comparison { position: relative; width: 100%; padding: 82px 0; overflow: hidden; }
.comparison .site-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-right: 24px; padding-left: 24px; }
.comparison__title { max-width: 620px; margin: 0 0 38px; font-family: var(--connect-font-heading); font-size: clamp(36px, 3vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -.04em; }
.comparison__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; width: 100%; }
.comparison__card { display: flex; min-width: 0; min-height: 305px; padding: 38px 32px; flex-direction: column; border-radius: 20px; }
.comparison__card-title { margin: 0 0 24px; color: inherit; font-family: var(--connect-font-heading); font-size: 18px; line-height: 1.35; font-weight: 700; letter-spacing: -.02em; }
.comparison__list { display: flex; margin: 0; padding: 0; flex-direction: column; gap: 14px; list-style: none; }
.comparison__item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; font-family: var(--connect-font-body); font-size: 15px; line-height: 1.5; }
.comparison__item-text { min-width: 0; }
.comparison__icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; }
.comparison__icon svg { display: block; width: 16px; height: 16px; }
.comparison__icon svg path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Comparison Dark ---------- */
.comparison--dark { background: var(--connect-color-dark-bg); }
.comparison--dark .comparison__title { color: var(--connect-color-white); }
.comparison--dark .comparison__card--left { color: var(--connect-color-white); background: transparent; border: 1px solid rgba(255,255,255,.18); }
.comparison--dark .comparison__card--right { color: var(--connect-color-dark); background: var(--connect-color-white); border: 1px solid var(--connect-color-white); box-shadow: 0 16px 38px rgba(0,0,0,.12); }
.comparison--dark .comparison__card--left .comparison__item { color: rgba(255,255,255,.88); }
.comparison--dark .comparison__card--right .comparison__item { color: var(--connect-color-text); }
.comparison--dark .comparison__icon--negative { color: #7b8796; background: #f4f8f1; }
.comparison--dark .comparison__icon--positive { color: var(--connect-color-dark); background: var(--connect-color-primary); }

/* ---------- Comparison Light ---------- */
.comparison--light { background: var(--connect-color-white); }
.comparison--light .comparison__title { color: var(--connect-color-dark); }
.comparison--light .comparison__card { min-height: 360px; padding: 30px 28px; border: 1px solid #dce3e8; }
.comparison--light .comparison__card--left { color: var(--connect-color-dark); background: #f4faf2; }
.comparison--light .comparison__card--right { color: var(--connect-color-dark); background: var(--connect-color-white); box-shadow: 0 12px 30px rgba(18,35,68,.06); }
.comparison--light .comparison__card--left .comparison__card-title { color: #7a829d; }
.comparison--light .comparison__card--right .comparison__card-title { color: #8ed677; }
.comparison--light .comparison__item { color: var(--connect-color-text); font-size: 14px; }
.comparison--light .comparison__icon--negative { width: 20px; height: 20px; color: #7a829d; background: transparent; }
.comparison--light .comparison__icon--negative svg { width: 15px; height: 15px; }
.comparison--light .comparison__icon--positive { color: var(--connect-color-dark); background: #ace49d; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.comparison { padding: 72px 0; }
	.comparison__grid { gap: 18px; }
	.comparison__card { min-height: 0; padding: 32px 26px; }
	.comparison__item { font-size: 14px; }
	.comparison--light .comparison__card { min-height: 0; padding: 28px 24px; }
}

@media (max-width: 700px) {
	.comparison__grid { grid-template-columns: 1fr; }
	.comparison__title { margin-bottom: 30px; }
}

@media (max-width: 600px) {
	.comparison { padding: 58px 0; }
	.comparison .site-container { padding-right: 20px; padding-left: 20px; }
	.comparison__title { font-size: 32px; }
	.comparison__card { padding: 26px 22px; border-radius: 16px; }
	.comparison__card-title { margin-bottom: 20px; font-size: 17px; }
	.comparison__list { gap: 12px; }
	.comparison__item { grid-template-columns: 34px minmax(0, 1fr); gap: 11px; font-size: 14px; }
	.comparison__icon { width: 34px; height: 34px; }
	.comparison__icon svg { width: 15px; height: 15px; }
	.comparison--light .comparison__card { padding: 26px 22px; }
	.comparison--light .comparison__icon--negative { width: 20px; height: 20px; }
}

/* ---------- Single Integratie ---------- */
body.single-integratie .comparison { padding-top: 20px; padding-bottom: 20px; }