/* Chub's legal and support pages. Colors follow the app (chub/Core/Theme/Theme.swift). */
:root {
	--canvas: #191519;
	--navy: #021a33;
	--card: #2e2f2f;
	--brand: #7c70db;
	--ink: #e9e5df;
	--ink-soft: #d7cec6;
	--muted: #929292;
	--hairline: #3e3e3e;
	color-scheme: dark;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--canvas);
	color: var(--ink-soft);
	font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

header {
	background: var(--navy);
	border-bottom: 1px solid var(--hairline);
}

.bar {
	max-width: 760px;
	margin: 0 auto;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
}

.brand img { width: 32px; height: 32px; border-radius: 8px; }

nav { margin-left: auto; display: flex; gap: 16px; font-size: 15px; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }

main {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 16px 48px;
}

h1 { color: var(--ink); font-size: 30px; line-height: 1.2; margin: 0 0 6px; }
h2 { color: var(--ink); font-size: 20px; margin: 36px 0 8px; }
h3 { color: var(--ink); font-size: 17px; margin: 0 0 4px; }
p, ul { margin: 0 0 12px; }
ul { padding-left: 22px; }
li { margin-bottom: 4px; }
strong { color: var(--ink); }
a { color: var(--brand); }

.meta { color: var(--muted); font-size: 14px; margin-bottom: 24px; }

.card {
	background: var(--card);
	border-radius: 14px;
	padding: 18px 20px;
	margin: 16px 0;
}

.card ul:last-child, .card p:last-child { margin-bottom: 0; }

.button {
	display: inline-block;
	background: var(--brand);
	color: #fff;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 999px;
	text-decoration: none;
	margin: 8px 0 4px;
}

.faq .card h3 { margin-bottom: 6px; }

footer {
	border-top: 1px solid var(--hairline);
	color: var(--muted);
	font-size: 14px;
}

footer .bar { flex-wrap: wrap; padding: 20px 16px; }
footer a { color: var(--muted); }