/* ==========================================================================
   Lokify — long-form content pages (privacy policy, terms)
   Loaded alongside auth.css, which owns the design tokens.
   ========================================================================== */

.lok-doc {
	max-width: 760px;
	padding: 56px 24px 96px;
	margin: 0 auto;
}

.lok-doc-head {
	padding-bottom: 32px;
	margin-bottom: 40px;
	text-align: center;
	border-bottom: 1px solid var(--neutral-200);
}

.lok-doc-head .lok-logo { margin-bottom: 32px; }

.lok-doc-updated {
	margin: 12px 0 0;
	font-size: var(--text-sm);
	color: var(--neutral-500);
}

/* The copy is ported from the old WordPress pages, so the heading levels are
   whatever Elementor emitted. These rules cover h1-h4 uniformly. */
.lok-doc h1 {
	margin: 0;
	font-size: var(--display-sm);
	font-weight: 700;
	line-height: var(--lh-dsm);
	color: var(--neutral-950);
	letter-spacing: -.01em;
}

.lok-doc h2 {
	margin: 40px 0 12px;
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: var(--lh-xl);
	color: var(--neutral-950);
}

.lok-doc h3,
.lok-doc h4 {
	margin: 28px 0 8px;
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: var(--lh-lg);
	color: var(--neutral-900);
}

.lok-doc p {
	margin: 0 0 16px;
	font-size: var(--text-md);
	line-height: 26px;
	color: var(--neutral-700);
}

.lok-doc ul,
.lok-doc ol {
	padding-left: 22px;
	margin: 0 0 20px;
}

.lok-doc li {
	margin-bottom: 8px;
	font-size: var(--text-md);
	line-height: 26px;
	color: var(--neutral-700);
}

.lok-doc strong { color: var(--neutral-900); }

.lok-doc a {
	color: var(--brand-500);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lok-doc a:hover { color: var(--purple-600); }

.lok-doc-foot {
	padding-top: 32px;
	margin-top: 56px;
	font-size: var(--text-sm);
	text-align: center;
	border-top: 1px solid var(--neutral-200);
}

.lok-doc-foot a {
	font-weight: 600;
	color: var(--brand-500);
	text-decoration: none;
}

.lok-doc-foot a:hover { text-decoration: underline; }

@media (max-width: 560px) {
	.lok-doc { padding: 40px 20px 64px; }
	.lok-doc h1 { font-size: var(--display-xs); line-height: var(--lh-dxs); }
}