.sb-benefit-cards {
	padding-block: 48px;
	background-color: var(--sb-color-white);
}

.sb-benefit-cards__heading {
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: var(--sb-font-weight-heading);
	font-size: var(--sb-font-size-h2-display);
	line-height: var(--sb-line-height-heading);
	color: var(--sb-color-body);
	text-align: center;
	margin: 0 0 16px !important;
}

.sb-benefit-cards__heading strong,
.sb-benefit-cards__heading b {
	color: var(--sb-color-purple-deep);
	font-weight: var(--sb-font-weight-heading-bold);
}

.sb-benefit-cards__body {
	max-width: 720px;
	margin: 0 auto 24px;
	text-align: center;
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.6;
	color: var(--sb-color-body);
}

.sb-benefit-cards__body p {
	margin: 0 !important;
}

.sb-benefit-cards__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 4+ cards: peek carousel instead of the static grid — 3 full cards +
   the 4th peeking, scroll-snap track with arrow + dot controls. */
.sb-benefit-cards__wrap--carousel .sb-benefit-cards__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sb-benefit-cards__wrap--carousel .sb-benefit-cards__track::-webkit-scrollbar {
	display: none;
}

.sb-benefit-cards__wrap--carousel .sb-benefit-cards__card {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: calc((100% - 3 * 1.5rem) / 3.5);
	height: auto;
}

.sb-benefit-cards__wrap--carousel .sb-benefit-cards__card::after {
	content: none;
}

.sb-benefit-cards__controls {
	margin-top: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.sb-benefit-cards__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none !important;
	border-radius: var(--sb-radius-md);
	background-color: transparent !important;
	color: var(--sb-color-ink) !important;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	outline: none;
	transition: background-color 200ms ease, color 200ms ease;
}

.sb-benefit-cards__arrow:hover,
.sb-benefit-cards__arrow:focus-visible,
.sb-benefit-cards__arrow:active {
	background-color: var(--sb-color-lavender) !important;
	color: var(--sb-color-white) !important;
	outline: none;
}

.sb-benefit-cards__arrow svg {
	width: 22px;
	height: 22px;
	display: block;
}

.sb-benefit-cards__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sb-benefit-cards__dot {
	/* 24x24 hit target (WCAG 2.5.8) around a visually unchanged 10px dot —
	   the dot itself stays small via ::after, the button just claims more
	   space around it. */
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: transparent;
	cursor: pointer;
	position: relative;
}

.sb-benefit-cards__dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--sb-color-border-strong);
	transform: translate(-50%, -50%);
}

.sb-benefit-cards__dot.is-active::after {
	background-color: var(--sb-color-lavender);
}

@media (max-width: 768px) {
	.sb-benefit-cards__wrap--carousel .sb-benefit-cards__track {
		gap: 1rem;
	}

	.sb-benefit-cards__wrap--carousel .sb-benefit-cards__card {
		width: 92vw;
	}
}

/* "Few" (2-3 card) wraps reuse the carousel markup so they get the same
   autoplay/dots/arrows JS on mobile, but on desktop they render back into
   a plain static grid — no scroll, no controls, and the JS-added clone
   slides (marked aria-hidden by the slider script) are hidden so only the
   real cards show. This keeps desktop pixel-identical to the old
   non-carousel layout while mobile/tablet always get the slider. */
.sb-benefit-cards__wrap--few .sb-benefit-cards__controls {
	display: none;
}

@media (min-width: 1200px) {
	.sb-benefit-cards__wrap--few .sb-benefit-cards__track {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		overflow: visible;
		scroll-snap-type: none;
		gap: 0;
	}

	.sb-benefit-cards__wrap--few .sb-benefit-cards__card {
		width: auto;
		flex: initial;
		scroll-snap-align: none;
	}

	.sb-benefit-cards__wrap--few .sb-benefit-cards__card[aria-hidden="true"] {
		display: none;
	}

	.sb-benefit-cards__wrap--few .sb-benefit-cards__card:not(:nth-child(3n))::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 1px;
		height: 60%;
		background-color: var(--sb-color-divider);
	}
}

@media (max-width: 1199px) {
	.sb-benefit-cards__wrap--few .sb-benefit-cards__controls {
		display: flex;
	}

	.sb-benefit-cards__wrap--few .sb-benefit-cards__track {
		gap: 20px;
	}

	.sb-benefit-cards__wrap--few .sb-benefit-cards__card {
		width: 88vw;
	}
}

@media (min-width: 641px) and (max-width: 1199px) {
	.sb-benefit-cards__wrap--few .sb-benefit-cards__card {
		width: calc((100% - 20px) / 2.5);
	}
}

.sb-benefit-cards__item {
	position: relative;
	text-align: center;
	padding: 0 32px;
}

/* Short vertical divider between cards — not full row height, and never
   after the last card in a row (every 3rd item). */
.sb-benefit-cards__item:not(:nth-child(3n))::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background-color: var(--sb-color-divider);
}

.sb-benefit-cards__title {
	display: block;
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 18px;
	color: var(--sb-color-purple-deep);
	text-transform: uppercase;
	margin-bottom: 16px;
}

.sb-benefit-cards__text {
	font-family: var(--sb-font-family);
	font-style: italic;
	font-weight: 300;
	font-size: 22px;
	line-height: 32px;
	color: var(--sb-color-body);
	margin: 0;
}

/* Single-card fallback (the .list markup only renders now when there's
   exactly 1 card — 2+ always use the carousel/--few markup above). No
   slider needed for one card, just let it use the full width on mobile. */
@media (max-width: 1199px) {
	.sb-benefit-cards {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.sb-benefit-cards__list {
		grid-template-columns: 1fr;
	}

	.sb-benefit-cards__list .sb-benefit-cards__item {
		padding: 0;
	}

	.sb-benefit-cards__list .sb-benefit-cards__item::after {
		display: none;
	}

	.sb-benefit-cards__heading {
		font-size: clamp(32px, 8vw, 48px);
		line-height: 1.15;
	}

	.sb-benefit-cards__body {
		max-width: none;
		font-size: clamp(16px, 4vw, 20px);
		line-height: 1.4;
	}

	.sb-benefit-cards__text {
		font-size: clamp(18px, 4vw, 22px);
		line-height: 1.4;
	}
}

@media (min-width: 641px) and (max-width: 1199px) {
	.sb-benefit-cards {
		padding-inline: 100px;
		padding-block: 40px;
	}
}