@layer components {
	.icon { width: 1.5rem; height: 1.5rem; stroke: currentColor; }

	.card {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-border);
		background-color: var(--color-card);
		color: var(--color-card-foreground);
		border-radius: var(--radius-lg);
		padding: 1.5rem;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	}
	.card--inactive { opacity: 0.7; }
	.card__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: var(--radius-sm);
		background-color: var(--accent-10);
		color: var(--color-accent);
	}
	.card__title { margin-top: 1rem; font-size: 1.125rem; }
	.card__description { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-muted-foreground); flex: 1; }
	.card__link {
		margin-top: 1rem;
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--color-accent);
		text-decoration: none;
	}
	.card__link:hover { text-decoration: underline; }
	.card__pending {
		margin-top: 1rem;
		font-size: 0.875rem;
		font-weight: 600;
		font-style: italic;
		color: var(--color-muted-foreground);
	}

	.trust-point { text-align: center; }
	@media (min-width: 640px) { .trust-point { text-align: left; } }
	.trust-point__icon {
		margin-inline: auto;
		display: flex; align-items: center; justify-content: center;
		width: 2.5rem; height: 2.5rem;
		border-radius: var(--radius-sm);
		background-color: var(--accent-10);
		color: var(--color-accent);
	}
	@media (min-width: 640px) { .trust-point__icon { margin-inline: 0; } }
	.trust-point__title { margin-top: 0.75rem; font-size: 0.875rem; }
	.trust-point__description { margin-top: 0.375rem; font-size: 0.875rem; color: var(--color-muted-foreground); }

	.differentiator { display: flex; gap: 1rem; }
	.differentiator__icon {
		flex-shrink: 0;
		display: flex; align-items: center; justify-content: center;
		width: 2.5rem; height: 2.5rem;
		border-radius: var(--radius-sm);
		background-color: var(--primary-10);
		color: var(--color-primary);
	}
	.differentiator__title { font-size: 1rem; }
	.differentiator__description { margin-top: 0.25rem; font-size: 0.875rem; color: var(--color-muted-foreground); }

	.subject-area {
		border: 1px solid var(--color-border);
		background-color: var(--color-card);
		border-radius: var(--radius-lg);
		padding: 1.25rem;
	}
	.subject-area__title { font-size: 1rem; }
	.subject-area__description { margin-top: 0.375rem; font-size: 0.875rem; color: var(--color-muted-foreground); }

	.process-step {
		border: 1px solid var(--color-border);
		background-color: var(--color-card);
		border-radius: var(--radius-lg);
		padding: 1.5rem;
	}
	.process-step__header { display: flex; align-items: center; gap: 0.75rem; }
	.process-step__number {
		display: flex; align-items: center; justify-content: center;
		width: 2rem; height: 2rem;
		border-radius: 999px;
		background-color: var(--color-primary);
		color: var(--color-primary-foreground);
		font-weight: 700;
		font-size: 0.875rem;
	}
	.process-step__icon { color: var(--color-accent); }
	.process-step__icon .icon { width: 1.25rem; height: 1.25rem; }
	.process-step__title { margin-top: 1rem; font-size: 1rem; }
	.process-step__description { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-muted-foreground); }
}