/* Core tokens */
:root{ --brand:#3a40ff; --brand2:#232699; --ink:#0f1720; --bg:#f6f7f9; --shadow:0 -6px 32px rgba(15,23,32,0.02); --rad-lg:24px; --rad-xl:32px;}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--ink); background:var(--bg)}
.wrap{width:min(1180px,100% - 36px); margin:0 auto}
.flex-row{display:flex; align-items:center; justify-content:space-between}
.page{padding:18px 0 36px}
.demo-header{background:#fff; box-shadow:0 1px 8px rgba(0,0,0,.06)}
.demo-header .wrap{padding:10px 0}
.logo{font-weight:900; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:10px}
.logo .dot{width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand2))}
.topnav a{color:#27303a; text-decoration:none; margin:0 10px}
.phone{font-weight:800; color:var(--brand); text-decoration:none}

/* Grid */
.article-layout{display:grid; grid-template-columns:300px 1fr; gap:24px; padding-top:95px; align-items:start}
@media (max-width:1100px){ .article-layout{grid-template-columns:1fr;padding-top:55px;} }
.span-2{grid-column:1 / -1}

/* Left column static */
.static-menu{position:static}
.menu-card{border-radius:var(--rad-xl); background:linear-gradient(180deg,var(--brand),var(--brand2)); color:#fff; padding:18px; box-shadow:var(--shadow); margin-bottom:16px; margin-top:30px}
.menu-card__title{font-weight:800; margin-bottom:8px;    padding: 0px 12px;}
.menu-card__list{display:flex; flex-direction:column; gap:4px; max-height:none}
.menu-card__link{display:block; color:#fff; text-decoration:none; padding:10px 12px; border-radius:12px; opacity:.95}
.menu-card__link:hover{background:rgba(255,255,255,.10)}

/* Head */
.breadcrumbs{font-size:14px; color:#6b7280; margin-bottom:6px}
.breadcrumbs a{color:inherit; text-decoration:none}
.breadcrumbs .current{color:#111827; font-weight:600}
.article__title{font-weight:900; font-size:36px; line-height:42px; margin:8px 0 20px}
@media (max-width:640px){ .article__title{font-size:28px; line-height:34px} }
.article-meta{display:flex; flex-wrap:wrap; gap:12px 18px; color:#374151; margin-bottom:14px}
.article-meta__item{display:inline-flex; gap:8px; align-items:center; background:#fff; border-radius:999px; padding:8px 12px; box-shadow:var(--shadow)}
.i{width:18px; height:18px; stroke:#3a40ff; fill:none; stroke-width:2}

/* Expert */
.expert{display:flex; gap:14px; background:#fff; border-radius:var(--rad-lg); padding:16px; box-shadow:var(--shadow); margin-bottom:16px}
.expert__photo{width:88px; height:88px; border-radius:14px; object-fit:cover}
.expert__name{font-weight:800}
.expert__role{font-size:14px; color:#64748b; margin:2px 0 8px}
.expert__text{font-size:14px; color:#374151}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; background:#eef0ff; color:var(--brand); font-weight:700; font-size:12px; margin-right:6px}

/* Cover */
.article-cover{margin:0 0 16px; border-radius:var(--rad-lg); overflow:hidden; box-shadow:var(--shadow)}
.article-cover img{width:100%; height:auto; display:block}

/* TOC */
.toc-main{background:#fff; border-radius:var(--rad-lg); box-shadow:var(--shadow); padding:16px 18px; margin-bottom:12px}
.toc-main__title{font-weight:800; font-size:18px; margin-bottom:6px}
.toc-main__list{padding-left:0; margin:0}
.toc-main__list li{margin:6px 0}
.toc-main__list a{color:#374151; text-decoration:none}
.toc-main__list a:hover{color:var(--brand)}
/* nested + active */
.toc-main__list{counter-reset: toc-h2}
.toc-main__list > li{margin:8px 0; list-style:none; position:relative}
.toc-main__list > li > a{font-weight:500; text-decoration:none; color:#374151}
.toc-main__list > li > a:hover{color:var(--brand)}
.toc-main__list .toc-sub{margin:6px 0 4px 18px; padding-left:0; border-left:2px dashed #e5e7eb}
.toc-main__list .toc-sub li{list-style:none; margin:6px 0; padding-left:10px}


/* Content */
.article__content{background:#fff; border-radius:var(--rad-lg); box-shadow:var(--shadow); padding:20px}
.article__content h2{font-size:28px; line-height:34px; margin:10px 0 6px; font-weight:800}
.article__content h3{font-size:20px; line-height:26px; margin:8px 0; font-weight:800}
.article__content p{margin:0 0 12px}

/* Lists */
.ul, .ol{margin:0 0 12px}
.ul{list-style:none; padding-left:0}
.ul li{position:relative; padding-left:26px; margin:8px 0}
.ul li::before{content:""; width:10px; height:10px; border-radius:50%; position:absolute; left:8px; top:10px; background:linear-gradient(135deg,var(--brand),var(--brand2))}
.ol{list-style:decimal; padding-left:24px}
.ol li{margin:6px 0}

/* Quote */
.quote{margin:14px 0; padding:16px 18px; border-left:6px solid var(--brand); background:linear-gradient(0deg,rgba(58,64,255,.06),rgba(58,64,255,.06)), #fff; border-radius:12px}

/* Mid-form */
.inline-form{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border-radius:var(--rad-xl); padding:18px; margin:18px 0}
.inline-form h3{margin:0 0 8px; font-size:22px; font-weight:800}
.inline-form__form{display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:start}
.inline-form .input span{display:block; font-size:12px; opacity:.9; margin-bottom:6px}
.inline-form input{height:46px; border-radius:14px; padding:0 14px; width:100%}
.inline-form .agree{grid-column:1/-1; display:flex; gap:8px; align-items:center; font-size:12px; opacity:.9}
.btn{height:46px; border-radius:999px; padding:0 20px; background:#fff; color:var(--brand); font-weight:800; border:none; cursor:pointer}
.btn:hover{background:#eef0ff}
.btn.btn--white{background:#fff; color:var(--brand)}

/* CTA */
.cta{padding:8px 0 6px}
.cta__inner{border-radius:28px; padding:24px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:10px; position:relative; box-shadow:var(--shadow)}
.cta--brand{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff}
.cta__title{font-size:40px; line-height:46px; font-weight:800; margin-bottom:10px}
.cta__form{display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:center; margin:12px 0}
.cta__form input{height:46px; border-radius:14px; padding:0 14px}
.cta__form .agree{grid-column:1/-1; font-size:12px; opacity:.95; display:flex; gap:8px; align-items:center; color:#fff}
.cta__messengers{display:flex; gap:18px; margin-top:8px}
.cta-msg{color:#fff; text-decoration:none; font-weight:700}
.cta__photo{min-height:220px; border-radius:20px;     background: url(../img/consult-block.png) no-repeat top;
    transform: scaleX(-1);}

/* MORE */
.more, .more__wrap, .more__rail{background:transparent}
.more h2{font-size:32px; line-height:36px; font-weight:900; margin:10px 0 12px}
.more__wrap{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px}
.more__rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px, 280px); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px; overscroll-behavior-x:contain}
.no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none } .no-scrollbar::-webkit-scrollbar{ display:none }
.more-card{scroll-snap-align:center; display:flex; flex-direction:column; text-decoration:none; color:inherit; background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.more-card img{width:100%; height:150px; object-fit:cover}
.more-card span{padding:10px 12px; font-weight:700}
/* Обертка карусели: 3 колонки — левая стрелка, рейл, правая стрелка */
.more__wrap{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;      /* ВЕРТИКАЛЬНО центрируем ВСЁ содержимое */
  gap: 10px;
  position: relative;       /* можно оставить, но не обязательно */
}

/* Рельс с карточками */
.more__rail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 280px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 10px;
  overscroll-behavior-x: contain;
}

/* Кнопки — БЕЗ absolute, просто по центру ячейки grid */
.more .nav-btn{
  position: static;         /* важно: отключаем absolute */
  transform: none;          /* выключаем translateY */
  place-self: center;       /* центр в своей ячейке */
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  color: var(--brand);
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.more .nav-btn:hover{
  background: var(--brand);
  color: #fff;
}

/* Можно чуть уменьшить кнопки на мобилках */
@media (max-width: 768px){
  .more .nav-btn{ width: 38px; height: 38px; font-size: 20px; }
}

/* Responsive */
@media (max-width:1100px){
  .cta__inner{grid-template-columns:1fr; text-align:center}
  .cta__form{grid-template-columns:1fr}
  .cta__photo{height:220px}
}
@media (max-width:640px){
  .article__title{font-size:26px; line-height:32px}
  .cta__title{font-size:30px; line-height:36px}
  .inline-form__form{grid-template-columns:1fr}
  .more__rail{grid-auto-columns:minmax(220px, 260px)}
}

/* ===== v8: Mobile polish & sidebar to bottom ===== */
@media (max-width: 768px){
  .wrap{width:calc(100% - 24px)}
  .page{padding:12px 0 24px}
  .article__title{font-size:24px; line-height:30px; margin:6px 0 20px}
  .article-meta{gap:8px; margin-bottom:10px}
  .article-meta__item{padding:6px 10px}
  .expert{gap:10px; padding:12px; margin-bottom:12px}
  .expert__photo{width:70px; height:70px; border-radius:12px}
  .article-cover{margin-bottom:12px; border-radius:18px}
  .toc-main{padding:12px 14px; margin-bottom:10px}
  .toc-main__title{font-size:16px}
  .toc-main__list > li{margin:6px 0}
  .toc-main__list .toc-sub{margin:4px 0 0 14px}
  .article__content{padding:14px}
  .article__content h2{font-size:22px; line-height:28px; margin:8px 0 6px}
  .article__content h3{font-size:18px; line-height:24px; margin:6px 0}
  .quote{margin:10px 0; padding:12px 14px; border-radius:10px}
  .inline-form{padding:14px; border-radius:22px; margin:14px 0}
  .inline-form__form{grid-template-columns:1fr}
  .cta{padding:6px 0 4px}
  .cta__inner{padding:16px; border-radius:22px}
  .cta__title{font-size:26px; line-height:32px; margin-bottom:8px}
  .cta__form{grid-template-columns:1fr; gap:8px; margin-top:8px}
  .cta__photo{min-height:160px}
  .more h2{font-size:24px; line-height:28px; margin:8px 0 10px}
  .more__rail{grid-auto-columns:minmax(210px, 240px); gap:12px}
  .nav-btn{width:38px; height:38px; font-size:20px}
}

/* Move left sidebar to the very bottom on mobile */
@media (max-width: 1100px){
  .article-layout__menu{order: 99;}
  .article{order: 1;}
  .cta{order: 2;}
  .more{order: 3;}
  .article-layout__menu .menu-card{margin-top:12px; margin-bottom:0}
}

@media (max-width: 480px){
  .menu-card__link{padding:8px 10px; border-radius:10px}
}

/* ===== v9: 'Показать ещё' in left menu ===== */
.menu-card__more{display:none;margin-top:8px;width:100%;height:42px;border-radius:12px;border:2px solid #fff;background:transparent;color:#fff;font-weight:800;cursor:pointer}
.menu-card__more:hover{background:rgba(255,255,255,.12)}
@media (max-width:1100px){
  .menu-card__more{display:block}
  .menu-card__list.is-collapsed .menu-card__link:nth-child(n+11){display:none} /* show first 10 */
}

/* ===== v11: tag‑based content styling (no classes inside .article__content) ===== */
/* Lists */
.article__content ul{list-style: none; padding-left: 0; margin: 0 0 12px}
.article__content ul li{position: relative; padding-left: 26px; margin: 8px 0}
.article__content ul li::before{content:""; width:10px; height:10px; border-radius:50%; position:absolute; left:8px; top:10px; background:linear-gradient(135deg,var(--brand),var(--brand2))}
.article__content ol{list-style: decimal; padding-left: 24px; margin: 0 0 12px}
.article__content ol li{margin:6px 0}

/* Blockquote */
.article__content blockquote{margin:14px 0; padding:16px 18px; border-left:6px solid var(--brand); background:linear-gradient(0deg,rgba(58,64,255,.06),rgba(58,64,255,.06)), #fff; border-radius:12px}

/* In-article form */
.article__content form{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border-radius:var(--rad-xl); padding:10px; margin:10px 0}
.article__content form h3{margin:0 0 8px; font-size:22px; font-weight:800}
.article__content form{display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:start}
.article__content form label span{display:block; font-size:12px; opacity:.9; margin-bottom:6px}
.article__content form input{height:46px; border-radius:14px; padding:0 14px; width:100%}
.article__content form label{display:block}
.article__content form label input[type="checkbox"]{width:auto; height:auto}
.article__content form button{height:46px; border-radius:999px; padding:0 20px; background:#fff; color:#3a40ff; font-weight:800; border:none; cursor:pointer}
.article__content form button:hover{background:#eef0ff}

@media (max-width: 768px){
  .article__content form{grid-template-columns:1fr}
}

/* ===== v12: Fix expert avatar on mobile — keep square desktop size ===== */
.expert{align-items:flex-start}
.expert__photo{flex:0 0 88px; width:88px; height:88px; aspect-ratio:1/1; object-fit:cover; display:block; max-width:none}
@media (max-width: 768px){
  .article .expert__photo{flex-basis:88px; width:88px !important; height:88px !important; aspect-ratio:1/1}
}

.cta-consent {
  display: flex;
  align-items: center;
  gap: 8px;              /* расстояние между чекбоксом и текстом */
  font-size: 14px;
  color: #fff;           /* под цвет блока */
  margin-top: 10px;
}

.cta-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #3ae374; /* цвет галочки (можно заменить на брендовый) */
  margin: 0;             /* убираем лишние отступы */
}
/* базовое выравнивание согласия */
.cta-consent{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  margin-top:12px;
  font-size:14px;
  line-height:1.35;
}
.cta-consent input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 18px;
  accent-color:#33e17a; /* цвет галочки под фирменный */
}

/* мобильная адаптация */
@media (max-width: 640px){
  /* форма — в столбик на всю ширину */
  .cta__form{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .cta__form input,
  .cta__form button{
    width:100%;
  }

  /* «согласие» — слева, текст переносится, выравнивание по верхнему краю */
  .cta-consent{
    align-items:flex-start;
    text-align:left;
    margin-top:8px;
  }
  .cta-consent span{
    display:block;               /* перенос строки «персональных данных» выглядит аккуратно */
    max-width:100%;
  }
  .cta-consent input[type="checkbox"]{
    margin-top:2px;              /* чтобы галочка была на уровне первой строки текста */
  }

  /* мессенджеры: две колонки (или одна под другой, если мало места) */
  .cta__messengers{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin-top:14px;
  }
  .cta-msg{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:center;
    padding:10px 12px;
    border-radius:10px;
    background: rgba(255,255,255,.08);
  }

  /* фото — снизу (если у вас блок с фото в правой колонке) */
  .cta__inner{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .cta__photo{ display:none; }
  .cta__text { order:1; }
}
/* Контейнер врезки */
.inline-form{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  border-radius:24px;
  padding:20px;
  margin:18px 0;
}

/* Заголовок блока */
.inline-form span{
  margin:0 0 10px;
  font-size:22px;
  font-weight:800;
}

/* Сетка формы */
.inline-form__form{
  display:grid;
  grid-template-columns: 1fr 1fr auto; /* имя | телефон | кнопка */
  gap:12px;
  align-items:center;
}

/* Поля */
.inline-form .input{display:block}
.inline-form .input input{
  width:100%;
  height:46px;
  border-radius:14px;
  padding:0 14px;
  border:none;
  outline:none;
  background:#fff;
  color:#111;
}

/* Кнопка */
.inline-form .btn{
  height:46px;
  border-radius:999px;
  padding:0 20px;
  background:#fff;
  color:var(--brand);
  font-weight:800;
  border:none;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.inline-form .btn:hover{background:#eef0ff}

/* Согласие — отдельной строкой, ровно слева */
.inline-form .agree{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  line-height:1.35;
  color:#fff;
  opacity:.95;
  margin-top:2px;
}
.inline-form .agree a{color:#fff; text-decoration:underline; text-underline-offset:2px}

/* Чекбокс */
.inline-form .agree input[type="checkbox"]{
  width:18px; height:18px; margin:0; flex:0 0 18px;
  accent-color:#33e17a; /* зелёная галочка */
}

/* Мобайл: всё в столбик */
@media (max-width: 760px){
  .inline-form__form{ grid-template-columns:1fr; }
  .inline-form .btn{ width:100%; }
}