/**
 * Benefit List — centred header over wrapping gold-dotted pills.
 * Typography via utilities; layout/pill styling only here.
 */

.flexible-section.benefit-list {
	background: var(--color-bg);
	padding-inline: var(--section-pad-x);
}

.benefit-list-head {
	max-width: var(--container-narrow);
	margin: 0 auto clamp(28px, 1.7vw + 21.9px, 50px);
	text-align: center;
}

.benefit-list-ti {
	margin: clamp(4px, 0.16vw + 3.4px, 7.5px) 0 clamp(9px, 0.24vw + 8.1px, 15px);
}

.benefit-list-sub {
	max-width: 800px;
	margin: 0 auto;
}

.benefit-list-items {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1175px;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(9px, 0.48vw + 7.3px, 15px);
	justify-content: center;
}

.benefit-list-item {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.2vw + 7.3px, 12.5px);
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 30px;
	padding: clamp(9px, 0.4vw + 7.6px, 13.75px) clamp(15px, 0.81vw + 12.1px, 25px);
}

.benefit-list-item .d {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-gold2);
	flex-shrink: 0;
}