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

	display: flex;
	gap: 40px;

	.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: 16px 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);
			}
		}

		.security {
			margin: 0;
			padding: 0;

			.security__badges {
				padding-top: 16px;
			}
		}
	}

	.demo__form {
		max-width: 50%;

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

		flex-grow: 1;

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

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

				.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(--text-base-ghost);
							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;

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

						&.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 {
						max-width: calc(50% - 8px);

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

							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 {
			width: 100%;
			padding: 8px 40px 24px 40px;
			box-sizing: border-box;

			display: flex;
			gap: 12px;
			align-items: flex-start;

			input[type=checkbox] {
				margin: 14px 0;
			}

			label {
				display: block;
				padding: 12px 0;
				color: var(--text-base-secondary);
				font-family: var(--font-family-secondary), serif;
				font-size: var(--font-size-body-xs);
				font-style: normal;
				font-weight: var(--font-weight-regular);
				line-height: var(--line-height-xs);
				letter-spacing: var(--letter-spacing-regular);
				user-select: none;

				a {
					color: var(--text-base-secondary);
					font-family: var(--font-family-secondary), sans-serif;
					font-size: var(--font-size-body-xs);
					font-style: normal;
					font-weight: var(--font-weight-regular);
					line-height: var(--line-height-xs);
					letter-spacing: var(--letter-spacing-regular);
					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__image {
		img {
			max-width: 100%;
		}
	}
}

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

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