@layer components {
	.outcome-card {
		--flow-space: calc(var(--stack) * 2);
		border: 1px solid var(--color-border);
		border-radius: 8px;
		padding: calc(var(--gutter) * 2);
	}

	@scope (.outcome-card) {
		& > p:first-child {
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-medium);
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--color-text-muted);
		}

		& > p:nth-child(2) {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.01em;
		}

		& > p:last-child {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}