.demo__pageHeading {
	max-width: 1080px;
	margin: 0 auto;
	padding: 80px 0 0;

	color: var(--text-base-primary);
	font-feature-settings: 'dnom' on, 'ss01' on, 'ss02' on, 'ss03' on, 'ss10' on;
	font: var(--font-display-semi-md);
	letter-spacing: var(--letter-spacing-tight);
	text-align: center;
}

.demo, .demo__complete {
	padding: 120px 0 20px 0;
	max-width: 1080px;
	margin: 0 auto;

	display: flex;
	gap: 40px;

	&.demo {
		padding-top: 64px;
		padding-bottom: 64px;
		justify-content: space-between;

		.demo__subtext {
			max-width: 420px;
			color: var(--text-base-primary);
			font: var(--font-heading-med-xs);
		}
	}

	.demo__head {
		max-width: 50%;

		display: flex;
		flex-direction: column;
		gap: 16px;

		.demo__heading {
			color: var(--text-base-primary);
			font: var(--font-display-semi-md);
		}

		.demo__subtext {
			color: var(--text-base-secondary);
			font: var(--font-body-reg-lg);
		}

		.demo__list {
			padding: 32px 0 20px 0;
			display: flex;
			flex-direction: column;
			gap: 12px;

			.demo__list__item {
				display: flex;
				gap: 8px;

				color: var(--text-base-secondary);
				font: var(--font-body-reg-md);
			}
		}

		.demo__review {
			/* разом із gap 16 колонки = 80 до блока зверху, як у макеті */
			margin-top: 64px;
			max-width: 420px;
			padding: 20px;
			box-sizing: border-box;

			border-radius: 10px;
			background: rgba(175, 204, 159, 0.5);
			/* dissolve при ротації відгуків (див. demo.phtml) */
			transition: opacity 0.4s ease;

			&.is-fading {
				opacity: 0;
			}

			.demo__review-quote {
				color: var(--text-base-secondary);
				font: var(--font-body-reg-md);
			}

			.demo__review-author {
				display: flex;
				align-items: center;
				gap: 12px;
				padding-top: 12px;

				.demo__review-ava {
					width: 40px;
					height: 40px;
					flex-shrink: 0;
					overflow: hidden;

					border-radius: 24px;
					border: 1px solid var(--border-mid);
					background: var(--base-greengrey-a-200);
					box-shadow: var(--shadow-middle);

					img {
						display: block;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.demo__review-author__text {
					display: flex;
					flex-direction: column;

					.demo__review-author__name {
						color: var(--text-base-primary);
						font: var(--font-body-reg-md);
					}

					.demo__review-author__position {
						color: var(--text-base-tertiatry);
						font: var(--font-body-reg-xs);
					}
				}
			}
		}

		/* компактний варіант спільного блока logotypes під відгуком (як у макеті) */
		.demo__clients {
			/* разом із gap 16 колонки = 20 до картки відгуку */
			margin-top: 4px;

			.logotypes {
				flex-direction: column;
				align-items: flex-start;
				gap: 8px;
				max-width: none;
				padding: 0;
				border: 0;

				.logotypes__title {
					color: var(--text-base-tertiatry);
					font: var(--font-body-med-sm);
				}

				.logotypes__logos {
					flex-wrap: wrap;
					justify-content: flex-start;
					flex-grow: 0;

					div {
						min-width: 78px;
						min-height: 32px;
						padding: 0;
						border-radius: 12px;

						svg {
							height: 18px;
							width: auto;
						}
					}
				}
			}
		}
	}

	.demo__form-wrapper {
		/* фіксована ширина, як у макеті: контент форми (розкриття textarea)
		   не впливає на розкладку колонок */
		flex: 0 0 540px;
		max-width: 540px;

		.demo__form {
			border-radius: 16px;
			background: var(--base-white-solid);
			box-shadow: var(--shadow-regular-out);

			flex-grow: 1;

			.demo__form__body {
				width: 100%;
				padding: 32px;
				display: flex;
				flex-direction: column;
				gap: 28px;
				box-sizing: border-box;

				.demo__form__row {
					display: flex;
					gap: 16px;

					&.demo__form__row-submit {
						justify-content: flex-end;

						.demo__form__item {
							flex-grow: 0;
						}
					}

					&.demo__form__row-details {
						/* без flex-gap: висоту анімують slideUp/slideDown,
						   стрибків від зникнення gap не буде */
						.demo__form__item {
							gap: 0;
						}

						.demo__form__details-body {
							.demo__form__item-title {
								margin-bottom: 8px;
							}
						}
					}

					.demo__form__details-toggle {
						display: flex;
						align-items: center;
						gap: 8px;
						padding: 0;
						border: 0;
						background: none;
						cursor: pointer;

						color: var(--text-base-secondary);
						font: var(--font-body-med-sm);

						&:hover {
							color: var(--text-base-primary);

							ws-icon svg path {
								fill-opacity: 0.93;
							}
						}
					}

					.demo__form__item {
						display: flex;
						flex-direction: column;
						gap: 8px;
						flex-grow: 1;
						min-width: 0;

						.demo__form__item-title {
							color: var(--text-base-primary);
							font: var(--font-body-semi-sm);

							sup {
								color: var(--color-blue-700);
								font: var(--font-body-semi-sm);
							}
						}

						.demo__form__item-message {
							display: none;
							color: var(--global-state-focus-danger);
							font: var(--font-body-reg-xs);
						}

						.demo__form__item-input {

							input, textarea {
								border: 0;
								border-radius: 10px;
								background: var(--input-form-bg-default);
								box-shadow: var(--shadow-input-form-default);
								padding: 10px 12px;
								width: 100%;
								box-sizing: border-box;
								color: var(--text-base-primary);
								font: var(--font-body-reg-sm);

								&::placeholder {
									color: var(--text-base-ghost);
									font: var(--font-body-reg-sm);
								}

								&:hover {
									box-shadow: var(--shadow-input-form-hover);
								}

								&:focus, &:focus-visible {
									outline: none;
									box-shadow: var(--shadow-input-form-default), 0 0 0 1.5px var(--global-state-focus-default);
								}
							}

							textarea {
								resize: vertical;
								min-height: 96px;
								max-height: 360px;
							}

							&.demo__form__item-error {
								input, textarea {
									background: var(--input-form-bg-error);
									box-shadow: var(--shadow-input-form-error);
								}

								&+.demo__form__item-message {
									display: block;
								}
							}
						}

						&.demo__form__item-iti {
							--iti-hover-color: var(--base-greengrey-a-100);

							.demo__form__item-input {
								max-width: 100%;

								.iti__selected-country-primary {
									border-radius: 9px 0 0 9px;
								}

								.iti__selected-dial-code {
									color: var(--text-base-primary);
									font: var(--font-body-reg-sm);
								}

								.iti__search-input {
									outline: none;
									border: 0;
									box-shadow: 0 0.5px 0 0 var(--iti-border-gray);
									border-radius: 2px 2px 0 0;
								}

								input {
									padding-right: 0;
								}
							}
						}

						&.demo__form__item-team {

							.demo__form__item-input {
								display: flex;
								justify-content: space-between;
								flex-wrap: wrap;

								input.input {
									width: 82px;
									text-align: center;
								}

								.demo__form__item-teamBtn {
									display: flex;
									gap: 8px;
									flex-wrap: nowrap;

									.btn.btn-semi-active {
										background: var(--base-white-solid);
										box-shadow: 0 0 0 1.5px var(--global-state-focus-default);
									}
								}
							}
						}
					}
				}
			}

		}

		/* текст погодження — під карткою форми, по центру (як у макеті) */
		.demo__form__footer {
			max-width: 400px;
			margin: 0 auto;
			/* 24px від форми зверху; знизу 0 — 24px до бейджів дає padding-top сусіда */
			padding: 24px 12px 0;
			box-sizing: border-box;

			text-align: center;
			color: var(--text-base-secondary);
			font: var(--font-body-reg-xs);

			a {
				color: var(--text-base-secondary);
				cursor: pointer; /* href немає (модалка через data-href), інакше буде текстовий курсор */
				text-decoration-line: underline;
				text-decoration-style: solid;
				text-decoration-skip-ink: auto;
				text-decoration-thickness: 8%;
				text-underline-offset: 12%;
				text-underline-position: from-font;

				&:hover {
					text-decoration: none;
				}
			}
		}

		.demo__form-security {
			padding-top: 24px;
			display: flex;
			gap: 24px;
			align-items: center;
			justify-content: center;
		}
	}

	.demo__image {
		img {
			max-width: 100%;
		}
	}
}

.iti {
	font-family: Arial, sans-serif;
	font-size: 13px;
	width: 100%;
}

#demoComplete {
	display: none;
	.demo__complete {
		padding-bottom: 200px;
	}
}