.page {

	.page__navigation {
		border-bottom: 1px solid var(--border-white);
		border-top: 1px solid var(--border-white);

		.container {
			@media (max-width: 767px) {
				padding-right: 0;
			}
		}

		.page__navigation-list {
			display: flex;
			align-items: stretch;
			justify-content: center;
			gap: 0;
			margin: 0;
			padding: 0;
			list-style: none;

			@media (max-width: 767px) {
				justify-content: flex-start;
				overflow-x: auto;
				scrollbar-width: none;

				&::-webkit-scrollbar {
					display: none;
				}
			}

			.page__navigation-item {
				flex-shrink: 0;
			}

			.page__navigation-link {
				position: relative;
				display: flex;
				align-items: center;
				height: 60px;
				padding: 0 22px;
				font-family: var(--font-heading-family);
				font-size: var(--xs);
				font-weight: 500;
				text-transform: uppercase;
				color: rgb(from var(--color-white) r g b / 45%);
				transition: .3s all;

				@media (max-width: 767px) {
					height: 52px;
					padding: 0 16px;
				}

				&::after {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					bottom: -1px;
					height: 1px;
					background: var(--color-white);
					transform: scaleX(0);
					transition: .3s transform;
				}

				&:hover,
				&:focus,
				&.is-active {
					color: var(--color-white);
				}

				&.is-active {
					&::after {
						transform: scaleX(1);
					}
				}
			}
		}
	}

	.page__inner {
		width: 960px;
		max-width: 100%;
		margin: 0 auto;
		padding: 70px 0 0;

		@media (max-width: 767px) {
			padding-top: 45px;
		}
	}

	.page__header {
		text-align: center;

		.page__title {
			margin-bottom: 22px;

			@media (max-width: 767px) {
				margin-bottom: 16px;
			}
		}

		.page__intro {
			margin: 0 auto 40px;

			p {
				margin-bottom: 0;
				line-height: 1.45;
			}
		}
	}

	.page__content {
		font-size: var(--xxs);
		line-height: 1.55;

		p {
			margin-bottom: 26px;
			line-height: inherit;

			&:last-child {
				margin-bottom: 0;
			}
		}

		h2,
		h3,
		h4,
		h5,
		h6 {
			margin: 30px 0 20px;
			font-family: var(--font-body-family);
			font-size: var(--xxs);
			line-height: 1.4;
			font-weight: 500;
			text-transform: none;
		}

		ul,
		ol {
			margin: 0 0 26px;
			padding-left: 22px;
		}

		li {
			margin-bottom: 6px;
		}

		a {
			color: var(--color-primary);
			text-decoration: underline;
			text-underline-offset: 2px;
		}
	}

	.page__faqs {
		width: 735px;
		max-width: 100%;
		margin: 0 auto;

		.page__faq-group {
			margin-top: 45px;

			&:first-child {
				margin-top: 0;
			}

			.page__faq-group-title {
				margin: 0 0 20px;
				text-align: left;
			}
		}

		.page__faq {
			border: 1px solid rgb(from var(--color-white) r g b / 45%);
			border-radius: 2px;
			margin-bottom: 5px;

			&:last-child {
				margin-bottom: 0;
			}

			.page__faq-trigger {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 20px;
				min-height: 50px;
				padding: 12px 22px;
				cursor: pointer;
				list-style: none;

				&::-webkit-details-marker {
					display: none;
				}

				.page__faq-question {
					font-weight: 400;
				}

				.page__faq-icon {
					position: relative;
					display: block;
					width: 16px;
					height: 16px;
					flex-shrink: 0;

					&::before,
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 16px;
						height: 1px;
						background: var(--color-white);
						transform: translate(-50%, -50%);
						transition: .2s transform;
					}

					&::after {
						transform: translate(-50%, -50%) rotate(90deg);
					}
				}
			}

			.page__faq-content {
				padding: 0 22px 20px;
				line-height: 1.5;

				p {
					margin-bottom: 16px;

					&:last-child {
						margin-bottom: 0;
					}
				}

				a {
					color: var(--color-primary);
					text-decoration: underline;
					text-underline-offset: 2px;
				}
			}

			&[open] {
				.page__faq-trigger {
					.page__faq-icon {
						&::after {
							transform: translate(-50%, -50%) rotate(0deg);
						}
					}
				}
			}
		}
	}

	.page__cta {
		margin-top: 70px;
		text-align: center;

		@media (max-width: 767px) {
			margin-top: 50px;
		}

		.page__cta-intro {
			margin-bottom: 18px;
			line-height: 1.45;

			p {
				margin-bottom: 0;
			}
		}

		.page__cta-button {
			min-width: 200px;
		}
	}

	&.page--faqs {

		.page__inner {
			width: 100%;
		}

		.page__header {
			.page__intro {
				width: 735px;
				max-width: 100%;
			}
		}
	}
}