/* ============================================================
   Дизайн-система Beresta
   Характер: книжный и тёплый, с терминальной костью.
   Преемственность от ДС-2: жёсткие тени-подложки, углы 2px, рамки 2px.
   Отличие: тёплая палитра, разрешённые тёмные блоки,
   акценты взяты из цветов выделений в самом приложении.
   ============================================================ */

:root{
  /* Светлая тема — бумажная */
  --bg:#F7F4ED;
  --fg:#2B2A28;
  --surface:#EDE8DD;
  --border:#B8B2A6;
  --muted:#6B665D;
  --hover:#E4DED1;

  /* Витрина под скриншоты — следует теме: приложение снимается парой
     светлый/тёмный, и родной скриншот не должен спорить со страницей */
  --shot-bg:#E4DFD2;
  --shot-fg:#2B2A28;
  --shot-border:#B8B2A6;
  --shot-cap:#6B665D;
  /* Подвал остаётся тёмным всегда — это опора страницы */
  --foot-bg:#2E2E2B;
  --foot-fg:#EDE8DD;
  --foot-border:#4A4844;

  /* Акценты — цвета выделений из Beresta */
  --hl-pink:#E8A0B4;
  --hl-blue:#7FA8D9;
  --hl-amber:#E8C86A;
  --hl-green:#8FB88A;

  /* Главная кнопка: в светлой теме розовая с тёмной рамкой */
  --btn-bg:#E8A0B4;
  --btn-fg:#2B2A28;
  --btn-border:#2B2A28;
  --btn-shadow:#2B2A28;

  /* Фон-береста: волокна коры и чечевички. Тёмный штрих по светлой бумаге */
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420'%3E%3Cg fill='%232B2A28' fill-opacity='0.07'%3E%3Crect x='38' y='72' width='30' height='3' rx='1.5'/%3E%3Crect x='214' y='66' width='18' height='3' rx='1.5'/%3E%3Crect x='402' y='80' width='24' height='3' rx='1.5'/%3E%3Crect x='112' y='152' width='26' height='3' rx='1.5'/%3E%3Crect x='330' y='160' width='16' height='3' rx='1.5'/%3E%3Crect x='470' y='146' width='22' height='3' rx='1.5'/%3E%3Crect x='62' y='232' width='20' height='3' rx='1.5'/%3E%3Crect x='248' y='226' width='32' height='3' rx='1.5'/%3E%3Crect x='430' y='240' width='18' height='3' rx='1.5'/%3E%3Crect x='150' y='308' width='24' height='3' rx='1.5'/%3E%3Crect x='356' y='300' width='20' height='3' rx='1.5'/%3E%3Crect x='90' y='378' width='28' height='3' rx='1.5'/%3E%3Crect x='290' y='384' width='16' height='3' rx='1.5'/%3E%3Crect x='468' y='372' width='22' height='3' rx='1.5'/%3E%3C/g%3E%3Cg stroke='%232B2A28' stroke-opacity='0.07' fill='none' stroke-width='1'%3E%3Cpath d='M0 42 Q130 36 260 44 T520 42'/%3E%3Cpath d='M0 118 Q140 124 280 114 T520 118'/%3E%3Cpath d='M0 196 Q120 190 240 199 T520 196'/%3E%3Cpath d='M0 272 Q150 278 300 267 T520 272'/%3E%3Cpath d='M0 344 Q110 338 230 347 T520 344'/%3E%3Cpath d='M0 408 Q160 414 320 403 T520 408'/%3E%3C/g%3E%3C/svg%3E");

  --shadow:4px 4px 0 var(--border);
  --shadow-lg:6px 6px 0 var(--border);
  --radius:2px;

  --font-book:'Literata', Georgia, 'Times New Roman', serif;
  --font-mono:'Fira Mono', ui-monospace, 'Courier New', monospace;
}

:root[data-theme="dark"]{
  --bg:#262624;
  --fg:#EDE8DD;
  --surface:#32322F;
  --border:#55534D;
  --muted:#9A958B;
  --hover:#3A3A36;
  --shot-bg:#33332F;
  --shot-fg:#EDE8DD;
  --shot-border:#55534D;
  --shot-cap:#9A958B;
  /* Главная кнопка на тёмном — светлая инверсия */
  --btn-bg:#EDE8DD;
  --btn-fg:#262624;
  --btn-border:#EDE8DD;
  --btn-shadow:#8A867C;
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420'%3E%3Cg fill='%23EDE8DD' fill-opacity='0.085'%3E%3Crect x='38' y='72' width='30' height='3' rx='1.5'/%3E%3Crect x='214' y='66' width='18' height='3' rx='1.5'/%3E%3Crect x='402' y='80' width='24' height='3' rx='1.5'/%3E%3Crect x='112' y='152' width='26' height='3' rx='1.5'/%3E%3Crect x='330' y='160' width='16' height='3' rx='1.5'/%3E%3Crect x='470' y='146' width='22' height='3' rx='1.5'/%3E%3Crect x='62' y='232' width='20' height='3' rx='1.5'/%3E%3Crect x='248' y='226' width='32' height='3' rx='1.5'/%3E%3Crect x='430' y='240' width='18' height='3' rx='1.5'/%3E%3Crect x='150' y='308' width='24' height='3' rx='1.5'/%3E%3Crect x='356' y='300' width='20' height='3' rx='1.5'/%3E%3Crect x='90' y='378' width='28' height='3' rx='1.5'/%3E%3Crect x='290' y='384' width='16' height='3' rx='1.5'/%3E%3Crect x='468' y='372' width='22' height='3' rx='1.5'/%3E%3C/g%3E%3Cg stroke='%23EDE8DD' stroke-opacity='0.07' fill='none' stroke-width='1'%3E%3Cpath d='M0 42 Q130 36 260 44 T520 42'/%3E%3Cpath d='M0 118 Q140 124 280 114 T520 118'/%3E%3Cpath d='M0 196 Q120 190 240 199 T520 196'/%3E%3Cpath d='M0 272 Q150 278 300 267 T520 272'/%3E%3Cpath d='M0 344 Q110 338 230 347 T520 344'/%3E%3Cpath d='M0 408 Q160 414 320 403 T520 408'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#262624;
    --fg:#EDE8DD;
    --surface:#32322F;
    --border:#55534D;
    --muted:#9A958B;
    --hover:#3A3A36;
    --shot-bg:#33332F;
    --shot-fg:#EDE8DD;
    --shot-border:#55534D;
    --shot-cap:#9A958B;
  /* Главная кнопка на тёмном — светлая инверсия */
  --btn-bg:#EDE8DD;
  --btn-fg:#262624;
  --btn-border:#EDE8DD;
  --btn-shadow:#8A867C;
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420'%3E%3Cg fill='%23EDE8DD' fill-opacity='0.085'%3E%3Crect x='38' y='72' width='30' height='3' rx='1.5'/%3E%3Crect x='214' y='66' width='18' height='3' rx='1.5'/%3E%3Crect x='402' y='80' width='24' height='3' rx='1.5'/%3E%3Crect x='112' y='152' width='26' height='3' rx='1.5'/%3E%3Crect x='330' y='160' width='16' height='3' rx='1.5'/%3E%3Crect x='470' y='146' width='22' height='3' rx='1.5'/%3E%3Crect x='62' y='232' width='20' height='3' rx='1.5'/%3E%3Crect x='248' y='226' width='32' height='3' rx='1.5'/%3E%3Crect x='430' y='240' width='18' height='3' rx='1.5'/%3E%3Crect x='150' y='308' width='24' height='3' rx='1.5'/%3E%3Crect x='356' y='300' width='20' height='3' rx='1.5'/%3E%3Crect x='90' y='378' width='28' height='3' rx='1.5'/%3E%3Crect x='290' y='384' width='16' height='3' rx='1.5'/%3E%3Crect x='468' y='372' width='22' height='3' rx='1.5'/%3E%3C/g%3E%3Cg stroke='%23EDE8DD' stroke-opacity='0.07' fill='none' stroke-width='1'%3E%3Cpath d='M0 42 Q130 36 260 44 T520 42'/%3E%3Cpath d='M0 118 Q140 124 280 114 T520 118'/%3E%3Cpath d='M0 196 Q120 190 240 199 T520 196'/%3E%3Cpath d='M0 272 Q150 278 300 267 T520 272'/%3E%3Cpath d='M0 344 Q110 338 230 347 T520 344'/%3E%3Cpath d='M0 408 Q160 414 320 403 T520 408'/%3E%3C/g%3E%3C/svg%3E");
  }
}

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

body{
  margin:0;
  background-color:var(--bg);
  background-image:var(--pattern);
  color:var(--fg);
  font-family:var(--font-book);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background-color .15s ease, color .15s ease;
}

.wrap{max-width:1120px; margin:0 auto; padding:0 40px}
section{padding:88px 0}
section + section{border-top:2px solid var(--border)}

/* ── Типографика ─────────────────────────────── */
h1,h2,h3{margin:0 0 22px; font-weight:700; letter-spacing:-0.015em}
h1{font-size:54px; line-height:1.12}
h2{font-size:34px; line-height:1.18}
h3{font-size:22px; line-height:1.3}
p{margin:0 0 16px}
.lead{font-size:21px; line-height:1.6}
.muted{color:var(--muted)}
a{color:var(--fg); text-decoration-color:var(--border); text-underline-offset:3px}
a:hover{text-decoration-color:var(--hl-blue)}

/* Моноширинный голос: метки, цифры, кнопки, пути */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  margin:0 0 16px;
}
code, .mono{font-family:var(--font-mono); font-size:.92em}

.label{
  display:inline-block; font-family:var(--font-mono); font-size:12px;
  font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:3px 10px; border-radius:var(--radius);
  background:var(--hl-amber); color:#2B2A28;
}
.label-quiet{background:var(--surface); color:var(--muted); border:2px solid var(--border)}
.label-ok{background:var(--hl-green); color:#2B2A28}

/* ── Шапка ───────────────────────────────────── */
header.top{border-bottom:2px solid var(--border); padding:18px 0; position:sticky; top:0;
  background:var(--bg); z-index:20}
.top-row{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.brand{
  font-family:var(--font-mono); font-size:13px; font-weight:700;
  letter-spacing:0.3em; text-transform:uppercase;
  border:2px solid var(--fg); border-radius:var(--radius);
  padding:7px 13px; box-shadow:3px 3px 0 var(--fg); background:var(--bg);
  text-decoration:none;
}
.top-nav{display:flex; align-items:center; gap:18px; font-family:var(--font-mono); font-size:13px}
.switch{display:flex; border:2px solid var(--border); border-radius:var(--radius); overflow:hidden}
.switch a, .switch button{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:0.08em;
  padding:5px 10px; background:var(--bg); color:var(--muted);
  border:0; cursor:pointer; text-decoration:none; line-height:1.6;
  display:inline-flex; align-items:center; justify-content:center; min-height:28px;
}
.switch button svg{display:block}
.switch a.on, .switch button.on{background:var(--fg); color:var(--bg)}
.switch a:hover, .switch button:hover{background:var(--hover)}
.switch a.on:hover, .switch button.on:hover{background:var(--fg)}

/* ── Кнопки ──────────────────────────────────── */
.btn{
  display:inline-block; font-family:var(--font-mono); font-size:15px; font-weight:500;
  padding:12px 22px; border:2px solid var(--fg); border-radius:var(--radius);
  background:var(--bg); color:var(--fg); text-decoration:none;
  box-shadow:4px 4px 0 var(--fg); cursor:pointer;
  transition:transform .1s ease, box-shadow .1s ease;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--fg)}
.btn:active{transform:translate(2px,2px); box-shadow:none}
.btn-primary{
  background:var(--btn-bg); color:var(--btn-fg);
  border-color:var(--btn-border); box-shadow:4px 4px 0 var(--btn-shadow);
}
.btn-primary:hover{box-shadow:6px 6px 0 var(--btn-shadow)}
.btn-primary:active{box-shadow:none}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:28px}

/* App Store — кнопка с глифом Apple */
.btn-appstore{display:inline-flex; align-items:center; gap:12px}
.btn-appstore .i-apple{flex:none; margin-top:-3px}

/* App Store — неактивная */
.btn-store{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:14px;
  padding:11px 18px; border:2px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--muted);
  opacity:.55; cursor:not-allowed; user-select:none;
}
.btn-store .soon{
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:var(--radius); padding:1px 5px;
}

/* ── Канбан планов ───────────────────────────── */
.kanban{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:36px; align-items:start}
.kanban-col{display:flex; flex-direction:column; gap:16px}
.kanban-title{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin:0;
}
.kanban-card{padding:20px}
.kanban-card h4{margin:0 0 8px; font-size:17px; line-height:1.3}
.kanban-card p{margin:0; font-size:15px; line-height:1.55}
.kanban-vote{
  margin-top:14px !important; padding-top:12px; border-top:2px solid var(--border);
  font-family:var(--font-mono); font-size:12px !important; line-height:1.4 !important;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.kanban-count{color:var(--muted)}
@media (max-width:900px){.kanban{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.kanban{grid-template-columns:1fr}}

/* ── Карточки ────────────────────────────────── */
.card{
  background:var(--bg); border:2px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px;
}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:32px}

/* ── Витрина скриншота: всегда тёмная ────────── */
.shot{
  background:var(--shot-bg); color:var(--shot-fg);
  border:2px solid var(--shot-border); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-lg);
}
.shot img{width:100%; height:auto; display:block; border:2px solid var(--shot-border); border-radius:var(--radius)}
.shot figcaption{
  font-family:var(--font-mono); font-size:13px; color:var(--shot-cap);
  margin-top:16px; line-height:1.55;
}
figure{margin:0}

/* ── Цитата-выписка: полоса цветом выделения ─── */
.quote{
  border-left:4px solid var(--hl-pink); background:var(--surface);
  padding:16px 20px; border-radius:0 var(--radius) var(--radius) 0; margin:0 0 16px;
}
.quote.blue{border-left-color:var(--hl-blue)}
.quote.amber{border-left-color:var(--hl-amber)}
.quote p{margin:0}
.quote .src{font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:8px}

/* ── Список: работает / ещё нет ──────────────── */
.checklist{list-style:none; padding:0; margin:0}
.checklist li{padding-left:30px; position:relative; margin-bottom:12px}
.checklist li::before{
  content:"—"; position:absolute; left:0; font-family:var(--font-mono); color:var(--muted);
}
.checklist.ok li::before{content:"✓"; color:var(--hl-green); font-weight:700}

/* ── Цифры ───────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.stat{border:2px solid var(--border); border-radius:var(--radius); padding:22px; text-align:left}
.stat .v{font-family:var(--font-mono); font-size:38px; font-weight:700; line-height:1; color:var(--fg)}
.stat .v em{font-style:normal; background:var(--hl-amber); color:#2B2A28; padding:0 6px}
.stat .k{font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin-top:10px}

/* ── Форма списка ожидания ───────────────────── */
.waitlist{
  border:2px solid var(--fg); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:32px; background:var(--bg); max-width:620px;
}
.waitlist label{
  display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.waitlist input[type=email], .waitlist input[type=text]{
  width:100%; font-family:var(--font-book); font-size:17px;
  padding:11px 14px; border:2px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--fg); margin-bottom:18px;
}
.waitlist input:focus{outline:none; border-color:var(--hl-blue)}
.waitlist .note{font-size:15px; color:var(--muted); margin-top:16px}

/* ── Статьи ──────────────────────────────────── */
.article-card{
  border:2px solid var(--border); border-radius:var(--radius); padding:22px;
  text-decoration:none; display:block; background:var(--bg);
  transition:transform .1s ease, box-shadow .1s ease;
}
.article-card:hover{transform:translate(-2px,-2px); box-shadow:var(--shadow)}
.article-card h3{margin-bottom:10px; font-size:19px}
.article-card p{font-size:15px; color:var(--muted); margin:0}

/* ── Подвал ──────────────────────────────────── */
footer{
  background:var(--foot-bg); color:var(--foot-fg);
  border-top:2px solid var(--foot-border); padding:56px 0 44px;
}
footer a{color:var(--foot-fg)}
footer .why{max-width:680px; font-size:17px; line-height:1.7; margin-bottom:32px}
footer .fine{font-family:var(--font-mono); font-size:13px; color:#B5AFA3}

/* ── Адаптив ─────────────────────────────────── */
@media (max-width:900px){
  .grid3, .grid2, .stats{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr !important}
}
@media (max-width:640px){
  body{font-size:17px}
  .wrap{padding:0 22px}
  section{padding:56px 0}
  h1{font-size:36px}
  h2{font-size:27px}
  .lead{font-size:19px}
  .waitlist{padding:22px}
}

/* ── Пара скриншотов под тему страницы ───────── */
.shot .s-dark{display:none}
:root[data-theme="dark"] .shot .s-light{display:none}
:root[data-theme="dark"] .shot .s-dark{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .shot .s-light{display:none}
  :root:not([data-theme="light"]) .shot .s-dark{display:block}
}

/* ── Соседи: сравнение ───────────────────────── */
.rival{
  display:grid; grid-template-columns:210px 1fr; gap:38px; align-items:start;
  border:2px solid var(--border); border-radius:var(--radius);
  padding:30px 32px; background:var(--bg); margin-bottom:24px;
}
.rival:last-of-type{margin-bottom:0}
.rival h3{margin:0 0 8px; font-size:23px}
.rival-head .eyebrow{margin:0; line-height:1.5}
.rival-body{display:grid; grid-template-columns:1.35fr 1fr; gap:26px 38px}
.rival-body > div{padding-left:16px}
.rival-body .full{grid-column:1 / -1}
.rival-body p:not(.r-label){font-size:16.5px; line-height:1.62}
.rival-body p:last-child{margin-bottom:0}
/* Ценник: у платного — плашка цветом маркера, у бесплатных просто слово */
.rival .price{font-family:var(--font-mono); font-size:15px; margin:0 0 7px; line-height:1.45}
.rival .price em{
  font-style:normal; font-size:21px; font-weight:700;
  background:var(--hl-amber); color:#2B2A28; padding:2px 8px;
}
.rival .price-note{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em;
  color:var(--muted); margin:0; line-height:1.55;
}
.r-label{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin:0 0 7px;
}
/* Полосы теми же цветами, что маркеры в самом приложении */
.r-them{border-left:3px solid var(--hl-amber)}
.r-took{border-left:3px solid var(--hl-green)}
.r-diff{border-left:3px solid var(--hl-pink)}
.rivals-note{max-width:76ch; margin-top:34px; font-size:17px; color:var(--muted)}
@media (max-width:900px){
  .rival{grid-template-columns:1fr; gap:22px; padding:24px}
  .rival-body{grid-template-columns:1fr; gap:22px}
}

/* ── Вопросы и ответы ────────────────────────── */
.faq{max-width:84ch}
.faq details{border-bottom:2px solid var(--border); padding:20px 0}
.faq details:first-of-type{border-top:2px solid var(--border)}
.faq summary{
  cursor:pointer; font-weight:700; font-size:19px; line-height:1.4;
  list-style:none; display:flex; gap:14px; align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"+"; font-family:var(--font-mono); font-weight:400;
  color:var(--muted); flex:none;
}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{color:var(--muted)}
.faq details p{margin:14px 0 0 28px; font-size:17px; line-height:1.65}
@media (max-width:640px){
  .faq summary{font-size:18px}
  .faq details p{margin-left:0}
}

/* ── Своя лицензионная строка под блоком соседей ── */
.self-line{
  max-width:78ch; margin:20px 0 0; padding-top:20px;
  border-top:2px solid var(--border);
  font-family:var(--font-mono); font-size:14px; line-height:1.65; color:var(--fg);
}
.self-line b{letter-spacing:0.1em; text-transform:uppercase; font-size:13px}

/* ============================================================
   Текстовые страницы: политика приватности, поддержка.
   Ширина полосы набора — по книжной мерке, а не по ширине шапки:
   1120 px хороши для сетки карточек и никуда не годятся для чтения.
   ============================================================ */
.prose{max-width:720px}
.prose h3{margin:38px 0 10px}
.prose h4{font-size:18px; line-height:1.35; margin:24px 0 8px}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px; padding-left:22px}
.prose li{margin:0 0 8px}
.prose .muted{font-size:15px}
.prose table{border-collapse:collapse; width:100%; margin:0 0 18px; font-size:16px}
.prose th,.prose td{border:2px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top}
.prose th{background:var(--surface); font-weight:700}
.updated{font-family:var(--font-mono); font-size:14px; color:var(--muted); margin-bottom:28px}