/* Общий стиль контентных страниц MemeBot (бренд: фиолетовый + мягкий жёлтый) */
:root{
  --bg:#F3EEE3; --surface:#fffdf8; --text:#241a3d; --text-2:#574d6e;
  --accent:#6A4FB3; --accent-2:#C9A227; --yellow:#E8DB7A; --line:rgba(106,79,179,.16);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Space Grotesk','Inter',system-ui,sans-serif; line-height:1.2; letter-spacing:-.02em}
h1{font-size:clamp(28px,4.2vw,44px); margin:0 0 14px}
h2{font-size:clamp(22px,3vw,30px); margin:44px 0 14px}
h3{font-size:20px; margin:28px 0 10px}
p{margin:0 0 16px} ul,ol{margin:0 0 16px; padding-left:22px} li{margin:6px 0}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%; height:auto}

.wrap{max-width:760px; margin:0 auto; padding:0 20px}
header.site{border-bottom:1px solid var(--line); background:rgba(255,255,255,.6); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10}
/* Шапка шире колонки текста (как .nav-in на главной): семь пунктов меню
   физически не помещаются в 760px и переносились под логотип. Контейнер не
   переносим — логотип и меню всегда в одну строку, при нехватке места
   переносится само меню. */
header.site .wrap{max-width:1100px; display:flex; align-items:center; justify-content:space-between;
  gap:10px 20px; min-height:62px; flex-wrap:nowrap; padding-top:9px; padding-bottom:9px}
.brand{display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:19px; color:var(--text); flex:0 0 auto}
.brand img{width:28px; height:28px}
header.site nav{display:flex; gap:8px 16px; font-size:14.5px; flex-wrap:wrap; justify-content:flex-end}
header.site nav a{color:var(--text-2); white-space:nowrap} header.site nav a:hover{color:var(--accent)}

/* Появление блоков при скролле — визуально как на главной.
   Класс .reveal вешает /assets/pages.js, поэтому без JS ничего не прячется:
   на SEO-странице текст обязан быть виден всегда.
   Транзишн намеренно объявлен на .reveal-in, а не на .reveal: иначе блок,
   которому класс навешивают уже после отрисовки, сначала плавно ГАСНЕТ. */
.reveal{opacity:0; transform:translateY(28px)}
.reveal-in{opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}

.lead{font-size:19px; color:var(--text-2); margin-bottom:28px}
main{padding:38px 0 10px}
.crumbs{font-size:14px; color:var(--text-2); margin-bottom:18px}
.crumbs a{color:var(--text-2)}

.cta{display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:#fff;
  padding:14px 26px; border-radius:14px; font-weight:600; font-size:17px; margin:6px 0 8px;
  box-shadow:0 10px 26px rgba(106,79,179,.26)}
.cta:hover{background:#5a3fa0; text-decoration:none}
.cta-note{font-size:14px; color:var(--text-2); margin:0 0 8px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 24px; margin:22px 0}
.card h3{margin-top:0}
.steps{counter-reset:s; list-style:none; padding:0}
.steps li{counter-increment:s; position:relative; padding-left:44px; margin:16px 0}
.steps li::before{content:counter(s); position:absolute; left:0; top:1px; width:30px; height:30px;
  background:var(--yellow); color:#3a2f10; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-family:'Space Grotesk',sans-serif}
.faq details{border-bottom:1px solid var(--line); padding:14px 0}
.faq summary{cursor:pointer; font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:17px}
.faq details p{margin:10px 0 0; color:var(--text-2)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.tags span{background:rgba(106,79,179,.09); color:var(--accent); border-radius:999px; padding:5px 12px; font-size:14px}
table{width:100%; border-collapse:collapse; margin:16px 0; font-size:16px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
th{font-family:'Space Grotesk',sans-serif; background:rgba(106,79,179,.06)}
.related{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:16px 0 0}
.related a{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:block}
.related a:hover{border-color:var(--accent); text-decoration:none}
.related b{display:block; font-family:'Space Grotesk',sans-serif; margin-bottom:3px}
.related span{font-size:14px; color:var(--text-2)}

footer.site{margin-top:56px; border-top:1px solid var(--line); padding:26px 0 40px; font-size:15px; color:var(--text-2)}
footer.site .wrap{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
footer.site nav{display:flex; gap:16px; flex-wrap:wrap}

@media (max-width:640px){
  body{font-size:16px}
  header.site nav{display:none}
  .wrap{padding:0 16px}
}