:root {
	--fontface: 'Asap', sans-serif;
	--remgap: 1rem;
	--emgap: 1em;
	--maxwidth: calc(75 * var(--remgap));
	--maxtextwidth: calc(40 * var(--remgap));
	--color-w0: #fff;
	--color-b0: #010101;
	--color-d0: #b19e9e;
	--color-d1: #d9c8b8;
	--color-d2: #fcecd3;
	--color-g0: #3bb552;
	--color-g1: #bee3ec;
	--color-r0: #e42936;
	--color-y0: #face37;
	--transitiontime: 150ms;
	--slidertransitiontime: 500ms;
	--textshadow: calc(var(--remgap) / 4) calc(var(--remgap) / 4) calc(var(--remgap) / 2) var(--color-b0);
}

html { display: flow-root }

body {
	display: flex;
	flex-flow: column nowrap;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	line-height: 2;
	font-family: var(--fontface);
	font-weight: 300;
	color: var(--color-b0);
}

[data-state="loading"] header,
[data-state="loading"] section,
[data-state="loading"] hr,
[data-state="loading"] footer { opacity: 0 }

[data-state="loaded"] #loader {
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	transform: translateY(calc(2 * var(--remgap)));
}

header {
	position: sticky;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: calc(var(--remgap) / 2);
	max-width: var(--maxwidth);
	top: 0;
	z-index: 3;
	background-color: var(--color-w0);
	transition: opacity 250ms ease-out;
	& h1 {
		margin: 0;
		z-index: 2;
		& a {
			display: block;
			line-height: 0;
			& svg {
				width: calc(8 * var(--remgap));
				@media screen and (min-width: 960px) { width: calc(10 * var(--remgap)) }
			}
		}
	}
	&::before {
		position: absolute;
		display: block;
		margin: auto;
		inset-block: 0;
		inset-inline: -100%;
		background-color: var(--color-w0);
		content: '';
		z-index: 2;
		pointer-events: none;
		box-shadow: 0 0 var(--remgap) var(--remgap) rgba(0, 0, 0, .2);
	}
	@media screen and (min-width: 640px) { padding: calc(var(--remgap) / 2) calc(2 * var(--remgap)) }
	@media screen and (min-width: 960px) {
		margin: calc(2 * var(--remgap)) auto auto;
		inset-inline: 0;
		width: calc(100% - (4 * var(--remgap)));
	}
}

nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	& label {
		width: calc(2 * var(--remgap));
		height: calc(2 * var(--remgap));
		z-index: 2;
		color: var(--color-b0);
		cursor: pointer;
		@media screen and (min-width: 960px) { display: none }
	}
	& rect {
		transition: all var(--transitiontime) ease-out;
		transform-origin: 50% 50%;
	}
	input {
		display: none;
		&:checked ~ #menu {
			z-index: 2;
			transform: translateY(0);
			pointer-events: auto;
		}
		&:checked ~ label rect:first-of-type,
		&:checked ~ label rect:last-of-type { transform: scaleX(0) }
		&:checked ~ label rect:nth-of-type(2) { transform: rotate(45deg) }
		&:checked ~ label rect:nth-of-type(3) { transform: rotate(-45deg) }
	}
	ul {
		position: absolute;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		gap: calc(3 * var(--remgap)) calc(2 * var(--remgap));
		margin: auto;
		padding: calc(2 * var(--remgap)) var(--remgap);
		top: 100%;
		inset-inline: 0;
		z-index: -1;
		list-style: none;
		background-color: var(--color-b0);
		transform: translateY(-100%);
		transition: transform var(--transitiontime) ease-in-out;
		pointer-events: none;
		& li {
			display: block;
			width: 100%;
			text-align: center;
			@media screen and (min-width: 960px) { width: fit-content }
		}
		& a {
			display: block;
			font-size: 2em;
			font-weight: 800;
			color: var(--color-w0);
			text-decoration-thickness: calc(var(--emgap) / 16);
			text-underline-offset: calc(var(--emgap) / 8);
			cursor: pointer;
			&:hover { text-decoration-color: var(--color-g0) }
			@media screen and (min-width: 960px) {
				font-size: 1.25em;
				font-weight: 400;
				color: var(--color-b0);
				text-decoration: none;
				&:hover,
				&.active {
					text-decoration: underline;
					text-decoration-thickness: 2px;
					text-underline-offset: .5em;
				}
				&:hover { text-decoration-color: var(--color-g0) }
				&.active { text-decoration-color: var(--color-r0) }
			}
		}
		& #menu-log_in {
			display: inline-block;
			padding: var(--remgap) calc(2 * var(--remgap));
			font-style: italic;
			line-height: 1;
			color: var(--color-b0);
			background-color: var(--color-g0);
			text-decoration: none;
			border-radius: var(--remgap);
			&:hover { background-color: var(--color-w0) }
			@media screen and (min-width: 960px) {
				padding: calc(var(--remgap) / 2) calc(2 * var(--remgap));
				font-weight: 900;
				color: var(--color-w0);
				background-color: var(--color-b0);
				border-radius: calc(var(--remgap) / 2);
				&:hover {
					color: var(--color-b0);
					background-color: var(--color-g0);
				}
			}
		}
		@media screen and (min-width: 960px) {
			position: relative;
			display: inline-flex;
			flex-flow: row nowrap;
			padding: 0;
			top: 0;
			z-index: 2;
			background-color: transparent;
			transform: translateY(0);
			pointer-events: auto;
		}
	}
}

hr {
	display: block;
	margin: 0 auto;
	border: 0;
	background-color: var(--color-d1);
	width: calc(100% - var(--remgap));
	max-width: var(--maxwidth);
	height: calc(var(--remgap) / 2);
	@media screen and (min-width: 640px) { width: calc(100% - 2 * var(--remgap)) }
}

/*
 * Homepage stuff
 */
main {
	margin-top: calc(-1 * var(--remgap));

	& section {
		padding: calc(2 * var(--remgap)) var(--remgap);
		transition: opacity 250ms ease-out;
		& *::selection { background-color: var(--color-g0) }
		@media screen and (min-width: 640px) { padding: calc(2 * var(--remgap)) }
	}

	/*
	 * First section stuff
	 */

	& section:first-of-type {
		position: relative;
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-template-rows: repeat(2, min-content);
		row-gap: calc(2 * var(--remgap));
		column-gap: var(--remgap);
		padding-block-start: 0;
		& div {
			position: relative;
			grid-column: 1 / -1;
			grid-row: 1;
			margin-inline: calc(-1 * var(--remgap));
			aspect-ratio: 4 / 3;
			&>button {
				position: absolute;
				display: block;
				margin: auto;
				padding-inline: var(--remgap);
				border: 0;
				inset-block: 0;
				width: calc(4 * var(--remgap));
				height: 100%;
				z-index: 2;
				appearance: none;
				color: var(--color-w0);
				opacity: 0;
				cursor: pointer;
				transition: opacity var(--transitiontime);
				& svg {
					opacity: .5;
					transition: opacity var(--transitiontime);
				}
				&:first-of-type {
					left: 0;
					background: linear-gradient(to right, rgba(0 0 0 / .5), rgba(0 0 0 / 0));
				}
				&:last-of-type {
					right: 0;
					background: linear-gradient(to left, rgba(0 0 0 / .5), rgba(0 0 0 / 0));
				}
				&:hover>svg,
				&:active>svg { opacity: 1 }
			}
			&:hover>button,
			&:active>button { opacity: 1 }
			@media screen and (min-width: 640px) {
				margin-inline: calc(-2 * var(--remgap));
				aspect-ratio: 16 / 9
			}
			@media screen and (min-width: 960px) { aspect-ratio: 3 / 1 }
		}
		& ul {
			position: absolute;
			display: block;
			margin-inline: 0;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			list-style: none;
			& li {
				position: absolute;
				display: flex;
				flex-flow: column nowrap;
				justify-content: flex-end;
				align-items: center;
				gap: var(--remgap);
				margin: 0;
				padding: var(--remgap);
				width: calc(100% - 2 * var(--remgap));
				height: calc(100% - 2 * var(--remgap));
				inset: 0;
				z-index: 0;
				opacity: 0;
				pointer-events: none;
				will-change: transform;
				transition: opacity var(--slidertransitiontime);
				&[data-current-slide="true"] {
					z-index: 1;
					opacity: 1;
					pointer-events: auto;
					& h2,
					& h3,
					& a {
						opacity: 1;
						transform: translateX(0);
					}
				}
				@media screen and (min-width: 640px) {
					padding: calc(2 * var(--remgap));
					width: calc(100% - 4 * var(--remgap));
					height: calc(100% - 4 * var(--remgap));
				}
			}
			& img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: 50% 50%;
			}
			& span {
				position: relative;
				display: block;
				max-width: var(--maxwidth);
				text-align: center;
				text-wrap: balance;
				color: var(--color-w0);
				text-shadow: var(--textshadow);
				&>* { margin: 0 }
			}
			& h2,
			& h3,
			& a {
				opacity: 0;
				transform: translateX(calc(4 * var(--remgap)));
				transition: transform var(--slidertransitiontime) ease-in-out, opacity var(--transitiontime);
			}
			& h2 {
				line-height: 1.125;
				font-size: 2em;
				font-weight: 800;
				transition-delay: 0s;
				@media screen and (min-width: 640px) { font-size: 3em }
				@media screen and (min-width: 1600px) { font-size: 4em }
			}
			& h3 {
				line-height: 1.25;
				font-size: 1.25em;
				font-weight: 700;
				transition-delay: 100ms;
				@media screen and (min-width: 640px) { font-size: 1.5em }
				@media screen and (min-width: 960px) { font-size: 2em }
			}
			& a {
				position: relative;
				padding: calc(var(--remgap) / 2) calc(2 * var(--remgap));
				border-radius: calc(var(--remgap) / 2);
				line-height: 1;
				font-size: 1.5em;
				font-weight: 800;
				font-style: italic;
				color: var(--color-b0);
				text-decoration: none;
				background-color: var(--color-g0);
				cursor: pointer;
				transition-delay: 150ms;
				&:hover { background-color: var(--color-w0) }
			}
		}
		&>span {
			position: relative;
			grid-column: 1;
			grid-row: 2;
			margin: auto;
			width: calc(var(--remgap) / 2);
			height: 100%;
			overflow-y: clip;
			background: linear-gradient(0deg, var(--color-d0) 50%, var(--color-r0) 50%);
			background-attachment: fixed;
			& svg {
				position: sticky;
				display: block;
				margin: 5vw calc(-1.5 * var(--remgap));
				width: calc(4 * var(--remgap));
				inset-inline: 0;
				top: 50%;
				bottom: 50%;
				color: var(--color-r0);
				stroke: var(--color-w0);
				@media screen and (min-width: 640px) { margin-block: 10vw }
				@media screen and (min-width: 960px) { margin-block: 15vw }
			}
			@media screen and (min-width: 640px) {
				position: absolute;
				left: 0;
				left: calc(-.5 * var(--remgap));
			}
			@media screen and (min-width: 960px) {
				left: max(calc(var(--remgap) / 32), calc(50% - var(--maxwidth) / 2) - var(--remgap));
			}
		}
		& dl {
			position: relative;
			display: grid;
			grid-template-columns: 1fr;
			gap: var(--remgap) calc(2 * var(--remgap));
			grid-column: 2;
			grid-row: 2;
			margin: 0 auto;
			max-width: var(--maxwidth);
			@media screen and (min-width: 480px) { grid-template-columns: repeat(2, 1fr) }
			@media screen and (min-width: 640px) {
				padding-inline-start: calc(2 * var(--remgap));
			}
			@media screen and (min-width: 960px) {
				padding-inline-start: calc(2 * var(--remgap));
				row-gap: calc(4 * var(--remgap));
				max-width: calc(var(--maxwidth) - 6 * var(--remgap));
			}
		}
		& dt {
			grid-column: 1;
			align-self: end;
			line-height: 1.25;
			font-size: 1.5em;
			font-weight: 900;
			animation: reveal_anim ease-out;
			animation-timeline: view();
			animation-range: entry 50% cover 50%;
			@media screen and (min-width: 960px) { margin-bottom: calc(-1.5 * var(--remgap)) }
		}
		& dd {
			margin: 0;
			font-weight: 400;
			animation: reveal_img_anim ease-in-out;
			animation-timeline: view();
			animation-range: entry 0 cover 50%;
			& img { width: 100% }
		}
		& dt+dd {
			line-height: 1.5;
			@media screen and (min-width: 480px) { grid-column: 1 }
			@media screen and (min-width: 960px) {
				margin-top: calc(-1.5 * var(--remgap));
			}
		}
		& dd+dd {
			line-height: 0;
			@media screen and (min-width: 480px) {
				grid-column: 2;
				grid-row: span 2 / span 2;
				width: 100%;
			}
		}
		& dd+dt {
			margin-top: calc(2 * var(--remgap));
			@media screen and (min-width: 480px) { margin-top: 0 }
		}
		/* https://github.com/w3c/csswg-drafts/issues/796 */
		& dd:first-of-type+dd {
			@media screen and (min-width: 480px) { grid-row-start: 1 }
		}
		& dd:nth-of-type(3)+dd {
			@media screen and (min-width: 480px) { grid-row-start: 3 }
		}
		& dd:nth-of-type(5)+dd {
			@media screen and (min-width: 480px) { grid-row-start: 5 }
		}
		@media screen and (min-width: 640px) { column-gap: calc(-2 * var(--remgap)) }
	}

	/*
	 * Second section stuff
	 */

	& section:nth-of-type(2) {
		position: relative;
		& img {
			position: absolute;
			width: 100%;
			height: 100%;
			inset: 0;
			z-index: -1;
			object-fit: cover;
			object-position: 50% 50%;
		}
		& h3 {
			position: relative;
			margin: 0 auto;
			max-width: var(--maxwidth);
			z-index: 1;
			line-height: 1.125;
			text-align: center;
			text-wrap: balance;
			font-size: 2em;
			font-weight: 500;
			color: var(--color-w0);
			text-shadow: 0 0 calc(2 * var(--remgap)) var(--color-b0);
			@media screen and (min-width: 640px) { font-size: 2.5em }
			@media screen and (min-width: 960px) { font-size: 3em }
		}
		&>div {
			display: flex;
			flex-flow: column nowrap;
			flex-grow: 1;
			justify-items: center;
			align-items: center;
			gap: calc(2 * var(--remgap));
			margin-top: calc(2 * var(--remgap));
			margin-inline: auto;
			max-width: var(--maxwidth);
			z-index: 1;
			color: var(--color-b0);
			counter-reset: steps;
			@media screen and (min-width: 640px) {
				flex-flow: row nowrap;
				align-items: flex-start;
			}
			@media screen and (min-width: 960px) { gap: calc(4 * var(--remgap)) }
		}
		& figure {
			flex: 1 1 auto;
			margin: 0;
			text-align: center;
			@media screen and (min-width: 640px) { flex: 1 1 33.333% }
			& svg {
				height: calc(20 * var(--remgap));
				@media screen and (min-width: 640px) { height: unset }
			}
			& figcaption>* {
				margin: 0;
				line-height: 1.125;
				color: var(--color-w0);
				text-shadow: var(--textshadow);
			}
			& h4 {
				font-size: 2em;
				font-weight: 800;
				font-style: italic;
				counter-increment: steps;
				&::before { content: '#' counter(steps) ' \2022\ ' }
			}
			& p {
				text-wrap: balance;
				font-size: 1.125em;
				font-weight: 500;
			}
		}
		@media screen and (min-width: 960px) { row-gap: calc(2 * var(--remgap)) }
	}

	/*
	 * Third section stuff
	 */

	& section:nth-of-type(3) {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		gap: var(--remgap);
		margin-inline: auto;
		max-width: var(--maxwidth);
		& h3 {
			display: block;
			margin: 0;
			width: 100%;
			line-height: 1.25;
			font-size: 1.5em;
			font-weight: 900;
			text-align: center;
			text-wrap: balance;
			& svg {
				width: .75em;
				height: .75em;
				vertical-align: baseline;
				color: var(--color-y0);
			}
			@media screen and (min-width: 640px) {
				align-self: end;
				grid-column: 2;
				grid-row: 1;
				font-size: 2em;
				text-align: left;
			}
		}
		& picture {
			line-height: 0;
			& img {
				width: 100%;
				@media screen and (min-width: 640px) {
					height: 100%;
					object-fit: cover;
					object-position: 50% 50%;
				}
			}
			@media screen and (min-width: 640px) {
				grid-column: 1;
				grid-row: 1 / span 5;
				align-self: center;
				height: 100%;
			}
		}
		& p {
			margin: 0;
			line-height: 1.5;
			font-weight: 400;
			@media screen and (min-width: 640px) {
				grid-column: 2;
				font-size: 1.125em;
			}
			@media screen and (min-width: 960px) { font-size: 1.25em }
		}
		& a {
			padding: calc(var(--remgap) / 2) calc(2 * var(--remgap));
			border-radius: calc(var(--remgap) / 2);
			line-height: 1;
			font-size: 1.5em;
			font-weight: 800;
			font-style: italic;
			color: var(--color-w0);
			text-decoration: none;
			background-color: var(--color-b0);
			cursor: pointer;
			&:hover { 
				color: var(--color-b0);
				background-color: var(--color-g0);
			}
			@media screen and (min-width: 640px) {
				padding: calc(var(--remgap) / 2) calc(4 * var(--remgap));
				justify-self: start;
				align-self: start;
				grid-column: 2;
			}
		}
		@media screen and (min-width: 640px) {
			column-gap: calc(2 * var(--remgap));
			grid-template-columns: repeat(2, 1fr);
		}
		@media screen and (min-width: 960px) { column-gap: calc(4 * var(--remgap)) }
	}

	/*
	 * Fourth section stuff
	 */

	& section:nth-of-type(4) {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		gap: calc(2 * var(--remgap));
		margin-inline: auto;
		max-width: var(--maxwidth);
		& h3 {
			display: block;
			margin: 0;
			width: 100%;
			line-height: 1.25;
			font-size: 1.5em;
			font-weight: 400;
			font-stretch: 85%;
			text-align: center;
			text-wrap: balance;
			@media screen and (min-width: 480px) {
				grid-column: 1 / span 2;
				grid-row: 1;
				font-size: 2em;
			}
			@media screen and (min-width: 960px) { grid-column: 1 / span 4 }
		}
		& div {
			display: flex;
			flex-flow: column nowrap;
			row-gap: calc(var(--remgap) / 2);
		}
		& img {
			width: 100%;
			height: calc(15 * var(--remgap));
			object-fit: cover;
			object-position: 50% 50%;
			line-height: 0;
			@media screen and (min-width: 640px) { height: calc(20 * var(--remgap)) }
			@media screen and (min-width: 1280px) { height: calc(25 * var(--remgap)) }
		}
		& h4 {
			display: block;
			margin: 0;
			width: 100%;
			line-height: 1.25;
			font-size: 1.25em;
			font-weight: 800;
			font-style: italic;
			text-align: center;
			@media screen and (min-width: 640px) { text-align: left }
		}
		& p {
			display: -webkit-box;
			margin: 0;
			line-height: 1.5;
			font-weight: 400;
			@media screen and (min-width: 480px) { font-size: 1.125em }
			@media screen and (min-width: 960px) { font-size: 1.25em }
		}
		&>div>a {
			margin: 0;
			line-height: 1.5;
			font-weight: 500;
			text-align: right;
			color: var(--color-b0);
			&:hover { color: var(--color-r0) }
			&::before { content: '(' }
			&::after { content: ')' }
		}
		&>a {
			padding: calc(var(--remgap) / 2) calc(2 * var(--remgap));
			border-radius: calc(var(--remgap) / 2);
			line-height: 1;
			font-size: 1.5em;
			font-weight: 800;
			font-style: italic;
			text-align: center;
			text-decoration: none;
			color: var(--color-w0);
			background-color: var(--color-g0);
			cursor: pointer;
			&:hover { 
				color: var(--color-w0);
				background-color: var(--color-b0);
			}
			@media screen and (min-width: 480px) {
				padding: calc(var(--remgap) / 2) calc(4 * var(--remgap));
				justify-self: center;
				grid-column: 1 / span 2;
				grid-row: 4;
			}
			@media screen and (min-width: 960px) {
				grid-column: 1 / span 4;
				grid-row: 3;
			}
		}
		@media screen and (min-width: 480px) { grid-template-columns: repeat(2, 1fr) }
		@media screen and (min-width: 640px) { gap: calc(4 * var(--remgap)) calc(2 * var(--remgap)) }
		@media screen and (min-width: 960px) { grid-template-columns: repeat(4, 1fr) }
	}

	/*
	 * Fifth section stuff
	 */

	& section:nth-of-type(5) {
		display: flex;
		flex-flow: column nowrap;
		gap: var(--remgap);
		margin-inline: auto;
		width: calc(100% - 2 * var(--remgap));
		max-width: var(--maxwidth);
		& h3 {
			display: block;
			margin: 0;
			width: 100%;
			line-height: 1.25;
			font-size: 1.5em;
			font-weight: 900;
			text-align: center;
			text-wrap: balance;
			& svg {
				width: .75em;
				height: .75em;
				vertical-align: baseline;
				color: var(--color-g0);
			}
			@media screen and (min-width: 640px) {
				align-self: end;
				grid-column: 2;
				grid-row: 1;
				font-size: 2em;
				text-align: left;
			}
		}
		& p {
			margin: 0;
			line-height: 1.25;
			font-weight: 500;
		}
		& table {
			margin: 0;
			padding: 0;
			width: 100%;
			border-collapse: collapse;
			& thead {
				position: absolute;
				margin: -1px;
				padding: 0;
				width: 1px;
				height: 1px;
				overflow: hidden;
				clip: rect(0 0 0 0);
				border-bottom: 1px solid var(--color-d1);
				@media screen and (min-width: 960px) {
					position: initial;
					margin: 0;
					width: auto;
					height: auto;
					overflow: visible;
					clip: initial;
				}
			}
			& th {
				display: block;
				border-bottom: 1px solid var(--color-d1);
				text-align: start;
				@media screen and (min-width: 960px) {
					display: table-cell;
					border-bottom: none;
				}
			}
			& tr {
				display: block;
				@media screen and (min-width: 960px) { display: table-row }
			}
			& tr+tr {
				margin-top: var(--remgap);
				@media screen and (min-width: 960px) { margin-top: 0 }
			}
			& td {
				display: block;
				text-align: end;
				@media screen and (min-width: 960px) {
					display: table-cell;
					text-align: start;
				}
				&::before {
					float: inline-start;
					content: attr(data-feature);
					font-weight: 700;
				}
			}
		}
		@media screen and (min-width: 640px) { width: calc(100% - 4 * var(--remgap)) }
		@media screen and (min-width: 960px) {
			& table td::before { display: none }
		}
	}

	/*
	 * Sixth section stuff
	 */

	& section:nth-of-type(6) {
		display: grid;
		grid-template-columns: minmax(min-content, var(--maxwidth));
		justify-content: center;
		align-items: center;
		margin-inline: calc(-1 * var(--remgap));
		background-color: var(--color-d1);
		& h3,
		& p {
			margin: 0 var(--remgap);
			@media screen and (min-width: 640px) { margin: 0 }
		}
		& h3 {
			line-height: 1.125;
			font-size: 2em;
			font-weight: 800;
			font-style: italic;
			text-align: center;
			text-wrap: balance;
			color: var(--color-r0);
			& svg {
				width: .75em;
				height: .75em;
				vertical-align: baseline;
			}
			@media screen and (min-width: 640px) { font-size: 2.5em }
			@media screen and (min-width: 960px) { font-size: 3em }
		}
		& p {
			line-height: 1.25;
			text-align: center;
			text-wrap: balance;
			font-weight: 500;
			color: color-mix(in srgb, var(--color-d0) 80%, var(--color-b0) 30%);
		}
		& div {
			display: grid;
			grid-template-rows: 1fr 1fr min-content;
			gap: var(--remgap);
			justify-content: center;
			align-items: stretch;
			margin-top: var(--remgap);
			padding: var(--remgap);
			background-color: var(--color-d2);
			@media screen and (min-width: 640px) {
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: 1fr min-content;
				gap: 0 calc(2 * var(--remgap));
				margin-top: calc(2 * var(--remgap));
				padding: var(--remgap) calc(2 * var(--remgap));
			}
		}
		& figure {
			display: flex;
			flex-flow: column-reverse nowrap;
			justify-content: center;
			align-items: start;
			margin: 0;
			& svg {
				flex: 1 0 auto;
				width: 100%;
			}
		}
		& figcaption {
			width: 100%;
			text-align: center;
			& h5 {
				margin: 0;
				line-height: 1.125;
				font-weight: 700;
				font-size: 1.25em;
				text-wrap: balance;
				@media screen and (min-width: 640px) { font-size: 1.5em }
			}
			& span {
				display: block;
				line-height: 1.25;
				font-weight: 500;
				text-wrap: balance;
				@media screen and (min-width: 640px) { font-size: 1.125em }
			}
			@media screen and (min-width: 640px) { height: unset }
		}
		& h4 {
			margin: 0;
			line-height: 1.25;
			font-weight: 700;
			font-size: 1.25em;
			text-align: center;
			@media screen and (min-width: 640px) {
				grid-column: 1 / -1;
				font-size: 1.5em;
				text-wrap: balance;
			}
		}
		&>span {
			display: block;
			font-size: .875em;
			font-weight: 400;
			text-align: center;
			@media screen and (min-width: 640px) { text-align: left }
		}
		@media screen and (min-width: 640px) { margin-inline: calc(-2 * var(--remgap)) }
		@media screen and (min-width: 960px) { margin-inline: 0 }
	}

	/*
	 * Seventh section stuff
	 */

	& section:nth-of-type(7) {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		gap: var(--remgap);
		margin-inline: auto;
		max-width: var(--maxwidth);
		& h3 {
			display: block;
			margin: 0;
			width: 100%;
			line-height: 1.25;
			font-size: 1.5em;
			font-weight: 400;
			font-stretch: 85%;
			text-align: center;
			text-wrap: balance;
			& svg {
				margin-left: -.5em;
				width: 1.5em;
				vertical-align: baseline;
				color: var(--color-r0);
			}
			@media screen and (min-width: 640px) {
				align-self: end;
				grid-column: 2;
				grid-row: 1;
				font-size: 2em;
				text-align: left;
			}
		}
		& picture {
			line-height: 0;
			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: 50% 50%;
			}
			@media screen and (min-width: 640px) {
				grid-column: 1;
				grid-row: 1 / span 2;
			}
		}
		& p {
			margin: 0;
			line-height: 1.5;
			font-weight: 400;
			@media screen and (min-width: 640px) {
				grid-column: 2;
				grid-row: 2;
				font-size: 1.125em;
			}
			@media screen and (min-width: 960px) { font-size: 1.25em }
		}
		@media screen and (min-width: 640px) {
			column-gap: calc(2 * var(--remgap));
			grid-template-columns: repeat(2, 1fr);
		}
		@media screen and (min-width: 960px) {
			grid-template-rows: repeat(2, 1fr);
			column-gap: calc(4 * var(--remgap));
		}
	}

	/*
	 * Eight (and last) section stuff
	 */

	& section:last-of-type {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		gap: var(--remgap);
		margin-inline: auto;
		max-width: var(--maxwidth);
		& h3 {
			display: block;
			margin: 0;
			width: 100%;
			line-height: 1.25;
			font-size: 1.5em;
			font-weight: 400;
			font-stretch: 85%;
			text-align: center;
			text-wrap: balance;
			& svg {
				margin-left: -.5em;
				width: 1.5em;
				vertical-align: baseline;
				color: var(--color-r0);
			}
			@media screen and (min-width: 640px) {
				align-self: end;
				grid-column: 1;
				grid-row: 1;
				font-size: 2em;
				text-align: left;
			}
		}
		& picture {
			line-height: 0;
			& img { width: 100% }
			@media screen and (min-width: 640px) {
				grid-column: 2;
				grid-row: 1 / span 3;
			}
		}
		& ul {
			margin: 0;
			padding-inline-start: var(--emgap);
			line-height: 1.5;
			font-weight: 400;
			& li::marker { color: var(--color-r0) }
			@media screen and (min-width: 640px) {
				grid-column: 1;
				grid-row: 2;
				font-size: 1.125em;
			}
			@media screen and (min-width: 960px) { font-size: 1.25em }
		}
		& a {
			padding: calc(var(--remgap) / 2) calc(2 * var(--remgap));
			border-radius: calc(var(--remgap) / 2);
			line-height: 1;
			font-size: 1.5em;
			font-weight: 800;
			font-style: italic;
			color: var(--color-w0);
			text-decoration: none;
			background-color: var(--color-g0);
			cursor: pointer;
			&:hover { 
				color: var(--color-w0);
				background-color: var(--color-b0);
			}
			@media screen and (min-width: 640px) {
				padding: calc(var(--remgap) / 2) calc(4 * var(--remgap));
				justify-self: start;
				align-self: start;
				grid-column: 1;
				grid-row: 3;
			}
		}
		@media screen and (min-width: 640px) {
			column-gap: calc(2 * var(--remgap));
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: 1fr min-content 1fr;
		}
		@media screen and (min-width: 960px) { column-gap: calc(4 * var(--remgap)) }
	}
	@media screen and (min-width: 640px) { margin-top: calc(-8 * var(--remgap)) }
}

/*
 * Internal page
 */

article {
	position: relative;
	margin-top: calc(-1 * var(--remgap));
	counter-reset: section;
	background: url(../img/icons.svg#background-content-view) repeat 50% 50%;
	background-size: 240px 160px;
	&>div:first-child {
		position: relative;
		display: block;
		margin-block-start: calc(-2 * var(--remgap));
		width: 100%;
		overflow: hidden;
		z-index: 1;
		& img {
			position: absolute;
			width: 100%;
			height: 100%;
			inset: 0;
			z-index: -1;
			object-fit: cover;
			object-position: 50% 50%;
			filter: brightness(.9) grayscale(.1);
		}
		@media screen and (min-width: 960px) { margin-block-start: 0 }
		& hgroup {
			margin-inline: auto;
			padding: 8rem 0 2rem;
			width: calc(100% - 2 * var(--remgap));
			max-width: calc(var(--maxwidth) * .75);
			& h3,
			& h4 {
				display: block;
				margin: 0 auto;
				width: 100%;
				max-width: var(--maxwidth);
				text-align: center;
				text-wrap: balance;
				color: var(--color-w0);
				text-shadow: 0 0 .5em var(--color-b0);
			}
			& h3 {
				line-height: 1.125em;
				font-size: 2em;
				font-weight: 800;
				@media screen and (min-width: 640px) { font-size: 2.5em }
				@media screen and (min-width: 960px) { font-size: 3em }
			}
			& h4 {
				line-height: 1.25em;
				margin-top: .5em;
				font-size: 1.5em;
				font-weight: 500;
			}
			@media screen and (min-width: 640px) {
				padding-block-start: 12rem;
				width: calc(100% - 4 * var(--remgap));
			}
		}
	}
	& section {
		position: relative;
		display: grid;
		gap: var(--remgap);
		margin-block: 4rem;
		margin-inline: auto;
		width: calc(100% - 4 * var(--remgap));
		max-width: var(--maxwidth);
		counter-increment: section;
		& h5,
		& p,
		& ol,
		& ul,
		& dl {
			display: block;
			margin: 0 auto;
		}
		& h5 {
			position: relative;
			display: inline-flex;
			column-gap: .5em;
			width: 100%;
			line-height: 1.125;
			font-size: 1.5em;
			font-weight: 700;
			text-wrap: balance;
			.statistics &::before {
				margin: 0;
				content: counter(section) '.';
				font-size: 1.5em;
				font-weight: 400;
				color: var(--color-r0);
			}
			@media screen and (min-width: 640px) {
				align-items: flex-end;
				.statistics &::before {
					display: block;
					font-size: 2em;
					margin: 0 0 -.125em;
				}
			}
			@media screen and (min-width: 960px) {
				line-height: 1.25;
				font-size: 2em;
				.statistics &::before { font-size: 4em }
			}
		}
		& p,
		& ol,
		& ul,
		& dl {
			width: 100%;
			line-height: 1.5;
			font-weight: 400;
			letter-spacing: -.00625em;
			&+p,
			&+ol,
			&+ul,
			&+dl { margin-block-start: calc(var(--emgap) / 2) }
			@media screen and (min-width: 640px) {
				width: auto;
				line-height: 1.5;
				font-size: 1.125em;
			}
		}
		& li::marker { color: var(--color-r0) }
		& dt {
			font-weight: bold;
			color: var(--color-r0);
		}
		& dd {
			display: block;
		}
		&>p { width: 100% }
		&+section::before {
			position: absolute;
			display: block;
			margin: 0 auto;
			width: 100%;
		    max-width: var(--maxwidth);
	        height: 1px;
	        inset-inline: 0;
	        inset-block-start: -2rem;
			content: '';
			background-color: var(--color-d1);
		}
		&.cards {
			display: grid;
			container-type: inline-size;
			margin: 0;
			padding: 0;
			width: 100%;
			background-color: transparent;
			& section {
				display: grid;
				grid-template-columns: 1fr;
				grid-auto-rows: minmax(min-content, max-content);
				grid-auto-flow: dense;
				row-gap: 0;
				margin-block: 0;
				padding-inline: calc(2 * var(--remgap));
				padding-block: calc(2 * var(--remgap));
				background: var(--color-g1);
				+ section::before { display: none }
				&>* { width: 100% }
				& h5 { 
					display: block;
					margin-block-end: 1rem;
					font-size: 1.5em;
					text-align: center;
					@media screen and (min-width: 640px) {
						grid-column: 2/3;
						text-align: start;
					}
				}
				& svg {
					grid-column: 1/2;
					grid-row: 1/9999;
					margin-inline: auto;
					margin-block-end: 1rem;
					padding: .75rem;
					border-radius: 50%;
					width: 1.5rem;
					height: 1.5rem;
					fill: none;
					background-color: var(--color-w0);
					stroke: color-mix(in srgb, var(--color-b0) 30%, var(--color-g1) 70%);
					stroke-width: 1.5px;
					@media screen and (min-width: 640px) { grid-column: 1/2 }
				}
				& ul {
					padding-inline-start: 0;
					& li::marker { color: color-mix(in srgb, var(--color-b0) 30%, var(--color-g1) 70%) }
				}
				@media screen and (min-width: 640px) {
					grid-template-columns: min-content 1fr;
					& ul,
					& ol,
					& p,
					& dl,
					& ul { grid-column: 2/3 }
				}
			}
			@container (min-width: 640px) { grid-template-columns: repeat(2, 1fr) }
			@media screen and (min-width: 960px) { width: calc(100% - 2rem) }
			@media screen and (min-width: 1280px) { max-width: calc(5 * (var(--maxwidth) / 8) + (0.5 * var(--remgap))) }
			&::before { display: none }
		}
		.statistics & {
			&>div {
				@media screen and (min-width: 960px) { grid-row: 2/3 }
			}
			&:nth-of-type(odd) {
				@media screen and (min-width: 960px) { grid-template-columns: 2fr 1fr }
				& h5,
				&>div {
					@media screen and (min-width: 960px) { grid-column: 1/2 }
				}
			}
			&:nth-of-type(even) {
				@media screen and (min-width: 960px) { grid-template-columns: 1fr 2fr }
				& h5,
				&>div {
					@media screen and (min-width: 960px) { grid-column: 2/3 }
				}
			}
			@media screen and (min-width: 960px) {
				grid-template-columns: repeat(2, 1fr);
				gap: calc(2 * var(--remgap)) calc(4 * var(--remgap));
				max-width: calc(var(--maxwidth) * .75);
			}
		}
		@media screen and (min-width: 960px) {
			margin-block: 8rem;
			.about &,
			.pricing &,
			.rewards &,
			.fundraising & { margin-block: 2rem }
			&+section::before { inset-block-start: -3rem }
		}
	}
	& figure {
		display: flex;
		flex-flow: column nowrap;
		gap: var(--emgap);
		margin: calc(2 * var(--remgap));
		width: calc(100% - 4 * var(--remgap));
		& picture {
			display: block;
			margin: 0 auto;
			line-height: 0;
		}
		& img { width: 100% }
		& figcaption {
			margin: 0 auto;
			max-width: var(--maxtextwidth);
			line-height: 1.5;
			text-align: center;
			@media screen and (min-width: 640px) {
				margin-inline-start: 0;
				text-align: start;
			}
		}
	}
	&>table {
		margin-inline: auto;
		padding: 2rem;
		width: calc(100% - 2 * var(--remgap));
		max-width: var(--maxwidth);
		background-color: var(--color-w0);
		& caption {
			margin-block-end: 1em;
			line-height: 1.5;
			font-size: 1.25em;
			font-weight: 600;
			font-style: oblique;
			color: var(--color-g0);
			@media screen and (min-width: 960px) { font-size: 2em }
		}
		& thead {
			position: absolute;
			margin: -1px;
			padding: 0;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			@media screen and (min-width: 960px) {
				position: initial;
				margin: 0;
				width: auto;
				height: auto;
				overflow: visible;
				clip: initial;
			}
		}
		& th {
			display: block;
			border-bottom: 1px solid var(--color-d1);
			text-align: start;
			@media screen and (min-width: 960px) {
				display: table-cell;
				border-bottom: none;
			}
		}
		& tr {
			display: block;
			@media screen and (min-width: 960px) { display: table-row }
		}
		& tr+tr {
			margin-top: var(--remgap);
			@media screen and (min-width: 960px) { margin-top: 0 }
		}
		& td {
			display: block;
			text-align: end;
			@media screen and (min-width: 960px) {
				display: table-cell;
				text-align: start;
			}
			&::before {
				float: inline-start;
				content: attr(data-feature);
				font-weight: 700;
			}
		}
		@media screen and (min-width: 640px) { width: calc(100% - 4 * var(--remgap)) }
		@media screen and (min-width: 960px) {
			margin-block: 2rem;
			font-size: 1.125em;
			& td::before { display: none }
		}
	}
	& aside {
		counter-reset: aside-description;
		&>* {
			padding-inline: 1rem;
			background-color: var(--color-d2);
		}
		& h5 {
			margin: 0;
			padding-block-start: 2rem;
			line-height: 1.25;
			font-size: 1.125em;
		}
		& dl {
			margin: 0;
			&:last-of-type { padding-block-end: 2rem }
		}
		& dt {
			font-weight: 600;
			font-style: oblique;
			counter-increment: aside-description;
			&::before {
				content: counter(aside-description) '. ';
			}
		}
		& dd,
		& ul {
			margin: 0;
			padding: 0;
			line-height: 1.5;
		}
		& ul { list-style-position: inside }
		& dd+dt {
			margin-block-start: 1em;
			padding-block-start: 1em;
			border-top: 1px solid var(--color-d1);
		}
		@media screen and (min-width: 960px) {
			margin: calc(var(--remgap) * 2);
			grid-column: 2 / 3;
			grid-row: 2 / 9999;
			&>* { max-width: calc(var(--maxwidth) / 3 - 2 * var(--remgap)) }
		}
		@media screen and (min-width: 1280px) { max-width: calc(3 * (var(--maxwidth) / 8) - (3.5 * var(--remgap))) }
	}
	&.about {
		& section {
			margin-block: calc(2 * var(--remgap));
			padding: calc(2 * var(--remgap));
			background-color: var(--color-w0);
		}
		@media screen and (min-width: 960px) {
			display: grid;
			grid-template-columns: calc(50dvw + (var(--maxwidth) / 6)) 1fr;
			&>div:first-child {
				grid-column: 1 / span 2;
				grid-row: 1 / 2;
			}
			&>section {
				grid-column: 1 / 2;
				justify-self: end;
				margin-inline: 0;
				padding-inline: calc(2 * var(--remgap));
				width: calc(100% - 6 * var(--remgap));
				max-width: calc(2 * (var(--maxwidth) / 3));
			}
		}
		@media screen and (min-width: 1280px) {
			grid-template-columns: calc(50dvw + (var(--maxwidth) / 8)) 1fr;
			& section { max-width: calc(5 * (var(--maxwidth) / 8) - (3.5 * var(--remgap))) }
			&>figure { max-width: calc(3 * (var(--maxwidth) / 8) - (2.5 * var(--remgap))) }
		}
	}
	&.fundraising {
		&>section:first-of-type {
			margin-block: 2rem 0;
			padding-inline: calc(2 * var(--remgap));
			padding-block: calc(2 * var(--remgap));
			background-color: var(--color-w0);
		}
	}
	&.pricing {
		position: relative;
		padding-block: calc(2 * var(--remgap));
		line-height: 1.5;
		&>section {
			margin: 0;
			padding-block: 2rem;
			width: 100%;
			max-width: 100%;
			& h5 {
				display: block;
				margin-inline: auto;
				text-align: center;
			}
			&+section::before { display: none }
			@media screen and (min-width: 960px) {
				width: calc(100% - 2rem);
				box-sizing: border-box;
			}
			@media screen and (min-width: 1280px) { max-width: calc(5 * (var(--maxwidth) / 8) + (0.5 * var(--remgap))) }
		}
		&>section:nth-of-type(1) {
			background-color: var(--color-g0);
			& h5 { color: var(--color-w0) }
			& ul {
				display: grid;
				gap: 2rem;
				margin-inline: auto;
				margin-block-start: 1rem;
				padding: 0;
				width: calc(100% - (4 * var(--remgap)));
				max-width: var(--maxwidth);
				list-style: none;
				& li {
					display: flex;
					flex-flow: column nowrap;
					gap: 1rem;
					padding: 2rem;
					color: var(--color-w0);
					background-color: color-mix(in srgb, var(--color-w0) 10%, var(--color-g0) 90%);
					&>* { text-align: center; }
					& strong { font-size: 3em }
					& b {
						flex: 1;
						line-height: 1.25;
					}
				}
				@media screen and (min-width: 960px) {
					grid-template-columns: repeat(3, 1fr);
					width: 100%;
				}
			}
			@media screen and (min-width: 960px) { margin-block-start: 2rem }
		}
		&>section:nth-of-type(2) {
			background-color: var(--color-w0);
			& h5 {
				font-style: oblique;
				color: var(--color-r0);
			}
			&>div {
				margin-inline: auto;
				padding-inline: 2rem;
				max-width: calc(var(--maxwidth) / 2);
				@media screen and (min-width: 960px) { max-width: 100% }
			}
			& ul { padding: 0 }
		}
		&>section:nth-of-type(3) {
			background-color: var(--color-r0);
			& h5 { color: var(--color-w0) }
			&>p {
				display: block;
				width: 100%;
				max-width: var(--maxwidth);
				text-align: center;
				text-wrap: balance;
				color: var(--color-w0);
			}
			& dl {
				display: grid;
				gap: 2rem;
				grid-template-columns: 1fr;
				grid-auto-flow: dense;
				margin-inline: auto;
				margin-block-start: 1rem;
				padding: 0;
				width: calc(100% - (4 * var(--remgap)));
				max-width: var(--maxwidth);
				& dt,
				& dd {
					margin: 0;
					padding-inline: 2rem;
					background-color: color-mix(in srgb, var(--color-r0) 85%, var(--color-w0) 15%);
					&:last-of-type {
					background-color: color-mix(in srgb, var(--color-r0) 10%, var(--color-w0) 90%);
					}
				}
				& dt {
					padding-block-start: 2rem;
					font-size: 1.25em;
					text-align: center;
					text-wrap: balance;
					color: color-mix(in srgb, var(--color-r0) 10%, var(--color-w0) 90%);
					&:last-of-type { color: color-mix(in srgb, var(--color-r0) 50%, var(--color-b0) 50%) }
				}
				& dd {
					margin-block-start: -2rem;
					padding-block-end: 2rem;
					color: color-mix(in srgb, var(--color-r0) 20%, var(--color-b0) 80%);
				}
				& svg {
					display: block;
					margin-inline: auto;
					margin-block-end: 1rem;
					padding: .75rem;
					width: 1.5rem;
					height: 1.5rem;
					fill: none;
					stroke: var(--color-g0);
					stroke-width: 1.5px;
				}
				& ul {
					margin-inline: 1rem;
					margin-block-start: 1rem;
					padding: 0;
				}
				& li {
					font-size: .875em;
					&::marker { color: var(--color-w0) }
					dt:last-of-type &::marker,
					dd:last-of-type &::marker { color: var(--color-r0) }
				}
				@media screen and (min-width: 960px) {
					grid-template-columns: repeat(2, 1fr);
					width: 100%;
					& dt:nth-of-type(odd),
					& dd:nth-of-type(odd) { grid-column: 1 / 2 }
					& dt:nth-of-type(even),
					& dd:nth-of-type(even) { grid-column: 2 / 3 }
				}
			}
		}
		& aside {
			background-color: color-mix(in srgb, var(--color-g0) 10%, var(--color-w0) 90%);
			& h5 {
				font-size: 1.5em;
				text-align: center;
				color: var(--color-b0);
				background-color: color-mix(in srgb, var(--color-g0) 10%, var(--color-w0) 90%);
				@media screen and (min-width: 960px) {
					padding-block-end: .5rem;
					font-size: 1.25em;
				}
			}
			& dl {
				display: grid;
				gap: 2rem;
				grid-template-columns: 1fr;
				grid-auto-flow: dense;
				margin-inline: auto;
				margin-block-start: 1rem;
				padding: 0;
				width: calc(100% - (4 * var(--remgap)));
				max-width: var(--maxwidth);
				background-color: transparent;
				& dt,
				& dd {
					margin: 0;
					padding-inline: 2rem;
					background-color: color-mix(in srgb, var(--color-g0) 10%, var(--color-w0) 90%);
					@media screen and (min-width: 960px) {
						padding-inline: 1rem;
						&+dt { border-top: 0 }
					}
				}
				& dt {
					padding-block-start: 2rem;
					font-size: 1.25em;
					text-align: center;
					text-wrap: balance;
					color: color-mix(in srgb, var(--color-g0) 50%, var(--color-b0) 50%);
					&::before { display: none }
					@media screen and (min-width: 960px) {
						padding-block-start: 0;
						font-size: 1em;
					}
				}
				& dd {
					margin-block-start: -2rem;
					padding-block-end: 2rem;
					color: color-mix(in srgb, var(--color-g0) 20%, var(--color-b0) 80%);
					@media screen and (min-width: 960px) {
						margin-block-start: 0;
						padding-block-end: 1rem;
					}
				}
				& svg {
					display: block;
					margin-inline: auto;
					margin-block-end: 1rem;
					padding: .75rem;
					width: 1.5rem;
					height: 1.5rem;
					fill: none;
					stroke: var(--color-g0);
					stroke-width: 1.5px;
					@media screen and (min-width: 960px) {
						margin-block-end: 0;
						padding: .25rem;
					}
				}
				& ul {
					margin-inline: 1rem;
					padding: 0;
					@media screen and (min-width: 960px) {
						margin-inline: 1rem;
						list-style-position: outside;
					}
				}
				& li {
					font-size: .875em;
					&::marker { color: var(--color-g0) }
				}
				@media screen and (min-width: 960px) {
					gap: 0;
					margin-inline: 0;
					margin-block-start: 0;
					width: 100%;
				}
			}
			@media screen and (min-width: 960px) { background-color: transparent }
		}
	}
	& .bottomline {
		position: relative;
		padding-block: calc(2 * var(--remgap));
		line-height: 1.5;
		font-size: 1.125em;
		background-color: var(--color-g0);
		&>* {
			margin-inline: auto;
			width: calc(100% - 2 * var(--remgap));
			max-width: calc(var(--maxwidth) / 2);
			@media screen and (min-width: 640px) { width: calc(100% - 4 * var(--remgap)) }
		}
		& h5 {
			margin: 0 auto 1em;
			line-height: 1.125;
			font-weight: 700;
			font-size: 1.5em;
			font-style: oblique;
			text-align: center;
			text-wrap: balance;
			color: var(--color-w0);
			&::before { display: none }
			@media screen and (min-width: 640px) { font-size: 2em }
		}
		& p,
		& li {
			font-weight: 500;
			color: var(--color-w0);
			@media screen and (min-width: 640px) { font-size: 1.125em }
		}
		&::before {
			position: absolute;
			display: block;
			margin: -.75em auto auto;
			border-radius: 50%;
			width: 1.5em;
			height: 1.5em;
			inset: 0;
			content: '!';
			text-align: center;
			line-height: 1.5;
			font-size: 2em;
			font-weight: 900;
			color: var(--color-g0);
			background-color: var(--color-w0);
		}
		aside & {
			@media screen and (min-width: 960px) {
				margin-block-start: 2em;
				padding-block: var(--remgap);
				font-size: 1em;
				&>* { width: 100% }
				& h5,
				& p,
				& li { font-size: 1em }
				&>:last-child { margin-block-end: 0 }
			}
		}
		@media screen and (min-width: 640px) { padding-block: calc(4 * var(--remgap)) }
	}
	& .references {
		position: relative;
		padding-block: calc(2 * var(--remgap));
		line-height: 1.5;
		background-color: var(--color-w0);
		& h5,
		& h6 {
			margin: 0;
			line-height: 1.125;
			text-align: center;
			text-wrap: balance;
			&::before { display: none }
		}
		& h5 {
			font-weight: 700;
			font-size: 1.5em;
			color: var(--color-b0);
			@media screen and (min-width: 640px) { font-size: 2em }
		}
		& h6 {
			font-weight: 400;
			font-size: 1.125em;
			color: var(--color-w0);
			@media screen and (min-width: 640px) { font-size: 1.25em }
		}
		& p,
		& li {
			font-weight: 500;
			color: color-mix(in srgb, var(--color-b0) 70%, var(--color-d2) 30%);
			@media screen and (min-width: 640px) { font-size: 1.125em }
		}
		& dl {
			display: grid;
			gap: 2rem;
			grid-template-columns: 1fr;
			grid-auto-flow: dense;
			margin-block-start: 2rem;
			margin-inline: auto;
			width: calc(100% - 2 * var(--remgap));
			max-width: var(--maxwidth);
			& dt,
			& dd {
				margin: 0;
				padding-inline: 1rem;
				background-color: color-mix(in srgb, var(--color-w0) 50%, var(--color-d2) 50%);
			}
			& dt {
				padding-block-start: 1rem;
				font-size: 1.25em;
				text-align: center;
				text-wrap: balance;
			}
			& dd {
				margin-block-start: -2rem;
				padding-block-end: 1rem;
			}
			@media screen and (min-width: 640px) { width: calc(100% - 4 * var(--remgap)) }
			@container (min-width: 640px) {
				grid-template-columns: repeat(2, 1fr);
				& dt:nth-of-type(odd),
				& dd:nth-of-type(odd) { grid-column: 1 / 2 }
				& dt:nth-of-type(even),
				& dd:nth-of-type(even) { grid-column: 2 / 3 }
			}
		}
		aside & {
			@media screen and (min-width: 960px) { grid-column: 1 / span 2 }
		}
		@media screen and (min-width: 640px) { padding-block: calc(4 * var(--remgap)) }
	}
	&:has(aside) {
		@media screen and (min-width: 960px) {
			display: grid;
			grid-template-columns: calc(50dvw + (var(--maxwidth)) / 6) 1fr;
			&>div:first-child {
				grid-column: 1 / span 2;
				grid-row: 1 / 2;
			}
			&>section,
			&>.bottomline,
			&>.pricing,
			&>.references {
				grid-column: 1 / 2;
				justify-self: end;
				margin-inline: 0;
				padding-inline: calc(2 * var(--remgap));
				width: calc(100% - 6 * var(--remgap));
				max-width: calc(2 * (var(--maxwidth) / 3));
			}
		}
		@media screen and (min-width: 1280px) {
			grid-template-columns: calc(50dvw + (var(--maxwidth) / 8)) 1fr;
			& section { max-width: calc(5 * (var(--maxwidth) / 8) - (3.5 * var(--remgap))) }
			&>.bottomline,
			&>.pricing,
			&>.references { max-width: calc(3 * (var(--maxwidth) / 4) - 4 * var(--remgap)) }
		}
	}
	@media screen and (min-width: 640px) { margin-top: calc(-8 * var(--remgap)) }
}

/*
 * Footer stuff
 */

footer {
	display: grid;
	gap: calc(2 * var(--remgap));
	justify-content: center;
	align-items: center;
	padding: calc(2 * var(--remgap)) var(--remgap);
	line-height: 0;
	color: var(--color-w0);
	background-color: var(--color-r0);
	transition: opacity 250ms ease-out;
	& *::selection { background-color: var(--color-g0) }
	& svg {
		margin-inline: auto;
		max-width: calc(20 * var(--remgap));
		@media screen and (min-width: 960px) { margin-left: 0 }
	}
	& h4 {
		margin: 0;
		font-size: 1.125em;
		text-align: center;
		text-wrap: balance;
		line-height: 1.25em;
		@media screen and (min-width: 960px) {
			align-self: start;
			font-size: 1.25em;
			text-align: left;
		}
	}
	& ul,
	& ol {
		margin: 0;
		line-height: 1.5;
		font-weight: 500;
	}
	& ul {
		@media screen and (min-width: 960px) {
			grid-column: 2;
			grid-row: 2;
			padding-inline-start: 0;
		}
	}
	& ol {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		column-gap: calc(2 * var(--remgap));
		row-gap: calc(var(--remgap) / 2);
		padding: 0;
		list-style: none;
		font-size: .875em;
		font-weight: 400;
		text-align: center;
		& li { position: relative }
		& li+li::before {
			display: none;
			position: absolute;
			margin: auto;
			inset-block: auto;
			left: calc(-1 * var(--remgap));
			width: 1px;
			height: 100%;
			content: '';
			background-color: color-mix(in srgb, var(--color-r0), var(--color-w0));
			@media screen and (min-width: 640px) { display: block }
		}
		& a {
			color: var(--color-w0);
			text-decoration: none;
			&:hover { text-decoration: underline }
		}
		@media screen and (min-width: 640px) { flex-flow: row nowrap }
		@media screen and (min-width: 960px) {
			grid-column: 1 / span 2;
			grid-row: 3;
		}
	}
	@media screen and (min-width: 960px) {
		grid-template-columns: repeat(2, minmax(min-content, calc(var(--maxwidth) / 2)));
		padding: calc(2 * var(--remgap));
	}
}

/*
 * Loading animation
 */

#loader {
	position: fixed;
	width: 100%;
	height: 100%;
	transform: translateY(0);
	transition: all 250ms ease-out;
	& svg {
		position: absolute;
		display: block;
		margin: auto;
		width: 100%;
		max-width: calc(40 * var(--remgap));
		inset: 0;
	}
}

@keyframes reveal_img_anim {
	0% {
		opacity: 0.2;
		transform: translateX(var(--remgap));
	}
	75% {
		opacity: 0.2;
		transform: translateX(var(--remgap));
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes reveal_anim {
	0% {
		opacity: 0;
		transform: translateX(var(--remgap));
	}
	75% {
		opacity: 0;
		transform: translateX(var(--remgap));
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@font-face {
	font-family: 'Asap';
	src: url('../fonts/Asap\[wdth\,wght\].woff2') format('woff2-variations');
	font-weight: 100 900;
	font-stretch: 75% 125%;
	font-style: normal;
}

@font-face {
	font-family: 'Asap';
	src: url('../fonts/Asap-Italic\[wdth\,wght\].woff2') format('woff2-variations');
	font-weight: 100 900;
	font-stretch: 75% 125%;
	font-style: italic;
}