/* Лендинг и правовые страницы. Палитра и шрифты — те же, что в приложении
   (client/css/style.css): сайт и приложение должны выглядеть одним продуктом. */
:root {
  --ground:#EFECE5; --panel:#FBFAF7; --panel-2:#F3F0EA; --line:#DBD6CC; --line-strong:#C7C0B2;
  --ink:#23262C; --ink-muted:#6C6E75; --ink-faint:#9A9A9E; --accent:#97600F; --accent-soft:#EBDFC9;
  --on-accent:#fff;
  --shadow:0 1px 2px rgba(30,26,18,.06),0 8px 24px rgba(30,26,18,.06);
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-data:ui-monospace,"Cascadia Code","SF Mono","Segoe UI Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark) {
  :root {
    --ground:#20242B; --panel:#2B3039; --panel-2:#343A45; --line:#424956; --line-strong:#5A6373;
    --ink:#F2F4F7; --ink-muted:#B9C0CA; --ink-faint:#8C94A0; --accent:#E8AE5F; --accent-soft:#4C3C21;
    --on-accent:#1B1F26;
    --shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.22);
  }
}

* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { margin:0; text-wrap:balance; letter-spacing:-.015em; }
p { margin:0; }
a { color:var(--accent); }

.top { display:flex; align-items:center; gap:16px; max-width:1000px; margin:0 auto; padding:18px 20px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; text-decoration:none; color:var(--ink); letter-spacing:-.01em; }
.brand .mark { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); font-family:var(--font-data); flex:none; }
.brand small { display:block; font-weight:500; font-size:11px; color:var(--ink-muted); letter-spacing:.02em; }
.top .cta { margin-left:auto; }

.cta { display:inline-block; background:var(--accent); color:var(--on-accent); text-decoration:none; font-weight:650; font-size:15px; padding:11px 20px; border-radius:9px; white-space:nowrap; }
.cta:hover { filter:brightness(1.08); }

main { max-width:1000px; margin:0 auto; padding:0 20px; display:flex; flex-direction:column; gap:56px; }

.hero { padding:56px 0 8px; display:flex; flex-direction:column; gap:18px; }
.eyebrow { font-family:var(--font-data); text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:700; color:var(--ink-faint); }
h1 { font-size:clamp(30px,5.4vw,46px); line-height:1.12; font-weight:800; }
.lede { color:var(--ink-muted); max-width:60ch; font-size:17px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:6px; }
.actions .note { font-size:14px; color:var(--ink-muted); }

.features { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.features article { background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.features h2 { font-size:16px; font-weight:700; }
.features p { font-size:14.5px; color:var(--ink-muted); }

.privacy-note { background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:22px 24px; display:flex; flex-direction:column; gap:12px; }
.privacy-note h2 { font-size:19px; font-weight:750; }
.privacy-note p { color:var(--ink-muted); max-width:70ch; }
.privacy-note .soon { font-size:14.5px; color:var(--ink-faint); }

/* правовые страницы */
.doc { max-width:760px; margin:0 auto; padding:48px 20px 80px; display:flex; flex-direction:column; gap:22px; }
.doc h1 { font-size:clamp(24px,4vw,34px); }
.doc h2 { font-size:18px; font-weight:750; margin-top:14px; }
.doc p, .doc li { color:var(--ink-muted); }
.doc ul { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; }
.doc .updated { font-family:var(--font-data); font-size:12px; color:var(--ink-faint); }
.doc .back { font-size:14px; }

footer { border-top:1px solid var(--line); margin-top:64px; }
footer .links { max-width:1000px; margin:0 auto; padding:24px 20px 6px; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:15px; }
footer .small { max-width:1000px; margin:0 auto; padding:0 20px 32px; font-size:13px; color:var(--ink-faint); }

@media (max-width:860px) { .features { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) {
  main { gap:40px; }
  .hero { padding:36px 0 4px; }
  .features { grid-template-columns:1fr; }
  .top { flex-wrap:wrap; }
  .top .cta { margin-left:0; }
}