.root {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
}

.card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px 40px;
	background-color: variables.$bg-default;
	border: 1px solid variables.$border-default;
	border-radius: variables.$radius-lg;
	box-shadow: var(--shadow-md);
	text-align: center;
	max-width: 400px;
}

.icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: variables.$purple-50;
	color: variables.$purple-600;
}

.title {
	@include typography.font-header-l;
	color: variables.$text-primary;
}

.description {
	@include typography.font-body-mr;
	color: variables.$text-secondary;
}
