*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--background: oklch(1 0 0);
	--foreground: oklch(0.141 0.006 278.53);
	--primary: oklch(0.4845 0.2297 278.53);
	--muted-foreground: oklch(0.552 0.02 278.53);
	--radius: 0.45rem;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100dvh;
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen,
		Ubuntu,
		'Helvetica Neue',
		Arial,
		sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--foreground);
	background: var(--background);
}

.page {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100dvh;
	overflow: hidden;
	padding: 1.5rem;
}

.wash {
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
}

.wash-1 {
	top: -30%;
	right: -20%;
	width: min(720px, 90vw);
	height: min(720px, 90vw);
	background: radial-gradient(
		circle,
		oklch(0.4845 0.2297 278.53 / 0.12) 0%,
		oklch(0.4845 0.2297 278.53 / 0.04) 45%,
		transparent 72%
	);
}

.wash-2 {
	bottom: -35%;
	left: -25%;
	width: min(600px, 85vw);
	height: min(600px, 85vw);
	background: radial-gradient(
		circle,
		oklch(0.35 0.16 300 / 0.08) 0%,
		oklch(0.35 0.16 300 / 0.03) 50%,
		transparent 75%
	);
}

.content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 32rem;
	text-align: center;
}

.logo {
	display: block;
	width: auto;
	height: 1.75rem;
	margin: 0 auto 2rem;
	filter: brightness(0) saturate(100%) invert(18%) sepia(96%) saturate(4962%) hue-rotate(254deg)
		brightness(72%) contrast(120%);
}

.eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary);
}

h1 {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 5vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--foreground);
}

.lead {
	margin: 0;
	font-size: clamp(1rem, 2.5vw, 1.125rem);
	line-height: 1.6;
	color: var(--muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
	.wash {
		animation: none;
	}
}

@media screen and (max-width: 380px) {
	.content {
		max-width: 100%;
	}

	.logo {
		height: 1.5rem;
		margin-bottom: 1.5rem;
	}
}