/* ─────────────────────────────────────────────────────────────────────────
   Публичная витрина офферов procpa.pro/offers/

   Токены скопированы из собранного CSS лендинга (_astro/*.css): витрина
   обязана читаться как та же площадка, а импортировать чужой бандл нельзя —
   у лендинга хешированные имена файлов, они меняются с каждой пересборкой.
   Меняются токены на лендинге — обновить и здесь.
   ───────────────────────────────────────────────────────────────────────── */

/* Гарнитура лендинга. Без @font-face объявление font-family молча падало на
   системный шрифт: Inter не грузился вовсе, и витрина была набрана Segoe UI —
   при переходе с главной менялась гарнитура, а вес 650 (заголовки, логотип,
   выплата) в статичном системном шрифте округлялся до 700. Файл лежит на том
   же домене, что и лендинг, поэтому запрос идёт в тот же origin и попадает
   в общий кеш с главной страницей. */
@font-face {
    font-family: 'Inter Variable';
    src: url('/fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Тема одна — светлая, как на лендинге. Автоматической тёмной по
   prefers-color-scheme здесь БЫТЬ НЕ ДОЛЖНО: лендинг её не поддерживает, и у
   посетителя с тёмной системой светлая главная перетекала бы в тёмный каталог.
   Тёмная тема живёт только в кабинете — там она включается вручную
   переключателем в шапке. */
:root {
    /* Явно светлая: без этого браузер с тёмной системной темой красит по
       своему усмотрению поля ввода, селекты и полосы прокрутки. */
    color-scheme: light;

    --pc-bg: #faf6f4;
    --pc-surface: #fdfcfb;
    --pc-surface-2: #f7f8fb;
    --pc-ink: #080b1a;
    --pc-ink-2: #2a2f3c;
    --pc-ink-3: #434e5f;
    /* Затемнён против лендингового #737888: на нём набраны подписи 11–13px
       (характеристики, крошки, примечания), а там он давал 4.1–4.3:1 при
       норме 4.5. Замер: 4.88:1 на карточке и 4.65:1 на фоне страницы. */
    --pc-ink-4: #6a6f81;
    --pc-border: #e3e2e0;
    --pc-border-2: #e3e6f6;
    --pc-border-strong: #d6d4d4;
    /* Граница КОНТРОЛОВ (поля, вторичные кнопки, пагинация) — отдельный,
       более тёмный тон. Общий #d6d4d4 давал на фоне 1.37:1 при норме 3:1 для
       границ элементов управления: поле поиска и кнопки пагинации переставали
       читаться как элементы, с которыми можно работать. */
    /* 3.06:1 к поверхности — порог для границ контролов (WCAG 1.4.11) пройден,
       но тон мягче прежнего #8b8886, который выбивался из светлой палитры. */
    --pc-border-ctl: #b0adab;
    --pc-blue: #0262fe;
    --pc-blue-hover: #0450d6;
    --pc-coral: #fd6a4c;
    --pc-violet: #7f5df3;

    /* Шкала §4 CLAUDE.md: 6 — мелкие контролы, 8 — блок внутри карточки,
       12 — рабочий радиус (поля, кнопки, карточки), 16 — hero, 980 — пилюля.
       Значений вне шкалы (10, 14, 24) больше нет: для нового элемента берём
       ближайший токен, а не подбираем число на глаз. */
    --pc-radius-sm: 8px;
    --pc-radius-md: 12px;
    --pc-radius-lg: 16px;
    --pc-radius-pill: 980px;

    /* Одна тень с распылением 2px — §4 CLAUDE.md. На лендинге тени мягче и
       цветные, но правила проекта старше: цветное свечение под кнопкой и
       двойной drop-shadow под карточкой там запрещены прямо. */
    --pc-shadow-card: 0 1px 2px rgba(8, 11, 26, .05);
    --pc-shadow-cta: 0 1px 2px rgba(8, 11, 26, .06);

    --pc-dur-fast: .2s;
    --pc-ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Ширина и поля — как у лендинга (.page: 1536px и ~50px по бокам), иначе
       логотип и кнопки в шапке стоят на других местах, чем на главной, и при
       переходе видно смещение. */
    --pc-page: 1536px;
    --pc-gutter: 50px;

    /* Геометрия шапки — снята с боевого лендинга: ряд 55px + отступ 41px даёт
       137px, полоса фона при прокрутке ужимается до 83px. */
    --pc-hdr-row: 55px;
    --pc-hdr-pad: 41px;
    --pc-hdr-flow: 137px;
    --pc-hdr-stuck: 83px;
    --pc-hdr-pad-stuck: 14px;
    --pc-dur-base: .48s;
}

*, *::before, *::after { box-sizing: border-box; }

.pc-body {
    margin: 0;
    background: var(--pc-bg);
    color: var(--pc-ink);
    font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

.pc-wrap {
    width: 100%;
    max-width: var(--pc-page);
    margin-inline: auto;
    padding-inline: var(--pc-gutter);
}

.pc-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pc-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--pc-blue);
    color: #fff;
    border-radius: 0 0 var(--pc-radius-sm) 0;
    font-weight: 500;
}
.pc-skip:focus { left: 0; }

/* Фокус — один видимый индикатор на всю витрину. */
/* Кольцо фокуса и НИЧЕГО больше: строка border-radius здесь меняла не форму
   кольца, а сам радиус контрола — кнопка в фокусе «квадратилась» с 14px до 4.
   Браузер и так повторяет кольцом скругление элемента. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--pc-blue);
    outline-offset: 2px;
}

/* ── Шапка ──────────────────────────────────────────────────────────────── */

/* Шапка устроена как на лендинге: при прокрутке ужимается ТОЛЬКО полоса фона,
   а ряд с логотипом, меню и кнопками стоит на месте. Так и должно быть —
   двигать содержимое шапки на каждом скролле значит заставлять человека
   заново искать глазами пункт меню. */
.pc-header {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Сама шапка кликов не ловит — их принимает содержимое ряда (ниже),
       иначе прозрачная зона под сжатой полосой перехватывала бы курсор. */
    pointer-events: none;
}

.pc-header-bar {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: -1;
    height: var(--pc-hdr-flow);
    background: color-mix(in srgb, var(--pc-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pc-border);
    transition: height var(--pc-dur-base) var(--pc-ease-out);
    /* Полоса ловит клики сама: без этого нажатие по пустому месту прижатой
       шапки проваливалось в невидимую карточку под ней. */
    pointer-events: auto;
}

.pc-header.is-stuck .pc-header-bar { height: var(--pc-hdr-stuck); }

.pc-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--pc-hdr-row);
    padding-block: var(--pc-hdr-pad);
    /* Ряд уезжает вверх ВМЕСТЕ с полосой — иначе логотип и кнопка висят ниже
       хайрлайна, прямо на прокручивающихся карточках.
       Именно transform, а не padding: изменение отступа меняло высоту шапки в
       потоке (137 → 83), весь контент под ней подпрыгивал на 54px, браузер
       правил позицию скролла, класс снимался — и шапка дёргалась. Так же
       сделано на лендинге: translateY(-27px) при неизменных 137px высоты. */
    transition: transform var(--pc-dur-base) var(--pc-ease-out);
}

.pc-header.is-stuck .pc-header-inner {
    transform: translateY(calc(var(--pc-hdr-pad-stuck) - var(--pc-hdr-pad)));
}
.pc-header-inner > * { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
    .pc-header-bar, .pc-header-inner { transition: none; }
}

/* Высота шапки в потоке НЕ меняется ни при какой ширине: её задаёт ряд с
   постоянным padding. Полоса фона живёт отдельным absolute-слоем. */

.pc-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--pc-ink);
    flex: none;
}

/* Размеры знака и слова — с лендинга (знак 48px по высоте, слово 36px).
   Прежние 30/20px делали логотип заметно мельче, чем на главной. */
.pc-logo-mark { display: block; width: 46px; height: 48px; }
.pc-logo--sm .pc-logo-mark { width: 26px; height: 28px; }
.pc-drop--coral { fill: var(--pc-coral); }
.pc-drop--violet { fill: var(--pc-violet); }
.pc-drop--blue { fill: var(--pc-blue); }

.pc-logo-word {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -.019em;
}
.pc-logo--sm .pc-logo-word { font-size: 1.25rem; }

/* Меню по центру между логотипом и кнопками — как на лендинге. Раньше стояло
   `margin-inline-start: auto`, то есть было прижато к кнопкам, и при переходе
   с главной пункты уезжали вправо на треть экрана. */
.pc-nav {
    display: flex;
    gap: 42px;
    margin-inline: auto;
}

.pc-nav a {
    /* 16px и вес 450 — значения лендинга; прежние 15px делали пункты мельче
       соседней страницы. */
    color: var(--pc-ink);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 450;
    white-space: nowrap;
    transition: color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-nav a { padding-block: 4px; }
.pc-nav a:hover { color: var(--pc-blue); }
/* Текущий пункт помечаем подчёркиванием, а не весом: жирный шрифт делал
   пункт шире, и соседние съезжали на 2–3px. */
.pc-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--pc-blue); }

/* Кнопки шапки — лендинговая метрика: высота 55px и зазор 34px. */
.pc-header-cta { display: flex; align-items: center; gap: 34px; flex: none; }
.pc-header-cta .pc-btn { min-height: 55px; padding-inline: 26px; }
/* «Войти» — текстовая ссылка, как на лендинге. Кнопка с рамкой делала блок
   на 124px шире, и правый край шапки не совпадал с главной. */
.pc-header-login {
    color: var(--pc-ink);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 450;
    white-space: nowrap;
    transition: color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-header-login:hover { color: var(--pc-blue); }

/* ── Кнопки ─────────────────────────────────────────────────────────────── */

.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: var(--pc-radius-md);
    border: 1px solid transparent;
    font: inherit;
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--pc-dur-fast) var(--pc-ease-out),
                border-color var(--pc-dur-fast) var(--pc-ease-out),
                color var(--pc-dur-fast) var(--pc-ease-out),
                box-shadow var(--pc-dur-fast) var(--pc-ease-out),
                transform var(--pc-dur-fast) var(--pc-ease-out);
}

.pc-btn--primary {
    background: var(--pc-blue);
    border-color: var(--pc-blue);
    color: #fff;
    /* Пилюля у главного действия — §4 CLAUDE.md. */
    border-radius: var(--pc-radius-pill);
}
.pc-btn--primary:hover { background: var(--pc-blue-hover); border-color: var(--pc-blue-hover); box-shadow: var(--pc-shadow-cta); }
.pc-btn--ghost { background: transparent; border-color: var(--pc-border-ctl); color: var(--pc-ink-2); }
.pc-btn--ghost:hover { border-color: var(--pc-blue); color: var(--pc-blue); }
/* .96 на кнопке во всю ширину карточки — это сжатие на 13px, оно перебивало
   подъём от hover и кнопка дёргалась. */
.pc-btn:active { transform: scale(.98); }
.pc-btn--lg { min-height: 54px; padding-inline: 30px; font-size: 1rem; }
.pc-btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .pc-btn { transition: background-color var(--pc-dur-fast) linear, color var(--pc-dur-fast) linear; }
    .pc-btn:hover, .pc-btn:active { transform: none; }
}

/* ── Хлебные крошки, заголовки ──────────────────────────────────────────── */

.pc-crumbs { padding-top: 20px; }

.pc-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    color: var(--pc-ink-4);
}
.pc-crumbs li + li::before { content: '/'; margin-inline-end: 10px; color: var(--pc-border-strong); }
.pc-crumbs a {
    color: var(--pc-ink-4);
    text-decoration: none;
    /* Хит-зона: 47×17px была ниже минимума 24×24. */
    display: inline-block;
    padding-block: 4px;
}
.pc-crumbs a:hover { color: var(--pc-blue); text-decoration: underline; text-underline-offset: 2px; }

.pc-intro { padding-block: 20px 8px; }

.pc-h1 {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -.019em;
    line-height: 1.13;
    text-wrap: balance;
}

.pc-h2 {
    margin: 0 0 14px;
    font-size: clamp(1.25rem, 1.9vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.014em;
    line-height: 1.2;
}

.pc-h3 {
    margin: 18px 0 8px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.008em;
}

.pc-lead {
    margin: 14px 0 0;
    max-width: 68ch;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--pc-ink-3);
    text-wrap: pretty;
}

/* ── Раскладка «рельс + контент» ────────────────────────────────────────── */

.pc-layout {
    display: grid;
    /* minmax(0, …) обязателен: трек 1fr не может стать уже min-content своего
       содержимого, и на узком экране сетка вылезала бы за край. */
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-block: 24px 56px;
}

.pc-rail {
    position: sticky;
    /* Отступ считается от сжатой шапки (--pc-hdr-h-stuck): при прокрутке
       она ужимается, и фиксированные 92px оставляли зазор либо прятали
       верх панели под шапкой. */
    top: calc(var(--pc-hdr-stuck) + 16px);
    /* Ограничение по высоте, иначе длинный список категорий отрезается
       нижним краем и до последних пунктов не добраться. */
    max-height: calc(100vh - var(--pc-hdr-stuck) - 32px);
    overflow-y: auto;
    padding: 16px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-md);
}

/* Без капители: uppercase с положительным трекингом запрещён §2 CLAUDE.md,
   а на кириллице 11–13px он ещё и съедает рисунок слова. Лендинг набирает
   капителью только надзаголовки секций 15px, но не подписи данных. */
.pc-rail-head {
    margin: 0 0 10px;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--pc-ink-4);
}

.pc-rail-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.pc-rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--pc-radius-sm);
    color: var(--pc-ink-2);
    text-decoration: none;
    font-size: .875rem;
    transition: background-color var(--pc-dur-fast) var(--pc-ease-out), color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-rail-item:hover { background: var(--pc-surface-2); color: var(--pc-ink); }
/* Активный пункт — индикатор «где я», и он обязан читаться: акцентный синий
   на своей же подложке давал 4.26:1, а счётчик и вовсе 3.88:1. */
.pc-rail-item.is-active { background: color-mix(in srgb, var(--pc-blue) 10%, transparent); color: #0a4bb8; font-weight: 600; }

.pc-rail-name { min-width: 0; }
.pc-rail-count {
    flex: none;
    padding: 1px 8px;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-surface-2);
    color: var(--pc-ink-4);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}
.pc-rail-item.is-active .pc-rail-count { background: color-mix(in srgb, var(--pc-blue) 16%, transparent); color: #0a4bb8; }

/* ── Фильтры ────────────────────────────────────────────────────────────── */

/* Сетка с явными колонками, а не гибкий поток. При flex-wrap поля переносились
   как придётся: «Порядок» уезжал под «Тип выплаты» и вылезал за карточку.
   minmax(0, …) у первой колонки обязателен — иначе поле поиска не может стать
   уже своего содержимого и выталкивает соседей. */
.pc-filters {
    display: grid;
    /* max-content у колонки кнопки, а НЕ auto: 1fr забирал весь остаток, и
       кнопке доставалось 0px — «Показать» переносилось по буквам, а ряд
       вырастал до 140px. */
    grid-template-columns: minmax(0, 1fr) 200px 230px max-content;
    align-items: end;
    gap: 12px 16px;
    padding: 16px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-md);
}

.pc-field { display: grid; gap: 6px; min-width: 0; }
.pc-field--actions { display: flex; gap: 8px; align-items: end; }

@media (max-width: 1080px) {
    /* Два ряда: поиск во всю ширину, под ним селекты и кнопка. */
    .pc-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content; }
    .pc-field--grow { grid-column: 1 / -1; }
}

.pc-label { font-size: .8125rem; color: var(--pc-ink-3); }

.pc-input {
    /* Ширина строго по колонке: без этого <select> раздувается по длине
       самого длинного варианта («Сначала с большей выплатой») и заезжает
       на соседнюю колонку — кнопка «Показать» ложилась поверх него. */
    width: 100%;
    min-width: 0;
    /* Ровно 44: у поля, селекта и кнопки в одном ряду были 47/44/45 —
       разнобой заметен глазом на соседних контролах. */
    height: 44px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--pc-border-ctl);
    /* Тот же радиус, что у кнопки рядом: разные скругления у соседних
       контролов сразу читаются как небрежность. */
    border-radius: var(--pc-radius-md);
    background: var(--pc-surface);
    color: var(--pc-ink);
    /* 16px — иначе iOS Safari зумит страницу при фокусе в поле. */
    font: inherit;
    font-size: 1rem;
    transition: border-color var(--pc-dur-fast) var(--pc-ease-out), box-shadow var(--pc-dur-fast) var(--pc-ease-out);
}
/* Кольцо у поля такое же, как у остальных контролов. Раньше здесь стоял
   outline: none со специфичностью (0,2,0) — он перебивал общее правило, и
   поле в фокусе показывало только бледную тень. */
.pc-input:focus-visible {
    border-color: var(--pc-blue);
    outline: 2px solid var(--pc-blue);
    outline-offset: 2px;
}

.pc-count {
    margin: 18px 0 12px;
    font-size: .9375rem;
    color: var(--pc-ink-3);
    font-variant-numeric: tabular-nums;
}

/* ── Сетка карточек ─────────────────────────────────────────────────────── */

.pc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.pc-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-md);
    transition: border-color var(--pc-dur-fast) var(--pc-ease-out), box-shadow var(--pc-dur-fast) var(--pc-ease-out), transform var(--pc-dur-fast) var(--pc-ease-out);
}
/* Наведение меняет границу и тень, но не двигает карточку: сдвиг под курсором
   на списке из 24 карточек читается как дрожание. */
.pc-card:hover { border-color: var(--pc-border-strong); box-shadow: var(--pc-shadow-card); }

@media (prefers-reduced-motion: reduce) {
    .pc-card:hover { transform: none; }
}

.pc-card-top { display: flex; gap: 12px; align-items: flex-start; }

.pc-card-logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    /* Радиус меньше карточного просто потому, что плитка мельче. Правило
       «внешний = внутренний + отступ» тут неприменимо: плитка не касается
       угла карточки. */
    border-radius: var(--pc-radius-sm);
    background: var(--pc-surface-2);
    overflow: hidden;
    /* Обводка на плитке, а не на растянутой картинке: её outline рисовался
       по краю плитки и читался второй рамкой. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.pc-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.pc-card-letter {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pc-ink-4);
}

.pc-card-head { min-width: 0; }

.pc-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.008em;
    line-height: 1.3;
    /* Два ряда максимум: заголовки от одной до трёх строк давали разброс
       высоты рядов в 42px, и сетка выглядела рваной. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Ровно две строки: клэмп задавал только максимум, и карточки с коротким
       названием были на строку ниже — ряды сетки выходили двух высот. */
    min-height: calc(2 * 1.3em);
}

.pc-card-link { color: var(--pc-ink); text-decoration: none; }
.pc-card-link:hover { color: var(--pc-blue); }
/* Кликабельна вся карточка, но ссылка в разметке одна — так порядок обхода
   с клавиатуры остаётся коротким, а адрес виден в строке состояния. */
/* Растяжка на всю карточку. user-select: none только на самом псевдоэлементе,
   иначе он перехватывает выделение описания мышью. */
.pc-card-link::after { content: ''; position: absolute; inset: 0; user-select: none; }
.pc-card { position: relative; }

/* Одна строка: у офферов с длинным именем рекламодателя строка переносилась,
   и ряд сетки становился на 21px выше соседнего. */
.pc-card-cat {
    margin: 4px 0 0;
    font-size: .8125rem;
    color: var(--pc-ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-card-desc {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--pc-ink-3);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(3 * 1.5em);
}

.pc-card-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--pc-border);
}
.pc-card-facts .pc-fact { min-width: 0; }
.pc-card-facts dt { font-size: .75rem; color: var(--pc-ink-4); letter-spacing: normal; }
.pc-card-facts dd { margin: 2px 0 0; font-size: .8125rem; color: var(--pc-ink-2); font-variant-numeric: tabular-nums; }
/* Селектор с тегом: одиночный класс (0,1,0) проигрывал `.pc-card-facts dd`
   (0,1,1), и главное число карточки красилось тем же цветом, что соседи. */
.pc-card-facts dd.pc-fact-reward { font-weight: 600; color: var(--pc-ink); }

.pc-card-badge {
    margin: 0;
    /* inline-block, а не только align-self: на странице оффера родитель —
       обычный блок, и растянутая на всю колонку «пилюля» читалась полосой. */
    display: inline-block;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: var(--pc-radius-pill);
    /* Info-токен из §1, а не фиолетовый: семантических цветов в палитре
       четыре, и фиолетового среди них нет. Замер: 8.6:1. */
    background: rgba(0, 113, 227, 0.08);
    border: 1px solid rgba(0, 113, 227, 0.25);
    color: #003e7e;
    font-size: .75rem;
    font-weight: 500;
}

/* ── Пустое состояние, пагинация, CTA ───────────────────────────────────── */

.pc-empty {
    padding: 40px 24px;
    text-align: center;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-md);
}
.pc-empty-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.pc-empty-text { margin: 8px auto 20px; max-width: 46ch; color: var(--pc-ink-3); }

.pc-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.pc-pager-state { font-size: .875rem; color: var(--pc-ink-4); font-variant-numeric: tabular-nums; }

.pc-cta {
    margin-top: 40px;
    padding: 28px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-lg);
    text-align: center;
}
.pc-cta-title { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.012em; }
.pc-cta-text { margin: 10px auto 20px; max-width: 56ch; color: var(--pc-ink-3); }

/* ── Страница оффера ────────────────────────────────────────────────────── */

.pc-offer { padding-block: 20px 56px; }

.pc-offer-head { display: flex; gap: 20px; align-items: flex-start; }

.pc-offer-logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    padding: 10px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-md);
}
.pc-offer-logo img { width: 100%; height: 100%; object-fit: contain; }

.pc-offer-head-text { min-width: 0; }

/* Единственная капитель на странице — надзаголовок секции, как на лендинге,
   и с его метрикой: 15px и трекинг .14em. */
/* Без капители: §2 запрещает uppercase с положительным трекингом. То, что
   так набрано на лендинге, правило проекта не отменяет. */
.pc-offer-eyebrow {
    margin: 0 0 8px;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: normal;
    color: #0a4bb8;
}

.pc-specs { margin-top: 28px; }

.pc-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    background: var(--pc-border);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-md);
    overflow: hidden;
}
.pc-spec { padding: 14px 16px; background: var(--pc-surface); }
.pc-spec dt { font-size: .8125rem; color: var(--pc-ink-4); letter-spacing: normal; }
.pc-spec dd { margin: 4px 0 0; font-size: .9375rem; color: var(--pc-ink-2); font-variant-numeric: tabular-nums; }
/* Тег в селекторе вместо двух !important — та же правка, что у .pc-fact-reward. */
.pc-spec dd.pc-spec-strong { font-size: 1.125rem; font-weight: 600; color: var(--pc-ink); }

.pc-offer-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
    margin-top: 32px;
}

.pc-block { margin-bottom: 32px; }

.pc-prose { max-width: 70ch; color: var(--pc-ink-2); }
.pc-prose p { margin: 0 0 12px; line-height: 1.6; text-wrap: pretty; }

.pc-list { margin: 0; padding-inline-start: 20px; color: var(--pc-ink-2); max-width: 70ch; }
.pc-list li { margin-bottom: 6px; line-height: 1.5; }

.pc-note {
    margin: 12px 0 0;
    max-width: 70ch;
    font-size: .875rem;
    color: var(--pc-ink-4);
    line-height: 1.5;
}

.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pc-chip {
    padding: 4px 12px;
    border-radius: var(--pc-radius-pill);
    font-size: .8125rem;
    border: 1px solid transparent;
}
/* Цвет — не единственный признак: у разрешённых и запрещённых источников
   разные заголовки, а сами чипы отличаются ещё и рамкой. */
.pc-chip--ok { background: color-mix(in srgb, #34c759 12%, transparent); border-color: color-mix(in srgb, #34c759 32%, transparent); color: #1d7a3e; }
.pc-chip--no { background: color-mix(in srgb, #ff3b30 10%, transparent); border-color: color-mix(in srgb, #ff3b30 30%, transparent); color: #c93126; }

.pc-offer-side { position: sticky; top: calc(var(--pc-hdr-stuck) + 16px); }

.pc-side-card {
    padding: 22px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow-card);
    text-align: center;
}
.pc-side-reward {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -.019em;
    font-variant-numeric: tabular-nums;
}
.pc-side-label { margin: 6px 0 18px; font-size: .8125rem; color: var(--pc-ink-4); }
.pc-side-note { margin: 14px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--pc-ink-4); }
.pc-side-link { display: inline-block; margin-top: 12px; font-size: .875rem; color: var(--pc-blue); }

.pc-similar { margin-top: 8px; }
.pc-more { margin-top: 16px; }
.pc-more a { color: var(--pc-blue); }

/* ── Подвал ─────────────────────────────────────────────────────────────── */

.pc-footer {
    margin-top: 40px;
    padding-block: 40px 24px;
    background: var(--pc-surface);
    border-top: 1px solid var(--pc-border);
}

.pc-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.pc-footer-note { margin: 12px 0 0; max-width: 46ch; font-size: .875rem; color: var(--pc-ink-4); line-height: 1.5; }

.pc-footer-title { margin: 0 0 12px; font-size: .875rem; font-weight: 600; }
.pc-footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pc-footer-col a {
    color: var(--pc-ink-3);
    text-decoration: none;
    font-size: .875rem;
    display: inline-block;
    padding-block: 3px;
}
.pc-footer-col a:hover { color: var(--pc-blue); }

.pc-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--pc-border);
    font-size: .8125rem;
    color: var(--pc-ink-4);
}
.pc-footer-bottom p { margin: 0; }

/* ── Адаптив. Точки взяты от содержимого: рельс перестаёт помещаться
      около 1024, боковая колонка оффера — около 900. ─────────────────────── */

/* Пять пунктов по 16px с шагом 42px требуют ~666px. Вместе с логотипом (183px)
   и кнопками (229px) это упирается около 1200px — там ужимаем шаг, а ниже
   1024px меню и так скрывается. */
/* Замер: ряд шапки требует 1034px (логотип 183 + меню 666 + кнопки), поэтому
   ниже 1200 сначала ужимаем шаг и логотип, а с 1080 меню убираем совсем —
   иначе страница едет вбок на 266px, и кнопки «Войти»/«Регистрация» уезжают
   за экран. Проверять надо на 768/834/1024, а не только на 430 и 1440. */
@media (max-width: 1200px) {
    .pc-nav { gap: 22px; }
    .pc-nav a { font-size: .9375rem; }
    .pc-header-cta { gap: 16px; }
    .pc-logo-word { font-size: 1.5rem; }
    .pc-logo-mark { width: 30px; height: 33px; }
    .pc-header-inner { padding-block: 24px; }
    :root { --pc-hdr-flow: 103px; --pc-hdr-stuck: 75px; --pc-hdr-pad-stuck: 10px; }
    .pc-header-cta .pc-btn { min-height: 48px; padding-inline: 20px; }
}

@media (max-width: 1080px) {
    /* Пять пунктов в 15px всё ещё требуют ~600px — вместе с логотипом и
       кнопками не помещаются. Навигация остаётся в подвале и на главной. */
    .pc-nav { display: none; }
    .pc-header-cta { margin-inline-start: auto; }
    :root { --pc-hdr-flow: 94px; --pc-hdr-stuck: 72px; }
    .pc-header-inner { padding-block: 20px; }
}

@media (max-width: 1024px) {
    .pc-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pc-rail {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .pc-rail-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        /* Следующий пункт выглядывает за край — иначе лента читается как
           законченный список, и о прокрутке никто не догадывается. */
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
    .pc-rail-item { border: 1px solid var(--pc-border); white-space: nowrap; }
}

@media (max-width: 900px) {
    .pc-offer-body { display: flex; flex-direction: column; }
    /* Карточка с выплатой и кнопкой — сразу под характеристиками, а не под
       всем описанием: замер показал, что раньше она начиналась на 9792px при
       высоте страницы 12342, то есть на одиннадцатом экране. */
    .pc-offer-side { position: static; order: -1; }
}

@media (max-width: 720px) {
    :root { --pc-gutter: 16px; }
    .pc-nav { display: none; }
    .pc-header-inner { min-height: 64px; gap: 12px; }
    .pc-header-cta { margin-inline-start: auto; }
    .pc-footer-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .pc-offer-head { flex-direction: column; gap: 14px; }
    .pc-filters { padding: 14px; }
    .pc-field, .pc-field--grow { flex: 1 1 100%; min-width: 0; }
    .pc-field--actions .pc-btn { flex: 1 1 auto; }
}

/* 480, а не 420: массовый телефон — 430px, и на нём три колонки фактов
   ужимались до 114px, куда «по договорённости» не влезало без переноса. */
@media (max-width: 480px) {
    .pc-card-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Добавлено после аудита ─────────────────────────────────────────────── */

/* Подпись текущего порядка выдачи рядом со счётчиком. */
.pc-count-sort { color: var(--pc-ink-4); }

/* Ссылка на парную категорию: «Микрозаймы» и «Микрозаймы (МФО)» — половины
   одного сегмента, и без этой строки вторая половина не существует для того,
   кто выбрал первую. */
.pc-twin {
    margin: -4px 0 16px;
    font-size: .875rem;
    color: var(--pc-ink-3);
}
.pc-twin a { color: var(--pc-blue); }

/* Хвост длинного описания. */
.pc-more-text { margin-top: 12px; }
.pc-more-text > summary {
    cursor: pointer;
    display: inline-block;
    padding: 8px 0;
    color: var(--pc-blue);
    font-size: .9375rem;
    font-weight: 500;
}
.pc-more-text > summary::marker { color: var(--pc-ink-4); }
.pc-more-text[open] > summary { margin-bottom: 4px; }

/* Номера страниц. */
.pc-pager-list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pc-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding-inline: 8px;
    border-radius: var(--pc-radius-sm);
    color: var(--pc-ink-2);
    text-decoration: none;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--pc-dur-fast) var(--pc-ease-out), color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-pager-num:hover { background: var(--pc-surface); color: var(--pc-ink); }
.pc-pager-num.is-current {
    background: var(--pc-blue);
    color: #fff;
    font-weight: 600;
}
.pc-pager-gap { color: var(--pc-ink-4); padding-inline: 2px; }

@media (max-width: 720px) {
    /* На узком экране номеров помещается мало — оставляем текущую страницу
       и соседей, остальное закрывают кнопки «Назад/Вперёд». */
    /* Многоточие не гасим: без него «1 20 37» читается как «всего три
       страницы». Соседей текущей тоже оставляем. */
    .pc-pager-list li:not(:has(.is-current)):not(:first-child):not(:last-child):not(.pc-pager-gap) { display: none; }
    .pc-pager { flex-wrap: wrap; gap: 10px; }
}

/* Раскрытие хвоста категорий. */
.pc-rail-more > details > summary {
    cursor: pointer;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--pc-radius-sm);
    color: var(--pc-ink-3);
    font-size: .875rem;
}
.pc-rail-more > details > summary:hover { background: var(--pc-surface-2); color: var(--pc-ink); }
.pc-rail-more > details > ul { margin-top: 2px; }

@media (max-width: 1024px) {
    /* На узком экране лента чипов: раскрытие хвоста ломало бы горизонтальный
       ряд, поэтому там оно становится обычным чипом-ссылкой в конце ленты. */
    .pc-rail-more { flex: none; }
    .pc-rail-more > details > summary {
        border: 1px solid var(--pc-border);
        white-space: nowrap;
    }
    .pc-rail-more > details[open] > ul {
        position: absolute;
        z-index: 5;
        margin-top: 8px;
        max-height: 60vh;
        overflow-y: auto;
        padding: 8px;
        background: var(--pc-surface);
        border: 1px solid var(--pc-border);
        border-radius: var(--pc-radius-md);
        box-shadow: var(--pc-shadow-card);
        display: grid;
        gap: 2px;
        min-width: 260px;
    }
    /* top: auto обязателен: липкая версия рельса задаёт top: 80px, и при
       возврате позиционирования (relative нужен для выпадающего списка
       категорий) панель уезжала на 80px вниз — наезжала на форму фильтров. */
    .pc-rail { position: relative; top: auto; }
}

/* Бейдж «по согласованию» в углу карточки: в потоке он удлинял часть карточек
   и ряды сетки получались разной высоты. */
.pc-card-badge--corner {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: .6875rem;
    padding: 2px 8px;
}

/* Раскрытие второстепенных фильтров. На широком экране это не «раскрытие»,
   а просто два поля в ряд: заголовок скрыт, содержимое участвует в общем
   flex-потоке формы. */
/* На широком экране это просто два поля в ряд — кнопка-раскрытие скрыта.
   Свой грид внутри, а не display: contents: contents не пробрасывается через
   контейнер, который Chrome создаёт внутри <details>, и поля вставали друг
   под другом. */
.pc-filters-toggle { display: none; }
.pc-filters-more { display: contents; }
.pc-filters-more-body { display: contents; }

@media (max-width: 720px) {
    /* Вступление тоже ужимаем: заголовок с лидом занимали 201px, и вместе
       с шапкой, крошками и фильтрами первая карточка уезжала за сгиб. */
    .pc-intro { padding-block: 12px 4px; }
    .pc-lead { margin-top: 10px; font-size: .9375rem; }
    .pc-crumbs { padding-top: 12px; }
    .pc-layout { padding-block: 16px 40px; }

    /* Шапка на телефоне: 41px сверху и снизу — это почти треть экрана. */
    :root { --pc-hdr-pad: 14px; --pc-hdr-flow: 84px; --pc-hdr-stuck: 64px; }
    .pc-logo-mark { width: 26px; height: 28px; }
    .pc-logo-word { font-size: 1.25rem; }
    .pc-header-cta { gap: 14px; }
    .pc-header-cta .pc-btn { min-height: 44px; padding-inline: 18px; }
    .pc-header-login { font-size: .9375rem; }

    .pc-filters-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        width: 100%;
        padding: 10px 0;
        border: 0;
        background: transparent;
        color: var(--pc-blue);
        font: inherit;
        font-size: .9375rem;
        font-weight: 500;
        text-align: start;
        cursor: pointer;
    }
    /* Шеврон показывает, что за кнопкой что-то раскрывается: без него она
       читалась обычной ссылкой. */
    .pc-filters-toggle::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform var(--pc-dur-fast) var(--pc-ease-out);
    }
    .pc-filters-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
    .pc-filters-more { display: block; width: 100%; }
    .pc-filters-more[hidden] { display: none; }
    .pc-filters-more-body {
        display: grid;
        gap: 12px;
        padding-top: 4px;
    }
}


/* ── Мобильная навигация ────────────────────────────────────────────────── */

.pc-burger { display: none; }

.pc-mobile-nav { display: none; }
.pc-mobile-nav[hidden] { display: none; }

@media (max-width: 1080px) {
    .pc-burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        border: 0;
        background: transparent;
        cursor: pointer;
        flex: none;
    }
    .pc-burger span {
        display: block;
        height: 2px;
        background: var(--pc-ink);
        border-radius: 2px;
        transition: transform var(--pc-dur-fast) var(--pc-ease-out), opacity var(--pc-dur-fast) var(--pc-ease-out);
    }
    .pc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .pc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .pc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .pc-mobile-nav:not([hidden]) {
        display: block;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        background: var(--pc-surface);
        border-bottom: 1px solid var(--pc-border);
        box-shadow: var(--pc-shadow-card);
        pointer-events: auto;
    }
    .pc-mobile-nav nav { display: grid; padding-block: 8px; }
    .pc-mobile-nav a {
        display: flex;
        align-items: center;
        min-height: 48px;
        color: var(--pc-ink);
        text-decoration: none;
        font-size: 1rem;
        border-bottom: 1px solid var(--pc-border);
    }
    .pc-mobile-nav a:last-child { border-bottom: 0; }
    .pc-mobile-nav a[aria-current="page"] { color: var(--pc-blue); font-weight: 600; }

    /* Кнопки уступают место бургеру: «Войти» текстом остаётся, регистрация — кнопкой. */
    .pc-header-cta { margin-inline-start: auto; }
}

@media (max-width: 720px) {
    /* Хит-зоны до 44px: «Войти» было 23px, пункты рельса 40px. */
    .pc-header-login { display: inline-flex; align-items: center; min-height: 44px; }
    .pc-rail-item { min-height: 44px; }
    .pc-rail-more > details > summary { min-height: 44px; }
}


/* Высота кнопки в строке фильтров — как у полей рядом. */
.pc-filters .pc-btn { min-height: 44px; height: 44px; }

/* ── Выпадающий список ──────────────────────────────────────────────────────
   Тот же кнопочный дропдаун, что в кабинете (.ds-sel в shell.css): нативный
   <select> рисуется системным виджетом Windows — синяя подсветка, чужие
   отступы, — и рядом с кабинетом витрина выглядела другим продуктом.
   Нативный элемент остаётся в разметке и продолжает отправлять форму: без
   JS работает ровно как раньше, скрипт лишь надстраивает вид. */

.pc-sel { position: relative; }
.pc-sel select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.pc-sel-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    text-align: left;
    border: 1px solid var(--pc-border-ctl);
    border-radius: var(--pc-radius-md);
    background: var(--pc-surface);
    color: var(--pc-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-sel-btn:hover { border-color: var(--pc-ink-4); }
.pc-sel.is-open .pc-sel-btn { border-color: var(--pc-blue); }

.pc-sel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pc-sel-caret {
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--pc-ink-4);
    border-bottom: 2px solid var(--pc-ink-4);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-sel.is-open .pc-sel-caret { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--pc-blue); }

.pc-sel-list {
    position: absolute;
    z-index: 30;
    inset-inline: 0;
    top: calc(100% + 4px);
    max-height: 288px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-md);
    box-shadow: var(--pc-shadow-card);
}
.pc-sel-list[hidden] { display: none; }

.pc-sel-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: var(--pc-radius-sm);
    font-size: .9375rem;
    color: var(--pc-ink);
    cursor: pointer;
    transition: background-color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-sel-opt:hover,
.pc-sel-opt.is-active { background: color-mix(in srgb, var(--pc-blue) 8%, transparent); }
.pc-sel-opt[aria-selected="true"] { color: var(--pc-blue); font-weight: 500; }
/* Галочка у выбранного — как в кабинете. */
.pc-sel-opt[aria-selected="true"]::after {
    content: '';
    flex: none;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}