/*
  Общий стиль док-страниц лендинга (tarify / oferta / privacy / contacts).
  Палитра/шрифт — те же, что в index.html (ink-шкала, IBM Plex Sans 400/500,
  self-hosted — 152-ФЗ, НЕ Google CDN, R-NEXT-3). Пути шрифтов относительны
  этому файлу (assets/ → ../fonts/).
*/
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibmplex-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibmplex-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibmplex-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibmplex-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-bg: #faf9f7;
  --color-paper: #ffffff;
  --color-fill: #f0f0ee;
  --color-line: #e2e2e0;
  --color-line-strong: #c8c8c5;
  --color-ink: #262626;
  --color-ink-2: #4d4d4d;
  --color-ink-3: #666666;
  --color-ink-4: #888888;
  --radius-md: 8px;
  --shadow-1: 0 2px 6px rgba(0,0,0,0.08);
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --bg-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.18  0 0 0 0 0.06  0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  background-image: var(--bg-noise);
  background-repeat: repeat;
  color: var(--color-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
strong, b { font-weight: 500; }

.shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px);
}

/* ── Топ-бар (лок-ап → главная) ── */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lockup { display: inline-flex; align-items: center; gap: 9px; color: var(--color-ink); text-decoration: none; }
.lockup .mark { height: 26px; width: auto; }
.lockup .word { height: 17px; width: auto; }
.nav { display: inline-flex; align-items: center; gap: 2px; }
.nav a {
  font-size: 14px; color: var(--color-ink-2); text-decoration: none;
  padding: 8px 13px; border-radius: var(--radius-md);
}
.nav a:hover { background: var(--color-fill); color: var(--color-ink); }

/* ── Контент документа ── */
.doc { flex: 1; padding: clamp(28px, 5vh, 56px) 0; }
.doc h1 {
  margin: 0 0 6px;
  font-weight: 500; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em;
}
.doc .meta { margin: 0 0 28px; font-size: 14px; color: var(--color-ink-3); }
.doc h2 {
  margin: 34px 0 10px;
  font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em;
}
.doc p, .doc li { font-size: 15px; color: var(--color-ink-2); }
.doc p { margin: 10px 0; }
.doc ul, .doc ol { margin: 10px 0; padding-left: 22px; }
.doc li { margin: 5px 0; }
.doc a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: #111; }

/* ── Таблицы документов (политика: цели/права) ── */
.table-wrap { overflow-x: auto; margin: 14px 0; }
.doc table {
  border-collapse: collapse; width: 100%;
  font-size: 14px; color: var(--color-ink-2);
  background: var(--color-paper);
}
.doc th, .doc td {
  border: 1px solid var(--color-line);
  padding: 9px 12px; text-align: left; vertical-align: top;
}
.doc th { font-weight: 500; color: var(--color-ink); background: var(--color-fill); }
.doc td:first-child { color: var(--color-ink); }

/* ── Карточка тарифа ── */
.plan {
  margin: 26px 0;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: clamp(22px, 3vw, 32px);
  max-width: 460px;
}
.plan .name { font-size: 18px; font-weight: 500; }
.plan .price { margin-top: 8px; font-size: 34px; font-weight: 500; letter-spacing: -0.01em; }
.plan .price small { font-size: 15px; font-weight: 400; color: var(--color-ink-3); }
.plan ul { list-style: none; margin: 18px 0 0; padding: 0; }
.plan li {
  position: relative; padding-left: 24px; margin: 8px 0;
  font-size: 15px; color: var(--color-ink-2);
}
.plan li::before { content: "✓"; position: absolute; left: 2px; color: var(--color-ink); font-weight: 500; }
.plan .cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  padding: 12px 20px; border-radius: var(--radius-md);
  background: var(--color-ink); color: var(--color-bg); text-decoration: none;
  font-size: 14px; font-weight: 500; border: 1px solid var(--color-ink);
}
.plan .cta:hover { background: #111; border-color: #111; }
.fineprint { font-size: 13px; color: var(--color-ink-3); }

/* ── Реквизиты (contacts) ── */
.props { margin: 18px 0; border-top: 1px solid var(--color-line); }
.props div { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--color-line); font-size: 15px; }
.props dt { margin: 0; flex: 0 0 190px; color: var(--color-ink-3); }
.props dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }

/* ── Подвал ── */
footer {
  padding-top: 18px;
  font-size: 13px; color: var(--color-ink-3);
}
footer .links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 10px; }
footer a { color: var(--color-ink-3); text-decoration: none; }
footer a:hover { color: var(--color-ink); }
footer .req { line-height: 1.6; }

@media (max-width: 560px) {
  .doc h1 { font-size: 24px; }
  .props div { flex-direction: column; gap: 2px; }
  .props dt { flex-basis: auto; }
}