html, body {
	width: 100%;
	padding: 0; margin: 0;
	overflow-x: clip;
}

main {
	width: 100%; margin: 0 auto; box-sizing: border-box;
	& > pre { display: none; }
	& > section { padding: 4rem max((100% - 72rem) / 2 + 2rem, 2rem); }
}

site-nav {
	transition: background-color .5s;

	body:not(.scrolled) & {
		background-color: var(--sub-background-color);
		&::part(searchinput){ transition: background-color .5s; }
		&::part(searchinput):focus-within {
			transition: background-color .2s;
		}
		&::part(searchinput):not(:focus-within){
			background-color: var(--background-color);
		}
		&::part(button):hover {
			background-color: var(--background-color);
		}
	}
}

h2 {
	margin: 0 0 .5em;
	font-size: 2.5rem;
}

#hero {
	display: grid; min-height: 100vh; padding: 5rem 1rem 0; box-sizing: border-box;
	grid: 1fr auto 3.5rem / 1fr; place-items: center;
	header {
		display: flex; padding: 2rem;
		flex-direction: column; gap: 1.25em; align-items: center;
		color: var(--name-color); background-color: var(--sub-background-color);
		font-size: clamp(1rem, 1.5vw + .7rem, 1.5rem); line-height: 1;
		border-radius: 2rem;
		ui-icon {
			display: block; aspect-ratio: 3 / 1; height: 1em; padding: 0;
		}
		p { font-weight: bold; }
	}
	h1 {
		margin: 0;
		position: relative;
		font-size: clamp(4rem, 17vw + .6rem, 10rem);
		&::before, &::after {
			content: "";
			display: block; width: 100vw; height: 100%;
			position: absolute; inset: 0 100% 0 auto;
			background: center right / auto 100% repeat-x url("./logo-blocks.svg?v=j/5cJ7YiX9");
		}
		&::after {
			inset: 0 auto 0 100%;
			background-position: center left;
			scale: 1 -1;
		}
	}
	p {
		margin: 0;
		text-align: center;
	}
	.teaser {
		width: 100%; margin: 0;
		span {
			display: block;
		}
	}
	ui-icon[type=scroll-down] {
		width: 2rem; height: 2rem;
		color: var(--meta-color);
	}
}

#selling-points {
	display: flex; margin: 6rem 0;
	gap: 5rem;
	background-color: var(--background-color);
	h3 {
		margin: 0 0 1em;
		color: var(--theme-color);
		font-size: 1.5rem
	}
	img { vertical-align: middle; }
	ui-icon {
		vertical-align: -.25rem;
		padding: 0;
		margin: 0 .5ch 0 0;
	}
	@media (width < 900px){
		flex-direction: column; gap: 3rem;
	}
}

#compare {
	display: grid;
	grid: auto / 1fr 1.6fr; gap: 5rem; place-items: center stretch;
	home-compare {
		display: grid; height: 36rem; padding: 1rem;
		background: var(--background-color);
		border-radius: 1.5rem;
	}
	@media (width < 900px){
		grid: auto auto / 1fr;
	}
}

#explore {
	h2, h2 + p { text-align: center; }
	nav {
		display: grid; margin: 3rem auto;
		grid: auto / repeat(4, 1fr); gap: 2rem;
		a, .soon {
			display: flex; min-width: 8rem; padding: 1rem;
			flex-direction: column; align-items: center; gap: .5rem;
			border-radius: 1rem;
			text-decoration: none;
			transition: background-color .2s;
		}
		a {
			color: var(--text-color); background-color: var(--background-color);
			&:hover { background-color: var(--highlight-color); }
		}
		.soon {
			color: var(--comment-color);
			position: relative;
			box-shadow: 0 0 0 .25rem inset var(--background-color);
			&::after {
				content: "Coming soon-ish";
				display: inline-block; padding: 0 1rem;
				position: absolute; inset: -.75rem -.75rem auto auto; z-index: 1;
				color: var(--theme-color); background-color: var(--background-color);
				border-radius: .5rem;
				font-variant: small-caps; font-weight: bold;
				text-transform: lowercase;
			}
			ui-icon { color: var(--comment-color); }
		}
		ui-icon {
			display: block; width: 3rem; height: 3rem; padding: 0; margin: .5rem;
			color: var(--theme-color);
		}
		@media(width < 800px){
			grid: auto auto / 1fr 1fr;
			ui-icon { width: 2.5rem; height: 2.5rem; }
		}
		@media(width < 400px){
			grid: repeat(4, auto) / 1fr;
		}
	}
}