/* Оформление юридических страниц (оферта, политика, условия).
   Отдельный файл, а не копия стилей лендинга: лендинг — сгенерированный документ со
   стилями в атрибутах, править его под текстовые страницы значило бы ломать генерацию.
   Токены те же, что на главной, чтобы сайт читался как одно целое.
   Подвал сюда НЕ входит: он несёт свои стили под .ck-foot, потому что вставляется
   ещё и на главную, где ничего глобального навязывать нельзя. */
@import url('fonts.css');

:root {
  --bg: #080B09;
  --card: #0E1310;
  --line: rgba(255,255,255,.10);
  --text: #C9D2CC;
  --bright: #F4F8F4;
  --muted: #8A968E;
  --accent: #34E67B;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.72 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* ── шапка ─────────────────────────────────────────────────────────────────── */
.top {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: rgba(8,11,9,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 66px; max-width: 1080px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .ck-logo { width: 28px; height: 28px; border-radius: 8px; display: block; }
.brand span { font: 800 18px/1 'Unbounded', 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--bright); }
.brand em { font-style: normal; color: var(--accent); }
.back { color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; transition: color .2s; }
.back:hover { color: var(--accent); }

/* ── документ ──────────────────────────────────────────────────────────────── */
main { padding: clamp(38px, 6vw, 72px) 0 0; }

h1 {
  font: 800 clamp(27px, 4.4vw, 40px)/1.14 'Unbounded', 'Manrope', sans-serif;
  letter-spacing: -.025em; color: var(--bright); margin-bottom: 14px;
}
.lead { color: var(--muted); font-size: 15px; line-height: 1.6; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.lead b { color: var(--text); font-weight: 600; }

/* Разделы отбиваются линией сверху: в длинном договоре взгляд иначе теряет границу
   между пунктами, а читают эти страницы по диагонали и в поисках одного абзаца. */
h2 {
  font: 700 clamp(19px, 2.5vw, 23px)/1.32 'Unbounded', 'Manrope', sans-serif;
  color: var(--bright); letter-spacing: -.015em;
  margin: 46px 0 16px; padding-top: 26px; border-top: 1px solid var(--line);
}
main > .wrap > h2:first-of-type { border-top: none; padding-top: 0; }
h3 { font: 700 16px/1.45 'Manrope', sans-serif; color: var(--bright); margin: 26px 0 10px; }

p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 18px; padding-left: 24px; }
li { margin-bottom: 9px; padding-left: 4px; }
li:last-child { margin-bottom: 0; }
li::marker { color: var(--accent); font-weight: 700; }
ol li::marker { font-weight: 600; font-size: .95em; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(52,230,123,.3); transition: border-color .2s; }
a:hover { border-bottom-color: var(--accent); }

strong, b { color: var(--bright); font-weight: 700; }

/* врезка — то, что покупатель прочитает, даже если пролистает весь договор */
.note {
  background: linear-gradient(180deg, rgba(52,230,123,.05), rgba(52,230,123,.02));
  border: 1px solid rgba(52,230,123,.18);
  border-radius: 14px; padding: 20px 22px; margin: 26px 0; font-size: 15px; line-height: 1.66;
}
.note b:first-child {
  display: block; margin-bottom: 8px; color: var(--accent);
  font: 700 12px/1 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .09em;
}

.soon {
  display: inline-block; vertical-align: 1px; margin-right: 8px;
  background: rgba(52,230,123,.14); border: 1px solid rgba(52,230,123,.3); color: var(--accent);
  border-radius: 999px; padding: 3px 11px;
  font: 700 11px/1 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .08em;
}

/* ── таблицы ───────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; margin: 22px 0; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 480px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font: 600 12px/1 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255,255,255,.02); }
td b { white-space: nowrap; color: var(--bright); }
th:nth-child(3), th:nth-child(4), td:nth-child(3), td:nth-child(4) { text-align: right; }

@media (max-width: 640px) {
  body { font-size: 15px; }
  .top .wrap { height: 58px; }
  .brand span { font-size: 16px; }
  h2 { margin-top: 36px; padding-top: 22px; }
  .note { padding: 16px 17px; }
}