/* Страницы о сервисе: /about, /faq, /privacy, /terms.
   Отдельный маленький файл, а не style.css приложения: тот весит
   200 КБ, а здесь нужны заголовки, абзацы и шапка. Цвета — те же,
   что в приложении, чтобы переход со страницы в Синичку не мигал. */

:root{
  --ground:#F3F5FA; --surface:#FFF; --line:#DCE1EC;
  --ink:#141822; --ink-2:#59616F; --ink-3:#8B93A3;
  --azure:#2B5CE6; --azure-ink:#FFF; --azure-soft:#E4EAFD;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0D1117; --surface:#161B24; --line:#262D3A;
    --ink:#E8ECF3; --ink-2:#A4ADBD; --ink-3:#6F7889;
    --azure:#6E93FF; --azure-ink:#0D1117; --azure-soft:#1A2440;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a{color:var(--azure)}

.top{
  max-width:46rem; margin:0 auto; padding:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--ink); text-decoration:none; font-weight:700; font-size:1.1rem}
.brand img{width:2rem; height:2rem}
.open{
  background:var(--azure); color:var(--azure-ink); text-decoration:none;
  padding:.5rem 1rem; border-radius:999px; font-weight:600; font-size:.94rem; white-space:nowrap;
}

main{
  max-width:46rem; margin:0 auto; padding:1.5rem 1rem 2rem;
}
h1{font-size:2rem; line-height:1.2; margin:.5rem 0 1rem}
h2{font-size:1.3rem; line-height:1.3; margin:2rem 0 .5rem}
h3{font-size:1.06rem; margin:1.5rem 0 .25rem}
p, li{color:var(--ink-2)}
.lead{font-size:1.12rem; color:var(--ink)}
.muted{color:var(--ink-3); font-size:.9rem}
ul, ol{padding-left:1.3rem}
li{margin:.25rem 0}

.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); gap:.75rem; margin:1rem 0; padding:0; list-style:none}
.cards li{background:var(--surface); border:1px solid var(--line); border-radius:.875rem; padding:1rem; margin:0}
.cards b{display:block; color:var(--ink); margin-bottom:.25rem}

details{background:var(--surface); border:1px solid var(--line); border-radius:.875rem; padding:.75rem 1rem; margin:.5rem 0}
summary{cursor:pointer; font-weight:600; color:var(--ink)}
details p{margin:.5rem 0 .25rem}

.cta{margin:2rem 0 0}

.foot{
  max-width:46rem; margin:0 auto; padding:1.5rem 1rem 2.5rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; font-size:.9rem;
}
.foot a{color:var(--ink-3); text-decoration:none}
.foot a:hover, .foot a[aria-current]{color:var(--azure)}
.foot__brand{flex-basis:100%; margin:.5rem 0 0; color:var(--ink-3); font-size:.82rem}