/* ═══════════════════════════════════════════════════════════════════
   BANNGRU — оформление текстовых страниц

   Подключается поверх site.css на страницах, где основное содержимое —
   текст: руководства, юридические документы, блог, новости.

   Здесь же поддержаны классы из старой вёрстки (.content-section,
   .code-block, .alert-box и прочие): страницы пересобраны в новую
   оболочку с сохранением исходной разметки, и их стили должны жить
   в общем файле, а не копией в каждой странице.
   ═══════════════════════════════════════════════════════════════════ */

.prose { max-width: 860px; margin: 0 auto; padding-bottom: 110px; }

/* Блок раздела — основной контейнер старых страниц */
.prose .content-section {
    padding: 30px 32px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.prose .content-section + .content-section { margin-top: 20px; }

/* ═══ Типографика ═══ */

.prose h2 {
    font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.25; text-wrap: balance;
}
.prose h2:not(:first-child) { margin-top: 34px; }

.prose h3 { margin-top: 26px; font-size: 1.1rem; font-weight: 700; }
.prose h4 { margin-top: 20px; font-size: 0.98rem; font-weight: 700; }

.prose p { margin-top: 14px; color: var(--text-secondary); text-wrap: pretty; }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: 12px; }

.prose strong, .prose b { color: var(--text-primary); font-weight: 700; }

/* Ссылки в тексте подчёркнуты: цвета одного мало, чтобы их заметить */
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }

.prose ul, .prose ol { margin-top: 14px; padding-left: 4px; list-style: none; }
.prose li { position: relative; padding-left: 24px; color: var(--text-secondary); }
.prose li + li { margin-top: 9px; }
.prose ul > li::before {
    content: ''; position: absolute; left: 6px; top: 0.66em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* Нумерация вручную: обычные маркеры не дают покрасить цифру отдельно */
.prose ol { counter-reset: prose-ol; }
.prose ol > li { counter-increment: prose-ol; }
.prose ol > li::before {
    content: counter(prose-ol) '.'; position: absolute; left: 0; top: 0;
    font-weight: 700; color: var(--accent);
}

.prose hr { margin: 32px 0; border: none; border-top: 1px solid var(--border); }

.prose blockquote {
    margin-top: 18px; padding: 4px 0 4px 20px;
    border-left: 3px solid var(--accent);
    color: var(--text-secondary); font-style: italic;
}

/* ═══ Код ═══ */

.prose code {
    padding: 2px 7px; font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.86em; color: var(--accent);
    background: rgba(0, 255, 136, 0.08); border-radius: 6px;
}

.prose pre, .prose .code-block {
    margin-top: 16px; overflow-x: auto;
    background: #08080c; border: 1px solid var(--border); border-radius: var(--radius-md);
}
.prose pre { padding: 18px 20px; }
.prose pre code { padding: 0; color: var(--text-primary); background: none; }

/* Шапка блока кода: язык слева, кнопка копирования справа */
.prose .code-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.prose .code-language { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.prose .copy-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
    font-size: 0.75rem; color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-strong);
    border-radius: 8px; transition: color 180ms ease, border-color 180ms ease;
}
.prose .copy-btn:hover { color: var(--accent); border-color: rgba(0, 255, 136, 0.35); }
.prose .code-block pre { border: none; border-radius: 0; }

/* ═══ Врезки ═══ */

/* alert-box-warning — отдельное имя класса, а не модификатор,
   поэтому перечисляем явно: правило .alert-box его не ловит */
.prose .alert-box, .prose .alert-box-warning, .prose .tip-box,
.prose .warning-box, .prose .info-box {
    display: flex; gap: 14px; margin-top: 18px; padding: 17px 20px;
    border-radius: var(--radius-md); font-size: 0.92rem;
}
.prose .alert-box-warning i { margin-top: 3px; flex-shrink: 0; color: var(--warning); }
.prose .alert-box-warning { background: rgba(251, 191, 36, 0.06); border: 1px solid rgba(251, 191, 36, 0.24); }
.prose .alert-box i, .prose .tip-box i, .prose .warning-box i, .prose .info-box i { margin-top: 3px; flex-shrink: 0; }
.prose .alert-box p, .prose .tip-box p, .prose .warning-box p, .prose .info-box p { margin: 0; }

.prose .tip-box, .prose .info-box { background: rgba(0, 255, 136, 0.06); border: 1px solid rgba(0, 255, 136, 0.22); }
.prose .tip-box i, .prose .info-box i { color: var(--accent); }

.prose .warning-box, .prose .alert-box { background: rgba(251, 191, 36, 0.06); border: 1px solid rgba(251, 191, 36, 0.24); }
.prose .warning-box i, .prose .alert-box i { color: var(--warning); }

/* ═══ Таблицы ═══ */

.prose .table-container { margin-top: 18px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.prose table, .prose .doc-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.prose th {
    padding: 13px 16px; text-align: left; font-weight: 700; white-space: nowrap;
    background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.prose td { padding: 13px 16px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.prose tr:last-child td { border-bottom: none; }

.prose .check-icon { color: var(--accent); }
.prose .cross-icon { color: var(--danger); }

/* ═══ Значки ═══ */

.prose .badge, .prose .method-badge, .prose .skill-tag, .prose .blog-tag, .prose .news-tag {
    display: inline-flex; align-items: center; padding: 3px 11px;
    font-size: 0.74rem; font-weight: 700; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); color: var(--text-secondary);
}
.prose .method-badge { font-family: 'Geist Mono', ui-monospace, monospace; text-transform: uppercase; }
.prose .method-get { background: rgba(0, 255, 136, 0.13); color: var(--accent); }
.prose .method-post { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.prose .method-put, .prose .method-patch { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.prose .method-delete { background: rgba(224, 57, 62, 0.15); color: #ff6b6f; }

/* ═══ Шаги ═══ */

.prose .step-card { display: flex; gap: 18px; margin-top: 18px; padding: 22px 24px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.prose .step-number {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #06170f; background: var(--accent); border-radius: 50%;
}
.prose .step-card > div { flex: 1; min-width: 0; }
.prose .step-card h3 { margin-top: 0; }

/* ═══ Метрики и сетки карточек из старой вёрстки ═══ */

.prose .metric { padding: 20px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.prose .metric-value { font-size: 1.7rem; font-weight: 900; color: var(--accent); }
.prose .metric-label { margin-top: 5px; font-size: 0.8rem; color: var(--text-muted); }

.prose .contact-grid, .prose .card-grid, .prose .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.prose .contact-card { padding: 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.prose .contact-label { font-size: 0.78rem; color: var(--text-muted); }

/* ═══ Аккордеон ═══
   Старая разметка .faq-item переведена в нативный <details>: раскрытие
   работает без JS и доступно с клавиатуры. */

.prose details { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.prose details + details { margin-top: 12px; }
.prose details[open] { border-color: rgba(0, 255, 136, 0.28); }
.prose summary {
    display: flex; align-items: center; gap: 14px; padding: 18px 22px;
    font-size: 0.98rem; font-weight: 600; cursor: pointer; list-style: none;
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after {
    content: '\f078'; margin-left: auto;
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.8rem;
    color: var(--text-muted); transition: transform 240ms ease;
}
.prose details[open] summary::after { transform: rotate(180deg); }
.prose summary:hover { color: var(--accent); }
.prose details .answer { padding: 0 22px 20px; font-size: 0.9rem; color: var(--text-secondary); }
.prose details .answer p:first-child { margin-top: 0; }

/* ═══ Версии в истории изменений ═══ */

.prose .version-card { padding: 26px 30px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.prose .version-card + .version-card { margin-top: 18px; }
.prose .version-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.prose .version-number { font-size: 1.3rem; font-weight: 800; color: var(--accent); }
.prose .version-date { font-size: 0.82rem; color: var(--text-muted); }
.prose .change-section { margin-top: 18px; }
.prose .change-section h3 { margin-top: 0; }

/* ═══ Разделы страницы «О нас» ═══ */

.prose .story-section { padding: 30px 32px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.prose .story-section + .story-section { margin-top: 20px; }
.prose .story-content > p:first-child { margin-top: 0; }
.prose .category-section + .category-section { margin-top: 34px; }

/* ═══ Призыв к действию внутри текста ═══ */

.prose .cta-box {
    margin-top: 28px; padding: 32px; text-align: center;
    background: var(--surface-1);
    border: 1px solid rgba(0, 255, 136, 0.22); border-radius: var(--radius-lg);
}
.prose .cta-box h2, .prose .cta-box h3 { margin-top: 0; }
.prose .cta-box p { margin-left: auto; margin-right: auto; max-width: 520px; }
.prose .cta-box .btn { margin-top: 20px; }

/* ═══ Аккордеон из старой вёрстки ═══
   Раскрытие там держалось на JS. Переносить его не стали: разметка
   пересобрана в нативный <details>, а эти правила — на случай, если
   где-то остались старые блоки. */

.prose .faq-item { margin-top: 12px; padding: 18px 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.prose .faq-question { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.prose .faq-answer { margin-top: 10px; font-size: 0.9rem; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════
   Блоки со старых страниц

   Раньше у каждой страницы был свой инлайновый <style>, и при переносе
   в общую оболочку эти классы остались без правил. Ловим их обобщённо
   по суффиксам имён — так одно правило покрывает и .blog-card, и
   .job-card, и .service-card, — а частные случаи описываем отдельно.
   ═══════════════════════════════════════════════════════════════════ */

/* Пара селекторов на каждый суффикс: [class$='-x'] ловит класс, стоящий
   в атрибуте последним, [class*='-x '] — когда за ним есть модификатор
   (например class="cta-btn primary"). Одного $= мало: у элементов
   с модификатором правило молча не применялось. */

.prose [class$='-grid'], .prose [class*='-grid '] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
    gap: 16px; margin-top: 20px;
}

.prose [class$='-card'], .prose [class*='-card '],
.prose .section {
    padding: 24px 26px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.prose .section + .section { margin-top: 18px; }
.prose [class$='-card'] > :first-child, .prose [class*='-card '] > :first-child { margin-top: 0; }

/* Карточка целиком ссылка — подчёркивание тут лишнее */
.prose a[class$='-card'], .prose a[class*='-card '], .prose .blog-card-link {
    display: block; color: inherit; text-decoration: none;
    transition: border-color 220ms ease, transform 220ms ease;
}
.prose a[class$='-card']:hover, .prose a[class*='-card ']:hover, .prose .blog-card-link:hover {
    border-color: rgba(0, 255, 136, 0.32); transform: translateY(-3px);
}

.prose [class$='-section'] + [class$='-section'], .prose [class*='-section '] + [class*='-section '] { margin-top: 34px; }
.prose [class$='-icon'], .prose [class*='-icon '] { color: var(--accent); font-size: 1.5rem; }

/* Кнопки со старых страниц приводим к общему виду */
.prose [class$='-btn'], .prose [class*='-btn '] {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    margin-top: 16px; padding: 12px 20px;
    font-size: 0.9rem; font-weight: 700; text-decoration: none;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-strong); border-radius: 13px;
    transition: border-color 180ms ease, background 180ms ease;
}
.prose [class$='-btn']:hover, .prose [class*='-btn ']:hover { border-color: rgba(0, 255, 136, 0.4); background: rgba(255, 255, 255, 0.07); }
.prose [class$='-btn'].primary, .prose [class*='-btn '].primary { color: #06170f; background: var(--accent); border-color: transparent; }

/* ═══ Заголовок документа (юридические страницы) ═══ */

.prose .doc-header { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.prose .doc-meta, .prose .badge-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 0.82rem; color: var(--text-muted); }
.prose .contact-value { font-weight: 600; color: var(--accent); }

/* ═══ Статус сервисов ═══ */

/* nowrap: при переносе бейдж уезжал на вторую строку у длинных названий,
   и карточки в ряду выглядели по-разному */
.prose .service-header { display: flex; align-items: center; gap: 12px; }
.prose .service-name { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 700; }
.prose .service-description { margin-top: 8px; font-size: 0.86rem; color: var(--text-secondary); }

.prose .service-status {
    display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
    padding: 4px 12px; font-size: 0.76rem; font-weight: 700; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); color: var(--text-secondary);
}
.prose .service-status.operational { background: rgba(0, 255, 136, 0.12); color: var(--accent); }

/* Метрики в строку, а не колонкой во всю ширину */
.prose .service-metrics { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.prose .service-metrics .metric { flex: 1 1 92px; padding: 14px 10px; }
.prose .metric-value { font-size: 1.4rem; }

/* Полоски аптайма: 90 дней подряд */
.prose .uptime-chart { display: flex; gap: 2px; margin-top: 16px; }
.prose .uptime-day {
    flex: 1; min-width: 2px; height: 30px; border-radius: 2px;
    background: var(--accent); opacity: 0.75;
}
.prose .uptime-day.partial { background: var(--warning); }
.prose .uptime-day.down { background: var(--danger); }
.prose .uptime-stats { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.75rem; color: var(--text-muted); }
.prose .uptime-percentage { font-weight: 700; color: var(--accent); }

.prose .incident { padding: 18px 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.prose .incident + .incident { margin-top: 12px; }
.prose .incident-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.prose .incident-title { font-weight: 700; }
.prose .incident-time { font-size: 0.78rem; color: var(--text-muted); }
.prose .incident-description { margin-top: 8px; font-size: 0.86rem; color: var(--text-secondary); }

/* ═══ Команда ═══ */

.prose .team-avatar {
    width: 76px; height: 76px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800; color: #06170f;
    background: linear-gradient(135deg, var(--accent), #0d9488);
    border-radius: 50%; overflow: hidden;
}
.prose .team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.prose .team-name { font-size: 1.15rem; font-weight: 700; }
.prose .team-role { margin-top: 3px; font-size: 0.84rem; color: var(--accent); }
.prose .team-bio { margin-top: 12px; font-size: 0.87rem; color: var(--text-secondary); }
.prose .team-skills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.prose .team-socials { display: flex; gap: 9px; margin-top: 16px; }
.prose .team-socials a {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 10px; text-decoration: none;
}
.prose .team-socials a:hover { color: var(--accent); border-color: rgba(0, 255, 136, 0.35); }

.prose .section-header { margin-bottom: 22px; text-align: center; }
.prose .story-highlight {
    margin-top: 18px; padding: 20px 24px;
    font-size: 1.02rem; font-style: italic; color: var(--text-primary);
    background: rgba(0, 255, 136, 0.05);
    border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ═══ Бренд: палитра и ассеты ═══ */

.prose .color-preview { height: 84px; margin: -24px -26px 16px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.prose .color-name { font-weight: 700; }
.prose .color-code { margin-top: 4px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.82rem; color: var(--text-muted); }
.prose .logo-preview, .prose .asset-preview {
    display: flex; align-items: center; justify-content: center;
    min-height: 120px; margin-bottom: 16px; padding: 20px;
    background: var(--surface-2); border-radius: var(--radius-md);
}

/* ═══ История изменений ═══ */

.prose .version-badge { display: inline-flex; padding: 3px 11px; font-size: 0.72rem; font-weight: 700; border-radius: 999px; background: rgba(0, 255, 136, 0.13); color: var(--accent); }
.prose .icon-new { color: var(--accent); }
.prose .icon-improve { color: #60a5fa; }
.prose .icon-fix { color: var(--warning); }

/* ═══ Вакансии ═══ */

.prose .job-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.prose .job-title { font-size: 1.1rem; font-weight: 700; }
.prose .job-department, .prose .job-location, .prose .job-type {
    padding: 3px 11px; font-size: 0.74rem; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); color: var(--text-secondary);
}
.prose .job-description { margin-top: 12px; font-size: 0.88rem; color: var(--text-secondary); }
.prose .job-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
/* Адрес рядом с кнопкой: mailto молча не срабатывает, если почтовый
   клиент не настроен, — тогда адрес можно просто скопировать */
.prose .job-mail { display: block; margin-top: 10px; font-size: 0.78rem; color: var(--text-muted); }

/* ═══ Блог и новости ═══ */

/* Иконка по центру обложки. Без выравнивания она инлайновым потоком
   вжималась в угол блока и читалась как случайный артефакт. */
.prose .blog-image, .prose .news-image {
    display: flex; align-items: center; justify-content: center;
    height: 130px; margin: -24px -26px 16px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.16), rgba(139, 92, 246, 0.16));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.prose .blog-image i, .prose .news-image i {
    font-size: 2rem;
    color: var(--accent);
    opacity: 0.85;
}
.prose .blog-title, .prose .news-title { font-size: 1.05rem; font-weight: 700; }
.prose .blog-excerpt, .prose .news-excerpt { margin-top: 10px; font-size: 0.87rem; color: var(--text-secondary); }
.prose .blog-meta, .prose .blog-footer, .prose .news-date, .prose .blog-date, .prose .blog-author, .prose .read-time {
    font-size: 0.78rem; color: var(--text-muted);
}
.prose .blog-meta, .prose .blog-footer { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.prose .blog-tags, .prose .news-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* ═══ Фильтр блога по темам ═══ */

.blog-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.blog-filter {
    padding: 8px 16px; font-size: 0.83rem; font-weight: 600;
    color: var(--text-secondary); background: var(--surface-1);
    border: 1px solid var(--border); border-radius: 999px;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.blog-filter:hover { color: var(--accent); border-color: rgba(0, 255, 136, 0.32); }
.blog-filter.is-active { color: #06170f; background: var(--accent); border-color: transparent; }

/* Скрытие через атрибут, а не класс: так состояние читается из разметки */
.blog-card-link[hidden] { display: none; }

.blog-empty { padding: 30px; text-align: center; color: var(--text-muted); }

/* ═══ Статья в диалоге ═══
   Нативный <dialog>: закрывается по Esc, удерживает фокус внутри
   и затемняет фон через ::backdrop — всё это без нашего кода. */

.post-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: min(80dvh, 720px);
    /* margin: auto центрирует диалог силами браузера. Возвращаем явно:
       глобальный сброс * { margin: 0 } в site.css его сбивает, и окно
       прилипает к левому верхнему углу. */
    margin: auto;
    padding: 0; overflow: auto;
    color: var(--text-primary);
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
}
.post-dialog::backdrop { background: rgba(5, 5, 8, 0.72); backdrop-filter: blur(4px); }

.post-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: flex-start; gap: 16px;
    padding: 24px 26px 18px;
    background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.post-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }

.post-close {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-strong); border-radius: 10px;
    transition: color 180ms ease, border-color 180ms ease;
}
.post-close:hover { color: var(--accent); border-color: rgba(0, 255, 136, 0.35); }

.post-body { padding: 4px 26px 28px; }
.post-body > :first-child { margin-top: 14px; }

/* Карточка-кнопка: сбрасываем вид кнопки, оставляя вид карточки */
.prose button.blog-card-link {
    width: 100%; padding: 0; text-align: left;
    font: inherit; color: inherit; background: none; border: none;
}

@media (max-width: 768px) {
    .post-head { padding: 20px 20px 16px; }
    .post-head h2 { font-size: 1.15rem; }
    .post-body { padding: 4px 20px 24px; }
}

/* ═══ Тарифы на странице для бизнеса ═══ */

.prose .plan-name { font-size: 1.05rem; font-weight: 700; }
.prose .plan-price { margin-top: 10px; font-size: 2rem; font-weight: 900; color: var(--accent); }
.prose .plan-period { font-size: 0.8rem; color: var(--text-muted); }
.prose .plan-features { margin-top: 16px; }
.prose .pricing-card.featured { border-color: rgba(0, 255, 136, 0.4); }

/* ═══ Возможности и сравнение ═══ */

.prose .feature-list { margin-top: 14px; }
.prose .comparison-table th, .prose .comparison-table td { text-align: center; }
.prose .comparison-table th:first-child, .prose .comparison-table td:first-child { text-align: left; }
.prose .banngru-col { color: var(--accent); font-weight: 700; }
.prose .cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.prose .category-title { margin-bottom: 16px; font-size: 1.3rem; font-weight: 800; }
.prose .contact-box { margin-top: 24px; padding: 24px; text-align: center; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); }

@media (max-width: 768px) {
    .prose .content-section, .prose [class$='-card'], .prose [class*='-card '], .prose .section { padding: 24px 20px; }
    .prose h2 { font-size: 1.25rem; }
    .prose .step-card { flex-direction: column; gap: 12px; }
    .prose .color-preview, .prose .blog-image, .prose .news-image { margin-left: -20px; margin-right: -20px; }
    .prose .uptime-day { height: 22px; }
}