/* Key Benefits */
.sh-benefits .sh-benefits__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-areas: "body media";
	gap: clamp(36px, 6vw, 96px);
	align-items: center;
}
.sh-benefits.sh-benefits--media-left .sh-benefits__grid {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-areas: "media body";
}
.sh-benefits .sh-benefits__grid--solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body"; }
.sh-benefits .sh-benefits__body { grid-area: body; min-width: 0; }

/* Photo: the site's arch, with a hairline second arch (box-shadow rings follow
   the radius and stay out of the stacking order; see tokens.css). */
.sh-benefits .sh-benefits__media {
	grid-area: media;
	margin: 0;
	justify-self: center;
	width: min(100%, 460px);
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px var(--sh-r-md) var(--sh-r-md);
	overflow: hidden;
	background: var(--sh-cream);
	box-shadow: 0 0 0 12px var(--sh-band, var(--sh-light)), 0 0 0 13px rgba(153, 137, 126, 0.45);
}
.sh-benefits .sh-benefits__media img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.sh-benefits .sh-benefits__title { margin-bottom: 14px; }
.sh-benefits .sh-benefits__intro { max-width: 60ch; font-size: 16.5px; line-height: 1.7; color: var(--sh-text); }
.sh-benefits .sh-benefits__intro p { margin: 0 0 0.8em; }
.sh-benefits .sh-benefits__intro > :last-child { margin-bottom: 0; }
.sh-benefits .sh-benefits__intro strong { color: var(--sh-ink); font-weight: 700; }

/* Benefits: hairline-ruled rows, two columns when there are four or more. */
.sh-benefits .sh-benefits__list {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 36px;
	border-top: 1px solid rgba(153, 137, 126, 0.3);
}
.sh-benefits .sh-benefits__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-benefits .sh-benefits__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid rgba(153, 137, 126, 0.3);
}
.sh-benefits .sh-benefits__item > div { min-width: 0; }

/* Arch marker: a small doorway in the site's arch shape with a tick inside. */
.sh-benefits .sh-benefits__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 32px;
	margin-top: -5px;
	border-radius: 14px 14px 6px 6px;
	background: var(--sh-cream);
	color: var(--sh-taupe-dark);
}
.sh-benefits.sh-tone--sand .sh-benefits__mark { background: var(--sh-light); }
.sh-benefits .sh-benefits__mark .sh-icon { width: 15px; height: 15px; stroke-width: 2.4; }

.sh-benefits .sh-benefits__name { margin: 0; font: 600 16px/1.4 var(--sh-font-head); color: var(--sh-ink); }
.sh-benefits .sh-benefits__text { margin: 5px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--sh-text); }

.sh-benefits .sh-benefits__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.sh-benefits.sh-tone--dark .sh-benefits__name,
.sh-benefits.sh-tone--dark .sh-benefits__intro strong { color: #fff; }
.sh-benefits.sh-tone--dark .sh-benefits__intro,
.sh-benefits.sh-tone--dark .sh-benefits__text { color: rgba(255, 255, 255, 0.78); }
.sh-benefits.sh-tone--dark .sh-benefits__mark { background: rgba(255, 255, 255, 0.1); color: #fff; }

@media (max-width: 1100px) {
	.sh-benefits .sh-benefits__list--two { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet and phone: photo first as a wide arch, then the copy. */
@media (max-width: 900px) {
	.sh-benefits .sh-benefits__grid,
	.sh-benefits.sh-benefits--media-left .sh-benefits__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "body";
		gap: 36px;
	}
	.sh-benefits .sh-benefits__media {
		width: 100%;
		max-width: 560px;
		aspect-ratio: 16 / 11;
		border-radius: 220px 220px var(--sh-r-md) var(--sh-r-md);
	}
	.sh-benefits .sh-benefits__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.sh-benefits .sh-benefits__list--two { grid-template-columns: minmax(0, 1fr); }
	.sh-benefits .sh-benefits__media {
		border-radius: 160px 160px var(--sh-r-sm) var(--sh-r-sm);
		box-shadow: 0 0 0 8px var(--sh-band, var(--sh-light)), 0 0 0 9px rgba(153, 137, 126, 0.45);
	}
	.sh-benefits .sh-benefits__intro { font-size: 16px; }
	.sh-benefits .sh-benefits__item { padding: 15px 0; }
	.sh-benefits .sh-benefits__name { font-size: 15.5px; }
	.sh-benefits .sh-benefits__actions .sh-btn { flex: 1 1 100%; justify-content: space-between; }
}