.root {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
}

.header {
	text-align: center;
	margin-bottom: 32px;
	max-width: 480px;
}

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

.description {
	@include typography.font-body-14(400);
	color: variables.$text-secondary;
	margin: 0;
}

.fields {
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 480px;
}

.footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	border-top: 1px solid variables.$border-subtle;
	background: variables.$bg-surface;
}
