/* Block: Afspraken. Four promises, the beige review panel and a link. */
.promises-block { --review-rule: #CFC4B9; }   /* table header rule; no token for it */

.promises {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--green);
}
.promise { padding: 24px 28px 8px 0; display: grid; gap: 14px; align-content: start; }
.promise + .promise { padding-left: 28px; border-left: 1px solid var(--line); }
.promise .n { font-size: var(--fs-micro); color: var(--ink-soft); }
.promise h3 { font-size: var(--fs-h3); line-height: 1.1; }
.promise p { font-size: var(--fs-small); color: var(--ink-soft); }

.stopknop {
	margin-top: var(--sp-block);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: var(--col-gap);
	background: var(--beige);
	border-radius: var(--radius-l);
	padding: clamp(24px, 3.4vw, 48px);
}
.stopknop h3 { font-size: var(--fs-h3); margin-bottom: 14px; max-width: 14em; }
.stopknop > div > p { color: var(--ink-soft); font-size: var(--fs-small); max-width: 34em; }

.review { width: 100%; border-collapse: collapse; font-size: 16px; }
.review th {
	text-align: left;
	font-weight: 400;
	font-size: var(--fs-micro);
	color: var(--ink-soft);
	padding: 0 0 10px;
	border-bottom: 1px solid var(--review-rule);
}
.review td { padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.review td:last-child,
.review th:last-child { text-align: right; }
.review td:last-child { font-weight: 400; white-space: nowrap; }

.outcomes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.outcomes span { font-size: 14px; padding: 7px 13px; border-radius: 999px; background: var(--cream); }
.outcomes b { font-weight: 600; }

.promises-foot { margin-top: 40px; }

@media (max-width: 1180px) {
	.promises { grid-template-columns: 1fr 1fr; }
	.promise:nth-child(3) { padding-left: 0; border-left: 0; }
	.promise:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 8px; }
}
@media (max-width: 900px) {
	.stopknop { grid-template-columns: 1fr; row-gap: 28px; }
}
@media (max-width: 560px) {
	.promises { grid-template-columns: 1fr; }
	.promise,
	.promise + .promise { padding-left: 0; border-left: 0; }
	.promise + .promise { border-top: 1px solid var(--line); margin-top: 8px; }
	.review { font-size: 15px; }
}