:root {
	/* Colors */
	--dark-green: #00633f;
	--light-green: #199e6b;
	--dark-grey: #1f2a2c;
	--light-grey: #40595b;
	--header-color: #1a1a1a;

	/* Sizing */
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--container: 1200px;
	--container-narrow: 880px;

	--primary: light-dark(var(--dark-green), var(--light-green));
	--secondary: light-dark(var(--dark-grey), var(--dark-green));
	--background: light-dark(white, var(--dark-grey));
	--text: light-dark(black, white);
	--subtext: light-dark(var(--light-grey), var(--tint-green-strong));

	--tint-green: color-mix(in srgb, var(--primary) 5%, white);
	--tint-green-strong: color-mix(in srgb, var(--primary) 9%, white);
	--hairline: color-mix(in srgb, var(--secondary) 14%, white);

	--card-shadow: 0 1px 2px rgba(31, 42, 44, 0.06), 0 12px 28px -12px rgba(31, 42, 44, 0.18);
	--card-shadow-hover: 0 2px 4px rgba(31, 42, 44, 0.08), 0 20px 40px -14px rgba(31, 42, 44, 0.26);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.12;
	color: var(--header-color);
	letter-spacing: -0.01em;
}

img {
	max-width: 100%;
	display: block;
	height: auto;
}

a {
	color: var(--primary);
	text-decoration: none;
}

/* Prevent SVG layout shift */
svg {
	width: 28px;
	height: 28px;
}

section {
	background-color: var(--background);
	padding: var(--space-2xl-3xl) var(--space-s);

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

	&.dark {
		color-scheme: dark;
		background-color: var(--dark-grey);

		& .topper {
			color: var(--primary);
		}

		& h2, & h3 {
			color: var(--text);
		}
	}
}

nav-bar:not(:defined) {
	display: block;
	height: var(--space-2xl);
}

:focus-visible {
	outline: 3px solid var(--light-green);
	outline-offset: 3px;
	border-radius: 4px;
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-s);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.section-head {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--space-l-xl);

	& h2 {
		font-size: var(--step-5);
		font-weight: 600;
	}

	& .lead {
		margin-top: var(--space-s);
		font-size: var(--step-0);
		color: var(--light-grey);
	}
}

.dark .section-head .lead {
	color: color-mix(in srgb, white 78%, var(--secondary));
}

.topper {
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: var(--step-1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: var(--space-xs);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-height: 48px;
	padding: var(--space-2xs-xs) var(--space-m);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: var(--step-0);
	line-height: 1;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition:
		transform 0.15s var(--ease),
		background-color 0.2s var(--ease),
		color 0.2s var(--ease),
		box-shadow 0.2s var(--ease),
		border-color 0.2s var(--ease);
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary {
	background-color: var(--primary);
	color: white;
	box-shadow: 0 8px 20px -8px rgba(0, 99, 63, 0.55);
}

.btn-primary:hover {
	background-color: var(--light-green);
	box-shadow: 0 10px 26px -8px rgba(25, 158, 107, 0.6);
}

.btn-secondary {
	background-color: transparent;
	color: var(--primary);
	border-color: var(--primary);
}

.btn-secondary:hover {
	background-color: var(--primary);
	color: white;
}

.on-dark .btn-secondary,
.dark .btn-secondary {
	color: white;
	border-color: rgba(255, 255, 255, 0.6);
}

.on-dark .btn-secondary:hover,
.dark .btn-secondary:hover {
	background-color: white;
	color: var(--primary);
	border-color: white;
}

.btn-block {
	width: 100%;
}

.brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.brand img {
	height: 38px;
	width: auto;
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-m);
}

/* Used for cards and steps components */
.steps-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s-m);
	max-width: 1200px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.steps-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

.cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s-m);
}

@media (min-width: 640px) {
	.cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.cards-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

card-component li {
	font-size: var(--step--1);
	color: var(--secondary);

	&::marker {
		color: var(--light-green);
	}
}

.faq-grid {
	max-width: var(--container-narrow);
	margin-inline: auto;
	display: grid;
	gap: var(--space-xs);
}

.pricing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s-m);
	align-items: start;

	.full-width {
		grid-column: 1 / -1;
	}
}

pricing-component li {
	font-size: var(--step--1);
	color: var(--secondary);
}

pricing-component ul li::marker {
	color: var(--light-green);
}

@media (min-width: 640px) {
	.pricing-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.subtext {
	text-align: center;
	margin-top: var(--space-m);
	color: var(--light-grey);
	font-size: var(--step--1);
}

.detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m-l);
	align-items: center;
}

.detail + .detail {
	margin-top: var(--space-xl-2xl);
}

.detail .detail-media {
	border-radius: var(--radius-lg);
	border: 1px solid var(--hairline);
	background-color: var(--tint-green);
	box-shadow: var(--card-shadow);
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-m);
	overflow: hidden;
}

.detail .detail-media svg {
	width: clamp(96px, 22vw, 160px);
	height: auto;
	color: var(--primary);
}

.detail h2 {
	font-size: var(--step-3);
	font-weight: 600;
}

.detail .topper {
	margin-bottom: var(--space-2xs-xs);
}

.detail p {
	margin-top: var(--space-xs);
	color: var(--light-grey);
}

.detail .checks {
	margin-top: var(--space-s-m);
	padding-left: var(--space-m);
	list-style: disc;
	display: grid;
	gap: var(--space-3xs-2xs);
}

.detail .checks li {
	color: var(--secondary);
	font-size: var(--step--1);
}

.detail .checks li::marker {
	color: var(--light-green);
}

.detail .card-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	margin-top: var(--space-m);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: var(--primary);
}

.detail .card-link svg {
	width: 16px;
	height: 16px;
	transition: transform 0.2s var(--ease);
}

.detail .card-link:hover svg {
	transform: translateX(4px);
}

@media (min-width: 960px) {
	.detail {
		grid-template-columns: 1fr 1fr;
	}
	.detail--reverse .detail-media {
		order: -1;
	}
}

h1 .accent {
	color: var(--primary);
	white-space: nowrap;
}

.checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs-2xs);
}

.checklist li {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--step--1);
	color: black;
}

.checklist li::before {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23199e6b' stroke-width='2.5'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") no-repeat center / contain;
}

nav-bar {
	display: block;
	transition: opacity 0.3s ease-in-out;

	&:not(:defined) {
		opacity: 0;
		/* Scale: 65px at 375px viewport -> 90px at 1440px viewport */
		min-height: clamp(4.0625rem, 3.4812rem + 2.4803vw, 5.625rem);
	}
}

page-hero {
	display: block;
	transition: opacity 0.3s ease-in-out;

	&:not(:defined) {
		opacity: 0;
		min-height: 400px;
	}
}

.page-hero {
	display: grid;
	grid-template-areas: "hero";
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	width: 100%;
	border-bottom: 1px solid var(--hairline);

	&:has(img) {
		color-scheme: dark;

		& > div {
			border-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)) fill 0;
		}
	}

	& picture {
		grid-area: hero;
	}

	& img {
		width: 100%;
		height: 0;
		min-height: 100%;
		object-fit: cover;
		object-position: center;
	}

	& > div {
		grid-area: hero;

		& .container {
			padding-block: var(--space-l-xl);
		}
	}

	.header {
		font-size: var(--step-5);
		font-weight: 600;
		letter-spacing: -0.02em;
		max-width: 18ch;
		color: var(--text);
	}

	.subheader {
		margin-top: var(--space-s);
		font-size: var(--step-0);
		color: var(--text);
		max-width: 60ch;
	}

	.cta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xs);
		margin-top: var(--space-s-m);
	}
}