.zayavka {
	position: relative;
	padding-block: var(--air-7);
	overflow: hidden;
}
.zayavka__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.zayavka__strata {
	position: absolute;
	inset: 0;
	background-image: var(--strata-up, url("../../img/strata-fade-up.webp"));
	background-size: cover;
	background-position: center top;
}
.zayavka__grain {
	position: absolute;
	inset: 0;
	background-image: url("../../img/grain.png");
	background-repeat: repeat;
	mix-blend-mode: overlay;
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 var(--strata-band));
	mask-image: linear-gradient(to bottom, transparent 2%, #000 var(--strata-band));
}
.zayavka__inner {
	position: relative;
	z-index: 1;
}
.zayavka__title {
	margin: 0 0 var(--air-5);
	text-align: center;
	font-size: var(--fs-8);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	line-height: var(--lh-display);
}
.zayavka__panel {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	max-width: calc(1040 * var(--px));
	margin-inline: auto;
	border-radius: var(--r-lg);
	background: var(--field);
	overflow: hidden;
	box-shadow: 0 calc(20 * var(--px)) calc(44 * var(--px)) calc(-30 * var(--px)) color-mix(in srgb, var(--ink) 55%, transparent);
}
.zayavka__side {
	padding: var(--air-4);
}
.zayavka__form {
	display: grid;
	gap: var(--air-2);
}
.zayavka__form[hidden],
.zayavka__done[hidden] {
	display: none;
}
.zayavka__field {
	position: relative;
	display: grid;
	gap: var(--sp-1);
	padding-bottom: var(--sp-5);
}
.zayavka__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--air-1);
}
.zayavka__field label {
	color: var(--ink);
	font-size: var(--fs-4);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}
.zayavka__field input:not([type="checkbox"]),
.zayavka__field textarea {
	width: 100%;
	padding: var(--sp-3);
	border: 1px solid var(--edge);
	border-radius: var(--r-md);
	background: var(--field);
	color: var(--ink);
	font: inherit;
	font-size: var(--fs-4);
	line-height: var(--lh-text);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.zayavka__field textarea {
	resize: vertical;
	min-height: 7.5rem;
}
.zayavka__field input:hover,
.zayavka__field textarea:hover {
	border-color: var(--edge);
}
.zayavka__field input:focus,
.zayavka__field textarea:focus {
	border-color: var(--ember-60);
	outline: none;
}
.zayavka__field input:focus-visible,
.zayavka__field textarea:focus-visible {
	outline: calc(2 * var(--px)) solid var(--ink);
	outline-offset: calc(2 * var(--px));
}
.zayavka__field.is-invalid input,
.zayavka__field.is-invalid textarea {
	border-color: var(--ember-60);
	box-shadow: 0 0 0 1px var(--ember-60);
}
.zayavka__error {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.125rem;
	margin: 0;
	color: var(--ember-60);
	font-size: var(--fs-1);
	line-height: var(--lh-snug);
}
.zayavka__field--check {
	margin-top: var(--sp-1);
}
.zayavka__field .zayavka__check {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--sp-2);
	color: var(--ink-2);
	font-size: var(--fs-3);
	font-weight: var(--fw-text);
	letter-spacing: normal;
	text-transform: none;
	line-height: var(--lh-text);
	cursor: pointer;
}
.zayavka__check input {
	width: 1.125rem;
	height: 1.125rem;
	font-size: inherit;
	margin: calc((var(--lh-text) * 1em - 1.125rem) / 2) 0 0;
	accent-color: var(--ember-60);
	cursor: pointer;
}
.zayavka__field--check.is-invalid .zayavka__check {
	color: var(--ember-60);
}
.zayavka__field--check.is-invalid .zayavka__check input {
	outline: calc(2 * var(--px)) solid var(--ember-60);
	outline-offset: 1px;
	border-radius: var(--r-sm);
}
.zayavka__notice {
	margin: 0;
	color: var(--ember-60);
	font-size: var(--fs-2);
	line-height: var(--lh-snug);
}
.zayavka__submit {
	justify-self: start;
	margin-top: var(--sp-1);
	padding-inline: var(--sp-7);
}
.zayavka__submit[aria-busy="true"] {
	opacity: 0.72;
	pointer-events: none;
}
.zayavka__done {
	display: grid;
	justify-items: start;
	gap: var(--sp-2);
	padding-block: var(--air-3);
}
.zayavka__done-mark {
	display: block;
	width: calc(44 * var(--px));
	height: calc(50 * var(--px));
	margin-bottom: var(--sp-2);
	color: var(--ember-50);
}
.zayavka__done-mark svg {
	display: block;
	width: 100%;
	height: 100%;
}
.zayavka__done-title {
	margin: 0;
	font-size: var(--fs-6);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}
.zayavka__done-text {
	margin: 0;
	color: var(--ink-2);
	line-height: var(--lh-text);
}
.zayavka__next {
	display: grid;
	align-content: center;
	padding: var(--air-4);
	background: var(--ink);
	color: var(--field);
}
.zayavka__steps {
	display: grid;
	gap: var(--sp-7);
	margin: 0;
	padding: 0;
	list-style: none;
}
.zayavka__step {
	position: relative;
	display: grid;
	grid-template-columns: calc(50 * var(--px)) minmax(0, 1fr);
	column-gap: var(--sp-4);
	row-gap: var(--sp-1);
}
.zayavka__step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(25 * var(--px) - 2.32 * var(--px) / 2);
	top: calc(53.7 * var(--px));
	bottom: calc(-1 * (var(--sp-7) + 2.35 * var(--px)));
	width: calc(2.32 * var(--px));
	background: var(--ember-50);
}
.zayavka__step-cell {
	position: relative;
	grid-row: 1 / 3;
	width: calc(50 * var(--px));
	height: calc(57 * var(--px));
	color: var(--ember-50);
}
.zayavka__step-cell svg {
	display: block;
	width: 100%;
	height: 100%;
}
.zayavka__step-cell b {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--field);
	font-size: var(--fs-5);
	font-weight: var(--fw-medium);
	line-height: var(--lh-flat);
}
.zayavka__step-name {
	margin: 0;
	align-self: center;
	color: var(--field);
	font-size: var(--fs-6);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}
.zayavka__step-text {
	margin: 0;
	color: var(--field);
	font-size: var(--fs-4);
	line-height: var(--lh-text);
	opacity: 0.66;
}
.zayavka--compact {
	padding-block: var(--air-5);
	overflow: visible;
}
.zayavka--compact .zayavka__title {
	margin-bottom: var(--air-3);
	font-size: var(--fs-7);
}
.zayavka--compact .zayavka__panel {
	grid-template-columns: minmax(0, 1fr);
	max-width: calc(720 * var(--px));
}
@media (max-width: 900px) {
	.zayavka__panel {
		grid-template-columns: minmax(0, 1fr);
	}
	.zayavka__row {
		grid-template-columns: minmax(0, 1fr);
	}
}
.zayavka__pot {
	position: absolute;
	left: calc(-9999 * var(--px));
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.zayavka__opt {
	margin-inline-start: 0.35em;
	color: var(--ink-2);
	font-size: 0.8125em;
	font-weight: var(--fw-text);
}