/* ═══════════════════════════════════════════════════════════════════════════
   Оформление правовых страниц: terms, privacy, risk.

   Вынесено из privacy.html, где лежало инлайном: три страницы с тремя
   копиями одних стилей разъезжаются на первой же правке.

   Набор намеренно узкий — эти страницы читают, а не разглядывают. Ничего
   анимированного, кроме фона, и никаких элементов, которые надо трогать.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#06070A; --line:#1C2230; --txt:#F2F5FA; --mut:#8794AA; --mut2:#59637A;
  --g1:#90D4F5; --g2:#7B7BF3; --g3:#6E46F8;
  --grad:linear-gradient(135deg,var(--g1),var(--g2) 46%,var(--g3));
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.011em;line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}

#stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4}
#stars i{position:absolute;border-radius:50%;background:#C3D4F0;animation:tw 6s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.12}50%{opacity:.9}}

/* 620px — ширина, на которой строка ещё читается глазом без возврата.
   Правовой текст длинный, и колонка шире здесь стоит дороже, чем кажется. */
.wrap{max-width:620px;margin:0 auto;padding:0 26px;width:100%}

header{position:relative;z-index:2;padding:26px 0}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:400;
  letter-spacing:.015em;color:#F4F6FB;text-decoration:none}
.brand span{display:block;line-height:0}

main{position:relative;z-index:2;flex:1;padding:44px 0 20px}
h1{font-size:clamp(42px,7vw,64px);font-weight:300;letter-spacing:-.022em;line-height:1;
  color:#F4F6FB}
.date{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut2)}
.lede{margin-top:26px;font-size:16.5px;font-weight:500;color:var(--mut)}

section{margin-top:38px;padding-top:22px;border-top:1px solid var(--line)}
h2{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--g1)}
section p{margin-top:11px;font-size:16px;font-weight:500;color:var(--mut)}
section p + p{margin-top:13px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.chips span{font-family:var(--mono);font-size:12px;color:var(--txt);
  border:1px solid var(--line);border-radius:999px;padding:5px 13px}

.nots{margin-top:12px;display:grid;gap:7px}
.nots span{position:relative;padding-left:19px;font-size:15.5px;font-weight:500;color:var(--mut)}
.nots span::before{content:'';position:absolute;left:0;top:10px;width:9px;height:1.5px;
  border-radius:1px;background:var(--mut2)}

b{color:var(--txt);font-weight:600}
a.mail{color:var(--g1);text-decoration:none;border-bottom:1px solid rgba(144,212,245,.35);
  transition:.2s}
a.mail:hover{border-bottom-color:var(--g1)}

/* Заметный блок для того, что дороже всего пропустить: риск потери денег
   и то, что Spark никому не обещан. Рамка, а не только текст — иначе
   утонет в соседних абзацах. */
.hard{margin-top:16px;border:1px solid #6B5A2E;background:rgba(201,162,75,.07);
  border-radius:12px;padding:15px 17px}
.hard b{display:block;color:#D9BE79;font-size:15px}
.hard p{margin-top:7px;font-size:15px;color:var(--mut)}

/* Честная пометка о статусе документа. Скрывать её нечестно, выпячивать
   незачем — поэтому она сверху, но тише заголовка. */
.draft{margin-top:18px;border:1px dashed var(--line);border-radius:10px;
  padding:12px 15px;font-size:14px;color:var(--mut2)}
.draft b{color:var(--mut)}

footer{position:relative;z-index:2;margin-top:46px;padding:22px 0 40px;
  border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--mut2)}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:var(--txt)}
footer .r{margin-left:auto}