/* -----------------------------------------------------------------------------
   WF1-PUBLIC-OLD-DESIGN-TRANSFER — внутренние публичные разделы в оформлении
   СТАРОГО сайта: /tarify, /help, /help/<статья>, /integrations,
   /integrations/<канал>.

   ЗАЧЕМ ЭТОТ ФАЙЛ ВООБЩЕ ЕСТЬ. Этих страниц на старом сайте не было, поэтому
   «перенести их вёрстку» неоткуда. Решение владельца — одеть их в старый
   каркас. Разметку страниц при этом не переписывали: содержание, ссылки,
   таблицы и микроразметка остались ровно теми же, что были приняты этапами
   STAGE 8.x. Здесь только оформление их классов значениями СТАРОГО дизайна.

   НИ ОДНОГО НОВОГО ЗНАЧЕНИЯ. Ширина контейнера, отступы секций, радиусы,
   цвета, тени, размеры заголовков и вид кнопок взяты дословно из
   media/css/default/style.css старого сайта:
     контейнер      .container      — max-width 1240px, padding 0 20px;
     секция         .why-need и др. — padding 78px 0;
     заголовок      .h2             — 42px/1.1, 900, -.035em, #111827;
     подзаголовок   .h2-after       — 17px/1.65, #64748b;
     текст          .content__general — 17px/1.75, #334155, ссылки #297fb8;
     карточка       .tariff/.integration — #fff, 1px #e8eef6, радиус 22–28px,
                                      тень 0 16px 50px rgba(15,23,42,.05);
     метка          .section-kicker — капслок 13px на плашке rgba(41,127,184,.12);
     кнопка         .button__action — градиент #297fb8 → #1f61eb, радиус 14px;
     светлый фон    #f6f8fb, белый  #fff.

   ТАБЛИЦА СРАВНЕНИЯ — единственное место, где значения не откуда было взять:
   таблиц в публичном CSS старого сайта нет ни одной. Она собрана из тех же
   токенов (рамка #e8eef6, светлая строка #f6f8fb, шрифт и цвета текста), чтобы
   не выпадать из остального оформления.

   ПОДКЛЮЧАЕТСЯ только партиалом layouts/public_inner_header.php, то есть
   только на этих пяти страницах. На главную, новости, документы, вход и в
   кабинет не попадает.
   -------------------------------------------------------------------------- */

/* ---------- контейнер и секции ---------- */

.q-container {
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}

.qp-section { padding: 78px 0; background: #fff; }
.qp-section--head { padding: 30px 0 56px; background: #f6f8fb; }
.qp-section--soft { background: #f6f8fb; }
.qp-section--catalog { background: #fff; }
.qp-section--article { padding: 30px 0 78px; background: #fff; }

/* ---------- хлебные крошки ---------- */

.q-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    font-size: 15px;
    color: #64748b;
}
.q-crumbs a { color: #297fb8; }
.q-crumbs a:hover { text-decoration: underline; }
.q-crumbs__sep { color: #94a3b8; }
.q-crumbs__current { color: #64748b; }

/* ---------- заголовки и текст ---------- */

.qp-head h1,
.qp-article h1 {
    margin: 0;
    padding: 0;
    color: #111827;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.035em;
}
.qp-section h2,
.qp-group-title {
    margin: 0 0 14px;
    padding: 0;
    color: #111827;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.03em;
}
.qp-section h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.25;
}
.qp-lead {
    display: block;
    margin: 14px 0 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.65;
}
.qp-lead--narrow { max-width: 760px; }
.qp-section p { color: #334155; font-size: 17px; line-height: 1.75; }
/* Цвет ссылок задан по МЕСТУ, а не селектором `.qp-section a`: тот
   специфичнее любого класса кнопки (0,2,0 против 0,1,0) и красил надпись на
   синей кнопке в синий — текст пропадал. */
.qp-section p a,
.qp-section li a,
.qp-section td a,
.qp-section th a,
.qp-card h3 a,
.qp-help-list a,
.qp-after a,
.qp-muted a,
.qp-card-more,
.qp-text-link { color: #297fb8; }
.qp-section p a:hover,
.qp-section li a:hover,
.qp-card h3 a:hover,
.qp-help-list a:hover,
.qp-after a:hover,
.qp-card-more:hover,
.qp-text-link:hover { text-decoration: underline; }
.qp-muted { color: #64748b; font-size: 15px; line-height: 1.6; }
.qp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(41, 127, 184, .12);
    color: #2b8bd0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.qp-list, .qp-list--wide, .qp-steps-list { margin: 14px 0 0; padding-left: 22px; color: #334155; font-size: 17px; line-height: 1.75; }
.qp-list li, .qp-list--wide li, .qp-steps-list li { margin-bottom: 8px; }

/* ---------- кнопки ---------- */

.qp-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
.qp-head-note { color: #64748b; font-size: 15px; }

.q-btn,
.qp-btn-small,
.qp-btn-default,
.qp-article-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 14px;
    background: #fff;
    color: #111827;
    border: 1px solid #e8eef6;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    transition: .2s;
}
.q-btn:hover,
.qp-btn-small:hover,
.qp-article-cta a:hover {  box-shadow: 0 14px 40px rgba(15, 23, 42, .08); text-decoration: none; }

.q-btn-primary,
.qp-article-cta .q-btn-primary {
    background: linear-gradient(135deg, #297fb8 0%, #1f61eb 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    box-shadow: 0 20px 50px rgba(31, 97, 235, .32);
}
.q-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 60px rgba(31, 97, 235, .42);
    color: #fff;
}
.qp-btn-small { padding: 12px 18px; font-size: 15px; }
.qp-btn-default { padding: 12px 18px; font-size: 15px;background: #ddd }
.qp-btn-default:hover { transition:.3s;background: #2e9f3a;color:#fff }
.qp-text-link, .qp-card-more { font-weight: 800; }

/* ---------- сетки и карточки ---------- */

.qp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.qp-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; align-items: start; }

.qp-card,
.qp-help-block,
.qp-next > div,
.qp-aside-block {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 22px;
    border: 1px solid #e8eef6;
    background: #fff;
    box-shadow: 0 16px 50px rgba(15, 23, 42, .05);
}
.qp-card-body { display: flex; flex-direction: column; gap: 10px; }
.qp-card-tag {
    align-self: flex-start;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(41, 127, 184, .12);
    color: #2b8bd0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.qp-card h3 { margin: 0; }
.qp-card-more { margin-top: auto; padding-top: 8px; }

.qp-help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.qp-help-list { list-style: none; margin: 14px 0 0; padding: 0; }
.qp-help-list li { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.qp-help-list li:last-child { border-bottom: 0; }
.qp-help-list a { display: block; font-size: 15px; font-weight: 600;line-height: 1.34 }
.qp-help-list span { display: block; margin-top: 4px; color: #64748b; font-size: 15px; line-height: 1.6; }

.qp-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.qp-after { margin-top: 26px; color: #64748b; }

/* ---------- карточки тарифов ---------- */

.qp-tt-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.qp-tt-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid #e8eef6;
    box-shadow: 0 20px 70px rgba(15, 23, 42, .07);
    overflow: hidden;
}
.qp-tt-plan--accent { border-color: #297fb8; }
.qp-tt-badge {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(41, 127, 184, .12);
    color: #2b8bd0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.qp-tt-plan h3 { font-size: 24px; color: #111827; font-weight: 900; margin: 0 0 12px; }
.qp-tt-price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid #e8eef6; }
.qp-tt-price strong { font-size: 40px; font-weight: 900; line-height: 1; color: #297fb8; }
.qp-tt-price span { color: #64748b; font-size: 15px; }
.qp-tt-plan-note { margin: 16px 0 0; color: #64748b; font-size: 15px; line-height: 1.6; }
.qp-tt-plan-facts { list-style: none; margin: 18px 0 24px; padding: 0; }
.qp-tt-plan-facts li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 15px; }
.qp-tt-plan-facts b { color: #111827; font-weight: 900; }
.qp-tt-plan-facts span { color: #64748b; }
.qp-tt-plan > a { margin-top: auto; }

/* ---------- таблица сравнения ---------- */

/* Ячейка grid по умолчанию не уже своего содержимого (`min-width:auto`),
   поэтому широкая таблица растягивала колонку, а вместе с ней и страницу:
   на 390 px появлялась горизонтальная прокрутка ВСЕГО документа вместо
   прокрутки самой таблицы. */
.qp-cols > *, .qp-grid > *, .qp-next > *, .qp-help-grid > *,
.qp-tt-plans > *, .qp-article-layout > * { min-width: 0; }

.qp-table-scroll { width: 100%; max-width: 100%; margin-top: 24px; overflow-x: auto; }
.qp-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; color: #334155; }
.qp-table caption.qp-table-caption { caption-side: top; padding: 0 0 12px; text-align: left; color: #64748b; font-size: 15px; }
.qp-table th, .qp-table td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; text-align: left; vertical-align: top; }
.qp-table thead th { color: #111827; font-weight: 900; border-bottom: 1px solid #e8eef6; white-space: nowrap; }
.qp-table tbody th { color: #111827; font-weight: 700; }
.qp-table tbody th small { display: block; margin-top: 4px; color: #64748b; font-size: 13px; font-weight: 400; line-height: 1.5; }
.qp-table-group th { background: #f6f8fb; color: #111827; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.qp-table--compact th, .qp-table--compact td { padding: 10px 12px; }
.qp-tt-yes { color: #15ac00; display: inline-flex; }
.qp-tt-no { color: #94a3b8; }
.qp-tt-text { color: #334155; }

/* ---------- статья помощи и карточка интеграции ---------- */

.qp-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.qp-article { width: 100%; color: #334155; font-size: 17px; line-height: 1.75; }
.qp-article h2 { margin: 34px 0 12px; font-size: 28px; }
.qp-article h3 { margin: 24px 0 8px; }
.qp-article ul, .qp-article ol { padding-left: 22px; }
.qp-article li { margin-bottom: 8px; }
.qp-article-aside { display: flex; flex-direction: column; gap: 18px; }
.qp-aside-block h2, .qp-aside-block h3 { font-size: 20px; margin: 0 0 10px; }
.qp-article-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px;align-items: center }
.qp-code {
    display: block;
    padding: 16px 18px;
    border-radius: 14px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
/* Настоящий снимок экрана в публичной статье помощи (WF1-HOMEPAGE-FIX-2).
   Рамка сознательная: это окно продукта, и границу кадра надо видеть. */
.qp-help-image { margin: 12px 0 4px; border: 1px solid #dfe6f0; border-radius: 14px; overflow: hidden; background: #fff; }
.qp-help-image img { display: block; width: 100%; height: auto; }
.qp-help-image figcaption { padding: 9px 14px; border-top: 1px solid #eef2f7; font-size: 13px; line-height: 1.5; color: #7c8698; }
.qp-faq details {
    padding: 22px 24px;
    margin-bottom: 16px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e8eef6;
    box-shadow: 0 16px 50px rgba(15, 23, 42, .05);
}
.qp-faq summary { cursor: pointer; color: #111827; font-weight: 900; font-size: 17px; }

/* ---------- адаптив: те же брейкпоинты, что у старого сайта ---------- */

@media (max-width: 1000px) {
    .qp-grid, .qp-tt-plans, .qp-next { grid-template-columns: repeat(2, 1fr); }
    .qp-article-layout { grid-template-columns: 1fr; }
    .qp-head h1, .qp-article h1 { font-size: 34px; }
    .qp-section h2, .qp-group-title { font-size: 27px; }
}

@media (max-width: 720px) {
    .qp-section { padding: 48px 0; }
    .qp-section--head { padding: 22px 0 36px; }
    .qp-grid, .qp-cols, .qp-tt-plans, .qp-next, .qp-help-grid { grid-template-columns: 1fr; }
    .qp-head h1, .qp-article h1 { font-size: 28px; }
    .qp-section h2, .qp-group-title { font-size: 23px; }
    .qp-head-actions .q-btn { width: 100%; }
}