.intro {
	background: var(--gradient-300);
	margin-block: calc(var(--header-height) * -1) -1em;
	padding: var(--header-height) var(--vem-600) 1em var(--vem-800);
	display: flex;
	min-height: 90vh;
	align-items: center;
	gap: var(--vem-800);
	overflow: hidden;
}

.intro__text {
	flex: 100%;
	font-size: var(--vem-500);
	padding-bottom: var(--vem-900);
}

.intro__header {
	margin: auto;
	font-size: var(--vem-925);
	font-weight: 800;
	font-family: var(--museo);
	line-height: 1.2;
}

.intro__header span {
	color: var(--white-100);
	font-family: var(--museo);
	color: var(--grey-500);
	font-size: var(--vem-1000);
}

.intro__text p {
	margin-top: 1em;
}

.intro__laptop {
	flex: 50%;
	aspect-ratio: 1;
	position: relative;
}

.intro__laptop canvas {
	position: absolute;
	inset: 0 0 0 -30%;
	width: 100%;
	height: 100%;
	display: block;
}

.construct {
	font-size: var(--vem-900);
	text-align: center;
	padding-block: var(--vem-1000);
	font-weight: 300;
}

.plans {
	max-width: 100%;
	justify-content: space-around;
	box-sizing: content-box;
	margin-block: 0;
	align-items: stretch;
	gap: var(--vem-700) var(--vem-550);
	padding: var(--vem-900) calc(var(--side-padding) / 2) 0;
	background: var(--bg);
	z-index: 1;
	border-radius: 1em 1em 0 0;
}

.plans h2 {
	flex-basis: 100%;
	text-align: center;
	font-size: var(--vem-800);
}

.plans__card {
	flex: 1;
	--percent: 80%;
	--scale: 1.01;
	background: color-mix(in oklab, var(--white-100) var(--percent), #0000);
	padding: var(--vem-925) var(--vem-500) var(--vem-550);
	font-size: var(--vem-300);
	border-radius: var(--vem-500);
	display: grid;
	transform-origin: bottom;
	transition: scale 0.2s cubic-bezier(0.5, 1, 0.5, 1),
		box-shadow 0.4s cubic-bezier(0.5, 1, 0.5, 1), translate 1s, border 0.2s;
	position: relative;
}

.plans__card:hover {
	scale: var(--scale);
	transition: scale 0.4s cubic-bezier(0.5, 2, 0.5, 1.5),
		box-shadow 0.4s cubic-bezier(0.5, 1, 0.5, 1), background 1s, translate 1s,
		border 0.2s;
	box-shadow: var(--vem) var(--vem-300) var(--vem-600) calc(-2 * var(--vem))
		var(--grey-50050);
}

.plans__card::before {
	position: absolute;
	inset: var(--vem-500) auto auto var(--vem-500);
	font-size: min(var(--vem), 14px);
	font-weight: 600;
	background: var(--acc-purple-200);
	padding: 0.5em 1em;
	border-radius: 50vw;
	transition: background 0.4s;
}

.plans__card--popular::before {
	content: "Most Popular!";
}
.plans__card--popular:hover::before {
	background: var(--acc-purple-300);
}

.plans__card--recommended::before {
	content: "Recommended!";
	background: var(--acc-green-400);
}

.plans__card--recommended:hover::before {
	background: var(--acc-green-500);
}

.plans__card--popular {
	--percent: 90%;
	--scale: 1.015;
}

.plans__card--recommended {
	--percent: 100%;
	--scale: 1.02;
	flex: 1.05;
	padding: var(--vem-900) var(--vem-500) var(--vem-500);
	border: 4px solid var(--acc-green-400);
}

.plans__card--recommended:hover {
	border: 4px solid var(--acc-green-500);
}

.plans__card h4 {
	font-size: var(--vem-550);
	white-space: nowrap;
}

.plans__card h5 {
	font-size: var(--vem-200);
	font-weight: 500;
	padding-bottom: var(--vem-200);
	white-space: nowrap;
}

.plans__card--recommended h4 {
	font-size: var(--vem-600);
}

.plans__card--recommended h5 {
	font-size: var(--vem-300);
}

.plans__card ul {
	padding: var(--vem) 0 var(--vem-200);
}

.plans__card li {
	padding-block: 0.2em;
	list-style: none;
	display: flex;
	align-items: start;
	gap: 0.4em;
}

.plans__card li svg {
	padding-top: 0.3em;
	flex: 0.8em 0 0;
}

.plans__card--popular li::marker {
	color: var(--acc-purple-500);
}

.plans__card--recommended li::marker {
	color: var(--acc-green-500);
}

.plans__card strong {
	font-weight: 600;
}

.plans__card--recommended strong {
	font-weight: 700;
}

.plans .small-text {
	font-size: var(--vem);
	text-align: center;
	opacity: 0.8;
}

.button {
	text-decoration: none;
	font-weight: 500;
	text-align: center;
	margin: var(--vem) auto 0;
	height: max-content;
	padding: 0.5em 1.5em;
	background: var(--acc-blue-400);
	border-radius: 5em;
	box-shadow: 0 0.1em 0.4em -0.05em var(--acc-blue-300),
		inset 0 -0.1em 0.3em -0.1em var(--acc-blue-500),
		inset 0 0.05em 0.1em var(--acc-blue-300);
	transition: scale 0.2s, box-shadow 0.2s, background 0.2s;
	transform-origin: bottom;
}

.button:hover,
.button:focus-visible {
	scale: 1.05;
	background: var(--acc-blue-400);
	box-shadow: 0 0.3em 0.5em -0.1em var(--acc-blue-300),
		inset 0 -0.3em 0.3em -0.2em var(--acc-blue-500),
		inset 0 0.1em 0.3em var(--acc-blue-300);
}

.plans__card--popular .button {
	background: var(--acc-purple-300);
	box-shadow: 0 0.1em 0.4em -0.05em var(--acc-purple-400),
		inset 0 -0.1em 0.3em -0.1em var(--acc-purple-500),
		inset 0 0.05em 0 var(--acc-purple-300);
}

.plans__card--popular .button:hover {
	background: var(--acc-purple-400);
	box-shadow: 0 0.3em 0.5em -0.1em var(--acc-purple-400),
		inset 0 -0.3em 0.1em -0.2em var(--acc-purple-500),
		inset 0 0.1em 0.2em var(--acc-purple-300);
}

.plans__card--recommended .button {
	font-weight: 600;
	background-color: var(--acc-green-400);
	box-shadow: 0 0.1em 0.4em -0.05em var(--acc-green-500),
		inset 0 -0.1em 0.3em -0.1em var(--acc-green-600),
		inset 0 0.05em 0 var(--acc-green-400);
}

.plans__card--recommended .button:hover {
	font-weight: 700;
	background-color: var(--acc-green-500);
	box-shadow: 0 0.3em 0.5em -0.1em var(--acc-green-500),
		inset 0 -0.3em 0.1em -0.2em var(--acc-green-600),
		inset 0 0.1em 0.2em var(--acc-green-400);
}

.small-text strong {
	font-weight: 600;
}

.plans__cta {
	display: grid;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	gap: var(--vem-500);
}

.plans__cta p {
	font-size: var(--vem-600);
	font-weight: 500;
	text-wrap: pretty;
}

.plans__buttons {
	display: flex;
	justify-content: center;
	align-items: start;
	gap: var(--vem-400);
}

.compare,
.compare__heading {
	margin: var(--vem-200) auto;
	display: grid;
	justify-items: center;
	gap: var(--vem-1000);
	position: relative;
}

.compare__heading {
	position: sticky;
	gap: 0;
	top: var(--vem-400);
}

.compare h2 {
	font-family: var(--museo);
	font-size: var(--vem-550);
	font-weight: 600;
}

.compare__heading > img {
	height: var(--vem-550);
}

.compare__table {
	z-index: 10;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	background: var(--acc-light-blue-500);
	text-align: center;
	align-items: center;
	border: 1px solid var(--grey-50025);
	border-radius: var(--vem);
	padding: var(--vem-200) var(--vem-300) var(--vem);
	font-size: var(--vem-200);
	gap: var(--vem-75) var(--vem-500);
	box-shadow: var(--vem) var(--vem) var(--vem-200) calc(-1 * var(--vem))
		var(--grey-50025);
}

.compare__table .plan {
	font-size: var(--vem-400);
	font-weight: 700;
	color: var(--acc-blue-500);
}

.compare__table .plan:nth-of-type(3) {
	color: var(--acc-purple-500);
}

.compare__table .plan:nth-of-type(4) {
	color: var(--acc-green-500);
}

.compare__table svg {
	height: 0.7em;
}

.compare__table .table-content {
	font-size: var(--vem);
	font-weight: 600;
	opacity: 0.75;
}

.separator {
	grid-column: 1/ -1;
	background: var(--grey-50010);
	padding: 0 !important;
	height: 1px;
}

.compare__table .feature {
	text-align: right;
	font-size: var(--vem-200);
}

.addons {
	background: var(--acc-blue-300);
	margin: var(--vem-1050) auto var(--vem-1000);
	max-width: max-content;
	display: grid;
	gap: 0;
	padding: var(--vem-600) var(--vem-300);
	border-radius: 16px;
	position: relative;
}

.addons__header {
	text-align: center;
	font-size: var(--vem-700);
	background: var(--acc-blue-500);
	color: var(--white-100);
	padding: var(--vem-400) var(--vem-500);
	max-width: max-content;
	margin-bottom: -6%;
	transform: translate(-15%, -1.3lh) rotate(-7deg);
	border-radius: 16px;
	z-index: 10;
}

.addons h3 {
	text-align: center;
	font-size: var(--vem-550);
}

.addons p {
	max-width: 70ch;
	font-size: var(--vem-500);
	text-align: center;
}

.addons p strong {
	font-weight: 500;
}

.addons .lists {
	display: flex;
	gap: var(--vem-300);
	margin-top: var(--vem-500);
}

.addons ul {
	font-size: var(--vem-200);
	line-height: 1.8;
}

.right-column {
	display: grid;
	align-content: space-between;
}

.right-column div {
	isolation: isolate;
}

.right-column div::after {
	z-index: -1;
	pointer-events: none;
	border-radius: 16px;
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		175deg,
		#0000 40%,
		color-mix(in oklab, var(--acc-blue-300), #0000 25%)
	);
}

.right-column h3 {
	font-size: var(--vem-500);
	text-align: left;
	margin-inline: var(--vem-200) 0;
}

.right-column p {
	margin-inline: var(--vem-200) 0;
	max-width: 40ch;
	text-align: left;
	font-size: var(--vem-300);
}

.why {
	display: grid;
	text-align: center;
	gap: var(--vem-900);
	padding: 0 var(--vem-800) var(--vem-800);
}

.why h2 {
	font-size: var(--vem-800);
	padding-block: 0.2em;
}

.why__header p {
	font-size: var(--vem-300);
}

.why__reasons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: var(--vem-800) var(--vem-600);
}

.why__reasons > div {
	flex-basis: 30%;
	display: grid;
	justify-items: center;
}

.why__reasons img {
	width: var(--vem-1000);
}

.why__reasons h3 {
	white-space: nowrap;
	margin-top: var(--vem-200);
	font-family: var(--museo);
	font-size: var(--vem-400);
}

.why__reasons p {
	font-size: var(--vem-200);
}

@media (width < 770px) {
	.intro {
		flex-wrap: wrap;
		align-content: center;
	}

	.intro__text {
		padding: 0;
		text-align: center;
		font-size: var(--vem-600);
	}

	.intro__laptop {
		aspect-ratio: 2;
	}
	.intro__laptop canvas {
		inset: 0;
		/* translate: 200vw; */
	}

	.plans {
		flex-direction: column;
	}

	.plans__cta {
		text-align: center;
	}

	.plans__card {
		padding: var(--vem-700) var(--vem-600) var(--vem-700);
	}

	.plans__card--popular {
		border: 2px solid var(--acc-purple-300);
	}

	.plans__card--recommended {
		border: 4px solid var(--acc-green-500);
	}

	.plans__card--popular::before {
		background: var(--acc-purple-300);
	}

	.plans__card--recommended::before {
		background: var(--acc-green-500);
		inset: -3px -3px auto auto;
	}

	.plans__card::before {
		inset: -1px -1px auto auto;
		font-size: var(--vem-300);
		border-radius: 0 var(--vem-500) 0 var(--vem);
		padding: 0.5em 0.8em;
		z-index: -1;
	}

	.plans__card h4 {
		font-size: var(--vem-650);
	}

	.plans__card h5 {
		font-size: var(--vem-400);
	}

	.plans__card > p {
		font-size: var(--vem-500);
		margin-block: 0.8em;
	}

	.plans__card ul {
		font-size: var(--vem-500);
	}

	.plans__card .small-text {
		margin-block: var(--vem-400) 0.25em;
		font-size: var(--vem-300);
	}

	.plans__card .button {
		font-size: var(--vem-550);
	}

	.plans__card--recommended .button {
		background-color: var(--acc-green-500);
	}

	.compare {
		margin: 0 auto calc(-1 * var(--vem-500));
	}

	.compare__table {
		border-radius: 0;
		border: 0;
		box-shadow: 0 0 var(--vem) var(--acc-blue-300);
		padding: var(--vem-500) var(--vem-600) var(--vem-1000);
	}

	.addons {
		z-index: 10;
		margin-top: 0;
		padding: var(--vem-600) var(--vem-700);
		max-width: none;
	}

	.addons__header {
		font-size: var(--vem-650);
		transform: translate(0, -1.5lh);
		margin: 0 auto -6%;
	}

	.addons h3,
	.addons p {
		max-width: none;
		text-align: left;
		margin: 0;
	}

	.addons ul {
		padding-left: var(--vem-600);
	}

	.addons .lists {
		flex-direction: column;
		gap: 0;
	}

	.right-column h3 {
		padding-top: 0.2em;
	}

	.right-column div::after {
		background: linear-gradient(#0000 15%, var(--acc-blue-300));
	}

	.why {
		padding: 0 var(--vem-400);
	}

	.why__header p {
		text-wrap: balance;
	}

	.why__reasons {
		display: grid;
		gap: var(--vem-950);
	}

	.why__reasons h3 {
		font-size: var(--vem-550);
	}

	.why__reasons p {
		font-size: var(--vem-500);
		max-width: 32ch;
	}
}

@media (prefers-reduced-motion: no-preference) {
	header {
		translate: 0 -100%;
		animation: header-slide 1s 0.8s forwards;
	}

	.intro__text {
		opacity: 0;
		animation: fade-in 1s forwards;
	}

	@keyframes fade-in {
		to {
			opacity: 1;
		}
	}

	.intro__laptop canvas {
		translate: 100vw;
		animation: slide-in 1s 0.6s forwards;
	}

	@keyframes slide-in {
		to {
			translate: 0;
		}
	}
}

@media (prefers-reduced-motion: no-preference) and (width < 770px) {

	.intro__laptop canvas {
		translate: 200vw;
		animation: slide-in 1s 0.4s forwards;
	}
}