/* ═══════════════════════════════════════════════════════════════════════
   Правовые страницы: /terms, /privacy, /dpa.

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

   Краски и шрифты те же, что на index.html, чтобы страница не выглядела
   чужой, но роли у них другие: Bebas только в шапке и в h1, дальше
   системный. Bebas — капитель без строчных, на двадцати страницах текста
   он превращается в шум.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#FFF1E5;      /* бумага витрины */
  --sf:#FBF3E9;      /* врезки: чуть светлее бумаги, без белого — белый рядом
                        с кремовым читается как дырка в странице */
  --ink:#14100B;
  --acc:#EA580C;      /* акцент витрины: рамки, кольцо фокуса, левый упор врезки */
  --rule:#E7D9C9;

  /* Тот же рыжий, но пригодный для набора. #EA580C на кремовом даёт 3,21:1 —
     для рамки хватает (нетекстовым элементам нужно 3:1), для строчной ссылки
     нет. А ссылок здесь сотни: перекрёстные отсылки пункт на пункт и есть
     скелет документа. #C2410C — 4,68:1, и рыжий на глаз остаётся тем же. */
  --acc-text:#C2410C;

  /* Приглушённый взят темнее витринного #7A6E60. На витрине им набраны
     подписи в две строки, здесь — целые абзацы оговорок и вся правая
     колонка таблиц. 4,49:1 для этого мало, #6B5F52 даёт 5,6:1. */
  --mut:#6B5F52;

  --display:'Bebas Neue',Impact,sans-serif;
  --f:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--f);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* 760 — примерно 80 знаков системным семнадцатым. Дальше глаз теряет
   начало следующей строки, а в документе, где важен каждый пункт, это
   дороже, чем кажется. */
.w{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}

a{color:var(--acc-text);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}

/* ── шапка ───────────────────────────────────────────────────────────── */
.bar{padding:16px 0;border-bottom:1px solid var(--rule);background:var(--bg)}
.bar .w{display:flex;align-items:baseline;gap:14px;max-width:1120px;
  font-family:var(--mono);font-size:13px}
.bar .nm{font-family:var(--display);font-size:22px;letter-spacing:.02em;
  line-height:1;color:var(--ink)}
.bar .doc{color:var(--mut)}
.bar a.back{margin-left:auto;color:var(--mut);text-decoration:none;white-space:nowrap}
.bar a.back:hover{color:var(--acc-text)}
@media(max-width:520px){.bar .doc{display:none}}

/* ── заголовки ───────────────────────────────────────────────────────── */
.head{padding:clamp(34px,7vw,58px) 0 6px}
h1{font-family:var(--display);font-weight:400;
  font-size:clamp(38px,7vw,64px);letter-spacing:.005em;line-height:.94;margin:0}
h2{font-weight:650;font-size:21px;letter-spacing:-.3px;line-height:1.25;
  margin:46px 0 10px;scroll-margin-top:20px}
h3{font-weight:650;font-size:17px;margin:26px 0 6px}

/* Номер пункта моноширинным и приглушённым: юрист ссылается на номер,
   поэтому номер должен выдёргиваться взглядом, но не спорить с текстом. */
h2 .n{font-family:var(--mono);font-weight:400;font-size:14px;color:var(--mut);
  margin-right:10px}

p,li{margin:10px 0}
ul,ol{padding-left:22px}
li::marker{color:var(--mut)}
b,strong{font-weight:650}

.meta{font-family:var(--mono);font-size:12px;color:var(--mut);margin-top:16px;
  letter-spacing:.01em}
.lead{font-size:18px}

/* ── оглавление ──────────────────────────────────────────────────────── */
/* Terms и DPA длинные. Оглавление здесь не украшение: без него читатель
   не находит пункт, на который ссылается другой пункт. */
.toc{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:18px 0;margin:34px 0 0}
.toc .k{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.toc ol{list-style:none;padding:0;margin:0;columns:2;column-gap:34px}
@media(max-width:560px){.toc ol{columns:1}}
.toc li{margin:0;break-inside:avoid;font-size:15px;line-height:1.5;padding:3px 0}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--acc-text);text-decoration:underline}
.toc .n{font-family:var(--mono);font-size:12px;color:var(--mut);margin-right:8px}

/* ── врезки ──────────────────────────────────────────────────────────── */
.box{border:1px solid var(--rule);border-radius:10px;background:var(--sf);
  padding:16px 20px;margin:24px 0}
.box .k{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.box p:last-child{margin-bottom:0}
.box p:first-of-type{margin-top:0}

/* Врезка с левым акцентом — для того, что в документе является
   обязательством, а не описанием. Их немного, и они должны отличаться
   от обычной врезки с реквизитами. */
.key{border-left:3px solid var(--acc)}

/* ── таблицы ─────────────────────────────────────────────────────────── */
.tw{overflow-x:auto;margin:20px 0}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:420px}
th,td{text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);
  vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);font-weight:400;
  border-bottom:1px solid var(--ink)}
td:last-child,th:last-child{padding-right:0}

/* Словарь фаз: первые две колонки узкие, и в них слова, которые нельзя рвать.
   «Warm-up period» ломался по дефису, «4 to 12» по пробелу. */
table.phases th:nth-child(1),table.phases td:nth-child(1),
table.phases th:nth-child(2),table.phases td:nth-child(2){white-space:nowrap}
table.phases td:nth-child(2){padding-right:22px}

code{font-family:var(--mono);font-size:.9em}

/* ── заглушка ────────────────────────────────────────────────────────── */
/* Умышленно кричит. Это места, где нужен реальный реквизит владельца, и
   уехать в прод они не должны. Лучше рыжая плашка на странице, чем
   выдуманный адрес в документе, на который ссылается договор. */
.todo{font-family:var(--mono);font-size:.86em;font-weight:600;
  color:var(--acc-text);background:rgba(234,88,12,.10);
  border:1px dashed var(--acc);border-radius:4px;
  padding:1px 6px;white-space:nowrap}

.wrap{padding-bottom:64px}

/* ── подвал ──────────────────────────────────────────────────────────── */
footer{padding:22px 0 52px;border-top:1px solid var(--rule);
  display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;
  font-family:var(--mono);font-size:12px;color:var(--mut)}
footer a{text-decoration:none;color:var(--mut)}
footer a:hover{color:var(--acc-text)}
footer .co{flex-basis:100%;color:var(--mut)}

/* ── печать ──────────────────────────────────────────────────────────── */
/* Эти три документа печатают и подшивают. Шапка, оглавление и ссылки
   «наверх» на бумаге бесполезны; адрес страницы, наоборот, нужен —
   иначе распечатка не привязана к источнику. */
@media print{
  :root{--bg:#fff;--sf:#fff;--ink:#000;--mut:#333;--rule:#bbb;--acc:#000}
  body{font-size:11pt;line-height:1.45}
  .bar,.toc,footer a{display:none}
  .w{max-width:none;padding:0}
  h2{margin-top:20pt;page-break-after:avoid}
  h1{font-size:26pt}
  .box,table,li{page-break-inside:avoid}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .todo{border:1px solid #000;background:none;color:#000}
}