:root {
	--step--2: clamp(0.6331rem, 0.7195rem + -0.1115vw, 0.6944rem);
	--step--1: clamp(0.8333rem, 0.829rem + 0.0193vw, 0.844rem);
	--step-0: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
	--step-1: clamp(1.2rem, 1.0774rem + 0.5448vw, 1.4996rem);
	--step-2: clamp(1.44rem, 1.2113rem + 1.0164vw, 1.999rem);
	--step-3: clamp(1.728rem, 1.3448rem + 1.703vw, 2.6647rem);
	--step-4: clamp(2.0736rem, 1.4688rem + 2.688vw, 3.552rem);
	--step-5: clamp(2.4883rem, 1.5693rem + 4.0845vw, 4.7348rem);
	--space-3xs: clamp(0.25rem, 0.2244rem + 0.1136vw, 0.3125rem);
	--space-2xs: clamp(0.5rem, 0.4744rem + 0.1136vw, 0.5625rem);
	--space-xs: clamp(0.75rem, 0.6989rem + 0.2273vw, 0.875rem);
	--space-s: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
	--space-m: clamp(1.5rem, 1.4233rem + 0.3409vw, 1.6875rem);
	--space-l: clamp(2rem, 1.8977rem + 0.4545vw, 2.25rem);
	--space-xl: clamp(3rem, 2.8466rem + 0.6818vw, 3.375rem);
	--space-2xl: clamp(4rem, 3.7955rem + 0.9091vw, 4.5rem);
	--space-3xl: clamp(6rem, 5.6932rem + 1.3636vw, 6.75rem);

	/* One-up pairs */
	--space-3xs-2xs: clamp(0.25rem, 0.1222rem + 0.5682vw, 0.5625rem);
	--space-2xs-xs: clamp(0.5rem, 0.3466rem + 0.6818vw, 0.875rem);
	--space-xs-s: clamp(0.75rem, 0.5966rem + 0.6818vw, 1.125rem);
	--space-s-m: clamp(1rem, 0.7188rem + 1.25vw, 1.6875rem);
	--space-m-l: clamp(1.5rem, 1.1932rem + 1.3636vw, 2.25rem);
	--space-l-xl: clamp(2rem, 1.4375rem + 2.5vw, 3.375rem);
	--space-xl-2xl: clamp(3rem, 2.3864rem + 2.7273vw, 4.5rem);
	--space-2xl-3xl: clamp(4rem, 2.875rem + 5vw, 6.75rem);

	/* Custom pairs */
	--space-s-l: clamp(1rem, 0.4886rem + 2.2727vw, 2.25rem);
}

body {
	font-family: 'Inter', sans-serif;
	padding: 0;
	margin: 0;
	&:has(.build) {
		height: 100vh;
		overflow: hidden;
	}
}

.aside-logo {
	text-decoration: none;
}

.site-footer {
	background: var(--color-card-background);
	border-radius: 12px;
	font-family: var(--font-body);
	font-weight: var(--weight-body);
	font-size: var(--step-0);
	padding: var(--space-s) var(--space-m);
	margin-bottom: var(--space-l);
	p {
		margin: 0;
	}
	a {
		color: var(--color-primary-background);
		font-weight: bold;
	}
}

.icon-button {
	background: transparent;
	-webkit-appearance: none;
	border-radius: 6px;
	padding: 3px;
	font-size: 20px;
	aspect-ratio: 1;
	border: 1px solid transparent;
	&.secondary {
		background: white;
		border: 1px solid #efefef;
		box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
	}
	&:hover {
		background: white;
		border: 1px solid #efefef;
		box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
	}
}

@scope (.output) {
	background: var(--color-base-background);
	font-family: var(--font-body);
	font-weight: var(--weight-body);
	font-size: var(--step-0);
	overflow: auto;
	height: calc(100vh - 24px);
	color: var(--color-base-foreground);
	h1,
	h2,
	h3 {
		color: var(--color-accent-foreground);
		line-height: var(--lh-heading);
	}
	.stacked-intro {
		h1 {
			font-family: var(--font-heading);
			font-weight: var(--weight-heading);
			font-size: var(--step-3);
			margin: 0;
			color: var(--color-accent-foreground);
		}
		p {
			margin: 0;
			font-size: var(--step-0);
			@media (max-width: 880px) {
				margin-top: var(--space-s);
			}
		}
		.intro-content {
			display: grid;
			grid-template-columns: 5fr 5fr;
			align-items: end;
			gap: var(--space-m);
			margin-bottom: var(--space-xl);
			padding-top: var(--space-2xl);
			@media (max-width: 880px) {
				display: block;
			}
		}
	}
	.wrapper {
		max-width: 1200px;
		padding: var(--space-l) var(--space-m);
		margin-left: auto;
		margin-right: auto;
	}
	.button {
		display: inline-block;
		color: var(--color-secondary-foreground);
		background: var(--color-secondary-background);
		text-decoration: none;
		padding: var(--space-xs) var(--space-m);
		border-radius: var(--radius-m);
		font-size: var(--step-0);
		font-weight: var(--weight-body);
		box-shadow: var(--shadow-card);
		border: 0.5px solid var(--color-border-card);
		&.primary {
			color: var(--color-primary-foreground);
			background: var(--color-primary-background);
		}
	}
}

@scope (.hero) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
	background: var(--color-hero-background);
	.wrapper {
		display: flex;
		flex-direction: column;
		padding-top: 48px;
		padding-bottom: 48px;
		max-width: 900px;
		padding: var(--space-xl) var(--space-xl);
		padding-bottom: var(--space-3xl);
		align-items: center;
		text-align: center;
	}
	h1 {
		margin-bottom: 0;
		font-family: var(--font-heading);
		letter-spacing: -0.6px;
		font-size: var(--step-5);
		font-weight: var(--weight-heading);
		line-height: var(--lh-heading);
		font-style: var(--style-h1);
	}
	p {
		font-size: var(--step-1);
		color: var(--color-base-foreground);
		max-width: 640px;
		font-weight: var(--weight-body);
	}
	.hero-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.hero-buttons {
		display: flex;
		gap: var(--space-l);
		@media (max-width: 900px) {
			flex-direction: column;
			gap: var(--space-s);
		}
	}
}

@scope (.cards) {
	:scope {
		padding-bottom: var(--space-3xl);
	}

	.cards-flex {
		display: flex;
		gap: var(--space-l);
		@media (max-width: 880px) {
			display: block;
		}
	}
	.card {
		min-height: 35vh;
		@media (max-width: 880px) {
			min-height: 0;
			margin-bottom: var(--space-l);
			display: block;
		}
	}
}

@scope (.card) {
	:scope {
		background: var(--color-card-background);
		color: var(--color-card-foreground);
		padding: var(--space-m) var(--space-l);
		border-radius: var(--radius-l);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1 1 0;
		box-shadow: var(--shadow-card);
		border: 1px solid var(--color-border-card);
	}
	h2 {
		margin: 0;
		padding-bottom: var(--space-xs);
		font-family: var(--font-heading);
		font-weight: var(--weight-heading);
	}
	p {
		margin: 0;
	}
	.card-icon i {
		font-size: 62px;
		padding-top: var(--space-m);
		padding-bottom: var(--space-l);
	}
}

@scope (.accordion) {
	.accordion-item {
		border-bottom: 1px solid var(--color-border-normal);
		padding-bottom: var(--space-s);
		margin-bottom: var(--space-s);
	}
	.accordion-heading {
		display: flex;
		text-align: left;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		background: transparent;
		border: none;
		font-family: var(--font-heading);
		font-weight: var(--weight-heading);
		letter-spacing: -0.06px;
		font-size: var(--step-1);
		color: var(--color-accent-foreground);
		h3 {
			margin: 0;
		}
	}
	.accordion-content {
		padding-top: var(--space-xs);
		p {
			margin-top: 0;
			max-width: 720px;
		}
	}
}

@scope (.two-up) {
	:scope {
		display: grid;
		grid-template-columns: 2fr 5fr;
		gap: var(--space-xl);
		padding-bottom: var(--space-xl);
		justify-content: center;
		align-items: center;
		max-width: 1200px;
		@media (max-width: 880px) {
			display: block;
		}
	}
	h2 {
		font-family: var(--font-heading);
		font-weight: var(--weight-heading);
	}
	.two-up-image {
		padding: var(--space-2xs);
		background: var(--color-card-background);
		border-radius: var(--radius-l);
		border: 1px solid var(--color-border-card);
		img {
			border-radius: calc(var(--radius-l) - var(--space-2xs));
			width: 100%;
			margin: 0;
		}
	}
}