/* Colours follow Koridora, the site this page sends visitors to. */
:root {
	--background: hsl(35 30% 97%);
	--surface: #fff;
	--border: hsl(190 20% 88%);
	--text: hsl(190 66% 11%);
	--muted: hsl(190 15% 35%);
	--primary: hsl(190 80% 31%);
	--primary-hover: hsl(190 80% 25%);
	--on-primary: #fff;
	--accent: hsl(17 58% 42%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: hsl(190 70% 6%);
		--surface: hsl(190 50% 10%);
		--border: hsl(190 30% 20%);
		--text: hsl(35 30% 90%);
		--muted: hsl(190 12% 70%);
		--primary: hsl(190 70% 40%);
		--primary-hover: hsl(190 70% 46%);
		--on-primary: hsl(190 70% 6%);
		--accent: hsl(17 70% 68%);
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 32px 16px;
	background: var(--background);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}

main {
	width: 100%;
	max-width: 560px;
}

.brand {
	margin: 0 0 32px;
	color: var(--accent);
	font-weight: 700;
}

h1 {
	margin: 0 0 12px;
	font-size: clamp(30px, 7vw, 40px);
	line-height: 1.15;
}

.lead {
	margin: 0 0 32px;
	color: var(--muted);
}

section {
	padding: 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
}

h2 {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
}

section p {
	margin: 0 0 20px;
}

a {
	color: var(--primary);
}

.button {
	display: inline-block;
	padding: 12px 20px;
	background: var(--primary);
	color: var(--on-primary);
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

.button:hover {
	background: var(--primary-hover);
}

.carrier {
	margin: 20px 0 0;
	color: var(--muted);
	font-size: 15px;
}