/* Каркас старых страниц VANYA (09.10.2026, этап «единый стиль», STYLE_SPEC §4.2 п. 11). Страница на каркасе — partials/page-top.ejs
   и page-bottom.ejs: <head> lp2 (lp2-head.ejs), шапка сайта, <main class="lp-page …">, подвал сайта, js/lp2.js. Вид — дизайн-система
   lp2: отступы, кнопки (.btn-main, .btn-quiet), крошки, шаги (.steps), вопросы (.faq-list), тарифы (lp2/prices), строки-ссылки
   (.rows), характеристики (dl.spec) берутся из lp2.css и здесь не дублируются. Здесь — только то, чего у посадочных нет:
   колонка текста, разделы, списки, примечания, скриншоты, формы, таблицы, юрдокументы, страницы «одним экраном».
   Все правила — под .lp-page (класс <main> каркаса), классы — с префиксом pg-. В именах классов нет подстроки «vpn» (asVPS:
   vpsifyHtml переписывает HTML).
   Подключает lp2-head.ejs после lp2.css, когда страница рисуется через page-top (seo.pageCss). Кэшируется Cloudflare: ссылка
   идёт с ?v=<хеш содержимого> (PAGE_ASSETS в front.js), после правки нужен рестарт front.js. */

/* ---------- колонка и разделы ---------- */
/* колонка текста страницы — 720 px по левому краю, как текст первого экрана: <div class="section"><div class="wrap pg-col">…</div></div>.
   На .wrap сама обёртка остаётся шириной сайта (1180), а колонкой становится её содержимое: иначе margin: auto у .wrap поставил
   бы текст по центру страницы. Без .wrap (.pg-col внутри своей обёртки) — просто колонка 720 px. */
.lp-page .pg-col { max-width: 720px; }
.lp-page .wrap.pg-col { max-width: 1180px; }
/* :where — нулевая специфичность: свои ширины (.pg-shot 600, .pg-shots-2 560) у потомков сильнее */
:where(.lp-page .wrap.pg-col) > * { max-width: 720px; }
/* раздел текста: <section class="pg-sec"><h2>…</h2><p>…</p></section>; соседние разделы — с отступом между собой */
.lp-page .pg-sec + .pg-sec { margin-top: clamp(40px, 5vw, 64px); }
.lp-page .pg-sec h2 { font-size: clamp(26px, 1rem + 1.15vw, 34px); line-height: 1.15; margin-bottom: 16px; }
.lp-page .pg-sec h3 { margin: 28px 0 8px; }
.lp-page .pg-sec h2 + h3 { margin-top: 8px; }
.lp-page .pg-sec p, .lp-page .pg-sec li { font-size: 18px; line-height: 1.65; max-width: 37em; }
/* панель строк-ссылок (.rows из lp2.css) внутри раздела — во всю ширину колонки: 37em — мера абзаца, а не строки панели (O4, /app) */
.lp-page .pg-sec .rows > li { max-width: none; }
.lp-page .pg-sec p + p, .lp-page .pg-sec p + .pg-list, .lp-page .pg-sec .pg-list + p { margin-top: 14px; }
.lp-page .pg-sec > .steps { margin-top: 22px; }

/* ---------- списки ---------- */
/* маркированный список: маркер «•» цвета разделителей, без отступа браузера */
.lp-page .pg-list { list-style: none; margin: 14px 0 0; padding: 0; }
.lp-page .pg-list > li { position: relative; padding-left: 22px; }
.lp-page .pg-list > li::before { content: "•"; position: absolute; left: 4px; top: 0; color: var(--text-3); }
.lp-page .pg-list > li + li { margin-top: 6px; }
/* нумерованный список в тексте (не шаги — у шагов .steps из lp2.css) */
.lp-page ol.pg-list { counter-reset: pg; }
.lp-page ol.pg-list > li { counter-increment: pg; padding-left: 28px; }
.lp-page ol.pg-list > li::before { content: counter(pg) "."; left: 0; color: var(--text-2); font-weight: 500; }

/* ---------- примечание на фоне ---------- */
/* «Если у вас версия 1.20…», оговорки: серая полоса слева, текст мельче и тише основного */
.lp-page .pg-note, .lp-page .pg-sec .pg-note { margin: 18px 0 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--line-bg); color: var(--text-2); font-size: 16px; line-height: 1.6; }
.lp-page .pg-note p, .lp-page .pg-sec .pg-note p { font-size: inherit; line-height: inherit; color: inherit; }
.lp-page .pg-note b, .lp-page .pg-note strong { color: var(--text); font-weight: 600; }

/* ---------- скриншоты ---------- */
/* старый скриншот (не кадр 1.21 — те выводит lp.shot): <figure class="pg-shot"><img …><figcaption>…</figcaption></figure> */
.lp-page .pg-shot { margin: 24px 0; max-width: 600px; }
.lp-page .pg-shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.lp-page .pg-shot figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
/* снимок экрана телефона */
.lp-page .pg-shot--phone { max-width: 300px; }
.lp-page .pg-shot--phone img { border-radius: 20px; box-shadow: var(--phone-shadow); }
/* два кадра рядом */
.lp-page .pg-shots-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 560px; margin: 24px 0; align-items: start; }
.lp-page .pg-shots-2 > .pg-shot { margin: 0; max-width: none; }

/* ---------- белая панель: формы и интерактив ---------- */
/* панели — только у интерактивного (формы, выбор, способы оплаты); текст лежит прямо на фоне */
.lp-page .pg-panel { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--card-shadow); padding: 24px; }
.lp-page .pg-panel > :first-child { margin-top: 0; }

/* ---------- поля формы ---------- */
/* <div class="pg-field"><label for="…">…</label><input id="…"><p class="pg-hint">…</p></div>; ошибка — класс is-error у
   .pg-field (рамка и текст подсказки красные) или текст в .pg-error */
.lp-page .pg-field + .pg-field { margin-top: 16px; }
.lp-page .pg-field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text); }
.lp-page .pg-field input, .lp-page .pg-field select, .lp-page .pg-field textarea {
	display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px;
	border-radius: 12px; border: 1.5px solid var(--quiet-border); background: #FFFFFF;
	font: 400 17px/1.3 var(--font, "Onest", system-ui, sans-serif); color: var(--text);
	-webkit-appearance: none; appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-page .pg-field select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%236C6C70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; }
.lp-page .pg-field textarea { height: auto; min-height: 128px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.lp-page .pg-field input::placeholder, .lp-page .pg-field textarea::placeholder { color: var(--text-3); }
.lp-page .pg-field input:focus, .lp-page .pg-field select:focus, .lp-page .pg-field textarea:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(28, 28, 30, .12); outline: none; }
/* подсказка и ошибка — и внутри раздела .pg-sec, где абзацы крупнее (селекторы сильнее .pg-sec p) */
.lp-page .pg-hint, .lp-page .pg-sec .pg-hint, .lp-page .pg-error, .lp-page .pg-sec .pg-error { margin-top: 6px; max-width: none; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.lp-page .pg-field.is-error input, .lp-page .pg-field.is-error select, .lp-page .pg-field.is-error textarea { border-color: #C80E19; }
.lp-page .pg-field.is-error .pg-hint, .lp-page .pg-sec .pg-field.is-error .pg-hint, .lp-page .pg-error, .lp-page .pg-sec .pg-error { color: #C80E19; }

/* малая главная кнопка — в форме и в строке с полем: та же красная .btn-main, ниже и с меньшим радиусом */
.lp-page .btn-main--s { min-height: 52px; padding: 0 24px; border-radius: 14px; font-size: 17px; gap: 10px; }
.lp-page .btn-main--s svg { width: 20px; height: 20px; }
/* у <button> браузер свой шрифт и рамка: кнопки каркаса выглядят так же, как ссылки */
.lp-page button.btn-main, .lp-page button.btn-quiet { font-family: inherit; cursor: pointer; border-style: solid; }
.lp-page button.btn-main { border: 0; }
.lp-page button.btn-quiet { background: transparent; }

/* ---------- таблица ---------- */
.lp-page .pg-table { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.lp-page .pg-table th, .lp-page .pg-table td { padding: 12px 16px 12px 0; border-top: 1px solid var(--line-bg); text-align: left; vertical-align: top; }
.lp-page .pg-table tr:last-child > td { border-bottom: 1px solid var(--line-bg); }
.lp-page .pg-table th { font-size: 14px; font-weight: 500; color: var(--text-2); }
.lp-page .pg-table td:last-child, .lp-page .pg-table th:last-child { padding-right: 0; }
/* широкая таблица на телефоне прокручивается в своей рамке, а не растягивает страницу */
.lp-page .pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- юридический документ ---------- */
/* <div class="lg pg-doc"> вокруг общего partials/legal-body: колонка 760 px, заголовки и абзацы шкалы сайта, карточки разделов
   и оглавление без панелей (селекторы с .lg-card сильнее правил общего legal-styles: тот стоит в <body> после этого файла) */
.lp-page .pg-doc { max-width: 760px; }
.lp-page .pg-doc h2, .lp-page .pg-doc .lg-card h2 { margin: 40px 0 12px; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.lp-page .pg-doc p, .lp-page .pg-doc li, .lp-page .pg-doc .lg-card p, .lp-page .pg-doc .lg-card li { font-size: 16.5px; line-height: 1.65; }
.lp-page .pg-doc .lg-toc { background: none; border: 0; box-shadow: none; padding: 0; }
.lp-page .pg-doc .lg-toc a, .lp-page .pg-doc .lg-toc-list a { color: var(--text-2); }
.lp-page .pg-doc .lg-toc a:hover, .lp-page .pg-doc .lg-toc-list a:hover { color: var(--link); }

/* ---------- страница «одним экраном»: 404, ошибка, отписка ---------- */
/* блок по центру оставшейся высоты окна (минус шапка и подвал), текст в нём — по левому краю колонкой 560 px */
.lp-page .pg-center { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; align-content: center; min-height: calc(100svh - 64px - 240px); padding-block: 64px; }
.lp-page .pg-center h1 { margin-bottom: 16px; }
.lp-page .pg-center p + p { margin-top: 12px; }

/* ---------- строки «Юрлицо / Номер / Адрес» ---------- */
/* <dl class="spec pg-kv"> — dl.spec из lp2.css в одну колонку */
.lp-page .spec.pg-kv { grid-template-columns: minmax(0, 1fr); max-width: 37em; }

/* ---------- адаптив ---------- */
@media (max-width: 767px) {
	.lp-page .pg-sec h2 { font-size: 26px; margin-bottom: 12px; }
	.lp-page .pg-sec p, .lp-page .pg-sec li { font-size: 16px; line-height: 1.6; }
	.lp-page .pg-sec p + p, .lp-page .pg-sec p + .pg-list, .lp-page .pg-sec .pg-list + p { margin-top: 10px; }
	.lp-page .pg-note, .lp-page .pg-sec .pg-note { font-size: 15px; }
	.lp-page .pg-shot figcaption { font-size: 13px; }
	.lp-page .pg-panel { padding: 18px; }
	.lp-page .pg-table { font-size: 15px; }
	.lp-page .pg-doc h2, .lp-page .pg-doc .lg-card h2 { margin-top: 32px; font-size: 20px; }
	.lp-page .pg-doc p, .lp-page .pg-doc li, .lp-page .pg-doc .lg-card p, .lp-page .pg-doc .lg-card li { font-size: 15.5px; line-height: 1.6; }
	.lp-page .pg-center { min-height: calc(100svh - 56px - 320px); padding-block: 40px; }
	.lp-page .btn-main--s { width: auto; min-height: 50px; }
}

/* ---------- перенесено из <style> страниц (09.10.2026, интегратор) ---------- */
/* Блоки ниже стоят в конце файла намеренно: в шаблонах они шли после page.css, и тот же порядок сохраняет каскад без копий.
   Копий в шаблонах больше нет (09.10.2026: .pg-service убрал V5, вид юрдокумента — I2), правьте здесь. */

/* Вид юрдокумента (пакет O6) для legal.ejs, app-privacy-policy.ejs, app-terms-of-service.ejs, app-data-collection.ejs.
   Токены --lg-* и селекторы под .lp-page перебивают общий partials/legal-styles (он стоит в <body> позже, но его
   селекторы — не больше двух классов, здесь — от двух с .lp-page и от трёх у остальных). Первый экран (крошки, H1, описание,
   дата) — белый на всю ширину окна: H1 рисует общий legal-body, поэтому полосу даёт border-image с выносом в стороны. */
.lp-page .lg {
	--lg-surface: transparent; --lg-inset: #FFFFFF; --lg-text: #1C1C1E; --lg-muted: #3A3A3C; --lg-border: #D8D8DE;
	--lg-link: #C80E19; --lg-kicker-bg: transparent;
	font-family: inherit; color: var(--text); padding-bottom: clamp(56px, 6vw, 88px);
}
.lp-page .lg .lg-wrap { max-width: none; margin: 0; padding: 0; }
.lp-page .lg .lg-crumbs { display: flow-root; padding-top: 16px; border-image: linear-gradient(var(--hero-bg) 0 0) fill 0 // 0 100vmax; }
/* Крошки внутри документа — как на остальных страницах (09.10.2026; lp2.css .crumbs: 14/13 px, ссылка --text-2). Без этого их перебивали
   кегль абзацев документа (.pg-doc li) и красная ссылка общего legal-styles (.lg a → --lg-link). */
.lp-page .pg-doc .crumbs li { font-size: inherit; line-height: inherit; }
.lp-page .lg .crumbs a { color: var(--text-2); text-decoration: none; }
.lp-page .lg .crumbs a:hover { color: var(--text); text-decoration: underline; }
.lp-page .lg .lg-hero {
	text-align: left; padding: clamp(32px, 4vw, 56px) 0 clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 64px);
	border-image: linear-gradient(to top, #E8E8ED 1px, var(--hero-bg) 1px) fill 0 // 0 100vmax;
}
.lp-page .lg .lg-crumbs + .lg-main .lg-hero { padding-top: 0; }
.lp-page .lg .lg-logo, .lp-page .lg .lg-kicker { display: none; }
.lp-page .lg h1.lg-title { margin: 0; max-width: 15em; font-size: clamp(34px, 1.3rem + 2.2vw, 52px); line-height: 1.06; font-weight: 600; letter-spacing: -0.03em; color: var(--text); }
.lp-page .lg p.lg-sub { margin: 18px 0 0; max-width: 31em; font-size: clamp(17px, 0.95rem + 0.3vw, 19px); line-height: 1.55; color: var(--text-lead); }
.lp-page .lg p.lg-updated { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); opacity: 1; }
.lp-page .pg-doc .lg-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 16.5px; line-height: 1.65; color: var(--lg-muted); }
.lp-page .pg-doc .lg-card + .lg-card { margin-top: 16px; }
.lp-page .pg-doc .lg-hero + .lg-card > h2:first-child { margin-top: 0; }
.lp-page .pg-doc .lg-card h3 { margin: 24px 0 8px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.lp-page .pg-doc .lg-card b, .lp-page .pg-doc .lg-card strong { font-weight: 600; }
.lp-page .pg-doc .lg-card div + div { margin-top: 8px; }
.lp-page .pg-doc .lg-card a { text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.2em; }
.lp-page .pg-doc .lg-card a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.lp-page .pg-doc .lg-toc a { text-decoration: none; }
.lp-page .pg-doc .lg-toc-list, .lp-page .pg-doc .lg-other-list { margin: 0; padding-left: 0; }
.lp-page .pg-doc .lg-toc-list { columns: 2 260px; column-gap: 40px; }
.lp-page .pg-doc .lg-toc + .lg-card { margin-top: 32px; }
.lp-page .pg-doc .lg-toc-list li { break-inside: avoid; }
.lp-page .pg-doc .lg-toc-list a { padding: 4px 0; font-size: 15px; }
.lp-page .pg-doc .lg-help { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 40px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-bg); }
.lp-page .pg-doc .lg-help .lg-card { margin: 0; }
.lp-page .pg-doc .lg-tile-label { margin: 0 0 4px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.lp-page .pg-doc .lg-tile-value { font-size: 17px; font-weight: 500; }
.lp-page .pg-doc .lg-other { margin-top: 32px; }
.lp-page .pg-doc .lg-other h2 { margin: 0 0 10px; font-size: 19px; }
.lp-page .pg-doc .lg-other-list { gap: 6px 24px; }
.lp-page .pg-doc .lg-other-list a { display: inline; padding: 0; border: 0; border-radius: 0; background: none; font-size: 16.5px; font-weight: 400; color: var(--link); }
.lp-page .pg-doc .lg-other-list a:hover { color: var(--link-hover); }
@media (max-width: 767px) {
	.lp-page .lg { padding-bottom: 40px; }
	.lp-page .lg .lg-crumbs { padding-top: 10px; }
	.lp-page .lg .lg-hero { padding: 24px 0 32px; margin-bottom: 32px; }
	.lp-page .lg h1.lg-title { font-size: 30px; line-height: 1.1; }
	.lp-page .lg p.lg-sub { margin-top: 14px; font-size: 16px; line-height: 1.5; }
	.lp-page .lg p.lg-updated { font-size: 13px; }
	.lp-page .pg-doc .lg-card { font-size: 15.5px; line-height: 1.6; }
	.lp-page .pg-doc .lg-card h3 { font-size: 17px; }
	.lp-page .pg-doc .lg-help { margin-top: 36px; }
	.lp-page .pg-doc .lg-other-list a { font-size: 15.5px; }
}

/* Служебные «одним экраном» (/error, /sorry, /unsubscribe; <main class="lp-page pg-service">) — бывший <style> error.ejs и
   sorry.ejs (у unsubscribe.ejs — его часть). После .pg-center выше: у .pg-service .pg-center h1 та же специфичность. */
.pg-service .pg-center h1 { font-size: clamp(36px, 1.5rem + 2vw, 52px); }
.pg-service .pg-center p { color: var(--text-lead); }
.pg-service .pg-center .lead { margin-bottom: 0; }
.pg-service .pg-center p + p { margin-top: 14px; }
.pg-service .pg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
@media (max-width: 767px) {
	.pg-service .pg-center h1 { font-size: 32px; }
	.pg-service .pg-actions { margin-top: 22px; }
	.pg-service .pg-actions > a { flex: 1 1 100%; }
}