@property --primaryLD {
	syntax: '<color>';
	inherits: true;
	initial-value: #00633f;
}

@property --secondaryLD {
	syntax: '<color>';
	inherits: true;
	initial-value: #1f2a2c;
}

@property --LD {
	syntax: '<color>';
	inherits: true;
	initial-value: #ffffff;
}

@property --dark-green {
	syntax: '<color>';
	inherits: true;
	initial-value: #00633f;
}

@property --light-green {
	syntax: '<color>';
	inherits: true;
	initial-value: #199e6b;
}

@property --dark-grey {
	syntax: '<color>';
	inherits: true;
	initial-value: #1f2a2c;
}

@property --light-grey {
	syntax: '<color>';
	inherits: true;
	initial-value: #40595b;
}

@property --topperFontSize {
	syntax: '*';
	inherits: true;
	initial-value: clamp(0.8125rem, 1.6vw, 1rem);
}

@property --headerFontSize {
	syntax: '*';
	inherits: true;
	initial-value: clamp(1.9375rem, 3.9vw, 3.0625rem);
}

@property --bodyFontSize {
	syntax: '<length>';
	inherits: true;
	initial-value: 1rem;
}

@property --sectionBlockPadding {
	syntax: '*';
	inherits: true;
	initial-value: clamp(3.75rem, 7.82vw, 6.25rem);
}

@property --sectionPadding {
	syntax: '*';
	inherits: true;
	initial-value: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

:root {
	--primary: var(--dark-green);
	--primaryLight: var(--light-green);
	--secondary: var(--dark-grey);
	--secondaryLight: var(--light-grey);
	--headerColor: #1a1a1a;
	--bodyTextColor: black;
	--bodyTextColorWhite: white;
	--primaryLD: light-dark(#00633f, #199e6b);
	--secondaryLD: light-dark(#1f2a2c, #40595b);
	--LD: light-dark(#ffffff, #000000);
	--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);
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--container: 1200px;
	--container-narrow: 880px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1240,18,1.25,6,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,m-2xl&g=s,l,xl,12 */

	/* Step -1: 14.2222px → 14.4px */
	--step--1: clamp(0.8889rem, 0.885rem + 0.0193vw, 0.9rem);
	/* Step 0: 16px → 18px */
	--step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
	/* Step 1: 18px → 22.5px */
	--step-1: clamp(1.125rem, 1.0272rem + 0.4891vw, 1.4063rem);
	/* Step 2: 20.25px → 28.125px */
	--step-2: clamp(1.2656rem, 1.0944rem + 0.856vw, 1.7578rem);
	/* Step 3: 22.7813px → 35.1563px */
	--step-3: clamp(1.4238rem, 1.1548rem + 1.3451vw, 2.1973rem);
	/* Step 4: 25.6289px → 43.9453px */
	--step-4: clamp(1.6018rem, 1.2036rem + 1.9909vw, 2.7466rem);
	/* Step 5: 28.8325px → 54.9316px */
	--step-5: clamp(1.802rem, 1.2347rem + 2.8369vw, 3.4332rem);
	/* Step 6: 32.4366px → 68.6646px */
	--step-6: clamp(2.0273rem, 1.2397rem + 3.9378vw, 4.2915rem);

	/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1240,18,1.25,6,1,&s=0.75|0.5|0.25,1.5|2|3|4|6|8|10,m-2xl&g=s,l,xl,12 */

	/* Space 3xs: 4px → 5px */
	--space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
	/* Space 2xs: 8px → 9px */
	--space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
	/* Space xs: 12px → 14px */
	--space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
	/* Space s: 16px → 18px */
	--space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
	/* Space m: 24px → 27px */
	--space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
	/* Space l: 32px → 36px */
	--space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
	/* Space xl: 48px → 54px */
	--space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
	/* Space 2xl: 64px → 72px */
	--space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
	/* Space 3xl: 96px → 108px */
	--space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);
	/* Space 4xl: 128px → 144px */
	--space-4xl: clamp(8rem, 7.6522rem + 1.7391vw, 9rem);
	/* Space 5xl: 160px → 180px */
	--space-5xl: clamp(10rem, 9.5652rem + 2.1739vw, 11.25rem);

	/* One-up pairs */
	/* Space 3xs-2xs: 4px → 9px */
	--space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
	/* Space 2xs-xs: 8px → 14px */
	--space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
	/* Space xs-s: 12px → 18px */
	--space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
	/* Space s-m: 16px → 27px */
	--space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
	/* Space m-l: 24px → 36px */
	--space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
	/* Space l-xl: 32px → 54px */
	--space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
	/* Space xl-2xl: 48px → 72px */
	--space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
	/* Space 2xl-3xl: 64px → 108px */
	--space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);
	/* Space 3xl-4xl: 96px → 144px */
	--space-3xl-4xl: clamp(6rem, 4.9565rem + 5.2174vw, 9rem);
	/* Space 4xl-5xl: 128px → 180px */
	--space-4xl-5xl: clamp(8rem, 6.8696rem + 5.6522vw, 11.25rem);

	/* Custom pairs */
	/* Space m-2xl: 24px → 72px */
	--space-m-2xl: clamp(1.5rem, 0.4565rem + 5.2174vw, 4.5rem);
}

*,
*:before,
*:after {
	/* prevents padding from affecting height and width */
	box-sizing: border-box;
}

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

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

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

section {
	background-color: white;
}

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

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

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

.section {
	padding: var(--sectionPadding);
}

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

.section--dark {
	background-color: var(--secondary);
	color: var(--bodyTextColorWhite);
}

.section--dark h2,
.section--dark h3 {
	color: white;
}

.section-head {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.section-head--left {
	text-align: left;
	margin-inline: 0;
}

.topper {
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: var(--topperFontSize);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 0.75rem;
}

.section-head h2 {
	font-size: var(--headerFontSize);
	font-weight: 600;
}

.section-head .lead {
	margin-top: 1rem;
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
	color: var(--light-grey);
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.8rem 1.5rem;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	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,
.section--dark .btn-secondary {
	color: white;
	border-color: rgba(255, 255, 255, 0.6);
}

.on-dark .btn-secondary:hover,
.section--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: 0.85rem;
	margin-top: 1.75rem;
}

/* Used for cards and steps components */
.steps-grid {
	/* 1. Layout */
	display: grid;
	grid-template-columns: 1fr; /* Stacked on mobile */
	gap: 1.25rem;

	/* 2. Logic */
	/* This resets the 'step' counter so the first item is 1 */
	counter-reset: step;

	/* 3. Spacing */
	max-width: 1200px;
	margin: 0 auto;
}

/* Tablet and Desktop Layout */
@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: 1.25rem;
}

@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: 0.93rem;
	color: var(--secondary);

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

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

.pricing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	align-items: start;
}

pricing-component li {
	font-size: 0.93rem;
	color: var(--secondary);
}

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

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

.center {
	text-align: center;
}

.detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.detail + .detail {
	margin-top: clamp(3rem, 6vw, 5rem);
}

.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: clamp(1.5rem, 4vw, 2.5rem);
	overflow: hidden;
}

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

.detail h2 {
	font-size: clamp(1.6rem, 3.2vw, 2.25rem);
	font-weight: 600;
}

.detail .topper {
	margin-bottom: 0.6rem;
}

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

.detail .checks {
	margin-top: 1.25rem;
	padding-left: 1.2rem;
	list-style: disc;
	display: grid;
	gap: 0.55rem;
}

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

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

.detail .card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 1.5rem;
	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) {
	/* alternating two-column detail rows */
	.detail {
		grid-template-columns: 1fr 1fr;
	}
	.detail--reverse .detail-media {
		order: -1;
	}
}

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