/* Why-cards (spec §4.12). --home: radius 32, 1 → 3 columns (1024), gap 32. --over: radius 16, 2 columns from 640 (last spans 2), 3 from 1024. */
.why-cards { display: grid; }
.why-cards--home { gap: calc(var(--spacing) * 8); }
@media (min-width: 64rem) { .why-cards--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why-cards--over { gap: calc(var(--spacing) * 4); }
@media (min-width: 40rem) {
	.why-cards--over { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.why-cards--over .why-card--highlight { grid-column: span 2 / span 2; }
}
@media (min-width: 48rem) { .why-cards--over { gap: calc(var(--spacing) * 6); } }
@media (min-width: 64rem) {
	.why-cards--over { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.why-cards--over .why-card--highlight { grid-column: span 1 / span 1; }
}

.why-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-gray-100);
	background-color: var(--color-white);
	box-shadow: var(--shadow-sm);
}
.why-cards--home .why-card { border-radius: var(--radius-4xl); padding: calc(var(--spacing) * 6); }
.why-cards--over .why-card { border-radius: var(--radius-2xl); padding: calc(var(--spacing) * 5); }
@media (min-width: 40rem) { .why-cards--over .why-card { padding: calc(var(--spacing) * 6); } }
@media (min-width: 48rem) {
	.why-cards--home .why-card, .why-cards--over .why-card { padding: calc(var(--spacing) * 8); }
}
.why-card--highlight { border-color: var(--color-orange-20a); background-color: var(--color-orange-05a); }
.why-cards--over .why-card--highlight { box-shadow: none; }

.why-card__number {
	position: absolute;
	top: calc(var(--spacing) * -4);
	inset-inline-end: calc(var(--spacing) * -4);
	font-size: 80px;
	line-height: 1;
	font-weight: var(--font-weight-black);
	color: var(--color-gray-100);
	user-select: none;
}
.why-card--highlight .why-card__number { color: var(--color-orange-10a); }
@media (min-width: 48rem) {
	.why-cards--home .why-card__number { font-size: 110px; }
	.why-cards--over .why-card__number { font-size: 100px; }
}
.why-cards--over .why-card--highlight .why-card__number { font-size: 50px; }
@media (min-width: 48rem) { .why-cards--over .why-card--highlight .why-card__number { font-size: 70px; } }

.why-card__content { position: relative; }
.why-card__dot { display: block; width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); border-radius: var(--radius-full); margin-bottom: calc(var(--spacing) * 4); }
.why-card__title {
	font-size: var(--text-lg);
	line-height: var(--text-lg-lh);
	font-weight: var(--font-weight-bold);
	color: var(--color-brand-dark);
	margin-bottom: calc(var(--spacing) * 2);
}
.why-card__text { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-gray-600); }
.why-card__sub { margin-top: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 4); border-top: 1px solid var(--color-gray-100); }
.why-cards--over .why-card--highlight .why-card__sub { border-top-color: var(--color-orange-10a); }
.why-card__sub span { font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--color-gray-500); }
@media (min-width: 48rem) {
	.why-card__title { font-size: var(--text-xl); line-height: var(--text-xl-lh); }
	.why-card__text { font-size: var(--text-base); line-height: var(--text-base-lh); }
	.why-card__sub span { font-size: var(--text-sm); line-height: var(--text-sm-lh); }
	.why-cards--home .why-card__dot { margin-bottom: calc(var(--spacing) * 6); }
	.why-cards--home .why-card__title { margin-bottom: calc(var(--spacing) * 3); }
	.why-cards--home .why-card__sub { margin-top: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 6); }
	.why-cards--over .why-card__dot { margin-bottom: calc(var(--spacing) * 5); }
}