/*
  Оформление лендинга и юридических страниц.

  Токены — те же, что в приложении (`design_handoff_retseptnik_ios/`), и это
  не украшательство: человек приходит сюда со страницы App Store и с экрана
  профиля, и страница, выглядящая чужой, читается как чужая — а на ней
  написано, что происходит с его фотографиями.

  Ни счётчиков, ни внешних скриптов, ни внешних шрифтов на этих страницах нет:
  страница грузится целиком со своего домена и никуда больше не ходит.
  Продукт обещает не собирать лишнего, и страница, объясняющая это через
  аналитику третьей стороны, объясняла бы обратное — а страница политики,
  сообщающая Google адрес читателя ради шрифта, тем более.

  Шрифты те же файлы, что в приложении, под OFL — лицензия прямо разрешает
  распространение, и её текст лежит рядом в `fonts/`.
*/

@font-face {
	font-family: Alegreya;
	src: url("fonts/Alegreya-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: Alegreya;
	src: url("fonts/Alegreya-Black.ttf") format("truetype");
	font-weight: 900;
	font-display: swap;
}

@font-face {
	font-family: "PT Sans";
	src: url("fonts/PTSans-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "PT Sans";
	src: url("fonts/PTSans-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

:root {
	--bg: #faf6f2;
	--surface: #ffffff;
	--hairline: #efe5da;
	--text: #2b2320;
	--text-body: #5c4f48;
	--text-secondary: #8a7c73;
	--text-tertiary: #a2938a;
	--accent: #bd6154;
	--success: #5c9463;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1a1614;
		--surface: rgba(245, 239, 233, 0.07);
		--hairline: rgba(245, 239, 233, 0.12);
		--text: #f5efe9;
		--text-body: rgba(245, 239, 233, 0.88);
		--text-secondary: rgba(245, 239, 233, 0.78);
		--text-tertiary: rgba(245, 239, 233, 0.5);
		/* Линейный и текстовый акцент в тёмной теме светлее заливки:
		   #BD6154 на тёмном даёт 2,3:1 и не читается (CLAUDE.md, §7). */
		--accent: #e08a7b;
		--success: #7fb786;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0 20px 64px;
	background: var(--bg);
	color: var(--text-body);
	font: 400 17px/1.6 "PT Sans", system-ui, -apple-system, sans-serif;
	-webkit-text-size-adjust: 100%;
}

main, header, footer { max-width: 680px; margin: 0 auto; }

h1, h2, h3 {
	font-family: Alegreya, Georgia, serif;
	color: var(--text);
	line-height: 1.2;
	margin: 0 0 12px;
}

h1 { font-weight: 900; font-size: 40px; margin-top: 48px; }
h2 { font-weight: 700; font-size: 26px; margin-top: 40px; }
h3 { font-weight: 700; font-size: 20px; margin-top: 28px; }

p, li { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

strong { color: var(--text); }

/* Шапка со ссылкой домой — одинаковая на трёх юридических страницах. */
.top {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 26px 0 0;
	font-size: 15px;
}

.top .brand {
	font-family: Alegreya, Georgia, serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--text);
	text-decoration: none;
}

.updated {
	color: var(--text-tertiary);
	font-size: 15px;
	margin-top: -4px;
}

/* Врезка «коротко» — то же утверждение, что и в заголовке карточки
   App Store: человек, прочитавший только её, не должен быть обманут. */
.lead {
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 16px;
	padding: 18px 20px;
	margin: 24px 0 8px;
}

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

.steps { list-style: none; padding: 0; counter-reset: step; }

.steps li {
	counter-increment: step;
	padding-left: 44px;
	position: relative;
	margin-bottom: 18px;
}

.steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: -1px;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background: var(--accent);
	color: #fff6f1;
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 16px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { color: var(--text); font-weight: 700; }

footer {
	margin-top: 56px;
	padding-top: 20px;
	border-top: 1px solid var(--hairline);
	color: var(--text-tertiary);
	font-size: 15px;
}

footer a { color: var(--text-secondary); }

@media (max-width: 520px) {
	h1 { font-size: 32px; margin-top: 32px; }
	h2 { font-size: 23px; }
	body { font-size: 16px; }
}