:root {
	/* Colors */
	--primary-color: #1daee8;
	--primary-color-dark: #1a2440;
	--primary-color-light: #6f87ff;
	--primary-button-text-color: #fff;
	--secondary-color: #1a2440;
	--secondary-border-color: #ddd;
	--background-color: hsl(0, 0%, 100%);
	--green-color: #357266;
	--text-color: var(--body-text);
	--border-color: var(--black-100);
	--error-color: hsl(0, 70%, 50%);
	--success-color: hsl(150, 22%, 63%);

	/* Color Variables */
	--input-background: #fff;
	--input-disabled-bg: #f6f8ff;
	--input-disabled-inner: #e1e6f9;
	--icon-size: 1.4rem;

	--link-color: var(--primary-color);
}

.bg-color-primary {
	background-color: var(--primary-color);
}

.bg-color-secondary {
	background-color: var(--secondary-color);
}

.bg-color-green {
	background-color: var(--green-color);
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: var(--font-family);
	font-size: var(--body-font-size);
	font-weight: var(--font-weight-regular);
	font-variation-settings: var(--font-weight-regular);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01" on, "ss03" on, "cv05" on, "cv06" on, "cv10" on;
	line-height: var(--line-height-normal);
	letter-spacing: var(--letter-spacing);
	color: var(--text-color);
	background-color: var(--header);
	overscroll-behavior: none;
	overflow-x: hidden;
	position: relative;
}

.header {
	background: var(--white-100);
	padding: var(--space-md) 0;
	border-bottom: 1px solid var(--border-color);
	position: fixed;
	z-index: var(--z-index-header);
	box-shadow: var(--shadow-elevation-medium);
	width: 100%;
	top: 0;
	left: 0;

	@media (min-width: 992px) {
		height: 8rem;
		padding: var(--space-xs) 0;
	}

	.header__logo {
		display: flex;
		align-items: center;
		grid-column: span 3;

		a {
			display: flex;
			align-items: center;
			width: 100%;
			max-width: 225px;
			padding-top: 0.32rem;
		}
	}

	.header__trigger {
		grid-column: span 1;
		display: flex;
		justify-content: flex-end;

		svg {
			width: var(--icon-size);
			height: var(--icon-size);

			path {
				stroke: currentColor;
			}
		}
	}

	.header__grid {
		--grid-columns: 4;

		@media (min-width: 992px) {
			--grid-columns: 12;
		}
	}

	.nav__button,
	.nav__link,
	.nav__cta .button {
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-semibold);
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
	}

	.nav__link:hover,
	.nav__button:hover {
		color: var(--primary-color);
	}

	.nav__link.active,
	.nav__button.active {
		color: var(--primary-color);
	}

	.nav__button,
	.nav__link {
		border-color: transparent;
		cursor: pointer;
	}

	.nav__item {
		display: flex;
		flex-direction: column;
		width: 100%;
		border-bottom: 1px solid var(--border-color);
	}

	.nav-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--gap-xl);
	}

	.nav {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;

		width: 100%;

		@media (min-width: 992px) {
			flex-direction: row;
		}
	}

	.nav__cta {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
	}

	@media (max-width: 992px) {
		.header__nav {
			display: flex;
			position: fixed;
			flex-direction: column;
			width: 100%;
			top: 4.2rem;
			z-index: 200;
			padding: calc(var(--space-xl) * 1.6) var(--space-md);
			left: -200%;
			height: calc(100dvh - 3.4rem);
			background: var(--white-100);

			&.active {
				left: 0;
			}
		}

		.nav__button {
			padding-left: var(--space-xs);
			padding-right: var(--space-xs);
		}

		.nav-wrapper {
			flex-grow: 1;
			justify-content: space-between;
		}

		.header__cta {
			display: none;
		}
	}

	@media (min-width: 993px) {
		.nav {
			justify-content: center;
			gap: var(--space-xl);
			border-top: 1px solid var(--border-color);
		}
		.header__nav {
			grid-column: span 12;
			display: flex;
			width: 100%;
			align-items: center;

			.nav__cta {
				display: none;
			}
		}

		.nav-wrapper {
			flex-direction: row;
			gap: var(--space-xl);
			grid-column: span 10;
			justify-content: center;
			width: 100%;
		}

		.nav__item {
			border-bottom: none;
			width: auto;
		}

		.header__cta {
			grid-column: 10 / span 2;
		}

		.nav__button,
		.nav__link,
		.nav__cta .button {
			font-size: 0.97rem;
			text-align: center;
			padding-top: 0.6rem;
			padding-bottom: 0.6rem;
		}
	}
}

.main {
	background: rgba(249, 243, 250, 1);
}

html:has(.nav__dropdown--active) {
	overflow: hidden;
}

.section,
.footer {
	position: relative;
	padding: calc(var(--space-xl) * 3) 0;

	&.hero {
		padding: calc(var(--space-xl) * 4) 0 calc(var(--space-xl) * 2) 0;
	}

	&.section--slim {
		padding: calc(var(--space-xl) * 1) 0;
	}

	&:has(.bg) > .wrapper {
		position: relative;
		z-index: var(--z-index-base);
	}

	@media (min-width: 768px) {
		padding: calc(var(--space-xl) * 2) 0;

		&.hero {
			padding: calc(var(--space-xl) * 4) 0 calc(var(--space-xl) * 2) 0;

			&.content {
				min-height: auto;
				padding: calc(var(--space-xl) * 3) 0 var(--space-xl) 0;
			}
		}
	}
}

.team-img {
	display: flex;
	justify-content: center;
	align-items: center;

	img {
		border-radius: 50%;
		width: 200px;
		height: 200px;
		object-fit: cover;
		padding: 1rem;
		border: 8px solid var(--primary-color);
	}
}

.hero-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.content-grid {
	--grid-columns: 2;

	.content__left {
		grid-column: span 2;
	}

	.content__right {
		grid-column: span 2;
	}

	.content__col {
		grid-column: span 2;
	}

	@media (min-width: 768px) {
		--grid-columns: 12;

		.content__left {
			grid-column: span 6;
		}

		.content__col {
			grid-column: span 6;
		}

		.content__right {
			grid-column: span 6;

			&.content__right--slim {
				grid-column: 8 / span 5;
			}
		}
	}
}

.cta {
	padding: var(--space-xl) 0 calc(var(--space-xl) * 1.1) 0;
}

.cta-grid {
	--grid-columns: 2;

	.cta__left {
		grid-column: span 2;
	}

	.cta__right {
		grid-column: span 2;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	@media (min-width: 768px) {
		--grid-columns: 12;

		.cta__left {
			grid-column: span 10;
		}

		.cta__right {
			grid-column: 11 / span 2;
		}
	}
}

.hero-grid {
	--grid-columns: 2;
	--grid-gap: calc(var(--space-xl) * 2);
	.hero-grid__left {
		grid-column: span 2;
	}

	.hero-grid__right {
		grid-column: span 2;
	}

	@media (min-width: 768px) {
		--grid-columns: 12;

		.hero-grid__left {
			grid-column: span 5;
		}

		.hero-grid__right {
			grid-column: 7 / span 6;
		}
	}
}

.product-grid {
	--grid-columns: 1;
	grid-gap: var(--space-xl);

	@media (min-width: 576px) {
		--grid-columns: 2;
	}

	@media (min-width: 992px) {
		--grid-columns: 3;
		grid-gap: var(--space-lg);
	}
}

.team-grid {
	--grid-columns: 1;

	@media (min-width: 576px) {
		--grid-columns: 2;
	}

	@media (min-width: 992px) {
		--grid-columns: 4;
	}
}

.h1,
.h2,
.h3 {
	text-wrap: pretty;
}

.h1 span {
	color: var(--primary-color);
}

.img-oversized {
	transform: scale(1.35) translate(10vw, 15%);
}

@media (min-width: 576px) {
	.img-oversized {
		transform: scale(1) translate(10vw, 3vh);
	}
}

@media (min-width: 768px) {
	.img-oversized {
		transform: scale(1.8) translate(8%, 6%);
	}
}

.tag {
	text-transform: uppercase;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	color: var(--primary-color);
	letter-spacing: 0.1rem;
}

.footer {
	background: var(--secondary-color);
}

.social-links a {
	svg {
		width: var(--icon-size);
		height: var(--icon-size);

		path {
			fill: var(--white-200);
			transition: var(--transition-medium-complex);
		}
	}

	&:hover svg path {
		fill: var(--white-800);
	}
}

.steps-grid {
	--grid-columns: 1;

	@media (min-width: 768px) {
		--grid-columns: 12;
	}
}

.footer-grid {
	--grid-columns: 2;

	.footer__logo {
		grid-column: span 2;

		a {
			max-width: 225px;
		}
	}

	.footer__right {
		grid-column: span 2;
	}

	@media (min-width: 768px) {
		--grid-columns: 12;

		.footer__logo {
			grid-column: span 3;
		}

		.footer__right {
			grid-column: 5 / span 10;
		}
	}
}

.footer-links {
	display: grid;

	grid-row-gap: var(--space-xl);

	--grid-columns: 2;

	@media (min-width: 768px) {
		--grid-columns: 3;
		grid-row-gap: var(--space-lg);
	}

	h4 {
		color: var(--white-800);
		font-size: var(--font-size-xs);
		text-transform: uppercase;
		line-height: 1;
		margin-bottom: var(--space-xs);
		font-weight: var(--font-weight-semibold);
	}

	ul {
		display: flex;
		gap: calc(var(--space-xs) * 0.6);
	}

	a {
		font-size: var(--font-size-xs);
		color: var(--white-100);
		font-weight: var(--font-weight-semibold);
		transition: var(--transition-medium-complex);

		&:hover {
			text-decoration: underline;
			text-decoration-color: var(--white-800);
			text-underline-offset: 0.25rem;
			text-decoration-thickness: 0.08rem;
			color: var(--white-800);
			transition: var(--transition-medium-complex);
		}
	}

	.footer-links__section {
		display: flex;
		flex-direction: column;
	}
}

.copy {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-xl);
	border-top: 1px solid var(--black-500);
	padding-top: var(--space-sm);
	align-items: center;
	flex-direction: column;

	@media (min-width: 768px) {
		flex-direction: row;
	}

	p,
	a {
		font-size: var(--font-size-xs);
	}

	p {
		color: var(--white-800);
		text-transform: uppercase;
	}

	a {
		color: var(--white-100);
		font-weight: var(--font-weight-semibold);

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

	ul {
		display: flex;
		gap: var(--space-md);
	}
}

.nav__dropdown {
	position: relative;
	overflow: hidden;
	max-height: 0;
	z-index: 1000;
	width: 100vw;
	background: var(--white-100);
	transition: var(--transition-long-complex);

	.nav__dropdown__grid {
		grid-column: span 8;
	}

	a.product-link {
		font-size: var(--text-sm);
		color: var(--color-dark);
		text-decoration: none;
		padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-xs);
		font-weight: var(--font-weight-semibold);
		display: flex;
		flex-direction: row;
		gap: var(--space-xs);
		align-items: center;

		.icon {
			border: 1px solid var(--black-100);
			display: inline-flex;
			padding: var(--space-xs);
			border-radius: var(--border-radius-medium);

			img {
				min-width: 24px;
				max-width: 24px;
				height: auto;
			}
		}

		.product {
			display: flex;
			flex-direction: column;
			gap: calc(var(--space-xs) / 4);
			padding-top: 0.2rem;

			h4 {
				font-size: var(--font-size-sm);
				font-weight: var(--font-weight-bold);
				color: var(--text-color);
				line-height: 1;
			}

			p {
				font-size: var(--font-size-xxs);
				color: var(--dark-grey);
				font-weight: var(--font-weight-semibold);
			}
		}

		&:hover {
			background-color: var(--blue-99);
			text-decoration: none;
			transition: var(--transition-medium-simple);
			border-radius: var(--border-radius-medium);
			h4 {
				color: var(--blue-500);
			}
			img path {
				stroke: var(--blue-500);
			}

			.icon {
				border: 1px solid var(--blue-500);
				background: var(--white-100);
			}

			p {
				color: var(--blue-500);
			}
		}
	}
}

@media (max-width: 992px) {
	.nav__dropdown {
		.wrapper {
			padding: var(--space-md) var(--space-xs);
		}
	}
}

@media (min-width: 992px) {
	.nav__dropdown {
		position: absolute;
		left: 0;
		top: 4rem;
		box-shadow: var(--shadow-elevation-medium);
		z-index: var(--z-index-dropdown);

		.wrapper {
			padding-top: var(--space-lg);
			padding-bottom: var(--space-lg);
		}
	}
}

.product-links {
	grid-column: 1 / span 9;
	display: grid;
	grid-template-columns: subgrid;

	& > li {
		grid-column: span 8;

		&:first-child {
			grid-column: span 8;
			padding-bottom: var(--space-xs);
		}
	}
}

@media (min-width: 992px) {
	.product-links {
		& > li {
			grid-column: span 4;
		}
	}
}

.nav__dropdown--active {
	max-height: 100vh;
	transition: var(--transition-long-complex);
}

.client-logo {
	max-width: 120px;
	margin: 0;
}

.checkmark-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);

	li {
		background: none;
		display: flex;
		align-items: center;
		gap: var(--space-xs);

		&::before {
			content: "";
			width: var(--icon-size);
			height: var(--icon-size);
			background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24"><path stroke="%23e44c1a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6 9 17l-5-5"/></svg>')
				no-repeat center;
			background-size: contain;
			flex-shrink: 0;
		}
	}
}
details summary::-webkit-details-marker {
	display: none;
}

.faq {
	list-style: none;
	appearance: none;
	-webkit-appearance: none;
	border-bottom: 1px solid var(--border-color);
	padding: var(--space-sm) 0;

	summary {
		appearance: none;
		-webkit-appearance: none;
		cursor: pointer;
		position: relative;

		&::after {
			content: "";
			display: inline-block;
			position: absolute;
			top: 50%;
			right: 0.6rem;
			transform: translateY(-50%);
			width: var(--icon-size);
			height: var(--icon-size);
			background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24"><path stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6"/></svg>')
				no-repeat center;
			background-size: contain;
			transition: var(--transition-medium-complex);
			pointer-events: none;
		}
	}

	.faq__answer {
		margin-top: var(--space-sm);
	}

	&[open] summary::after {
		transform: translateY(-50%) rotate(180deg);
	}
}

.terms {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 70ch;

	h2:not(:first-child) {
		margin-top: 2rem;
	}

	h3 {
		margin-top: 1rem;
	}
	p {
	}

	.bullet-list {
		list-style: circle;
		margin-left: 1.6rem;
		padding-left: 1rem;
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}
}

.testimonial {
	blockquote {
		font-size: var(--font-size-md);
		line-height: 1.5;
		font-weight: var(--font-weight-semibold);
		color: var(--black-300);
	}

	span {
		text-transform: uppercase;
		display: block;
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		margin-top: var(--space-lg);
	}
}