/* Правовые страницы. Грузится поверх landing.css: шапка, подвал, кнопки,
   шрифты и токены общие, здесь только типографика длинного документа. */

.legal {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 28px 40px;
}

.legal h1 {
	margin: 0 0 20px;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: 800;
}

/* Шапка документа: приложение, разработчик, дата редакции */
.legal-meta {
	margin: 0 0 32px;
	padding: 18px 20px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--muted);
}

.legal-meta strong {
	color: var(--text);
}

/* «Коротко» — выжимка, которую читают вместо всего остального */
.legal-note {
	margin: 0 0 8px;
	padding: 24px 26px;
	border-radius: 20px;
	background: var(--accent-soft);
}

.legal-note h2 {
	margin-top: 0;
}

.legal-note p {
	color: var(--text);
}

.legal-note p:last-child {
	margin-bottom: 0;
}

.legal h2 {
	margin: 40px 0 14px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.01em;
	scroll-margin-top: 96px;
}

.legal p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--muted);
}

.legal ul {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.legal li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--muted);
}

.legal li::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-ink);
}

.legal strong {
	color: var(--text);
	font-weight: 700;
}

.legal code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--chip);
	color: var(--text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}

/* Ссылок в документе много и все внутри абзацев, поэтому берём затемнённый
   акцент: --accent на белом даёт 4.0:1 и не проходит AA для обычного текста. */
.legal a {
	color: var(--accent-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.legal a:hover {
	color: var(--text);
}

/* Таблица сервисов: на телефоне не ломает страницу, а прокручивается внутри рамки */
.legal-table {
	margin: 0 0 20px;
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.legal-table table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 14px;
}

.legal-table th {
	padding: 13px 16px;
	background: var(--card);
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
}

.legal-table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--hairline);
	color: var(--muted);
	line-height: 1.6;
	vertical-align: top;
}

.legal-table tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 1080px) {
	/* На лендинге разделы уезжают в ленту чипов, здесь ссылка одна — прячем нечего */
	.legal-page .nav-row .nav-links {
		display: flex;
	}
}

@media (max-width: 620px) {
	.legal {
		padding: 36px 18px 32px;
	}

	.legal h1 {
		font-size: 30px;
	}

	.legal h2 {
		margin-top: 32px;
		font-size: 19px;
	}

	.legal-note {
		padding: 18px 18px;
		border-radius: 16px;
	}

	/* липкой кнопки на этих страницах нет, запас снизу не нужен */
	.legal-page .footer {
		padding-bottom: 44px;
	}
}