/* ============================================================================
   Цвета блоков берутся из переменных, а не вписаны в каждое правило.
   ----------------------------------------------------------------------------
   Раньше здесь стояли белые заливки и тёмный текст напрямую. На тёмной теме
   сайта это давало белые прямоугольники с почти невидимыми подписями —
   светлый текст на белом.

   Переменные объявляет макет сайта (layouts/frontend), один набор на все
   блоки: там же они переопределяются для тёмной темы, причём выводятся ИЗ
   САМОЙ ТЕМЫ — цвет текста подмешивается к цвету фона. Поэтому любая новая
   тёмная тема получает согласованные блоки сама.

   Запасные значения после запятой нужны для редактора: он показывает эти же
   блоки в своей рамке, где переменных темы нет.
   ========================================================================= */

/*
    БЛОКИ СОДЕРЖИМОГО СТРАНИЦ И НОВОСТЕЙ

    Один файл на два места: им оформляется содержимое на сайте, и он же
    подключается в визуальный редактор панели. Поэтому редактор
    показывает блок ровно так, как его увидит посетитель.

    Селекторы начинаются с .page-content — в редакторе этот же класс
    ставится на тело документа, поэтому правила совпадают.

    Значения после запятой в var() — запасные для редактора, где
    переменные темы не объявлены.
*/

/* ══════════════════════════════════════════════════════════════════
   БЛОКИ СОДЕРЖИМОГО

   Готовые оформления для текста страницы. Редактор применяет их из
   визуального редактора — достаточно поставить класс блоку, никакого
   CSS писать не нужно:

     pc-lead    — вводный абзац крупнее обычного
     pc-grid    — сетка из блоков pc-card (2 колонки, на телефоне 1)
     pc-card    — карточка с заголовком и текстом внутри сетки
     pc-check   — список с галочками вместо точек
     pc-note    — выделенная врезка-примечание
     pc-cta     — полоса призыва к действию со ссылкой внутри

   Классы литеральные: в статической сборке Tailwind нет ни прозрачности
   через дробь, ни произвольных значений. Цвета — из активной темы.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   ТИПОГРАФИКА СОДЕРЖИМОГО

   Сброс Tailwind приводит h1–h6 к `font-size: inherit; font-weight:
   inherit`, и восстановить его было некому: замер показал `h2` в 15.68px
   весом 400 при абзаце в 16.8 — заголовок раздела МЕЛЬЧЕ и ЛЕГЧЕ текста,
   который он возглавляет. Длинная страница из-за этого читалась сплошной
   стеной, а разделы были неразличимы.

   Правила намеренно слабые по силе (`.page-content h2` — один класс и один
   тип): у блоков `pc-*` селекторы из двух классов, поэтому заголовок внутри
   карточки, врезки или призыва остаётся оформленным по-своему.

   Цвет ЗДЕСЬ НЕ ЗАДАЁТСЯ. Тёмная тема сайта красит заголовки правилом
   `body.fx-theme-dark h2` той же силы, и объяви мы цвет тут — победил бы тот,
   кто окажется ниже по документу, то есть результат зависел бы от порядка
   подключения файлов.
   ══════════════════════════════════════════════════════════════════ */

.page-content > :first-child{ margin-top:0 }
.page-content > :last-child{ margin-bottom:0 }

.page-content h2{ margin:2.5rem 0 .85rem; font-size:clamp(1.3rem, 2.4vw, 1.55rem);
    font-weight:800; line-height:1.25; letter-spacing:-.025em }

/* 🔴 Декоративной чёрточки над заголовком НЕТ — по прямому указанию
   владельца («из всех шаблонов убери то, что я выделил, чёрточка»).
   Раздел отбивается воздухом и кеглем, этого достаточно: короткая полоска
   над каждым заголовком читалась как обрывок линейки, а не как приём.

   Заводить её заново не надо — ни здесь, ни в шкурке шаблона. */

/* И отступ сверху тоже. У блоков объявлен только `margin-bottom`
   заголовка, поэтому общее правило подставляло свой `margin-top` — в
   карточке между значком и названием появлялся провал в 1.9rem. Расстояния
   внутри блока задаёт сам блок. */
.page-content [class*="pc-"] h2,
.page-content [class*="pc-"] h3,
.page-content [class*="pc-"] h4{ margin-top:0 }

.page-content h3{ margin:1.9rem 0 .55rem; font-size:1.14rem; font-weight:700;
    line-height:1.35; letter-spacing:-.015em }

.page-content h4{ margin:1.5rem 0 .45rem; font-size:1rem; font-weight:700;
    line-height:1.4 }

.page-content p{ margin:0 0 1rem; line-height:1.75 }

/* Списки: сброс Tailwind снимает и маркеры, и отступ. Без этого перечисление
   в материале выглядит набором абзацев. */
.page-content ul,
.page-content ol{ margin:1rem 0; padding-left:1.4rem }
.page-content ul{ list-style:disc }
.page-content ol{ list-style:decimal }
.page-content li{ margin:.35rem 0; line-height:1.7 }
.page-content li::marker{ color:var(--color-primary,#6366f1) }
.page-content li > ul,
.page-content li > ol{ margin:.35rem 0 }

.page-content blockquote{ margin:1.5rem 0; padding:.2rem 0 .2rem 1.1rem;
    border-left:3px solid var(--color-primary,#6366f1); font-style:italic }
.page-content blockquote > :first-child{ margin-top:0 }
.page-content blockquote > :last-child{ margin-bottom:0 }

.page-content hr{ margin:2.2rem 0; border:0; border-top:1px solid var(--surface-bd,#e5e7eb) }

.page-content strong,
.page-content b{ font-weight:700 }

/* Ссылка в тексте подчёркнута: цвет один на все темы, и на некоторых
   различить её без подчёркивания нельзя. */
.page-content a{ color:var(--color-primary,#6366f1); text-decoration:underline;
    text-underline-offset:2px }

.page-content code,
.page-content kbd,
.page-content samp{ padding:.1rem .32rem;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
    background:var(--surface-2,#f1f5f9) }
.page-content pre{ margin:1.35rem 0; padding:1rem 1.15rem; overflow-x:auto;
    background:var(--surface-2,#f1f5f9); line-height:1.6 }
.page-content pre code{ padding:0; background:none }

/* Таблица прокручивается внутри себя, а не распирает страницу вбок. */
.page-content table{ display:block; width:100%; overflow-x:auto;
    margin:1.35rem 0; border-collapse:collapse }
.page-content th,
.page-content td{ padding:.6rem .75rem; text-align:left; vertical-align:top;
    border:1px solid var(--surface-bd,#e5e7eb); overflow-wrap:break-word }
.page-content th{ font-weight:700; background:var(--surface-2,#f8fafc) }

@media (max-width: 1024px), (max-height: 500px){
    .page-content h2{ margin-top:2rem }
    .page-content h3{ margin-top:1.6rem }

    /* Зона нажатия у ссылок содержимого.

       Прежнее правило брало только `li > a`, и мимо него прошли телефон с
       почтой на странице контактов (они обёрнуты в `strong`) и ссылка в
       примечании к карте — 16–20 пикселей при нижней границе 24.

       Отступ по вертикали растит зону, не трогая раскладку: у строчного
       элемента он выходит за строку и высоту строки не меняет. Поэтому его
       можно дать всем ссылкам содержимого, не разбирая, какая из них
       «внутри предложения», а какая цель сама по себе. */
    .page-content a{ padding-block:4px }

    /* Первый столбец таблицы липкий.

       Таблица прокручивается вбок — страницу она не распирает, и это верно.
       Но, прокрутив вправо, читатель терял левый столбец, то есть сам
       вопрос: видно «да / нет / из коробки», а к чему это относится — уже
       нет. На странице сравнения это худшее место для такой потери: она и
       есть главный довод.

       Заливка обязательна: липкая ячейка едет ПОВЕРХ соседних, и без
       непрозрачного фона под ней просвечивает то, что она закрывает.
       Прозрачность по умолчанию давала кашу из наложенных букв. */
    .page-content th:first-child,
    .page-content td:first-child{ position:sticky; left:0; z-index:1;
        background:var(--surface,#fff);
        box-shadow:1px 0 0 var(--surface-bd,#e5e7eb) }
    /* Порог кегля ПОЛЯ ВВОДА — 16, а не 12. Safari на iPhone сам
       приближает страницу при постановке курсора в поле мельче 16 и обратно
       её не отпускает: одно касание поиска — и сайт остаётся увеличенным.
       Обойти можно только кеглем, `user-scalable=no` ломает доступность и
       Safari его всё равно игнорирует. */
    .page-content input,
    .page-content select,
    .page-content textarea,
    /* Вариант с атрибутом обязателен. У поля поиска по вопросам объявлено
       `.page-content .pc-faq-bar__input` — два класса (0-2-0), а строка выше
       это класс и тип (0-1-1), то есть слабее, и пол молча не применялся.
       `input[class]` — класс, атрибут и тип (0-2-1), сильнее. */
    .page-content input[class],
    .page-content select[class],
    .page-content textarea[class]{ font-size:16px }

    .page-content th:first-child{ background:var(--surface-2,#f8fafc) }

    /* И ШИРИНУ ему надо ограничить. Липкий столбец сам по себе занимал
       почти весь экран телефона: вопрос видно, а ответ — полоской в пару
       пикселей, то есть таблица оставалась нечитаемой. Строка переносится
       в две-три, зато рядом помещается сам ответ. */
    .page-content th:first-child,
    .page-content td:first-child{ min-width:8.5rem; max-width:min(48vw, 12rem);
        white-space:normal }
}

.page-content .pc-lead{ font-size:1.05rem; line-height:1.65; color:var(--surface-ink,#334155) }
:root.dark .page-content .pc-lead{ color:#cbd5e1 }

.page-content .pc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
    gap:1rem; margin:1.5rem 0; padding:0; list-style:none }

.page-content .pc-card{ margin:0; padding:1.1rem 1.25rem; background:var(--surface,#fff);
    border:1px solid var(--surface-bd,#eef2f7); transition:border-color .15s, transform .15s }
.page-content .pc-card:hover{ border-color:var(--color-primary,#6366f1); transform:translateY(-2px) }
.page-content .pc-card > :first-child{ margin-top:0 }
.page-content .pc-card > :last-child{ margin-bottom:0 }
/* Кегль названия ВЫШЕ кегля текста карточки. Замер показал обратное:
   название 16px, текст под ним 16.96 — иерархии не было вовсе, и карточка
   читалась сплошным куском. Тот же промах, что был у заголовков разделов. */
.page-content .pc-card strong,
.page-content .pc-card h3{ display:block; margin-bottom:.4rem; font-size:1.08rem;
    font-weight:700; line-height:1.35; letter-spacing:-.01em;
    color:var(--surface-ink,#111827) }
.page-content .pc-card p,
.page-content .pc-card li{ font-size:.96rem; line-height:1.6 }
:root.dark .page-content .pc-card{ background:#111827; border-color:var(--surface-ink,#1f2937) }
:root.dark .page-content .pc-card strong,
:root.dark .page-content .pc-card h3{ color:#f3f4f6 }

.page-content .pc-check{ list-style:none; padding:0; margin:1.25rem 0;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:.6rem 1.5rem }
.page-content .pc-check li{ position:relative; padding-left:1.6rem; margin:0; line-height:1.5 }
.page-content .pc-check li::before{ content:'✓'; position:absolute; left:0; top:0;
    font-weight:700; color:var(--color-primary,#6366f1) }

/* Врезка: слева акцентная полоса, чтобы её нельзя было спутать с текстом. */
.page-content .pc-note{ margin:1.5rem 0; padding:1rem 1.25rem; background:var(--surface-2,#f8fafc);
    border-left:3px solid var(--color-primary,#6366f1) }
.page-content .pc-note > :first-child{ margin-top:0 }
.page-content .pc-note > :last-child{ margin-bottom:0 }
:root.dark .page-content .pc-note{ background:#0b1220 }

/* Призыв к действию.

   Сетка, а не flex со space-between. Прежде длинный текст переносил кнопку
   на свою строку, и справа оставалась пустота — плашка выглядела сломанной.
   У сетки две ячейки: текст тянется, кнопка не сжимается и стоит по правому
   краю всегда.

   Подложка — НЕ чистый акцент темы. Доли смеси 50/32 с тёмно-синим
   проверены по всем одиннадцати темам: узкое место «Неон» с самым светлым
   акцентом даёт белому тексту контраст 6.92, второстепенному #dbeafe — 5.67.
   Чистый акцент у светлых тем уводит контраст ниже порога, и текст на плашке
   перестаёт читаться. Та же формула работает на подложке слайдов. */
.page-content .pc-cta{ display:grid; grid-template-columns:1fr auto;
    align-items:center; gap:1.1rem 2rem; margin:2rem 0 .5rem; padding:1.4rem 1.6rem;
    color:#fff; border-left:4px solid var(--color-primary,#6366f1);
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary,#6366f1) 50%, #0f172a),
        color-mix(in srgb, var(--color-primary,#6366f1) 32%, #0f172a)) }
.page-content .pc-cta > :first-child{ margin:0; min-width:0 }

/* Иерархия: заголовок крупнее и белый, пояснение мельче и приглушённое.
   Прежде оба были одного кегля, и глазу не за что было зацепиться. */
.page-content .pc-cta h3{ margin:0 0 .35rem; font-size:1.15rem; font-weight:700;
    line-height:1.3; color:#fff }
.page-content .pc-cta h3::before{ content:none }
.page-content .pc-cta p{ margin:0; font-size:.93rem; line-height:1.55; color:#dbeafe }
.page-content .pc-cta p:last-child{ margin-bottom:0 }

.page-content .pc-cta a{ display:inline-flex; align-items:center; gap:.55rem;
    flex:none; white-space:nowrap; padding:.72rem 1.4rem;
    font-weight:700; font-size:.93rem; text-decoration:none;
    color:#0f172a; background:#fff;
    box-shadow:0 1px 0 rgba(15,23,42,.18) }
.page-content .pc-cta a::after{ content:'\2192'; font-size:1.05em; line-height:1 }
.page-content .pc-cta a:hover{ background:#e8eefc; text-decoration:none }

@media (max-width:720px){
    .page-content .pc-cta{ grid-template-columns:1fr; padding:1.2rem 1.25rem }
    .page-content .pc-cta a{ justify-content:center }
}
.page-content .pc-cta a:hover{ color:var(--color-primary,#6366f1) }


/* ── Иконка в карточке ──────────────────────────────────────────── */
/* Значок — обычная иконка Font Awesome внутри квадрата с градиентом.
   Редактор меняет только имя иконки в классе, оформление остаётся. */
.page-content .pc-ico{ display:inline-flex; align-items:center; justify-content:center;
    width:2.4rem; height:2.4rem; margin-bottom:.75rem; flex:none;
    font-size:.95rem; color:var(--on-accent,#fff);
    background:linear-gradient(135deg,var(--color-primary,#6366f1),var(--color-accent,#8b5cf6)) }

/* ── Цифры ──────────────────────────────────────────────────────── */
.page-content .pc-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
    gap:1px; margin:1.75rem 0; padding:0; list-style:none; background:#e2e8f0;
    border:1px solid var(--surface-bd,#e2e8f0) }
.page-content .pc-stats li{ margin:0; padding:1.1rem .9rem; text-align:center; background:var(--surface,#fff) }
/* Число задаётся полужирным тегом, подпись — обычным span. Так они не
   спутаются: визуальный редактор нормализует b в strong, и правило на
   одном лишь b после первого сохранения переставало работать (проверено
   на живом редакторе). Перечислены оба тега — и до, и после сохранения. */
.page-content .pc-stats li > b,
.page-content .pc-stats li > strong{ display:block; font-size:1.75rem; line-height:1.1;
    font-weight:800; color:var(--color-primary,#6366f1); font-variant-numeric:tabular-nums }
.page-content .pc-stats li > span{ display:block; margin-top:.3rem; font-size:.8rem;
    color:var(--surface-mute,#64748b) }
:root.dark .page-content .pc-stats{ background:#1f2937; border-color:var(--surface-ink,#1f2937) }
:root.dark .page-content .pc-stats li{ background:#111827 }
:root.dark .page-content .pc-stats li > span{ color:var(--surface-dim,#94a3b8) }

/* ── Шаги ───────────────────────────────────────────────────────── */
/* Номер рисуется счётчиком: редактор просто добавляет пункт списка,
   перенумеровывать руками ничего не нужно. */
.page-content .pc-steps{ counter-reset:pc-step; list-style:none; padding:0; margin:1.5rem 0;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem }
.page-content .pc-steps li{ counter-increment:pc-step; position:relative; margin:0;
    padding:1.1rem 1.25rem 1.1rem 3.4rem; background:var(--surface,#fff); border:1px solid var(--surface-bd,#eef2f7) }
.page-content .pc-steps li::before{ content:counter(pc-step); position:absolute;
    left:1.1rem; top:1.05rem; display:flex; align-items:center; justify-content:center;
    width:1.7rem; height:1.7rem; font-size:.8rem; font-weight:800; color:var(--on-accent,#fff);
    background:var(--color-primary,#6366f1) }
/* 🔴 Заголовок шага — полужирный тег, и правило перечисляет ОБА (b и
   strong). Сидер пишет <b>, редактор при сохранении даёт <strong>: пока
   здесь стоял один strong, у демо-материалов заголовок и описание шага
   склеивались в одну строку («Смотрим сайтСчитаем, что переносится…») —
   владелец прислал снимок. Сторожит ContentBlocksBoldTest. */
.page-content .pc-steps b,
.page-content .pc-steps strong{ display:block; margin-bottom:.2rem; color:var(--surface-ink,#111827) }
:root.dark .page-content .pc-steps li{ background:#111827; border-color:var(--surface-ink,#1f2937) }
:root.dark .page-content .pc-steps b,
:root.dark .page-content .pc-steps strong{ color:#f3f4f6 }

/* ── Текст и картинка рядом ─────────────────────────────────────── */
.page-content .pc-split{ display:grid; grid-template-columns:1fr 1fr; align-items:center;
    gap:1.75rem; margin:1.75rem 0 }
.page-content .pc-split > div > :first-child{ margin-top:0 }
.page-content .pc-split img{ width:100%; height:auto; display:block; margin:0;
    border:1px solid var(--surface-bd,#eef2f7) }
@media (max-width:768px){
    .page-content .pc-split{ grid-template-columns:1fr; gap:1.1rem }
}
:root.dark .page-content .pc-split img{ border-color:var(--surface-ink,#1f2937) }

/* ── Снимок панели ──────────────────────────────────────────────────
   Настоящий снимок экрана в рамке окна: полоса заголовка с тремя точками
   и чипом адреса. Рамка нужна не для красоты — без неё светлый интерфейс
   панели сливается со светлой страницей, и снимок читается как продолжение
   вёрстки, а не как окно программы.

   Кадр обрезается по высоте (`max-height` + `object-fit: cover` сверху):
   у страницы панели длинный низ, и в полный рост она превращается в узкую
   полоску, на которой ничего не разобрать. Показываем верх — там всё, ради
   чего снимок и сделан.

   Подпись — обычный figcaption: он же уходит в выдержку, если снимок
   окажется первым блоком материала. */
.page-content .pc-shot{ margin:1.75rem 0; padding:0 }
.page-content .pc-shot > img{
    display:block; width:100%; height:auto; margin:0;
    max-height:26rem; object-fit:cover; object-position:top center;
    border:1px solid var(--surface-bd,#e3e6ee); border-top:0;
    background:var(--surface,#fff) }
.page-content .pc-shot::before{
    content:'\2022 \2022 \2022'; display:block;
    padding:.35rem .8rem; font-size:.7rem; letter-spacing:.35em; line-height:1.4;
    color:var(--surface-dim,#9ca3af);
    background:color-mix(in srgb, var(--surface-ink,#111827) 5%, var(--surface,#f8fafc));
    border:1px solid var(--surface-bd,#e3e6ee); border-bottom:0 }
.page-content .pc-shot figcaption{
    margin:.55rem 0 0; font-size:.82rem; color:var(--surface-mute,#6b7280) }
:root.dark .page-content .pc-shot > img,
:root.dark .page-content .pc-shot::before{ border-color:#374151 }

/* Снимки рядом — для пары «до/после» или двух разделов подряд. */
.page-content .pc-shots{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin:1.75rem 0 }
.page-content .pc-shots .pc-shot{ margin:0 }
.page-content .pc-shots .pc-shot > img{ max-height:15rem }
@media (max-width:768px){
    .page-content .pc-shots{ grid-template-columns:1fr }
    .page-content .pc-shot > img{ max-height:18rem }
}

/* ── Технологии ─────────────────────────────────────────────────── */
.page-content .pc-tech{ display:flex; flex-wrap:wrap; gap:.45rem; margin:1.25rem 0;
    padding:0; list-style:none }
.page-content .pc-tech li{ margin:0; padding:.35rem .8rem; font-size:.8rem; font-weight:600;
    color:#4338ca; background:color-mix(in srgb, var(--color-primary,#6366f1) 12%, var(--surface,#eef2ff)); border:1px solid color-mix(in srgb, var(--color-primary,#6366f1) 26%, var(--surface,#e0e7ff)) }
:root.dark .page-content .pc-tech li{ color:#c7d2fe; background:#1e1b4b; border-color:#312e81 }

@media (max-width:640px){
    /* Четыре числа в столбик занимают пол-экрана и перестают читаться
       как один блок — на телефоне их две пары. */
    .page-content .pc-stats{ grid-template-columns:1fr 1fr }
    .page-content .pc-stats li > b,
    .page-content .pc-stats li > strong{ font-size:1.5rem }

    /* Кнопка призыва не помещалась в строку и выходила за край карточки:
       на узком экране блок складывается, кнопка занимает всю ширину. */
    .page-content .pc-cta{ flex-direction:column; align-items:stretch; text-align:center }
    .page-content .pc-cta a{ text-align:center }
}

/* ══════════════════════════════════════════════════════════════════
   ВОПРОСЫ И ОТВЕТЫ

   Аккордеон на нативном <details>: раскрывается без единой строки JS,
   читается скринридером, ищется браузерным поиском по странице и
   переживает визуальный редактор без специальных настроек (проверено).
   Скрипт страницы добавляет сверху поиск и якоря, но всё содержимое
   доступно и без него.
   ══════════════════════════════════════════════════════════════════ */

.page-content .pc-faq{ display:grid; gap:.6rem; margin:1.5rem 0 }

.page-content .pc-faq__item{ background:var(--surface,#fff); border:1px solid var(--surface-bd,#eef2f7);
    transition:border-color .15s }
.page-content .pc-faq__item:hover{ border-color:#c7d2fe }
.page-content .pc-faq__item[open]{ border-color:var(--color-primary,#6366f1) }

.page-content .pc-faq__item > summary{ display:flex; align-items:flex-start; gap:.75rem;
    padding:.95rem 1.15rem; font-weight:600; color:var(--surface-ink,#111827); cursor:pointer;
    list-style:none; user-select:none }
/* Родной треугольник убираем в обоих движках — рисуем свою стрелку. */
.page-content .pc-faq__item > summary::-webkit-details-marker{ display:none }
.page-content .pc-faq__item > summary::marker{ content:'' }

.page-content .pc-faq__item > summary::after{ content:'⌄'; margin-left:auto; flex:none;
    font-size:1.15rem; line-height:1; color:var(--surface-dim,#94a3b8); transform:translateY(-2px);
    transition:transform .2s, color .15s }
.page-content .pc-faq__item[open] > summary::after{ transform:translateY(2px) rotate(180deg);
    color:var(--color-primary,#6366f1) }
.page-content .pc-faq__item > summary:hover{ color:var(--color-primary,#6366f1) }
.page-content .pc-faq__item > summary:focus-visible{ outline:2px solid var(--color-primary,#6366f1);
    outline-offset:-2px }

/* Номер вопроса — счётчиком, чтобы редактор не проставлял его руками. */
.page-content .pc-faq{ counter-reset:pc-faq }
.page-content .pc-faq__item{ counter-increment:pc-faq }
.page-content .pc-faq__item > summary::before{ content:counter(pc-faq); flex:none;
    display:flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem;
    font-size:.7rem; font-weight:800; color:var(--color-primary,#6366f1);
    background:color-mix(in srgb, var(--color-primary,#6366f1) 12%, var(--surface,#eef2ff)) }
.page-content .pc-faq__item[open] > summary::before{ color:var(--on-accent,#fff);
    background:var(--color-primary,#6366f1) }

.page-content .pc-faq__item > :not(summary){ margin:0 1.15rem .95rem;
    padding-left:2.25rem; color:var(--surface-ink,#475569); line-height:1.6 }
.page-content .pc-faq__item > summary + *{ margin-top:.15rem }

:root.dark .page-content .pc-faq__item{ background:#111827; border-color:var(--surface-ink,#1f2937) }
:root.dark .page-content .pc-faq__item > summary{ color:#f3f4f6 }
:root.dark .page-content .pc-faq__item > :not(summary){ color:#cbd5e1 }
:root.dark .page-content .pc-faq__item > summary::before{ background:#1e1b4b }

@media (max-width:640px){
    .page-content .pc-faq__item > summary{ padding:.8rem .9rem; font-size:.95rem }
    .page-content .pc-faq__item > :not(summary){ margin:0 .9rem .8rem; padding-left:2.25rem }
}

/* Панель над списком вопросов. Её создаёт скрипт страницы, поэтому в
   содержимом её нет — редактору достаточно списка вопросов. */
.page-content .pc-faq-bar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
    margin:1.5rem 0 .75rem }
.page-content .pc-faq-bar__input{ flex:1 1 14rem; min-width:0; height:42px;
    padding:0 .9rem; font-size:.9rem; color:var(--surface-ink,#0f172a);
    background:var(--surface,#fff); border:1px solid var(--surface-bd,#e2e8f0) }
.page-content .pc-faq-bar__input:focus{ outline:none; border-color:var(--color-primary,#6366f1);
    box-shadow:0 0 0 3px rgba(99,102,241,.15) }
.page-content .pc-faq-bar__count{ flex:none; font-size:.8rem; color:var(--surface-mute,#64748b);
    font-variant-numeric:tabular-nums }
.page-content .pc-faq-bar__btn{ flex:none; height:42px; padding:0 .85rem;
    font-size:.82rem; font-weight:600; color:var(--surface-ink,#334155);
    background:var(--surface,#fff); border:1px solid var(--surface-bd,#e2e8f0); cursor:pointer;
    transition:border-color .15s, color .15s }
.page-content .pc-faq-bar__btn:hover{ border-color:var(--color-primary,#6366f1);
    color:var(--color-primary,#6366f1) }
.page-content .pc-faq-bar__btn:focus-visible{ outline:2px solid var(--color-primary,#6366f1);
    outline-offset:2px }

.page-content .pc-faq-empty{ margin:1.5rem 0; padding:1.5rem; text-align:center;
    color:var(--surface-mute,#64748b); background:var(--surface-2,#f8fafc); border:1px dashed #cbd5e1 }

:root.dark .page-content .pc-faq-bar__input,
:root.dark .page-content .pc-faq-bar__btn{ color:#e2e8f0; background:#111827; border-color:var(--surface-ink,#1f2937) }
:root.dark .page-content .pc-faq-empty{ color:var(--surface-dim,#94a3b8); background:#0b1220; border-color:var(--surface-ink,#334155) }

@media (max-width:640px){
    /* Счётчик уезжает под поле, кнопки делят строку пополам. */
    .page-content .pc-faq-bar__input{ flex:1 1 100% }
    .page-content .pc-faq-bar__count{ order:3; flex:1 1 100%; text-align:center }
    .page-content .pc-faq-bar__btn{ flex:1 1 0 }
}

/* ══════════════════════════════════════════════════════════════════
   ВИД В ВИЗУАЛЬНОМ РЕДАКТОРЕ

   Класс mce-content-body есть только у тела документа внутри редактора,
   поэтому правила ниже действуют ТОЛЬКО там и никак не влияют на сайт.

   Аккордеон внутри редактора не раскрывается: клик по заголовку там —
   это установка курсора, а не переключение. Из-за этого ответы были
   недоступны для правки. Поэтому в редакторе показываем их все сразу.
   ══════════════════════════════════════════════════════════════════ */

.mce-content-body details.pc-faq__item > *:not(summary){ display:block !important }

/* Стрелка в редакторе только путает: раскрывать нечего, всё уже видно. */
.mce-content-body details.pc-faq__item > summary::after{ display:none }

/* Подсказка, что на сайте это свернётся в аккордеон. */
.mce-content-body .pc-faq{ position:relative; padding-top:1.6rem;
    border-top:1px dashed #c7d2fe }
.mce-content-body .pc-faq::before{ content:'Вопросы и ответы — на сайте свёрнуты в список';
    position:absolute; top:.25rem; left:0; font-size:.7rem; font-weight:600;
    letter-spacing:.03em; color:#818cf8 }

.mce-content-body details.pc-faq__item{ border-color:#c7d2fe }
.mce-content-body details.pc-faq__item > summary{ cursor:text }

/* ══════════════════════════════════════════════════════════════════
   КОНТАКТЫ
   ══════════════════════════════════════════════════════════════════ */

.page-content .pc-contacts{ display:grid;
    grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1rem;
    margin:1.5rem 0; padding:0; list-style:none }

.page-content .pc-contacts li{ position:relative; margin:0;
    /* Справа место под кнопку копирования: она стоит поверх карточки, и без
       запаса длинный адрес уезжал под неё (проверено на 375px). */
    padding:1.1rem 3.4rem 1.1rem 1.25rem;
    background:var(--surface,#fff); border:1px solid var(--surface-bd,#eef2f7); transition:border-color .15s }
.page-content .pc-contacts li:hover{ border-color:var(--color-primary,#6366f1) }

/* Подпись поля — обычный span, значение — полужирный тег. Считать по
   позиции нельзя: перед ними может стоять значок, и нумерация съезжает.
   Различать по тегу надёжно ровно потому, что span редактор не трогает. */
.page-content .pc-contacts li > span:not(.pc-ico){ display:block; margin-bottom:.3rem;
    font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--surface-dim,#94a3b8) }
.page-content .pc-contacts li > b,
.page-content .pc-contacts li > strong{ display:block; font-size:1.05rem;
    font-weight:700; color:var(--surface-ink,#111827); line-height:1.35 }
.page-content .pc-contacts a{ color:inherit; text-decoration:none }
.page-content .pc-contacts a:hover{ color:var(--color-primary,#6366f1) }
.page-content .pc-contacts small{ display:block; margin-top:.3rem; font-size:.82rem;
    color:var(--surface-mute,#64748b) }

/* Кнопку копирования добавляет скрипт страницы — в содержимом её нет. */
.page-content .pc-copy{ position:absolute; top:.9rem; right:.9rem; display:inline-flex;
    align-items:center; justify-content:center; width:32px; height:32px;
    font-size:.75rem; color:var(--surface-mute,#64748b); background:var(--surface-2,#f8fafc); border:1px solid var(--surface-bd,#e2e8f0);
    cursor:pointer; transition:color .15s, border-color .15s }
.page-content .pc-copy:hover{ color:var(--color-primary,#6366f1);
    border-color:var(--color-primary,#6366f1) }
.page-content .pc-copy:focus-visible{ outline:2px solid var(--color-primary,#6366f1);
    outline-offset:2px }
.page-content .pc-copy.is-done{ color:var(--on-accent,#fff); background:var(--color-primary,#6366f1);
    border-color:var(--color-primary,#6366f1) }

:root.dark .page-content .pc-contacts li{ background:#111827; border-color:var(--surface-ink,#1f2937) }
:root.dark .page-content .pc-contacts li > b,
:root.dark .page-content .pc-contacts li > strong{ color:#f3f4f6 }
:root.dark .page-content .pc-copy{ color:var(--surface-dim,#94a3b8); background:#0b1220; border-color:var(--surface-ink,#1f2937) }

/* ── Карта ──────────────────────────────────────────────────────── */
/* Пока посетитель не нажал, никаких запросов к картографу не уходит:
   персональные данные не утекают, и страница грузится быстрее. */
.page-content .pc-map{ position:relative; margin:1.5rem 0; overflow:hidden;
    background:color-mix(in srgb, var(--color-primary,#6366f1) 12%, var(--surface,#eef2ff)); border:1px solid color-mix(in srgb, var(--color-primary,#6366f1) 26%, var(--surface,#e0e7ff)) }
.page-content .pc-map__stub{ display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:.75rem; min-height:18rem; padding:2rem 1rem;
    text-align:center; color:color-mix(in srgb, var(--color-primary,#6366f1) 45%, var(--surface-ink,#4338ca)) }
.page-content .pc-map__note{ max-width:32rem; font-size:.85rem; color:var(--surface-mute,#64748b) }
.page-content .pc-map__btn{ padding:.65rem 1.4rem; font-size:.9rem; font-weight:700;
    color:var(--on-accent,#fff); background:var(--color-primary,#6366f1); border:0; cursor:pointer }
/* Надпись на кнопке следует теме: у светлых акцентов белый текст на них не
   читается. Тот же приём, что у общей кнопки .fx-btn в макете сайта. */
body.fx-theme-dark .page-content .pc-map__btn{ color:var(--color-bg) }
.page-content .pc-map__btn:hover{ filter:brightness(1.07) }
/* Отступ обнуляется намеренно: типографика содержимого вешает на iframe
   margin 24px сверху и снизу, и внутри рамки карты оставались полосы фона
   (замер: зазор по 25px с каждой стороны). Высота тянется за экраном —
   на телефоне карта не должна занимать его целиком. */
.page-content .pc-map iframe{ display:block; width:100%; margin:0; border:0;
    height:clamp(20rem, 58vh, 34rem) }


/* ── Быстрые действия ───────────────────────────────────────────── */
/* Кнопки главных действий: позвонить, написать, проложить маршрут.
   На телефоне это основной способ связаться, поэтому там они идут
   столбиком во всю ширину — попасть пальцем проще всего.

   Шире телефона они НЕ растягиваются. Раньше стояло flex:1 1 12rem, и
   каждая кнопка раздувалась до трети строки — 348 пикселей при ширине
   1087. Подписи разной длины при этом ломались на две строки и высоты
   разъезжались (48/48/49), а ряд выглядел тремя плитами. Теперь ширина
   по содержимому, перенос подписи запрещён. */
.page-content .pc-actions{ display:flex; flex-wrap:wrap; align-items:stretch;
    gap:.6rem; margin:1.5rem 0; padding:0; list-style:none }
.page-content .pc-actions li{ margin:0; flex:0 1 auto }
.page-content .pc-actions a{ display:flex; align-items:center; justify-content:center;
    gap:.55rem; box-sizing:border-box; height:44px; padding:0 1.15rem;
    font-size:.9rem; font-weight:700; white-space:nowrap; line-height:1;
    color:var(--on-accent,#fff); text-decoration:none;
    background:linear-gradient(135deg,var(--color-primary,#6366f1),var(--color-accent,#8b5cf6));
    transition:filter .15s, transform .15s }
.page-content .pc-actions a:hover{ filter:brightness(1.07); transform:translateY(-1px) }
.page-content .pc-actions a:focus-visible{ outline:2px solid var(--color-primary,#6366f1);
    outline-offset:2px }

/* Второстепенное действие — та же форма, но без заливки. */
.page-content .pc-actions li.is-plain a{ color:var(--surface-ink,#334155); background:var(--surface,#fff);
    border:1px solid var(--surface-bd,#e2e8f0) }
.page-content .pc-actions li.is-plain a:hover{ color:var(--color-primary,#6366f1);
    border-color:var(--color-primary,#6366f1); filter:none }
:root.dark .page-content .pc-actions li.is-plain a{ color:#cbd5e1; background:#111827;
    border-color:var(--surface-ink,#1f2937) }

/* Узкий телефон: в строку три подписи не помещаются, поэтому кнопки
   берут ширину целиком и идут столбиком. Порог 640 — выше него (телефон
   в альбомной, планшет) они спокойно встают в ряд по содержимому. */
@media (max-width: 640px){
    .page-content .pc-actions li{ flex:1 1 100% }
    .page-content .pc-actions a{ height:48px }
}

/* ── Значок «сейчас открыто» ────────────────────────────────────── */
/* Подпись ставит скрипт, разбирая расписание из атрибута карточки. */
.page-content .pc-now{ display:inline-flex; align-items:center; gap:.4rem;
    margin-top:.45rem; padding:.16rem .55rem; font-size:.72rem; font-weight:700;
    color:color-mix(in srgb, #16a34a 62%, var(--surface-ink,#166534));
    background:color-mix(in srgb, #16a34a 18%, var(--surface,#dcfce7)) }
.page-content .pc-now::before{ content:''; width:.45rem; height:.45rem; flex:none;
    border-radius:9999px; background:#22c55e }
.page-content .pc-now.is-closed{
    color:color-mix(in srgb, #ea580c 62%, var(--surface-ink,#9a3412));
    background:color-mix(in srgb, #ea580c 18%, var(--surface,#ffedd5)) }
.page-content .pc-now.is-closed::before{ background:#f97316 }

/* Иконка карточки контакта — в тон значкам карточек. */
.page-content .pc-contacts .pc-ico{ width:2rem; height:2rem; margin-bottom:.6rem;
    font-size:.8rem }

/* ── Карта сайта ────────────────────────────────────────────────── */
/* Список подставляется шорткодом [sitemap] и собирается из базы. */
.page-content .pc-sitemap{ display:grid;
    grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.25rem; margin:1.5rem 0 }
.page-content .pc-sitemap__group{ padding:1.1rem 1.25rem; background:var(--surface,#fff);
    border:1px solid var(--surface-bd,#eef2f7) }
.page-content .pc-sitemap__group h3{ margin:0 0 .6rem; font-size:.72rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--surface-dim,#94a3b8) }
.page-content .pc-sitemap__group ul{ margin:0; padding:0; list-style:none;
    display:grid; gap:.35rem }
.page-content .pc-sitemap__group li{ margin:0 }
.page-content .pc-sitemap__group a{ display:inline-flex; align-items:center; gap:.45rem;
    font-size:.92rem; color:var(--surface-ink,#334155); text-decoration:none; line-height:1.4 }
.page-content .pc-sitemap__group a::before{ content:''; width:.3rem; height:.3rem; flex:none;
    background:var(--color-primary,#6366f1) }
.page-content .pc-sitemap__group a:hover{ color:var(--color-primary,#6366f1) }

:root.dark .page-content .pc-sitemap__group{ background:#111827; border-color:var(--surface-ink,#1f2937) }
:root.dark .page-content .pc-sitemap__group a{ color:#cbd5e1 }

/* ── Карточка файла для скачивания ───────────────────────────────────────
   Один файл на сайт и на редактор, поэтому карточка выглядит одинаково и там,
   и там. Простая ссылка тоже работает, но по ней не видно, что ждёт
   посетителя: договор на двадцать мегабайт и заметка на две строки читаются
   одинаково. */

.page-content .pc-file {
    margin: 1.1rem 0;
}

.page-content .pc-file a {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 1rem;
    text-decoration: none;
    color:var(--surface-ink,#1f2937);
    background: var(--surface-2, #f8fafc);
    border: 1px solid #e5e7eb;
    transition: border-color .15s ease, background .15s ease;
}

.page-content .pc-file a:hover {
    border-color: #6366f1;
    background: #eef2ff;
}

.page-content .pc-file__ext {
    flex: 0 0 auto;
    min-width: 2.9rem;
    padding: .3rem .4rem;
    font: 700 .7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    background: #6366f1;
}

.page-content .pc-file__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-content .pc-file__size {
    flex: 0 0 auto;
    font-size: .8rem;
    color:var(--surface-ink,#6b7280);
}

/* Проигрыватели не должны вылезать за колонку текста. */
.page-content video,
.page-content audio,
.page-content iframe {
    max-width: 100%;
}

.page-content audio {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   Проигрыватели

   Браузерный проигрыватель выглядит по-своему в каждом браузере и никак не
   связан с оформлением сайта: в Chrome одна панель, в Safari другая, в
   Firefox третья. Для звука это особенно заметно — там серая полоса во всю
   ширину, которая спорит с текстом вокруг.

   Поэтому звук получает свой проигрыватель (собирает content-players.js), а
   видео остаётся на родных кнопках: они умеют полный экран, картинку в
   картинке и субтитры, и переписывать это ради вида не стоит. Видео получает
   только рамку в стиле сайта.

   Если скрипт не отработал, у обоих остаются родные кнопки — разметка
   рабочая сама по себе.
   ══════════════════════════════════════════════════════════════════════ */

/* ============================================================================
   Проигрыватели в материалах: звук и видео.
   ----------------------------------------------------------------------------
   Скруглений здесь нет, и это не каприз оформителя: на сайте действует общее
   правило прямых краёв (body.fx-sharp обнуляет border-radius у ВСЕГО, включая
   50%). Проверено замером — кнопка воспроизведения и ползунок на странице
   имели радиус 0, хотя в стилях стояло 50%, и прежний комментарий здесь
   утверждал обратное. Писать радиус значит обещать вид, которого не будет,
   поэтому весь рисунок построен на прямых формах: квадратная кнопка, прямая
   дорожка, отвес вместо кружка.

   Второе следствие того же: внутри редактора правила прямых краёв НЕТ (это
   отдельный документ), и любой радиус сделал бы вид в редакторе не таким, как
   на сайте. Ещё одна причина не пользоваться им вовсе.
   ========================================================================= */

/* ⚠️ Обёртка глав перечислена ОТДЕЛЬНО: список лежит СНАРУЖИ рамки
   ролика (внутри он вытолкнул бы панель кнопок под видео), а значит переменных
   от неё не наследует — они объявлены на самой рамке. */
.page-content .pc-player,
.page-content .pc-chapters {
    /* Общие приметы обоих проигрывателей — чтобы звук и видео читались как
       одна пара, а не два случайных блока. */
    --pc-accent: var(--color-primary, #6366f1);
    --pc-surface: #ffffff;
    --pc-border: #e2e5ee;
    --pc-ink: #111827;
    --pc-muted: #6b7280;
    --pc-rail: #e8eaf1;

    margin: 1.6rem 0;
}

/* ── Видео: рамка вокруг родного проигрывателя ──────────────────────────
   Кнопки остаются родными намеренно: они умеют полный экран, картинку в
   картинке и субтитры и привычно ведут себя на телефоне. Оформляем рамку. */

.page-content .pc-player--video {
    background: #0b1020;
    border: 1px solid var(--pc-border);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 8px 24px -14px rgba(17, 24, 39, .35);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.page-content .pc-player--video:hover {
    border-color: var(--pc-accent);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .08), 0 14px 32px -14px rgba(99, 102, 241, .45);
}

.page-content .pc-player--video video {
    display: block;
    width: 100%;
    background: #0b1020;
}

/* ── Звук: свой проигрыватель ──────────────────────────────────────────
   Родная панель выглядит в каждом браузере по-своему и никак не связана с
   оформлением сайта. Своя — одинаковая везде. */

.page-content .pc-audio {
    --pc-audio-accent: var(--pc-accent);

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;

    /* Ширина считается вместе с полями и рамкой. Иначе ограничение ниже даёт
       596 пикселей вместо 560, и после выравнивания коробка скачком менялась
       бы в размере: выравнивание задаёт ширину уже по этой модели. */
    box-sizing: border-box;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);

    /* Акцентная грань слева — короткая примета, по которой блок узнаётся с
       одного взгляда, как полоса над подвалом сайта. */
    border-left: 3px solid var(--pc-accent);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
    transition: border-color .18s ease, box-shadow .18s ease;
}

/* Ширина по умолчанию. Полоса во всю строку выглядит растянутой: время и
   название прижаты к разным краям, а между ними пусто на пол-экрана.
   Ограничение снимается, как только автор задал размер сам — потянул за
   ручки или выровнял; тогда в разметке появляется собственная ширина, и это
   правило перестаёт совпадать. Так вид по умолчанию опрятен, а управление
   размером остаётся за автором. */
.page-content .pc-audio:not([style*="width"]) {
    max-width: 560px;
}

.page-content .pc-audio:hover {
    box-shadow: 0 1px 2px rgba(17, 24, 39, .07), 0 10px 26px -16px rgba(99, 102, 241, .5);
}

/* Пока скрипт не отработал, показываем родной проигрыватель, а свой прячем:
   иначе на долю секунды видны обе панели сразу. */
.page-content .pc-audio__ui {
    display: none;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.page-content .pc-audio.is-ready audio {
    display: none;
}

.page-content .pc-audio.is-ready .pc-audio__ui {
    display: flex;
}

/* ── Кнопка воспроизведения ── */

.page-content .pc-audio__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    background: var(--pc-accent);
    border: 0;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}

.page-content .pc-audio__play:hover {
    background: color-mix(in srgb, var(--pc-accent) 86%, #000);
    box-shadow: 0 6px 16px -6px rgba(99, 102, 241, .7);
}

.page-content .pc-audio__play:active { transform: translateY(1px) }

.page-content .pc-audio__play:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 2px;
}

/* Треугольник воспроизведения тяжелее слева, и в геометрическом центре
   кнопки он смотрится смещённым вправо. Сдвигаем на пиксель — оптическая
   поправка, а не выравнивание по числам. */
.page-content .pc-audio__play svg {
    width: 14px;
    height: 14px;
    margin-left: 1px;
    fill: currentColor;
}

.page-content .pc-audio__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Дорожка ──
   Полоса тонкая, а область нажатия во всю строку: попасть пальцем в полоску
   толщиной в несколько пикселей невозможно. При наведении полоса заметно
   толстеет — видно, что за неё можно тянуть. */

.page-content .pc-audio__track {
    position: relative;
    height: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.page-content .pc-audio__rail {
    position: relative;
    width: 100%;
    height: 5px;
    background: var(--pc-rail);
    transition: height .14s ease;
}

.page-content .pc-audio__track:hover .pc-audio__rail,
.page-content .pc-audio__track:focus-visible .pc-audio__rail { height: 7px }

.page-content .pc-audio__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg,
                color-mix(in srgb, var(--pc-accent) 60%, #fff),
                var(--pc-accent));
}

/* Отвес вместо кружка: прямая форма честнее на прямых краях, а тонкая
   вертикаль точнее показывает позицию, чем кружок. */
.page-content .pc-audio__knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 16px;
    margin: -8px 0 0 -1px;
    background: var(--pc-accent);
    box-shadow: 0 0 0 2px var(--pc-surface);
    pointer-events: none;
    transition: height .14s ease, margin-top .14s ease;
}

.page-content .pc-audio__track:hover .pc-audio__knob,
.page-content .pc-audio__track:focus-visible .pc-audio__knob {
    height: 20px;
    margin-top: -10px;
}

.page-content .pc-audio__track:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 3px;
}

/* ── Подписи под дорожкой ── */

.page-content .pc-audio__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    line-height: 1;
    color: var(--pc-muted);
    font-variant-numeric: tabular-nums;
}

.page-content .pc-audio__time {
    flex: 0 0 auto;
    color: var(--pc-ink);
    font-weight: 600;
    letter-spacing: .01em;
}

.page-content .pc-audio__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .85;
}

.page-content .pc-audio__rate {
    flex: 0 0 auto;
    padding: 3px 8px;
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    color: var(--pc-muted);
    background: transparent;
    border: 1px solid var(--pc-border);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.page-content .pc-audio__rate:hover {
    color: var(--pc-accent);
    background: color-mix(in srgb, var(--pc-accent) 8%, transparent);
    border-color: var(--pc-accent);
}

.page-content .pc-audio__mute {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--pc-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.page-content .pc-audio__mute:hover {
    color: var(--pc-accent);
    background: color-mix(in srgb, var(--pc-accent) 8%, transparent);
}

.page-content .pc-audio__mute svg { width: 16px; height: 16px; fill: currentColor }

/* Узкий экран: скорость и название убираем — важнее время и дорожка. */
@media (max-width: 520px) {
    .page-content .pc-audio__name,
    .page-content .pc-audio__rate { display: none }

    .page-content .pc-audio { padding: 11px 13px; gap: 10px }
    .page-content .pc-audio__play { width: 36px; height: 36px }
}

/* 🔴 Тёмная палитра — по ТЕМЕ САЙТА, а не по настройке операционной
   системы. Здесь стоял `@media (prefers-color-scheme: dark)`: у владельца
   тёмная система и светлая тема, и проигрыватель выходил чёрным посреди
   светлой статьи. Тему сайта задаёт класс на body — на него и смотрим.

   ⚠️ Внутри редактора класса нет, и это верно: рамка набора светлая. */
/* ⚠️ Селектор ПЛОСКИЙ, без вложенности CSS: она есть не во всех живых
   браузерах, а молча не применившаяся палитра выглядит как поломка. */
body.fx-theme-dark .page-content .pc-player,
body.fx-theme-dark .page-content .pc-chapters {
    --pc-surface: #151922;
    --pc-border: #2c3342;
    --pc-ink: #e8ecf3;
    --pc-muted: #94a1b5;
    --pc-rail: #2a303d;
}

/* ═════════ Телефоны и планшеты ═════════
   Подписи внутри блоков (часы работы, пометки в карточках контактов) шли
   по 11.2px. На телефоне это уже за границей читаемого, а браузер в ответ
   предлагает увеличить страницу целиком — и вёрстка уезжает. */
@media (max-width: 1024px) {
    /* Селектор обязан включать .page-content: базовые правила объявлены
       именно так (`.page-content .pc-contacts li > span`), и мой короткий
       вариант проигрывал им по силе — замер показывал прежние 11.2px. */
    .page-content .pc-contacts li > span:not(.pc-ico),
    .page-content .pc-contacts small,
    .page-content .pc-now,
    .page-content .pc-note small { font-size: 12px; }
    /* Заголовки групп карты сайта были .72rem — 11.5 пикселя. */
    .page-content .pc-sitemap__group h3 { font-size: 12px; }
}

/* ═════════ Код в материале ═════════
   ---------------------------------------------------------------------------
   Оформление блока кода жило во вьюхе страницы новости (`.news-content pre`),
   то есть В МЕСТЕ, КУДА РЕДАКТОР НЕ ЗАГЛЯДЫВАЕТ: он подключает в свою рамку
   ровно этот файл и ничего больше. Автор писал урок и видел голый текст без
   рамки, а на сайте тот же кусок оказывался тёмным блоком — то есть редактор
   показывал НЕ ТО, что увидит посетитель, ради чего он и сделан.

   Правило шире: любое оформление содержимого материала объявляется здесь.
   Пишешь его в шаблоне страницы — редактор об этом не узнает.

   Селектор перечисляет оба класса-обёртки: `page-content` — тело рамки
   редактора и страницы раздела «Страницы», `news-content` — статья новости
   на сайте. Один и тот же текст показывается под обоими. */
.page-content pre,
.news-content pre {
    margin: 1.5rem 0;
    padding: 1rem 1.15rem;
    background: #0f172a;
    color: #e5e7eb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
    line-height: 1.7;
    /* Перенос, а не горизонтальная прокрутка: длинная строка кода на
       телефоне иначе растягивает всю страницу. overflow-x оставлен на случай
       неразрывного куска (длинный адрес, ключ) — поедет он, не страница. */
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* Вложенный <code> внутри <pre> не должен получать оформление инлайнового:
   иначе выходит плашка на плашке. */
.page-content pre code,
.news-content pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Инлайновый код в тексте — приглушённая плашка, а не просто моноширинный:
   так видно, где кончается название файла или ключа. */
.page-content :not(pre) > code,
.news-content :not(pre) > code {
    padding: .1em .35em;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--surface-bd, #e2e8f0);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    word-break: break-word;
}

@media (max-width: 1024px) {
    /* Ужимаем только поля. Кегль НЕ трогаем: базовый .9rem это 14.4 пикселя,
       то есть уже выше нижней границы читаемого (12), и правило вида
       `font-size:12px` его бы не подняло, а ОПУСТИЛО. Правило «минимум 12»
       касается подписей в 11 пикселей, а не всего подряд.

       Здесь это ещё и заметнее обычного: рамка редактора внутри панели
       около 950 пикселей шириной, то есть под это условие попадает всегда —
       и автор видел бы код мельче, чем увидит посетитель. Медиазапрос внутри
       рамки отвечает на ширину РАМКИ, а не устройства. */
    .page-content pre,
    .news-content pre { padding: .85rem .9rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   ТАБЛИЦА СРАВНЕНИЯ

   Таблицы в содержимом не были оформлены вовсе: редактор их вставляет и
   сохраняет, а на сайте они выходили голыми строками без рамок. Между тем
   сравнение — самый убедительный формат: рядом видно, чем одно отличается
   от другого.

   Обёртка со своей прокруткой обязательна. Таблица из четырёх колонок не
   ужимается ниже содержимого, и на телефоне она распирала бы страницу вбок —
   тот же случай, что уже был в списках панели.
   ───────────────────────────────────────────────────────────────────── */
.page-content .pc-table,
.news-content .pc-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.4rem 0;
    border: 1px solid var(--surface-bd, #e2e8f0);
}

.page-content table,
.news-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    background: var(--surface, #fff);
}

.page-content th,
.news-content th {
    padding: .8rem .9rem;
    text-align: left;
    font-weight: 700;
    color: var(--surface-ink, #0f172a);
    background: var(--surface-2, #f8fafc);
    border-bottom: 2px solid var(--surface-bd, #e2e8f0);
    white-space: nowrap;
}

/* Таблица сравнения — РАВНЫЕ колонки (`table-layout: fixed`).
   Замер вскрыл, что при обычной раскладке правые колонки не прокручивались,
   а ПРОПАДАЛИ: `width:100%` держит коробку таблицы по колонке
   текста, переполнение случается ВНУТРИ таблицы, а таблица — не
   контейнер прокрутки. На 1280 коробка была 605 при содержимом 1237 —
   632 пикселя сравнения были за краем, и достать их было нечем.
   И это на десктопе, а не только на телефоне.

   `overflow-wrap` здесь не помогает: `break-word` вообще не влияет на
   вычисление минимальной ширины колонки, а `anywhere` ломает слова
   посредине. Фиксированная раскладка решает задачу напрямую: ширина
   колонок задана заранее, содержимое переносится внутри них.
   Для сравнения это и правильнее по сути: три системы получают
   одинаковое место, а не та, чей текст длиннее. */
.page-content .pc-table table,
.news-content .pc-table table {
    /* `display: table` здесь несущий. Вьюха страницы объявляет
       `.page-content table{ display:block; overflow-x:auto }` — то есть делает
       саму таблицу контейнером прокрутки. У блочного элемента
       `table-layout` игнорируется вовсе, и колонки берут ширину по
       содержимому: замер на 1280 показал 1237 при колонке текста 605,
       то есть сравнение приходилось прокручивать вбок даже на широком
       экране. Прокрутка ничего не теряла — но читать сравнение
       трёх систем, видя за раз одну колонку, бессмысленно: смысл
       таблицы именно в том, что варианты видны рядом.
       На широком экране возвращаем табличную раскладку с равными
       колонками; прокрутка остаётся у обёртки `.pc-table` как запас. */
    display: table;
    table-layout: fixed;
    width: 100%;
}

@media (max-width: 1024px) {
    /* На телефоне четыре колонки в 261 пиксель — это по 62 на
       колонку: слова вроде «разработчик» туда не встают вовсе.
       Возвращаем прокрутку: читать вбок хуже, чем видеть всё
       сразу, но лучше, чем столбик из обрубленных слов. */
    .page-content .pc-table table,
    .news-content .pc-table table {
        display: block;
        overflow-x: auto;
        table-layout: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.page-content .pc-table th,
.news-content .pc-table th { white-space: normal }

/* Первая колонка — признак сравнения, ей нужно больше места,
   трём системам — поровну. */
.page-content .pc-table th:first-child,
.news-content .pc-table th:first-child { width: 28% }

.page-content td,
.news-content td {
    padding: .75rem .9rem;
    vertical-align: top;
    border-bottom: 1px solid var(--surface-bd, #eef2f7);
    /* break-word, а НЕ anywhere: anywhere обнуляет минимальную ширину, и
       браузер начинает переносить заголовки по одной букве в строку. */
    overflow-wrap: break-word;
}

.page-content tbody tr:last-child td,
.news-content tbody tr:last-child td { border-bottom: 0 }

/* Первая колонка — признак сравнения, она и есть подпись строки */
.page-content tbody td:first-child,
.news-content tbody td:first-child {
    font-weight: 600;
    color: var(--surface-ink, #0f172a);
}

/* Колонка своего продукта выделяется: ради неё таблицу и читают.
   Класс ставится на th и td вручную — на любой позиции. */
.page-content .is-us,
.news-content .is-us {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 7%, transparent);
}

.page-content th.is-us,
.news-content th.is-us {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 14%, transparent);
    color: color-mix(in srgb, var(--color-primary, #6366f1) 75%, var(--surface-ink, #0f172a));
}

/* Значки «есть / нет / отчасти» — словами, а не только цветом: цвет один
   не читается ни на чёрно-белой печати, ни при дальтонизме. */
.page-content .yes, .news-content .yes { color: #15803d; font-weight: 700 }
.page-content .no,  .news-content .no  { color: #b91c1c; font-weight: 700 }
.page-content .mid, .news-content .mid { color: #a16207; font-weight: 700 }

@media (max-width: 1024px) {
    .page-content table,
    .news-content table { font-size: .86rem }

    .page-content th, .news-content th,
    .page-content td, .news-content td { padding: .6rem .7rem }
}

/* ── Блок своего кода: два состояния, которые видит посетитель ───────────
   Сам блок на сайт не попадает: render_code_blocks() превращает его в
   script, style, разметку или в вывод PHP. Остаются только два случая,
   когда показывать нечего. */

/* Выполнение PHP выключено настройкой. Показываем исходник текстом, а не
   молча пустоту: исчезнувший блок автор принимает за потерянную работу. */
.ru-code-off {
    margin: 1em 0;
    padding: .9em 1em;
    overflow-x: auto;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    color: #334155;
    background: #f1f5f9;
    border-left: 3px solid #94a3b8;
}

/* Ошибка в коде. Видна ТОЛЬКО администратору (см. run_content_php): в тексте
   ошибки бывают пути на диске и куски запросов. */
.ru-code-error {
    margin: 1em 0;
    padding: .9em 1em;
    overflow-x: auto;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    color: #7f1d1d;
    background: #fef2f2;
    border-left: 3px solid #dc2626;
}

/* ═══════════════════════ Оглавление материала ═══════════════════════
   Длинная страница без оглавления читается сплошной лентой: по ней не
   видно, что внутри, и до нужного раздела приходится крутить наугад.

   Вставляется шорткодом [toc] — автоматически показывать его на всех
   материалах нельзя: короткой заметке оглавление не нужно, а решает это
   автор, а не порог в коде. */

.page-content .pc-toc {
    margin: 1.6rem 0;
    padding: 14px 18px;
    background: var(--pc-toc-bg, #f7f8fb);
    border-left: 3px solid var(--color-primary, #6366f1);
}

.page-content .pc-toc__title {
    margin: 0 0 8px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pc-toc-mute, #6b7280);
}

.page-content .pc-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: раздел;
}

.page-content .pc-toc__list li {
    margin: 0;

    /* ⚠️ Держит подраздел вместе с его строкой при разбиении на
       колонки: разорванный пополам пункт читается как ошибка. */
    break-inside: avoid;
}

/* Оглавление из четырнадцати разделов в один столбец — это 490
   пикселей высоты перед текстом. На широком экране раскладываем в две
   колонки: `columns` выравнивает их сам, а на телефоне столбец один —
   там всё равно прокручивают. */
@media (min-width: 640px) {
    .page-content .pc-toc__list {
        columns: 2;
        column-gap: 2rem;
    }
}

.page-content .pc-toc__list a {
    display: block;
    padding: 5px 0;
    color: var(--pc-toc-ink, #111827);
    text-decoration: none;
    line-height: 1.4;

    /* Зона нажатия: нижняя граница WCAG 24. */
    min-height: 24px;
    box-sizing: border-box;
}

.page-content .pc-toc__list a:hover,
.page-content .pc-toc__list a:focus-visible {
    color: var(--color-primary, #6366f1);
    text-decoration: underline;
}

/* ⚠️ Вложенность показана ОТСТУПОМ, а не вложенным списком: структуру
   заголовков пишет человек, и материал с h3 без h2 выше — обычное дело.
   На нём настоящая вложенность разъезжается, отступ переживает любой
   порядок. */
.page-content .pc-toc__sub a {
    padding-left: 1.1rem;
    font-size: .93em;
    color: var(--pc-toc-mute, #6b7280);
}

/* ── Ссылка-якорь у заголовка ──────────────────────────────────────────
   Без неё читатель не узнает, что на раздел можно сослаться.

   ⚠️ `user-select: none` обязателен: иначе решётка уезжает вместе с
   текстом при копировании заголовка. */

.page-content .pc-anchor {
    margin-left: .35em;
    color: var(--color-primary, #6366f1);
    text-decoration: none;
    font-weight: 400;
    user-select: none;
    -webkit-user-select: none;

    /* Прячем прозрачностью, а не display:none — элемент остаётся в потоке,
       и заголовок не дёргается по ширине при наведении. */
    opacity: 0;
    transition: opacity .15s ease;
}

.page-content :is(h2, h3):hover > .pc-anchor,
.page-content .pc-anchor:focus-visible {
    opacity: 1;
}

/* Раздел, на который только что перешли по ссылке, — отметкой слева:
   иначе после перехода непонятно, куда попал. */
.page-content :is(h2, h3):target {
    box-shadow: inset 3px 0 0 var(--color-primary, #6366f1);
    padding-left: 12px;
}

/* Шапка сайта прибита к верху и накрывала бы заголовок, к которому
   перешли по якорю. */
.page-content :is(h2, h3)[id] {
    scroll-margin-top: 5rem;
}

@media (max-width: 1024px), (max-height: 500px) {
    /* 🔴 Показ по наведению на сенсорном экране = недоступно вовсе.
       Общее правило проекта: у любого :hover-показа обязана быть
       безусловная ветка под этим порогом. */
    .page-content .pc-anchor {
        opacity: .45;

        /* ⚠️ Решётка шириной 12 пикселей — мимо границы WCAG 2.5.8 в 24.
           Ширину строчному элементу задавать бесполезно (в проекте эта
           грабля уже записана), поэтому зона растёт отступами. По
           вертикали отступ у строчного выходит за строку и высоту
           строки не меняет — заголовок не разъезжается. */
        padding: .35em .45em;
        margin-left: 0;
    }

    .page-content .pc-toc__title { font-size: 12px }
    .page-content .pc-toc__list a { min-height: 32px; padding: 7px 0 }
}

/* Тёмная тема сайта — по классу на body, а НЕ по настройке ОС: у неё
   своя роль, и правило по prefers-color-scheme красило бы оглавление
   тёмным посреди светлой статьи. Эта грабля в проекте разбиралась трижды. */
body.fx-theme-dark .page-content .pc-toc {
    --pc-toc-bg: #151922;
    --pc-toc-ink: #e8ecf3;
    --pc-toc-mute: #94a1b5;
}


/* ══════════ Галерея картинок в содержимом ══════════
   Владелец: «если я в Страницу или Новость хочу добавить несколько картинок
   сразу и листать их», затем — «вертикальную галерею» и «предпросмотр
   Галереи сделать сразу вертикальной, а не горизонтальной как сейчас».

   Раскладка одна по смыслу и в редакторе, и на сайте: слева столбик
   миниатюр, справа крупный кадр.

   🔴 В редакторе (и на сайте без скрипта) её даёт одна сетка: первая
   картинка — кадр справа на шесть рядов, остальные — миниатюры столбиком
   слева. Кадр растянут именно на ШЕСТЬ рядов фиксированной высоты: у неявных
   рядов сетки нет конца, и `1 / -1` дал бы ровно один ряд. Листалкой блок
   делает скрипт сайта, вешая класс `is-live`; в рамке редактора того скрипта
   нет. Ярлык «Галерея» в рамке — псевдоэлемент с position:absolute, ячейкой
   сетки он не становится.

   ⚠️ Разметка нарочно простая: `<div class="pc-gallery"><img>…</div>`. Ни
   data-атрибутов, ни оболочек — чистка редактора их сторожит, а простые теги
   переживают и её, и правку исходника руками. */
.page-content .pc-gallery{ display:grid; margin:1.6rem 0;
    grid-template-columns:4.5rem minmax(0, 1fr); grid-auto-rows:3.3rem; gap:.4rem .5rem }
.page-content .pc-gallery > img{ grid-column:1; width:100%; height:100%; aspect-ratio:auto;
    object-fit:cover; display:block; margin:0; background:var(--pc-soft,#f8fafc) }
/* ⚠️ Кадр ВПИСЫВАЕТ картинку, а не режет: в тексте она — предмет разговора,
   и срезанный край меняет смысл. Режутся только миниатюры: это указатели. */
.page-content .pc-gallery > img:first-child{ grid-column:2; grid-row:1 / span 6; object-fit:contain }

/* ── Тот же блок, когда его подхватил скрипт ── */
.page-content .pc-gallery.is-live{ grid-template-columns:4.75rem minmax(0, 1fr);
    grid-auto-rows:auto; gap:.5rem }

/* 🔴 Высоту галереи задаёт КАДР, а не столбик. `contain:size` убирает вклад
   миниатюр в высоту ряда: без него дюжина миниатюр вытягивала галерею на
   полторы страницы, а кадр стоял посередине пустоты. Столбик прокручивается. */
.page-content .pc-gal__thumbs{ grid-column:1; grid-row:1; contain:size; display:flex;
    flex-direction:column; gap:.4rem; overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin }
.page-content .pc-gal__thumb{ flex:none; display:block; width:100%; aspect-ratio:1; padding:0;
    overflow:hidden; cursor:pointer; opacity:.7;
    background:var(--pc-soft,#f8fafc); border:2px solid transparent }
.page-content .pc-gal__thumb:hover,
.page-content .pc-gal__thumb:focus-visible{ opacity:1 }
.page-content .pc-gal__thumb.is-on{ opacity:1; border-color:var(--color-primary,#6366f1) }
.page-content .pc-gal__thumb img{ width:100%; height:100%; aspect-ratio:auto; max-height:none;
    object-fit:cover; display:block; margin:0 }

/* ⚠️ `touch-action: pan-y`: палец по кадру вверх-вниз по-прежнему листает
   СТРАНИЦУ, а движение вбок достаётся скрипту. `user-select` снят, иначе
   мышь с зажатой кнопкой выделяла счётчик вместо перетаскивания. */
.page-content .pc-gal__view{ grid-column:2; grid-row:1; position:relative; min-width:0;
    overflow:hidden; background:var(--pc-soft,#f8fafc); touch-action:pan-y;
    cursor:grab; -webkit-user-select:none; user-select:none }
.page-content .pc-gal__view.is-dragging{ cursor:grabbing }

/* Кадры едут лентой: плавно и одной строкой стиля, без перерисовки. */
.page-content .pc-gal__track{ display:flex; height:100%; transition:transform .3s ease }
.page-content .pc-gal__frame{ flex:0 0 100%; min-width:0; min-height:14rem;
    display:flex; align-items:center; justify-content:center }
.page-content .pc-gal__frame img{ aspect-ratio:auto; width:auto; max-width:100%; max-height:32rem;
    object-fit:contain; display:block; margin:0 }

.page-content .pc-gal__arrow{ position:absolute; top:50%; margin-top:-1.35rem;
    width:2.7rem; height:2.7rem; display:flex; align-items:center;
    justify-content:center; font-size:1.1rem; line-height:1;
    color:var(--pc-ink,#111827); background:rgba(255,255,255,.86);
    border:0; cursor:pointer }
.page-content .pc-gal__arrow:hover{ background:#fff }
.page-content .pc-gal__arrow--prev{ left:.4rem }
.page-content .pc-gal__arrow--next{ right:.4rem }

/* Счётчик «3 / 7»: по нему сразу видно, сколько ещё осталось. */
.page-content .pc-gal__num{ position:absolute; right:.5rem; top:.5rem;
    padding:.15rem .5rem; font-size:.75rem; font-weight:600;
    color:#fff; background:rgba(15,23,42,.6) }

/* ⚠️ Стрелки — только там, где есть курсор. На телефоне листают пальцем,
   а две кнопки поверх картинки съедали бы её край. */
@media (max-width: 1024px), (max-height: 500px){
    .page-content .pc-gal__arrow{ display:none }
}

/* Телефон: столбик уже, кадру остаётся больше ширины.
   🔴 Прежнее правило сенсорного порога перестраивало сетку в ряд плиток —
   и внутри рамки редактора оно срабатывало ВСЕГДА: у рамки своя ширина
   окна, меньше 1024. Первая картинка растягивалась на шесть рядов посреди
   восьми колонок. Порог телефона — 640, и сетка остаётся вертикальной. */
@media (max-width: 640px){
    .page-content .pc-gallery{ grid-template-columns:3.4rem minmax(0, 1fr); grid-auto-rows:2.6rem }
    .page-content .pc-gallery.is-live{ grid-template-columns:3.6rem minmax(0, 1fr); gap:.4rem }
    .page-content .pc-gal__frame{ min-height:11rem }
    .page-content .pc-gal__frame img{ max-height:24rem }
}

@media (prefers-reduced-motion: reduce){
    .page-content .pc-gal__track{ transition:none }
}