:root {
	--brand-ink: #082f49;
	--brand-deep: #0b4f59;
	--brand-teal: #087f8c;
	--brand-cyan: #0ea5c6;
	--brand-mint: #ccefe9;
	--brand-mint-soft: #ebf8f5;
	--brand-canvas: #f4f7f5;
	--brand-line: #d6e3df;
	--brand-copy: #425b63;
}

html,
body.brand-page {
	background: var(--brand-canvas);
}

body.brand-page {
	color: var(--brand-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

.brand-page .brand-hero {
	border-color: rgba(8, 79, 89, 0.2);
	background: var(--brand-mint);
	box-shadow: inset 0 -1px 0 rgba(8, 47, 73, 0.08);
}

.brand-page .hero-inner,
.brand-page main,
.brand-page .footer-inner {
	width: min(1200px, calc(100% - 32px));
}

.brand-page .hero-inner {
	padding: 14px 0;
}

.brand-page .logo {
	width: min(150px, 42vw);
}

.brand-page h1,
.brand-page h2 {
	color: var(--brand-ink);
	letter-spacing: 0;
}

.brand-page h1 {
	font-weight: 800;
}

.brand-page .lead,
.brand-page p,
.brand-page li {
	color: var(--brand-copy);
	font-weight: 500;
}

.brand-page .lead {
	font-weight: 500;
}

.brand-page a {
	color: var(--brand-teal);
}

.brand-page .button {
	border-color: var(--brand-deep);
	border-radius: 8px;
	background: var(--brand-deep);
	color: #ffffff;
	font-weight: 700;
	box-shadow: rgba(8, 47, 73, 0.14) 0 4px 10px;
}

.brand-page .button:hover {
	background: var(--brand-ink);
	color: #ffffff;
}

.brand-page .button.secondary {
	border-color: rgba(8, 127, 140, 0.34);
	background: #ffffff;
	color: var(--brand-deep);
	box-shadow: none;
}

.brand-page .button.secondary:hover {
	border-color: var(--brand-teal);
	background: var(--brand-mint-soft);
	color: var(--brand-deep);
}

.brand-page .mood-spectrum {
	display: grid;
	height: 4px;
	grid-template-columns: repeat(5, 1fr);
}

.brand-page .mood-spectrum span:nth-child(1) { background: #e11d48; }
.brand-page .mood-spectrum span:nth-child(2) { background: #f97316; }
.brand-page .mood-spectrum span:nth-child(3) { background: #eab308; }
.brand-page .mood-spectrum span:nth-child(4) { background: #14b8a6; }
.brand-page .mood-spectrum span:nth-child(5) { background: #22c55e; }

.privacy-page main {
	gap: 14px;
	padding: 24px 0 36px;
}

.privacy-page section {
	border-color: var(--brand-line);
	border-radius: 8px;
	box-shadow: rgba(8, 47, 73, 0.06) 0 4px 14px;
}

.privacy-page section.notice {
	border-top: 3px solid var(--brand-cyan);
	border-right-color: var(--brand-line);
	border-bottom-color: var(--brand-line);
	border-left-color: var(--brand-line);
	background: #ffffff;
}

.brand-page footer {
	border-color: var(--brand-line);
}

.not-found-page main {
	width: 100%;
	background: var(--brand-canvas);
	place-items: center;
}

.not-found-page .card {
	position: relative;
	overflow: hidden;
	margin: auto;
	border-color: var(--brand-line);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: rgba(8, 47, 73, 0.14) 0 18px 44px;
}

.not-found-page .mood-spectrum {
	position: absolute;
	inset: 0 0 auto;
}

.not-found-page .status {
	border-color: rgba(8, 127, 140, 0.25);
	background: var(--brand-mint-soft);
	color: var(--brand-teal);
}

.not-found-page .footer-inner a {
	color: var(--brand-teal);
}

@media (min-width: 720px) {
	.brand-page .hero-inner {
		grid-template-columns: 166px minmax(0, 1fr) auto;
		padding: 16px 0;
	}

	.brand-page .logo {
		width: 166px;
	}
}

@media (max-width: 719px) {
	.brand-page .hero-inner {
		text-align: center;
	}

	.brand-page .logo {
		margin-inline: auto;
	}

	.brand-page .hero-actions {
		justify-content: center;
	}
}