@layer components {
	.winds-features {
		display: grid;
		grid-column: content;
		gap: calc(var(--stack) * 1.5);
	}

	/* 3-column row (top) */
	.winds-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: calc(var(--gutter) * 1);
		min-inline-size: 0;
	}

	/* 2-card centered row (bottom) */
	.winds-row[data-layout="centered"] {
		grid-template-columns: repeat(2, 1fr);
		max-inline-size: 66.666%;
		margin-inline: auto;
	}

	.winds-card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: calc(var(--stack) * 1.5);
		padding-block: calc(var(--stack) * 1.5);
		padding-inline: calc(var(--gutter) * 1.5);
		background-color: var(--color-bg-card);
		border-radius: 8px;
		outline: 1px solid transparent;
		transition: outline-color 0.2s ease;
		text-decoration: none;
		color: inherit;
		min-inline-size: 0;
	}

	@media (hover) and (prefers-reduced-motion: no-preference) {
		.winds-card:hover {
			outline-color: var(--feature-color);
		}
	}

	.winds-card .hexagon-letter {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		translate: -25% -25%;
	}

	.winds-card .hexagon-letter svg {
		fill: var(--feature-color);
	}

	.winds-card__content {
		display: flex;
		flex-direction: column;
		gap: var(--stack);
	}

	.winds-card__content h3 {
		font-size: 20px;
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.02em;
		line-height: 24px;
	}

	.winds-card__body {
		font-size: 15px;
		line-height: 24px;
		color: var(--color-text-muted);
	}

	.winds-card__stats {
		display: flex;
		flex-direction: column;
		gap: calc(var(--stack) / 2);
		margin-block-start: auto;
		padding-block-start: calc(var(--stack) * 0.75);
		border-block-start: 1px solid var(--color-border);
	}

	.winds-card__stat {
		display: flex;
		align-items: baseline;
		gap: calc(var(--gutter) / 2);
	}

	.winds-card__stat strong {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
	}

	.winds-card__stat span {
		font-size: var(--font-size-xs);
		font-weight: 500;
		color: var(--color-text-muted);
	}

	/* Mobile: single column stack */
	@media (max-width: 49.999em) {
		.winds-row,
		.winds-row[data-layout="centered"] {
			grid-template-columns: 1fr;
			max-inline-size: 100%;
		}

		.winds-card {
			padding-block: var(--stack);
			padding-inline: calc(var(--gutter) * 1.25);
		}
	}

	@keyframes slide-in-from-bottom {
		from {
			opacity: 0;
			transform: translateY(6rem) scale(0.96);
		}
	}

	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.winds-card {
				animation: slide-in-from-bottom ease-out both;
				animation-timeline: view();
				animation-range: entry 0% entry 60%;
			}
		}
	}
}