/* Стили страниц-документов: витрина, оферта, политика, реквизиты.

   Отдельный файл, а не добавка в app.css: те страницы живут своей жизнью,
   их открывают со стороны — из поиска, по ссылке из письма, проверяющий из
   ЮKassa. Приложение при этом не грузится вовсе, и тащить ради текста
   двести килобайт правил незачем. */

:root{
  --wa:#C77DA8; --wa-deep:#8A4E7E; --wa-soft:#F6ECF3;
  --ink:#111B21; --ink-2:#667781; --ink-3:#9AA5AC; --line:#E9EDF0;
}

*{box-sizing:border-box;}

/* Запасные шрифты перечислены полностью: Google Fonts может не открыться —
   у человека без сети, за корпоративным экраном или из страны, откуда его
   закрыли. Текст оферты обязан читаться в любом случае. */
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',
    'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:#fff;
  -webkit-text-size-adjust:100%;
}

.wrap{max-width:720px;margin:0 auto;padding:0 20px 72px;}

/* --- шапка --- */
.top{
  border-bottom:1px solid var(--line);
  margin-bottom:36px;
  background:#fff;
}
.top-in{
  max-width:720px;margin:0 auto;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.top a.logo{
  font-family:'Montserrat','Segoe UI',Arial,sans-serif;
  font-size:19px;font-weight:800;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;
}
.top nav{display:flex;gap:18px;flex-wrap:wrap;}
.top nav a{font-size:14px;color:var(--ink-2);text-decoration:none;}
.top nav a:hover{color:var(--wa-deep);}

/* --- заголовки --- */
h1{
  font-family:'Montserrat','Segoe UI',Arial,sans-serif;
  font-size:34px;line-height:1.2;font-weight:800;
  letter-spacing:-.01em;margin:0 0 14px;
}
h2{
  font-family:'Montserrat','Segoe UI',Arial,sans-serif;
  font-size:22px;line-height:1.3;font-weight:700;
  margin:40px 0 12px;
}
h3{font-size:17px;font-weight:700;margin:26px 0 8px;}

p{margin:0 0 14px;}
ul,ol{margin:0 0 14px;padding-left:22px;}
li{margin-bottom:6px;}
a{color:var(--wa-deep);}

.lead{font-size:19px;line-height:1.55;color:var(--ink-2);margin-bottom:28px;}
.muted{color:var(--ink-2);font-size:14px;}
.date{color:var(--ink-3);font-size:13.5px;margin-bottom:32px;}

/* --- кнопка --- */
.btn{
  display:inline-block;padding:14px 30px;border-radius:12px;
  background:var(--wa);color:#fff;text-decoration:none;
  font-weight:700;font-size:16px;
}
.btn:hover{background:var(--wa-deep);}

/* --- тарифы --- */
.plans{display:grid;gap:16px;grid-template-columns:1fr;margin:24px 0 8px;}
@media(min-width:680px){ .plans{grid-template-columns:repeat(3,1fr);} }
.plan{
  border:1px solid var(--line);border-radius:16px;padding:22px 20px;
  display:flex;flex-direction:column;
}
.plan.best{border-color:var(--wa);background:var(--wa-soft);}
.plan h3{margin:0 0 2px;font-size:18px;}
.plan .who{font-size:13.5px;color:var(--ink-2);margin-bottom:14px;}
.plan .price{font-family:'Montserrat','Segoe UI',Arial,sans-serif;font-size:28px;font-weight:800;line-height:1.1;}
.plan .per{font-size:13.5px;color:var(--ink-2);margin-bottom:16px;}
.plan ul{padding-left:18px;margin:0;font-size:14.5px;}

/* --- реквизиты --- */
.req{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:20px 0;}
.req dl{margin:0;display:grid;grid-template-columns:1fr;gap:2px;}
@media(min-width:560px){ .req dl{grid-template-columns:200px 1fr;gap:8px 16px;} }
.req dt{color:var(--ink-2);font-size:14px;}
.req dd{margin:0 0 10px;font-size:15px;}
@media(min-width:560px){ .req dd{margin-bottom:0;} }

/* --- подвал --- */
.foot{
  border-top:1px solid var(--line);margin-top:56px;padding:26px 20px 40px;
  font-size:13.5px;color:var(--ink-2);
}
.foot-in{max-width:720px;margin:0 auto;}
.foot a{color:var(--ink-2);margin-right:16px;}