/* Keep mandatory fields together first in DOM/tab order and in the left column. */
.lio-registration__form {
	align-items: start;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lio-registration__form > .lio-registration__group {
	display: grid;
	gap: 22px;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

.lio-registration__group legend {
	width: 100%;
	padding: 0 0 18px;
	color: var(--skl-ink-soft, #566168);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.lio-registration__form > .lio-registration__submit {
	grid-column: 1 / -1;
}

/* A quiet separate panel makes the optional half unambiguous. */
.lio-registration__form > .lio-registration__group--optional {
	padding: 24px;
	border: 1px solid #d9dfe3;
	border-radius: 16px;
	background: #f0f3f5;
}

.lio-registration__group--optional legend {
	width: auto;
	padding: 0 10px;
	color: #4c565d;
}

@media (max-width: 700px) {
	.lio-registration__form {
		grid-template-columns: minmax(0, 1fr);
	}

	.lio-registration__form > .lio-registration__group--optional {
		padding: 20px;
	}
}