.step::-webkit-scrollbar,
.radio-option input,
.desctop {
	display: none;
}
.list,
.form__preview,
.form__wrapper,
.pre-form__list,
.pre-form__card,
.pre-form__wrapper,
.pre-form__bottom,
.pre-form__preview,
.pre-form__progress-block,
.pre-form__top-text,
.step__body,
.progress__40,
.progress__graph,
.progress__text,
.progress,
.question__control,
.screen__quote,
.screen__info,
.form-after__call,
.form-after__card,
.preview__buttons,
.control--multi,
.control--single {
	display: flex;
	flex-direction: column;
}
.pre-form__progress-disc span,
.pre-form__progress-top,
.big-buttons .button__wrapper,
.radio-option,
.option {
	display: flex;
	flex-direction: row;
}
.item,
.form__preview,
.pre-form__bottom,
.pre-form__preview,
.pre-form__progress-disc span,
.pre-form__progress-top,
.pre-form__progress-block,
.pre-form__top-text,
.dots-container,
.button-next__arrow,
.button-next,
.quiz__header-progress,
.quiz__top,
.progress__graph-caption,
.question--time .option__label,
.form-after__card-label,
.preview__buttons,
.radio-option,
.option {
	align-items: center;
}
.item,
.pre-form__progress-disc span,
.button-next__arrow,
.question--time .option__label,
.screen,
.form-after__card-label,
.big-buttons .button__wrapper,
.radio-option {
	justify-content: center;
}
.pre-form__progress-top,
.button-next,
.progress__graph-caption,
.checkbox-option {
	justify-content: space-between;
}
.quiz__top {
	justify-content: start;
}
.screen {
	flex-wrap: wrap;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
:where(ul, ol):where([class]) {
	padding-left: 0;
}
body,
:where(blockquote, figure):where([class]) {
	margin: 0;
}
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
	margin-block: 0;
}
h1,
h2,
h3,
h4,
h5 {
	padding: 0;
	margin: 0;
}
:where(dd[class]) {
	margin-left: 0;
}
:where(fieldset[class]) {
	margin-left: 0;
	padding: 0;
	border: none;
}
:where(ul[class]) {
	list-style: none;
}
p {
	margin-block: 0;
}
a {
	text-decoration: none;
}
b {
	font-weight: 700;
}
button {
	border: rgba(0, 0, 0, 0);
	background-color: rgba(0, 0, 0, 0);
	background: rgba(0, 0, 0, 0);
	cursor: pointer;
	margin: 0;
	padding: 0;
}
button,
a,
label,
input,
.control {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
img {
	display: block;
	-o-object-fit: cover;
	object-fit: cover;
}
input,
textarea,
select,
button {
	font: inherit;
}
html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	font-size: clamp(16px, 0.9901vw, 200px);
}
html[lang^='ko'] *,
html[lang^='zh'] *,
html[lang^='ja'] *,
html[lang^='th'] *,
html[lang^='ar'] * {
	font-style: normal !important;
}
:target {
	padding-top: 8.5rem;
	margin-top: -8.5rem;
}
@media (max-width: 850px) {
	:target {
		padding-top: 5rem;
		margin-top: -5rem;
	}
}
svg * {
	transition-property: fill, stroke;
}
ol[class]:not(.ol),
ul[class]:not(.ul) {
	list-style: none;
}
body {
	font-size: 1rem;
	letter-spacing: 0;
	font-weight: 500;
	overflow: hidden;
	line-height: 1.4;
}
.container {
	max-width: 75rem;
	margin: 0 auto;
	padding-left: 0.625rem !important;
	padding-right: 0.625rem !important;
}
.visually-hidden {
	position: absolute !important;
	width: 0.0625rem !important;
	height: 0.0625rem !important;
	margin: -0.0625rem !important;
	border: 0 !important;
	padding: 0 !important;
	white-space: nowrap !important;
	clip-path: inset(100%) !important;
	clip: rect(0 0 0 0) !important;
	overflow: hidden !important;
}
.hidden {
	display: none !important;
}
@font-face {
	font-display: swap;
	font-family: 'Fustat';
	font-style: normal;
	font-weight: 400;
	src: url('../assets/fustat-v4-latin-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Fustat';
	font-style: normal;
	font-weight: 500;
	src: url('../assets/fustat-v4-latin-500.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Fustat';
	font-style: normal;
	font-weight: 600;
	src: url('../assets/fustat-v4-latin-600.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Fustat';
	font-style: normal;
	font-weight: 700;
	src: url('../assets/fustat-v4-latin-700.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Fustat';
	font-style: normal;
	font-weight: 800;
	src: url('../assets/fustat-v4-latin-800.woff2') format('woff2');
}
:root {
	--font-base:
		'Fustat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--w: 50.75rem;
	--color-accent: #e7fe54;
	--color-accent-dark: #cce244;
	--color-white: #ffffff;
	--transition: 0.3s ease-in;
}
html {
	scrollbar-width: thin;
	scrollbar-color: var(--color-accent) rgba(0, 0, 0, 0);
	height: 100%;
}
::-webkit-scrollbar {
	width: 0.5rem;
	height: 0.5rem;
}
::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
	background: rgba(138, 92, 246, 0.55);
	border-radius: 999px;
	border: 0.125rem solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(138, 92, 246, 0.8);
}
::-webkit-scrollbar-corner {
	background: rgba(0, 0, 0, 0);
}
button {
	border: none;
	outline: none;
}
body {
	font-family: var(--font-base);
	margin: 0;
	height: 100%;
	display: grid;
	grid-template-rows: 1fr;
	color: var(--color-white);
	background: #0e1321;
}
* {
	box-sizing: border-box;
}
.title {
	background: linear-gradient(94deg, #6f63a8 -3.01%, #cfc3f9 111.88%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(0, 0, 0, 0);
	font-size: 1.75rem;
	font-style: normal;
	font-weight: 800;
	line-height: 120%;
	letter-spacing: -0.0625rem;
	text-align: center;
	margin: 0;
}
.subtitle {
	font-size: 1rem;
	color: var(--color-white);
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	text-align: center;
	margin: 0;
}
.subtitle b {
	font-weight: 800;
}
.title-light {
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	text-align: center;
	color: #fff;
	margin: 0;
}
.control--single {
	gap: 0.75rem;
}
.option {
	gap: 0.5rem;
	width: 100%;
}
.option:has(input[name='level']) {
	justify-content: unset;
	text-align: unset;
	width: 100%;
}
.option:has(input[name='level']) .option__label {
	width: 100%;
}
.radio-option {
	width: 100%;
	background: linear-gradient(90deg, #1a1f30 0%, #3d414c 50%, #1a1f30 100%);
	border: 0.0625rem solid hsla(0, 0%, 100%, 0.1019607843);
	border-radius: 1.5rem;
	padding: 1.0625rem 1.25rem;
	min-height: 4.5rem;
	color: var(--color-accent);
	text-align: center;
	letter-spacing: -0.04em;
	cursor: pointer;
}
.radio-option:has(input[name='level']) {
	justify-content: unset;
}
.radio-option.is-tap {
	background: linear-gradient(90deg, #1a1f30 0%, #435586 50%, #1a1f30 100%);
	border: 0.0625rem solid hsla(0, 0%, 100%, 0.5019607843);
}
.control--multi {
	gap: 0.75rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	position: relative;
}
.control--multi .checkbox-option > input[type='checkbox'] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: rgba(0, 0, 0, 0) !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
}
.checkbox-option {
	color: var(--color-accent);
	border-radius: 0.75rem;
	padding: 1.5rem 1rem;
	background: linear-gradient(90deg, #1a1f30 0%, #3d414c 50%, #1a1f30 100%);
	border: 0.0625rem solid hsla(0, 0%, 100%, 0.1019607843);
	display: flex;
	flex-direction: row-reverse;
	cursor: pointer;
}
.checkbox-option .option__label {
	font-size: 0.875rem;
}
.checkbox-option:has(input:checked) {
	border: 0.0625rem solid hsla(0, 0%, 100%, 0.5019607843);
}
.checkbox-option:has(input:checked) .option__label {
	opacity: 1;
}
.checkbox-option > input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.checkbox-option .checkbox-box {
	width: 1.0625rem;
	height: 1.0625rem;
	border-radius: 50%;
	position: relative;
	background-color: #3c404b;
}
.checkbox-option .checkbox-box::after {
	content: '';
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--color-accent);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity var(--transition);
}
.checkbox-option > input[type='checkbox']:checked + .checkbox-box::after {
	opacity: 1;
}
.preview__title {
	font-size: 2rem;
	font-style: normal;
	font-weight: 800;
	line-height: 120%;
	letter-spacing: -0.0625rem;
	color: var(--color-accent);
	text-align: center;
	margin: 0;
	padding: 0 3.125rem;
}
.preview__subtitle {
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
	text-align: center;
	margin: 0;
	opacity: 1 !important;
}
.preview__buttons {
	gap: 1.75rem;
	/* margin-top: auto; */
}
.preview__text {
	margin: 0;
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	opacity: 0.5;
	text-align: center;
}
.big-buttons {
	width: 100%;
	max-width: 19.5625rem;
	padding: 0 0.5625rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9375rem;
	padding-bottom: 2.4375rem;
}
.big-buttons .button {
	background-color: rgba(0, 0, 0, 0);
	padding: 0;
}
.big-buttons .button__wrapper {
	aspect-ratio: 1/1;
	border-radius: 1.5rem;
	padding: 0.3125rem;
	border: 0.125rem solid hsla(0, 0%, 100%, 0.1);
	background:
		linear-gradient(
			151.87deg,
			rgba(21, 33, 50, 0.1) 2.29%,
			rgba(70, 93, 129, 0.1) 64.9%
		),
		linear-gradient(
			45.72deg,
			rgba(21, 33, 50, 0.4) 12.93%,
			rgba(70, 93, 129, 0.4) 50.53%
		);
	transition: 0.5s;
}
.big-buttons .button__wrapper img {
	height: 100%;
}
.big-buttons .button-title {
	color: var(--color-white);
	text-align: center;
	font-feature-settings:
		'liga' off,
		'clig' off;
	font-family: Fustat;
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	margin: 0;
	padding-top: 0.75rem;
}
.title-small {
	text-align: center;
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	margin: 0;
}
.list-media {
	border-radius: 3.75rem 3.75rem 1.5rem 1.5rem;
	flex-shrink: 0;
	aspect-ratio: 148/79;
}
.form-after__bg {
	position: relative;
	margin-bottom: -2rem;
	max-width: 21.875rem;
	width: 100%;
	margin: 0;
	z-index: 1;
	margin: 0rem auto -0.625rem;
}
.form-after__bg img {
	position: relative;
	z-index: 2;
}
.form-after__bg::after {
	position: absolute;
	z-index: 1;
	bottom: -1.5625rem;
	left: 0;
	content: '';
	width: 100%;
	height: 9.75rem;
	background: radial-gradient(
		54.8% 70.62% at 51.12% 0%,
		#8aa4c9 0%,
		#152740 100%
	);
	border-radius: 3.75rem 3.75rem 1.5rem 1.5rem;
}
.form-after__bg img {
	width: 100%;
}
.form-after__bg-item {
	position: absolute;
	left: 0;
	z-index: -1;
	top: 5rem;
}
.form-after__card {
	padding: 1.5rem 2rem;
	border-radius: 1.5rem;
	border: 0.0625rem solid #6f63a8;
	background: #fff;
	gap: 0.5rem;
	position: relative;
	z-index: 3;
	margin: 0 auto 1.6875rem;
}
.form-after__call {
	position: fixed;
	bottom: 0.75rem;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;
	width: min(var(--w), 100%);
	max-width: calc(100% - 3.875rem);
}
.form-after__card-text {
	color: #424150;
	text-align: center;
	font-feature-settings:
		'liga' off,
		'clig' off;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	margin: 0;
}
.form-after__card-title {
	color: #424150;
	text-align: center;
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	margin: 0;
}
.form-after__card-label {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 0.125rem solid #6f63a8;
	background: #fff;
	box-shadow: 0 0.125rem 0.5rem 0 rgba(110, 114, 169, 0.21);
	display: flex;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -75%);
}
.form-after__card-label img {
	width: 1.25rem;
	height: 1.25rem;
	transform: rotate(-7.603deg);
}
.screen {
	display: flex;
	align-items: start;
	height: 100%;
	align-content: space-between;
	min-height: -moz-max-content;
	min-height: max-content;
}
.screen__info {
	gap: 0.75rem;
	padding: 0;
	align-self: end;
	width: 100%;
}
.screen__title {
	text-align: center;
	font-size: 1.75rem;
	font-style: normal;
	font-weight: 800;
	line-height: 120%;
	letter-spacing: -0.0625rem;
	color: var(--color-accent);
	margin: 0;
}
.screen__subtitle {
	color: hsla(0, 0%, 100%, 0.5);
	text-align: center;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
	margin: 0;
}
.screen__subtitle b {
	color: var(--color-white);
	font-weight: 800;
}
.screen__img {
	-o-object-fit: contain;
	object-fit: contain;
	width: 100%;
	margin-bottom: -1.875rem;
}
.screen__quote {
	color: #fff;
	text-align: center;
	font-feature-settings:
		'liga' off,
		'clig' off;
	font-size: 0.875rem;
	font-style: normal;
	line-height: 120%;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem;
	background: hsla(0, 0%, 100%, 0.2);
	border-radius: 1rem;
	font-weight: 500;
	position: relative;
	z-index: 2;
}
.screen__quote b {
	font-weight: 700;
}
.screen__quote:before {
	border-radius: 1rem;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: hsla(0, 0%, 100%, 0.2);
	z-index: -1;
}
.screen__quote h2 {
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	margin: 0;
}
.screen__quote p {
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	margin: 0;
}
.question {
	padding: 1.5rem 0.9375rem 0.9375rem;
}
.question__control.two-column {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.question__control:has(input[type='checkbox']:checked)
	.checkbox-option:not(:has(input:checked))
	.option__label {
	opacity: 0.5;
}
.question__control:has(input[type='checkbox']:checked)
	.checkbox-option:has(input:checked)
	.option__label {
	opacity: 1;
}
.question__control {
	gap: 0.75rem;
}
.question__control-reaction {
	flex-shrink: 0;
	width: 100%;
	margin: 0 auto;
	max-width: 25rem;
}
.question__control-reaction + .list-media {
	margin-top: auto;
}
.question__control-reaction .option {
	width: unset;
}
.question--time .control--single {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.25rem 0.6875rem;
}
.question--time .radio-option {
	position: relative;
	padding: 0;
	background: rgba(0, 0, 0, 0);
	border: none;
	border-radius: unset;
}
.question--time .option__label {
	position: relative;
	display: flex;
	z-index: 3;
	width: 100%;
	background: linear-gradient(90deg, #1a1f30 0%, #3d414c 50%, #1a1f30 100%);
	border: 0.0625rem solid hsla(0, 0%, 100%, 0.1019607843);
	border-radius: 1.5rem;
	padding: 1.0625rem;
	min-height: 4.5rem;
	color: var(--color-accent);
	text-align: center;
	letter-spacing: -0.04em;
	margin-top: 7.75rem;
}
.question--time .is-tap .option__label {
	background: linear-gradient(90deg, #1a1f30 0%, #435586 50%, #1a1f30 100%);
	border: 0.0625rem solid hsla(0, 0%, 100%, 0.5019607843);
}
.question--time .radio-option::before {
	content: '';
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 12.25rem;
	background: #444959;
	height: 9.25rem;
	border-radius: 1.5rem;
}
.question--time .radio-option::after {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: 1.25rem;
	width: 100%;
	height: 9.75rem;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
}
.question--manual:has(.question__control) .step__body {
	/* margin-bottom: 9.25rem !important; */
}
.question--manual:has(.question__control) .actions {
	position: fixed;
	left: 0;
	right: 0;
	max-width: 19.5625rem;
	bottom: 1.9375rem;
}
.actions {
	margin: auto auto 0;
	background: hsla(0, 0%, 100%, 0.1019607843);
	padding: 0.1875rem;
	border-radius: 2.5rem;
	width: 100%;
}
.iti-aio__country-list .iti-aio__flag,
.iti-aio__country-name {
	color: #000;
}
.iti-aio--inline-dropdown .iti-aio__dropdown-content {
	background: var(--color-white);
}
.progress {
	gap: 1.25rem;
}
.progress__text {
	gap: 0.75rem;
}
.progress__subtitle {
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
	color: hsla(0, 0%, 100%, 0.5);
	text-align: center;
	margin: 0;
}
.progress__graph {
	gap: 1rem;
}
.progress__graph-img img {
	width: 100%;
	background: hsla(0, 0%, 100%, 0.1);
	overflow: hidden;
	border-radius: 1rem;
	width: 100%;
}
.progress__graph-caption {
	display: flex;
	padding: 0 0.375rem;
	align-self: stretch;
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	text-align: center;
	opacity: 0.5;
	color: var(--color-white);
}
.progress__graph-caption .acc {
	background: linear-gradient(94deg, #6f63a8 -3.01%, #cfc3f9 111.88%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(0, 0, 0, 0);
	opacity: 1;
}
.progress__40 {
	gap: 2.5rem;
}
.quiz {
	width: 100%;
	/* max-width: 36.25rem; */
	background: var(--bg);
	border: var(--bd);
	border-radius: 1.125rem;
	height: 100%;
	margin: auto;
	background: radial-gradient(
		74.47% 60.8% at 50% 50%,
		#273356 0%,
		#0d101a 100%
	);
}

.quiz__header {
	border-bottom: var(--bd);
	position: relative;
	z-index: 3;
}
.quiz__top {
	display: flex;
	gap: 1rem;
	background: #1d212b;
	padding: 1.125rem 0.75rem;
}
.quiz__title {
	margin: 0;
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
}
.quiz__counter {
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	opacity: 0.7;
	white-space: nowrap;
	margin-left: auto;
}
.quiz__progress {
	height: 0.5rem;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 999px;
	overflow: hidden;
}
.quiz__stage {
	position: relative;
	margin: 1.25rem auto 1rem;
	height: calc(100% - 7.3125rem);
	overflow: auto;
	min-height: 21.25rem;
	overflow: hidden;
	border-radius: 1.5rem;
}
.quiz__stage {
	max-width: var(--w);
}
.quiz__top {
	position: relative;
	padding-bottom: 1.125rem;
}
.quiz__header-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.75rem;
	display: flex;
	gap: 0.75rem;
	background: hsla(0, 0%, 100%, 0.2);
	border-radius: 0;
	padding: 0.125rem 0 0.125rem;
}
.quiz__header-progress-track {
	flex: 1;
	height: 0.75rem;
	background: #faffdb;
	overflow: hidden;
}
.quiz__header-progress-fill {
	height: 100%;
	width: 100%;
	background: linear-gradient(
		90deg,
		#bfcf57 -0.76%,
		#e7fe54 82.93%,
		#dae87f 104.39%
	);
	transform-origin: left;
	transition: transform 220ms ease;
	border-radius: 0 1rem 1rem 0;
}
.quiz__header-progress.is-inactive .quiz__header-progress-fill {
	transform: scaleX(0);
}
.step {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 260ms ease;
	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.step--popup {
	padding-bottom: 11.25rem !important;
}
.step.is-active {
	opacity: 1;
	pointer-events: auto;
}
.step.is-leaving-left {
	opacity: 0;
	transform: translateX(-8%);
}
.step.is-entering-right {
	opacity: 0;
	transform: translateX(8%);
}
.step.is-leaving-right {
	opacity: 0;
	transform: translateX(8%);
}
.step.is-entering-left {
	opacity: 0;
	transform: translateX(-8%);
}
.step__title {
	margin: 0 0 0.625rem;
	font-size: 1.25rem;
	line-height: 1.25;
	text-align: center;
}
.step h1.step__title {
	font-size: 2rem;
	text-transform: uppercase;
}
.step__subtitle {
	margin: 0 0 0.5rem;
	text-align: center;
	opacity: 0.5;
	font-size: 0.875rem;
	margin-top: -1.25rem;
}
.step__accent-text {
	background: hsla(0, 0%, 100%, 0.2);
	color: var(--color-accent);
	padding: 0.75rem;
	border-radius: 1rem;
	text-align: center;
}
.step__body {
	gap: 1.25rem;
	height: -moz-max-content;
	height: max-content;
	min-height: -moz-max-content;
	min-height: max-content;
	height: 100%;
}
.step__body .title-small {
	margin-bottom: 0.5rem;
}
.step__body--reaction {
	height: 100%;
	min-height: -moz-max-content;
	min-height: max-content;
}
.step__body--2 {
	gap: 0 !important;
	height: 100%;
}
@media (prefers-reduced-motion: reduce) {
	.step,
	.quiz__progress-bar {
		transition: none;
	}
}
.button-prev {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0.5625rem;
	border-radius: 50%;
	background: rgba(245, 245, 245, 0.1019607843);
	border: none;
	opacity: 1;
	transition: opacity var(--transition);
}
.button-prev:hover {
	opacity: 0.5;
}
.button-prev.is-inactive,
.button-prev:disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: default;
}
.header__logo {
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
}
button {
	font-family: var(--font-base);
	cursor: pointer;
}
.accent {
	color: var(--color-white);
	font-weight: 600;
}
.img-block__media img {
	max-width: 100%;
}
.img-block__button {
	margin-top: auto;
}
.button-next {
	display: flex;
	padding: 1.0625rem 1.0625rem 1.0625rem 2rem;
	border-radius: 2.5rem;
	background-color: var(--color-accent);
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	width: 100%;
	color: #1a1f30;
	transition: 0.5s;
	margin-top: auto;
	transition: background-color var(--transition);
}
.button-next__arrow {
	display: flex;
	width: 2rem;
	height: 2rem;
	padding: 0.5rem;
	flex-shrink: 0;
	border-radius: 50%;
	border-radius: 2rem;
	background: #1a1f30;
}
.option__label {
	width: calc(100% - 2rem);
	line-height: 1.2;
}
.cite {
	text-align: center;
	padding: 0.75rem;
	border-radius: 1rem;
	position: relative;
}
.cite:before {
	border-radius: 1rem;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: hsla(0, 0%, 100%, 0.2);
	z-index: -1;
}
.dots__marker {
	border-radius: 50%;
	width: 1.25rem;
	height: 1.25rem;
	background: #d3d3d3;
	position: relative;
}
.dots__marker::before {
	position: absolute;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: '';
	width: 0.875rem;
	height: 0.875rem;
	background: var(--color-white);
}
.dots-container {
	display: flex;
	justify-content: space-around;
	position: absolute;
	width: 100%;
	top: -0.25rem;
}
.pre-form__top-text {
	gap: 0.75rem;
	border-radius: 1.5rem;
	background: hsla(0, 0%, 100%, 0.1019607843);
	text-align: center;
	padding: 1.25rem;
}
.pre-form__top-text h3 {
	font-size: 1.375rem;
	color: var(--color-accent);
}
.pre-form__top-text--form {
	padding: 0.75rem;
	margin-top: 1.25rem;
	gap: 1.25rem !important;
}
.pre-form__top-text--form b {
	color: var(--color-accent);
}
.pre-form__center-text {
	text-align: center;
}
.pre-form__progress-block {
	gap: 0.4375rem;
	width: 100%;
	margin-bottom: 0.8125rem;
}
.pre-form__progress-top {
	gap: 1.25rem;
	font-weight: 600;
	font-size: 0.625rem;
	color: var(--color-white);
	opacity: 0.5;
	width: 100%;
}
.pre-form__progress-bar-inner {
	width: 100%;
}
.pre-form__progress-bar {
	width: 100%;
	background: var(--color-white);
	border-radius: 1rem;
	height: 0.75rem;
	position: relative;
	overflow: visible;
}
.pre-form__marker {
	border-radius: 0.75rem;
	background: var(--color-accent);
	height: 0.75rem;
	width: 1.25rem;
	display: block;
	will-change: clip-path;
}
.pre-form__progress-disc {
	border-radius: 50%;
	background-color: rgba(231, 254, 84, 0.6);
	box-shadow: 0 0 1.25rem 0 #e7fe54;
	padding: 0.25rem;
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
	top: -100%;
	left: 0;
}
.pre-form__progress-disc span {
	background: var(--color-accent);
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	color: #111;
	font-weight: 800;
	font-size: 0.6875rem;
}
.pre-form__preview {
	text-align: center;
	gap: 0.75rem;
}
.pre-form__caption {
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	margin: 0;
}
.pre-form__bottom {
	gap: 0.75rem;
}
.pre-form__title {
	color: var(--color-accent);
	margin-bottom: 0;
	font-size: 1.75rem;
	font-style: normal;
	font-weight: 800;
	line-height: 120%;
	letter-spacing: -0.0625rem;
}
.pre-form__wrapper {
	gap: 2.5rem;
}
.pre-form__card {
	border-radius: 1rem;
	border: 0.0625rem solid hsla(0, 0%, 100%, 0.4);
	background: hsla(0, 0%, 100%, 0.1);
	padding: 1.25rem;
	gap: 1rem;
	color: var(--color-white);
}
.pre-form__card h3 {
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	margin: 0;
}
.pre-form__list {
	gap: 0.625rem;
}
.pre-form__list-item {
	display: flex;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
}
.pre-form__list-item img {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
.pre-form__text {
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
	color: var(--color-white);
	text-align: center;
}
.form__wrapper {
	gap: 2.5rem !important;
}
.form__wrapper--form {
	gap: 1.6875rem !important;
}
.copyright {
	text-align: center;
	font-size: 0.75rem;
	color: hsla(0, 0%, 100%, 0.5019607843);
	margin: auto 0 0;
}
.accent {
	color: var(--color-accent);
}
.form__title {
	margin: 0;
	color: var(--color-accent);
	font-size: 1.75rem;
	font-style: normal;
	font-weight: 800;
	line-height: 120%;
	letter-spacing: -0.0625rem;
	margin-top: 1.5rem;
}
.form__subtitle {
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
	color: var(--color-white);
	margin: 0;
	margin-top: 0.75rem;
}
.form__subtitle b {
	color: #6f63a8;
}
.form__smile {
	width: 3.25rem;
	height: 3.25rem;
}
.form__preview {
	text-align: center;
}
.question--age .step__body {
	gap: 0.3125rem;
}
.question--age .title-small {
	margin-bottom: 2.125rem;
}
.question--age .actions {
	margin-top: 0;
}
.picker {
	position: relative;
	height: calc(100% - 4.5rem - 2.8125rem - 1.3125rem);
	width: 100%;
	max-width: 13.0625rem;
	margin: 0 auto;
	overflow: hidden;
	contain: layout paint;
	touch-action: none;
}
.picker::before,
.picker::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 5.625rem;
	z-index: 5;
	pointer-events: none;
}
.picker::before {
	top: 0;
}
.picker::after {
	bottom: 0;
}
.list {
	position: absolute;
	gap: 1.375rem;
	width: 100%;
	top: 0;
	left: 0;
}
.item {
	height: 1.8125rem;
	display: flex;
	color: var(--color-white);
	font-size: 1rem;
	transition: 0.15s;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	position: relative;
	overflow: visible;
	cursor: pointer;
	opacity: 0.1;
	transition: opacity var(--transition);
}
.item::after {
	content: '';
	width: 1.8125rem;
	height: 0.0625rem;
	background: var(--color-white);
	position: absolute;
	top: 50%;
	left: 1.4375rem;
	transform: translateY(-50%);
	pointer-events: none;
}
.item::before {
	content: '';
	width: 1.8125rem;
	height: 0.0625rem;
	background: var(--color-white);
	position: absolute;
	top: 50%;
	right: 1.4375rem;
	transform: translateY(-50%);
	pointer-events: none;
}
.item.active {
	line-height: 1;
	font-size: 3.25rem;
	color: #d7ff3f;
	font-weight: bold;
	opacity: 1;
}
.item.active::after {
	height: 0.1875rem;
	width: 3.25rem;
	left: 0;
	background: var(--color-accent);
}
.item.active::before {
	height: 0.1875rem;
	width: 3.25rem;
	right: 0;
	background: var(--color-accent);
}
@media (min-width: 700px) {
	.quiz__header-progress-track {
		border-radius: 999px;
	}
	.quiz__header-progress {
		padding: 0.125rem 0.125rem 0 0.125rem;
		border-radius: 999px;
	}
	.step {
		height: auto;
		padding: 2rem;
	}
	.step__title {
		margin: 0 0 0.75rem;
	}
	.step__body {
		height: 100%;
		min-height: -moz-max-content;
		min-height: max-content;
	}
	.step__subtitle {
		margin: -1.25rem 0 0;
		padding: 0 2rem;
		opacity: 0.75;
	}
	.step--popup {
		padding-bottom: 15.9375rem !important;
	}
	.copyright br {
		display: none;
	}
	.form-after__card {
		max-width: 34.375rem;
	}
	.form-after__bg {
		max-width: 19.75rem;
		padding-top: 0.625rem;
	}
	.form-after__call {
		max-width: calc(100% - 4rem);
	}
	.preview {
		padding-top: 0.625rem;
	}
	.preview__title {
		letter-spacing: 0.05625rem;
	}
	.preview__buttons {
		margin-top: 0;
	}
	.actions {
		width: -moz-max-content;
		width: max-content;
	}
	.quiz__stage {
		margin: 2.75rem auto 1rem;
		padding: 1.5rem 1rem 2.1875rem;
		min-height: 26rem;
	}
	.quiz__top {
		border-radius: 0 0 1rem 1rem;
	}
	.button-next:hover {
		background-color: var(--color-accent-dark);
	}
	.form__title {
		font-size: 2.25rem;
		font-style: normal;
		font-weight: 800;
		line-height: 120%;
		letter-spacing: -0.0625rem;
	}
	.title-small {
		font-size: 1.375rem;
		font-style: normal;
		font-weight: 700;
		line-height: 120%;
	}
	.question {
		padding: 2.1875rem 2rem 1.6875rem;
	}
	.screen {
		height: auto;
		min-height: 100%;
		padding-bottom: 0;
		padding-top: 0;
	}
	.screen__title {
		font-size: 2.25rem;
		font-style: normal;
		font-weight: 800;
		line-height: 120%;
		letter-spacing: -0.0625rem;
	}
	.screen__img {
		width: 21.33675rem;
		aspect-ratio: 107/88;
		margin-top: 2.9375rem;
		margin-bottom: 1.5rem;
	}
	.button-next {
		width: 19.5625rem;
	}
	.list-media {
		display: flex;
	}
	.img-block__media img {
		margin: 0 auto 0;
	}
	.big-buttons {
		padding-bottom: 0.25rem;
	}
	.big-buttons .button:hover .button__wrapper {
		border: 0.125rem solid var(--color-accent-dark);
	}
	.question--time .radio-option::after {
		bottom: 1.25rem;
		height: 12.25rem;
	}
	.question--time .question__control {
		margin-top: 1.25rem;
	}
	.question--time .option__label:hover {
		background: linear-gradient(90deg, #1a1f30 0%, #435586 50%, #1a1f30 100%);
		border: 0.0625rem solid hsla(0, 0%, 100%, 0.5019607843);
	}
	.question--manual:has(.question__control) .step__body {
		/* margin-bottom: 9.25rem !important; */
	}
	.question--manual:has(.question__control) .actions {
		max-width: 19.9375rem;
		bottom: 1rem;
	}
	.radio-option:hover,
	.radio-option.is-tap {
		background: linear-gradient(90deg, #1a1f30 0%, #435586 50%, #1a1f30 100%);
		border: 0.0625rem solid hsla(0, 0%, 100%, 0.5019607843);
	}
	.question--time .radio-option:hover,
	.question--time .radio-option.is-tap {
		border: none !important;
		background: none;
	}
}
@media (max-width: 375px) {
	.question--manual:has(.question__control) .actions {
		max-width: calc(100% - 3.875rem);
	}
}

.iti input.iti__tel-input,
.iti input.iti__tel-input[type='text'],
.iti input.iti__tel-input[type='tel'] {
	padding-left: 80px !important;
	color: #fff !important;
}