/* BabbleBlue legal pages — shared styles (palette lifted from index.html) */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
	--blue-600: #2563EB;
	--blue-700: #1E40AF;
	--blue-800: #1E3A8A;
	--blue-950: #0F172A;
	--blue-50: #EFF6FF;
	--orange-500: #F97316;
	--orange-400: #FB923C;
	--slate-900: #0F172A;
	--slate-800: #1E293B;
	--slate-700: #334155;
	--slate-500: #64748B;
	--slate-400: #94A3B8;
	--slate-300: #CBD5E1;
	--slate-200: #E2E8F0;
	--slate-100: #F1F5F9;
	--white: #FFFFFF;
}

body {
	font-family: 'DM Sans', sans-serif;
	color: var(--slate-800);
	background: var(--white);
	line-height: 1.7;
}

/* ---- NAV ---- */
.nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--slate-200);
}
.nav-inner {
	max-width: 900px; margin: 0 auto;
	padding: 0 24px;
	display: flex; align-items: center; justify-content: space-between;
	height: 72px;
}
.nav-logo img { height: 40px; width: auto; display: block; }
.nav-back {
	text-decoration: none; color: var(--slate-700);
	font-weight: 500; font-size: 15px;
	transition: color 0.2s;
}
.nav-back:hover { color: var(--blue-600); }

/* ---- HERO ---- */
.legal-hero {
	background: linear-gradient(160deg, var(--blue-950) 0%, var(--blue-800) 60%, var(--blue-700) 100%);
	padding: 152px 24px 56px;
}
.legal-hero-inner { max-width: 900px; margin: 0 auto; }
.legal-label {
	font-family: 'Exo 2', sans-serif;
	font-weight: 700; font-size: 13px;
	letter-spacing: 3px; text-transform: uppercase;
	color: var(--orange-400);
	margin-bottom: 12px;
}
.legal-hero h1 {
	font-family: 'Exo 2', sans-serif;
	font-weight: 800; font-size: clamp(30px, 4vw, 44px);
	line-height: 1.15;
	color: var(--white);
	margin-bottom: 12px;
}
.legal-version { color: rgba(255,255,255,0.6); font-size: 15px; }

/* ---- DOCUMENT ---- */
.legal-doc {
	max-width: 900px; margin: 0 auto;
	padding: 56px 24px 80px;
}
.legal-doc .intro {
	font-style: italic;
	color: var(--slate-500);
	margin-bottom: 32px;
}
.legal-doc section { margin-bottom: 40px; }
.legal-doc h2 {
	font-family: 'Exo 2', sans-serif;
	font-weight: 700; font-size: 22px;
	color: var(--slate-900);
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--slate-200);
}
.legal-doc p { margin-bottom: 16px; }
.legal-doc ol { padding-left: 24px; }
.legal-doc ol > li { margin-bottom: 14px; padding-left: 6px; }
.legal-doc ol.alpha { list-style-type: lower-alpha; margin-top: 12px; }
.legal-doc ol.alpha > li { margin-bottom: 10px; }
.legal-doc a { color: var(--blue-600); }
.legal-doc a:hover { color: var(--blue-700); }

.callout {
	background: #FFF7ED;
	border-left: 4px solid var(--orange-500);
	border-radius: 0 12px 12px 0;
	padding: 20px 24px;
	margin-bottom: 32px;
	font-weight: 600;
	color: var(--slate-800);
}

.legal-doc table {
	width: 100%; border-collapse: separate; border-spacing: 0;
	border: 1px solid var(--slate-200);
	border-radius: 12px;
	overflow: hidden;
	font-size: 15px;
	margin: 16px 0 8px;
}
.legal-doc thead th {
	background: var(--slate-900);
	color: var(--white);
	font-family: 'Exo 2', sans-serif;
	font-weight: 700; font-size: 15px;
	padding: 14px 20px;
	text-align: left;
}
.legal-doc tbody td {
	padding: 12px 20px;
	border-bottom: 1px solid var(--slate-100);
	color: var(--slate-700);
}
.legal-doc tbody tr:last-child td { border-bottom: none; }

.sig-note {
	font-style: italic;
	color: var(--slate-500);
	border-top: 1px solid var(--slate-200);
	padding-top: 24px;
	margin-top: 48px;
}

/* ---- FOOTER ---- */
.footer {
	background: var(--slate-900);
	padding: 32px 24px;
}
.footer-inner {
	max-width: 900px; margin: 0 auto;
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: 12px;
}
.footer-inner p { color: var(--slate-500); font-size: 13px; }
.footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-legal a {
	color: var(--slate-500); font-size: 13px;
	text-decoration: none;
}
.footer-legal a:hover { color: var(--slate-300); }

@media (max-width: 640px) {
	.legal-hero { padding: 120px 20px 40px; }
	.legal-doc { padding: 40px 20px 64px; }
	.footer-inner { flex-direction: column; text-align: center; }
}