body {
	/* --_bg-color: var(--bg-color); */
	/* --bg-color: rgb(26,26,27); */
	/* --bg-color: rgb(23, 23, 23); */
	/* --bg-color: rgb(18, 21, 30); */
  /* background: var(--clr-background-800); */
  /* background: var(--_bg-color); */
  /* color: var(--clr-text-200); */
}

/* background-color: var(--bg-color); */

.global-header :where(a, button) {

		/* color: var(--clr-text-200); */
	}

.global-header .global-menu-trigger-button:hover, .global-header .global-menu-trigger-button:focus {
		background-color: var(--bg-color);
	}

.global-footer {
	/* background-color: var(--color-background-50); */
}

.landing-hero .button-group {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: .25rem;
	}

.landing-hero .button-group button {
			--background-color: var(--clr-background-600);
			cursor: pointer;
		}

.landing-hero .cta-button {
		/* --background-color: var(--clr-primary-500); */
		--radius: .25rem;
		--padding-block: .5rem;
	}

.video-pane {
	position: relative;
}

.video-pane .content {
		position: relative;
		z-index: 0;
		display: grid;
		justify-items: center;
		grid-gap: 2rem;
		gap: 2rem;
		text-align: center;
		padding-block-start: 4rem;
		padding-block-end: 8rem;
	}

.video-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.video-bg video {
		position: absolute;
		top:0;
		left:50%;
		transform: translate(-50%, -11%);
		/* width: 100%; */
		/* height: 100%; */
		/* object-fit: cover; */
		/* object-position: 50% 25%; */
		mix-blend-mode: screen;
		max-width: revert;
	}

.video-overlay {
	position: absolute;
	inset: 0;
	/* background-color: rgba(45 45 57 / 0.75); */
	background-color: rgba(18, 21, 30, 0.75);
}

/* .video-intro-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--clr-text-200);
	display: flex;
	align-items: center;
	gap: 1rem;
	svg {
		fill: currentColor;
		width: 1.5rem;
	}
} */

.video-intro-btn2 {
	color: var(--clr-text-200);
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	gap: 1rem;
	align-items: center;
}

.video-intro-btn2 svg {
		box-sizing: content-box;
		border: 1px solid var(--clr-text-100);
		border-radius: 4px;
		padding: .15rem .5rem;
		background: var(--clr-text-100);
	}

/* ######################################################## */

/* SLIDER */

/* ######################################################## */

.slider-section {
	font-size: var(--font-size-h3);
}

@media (min-width: 75em) {

.slider-section .grid-wrapper {
			display: grid;
			grid-template-columns: minmax(10rem, 34.375rem) 1fr;
			grid-gap: 3rem;
			gap: 3rem;
	}
		}

.slider-section .card {
		align-content: center;
		border: none;
	}

.slider-section .button-container {
		text-align: end;
	}

.slider-section .button-container button {
			background: none;
			color: var(--clr-text-200);
			border: 1px solid var(--clr-text-200);
		}

.slider-section .blaze-track > div {
		align-content: center;
	}

/*
.slider {
	figure {
		padding: 1rem;
	}
}
.splide {
	visibility: visible;
}
.splide__list {
	display: flex;
	gap: 0;
	list-style: none;
}
.splide__slide {
	display: flex;
	flex-shrink: 0;
	figure {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: white;
		border: 1px solid var(--clr-gray-600);
		border-style: inset;
		height: 27.1875rem;
	}
	picture,
	figcaption {
		margin-block-start: auto;
	}
}
.splide__pagination {
	justify-content: start;
	padding-block-start: .25rem;
}
.splide__pagination__page {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background-color: var(--clr-gray-600);
	margin: 0 .1rem;
}
.splide__pagination__page.is-active {
	background-color: var(--clr-reddish);
}
.splide__arrow {
	position: absolute;
	top: 50%;
	z-index: 100;
	cursor: pointer;
	translate: 0 -50%;
	svg {
		fill: var(--clr-grayish-blue);
	}
}
.splide__arrow--prev {
	left: -2.5rem;
	transform: scale(-1);
}
.splide__arrow--next {
	right: -2.5rem;
}
*/

/* ######################################################## */

/* BENEFITS */

/* ######################################################## */

.ace-benefits {
	--gap: 3rem;
}

.ace-benefits .card {
		padding-block: 2rem;
		padding-inline: clamp(1rem, 4vw + .1rem, 4rem);
		position: relative;
		display: grid;
		container-type: inline-size;
	}

.ace-benefits .card > * {
			z-index: 10;
		}

.ace-benefits .card::after {
			content: '';
			position: absolute;
			inset: 0;
			/* background: var(--clr-background-700); */
			background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cg fill="%239C92AC" fill-opacity="0.08"%3E%3Cpath fill-rule="evenodd" d="M0 0h4v4H0V0zm4 4h4v4H4V4z"/%3E%3C/g%3E%3C/svg%3E'),
			linear-gradient(to left, transparent, transparent);
			background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cg fill="%239C92AC" fill-opacity="0.08"%3E%3Cpath fill-rule="evenodd" d="M0 0h4v4H0V0zm4 4h4v4H4V4z"/%3E%3C/g%3E%3C/svg%3E'),
			linear-gradient(to left, var(--_accent, transparent), transparent);
			/* background-image: var(--_bg-img); */
			-webkit-mask-image: var(--_bg-img);
			        mask-image: var(--_bg-img);
			-webkit-mask-size: 100% 100%, var(--_svg-size);
			        mask-size: 100% 100%, var(--_svg-size);
			-webkit-mask-repeat: no-repeat;
			        mask-repeat: no-repeat;
			-webkit-mask-position: center, var(--_svg-position);
			        mask-position: center, var(--_svg-position);
			-webkit-mask-composite: source-out;
			        mask-composite: subtract;
			z-index: 0;
		}

@container (width < 900px) {
			.ace-benefits .card::after {
				-webkit-mask-image: none;
				        mask-image: none;
			}
		}

.ace-benefits ul {
		--max-inline-size: 70ch;
		--gap: .25rem 2.5rem;
		list-style-position: inside;
	}

@container (width > 680px) {

.ace-benefits ul {
			--cols: auto auto;
	}
		}

.summary button {
		display: none;
		background: none;
		border: none;
		color: var(--clr-text-200);
		cursor: pointer;
		align-items: center;
		gap: .5rem;
		margin-block-start: 1rem;
	}

.js .summary button {
		display: flex;
	}

.ace-lineup {
	--max-inline-size: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 2.5rem;
	list-style: none;
	font-size: clamp(1.2rem, 3vw + .1rem, 2.5rem);
	margin-block-start: -1.2rem;
}

/* ######################################################## */

/* Flex 4 */

/* ######################################################## */

.flex-4 {
	background-color: #000;
	padding-block: 3rem;
	/* margin-block: 4rem 3rem; */
}

.flex-4 .content {
		display: grid;
		grid-gap: 2rem;
		gap: 2rem;
	}

@media (min-width: 900px) {

.flex-4 .content {
			grid-template-columns: 1fr 1fr;
	}
		}

.flex-4 .content > img {
			align-self: end;
		}

.flex-4 .content p {
			font-size: var(--fs-100);
			color: var(--clr-text-300);
		}

.flex-4 .content p:has(a) {
			font-size: var(--fs-200);
			margin-block-start: .75rem;
		}

@media (min-width: 900px) {

.flex-4 .content .grid-position {
				position: relative;
		}
				.flex-4 .content .grid-position img {
					position: absolute;
					left: 20%;
					bottom: 0;
				}
			}

.flex-4-waves {
	height: 15vh;
	max-height: 40px;
	min-height: 20px;
	position: relative;
	width: 100%;
	margin-block-start: 3rem;
}

.flex-4-waves.bottom {
		margin:0;
		margin-block-end: 3rem;
	}

@media (prefers-reduced-motion: no-preference) {
	.flex-4-parallax > use {
		/* animation: move-forever 55s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; */
	}
	.flex-4-parallax > use:nth-child(1) {
		animation-delay: -2s;
		animation-duration: 15s;
	}
	.flex-4-parallax > use:nth-child(2) {
		animation-delay: -3s;
		animation-duration: 16s;
	}
	.flex-4-parallax > use:nth-child(3) {
		animation-delay: -4s;
		animation-duration: 21s;
	}
	.flex-4-parallax > use:nth-child(4) {
		animation-delay: -5s;
		animation-duration: 27s;
	}
	@keyframes flex-4-move-forever {
		0% {
			transform: translate3d(-90px, 0, 0);
		}
		100% {
			transform: translate3d(85px, 0, 0);
		}
	}
}

/* ######################################################## */

/* TABLE MODAL */

/* ######################################################## */

.modal {
	border: none;
	max-width: 100rem;
	overscroll-behavior: contain;
}

.compare-modal,
.video-modal {
	transform: translateY(3%);
}

.compare-modal[open], .video-modal[open] {
		animation:
		slide-up 500ms forwards,
		fade-in 500ms forwards;
	}

.compare-modal {
	padding: 0;
	margin-block: 0;
}

.compare-modal td p {
		max-width: 30ch;
	}

.compare-modal::backdrop {
		background: rgba(255, 255, 255, 0.75);
	}

.video-modal {
	padding: 0;
	width: 100%;
	max-inline-size: min(90vw, 62.5rem);
}

.video-modal figure {
		padding: 1rem;
		aspect-ratio: 16/9;
	}

.video-modal iframe {
		width: 100%;
		height: 100%;
	}

.video-modal::backdrop {
		background:hsla(0, 0%, 0%, 0.9);
	}

@media (min-width: 51.25em) {

.section:has(.checkmark-list) {
		grid-template-columns: 1fr 2fr;
		-moz-column-gap: 2rem;
		     column-gap: 2rem;
}
	}

@media (min-width: 88.5em) {

.section:has(.checkmark-list) {
		padding-block: 9rem;
}
	}

@media (max-width: 51.249em){

.section:has(.checkmark-list) > img {
			grid-row: 1;
	}
		}

.checkmark-list {
	display: grid;
	justify-content: center;
	grid-gap: 2rem;
	gap: 2rem;
}

.checkmark-list li {
		display: flex;
		align-items: center;
	}

@media (min-width: 88.5em) {

.checkmark-list li {
			font-size: 2rem;
	}
		}

.checkmark-list svg {
		width: 3.125rem;
		height: 2.125rem;
		color: green;
	}

@supports not selector(:has(*)) {
		@media (min-width: 51.25em) {
	.checkmark-list {
			grid-template-columns: repeat(2,auto);
	}
			.checkmark-list + img {
				max-width: 50%;
				margin-inline: auto;
			}
		}
}

.feature-list {
	--sticky-th-top: 0;
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	color: #323232;
	table-layout: fixed;
}

.feature-list caption,
	 .feature-list th,
	 .feature-list td {
		padding: .75rem;
	 }

.feature-list caption,
	 .feature-list th {
		text-align: left;
	 }

.feature-list th[data-functional] {
		width: 30%;
	 }

.feature-list caption,
	 .feature-list .table-caption {
		background-color: hsl(0, 0%, 0%);
		font-size: 1.5rem;
		font-weight: 700;
		text-transform: uppercase;
	 }

.feature-list .table-caption {
		color: white;
		padding: .75rem;
	 }

.feature-list th {
		/* background-color: #191919; */
		background-color: #f1f2f3;
	 	position: sticky;
		top: var(--sticky-th-top);
		vertical-align: top;
	 }

.feature-list th .grid {
    display: grid;
		align-items:center;
		justify-items:center;
		place-items:center;
	 }

.feature-list th:has(.grid) {
    vertical-align: middle;
   }

.feature-list tr:nth-of-type(2n) {
		/* background-color: hsl(0 0% 0% / 0.1); */
		background-color: #f1f4f7;
	 }

.feature-list tr.highlight {
		background-color: hsl(209, 78%, 95%);
	 }

.feature-list td {
		font-size: clamp(1rem, 2.5vw + .1rem, 1.2rem);
		padding: 1.75rem;
	 }

.feature-list td[data-cell] {
		text-align: center;
	 }

.feature-list td.alert {
		font-weight: 700;
		background-color: #FBC02D;
		color: black;
	 }

@media (max-width: 799px) {
		.feature-list th:not([data-functional]) {
		   display: none;
		}
		.feature-list #close-modal {
		   position: static;
		   transform: none;
		}
		.feature-list td {
		   display: grid;
		   grid-template-columns: 18ch auto;
		   /* OR */
		   display: block;
		   padding: .5rem 1rem;
		}
		.feature-list td[data-cell] {
		   text-align: start;
		}
		.feature-list td:first-child {
		   padding-top: 1rem;
		   font-weight: 700;
		}
		.feature-list td:last-child {
		   padding-bottom: 1rem;
		}
		.feature-list td[data-cell]::before {
		   content: attr(data-cell) ": ";
		   text-transform: capitalize;
		}
		.feature-list td p {
		   max-width: none;
		   max-width: initial;
		}
}