@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-stretch: 0% 200%;
	font-weight: 500 800;
	src: url("../PlusJakartaSans.ttf");
}

@keyframes pulse {
	0% {
		transform: scale(0.85);
		opacity: 0.85;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.85);
		opacity: 0.85;
	}
}

:root {
	color-scheme: light dark;
}

html {
	--background: light-dark(#ffffff, #111);
	--header: light-dark(#ffffff99, #11111199);
	background-color: var(--background);
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 100px;
	width: 100vw;
	overflow-x: hidden;
	position: relative;
	min-height: calc(100vh - 110px);
	justify-content: space-between;
}

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

::selection {
	text-decoration: underline;
}

* {
	font-family: "Plus Jakarta Sans";
	margin: 0;
	scroll-behavior: smooth;
	scroll-margin-top: 200px;
}

.mobile {
	display: none !important;
}

.dark {
	display: none !important;
}

@media (prefers-color-scheme: dark) {
	.light {
		display: none !important;
	}

	.dark {
		display: flex !important;
	}

	h1:not(.unset),
	h2:not(.unset),
	h3:not(.unset),
	h4:not(.unset),
	h5:not(.unset),
	h6:not(.unset),
	p:not(.unset),
	.link:not(.unset),
	button:not(.filled):not(.basic):not(.square) {
		background: unset !important;
		background-clip: unset !important;
		-webkit-background-clip: unset !important;
		-webkit-text-fill-color: white !important;
	}

	.hero,
	.cta {
		background: url(../noise-dark.png) rgba(38, 0, 255, 0.1) 100% / cover
			no-repeat !important;
	}

	.link.dropdown::after {
		background-image: url(../dropdown-light.svg) !important;
	}

	a:not(:has(button))::after {
		background: url(../arrow-light.svg) !important;
	}

	.hero .pill .text::after {
		background: url(../arrow-light.svg) !important;
	}

	hr {
		background: white !important;
	}

	.hero h1 u.unset,
	.sort .question > p,
	.sort .result > h5,
	.features.small .feature .text a,
	.table .unset.black:not(.count),
	table.compare .unset.black,
	.footer .bottom a,
	.pageInfo h4 a,
	.legal .block p,
	.legal .block p a,
	.info div:not(.meta) *,
	.pageInfo.compact .meta *,
	.linkPayment .unset.black,
	.details .unset.black {
		-webkit-text-fill-color: white !important;
	}

	.splide__arrow svg {
		fill: white !important;
	}

	.hero h1 u::after {
		filter: brightness(10);
	}
}

h1:not(.unset),
h2:not(.unset),
h3:not(.unset),
h4:not(.unset),
h5:not(.unset),
h6:not(.unset),
p:not(.unset),
.link:not(.unset),
a:not(:has(button)):not(.unset) {
	background: var(--Linear-Gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.unset {
	background: unset !important;
	background-clip: unset !important;
	-webkit-background-clip: unset !important;
	-webkit-text-fill-color: white !important;
}

.unset.black {
	-webkit-text-fill-color: black !important;
}

.unset.red {
	-webkit-text-fill-color: red !important;
}

.unset.theme {
	-webkit-text-fill-color: var(--theme) !important;
}

a {
	text-decoration: none;
	cursor: pointer;
}

button {
	display: flex;
	padding: 8px 16px;
	align-items: flex-start;
	gap: 10px;
	border-radius: 8px;
	border: 2px solid light-dark(var(--theme), white);
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	min-width: fit-content;
	transition: 0.1s;
	text-align: center;
}

button:not(.filled):not(.basic):not(.square) {
	background: var(--Linear-Gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

button.filled {
	display: flex;
	padding: 10px 18px;
	border: none;
	border-radius: 8px;
	background: var(--Linear-Gradient);
	align-items: center;
	gap: 10px;
	color: white;

	svg,
	svg * {
		fill: white;
	}
}

button.light {
	border-color: white;
}

button.filled.light {
	color: #0029ff;
	background: white;
}

button.basic {
	border-radius: 6px;
	border: 1px solid #c7c7c7;
	background: transparent;
	width: -webkit-fill-available;
	justify-content: center;
	font-weight: 600;
}

button.square {
	min-width: 32px;
	padding: 8px;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	border: 1px solid #c7c7c7;
	gap: 5px;
	background: transparent;
}

button:hover {
	opacity: 0.8;
	transition: 0.25s;
}

button.basic:hover {
	opacity: 1;
	background: light-dark(#f0f0f0, #151515);
}

button.dim {
	cursor: not-allowed;
	opacity: 0.5;
	transition: 0.25s;
}

section {
	overflow: hidden;
	width: -webkit-fill-available;
}

.header {
	display: flex;
	padding: 32px 50px;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px 20px;
	position: sticky;
	top: 0;
	width: -webkit-fill-available;
	background-color: transparent;
	min-height: 41px;
	z-index: 1000;
	margin-bottom: -100px;
	transition: 0.25s;

	> * {
		flex: 1 0 0;
	}

	.logo {
		width: 310px;
		height: 31.392px;
	}

	nav {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;

		> div {
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
		}

		.link {
			font-size: 16px;
			font-weight: 700;
			min-width: max-content;
			transition: 0.25s;
		}

		.link:hover {
			opacity: 0.7;
			transition: 0.25s;
		}

		.link.dropdown {
			margin-right: 20px;
			position: relative;
		}

		.link.dropdown::after {
			content: "";
			width: 18px;
			height: 24px;
			background-image: url(../dropdown.svg);
			display: block;
			position: absolute;
			top: -1px;
			right: -18px;
		}

		.dropdown:not(.link) {
			position: absolute;
			min-width: calc(100% - 5px);
			top: 35px;
			left: 0px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			height: 0%;
			padding: 0 5px 0 0;
			background: var(--background);
			gap: 5px;
			transition: 0.5s;
			overflow: hidden;

			.link {
				padding: 7px 15px;
				border-left: 1px solid var(--theme);
				width: -webkit-fill-available;
				transition: 0.25s;
			}

			.link:hover {
				background: var(--theme) !important;
				opacity: 1;
				transition: 0.25s;
			}
		}

		> div:has(.dropdown):hover .dropdown:not(.link) {
			height: unset;
			padding: 5px 5px 5px 0;
			transition: 0.5s;
		}
	}

	.buttons {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		min-width: max-content;
	}

	.account {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		min-width: max-content;

		img {
			width: 40px;
			height: 40px;
			border-radius: 100%;
		}

		p {
			font-size: 16px;
		}

		div {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 0px;
		}
	}
}

.header.scrolled {
	background-color: var(--header);
	backdrop-filter: blur(8px);
	transition: 0.25s;
}

nav.mobile {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 15px;
	width: calc(101vw - 60px);
	height: calc(101vh - 60px);
	padding: 30px;
	background: var(--background);
	max-width: 275px;
	overflow: scroll;

	div {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 7px;
	}

	.dropdown:not(.link) {
		padding-right: 8px;
		border-right: 1px solid var(--theme);
	}

	.buttons,
	.buttons a,
	.buttons a button {
		width: -webkit-fill-available;
		gap: 10px;
		text-align: right;
		justify-content: flex-end;
	}

	.account {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: max-content;

		img {
			width: 40px;
			height: 40px;
			border-radius: 100%;
		}

		p {
			font-size: 16px;
		}

		div {
			gap: 1px;
		}
	}
}

.navout {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	position: fixed;
	top: 0;
	right: -101vw;
	width: 101vw;
	max-width: 400px;
	transition: 0.5s;
	z-index: 1000;
	background: var(--Linear-Gradient);
	backdrop-filter: blur(5px);
}

.navout:has(nav.mobile.active) {
	right: 0vw;
	transition: 0.5s;
}

.blur {
	display: none;
	background: light-dark(rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.01));
	backdrop-filter: blur(5px);
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
}

.blur.active {
	display: flex !important;
}

.modal {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: max-content;
	min-width: min(75vw, 400px);
	max-width: calc(90vw - 101px);
	height: calc(100vh - 132px);
	overflow: scroll;
	padding: 65px 50px;
	border-radius: 25px 0px 0px 25px;
	border-top: 1px solid var(--theme);
	border-bottom: 1px solid var(--theme);
	border-left: 1px solid var(--theme);
	background: light-dark(#fff, #111);
	z-index: 10000;
	position: absolute;
	top: 0;
	right: 0;

	h3 {
		font-size: 32px;
		font-weight: 600;
	}

	hr {
		width: -webkit-fill-available;
	}

	.fields {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		width: -webkit-fill-available;

		input,
		textarea,
		select {
			width: -webkit-fill-available;
		}
	}

	input[disabled] {
		border: none;
		padding: 0;
	}
}

.modal.show {
	display: flex !important;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 100px;
	width: -webkit-fill-available;
	perspective: 600px;

	> * {
		width: -webkit-fill-available;
	}
}

main.compact {
	gap: 30px;
}

main.dashboard {
	flex-direction: row;
	align-items: stretch;
	gap: 35px;
	width: 92.5%;
}

main.linkPayment {
	width: 90%;

	button {
		justify-content: center;
	}
}

.sidebar {
	display: flex;
	width: max-content;
	padding-right: 30px;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	border-right: 1px solid light-dark(#ebeef1, #212121);

	* {
		fill: light-dark(#30313d, white);
	}

	.logo {
		display: flex;
		padding: 2.5px 8.5px;
		align-items: center;
		gap: 10px;
		width: max-content;

		h6 {
			font-size: 15px;
			font-weight: 700;
		}
	}

	.links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4.5px;
		align-self: stretch;
		position: sticky;
		top: 100px;

		.link {
			display: flex;
			padding: 5.5px 8.5px;
			align-items: center;
			gap: 10px;
			align-self: stretch;
			border-radius: 7.5px;
			border: 1px solid transparent;
			cursor: pointer;
			transition: 0.25s;

			p {
				font-size: 13.5px;
				font-weight: 500;
			}
		}

		.link:hover {
			border-color: light-dark(#c7c7c7, #303030);
			background: light-dark(#e7e7e7, #202020) !important;
			transition: 0.25s;

			p {
				font-weight: 700;
				letter-spacing: -0.1px;
			}
		}
	}
}

.tabs {
	display: flex;
	flex-direction: column;
	min-width: 0px;

	*[s] {
		display: none;
	}
}

.tabs.hidden *[h] {
	filter: blur(5px);
}

.tabs.hidden *[hi] {
	display: none;
}

.tabs.hidden *[s] {
	display: flex;
}

.tab {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 30px;
	width: -webkit-fill-available;
	height: 0px;
	transition: 0.25s;

	> * {
		width: -webkit-fill-available !important;
	}

	> h3 {
		font-size: 35px;
		font-weight: 800;
		letter-spacing: -0.88px;
		display: flex;
		align-items: center;
		gap: 10px;
		align-self: stretch;

		.count {
			min-width: 11px;
			padding: 10px;
			border-radius: 5px;
			background: #d0d5ff !important;
			text-align: center;
			font-size: 15px;
			font-weight: 600;
			line-height: 12.5px;
		}
	}

	> .top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-self: stretch;

		h3 {
			font-size: 35px;
			font-weight: 800;
			letter-spacing: -0.88px;
			display: flex;
			align-items: center;
			gap: 10px;
			align-self: stretch;

			.count {
				min-width: 11px;
				padding: 10px;
				border-radius: 5px;
				background: #d0d5ff !important;
				text-align: center;
				font-size: 15px;
				font-weight: 600;
				line-height: 12.5px;
			}
		}

		.actions {
			display: flex;
			align-items: center;
			gap: 10px;
		}
	}

	.buttons {
		display: flex;
		flex-direction: row;
		gap: 8px;

		> * {
			width: -webkit-fill-available;
		}
	}

	> span {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;

		svg {
			position: absolute;
			top: 15px;
			left: 15px;
		}

		input {
			display: flex;
			padding: 12.5px 20px 12.5px 40px;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			gap: 17.5px;
			align-self: stretch;
			border-radius: 8px;
			border: 1.5px solid light-dark(var(--theme), white);
			font-size: 14.5px;
			width: -webkit-fill-available;
		}
	}

	> span[found]::after {
		content: attr(found);
		position: absolute;
		top: 5px;
		right: 5px;
		height: calc(100% - 30px);
		display: flex;
		align-items: center;
		padding: 10px;
		border-radius: 5px;
		background: #d0d5ff !important;
		text-align: center;
		font-size: 15px;
		font-weight: 600;
		line-height: 12.5px;
		color: #111;
		justify-content: center;
	}
}

.tab.active {
	height: 100%;
	transition: 0.25s;
}

.tab:not(.active) {
	overflow: hidden;
}

.hero {
	display: flex;
	width: calc(95% - 200px);
	min-height: calc(95vh - 110px - 200px);
	padding: 100px;
	border-radius: 20px;
	border: 1px solid light-dark(#cbcbcb, #3d3d3d);
	background: url(../noise-light.png) transparent 100% / cover no-repeat;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;

	.pill {
		display: flex;
		padding: 6px 15px;
		justify-content: center;
		align-items: center;
		gap: 12px;
		border-radius: 5px;
		border: 0.5px solid light-dark(#00000045, #ffffff45);
		background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
		transition: 0.5s;
		text-align: center;

		.about,
		.divider {
			font-size: 14px;
			font-weight: 700;
			text-align: center;
		}

		.text {
			font-size: 14px;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 2px;
			transition: 0.25s;
		}

		.text::after {
			content: "";
			width: 18px;
			background: url(../arrow.svg);
			height: 19px;
			margin-top: -5px;
			display: flex;
		}
	}

	.pill:hover {
		border-color: light-dark(black, white);
		transition: 0.5s;

		.text {
			gap: 4px;
			transition: 0.25s;
		}
	}

	h1 {
		max-width: 1000px;
		text-align: center;
		font-size: 55px;
		font-weight: 500;
		letter-spacing: -0.88px;

		u {
			text-decoration: none;
			position: relative;
		}

		u::after {
			content: "";
			background-repeat: no-repeat;
			background-image: url("../underline.svg");
			background-position: 0 109%;
			background-size: cover;
			position: absolute;
			left: 0;
			bottom: -7.5px;
			width: 100%;
			height: 12.5px;
			clip-path: inset(0 100% 0 0);
			opacity: 0.2;
			transition: 0.25s;
		}

		u.active::after {
			clip-path: inset(0 0 0 0);
			opacity: 1;
			transition: 0.25s;
		}
	}

	h4 {
		font-size: 20px;
		font-weight: 500;
		text-align: center;
	}

	.buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}

	.brands {
		width: -webkit-fill-available;
		height: 45px;
		display: flex;
		align-items: center;
		margin-top: 20px !important;

		.brand {
			height: -webkit-fill-available;
			width: auto !important;

			img {
				height: -webkit-fill-available;
				width: auto;
			}
		}

		.brand.long {
			display: flex;
			align-items: center;

			img {
				max-height: 30px;
			}
		}
	}
}

.hero.desktop {
	transform-style: preserve-3d;
	transform: translateZ(0vh) translateY(0vh) rotateX(0deg);
	transition: 1s;
}

.pageInfo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 75px 0 0 0;
	width: 90%;

	img {
		height: 100px;
		width: auto;
	}

	h6 {
		text-align: center;
		font-size: 20px;
		font-weight: 800;
		letter-spacing: -0.88px;
	}

	h1 {
		text-align: center;
		font-size: 64px;
		font-weight: 800;
		letter-spacing: -0.88px;
	}

	h4 {
		font-size: 15px;
		font-weight: 500;
		text-align: center;
		max-width: 750px;
	}

	.buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
}

.pageInfo.compact {
	align-items: flex-start;
	gap: 10px;

	.meta {
		background: transparent;
		padding: 0;
		opacity: 0.75;
		transition: 0.25s;

		img {
			rotate: 180deg;
		}

		h6,
		a {
			color: light-dark(#111, #ffffff);
		}
	}

	.meta:hover {
		opacity: 1;
		margin-left: -5px;
		transition: 0.25s;
	}

	> img {
		height: 75px;
		margin-bottom: -10px;
	}

	h1 {
		font-size: 50px;
	}

	h4 {
		font-size: 20px;
		text-align: left;
	}

	.inline {
		display: flex;
		align-items: center;
		gap: 15px;

		> img {
			height: 75px;
		}
	}
}

.features {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 45px;

	.feature {
		display: flex;
		width: 85%;
		justify-content: space-between;
		align-items: center;
		gap: 100px;

		.info {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 24px;

			h3 {
				font-size: 64px;
				font-weight: 800;
				letter-spacing: -0.64px;
			}

			h4 {
				font-size: 20px;
				font-weight: 500;
			}

			.buttons {
				display: flex;
				align-items: center;
				gap: 32px;

				a:not(:has(button)) {
					display: flex;
					align-items: center;
					font-size: 16px;
					font-weight: 700;
					gap: 2px;
					transition: 0.25s;
				}

				a:not(:has(button))::after {
					content: "";
					width: 18px;
					background: url(../arrow.svg);
					height: 19px;
					margin-top: -5px;
					display: flex;
				}

				a:not(:has(button)):hover {
					gap: 4px;
					transition: 0.25s;
				}
			}
		}

		img {
			height: auto;
			max-height: 400px;
			width: auto;
			max-width: -webkit-fill-available;
		}
	}
}

.features.small {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(300px, 30%), 1fr));
	align-content: flex-start;
	justify-items: center;
	align-items: start;
	gap: 50px 40px;
	width: 80%;

	.feature {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;

		.heading {
			display: flex;
			padding: 40px 50px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 10px;
			align-self: stretch;
			border-radius: 20px;
			border: 1px solid light-dark(#bdbdbd, gray);
			background: linear-gradient(
				180deg,
				rgba(219, 219, 219, 0.08) 0%,
				rgba(255, 255, 255, 0) 100%
			);

			:nth-child(1) {
				background: unset;
				background-clip: unset;
				-webkit-background-clip: unset;
				-webkit-text-fill-color: unset;
			}

			h4 {
				text-align: center;
				font-size: 25px;
				font-weight: 500;
				letter-spacing: -0.88px;
			}
		}

		.text {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;

			h5 {
				font-size: 15px;
				font-weight: 800;
			}

			p {
				font-size: 16px;
				font-weight: 500;
				align-self: stretch;
			}

			a {
				display: flex;
				align-items: center;
				font-size: 16px;
				font-weight: 700;
				gap: 2px;
				transition: 0.25s;
			}

			a::after {
				content: "";
				width: 18px;
				background: url(../arrow.svg);
				height: 19px;
				margin-top: -5px;
				display: flex;
			}

			a:hover {
				gap: 4px;
				transition: 0.25s;
			}
		}
	}
}

.documentation {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 70px;
	align-self: stretch;

	.group {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 24px;

		h2 {
			font-size: 64px;
			font-weight: 800;
			letter-spacing: -0.64px;
		}

		.buttons {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 8px;
			min-width: max-content;
		}
	}

	.articles {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(max(300px, 30%), 1fr));
		align-content: flex-start;
		gap: 50px 40px;
		width: 80%;
		justify-items: center;

		.article {
			padding-top: 185px;
			border-radius: 10px;
			background: unset !important;
			background-clip: unset !important;
			-webkit-background-clip: unset !important;
			-webkit-text-fill-color: unset !important;
			background-size: cover !important;
			background-position-y: top !important;
			background-position-x: center !important;
			background-repeat: no-repeat !important;
			width: -webkit-fill-available;
			transition: 0.25s;

			.author {
				display: flex;
				padding: 12px;
				align-items: center;
				gap: 12px;
				align-self: stretch;
				background: var(--background);
				border-radius: 0 0 8px 8px;
				transition: 0.25s;

				img {
					height: 32px;
					width: 32px;
					border-radius: 100%;
				}

				.info {
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					h6 {
						font-size: 14px;
						font-weight: 500;
					}

					p {
						color: rgba(0, 0, 0, 0.7);
						font-size: 14px;
						font-weight: 500;
						background: unset;
						background-clip: unset;
						-webkit-background-clip: unset;
						-webkit-text-fill-color: unset;
					}
				}
			}
		}

		.article:hover {
			box-shadow: 0px 5px 20px 0px light-dark(grey, black);
			transition: 0.5s;
		}
	}
}

.testimonials {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 70px;
	align-self: stretch;

	.group {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 24px;
		width: 80%;

		h2 {
			font-size: 64px;
			font-weight: 800;
			letter-spacing: -0.64px;
			text-align: center;
		}

		h5 {
			text-align: center;
			font-size: 15px;
			font-weight: 500;
			max-width: 700px;
		}
	}

	.reviews {
		display: flex;
		align-items: flex-start;
		gap: 32px;

		.review {
			display: flex;
			min-width: 300px;
			max-width: 350px;
			padding: 40px 35px;
			flex-direction: column;
			align-items: flex-start;
			gap: 30px;
			border-radius: 15px;
			border: 1px solid #3d3d3d;
			background: linear-gradient(
				180deg,
				rgba(219, 219, 219, 0.08) 0%,
				rgba(255, 255, 255, 0) 100%
			);
			overflow: hidden;

			img {
				height: 20px;
			}

			p {
				font-size: 16px;
				font-weight: 500;
				background: unset;
				background-clip: unset;
				-webkit-background-clip: unset;
				-webkit-text-fill-color: unset;
			}

			.stars {
				display: flex;
				align-items: center;
				position: absolute;
				top: 10px;
				right: -20px;
				rotate: 25deg;

				img {
					width: 30px;
					height: 30px;
				}
			}

			.author {
				display: flex;
				align-items: flex-start;
				gap: 16px;
				align-self: stretch;

				img {
					width: 40px;
					height: 40px;
					border-radius: 100%;
				}

				.info {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: 2px;

					h6 {
						font-size: 16px;
						font-weight: 700;
					}

					p {
						font-size: 14px;
						font-weight: 500;
					}
				}
			}
		}

		.review.long {
			width: 500px !important;
			max-width: 500px !important;
		}

		.review.longer {
			width: 1000px !important;
			max-width: 1000px !important;
		}
	}
}

.ratings {
	display: flex;
	height: 40px;
	align-items: center;
	gap: 65px;
	justify-content: center;

	.rating {
		display: flex;
		height: 100%;
		align-items: center;
		gap: 15px;
		background: white;
		padding: 15px 25px;
		border-radius: 10px;
	}

	img {
		height: 100%;
	}

	.stars {
		display: flex;
		align-items: center;

		img {
			width: 32px;
			height: 32px;
		}
	}
}

.cta {
	display: flex;
	padding: 100px 200px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 24px;
	border-radius: 20px;
	background: url(../noise-light.png) transparent 50% / cover no-repeat;
	width: calc(90% - 400px);

	img {
		height: 100px;
	}

	h2 {
		font-size: 64px;
		font-weight: 800;
		letter-spacing: -0.64px;
		text-align: center;
	}

	h5 {
		font-size: 15px;
		font-weight: 500;
		text-align: center;
	}

	.buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
}

.footer {
	display: flex;
	padding: 75px 100px;
	flex-direction: column;
	align-items: center;
	gap: 72px;
	align-self: stretch;

	.invite {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		align-self: stretch;
		gap: 20px;

		.text {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;

			h4 {
				font-size: 32px;
				font-weight: 800;
			}

			h5 {
				font-size: 15px;
				font-weight: 500;
			}
		}

		.email {
			display: flex;
			align-items: center;
			height: 40px;
			gap: 10px;
			width: -webkit-fill-available;
			max-width: 600px;

			input {
				border: 1px solid gray;
				height: -webkit-fill-available;
				width: -webkit-fill-available;
				padding: 8px 0px 8px 16px;
				border-radius: 8px;
				color: light-dark(#111, #ffffff);
				font-size: 16px;
				font-weight: 500;
				line-height: 24px;
				background: transparent;
			}

			button {
				height: 100%;
			}
		}
	}

	.links {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		align-self: stretch;
		gap: 30px;

		.column {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 15px;
			width: 25%;

			.group {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 5px;

				.link {
					font-size: 16px;
					font-weight: 500;
					min-width: max-content;
					transition: 0.25s;
				}

				.link:not(.heading):hover {
					margin-left: 5px;
					transition: 0.25s;
				}

				.link.external {
					position: relative;
				}

				.link.external::after {
					content: "";
					width: 18px;
					height: 24px;
					background-image: url(../external.svg);
					display: block;
					position: absolute;
					top: -1px;
					right: -18px;
				}

				.heading {
					font-size: 14px;
					font-weight: 700;
					letter-spacing: -0.14px;
					margin-bottom: 5px;
				}
			}
		}
	}

	hr {
		height: 1px;
		width: -webkit-fill-available;
		border: none;
		background: var(--Linear-Gradient);
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		align-self: stretch;
		flex-wrap: wrap;
		gap: 10px;

		p {
			font-size: 14px;
			font-weight: 500;
		}

		a {
			transition: 0.25s;
		}

		a:hover {
			opacity: 0.7;
			transition: 0.25s;
		}

		.group {
			display: flex;
			align-items: flex-start;
			gap: 8px;

			.divider {
				margin-top: -1px;
			}

			code {
				font-family: monospace;
				margin: 0 2px;
			}

			.status {
				display: flex;
				align-items: center;
				gap: 10px;
			}

			.status::before {
				content: "";
				background: var(--Linear-Gradient);
				border-radius: 100%;
				height: 7px;
				width: 7px;
				box-shadow: 0 0 0 4px var(--theme2);
				animation: pulse 2s infinite;
			}
		}

		.group.row {
			flex-direction: row !important;
			gap: 2.5px;
		}

		.group.pay-options * {
			height: 16px;
			width: auto;
			border-radius: 10px;
		}
	}
}

.jump {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 90%;

	h4 {
		text-align: center;
		font-size: 30px;
		font-weight: 800;
		letter-spacing: -0.88px;
	}

	.categories {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(max(300px, 45%), 1fr));
		gap: 32px;
		width: -webkit-fill-available;

		.category-card {
			display: flex;
			padding: 40px;
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
			border-radius: 20px;
			background: var(--Linear-Gradient);
			position: relative;
			overflow: hidden;
			color: white;

			h5 {
				font-size: 25px;
				font-weight: 700;
				z-index: 1;
			}

			p {
				font-size: 15px;
				font-weight: 500;
				z-index: 1;
			}

			img {
				width: auto;
				height: 182px;
				transform: rotate(18deg);
				position: absolute;
				right: -65px;
				bottom: -45px;
				opacity: 0.5;
				transition: 0.25s;
			}
		}

		.category-card:hover img {
			opacity: 1;
			right: -55px;
			bottom: -40px;
			transition: 0.25s;
		}

		.category-card.long {
			grid-column-start: 1;
			grid-column-end: 3;
		}
	}
}

.sort {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 40px;
	width: 90%;

	h3 {
		text-align: center;
		font-size: 40px;
		font-weight: 800;
		letter-spacing: -0.88px;

		i {
			margin-right: 10px;
		}
	}

	.question {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20px;
		width: 100%;

		h6 {
			color: black;
			text-align: center;
			font-size: 20px;
			font-weight: 500;
		}

		.options {
			display: grid;
			grid-template-columns: repeat(
				auto-fit,
				minmax(max(300px, 45%), 1fr)
			);
			justify-content: center;
			align-items: center;
			gap: 32px;
			width: 100%;

			.option {
				display: flex;
				padding: 40px;
				flex-direction: column;
				align-items: flex-start;
				gap: 20px;
				border-radius: 20px;
				border: 2px solid #ccc;
				background: white;
				transition: 0.25s;
				cursor: pointer;
				min-width: max-content;
				width: -webkit-fill-available;

				h4 {
					color: black;
					font-size: 17px;
					font-weight: 700;
				}
			}

			.option:hover,
			.option.active {
				background: #ccc;
				transition: 0.25s;
			}

			.option.hidden {
				display: none;
			}
		}

		.options.three {
			grid-template-columns: repeat(
				auto-fit,
				minmax(max(300px, 30%), 1fr)
			);
		}
	}

	.question.hidden {
		display: none;
	}

	.result {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20px;
		width: 100%;

		h5 {
			color: black;
			text-align: center;
			font-size: 20px;
			font-weight: 500;
		}
	}

	.result.hidden {
		display: none;
	}
}

.category {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
	width: 90%;

	h3 {
		text-align: center;
		font-size: 40px;
		font-weight: 800;
		letter-spacing: -0.88px;
	}

	h4 {
		text-align: center;
	}
}

.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(200px, 20%), 1fr));
	gap: 32px;
	justify-content: center;
	align-items: stretch;
	width: 100%;
}

.product {
	display: flex;
	padding: 40px;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	border-radius: 20px;
	border: 2px solid #ccc;
	background: white;
	width: -webkit-fill-available;

	h5 {
		color: black;
		font-size: 20px;
		font-weight: 700;
	}

	h4 {
		color: black;
		font-size: 25px;
		font-weight: 700;
	}

	a:has(button),
	button {
		width: 100%;
	}

	button {
		justify-content: center;
		padding: 15px 20px;
		font-weight: 500;
		min-width: max-content;
	}

	button:not(.filled):not(.basic):not(.square) {
		border-color: black;
		-webkit-text-fill-color: black !important;
	}

	h6 {
		color: black;
		font-size: 15px;
		font-weight: 500;
		margin-top: 2px;
		margin-bottom: -2px;
	}

	strike.red {
		margin-top: -5px;
		text-decoration: strikethrough;
	}

	li {
		color: black;
		font-size: 15px;
		font-weight: 500;
	}
}

.partners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(300px, 30%), 1fr));
	gap: 32px;
	width: 90%;

	.partner {
		display: flex;
		padding: 40px;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		border-radius: 20px;
		background: var(--Linear-Gradient);
		position: relative;
		overflow: hidden;
		color: white;

		h5 {
			font-size: 25px;
			font-weight: 700;
		}

		p {
			font-size: 15px;
			font-weight: 500;
		}

		.offer {
			display: flex;
			padding: 7.5px 15px 10px 15px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 10px;
			position: absolute;
			top: 0px;
			right: 39.667px;
			border-radius: 0px 0px 10px 10px;
			background: white;
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			color: black;
			-webkit-text-fill-color: black;
			font-size: 15px;
			font-weight: 700;
			transition: 0.25s;
		}
	}

	.partner.long {
		grid-column-start: 1;
		grid-column-end: 4;
	}

	.partner.highlighted {
		border-radius: 20px;
		border: 7px solid #00c2ff;
	}

	.partner:hover .offer {
		padding-top: 15px;
		transition: 0.25s;
	}
}

.legal {
	width: 90%;
	display: flex;
	flex-direction: column;
	gap: 20px;

	.block {
		display: flex;
		flex-direction: column;
		gap: 20px;
		border-left: 2px solid var(--theme);
		padding: 10px 0 10px 20px;
		transition: 0.25s;

		h3 {
			margin-top: -10px;
		}

		ol > li {
			margin-top: 10px;
		}

		p,
		ul {
			margin: 10px 0;
		}

		img.staff {
			height: 40px;
			width: 40px;
			border-radius: 100%;
		}
	}

	.block:hover {
		border-left: 5px solid var(--theme);
		transition: 0.25s;
	}
}

.uses {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 90%;

	h4 {
		text-align: center;
		font-size: 30px;
		font-weight: 800;
		letter-spacing: -0.88px;
	}

	.cases {
		max-width: 90vw;

		.case {
			display: flex;
			padding: 40px 50px;
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
			border-radius: 20px;
			background: var(--Linear-Gradient);
			position: relative;
			overflow: hidden;
			color: white;
			height: fit-content;

			h4 {
				font-size: 25px;
				font-weight: 700;
				letter-spacing: 0px;
			}

			h6 {
				font-size: 20px;
				font-weight: 700;
			}

			p {
				font-size: 15px;
				font-weight: 500;
			}
		}
	}

	.splide__arrow svg {
		fill: white;
	}
}

table.compare {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-radius: 20px;
	border: 2px solid light-dark(#ccc, gray);
	width: 90%;

	tbody {
		width: -webkit-fill-available;

		tr {
			display: grid;
			grid-template-columns: repeat(calc(var(--products) + 1), 1fr);
		}

		th:first-of-type {
			min-width: 175px;
		}

		tr:not(:last-of-type) {
			border-bottom: 2px solid light-dark(#ccc, gray);
		}

		tr:first-of-type th:first-of-type {
			height: 150px;
			align-items: flex-start;

			h4 {
				font-size: 20px;
				font-weight: 700;
				text-align: left;
			}

			p {
				font-size: 15px;
				font-weight: 500;
				opacity: 0.75;
				text-align: left;
			}
		}

		tr:first-of-type th {
			justify-content: flex-end;
			align-items: center;
		}

		tr:first-of-type th:not(:first-of-type) {
			border-left: 2px solid light-dark(#ccc, gray);
		}

		th {
			display: flex;
			padding: 35px 32px;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			gap: 12px;
			font-size: 17px;
			font-weight: 500;
			text-align: left;

			h3 {
				font-size: 40px;
				font-weight: 700;
			}

			a {
				width: -webkit-fill-available;
			}

			button {
				padding: 15px 20px !important;
				width: -webkit-fill-available;
				justify-content: center;
			}
		}

		td {
			border-left: 2px solid light-dark(#ccc, gray);
		}

		td {
			display: flex;
			height: 80px;
			padding: 20px 0px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 4px;
			font-size: 15px;
			font-weight: 500;
		}
	}
}

.meta {
	display: inline-flex;
	padding: 8px 12px;
	align-items: center;
	border-radius: 8px;
	background: #edf0f8;

	h6,
	a {
		color: #a3a9c2;
		font-size: 14px !important;
		font-weight: 400 !important;
		line-height: 16px;
		letter-spacing: 0;
	}

	img {
		height: 16px;
		width: 16px;
		zoom: 1.2;
		margin-right: 3px;
		margin-bottom: -1px;
	}
}

.productHero {
	display: flex;
	gap: 100px;
	width: 90%;
	padding-top: 50px;

	.images {
		width: -webkit-fill-available;
		display: flex;
		flex-direction: column;
		gap: 50px;
		max-width: 600px;

		#images {
			.image {
				min-height: 500px;
				border-radius: 17px;

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

			.image.placeholder {
				background: linear-gradient(45deg, #8edcf8, #a39fff);
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					height: 100px;
					width: auto;
					object-fit: unset;
				}
			}
		}

		#thumbnails {
			.splide__list {
				justify-content: center;
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 8px;
			}

			.image {
				opacity: 0.6;
				border-radius: 10px;
				border: 2px solid gray;
			}

			.image.is-active {
				opacity: 1;
				border-color: var(--theme);
			}

			.image.placeholder {
				background: transparent;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					zoom: 0.5;
					height: 100px;
					width: auto;
					object-fit: unset;
				}
			}
		}
	}

	.info {
		width: 50%;
		display: flex;
		flex-direction: column;
		gap: 20px;

		div:not(.meta) {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		h1 {
			font-size: 25px;
			font-weight: 700;
		}

		h6 {
			opacity: 0.5;
			font-size: 15px;
			font-weight: 500;
		}

		hr {
			width: -webkit-fill-available;
			height: 1px;
			border: none;
			background: var(--Linear-Gradient);
			opacity: 0.5;
		}

		h4 {
			font-size: 30px;
			font-weight: 700;
		}

		strike {
			opacity: 0.5;
			font-size: 15px;
			font-weight: 400;
		}

		.select {
			border: 2px solid white;
			height: 10px;
			width: 10px;
			border-radius: 100%;
			padding: 2px;
			background-color: transparent;
			transition: 0.25s;
			display: flex !important;
		}

		.active .select {
			background-color: white;
			transition: 0.25s;
		}

		input,
		textarea,
		select {
			border: 2px solid gray;
			background: var(--background);
			padding: 10px;
			border-radius: 10px;
		}
	}
}

.loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--background);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	z-index: -1;
	transition: 0.5s;

	img {
		height: min(45%, 150px);
	}
}

.loader.active {
	opacity: 1;
	z-index: 10000;
	transition: 0.5s;
}

body:has(.loader.active) {
	overflow: hidden;
	pointer-events: none;
}

body:has(.modal.show) {
	overflow: hidden;
}

body:has(.cta) .footer {
	padding-top: 0;
}

.details {
	width: 90%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;

	> div {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 7px;

		h4 {
			font-size: 20px;
		}

		ul {
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 5px;

			li {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 5px;
			}
		}
	}
}

.alert {
	position: fixed;
	bottom: 0;
	width: calc(100% - 40px);
	padding: 12.5px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: var(--theme);
	z-index: 1000;
}

.alert.flat {
	position: relative !important;
	padding: 20px 25px !important;
	justify-content: space-between !important;
	align-content: center;
	gap: 10px;
	width: calc(90% - 50px);
	flex-wrap: wrap;
	border-left: 4px solid var(--theme);
	background: light-dark(#d0d5ff, #1e1e1e);
	color: light-dark(#111, #ffffff);
	z-index: unset;

	.info {
		display: flex;
		flex-direction: column;
		gap: 2.5px;

		h3 {
			font-size: 1.17em;
		}

		p {
			font-size: unset;
		}
	}

	* {
		line-height: unset !important;
	}
}

.alert.flat.full {
	width: -webkit-fill-available;
}

.alert.flat.success {
	border-left-color: #00ff26;
	background: #d0ffd7;
}

.alert.flat.error {
	border-left-color: #f00;
	background: #ffd0d0;
}

.alert.flat.success,
.alert.flat.error {
	.info * {
		-webkit-text-fill-color: black !important;
	}
}

.alert.flat.nop p {
	display: none;
}

.counts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(225px, 20%), 1fr));
	gap: 10px;
	width: 90%;

	.count {
		display: flex;
		padding: 20px 25px;
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		border-radius: 5px;
		background: light-dark(#ffffff, #111);
		box-shadow: 0px 0px 2px 0px
				light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25)),
			0px 3px 2px 0px
				light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
		position: relative;
		overflow: hidden;

		h5 {
			font-size: 27.5px;
			font-weight: 700;
		}

		h4 {
			font-size: 17.5px;
			font-weight: 700;
		}

		.stat {
			display: flex;
			height: 16px;
			align-items: center;
			gap: 5px;

			svg {
				rotate: 90deg;
			}

			svg,
			svg * {
				fill: light-dark(var(--theme), white);
			}

			h6 {
				font-size: 13px;
				font-weight: 500;
			}

			p {
				font-size: 13px;
				font-weight: 500;
				opacity: 0.75;
			}
		}

		.stat.up {
			svg {
				rotate: 0deg;
			}
			svg,
			svg * {
				fill: #039855;
			}

			h6 {
				-webkit-text-fill-color: #039855 !important;
			}
		}

		.stat.down {
			svg {
				rotate: 180deg;
			}

			svg,
			svg * {
				fill: #d92d20;
			}

			h6 {
				-webkit-text-fill-color: #d92d20 !important;
			}
		}

		div:has(canvas) {
			position: absolute;
			height: 34px;
			width: 68px;
			right: 17.5px;
			bottom: 20px;
		}
	}

	.count.old {
		display: flex;
		padding: 40px;
		flex-direction: column;
		align-items: flex-start;
		gap: 17.5px;
		border: 2px solid light-dark(var(--theme), #ffffff);
		border-radius: 20px;
		position: relative;
		overflow: hidden;

		h5 {
			font-size: 35px;
			font-weight: 700;
			line-height: 30px;
		}

		h4 {
			font-size: 20px;
			font-weight: 700;
		}
	}
}

.table {
	color: light-dark(#111, #ffffff);
	display: flex;
	padding: 10px 5px;
	flex-direction: column;
	align-items: flex-start;
	gap: 17.5px;
	width: 90%;
	overflow: scroll;

	h4 {
		font-size: 20px;
		font-weight: 600;
		line-height: 16px;
		display: flex;
		align-items: center;
		gap: 10px;
		align-self: stretch;

		.count {
			min-width: 11px;
			padding: 10px;
			border-radius: 5px;
			background: #d0d5ff !important;
			text-align: center;
			font-size: 15px;
			font-weight: 600;
			line-height: 12.5px;
		}
	}

	table {
		width: -webkit-fill-available;
		border-collapse: collapse;

		thead,
		tbody {
			width: -webkit-fill-available;
		}

		tbody tr {
			cursor: pointer;
			border-radius: 7.5px;
		}

		tbody tr:hover {
			background-color: light-dark(#1111110a, #ffffff0a);
		}

		tr {
			display: flex;
		}

		.top {
			border-radius: 7.5px;
			background: var(--Linear-Gradient);
			margin-bottom: 5px;
		}

		th,
		td {
			display: flex;
			padding: 16px;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			gap: 12px;
			font-size: 17px;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		th.small,
		td.small {
			min-width: 40px;
		}

		th.medium,
		td.medium {
			min-width: 150px;
		}

		th:not(.medium):not(.small),
		td:not(.medium):not(.small) {
			width: -webkit-fill-available;
			min-width: 250px;
		}
	}
}

.orderSection {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 75%;

	img {
		height: 70px;
	}

	> h2 {
		font-size: 32px;
		font-weight: 700;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;

		.count {
			min-width: 11px;
			padding: 10px;
			border-radius: 5px;
			background: #d0d5ff !important;
			text-align: center;
			font-size: 15px;
			font-weight: 600;
			line-height: 12.5px;
		}

		.count.fail {
			background: #ffd0d0 !important;
		}
	}

	> h3 {
		font-size: 24px;
		font-weight: 700;
		line-height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;

		.count {
			min-width: 11px;
			padding: 10px;
			border-radius: 5px;
			background: #d0d5ff !important;
			text-align: center;
			font-size: 15px;
			font-weight: 600;
			line-height: 12.5px;
		}

		.count.fail {
			background: #ffd0d0 !important;
		}
	}

	> h5 {
		font-size: 20px;
		font-weight: 700;
	}

	.detailGroup {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		align-self: stretch;

		.detail {
			display: flex;
			align-items: flex-start;
			gap: 30px;
			align-self: stretch;

			p {
				font-size: 16px;
				font-weight: 700;
				width: -webkit-fill-available;
			}

			p:first-child,
			p.medium {
				width: 110px;
			}

			p.large {
				width: 300px;
			}

			.taskCheckbox {
				display: flex;
				padding: 6px;
				justify-content: center;
				align-items: center;
				gap: 10px;
				border-radius: 8px;
				background: var(--Linear-Gradient);
				color: #ffffff;
				min-width: max-content;
			}
		}
	}

	.buttons {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		min-width: max-content;
	}
}

hr.order {
	height: 1px;
	width: 75%;
	border: none;
	background: var(--Linear-Gradient);
}

.field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12.5px;
	align-self: stretch;

	label {
		font-size: 20px;
		font-weight: 700;
	}

	p {
		font-size: 15px;
		font-weight: 600;
		opacity: 0.5;
	}

	input,
	textarea,
	select {
		border: 2px solid light-dark(var(--theme), #ffffff);
		background: var(--background);
		padding: 10px 12.5px;
		border-radius: 10px;
	}

	input.success,
	textarea.success,
	select.success {
		border-color: #00d8fb;
	}

	input.error,
	textarea.error,
	select.error {
		border-color: #f00;
	}

	.checkbox {
		display: flex !important;
		padding: 10px 12px;
		align-items: center;
		gap: 10px;
		border-radius: 7px;
		border: 1px solid light-dark(var(--theme), #ffffff);
		color: light-dark(#111, #ffffff);
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
	}

	.checkbox.checked {
		background: var(--Linear-Gradient);
		color: #ffffff;
	}

	.hidden {
		display: none;
	}
}

.newTask {
	border: 1px solid light-dark(#111, #ffffff);
	border-radius: 8px;
	padding: 15px 12.5px;
	line-height: 12px;
	width: -webkit-fill-available;
	display: none;
}

.newTask.show {
	display: flex;
}

@media screen and (max-width: 1600px) {
	.feature .info h3,
	.testimonials .group h2,
	.documentation .group h2,
	.cta h2 {
		font-size: 35px !important;
	}

	.hero h1 {
		font-size: 40px;
	}

	.features.small {
		width: 90%;
		gap: 40px 30px;

		.feature {
			width: -webkit-fill-available;
		}
	}

	.articles {
		width: 90% !important;
	}

	.ratings {
		height: 30px;
	}

	.footer .invite .email {
		max-width: 500px !important;
	}

	.products {
		grid-template-columns: repeat(auto-fit, minmax(max(300px, 30%), 1fr));
	}
}

@media screen and (max-width: 1100px) {
	body,
	main {
		gap: 50px !important;
	}

	body {
		min-height: calc(100vh - 20px);
	}

	main.dashboard {
		flex-direction: column;
		gap: 30px !important;
		padding-top: 65px !important;
	}

	.sidebar {
		border: none;
		padding: 0;
		width: -webkit-fill-available;

		.links {
			display: grid;
			grid-template-columns: repeat(
				auto-fit,
				minmax(max(150px, 20%), 1fr)
			);
		}
	}

	.tab .buttons {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(max(150px, 20%), 1fr));
	}

	.desktop {
		display: none !important;
	}

	.mobile {
		display: flex !important;
	}

	.header {
		gap: 15px;
		padding: 15px 30px;
		margin-bottom: -50px !important;
		flex-wrap: nowrap;

		> * {
			width: unset !important;
			display: flex;
		}

		img {
			height: auto !important;
			width: auto !important;
			max-width: 100%;
		}
	}

	.hero h4,
	.feature .info h3,
	.feature .info h4,
	.testimonials .group h2 {
		text-align: center;
	}

	.feature .info h3,
	.testimonials .group h2,
	.documentation .group h2,
	.cta h2 {
		font-size: 30px !important;
	}

	.hero {
		padding: 25px;
		width: calc(100% - 50px);
		min-height: calc(100vh - 50px) !important;
		border: none;
		border-radius: 0;
		gap: 20px;
		align-items: flex-start;

		.pill {
			gap: 5px;
			padding: 10px 15px;

			* {
				font-size: 10px !important;
			}
		}

		h1 {
			font-size: 22px;
			font-weight: 700;
			text-align: left;
			leading-trim: both;
			text-edge: cap;
		}

		h4 {
			font-size: 15px;
			text-align: left;
			leading-trim: both;
			text-edge: cap;
		}

		.buttons {
			display: flex;
			flex-direction: column;

			* {
				align-content: flex-start !important;
			}
		}

		.buttons,
		.buttons a,
		.buttons a button {
			width: -webkit-fill-available;
			display: flex;
			justify-content: center;
		}

		#brands_mob img {
			width: 100% !important;
			height: auto !important;
		}
	}

	.pageInfo.compact {
		align-items: center;
		gap: 15px;

		.inline {
			flex-direction: column;
			gap: 5px;

			h1 {
				font-size: 40px;
				text-align: center;
			}
		}

		h4 {
			font-size: 17.5px;
			text-align: center;
		}
	}

	.pageInfo h1 {
		font-size: 40px;
	}

	.features {
		gap: 50px;

		.feature {
			flex-direction: column-reverse;
			gap: 30px !important;

			img {
				height: 250px !important;
				max-height: unset !important;
			}

			.info {
				align-items: center !important;
			}
		}
	}

	.features.small {
		gap: 50px !important;

		.feature {
			width: 90% !important;
		}
	}

	.rating {
		flex-direction: column;
	}

	.review {
		max-width: unset !important;
	}

	.review.long {
		display: none !important;
	}

	.cta {
		padding: 40px 20px !important;
		width: calc(100% - 40px);
		border-radius: 0;
	}

	.footer {
		padding: 0 40px 40px 40px;
		gap: 100px;

		.invite {
			flex-direction: column;
			align-items: flex-start;

			.email {
				flex-direction: column;
				align-items: flex-start;
				height: unset;
				max-height: 40px;
			}
		}

		.links {
			flex-direction: column;
		}

		.bottom {
			flex-direction: column;

			.group {
				flex-direction: column;

				.divider {
					display: none;
				}
			}
		}
	}

	.jump .categories {
		grid-template-columns: 1fr;
	}

	.case {
		align-items: center !important;

		* {
			text-align: center;
		}
	}

	.option {
		padding: 40px 0 !important;
		align-items: center !important;
	}

	.options.three {
		grid-template-columns: repeat(auto-fit, minmax(max(300px, 45%), 1fr));
	}

	.products {
		grid-template-columns: repeat(auto-fit, minmax(max(300px, 45%), 1fr));
	}

	table.compare {
		display: none !important;
	}

	.productHero {
		flex-direction: column;
		gap: 30px;

		> * {
			width: -webkit-fill-available !important;
			max-width: unset !important;
		}

		.images {
			gap: 20px;
		}

		#images .image {
			min-height: 200px !important;
		}

		.meta {
			margin-bottom: 10px;

			h6:last-of-type {
				display: none;
			}
		}
	}

	.alert {
		flex-direction: column;
		align-items: flex-start;
	}

	.alert.flat {
		gap: 15px !important;
		flex-wrap: unset;
	}

	.orderSection,
	hr.order {
		width: 85%;
	}

	.orderSection h2 {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 5px;
	}

	.orderSection .buttons {
		flex-direction: column;

		* {
			align-content: flex-start !important;
		}
	}

	.orderSection .buttons,
	.orderSection .buttons a,
	.orderSection .buttons a button {
		width: -webkit-fill-available;
		display: flex;
		justify-content: center;
	}
}