/* Feature grid */

.blk-features__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 48px;
	flex-wrap: wrap;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.blk-features__head .section-heading {
	margin-bottom: 0;
}

.blk-features__link {
	margin-bottom: 6px;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
	list-style: none;
}

.feature-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cards: a short strand in the swatch along the top edge, as the router tiles. */
.feature-grid--cards .feature,
.feature-grid--numbered .feature {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(28px, 3vw, 40px);
	border-radius: var(--radius-lg);
	background: var(--tint);
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.blk--tint .feature-grid--cards .feature,
.blk--tint .feature-grid--numbered .feature { background: var(--surface); }
.blk--dark .feature-grid--cards .feature,
.blk--dark .feature-grid--numbered .feature { background: var(--ink-3); }

.feature-grid--cards .feature::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 6px;
	border-radius: 0 0 6px 0;
	background: var(--swatch);
	transition: width .5s var(--ease);
}

.feature-grid--cards .feature:hover::before {
	width: 100%;
}

.feature-grid--cards .feature:hover,
.feature-grid--numbered .feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.feature__num {
	font-family: var(--font-head);
	font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: color-mix(in srgb, var(--swatch) 60%, var(--ink));
}

.blk--dark .feature__num { color: color-mix(in srgb, var(--swatch) 70%, #fff); }

.feature__title {
	font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem);
}

.feature__text {
	font-size: 1rem;
	line-height: 1.6;
}

.blk--dark .feature__title { color: #fff; }
.blk--dark .feature__text { color: var(--on-dark-muted); }

/* Chips: labels only, large, with a dot in the swatch. */
.feature-grid--chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.feature-grid--chips .feature {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px 16px 20px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
}

.feature-grid--chips .feature::before {
	content: '';
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--swatch);
}

.feature-grid--chips .feature__title {
	font-family: var(--font-head);
	font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--heading);
}

.blk--dark .feature-grid--chips .feature {
	border-color: var(--line-dark);
	background: transparent;
}

.blk--dark .feature-grid--chips .feature__title { color: #fff; }

@media (max-width: 1023px) {
	.feature-grid,
	.feature-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.feature-grid,
	.feature-grid--cols-2,
	.feature-grid--cols-4 { grid-template-columns: minmax(0, 1fr); }
}