/* =============================================================
   PROMOKOIN — БЛОКИ ГЛАВНОЙ
   Файл собран по координатам макета Figma («Главная декстоп»,
   ширина 1440, контент 1240, начало контента x=100).

   Все размеры и отступы ниже взяты из макета.
   Подключается после app.css, поэтому здесь же переопределения
   старых правил проекта. Сборка через Mix не требуется.
   ============================================================= */

:root {
    --pk-blue: #0250e8;
    --pk-white: #fefefe;
    --pk-panel: #f5f8fc;
    --pk-chip: #f3f6fe;
    --pk-field: #f3f5fa;
    --pk-field-border: rgba(217, 217, 217, 0.7);
    --pk-green: #22bf7c;
    --pk-green-soft: #d9f6e5;
    --pk-green-text: #149455;
    --pk-red: #e43546;
    --pk-teal: #06c0a8;
    --pk-amber: #e6a306;

    --pk-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    --pk-shadow-soft: 0 0 16px rgba(0, 0, 0, 0.05);
    --pk-shadow-side: 7px 0 16px rgba(0, 0, 0, 0.1);
    --pk-shadow-panel: 0 -1px 16px rgba(0, 0, 0, 0.1);

    --pk-radius: 16px;
    --pk-radius-btn: 10px;
    --pk-radius-chip: 6px;

    --pk-manrope: "Manrope", sans-serif;
    --pk-inter: "Inter", sans-serif;
}


/* =============================================================
   0. ШИРИНА КОНТЕНТА
   В макете содержимое — 1240px (от x=100 до 1340 при экране 1440).
   У .container есть внутренние поля по 10px, поэтому раньше
   содержимому доставалось 1220, и блоки не сходились с макетом
   по 20px. Значение поднято до 1260 — внутри снова ровно 1240.
   То же значение записано в _vars.scss для будущих пересборок.
   ============================================================= */

@media (min-width: 1200px) {
    .container {
        max-width: 1260px;
    }
}


/* =============================================================
   1. HERO
   Из макета (1440, контент от x=100):
     H1        left 100, top 142, w 761, 48px/1.3, tracking 0.96 (0.02em)
     подзагол. left 100, top 350, w 458, 22px/1.4, tracking 0.88 (0.04em)
     текст     left 100, top 462, w 578, 16px/1.4, tracking 0.64 (0.04em)
     карточки  (787,150) и (1076,150), (787,379) и (1076,381)
               264×183, радиус 16, тень 0 0 16.1px rgba(0,0,0,.1)
               зазор 25px по горизонтали, 46px по вертикали
     в карточке: иконка 60×60 в (8,14)
                 заголовок в (74,32), 18px ExtraBold, tracking 0.36
                 текст в (17,85), ширина 224, 16px Medium, 1.4
   ============================================================= */

.home-page__hero {
    margin-bottom: 50px;
}

.home-page__hero-text .h1 {
    max-width: 761px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin-bottom: 21px;
}

.home-page__hero-text .wysiwyg-content p:first-child {
    max-width: 458px;
    font-family: var(--pk-manrope);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    margin-bottom: 20px;
}

.home-page__hero-text .wysiwyg-content p {
    max-width: 578px;
    font-family: var(--pk-inter);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .home-page__hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
    }

    .home-page__hero-text {
        flex: 1 1 761px;
        min-width: 0;
        max-width: 761px;
    }

    /* Блок карточек 553px: 264 + 25 + 264. Начинается на 8px выше H1 */
    .home-page__hero-cards {
        flex: 0 0 553px;
        width: 553px;
        display: grid;
        grid-template-columns: repeat(2, 264px);
        gap: 46px 25px;
        margin: -8px 0 0;
    }

    .home-page__hero-cards > [class*="col-"] {
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
    }
}

/* Поля карточки: слева 8 (под иконку), сверху 14, справа 22, снизу 18.
   Текст сдвигается на 9px вправо, чтобы встать на 17, как в макете. */
.pk-highlight-card {
    display: grid;
    grid-template-columns: 60px 1fr;
    column-gap: 6px;
    row-gap: 11px;
    align-items: center;
    min-height: 183px;
    height: 100%;
    background: var(--pk-white);
    border: 0;
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16.1px rgba(0, 0, 0, 0.1);
    padding: 14px 22px 18px 8px;
    margin-bottom: 0;
}

.pk-highlight-card__icon {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 60px;
    height: 60px;
    margin: 0;
    object-fit: contain;
}

.pk-highlight-card strong {
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin: 0;
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #000;
}

.pk-highlight-card > span:not(.pk-highlight-card__icon) {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    padding-left: 9px;
    max-width: 224px;
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #000;
}


/* =============================================================
   2. ПАНЕЛИ СЕКЦИЙ
   Макет: подложка 1340 при контенте 1240 — выходит за колонку
   на 50px с каждой стороны. Внутренние поля 50px.
   ============================================================= */

.home-page__brokers,
.home-page__promo-codes,
.home-page__articles {
    background: var(--pk-panel);
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow-panel);
    padding: 50px;
    margin-left: -50px;
    margin-right: -50px;
    margin-bottom: 50px;
}

.home-page__methodology,
.home-page__trust {
    padding: 0;
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Ритм заголовков: эйбрау → h2 22px, h2 → подзаголовок 16px,
   подзаголовок → контент 36px, h2 → контент без подзаголовка 34px */
.pk-section-label {
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pk-blue);
    line-height: 1.4;
    margin-bottom: 22px;
}

.home-page__brokers .h2,
.home-page__promo-codes .h2,
.home-page__articles .h2,
.home-page__methodology .h2,
.home-page__trust .h2 {
    margin-top: 0;
    margin-bottom: 16px;
}

.pk-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pk-section-head .h1,
.pk-section-head .h2 {
    margin: 0;
}

.pk-section-more {
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--pk-blue);
    text-decoration: none;
    white-space: nowrap;
}

.pk-section-more::after {
    content: " →";
}

.pk-section-more:hover,
.pk-section-more:focus {
    color: var(--pk-blue);
    text-decoration: underline;
}

.pk-section-subtitle {
    font-family: var(--pk-inter);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    max-width: 660px;
    margin-top: 0;
    margin-bottom: 36px;
}

/* В секции статей подзаголовка нет: до карточек 34px */
.home-page__articles .pk-section-head {
    margin-bottom: 34px;
}


/* =============================================================
   3. ТАБЛИЦА СРАВНЕНИЯ
   Макет: шапка 1240×53, строка 1240×85, поля 24px,
   логотип 60px, до текста 16px, кнопки 89×40.
   ============================================================= */

/* Из кода макета: шапка (1240×53) и каждая строка — отдельные белые плашки
   со своей тенью: шапка 0 0 16px rgba(0,0,0,.1), строки .05, последняя .06.
   Тень задаётся строке целиком через отдельный слой (::after у первой ячейки
   растянуть нельзя), поэтому используем box-shadow на ячейках только сверху
   и снизу — по бокам её перекрывают соседние ячейки, швов не видно. */
/* .table-responsive обрезает всё за краями ради горизонтальной прокрутки —
   вместе с тенью таблицы. На широких экранах прокрутка не нужна,
   поэтому обрезку снимаем и тень видно по всему контуру. */
.home-page__brokers .common-table-list__responsive {
    margin: 0;
    width: 100%;
}

@media (min-width: 1200px) {
    .home-page__brokers .common-table-list__responsive,
    .home-page__brokers .table-responsive {
        overflow: visible;
    }
}

/* Скругление и тень на одном элементе — обёртке. Раньше тень висела
   на строке, а скругление на ячейках: тень рисовалась по прямоугольнику
   и её квадратный угол торчал из-под скруглённой ячейки серым уголком. */
.home-page__brokers .common-table-list__responsive-container {
    padding: 0;
    background: var(--pk-white);
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.home-page__brokers .common-table-list__table {
    border-collapse: separate;
    /* В макете плашки стоят вплотную и даже перекрывают друг друга на 15px
       (шапка 841…894, строки с шагом 85 при высоте 100). Зазора нет —
       разделяет их только тень. */
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Шапка — плашка со скруглением 16 и тенью 0.1.
   Тень на строке, а не на ячейках: на ячейках она складывается
   на стыках и даёт серую кайму. */
/* Шапка — своя плашка с тенью 0.1, как в макете */
.home-page__brokers .common-table-list__table thead tr {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.home-page__brokers .common-table-list__table thead th {
    height: 53px;
    padding: 0 12px;
    vertical-align: middle;
    text-align: left;
    background: var(--pk-white);
    box-shadow: none;
    border: 0;
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #000;
    text-transform: none;
}

.home-page__brokers .common-table-list__table thead th:first-child {
    padding-left: 24px;
}

.home-page__brokers .common-table-list__table thead th:last-child {
    padding-right: 24px;
}

/* Строки — такие же плашки, тень 0.05, у последней 0.06 */
.home-page__brokers .common-table-list__item,
.home-page__brokers .common-table-list__table_striped tr.common-table-list__item:nth-child(2n) {
    background: transparent;
}

/* В макете строки разделены не линией, а собственной мягкой тенью
   каждой плашки (0 0 16px rgba(0,0,0,.05)). Тень вешаем на строку целиком:
   на ячейках она расходится вбок и рисует вертикальные полосы. */
.home-page__brokers .common-table-list__item {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);
}

.home-page__brokers .common-table-list__item:last-of-type {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.06);
}

.home-page__brokers .common-table-list__item > td {
    height: 85px;
    padding: 12px;
    vertical-align: middle;
    background: var(--pk-white);
    box-shadow: none;
}

.home-page__brokers .common-table-list__item > td:first-child {
    padding-left: 24px;
}

.home-page__brokers .common-table-list__item > td:last-child {
    padding-right: 24px;
}



/* Кнопки Review и Website в макете слева, а не по центру */
.home-page__brokers .common-table-list__item-td.text-center {
    text-align: left;
}

/* Ширины колонок — доли от 1240 по координатам макета */
.pk-exch__cell-name,
.home-page__brokers .common-table-list__th:first-child {
    width: 19.7%;
}

.brokers-index-list-item__col_best-for {
    width: 14.8%;
}

.brokers-index-list-item__col_turnover {
    width: 9%;
}

.brokers-index-list-item__col_clients {
    width: 9.1%;
}

.brokers-index-list-item__col_active-clients {
    width: 12.7%;
}

.brokers-index-list-item__col_bonus {
    width: 15.2%;
}

.brokers-index-list-item__col_link {
    width: 8.5%;
}

.brokers-index-list-item__col_website {
    width: 11%;
}

.pk-exch__name {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pk-exch__logo {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.pk-exch__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pk-exch__name-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pk-exch__title {
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #000;
}

.pk-exch__score {
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #000;
    white-space: nowrap;
}

/* Чипы «Best for»: 12px, фон #f3f6fe, радиус 6, зазор 5px */
.pk-exch__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
}

.pk-exch__chip {
    display: inline-block;
    max-width: 100%;
    background: var(--pk-chip);
    border-radius: var(--pk-radius-chip);
    padding: 2px 6px;
    font-family: var(--pk-inter);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #000;
    white-space: normal;
    overflow-wrap: anywhere;
}

.brokers-index-list-item__col_turnover strong,
.brokers-index-list-item__col_clients strong,
.brokers-index-list-item__col_active-clients strong,
.brokers-index-list-item__col_bonus strong {
    display: block;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #000;
}

.pk-exch__sub {
    display: block;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #000;
}

/* Кнопки 89×40, радиус 10: Review контурная, Website с заливкой */
.common-table-list__item-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 89px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--pk-radius-btn);
    background: var(--pk-white);
    border: 1px solid rgba(2, 80, 232, 0.2);
    color: var(--pk-blue);
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.common-table-list__item-link:hover {
    background: var(--pk-chip);
    color: var(--pk-blue);
    text-decoration: none;
}

.common-table-list__item-link_external {
    background: var(--pk-blue);
    border-color: var(--pk-blue);
    color: var(--pk-white);
}

.common-table-list__item-link_external:hover {
    background: #0142c4;
    border-color: #0142c4;
    color: var(--pk-white);
}


/* Примечание под таблицей: текст 14px с кружком «i» 18px,
   справа ссылка. Макет: текст y=1346 ширина 635, кружок 18px. */
/* Десктоп: примечание слева, ссылка справа в одну строку.
   Мобильный: примечание — голубая плашка, ссылка — белая под ней. */
.pk-table-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-top: 27px;
    padding: 0 24px;
}

.pk-table-note {
    flex: 1 1 auto;
    min-width: 0;
}

.pk-table-note__text {
    position: relative;
    max-width: 635px;
    margin: 0;
    padding-left: 34px;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #000;
}

.pk-table-note__mark {
    position: absolute;
    left: 0;
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--pk-blue);
    border-radius: 70px;
    background: var(--pk-chip);
    color: var(--pk-blue);
    font-family: var(--pk-inter);
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
}

.pk-table-foot__link {
    flex: 0 0 auto;
    padding-top: 2px;
}


/* =============================================================
   4. МЕТОДОЛОГИЯ
   Макет: карточка 393×195, поля 20px, номер 29×28,
   до заголовка 20px, текст на 65px от верха, зазор сетки 30px.
   ============================================================= */

@media (min-width: 992px) {
    .home-page__methodology .row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin: 0;
    }

    .home-page__methodology .row > [class*="col-"] {
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
        margin-bottom: 0;
    }
}

.pk-method-card {
    min-height: 195px;
    background: var(--pk-white);
    border: 0;
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow);
    padding: 20px;
    height: 100%;
    margin-bottom: 0;
}

/* Номер 29×28 в (20,20), заголовок в (69,20), текст в (20,65) */
.pk-method-card__heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 17px;
}

.pk-method-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 28px;
    border-radius: var(--pk-radius-chip);
    background: var(--pk-blue);
    color: var(--pk-white);
    font-family: var(--pk-inter);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.pk-method-card h3 {
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #000;
    margin: 0;
}

.pk-method-card p {
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    margin-bottom: 0;
}


/* =============================================================
   5. WHY TRUST US
   Макет: карточка 310×231, иконка 40px в (16,18),
   заголовок справа от неё, текст на 73px от верха.
   ============================================================= */

@media (min-width: 992px) {
    /* В макете карточки наезжают друг на друга на 17–22px, тень боковая
       (7px 0 16px) и уходит вправо, а следующая карточка её перекрывает.
       Отсюда нулевой зазор, отрицательный отступ и растущий z-index. */
    .home-page__trust .row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        margin: 0;
    }

    .home-page__trust .row > [class*="col-"] {
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
        margin-bottom: 0;
        position: relative;
    }

    /* Карточки на 100/393/698/1013 при ширинах 310/327/332/327: правый край
       каждой лежит на сетке 310px, а левый заходит под соседнюю на 17/22/17.
       Содержимое при этом остаётся на сетке — в макете у этих карточек
       увеличено левое поле: 41, 46, 41 вместо 24. */
    .home-page__trust .row > [class*="col-"]:nth-child(2) {
        margin-left: -17px;
    }

    .home-page__trust .row > [class*="col-"]:nth-child(2) .pk-trust-card {
        padding-left: 41px;
    }

    .home-page__trust .row > [class*="col-"]:nth-child(3) {
        margin-left: -22px;
    }

    .home-page__trust .row > [class*="col-"]:nth-child(3) .pk-trust-card {
        padding-left: 46px;
    }

    .home-page__trust .row > [class*="col-"]:nth-child(4) {
        margin-left: -17px;
    }

    .home-page__trust .row > [class*="col-"]:nth-child(4) .pk-trust-card {
        padding-left: 41px;
    }

    /* В Figma левая карточка лежит поверх правой, поэтому её тень
       падает вправо и видна. z-index убывает слева направо. */
    .home-page__trust .row > [class*="col-"]:nth-child(1) { z-index: 4; }
    .home-page__trust .row > [class*="col-"]:nth-child(2) { z-index: 3; }
    .home-page__trust .row > [class*="col-"]:nth-child(3) { z-index: 2; }
    .home-page__trust .row > [class*="col-"]:nth-child(4) { z-index: 1; }
}

/* Карточка trust: 310×231, иконка 40px в (16,18), заголовок рядом в (72,25),
   текст на всю ширину в (24,73) */
.pk-trust-card {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
    row-gap: 15px;
    align-items: center;
    min-height: 231px;
    align-content: start;
    text-align: left;
    padding: 18px 24px 24px;
    background: var(--pk-white);
    border: 0;
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow-side);
    height: 100%;
    margin-bottom: 0;
}

.pk-trust-card__icon {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    object-fit: contain;
}

.pk-trust-card h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #000;
}

/* Строка «50% OFF → 20% real.»: Manrope ExtraBold 16px,
   первая часть #e43546, вторая #149455 */
.pk-trust-card__claim {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    margin: 0 0 4px;
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.pk-trust-card__claim span:first-child {
    color: var(--pk-red);
}

.pk-trust-card__claim span:last-child {
    color: var(--pk-green-text);
}

.pk-trust-card p {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    margin-bottom: 0;
}

/* Ниже правила выше: иначе абзац возвращается во вторую строку
   и накладывается на «50% OFF → 20% real.» */
.pk-trust-card__claim {
    grid-row: 2;
}

.pk-trust-card__claim ~ p {
    grid-row: 3;
}


/* =============================================================
   6. ПРОМО-КАРТОЧКИ
   Макет: карточка 391×366, поля 24px по бокам и 15px сверху,
   логотип 60px, название 30px, бейдж справа, поле кода и кнопка
   343×45, разделитель через 18px, зазор сетки 34px.
   ============================================================= */

@media (min-width: 992px) {
    .home-page__promo-codes .promo-codes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 34px;
        margin: 0;
    }

    .home-page__promo-codes .promo-codes > [class*="col-"] {
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
        margin-bottom: 0;
    }
}

.pk-promo-card {
    --pk-promo-color: var(--pk-blue);

    position: relative;
    min-height: 366px;
    height: 100%;
    background: var(--pk-white);
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow);
    padding: 15px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Уголок 55×55 со звездой (макет: цвет биржи, белая звезда) */
.pk-promo-card__corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 55px;
    height: 55px;
    background: var(--pk-promo-color);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 7px 7px 0 0;
    color: var(--pk-white);
}

/* Логотип 60×60 в (15,15), название в (83,22), бейдж в (249,30),
   текст бонуса на 87 → от головы карточки 12px */
.pk-promo-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    margin-bottom: 12px;
}

.pk-promo-card__logo {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    margin-left: -9px;
    align-self: center;
}

.pk-promo-card__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pk-promo-card__title {
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--pk-inter);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Бейдж 93×25 в правой части строки, ниже уголка с оценкой */
/* Макет: бейдж 93×25 на (249,30) при карточке 391 и поле 24
   → 25px от правого поля и 15px от верха шапки, иначе он
   заезжает под уголок со звездой */
.pk-promo-card__verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 93px;
    height: 25px;
    margin-left: auto;
    margin-right: 25px;
    margin-top: 15px;
    align-self: flex-start;
    background: var(--pk-green-soft);
    border: 1px solid var(--pk-green);
    border-radius: var(--pk-radius-chip);
    color: var(--pk-green);
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    padding: 2px 6px;
    white-space: nowrap;
}

.pk-promo-card__text {
    flex-grow: 1;
    font-family: var(--pk-inter);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #000;
    margin-bottom: 20px;
}

.pk-promo-card__code {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 45px;
    padding: 0 46px;
    background: var(--pk-field);
    border: 1px solid var(--pk-field-border);
    border-radius: var(--pk-radius-btn);
}

.pk-promo-card__code-value {
    font-family: var(--pk-inter);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #000;
    overflow-wrap: anywhere;
}

.pk-promo-card__code-icon {
    position: absolute;
    right: 26px;
    color: #6b7280;
    flex-shrink: 0;
}

.pk-promo-card__button {
    margin-top: 14px;
}

.pk-promo-card__copy.btn,
.pk-promo-card__copy {
    display: block;
    width: 100%;
    height: 45px;
    background: var(--pk-promo-color);
    border: 0;
    border-radius: var(--pk-radius-btn);
    color: var(--pk-white);
    font-family: var(--pk-inter);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: none;
    transition: filter 0.15s;
}

.pk-promo-card__copy:hover,
.pk-promo-card__copy:focus {
    color: var(--pk-white);
    filter: brightness(0.92);
}

/* Подсветка при нажатии из Bootstrap — в макете её нет */
.pk-promo-card__copy:focus,
.pk-promo-card__copy:active,
.pk-promo-card__copy.focus {
    box-shadow: none;
    outline: none;
}

.pk-promo-card__more {
    text-align: center;
    margin-top: 14px;
}

.pk-promo-card__more a {
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--pk-blue);
    text-decoration: none;
}

.pk-promo-card__more a:hover {
    text-decoration: underline;
}

.pk-promo-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #e9edf5;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #000;
}

/* Значок тега 20px и текст в 26px от края карточки → зазор 6px;
   значок даты 15×14, текст в 21px от него → зазор 6px */
.pk-promo-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pk-promo-card__meta-item img {
    flex: 0 0 auto;
    object-fit: contain;
}

.pk-promo-card__meta svg {
    color: #6b7280;
    flex-shrink: 0;
}


/* =============================================================
   7. СТАТЬИ
   Макет: карточка 290×231, картинка 290×153,
   заголовок 16px bold с отступом 20px, зазор сетки 27px.
   ============================================================= */

/* Блок статей обёрнут в simple-scroller: он задаёт карточкам жёсткие
   240px, ставит .__inner в nowrap с width:max-content и режет всё лишнее
   через overflow:hidden. В макете скроллера нет — обычная сетка,
   поэтому на десктопе его правила отключаем. */
@media (min-width: 992px) {
    .home-page__articles .simple-scroller__scroll {
        overflow: visible;
        padding: 0;
        margin: 0;
    }

    .home-page__articles .simple-scroller__inner {
        width: auto;
        flex-wrap: wrap;
    }

    .home-page__articles .simple-scroller__item {
        flex: none;
        width: auto;
        max-width: none;
        margin: 0;
    }

    .home-page__articles .simple-scroller__arrow {
        display: none;
    }
}

@media (min-width: 992px) {
    /* Карточки 290×231 на 93/412/731/1050 → зазор 29px.
       Четыре по 290 плюс три зазора = 1247 при контенте 1240,
       поэтому блок выходит за края панели на 3-4px с каждой стороны. */
    .home-page__articles .articles-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 290px));
        justify-content: space-between;
        gap: 29px;
        margin: 0 -4px;
    }

    .home-page__articles .articles-list > [class*="col-"] {
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
        margin-bottom: 0;
    }
}

.home-page__articles .articles-list-item__link {
    display: block;
    height: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    background: var(--pk-white);
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow);
    overflow: hidden;
    text-decoration: none;
}

.home-page__articles .articles-list-item__link:hover,
.home-page__articles .articles-list-item__link:focus {
    text-decoration: none;
}

/* Старое правило растягивало img абсолютом на всю ссылку и накрывало заголовок */
/* Картинка 290×153, скругление только сверху */
.home-page__articles .articles-list-item__image {
    position: relative;
    margin: 0;
    padding-bottom: 0;
    aspect-ratio: 290 / 153;
    overflow: hidden;
    border-top-left-radius: var(--pk-radius);
    border-top-right-radius: var(--pk-radius);
}

.home-page__articles .articles-list-item__image img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Заголовок: отступ 20px от краёв карточки, ширина 214, Inter Bold 16/1.4,
   межбуквенное 0.64px (0.04em) */
.home-page__articles .articles-list-item__title {
    padding: 20px;
    max-width: 254px;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}


/* =============================================================
   8. FAQ и блоки авторов
   В макете главной их нет — оставлены в единой стилистике
   для остальных страниц сайта.
   ============================================================= */

.pk-faq-item {
    background: var(--pk-white);
    border: 0;
    border-radius: var(--pk-radius);
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--pk-shadow);
}

.pk-faq-item details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #000;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.2s;
}

.pk-faq-item details summary:hover {
    background: var(--pk-chip);
}

.pk-faq-item details summary::-webkit-details-marker {
    display: none;
}

.pk-faq-item details summary::after {
    content: "+";
    font-family: var(--pk-inter);
    font-size: 22px;
    font-weight: 400;
    color: var(--pk-blue);
    flex-shrink: 0;
    margin-left: 16px;
}

.pk-faq-item details[open] summary::after {
    content: "\2212";
}

.pk-faq-item__answer {
    padding: 0 20px 18px;
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
}

.pk-faq-item__answer p {
    margin-bottom: 0;
}

.pk-faq-item__answer a {
    color: var(--pk-blue);
    text-decoration: underline;
}

.pk-faq-item__answer a:focus,
.pk-faq-item__answer a:hover {
    text-decoration: none;
}

.pk-affiliate-note {
    padding: 16px 20px;
    background: var(--pk-white);
    border-left: 3px solid var(--pk-amber);
    border-radius: 0 var(--pk-radius) var(--pk-radius) 0;
    font-family: var(--pk-inter);
    font-size: 14px;
    color: #000;
    line-height: 1.5;
    box-shadow: var(--pk-shadow-soft);
}

.pk-author-bio {
    background: var(--pk-white);
    border: 0;
    border-radius: var(--pk-radius);
    padding: 28px 24px;
    box-shadow: var(--pk-shadow);
}

.pk-author-bio__header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.pk-author-bio__avatar {
    flex: 0 0 64px;
    margin-right: 18px;
}

.pk-author-bio__avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.pk-author-bio__avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pk-blue);
    color: var(--pk-white);
    font-family: var(--pk-manrope);
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.pk-author-bio__name {
    font-family: var(--pk-manrope);
    font-size: 22px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.02em;
    color: #000;
    line-height: 1.4;
    margin: 0 0 4px;
}

.pk-author-bio__role {
    font-family: var(--pk-inter);
    font-size: 14px;
    color: var(--pk-blue);
    font-weight: 500;
}

.pk-author-bio__text {
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 500;
    color: #000;
    line-height: 1.4;
}

.pk-author-bio__text p {
    margin-bottom: 12px;
}

.pk-author-bio__text p:last-child {
    margin-bottom: 0;
}

.pk-author-bio__contact {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e9e9e9;
}

.pk-author-bio__contact a {
    color: var(--pk-blue);
    text-decoration: none;
    font-family: var(--pk-inter);
    font-size: 14px;
    margin-right: 20px;
    border-bottom: 1px solid rgba(2, 80, 232, 0.3);
}

.pk-author-bio__contact a:hover {
    border-bottom-color: transparent;
}

.pk-author-box {
    display: flex;
    align-items: center;
    background: var(--pk-white);
    border: 0;
    border-radius: var(--pk-radius);
    padding: 16px 20px;
    margin-top: 30px;
    box-shadow: var(--pk-shadow);
}

.pk-author-box__avatar {
    flex: 0 0 48px;
    margin-right: 14px;
}

.pk-author-box__avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pk-blue);
    color: var(--pk-white);
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pk-author-box__info {
    flex: 1;
}

.pk-author-box__label {
    font-family: var(--pk-inter);
    font-size: 11px;
    color: #414141;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.pk-author-box__name {
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 800;
    color: #000;
    text-transform: none;
}

.pk-author-box__name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(2, 80, 232, 0.3);
}

.pk-author-box__name a:hover {
    border-bottom-color: transparent;
}

.pk-author-box__desc {
    font-family: var(--pk-inter);
    font-size: 12px;
    color: #414141;
    margin-top: 2px;
}


/* =============================================================
   9. АДАПТИВ
   Мобильного макета пока нет — ниже 992px значения подобраны
   так, чтобы сохранить пропорции десктопа на узком экране.
   Будут пересчитаны, когда появится мобильный фрейм.
   ============================================================= */

@media (max-width: 1339.98px) {
    .home-page__brokers,
    .home-page__promo-codes,
    .home-page__articles {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 1199.98px) {
    .home-page__brokers .common-table-list__table {
        min-width: 1080px;
        table-layout: auto;
    }
}

@media (max-width: 991.98px) {
    .home-page__hero {
        margin-bottom: 32px;
    }

    .home-page__hero-text .wysiwyg-content p:first-child {
        font-size: 19px;
        margin-bottom: 24px;
    }

    .home-page__hero-cards {
        margin-top: 24px;
    }

    .home-page__brokers,
    .home-page__promo-codes,
    .home-page__articles {
        padding: 32px 24px;
        margin-bottom: 32px;
    }

    .home-page__methodology,
    .home-page__trust {
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .pk-section-label {
        margin-bottom: 14px;
    }

    .pk-section-subtitle {
        margin-bottom: 24px;
    }

    .home-page__articles .pk-section-head {
        margin-bottom: 24px;
    }

    .pk-highlight-card,
    .pk-method-card,
    .pk-trust-card,
    .pk-promo-card {
        min-height: 0;
    }

    .pk-highlight-card,
    .pk-method-card,
    .pk-trust-card,
    .promo-codes-item,
    .articles-list-item {
        margin-bottom: 16px;
    }
}

@media (max-width: 767.98px) {
    .pk-section-label {
        font-size: 16px;
    }

    .pk-section-subtitle,
    .pk-highlight-card,
    .pk-method-card p,
    .pk-trust-card p {
        font-size: 15px;
    }

    .pk-promo-card__title {
        font-size: 24px;
    }

    .pk-promo-card__text {
        font-size: 16px;
    }

    .home-page__brokers,
    .home-page__promo-codes,
    .home-page__articles {
        padding: 20px 14px 24px;
        border-radius: 12px;
    }
}


/* =============================================================
   10. МОБИЛЬНАЯ ВЕРСИЯ
   Собрано по макету «Главная моб.» (393px, контент 345, поля 24).

   Общее по блокам:
     эйбрау     Manrope ExtraBold 14px/1.4, tracking 0.56, #0250e8
     H2         Manrope Bold 20px/1.4, tracking 0.8
     подзагол.  Inter Regular 14px/1.4, tracking 0.56, ширина 340
     карточки   345 ширина, поля 24, тень 0 0 16px rgba(0,0,0,.1)
     зазор карточек 12px

   Подложка #f5f8fc есть только у hero, METHODOLOGY и WHY TRUST US,
   и она во всю ширину экрана (393). У COMPARE, REFERRAL CODES
   и GUIDES фона нет.
   ============================================================= */

@media (max-width: 991.98px) {

    /* Поля контента 24px (макет: 393 − 345 = 48 / 2) */
    .home-page {
        --pk-gutter: 24px;
    }

    .content-center-col_home > .home-page {
        padding-left: 0;
        padding-right: 0;
    }

    /* --- ЗАГОЛОВКИ СЕКЦИЙ --- */
    .pk-section-label {
        font-size: 14px;
        letter-spacing: 0.04em;
        margin-bottom: 8px;
    }

    .home-page__brokers .h2,
    .home-page__promo-codes .h2,
    .home-page__articles .h2,
    .home-page__methodology .h2,
    .home-page__trust .h2 {
        font-size: 20px;
        line-height: 1.4;
        letter-spacing: 0.04em;
        margin-bottom: 16px;
    }

    .pk-section-subtitle {
        max-width: 340px;
        font-size: 14px;
        line-height: 1.4;
        letter-spacing: 0.04em;
        margin-bottom: 24px;
    }

    .pk-section-head {
        margin-bottom: 16px;
    }

    /* Ссылка «View all» в макете — отдельная белая плашка 345×32
       под карточками. В разметке она внутри заголовка, поэтому
       заголовок раскрываем (display: contents) и уводим ссылку
       в конец секции через order — без дублирования разметки. */
    .home-page__promo-codes,
    .home-page__articles {
        display: flex;
        flex-direction: column;
    }

    .home-page__promo-codes .pk-section-head,
    .home-page__articles .pk-section-head {
        display: contents;
    }

    .home-page__promo-codes .pk-section-more,
    .home-page__articles .pk-section-more {
        order: 99;
    }

    /* --- HERO --- */
    .home-page__hero {
        margin-bottom: 32px;
    }

    .home-page__hero-text .h1 {
        max-width: none;
        font-size: 26px;
        line-height: 1.3;
        letter-spacing: 0.02em;
        margin-bottom: 18px;
    }

    .home-page__hero-text .wysiwyg-content p:first-child {
        max-width: none;
        font-family: var(--pk-manrope);
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.04em;
        margin-bottom: 18px;
    }

    .home-page__hero-text .wysiwyg-content p {
        max-width: none;
        font-family: var(--pk-inter);
        font-size: 13px;
        line-height: 1.4;
        letter-spacing: 0.04em;
    }

    .home-page__hero-cards {
        display: block;
        width: auto;
        margin: 24px 0 0;
    }

    .home-page__hero-cards > [class*="col-"] {
        max-width: none;
        padding: 0;
    }

    /* Карточка hero: иконка 40px в (11,16), заголовок в (63,27),
       текст в (20,64.5) — отсчёт от края карточки */
    .pk-highlight-card {
        grid-template-columns: 40px 1fr;
        column-gap: 12px;
        row-gap: 8px;
        min-height: 0;
        padding: 16px 20px 20px 11px;
        margin-bottom: 12px;
    }

    .pk-highlight-card__icon {
        width: 40px;
        height: 40px;
    }

    /* В макете у первых двух карточек заголовок 16 и текст 14,
       у третьей и четвёртой — 18 и 16 */
    .pk-highlight-card strong {
        font-size: 16px;
        letter-spacing: 0.04em;
    }

    .pk-highlight-card > span:not(.pk-highlight-card__icon) {
        max-width: none;
        padding-left: 9px;
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    .home-page__hero-cards > [class*="col-"]:nth-child(3) .pk-highlight-card strong,
    .home-page__hero-cards > [class*="col-"]:nth-child(4) .pk-highlight-card strong {
        font-size: 18px;
    }

    .home-page__hero-cards > [class*="col-"]:nth-child(3) .pk-highlight-card > span:not(.pk-highlight-card__icon),
    .home-page__hero-cards > [class*="col-"]:nth-child(4) .pk-highlight-card > span:not(.pk-highlight-card__icon) {
        font-size: 16px;
    }

    /* --- ПАНЕЛИ --- */
    /* В макете фон только у hero, METHODOLOGY и WHY TRUST US,
       и он во всю ширину экрана */
    .home-page__brokers,
    .home-page__promo-codes,
    .home-page__articles {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 32px;
    }

    .home-page__methodology,
    .home-page__trust {
        position: relative;
        margin-top: 32px;
        margin-bottom: 32px;
        padding: 32px 0;
    }

    .home-page__methodology::before,
    .home-page__trust::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background: var(--pk-panel);
        z-index: -1;
    }

    /* --- КАРТОЧКИ БИРЖ (вместо таблицы) --- */
    .pk-exch-cards {
        margin-bottom: 24px;
    }

    .pk-exch-card {
        background: var(--pk-white);
        border-radius: var(--pk-radius);
        box-shadow: 0 0 16.1px rgba(0, 0, 0, 0.1);
        padding: 14px 14px 20px;
        margin-bottom: 12px;
    }

    /* Логотип 60px в (8,14), название в (76,23) */
    .pk-exch-card__head {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pk-exch-card__logo {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
    }

    .pk-exch-card__logo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .pk-exch-card__name {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .pk-exch-card__title {
        font-family: var(--pk-inter);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.02em;
        color: #000;
    }

    .pk-exch-card__score {
        font-family: var(--pk-inter);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.02em;
        color: #000;
    }

    /* Чипы 10px на y=76 от верха карточки */
    .pk-exch-card__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
        padding-left: 62px;
    }

    .pk-exch-card__chips .pk-exch__chip {
        font-size: 10px;
        letter-spacing: 0.02em;
        padding: 2px 6px;
    }

    /* Линия на y=109, четыре пункта в две колонки */
    .pk-exch-card__stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 14px;
        margin-top: 15px;
        padding-top: 14px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .pk-exch-card__stat {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        min-width: 0;
    }

    .pk-exch-card__stat-icon {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    .pk-exch-card__stat-text {
        min-width: 0;
        font-family: var(--pk-inter);
        font-size: 12px;
        line-height: 1.5;
        letter-spacing: 0.02em;
        color: #000;
    }

    .pk-exch-card__stat-text strong {
        display: block;
        font-weight: 700;
    }

    .pk-exch-card__stat-text span {
        display: block;
        font-weight: 500;
    }

    /* Кнопки 151×45, радиус 8, зазор 15px */
    .pk-exch-card__buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 16px;
    }

    .pk-exch-card__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 45px;
        border-radius: 8px;
        background: var(--pk-white);
        border: 1px solid rgba(2, 80, 232, 0.2);
        font-family: var(--pk-inter);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.02em;
        color: var(--pk-blue);
        text-decoration: none;
    }

    .pk-exch-card__btn:hover,
    .pk-exch-card__btn:focus {
        text-decoration: none;
        color: var(--pk-blue);
    }

    .pk-exch-card__btn_primary {
        background: var(--pk-blue);
        border-color: var(--pk-blue);
        color: var(--pk-white);
    }

    .pk-exch-card__btn_primary:hover,
    .pk-exch-card__btn_primary:focus {
        color: var(--pk-white);
    }

    /* --- ПРИМЕЧАНИЕ ПОД БИРЖАМИ --- */
    /* Макет: плашка 345×62, фон #f2f5fd, рамка rgba(2,80,232,.1),
       радиус 8, кружок «i» 18px, текст Inter Medium 8px */
    /* Макет моб.: плашка 345×62 и отдельная белая 345×32 под ней */
    .pk-table-foot {
        display: block;
        margin-top: 24px;
        padding: 0;
    }

    .pk-table-note {
        display: block;
        background: #f2f5fd;
        border: 1px solid rgba(2, 80, 232, 0.1);
        border-radius: 8px;
        padding: 17px 20px;
        margin-top: 0;
    }

    .pk-table-note__text {
        max-width: none;
        padding-left: 30px;
        font-size: 10px;
        line-height: 1.4;
        letter-spacing: 0.04em;
    }

    .pk-table-note__mark {
        top: 0;
        width: 18px;
        height: 18px;
        font-size: 9px;
    }

    /* Ссылка «See full comparison» — белая плашка 345×32 */
    .pk-table-foot__link,
    .home-page__promo-codes .pk-section-more,
    .home-page__articles .pk-section-more {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        margin-top: 12px;
        padding: 0;
        background: var(--pk-white);
        border-radius: 8px;
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    /* --- МЕТОДОЛОГИЯ --- */
    .home-page__methodology .row {
        display: block;
        margin: 0;
    }

    .home-page__methodology .row > [class*="col-"] {
        max-width: none;
        padding: 0;
    }

    /* Карточка 345, радиус 10, номер 22×22 в (14,14), текст в (14,50) */
    .pk-method-card {
        min-height: 0;
        border-radius: 10px;
        padding: 14px;
        margin-bottom: 12px;
    }

    .pk-method-card__heading {
        gap: 20px;
        margin-bottom: 14px;
    }

    .pk-method-card__number {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        font-family: var(--pk-manrope);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .pk-method-card h3 {
        font-size: 16px;
        letter-spacing: 0.04em;
    }

    .pk-method-card p {
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    /* --- WHY TRUST US --- */
    .home-page__trust .row {
        display: block;
        margin: 0;
    }

    /* В макете карточки наезжают друг на друга по вертикали:
       4948+130=5078 при начале следующей на 5052 → нахлёст 26px,
       дальше 48 и 24. Верхняя лежит поверх нижней и роняет на неё тень,
       поэтому z-index убывает сверху вниз.
       Высоты у нас зависят от длины текста, поэтому нахлёст единый — 24px. */
    .home-page__trust .row > [class*="col-"] {
        position: relative;
        max-width: none;
        padding: 0;
        margin-left: 0;
    }

    .home-page__trust .row > [class*="col-"] + [class*="col-"] {
        margin-top: -24px;
    }

    .home-page__trust .row > [class*="col-"]:nth-child(1) { z-index: 4; }
    .home-page__trust .row > [class*="col-"]:nth-child(2) { z-index: 3; }
    .home-page__trust .row > [class*="col-"]:nth-child(3) { z-index: 2; }
    .home-page__trust .row > [class*="col-"]:nth-child(4) { z-index: 1; }

    .home-page__trust .row > [class*="col-"] .pk-trust-card {
        padding-left: 8px;
    }

    /* Карточка 345, радиус 10, иконка 35px в (8,14), заголовок в (56,20) */
    /* Тень: у первой карточки 0 4px 16px (падает вниз, на соседнюю),
       у остальных 0 0 16px — как в макете */
    /* Поля из макета: у первой карточки контент в 14px от верха,
       у остальных в 39px — это нахлёст 24 плюс те же 13px просвета,
       иначе текст прижимается к краю карточки сверху. */
    .pk-trust-card {
        display: grid;
        grid-template-columns: 35px 1fr;
        column-gap: 13px;
        row-gap: 8px;
        min-height: 0;
        border-radius: 10px;
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
        padding: 14px 14px 14px 8px;
        margin-bottom: 0;
    }

    .home-page__trust .row > [class*="col-"] + [class*="col-"] .pk-trust-card {
        padding-top: 37px;
    }

    .home-page__trust .row > [class*="col-"]:first-child .pk-trust-card {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .pk-trust-card__icon {
        width: 35px;
        height: 35px;
        margin-left: 0;
    }

    .pk-trust-card h3 {
        font-size: 16px;
        letter-spacing: 0.04em;
    }

    .pk-trust-card p {
        padding-left: 6px;
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    /* --- ПРОМО-КАРТОЧКИ --- */
    .home-page__promo-codes .promo-codes {
        display: block;
        margin: 0;
    }

    .home-page__promo-codes .promo-codes > [class*="col-"] {
        max-width: none;
        padding: 0;
    }

    /* Карточка 345×338, радиус 10, логотип 50px в (8,14),
       название 25px, поле кода и кнопка 317×45 */
    .pk-promo-card {
        min-height: 0;
        border-radius: 10px;
        padding: 14px;
        margin-bottom: 12px;
    }

    .pk-promo-card__head {
        gap: 10px;
        min-height: 50px;
        margin-bottom: 16px;
    }

    .pk-promo-card__logo {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
        margin-left: -6px;
    }

    .pk-promo-card__title {
        font-size: 25px;
        letter-spacing: 0.02em;
    }

    .pk-promo-card__verified {
        min-width: 82px;
        height: 22px;
        margin-top: 12px;
        margin-right: 24px;
    }

    .pk-promo-card__text {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .pk-promo-card__code-value,
    .pk-promo-card__copy.btn,
    .pk-promo-card__copy {
        font-size: 18px;
    }

    .pk-promo-card__more a {
        font-size: 14px;
    }

    .pk-promo-card__meta {
        font-size: 12px;
    }

    /* --- СТАТЬИ --- */
    .home-page__articles .simple-scroller__scroll {
        overflow: visible;
        padding: 0;
        margin: 0;
    }

    .home-page__articles .articles-list {
        display: block;
        width: auto;
        margin: 0;
    }

    .home-page__articles .articles-list > [class*="col-"],
    .home-page__articles .simple-scroller__item {
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
        margin: 0 0 12px;
    }

    .home-page__articles .simple-scroller__inner {
        width: auto;
        flex-wrap: wrap;
    }

    .home-page__articles .simple-scroller__arrow {
        display: none;
    }

    /* Карточка 345×244, картинка 345×182, заголовок в (21,196) */
    .home-page__articles .articles-list-item__image {
        aspect-ratio: 345 / 182;
    }

    .home-page__articles .articles-list-item__title {
        max-width: none;
        padding: 14px 21px 20px;
        font-size: 14px;
        letter-spacing: 0.04em;
    }
}


/* =============================================================
   11. СТРАНИЦА «СТАТЬИ»
   Собрано по макету «Статьи декстоп» (1440, контент 1240 от x=100).

     крошки    y=122, Inter Medium 14px, tracking 0.28
               «Homepage» чёрный с прозрачностью 70%, стрелка 9px на x=190,
               текущий пункт синий на x=213
     баннер    1240×250 на (100,179), радиус 16, тень 0 0 16px,
               градиент слева направо #fefefe → #eff3fb
     H1        (124,203), ширина 761, Manrope Bold 46px/1.3, tracking 0.92
     подзагол. (124,349), ширина 619, Inter Medium 20px/1.4, tracking 0.8
     картинка  400×234 на (899,187)
     карточки  290×231, колонки 99/416/733/1050 → зазор 27
               ряды 479/734/989 → зазор 24
     страницы  кнопки 29×28, радиус 6, шаг 47 → зазор 18,
               неактивная белая с рамкой rgba(2,80,232,.1) и синим текстом
               Inter SemiBold 18px, активная синяя с белым текстом,
               стрелки 13px в 18px от крайних кнопок
   ============================================================= */

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 40px;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.02em;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #000;
    opacity: 0.7;
    text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: #000;
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--pk-blue);
    opacity: 1;
}

/* Разделитель — стрелка 9px, в макете на 14px от каждого пункта */
.breadcrumb-item + .breadcrumb-item {
    padding-left: 14px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 14px;
    opacity: 0.7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M2.8 1.2l3.4 3.3-3.4 3.3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 9px 9px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.pk-page-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    min-height: 250px;
    padding: 24px;
    border-radius: var(--pk-radius);
    background: linear-gradient(to right, #fefefe, #eff3fb);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
}

.pk-page-hero__text {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 761px;
}

.pk-page-hero__title {
    max-width: 761px;
    margin: 0;
    font-family: var(--pk-manrope);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #000;
}

/* Подзаголовок на 349 при H1 на 203 высотой 120 → 26px */
.pk-page-hero__subtitle {
    max-width: 619px;
    margin: 26px 0 0;
    font-family: var(--pk-inter);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

.pk-page-hero__subtitle p {
    margin: 0;
}

/* Картинка выступает за верхний край баннера на 16px (187 против 203) */
.pk-page-hero__image {
    order: 2;
    display: block;
    flex: 0 0 400px;
    width: 400px;
    margin-top: -16px;
}

.pk-page-hero__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Сетка карточек --- */
@media (min-width: 992px) {
    .articles-index .articles-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 290px));
        justify-content: space-between;
        gap: 24px 27px;
        margin: 0;
    }

    .articles-index .articles-list > [class*="col-"] {
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
        margin: 0;
    }
}

.articles-index .articles-list-item__link {
    display: block;
    height: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    background: var(--pk-white);
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-decoration: none;
}

.articles-index .articles-list-item__link:hover,
.articles-index .articles-list-item__link:focus {
    text-decoration: none;
}

.articles-index .articles-list-item__image {
    position: relative;
    margin: 0;
    padding-bottom: 0;
    aspect-ratio: 290 / 153;
    overflow: hidden;
    border-top-left-radius: var(--pk-radius);
    border-top-right-radius: var(--pk-radius);
}

.articles-index .articles-list-item__image img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.articles-index .articles-list-item__title {
    padding: 20px;
    max-width: 254px;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* --- Пагинация --- */
.articles-index .nav-pagination {
    margin-top: 36px;
}

.articles-index .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.articles-index .page-item {
    margin: 0;
}

.articles-index .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 29px;
    height: 28px;
    padding: 3px 10px;
    border: 1px solid rgba(2, 80, 232, 0.1);
    border-radius: 6px;
    background: var(--pk-white);
    font-family: var(--pk-inter);
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    color: var(--pk-blue);
    text-decoration: none;
}

.articles-index .page-link:hover,
.articles-index .page-link:focus {
    background: var(--pk-chip);
    color: var(--pk-blue);
    text-decoration: none;
}

.articles-index .page-item.active .page-link {
    background: var(--pk-blue);
    border-color: var(--pk-blue);
    color: var(--pk-white);
}

/* Стрелки: в разметке это пустые ссылки по краям списка */
.articles-index .page-item:first-child .page-link,
.articles-index .page-item:last-child .page-link {
    min-width: 13px;
    height: 13px;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

.articles-index .page-item:first-child .page-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M8.2 2.5l-4.4 4 4.4 4' fill='none' stroke='%230250e8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.articles-index .page-item:last-child .page-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M4.8 2.5l4.4 4-4.4 4' fill='none' stroke='%230250e8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.articles-index .page-item.disabled .page-link {
    opacity: 0.35;
    pointer-events: none;
}

/* --- Мобильная версия страницы «Статьи» ---
   Макет «Статьи моб.» (393, контент 345 от x=24):
     крошки    y=90, Inter Medium 12px, tracking 0.24; стрелка 9px на x=97,
               текущий пункт на x=114; до баннера 36px
     баннер    345×214 на (24,141), сплошной #f0f4fb, радиус 10,
               тень 0 0 16px, поля 14px
     H1        (38,155), ширина 319, Manrope Bold 26px/1.3, tracking 0.52
     подзагол. (38,281), ширина 317, Manrope Bold 14px/1.4, tracking 0.56
               → на 24px ниже заголовка
     картинка  147×92 на (210,182): 12px от правого края, 41px от верха
     карточки  345×244 с шагом 256 → зазор 12px, картинка 345×182,
               заголовок в (21,196), ширина 303, Inter Bold 14px/1.4
     страницы  те же кнопки 29×28 с шагом 47, до них 12px
*/
@media (max-width: 991.98px) {
    .breadcrumb {
        margin-top: 26px;
        margin-bottom: 36px;
        font-size: 12px;
        letter-spacing: 0.02em;
    }

    .breadcrumb-item + .breadcrumb-item,
    .breadcrumb-item + .breadcrumb-item::before {
        padding-left: 8px;
        margin-right: 8px;
    }

    .pk-page-hero {
        position: relative;
        display: block;
        min-height: 214px;
        padding: 14px;
        border-radius: 10px;
        background: #f0f4fb;
        overflow: hidden;
        margin-bottom: 32px;
    }

    .pk-page-hero__text {
        position: relative;
        z-index: 1;
        max-width: none;
    }

    /* Заголовок занимает всю доступную ширину: картинка обтекается,
       поэтому строка сама переносится перед ней */
    .pk-page-hero__title {
        max-width: none;
        font-size: 26px;
        line-height: 1.3;
        letter-spacing: 0.02em;
    }

    .pk-page-hero__subtitle {
        max-width: none;
        margin-top: 24px;
        font-family: var(--pk-manrope);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.04em;
    }

    /* Картинка 147×92 в правом верхнем углу: 12px от края, 41px от верха
       баннера при поле 14 → отступы 27 сверху и 12 слева.
       Обтекание вместо абсолюта: с коротким заголовком текст
       иначе оказывался под картинкой. */
    .pk-page-hero__image {
        position: static;
        float: right;
        width: 147px;
        margin: 27px 0 12px 12px;
    }

    .pk-page-hero__text {
        overflow: visible;
    }

    .pk-page-hero::after {
        content: "";
        display: block;
        clear: both;
    }

    .articles-index .articles-list-item {
        margin-bottom: 12px;
    }

    .articles-index .articles-list-item__link {
        min-height: 244px;
    }

    .articles-index .articles-list-item__image {
        aspect-ratio: 345 / 182;
    }

    .articles-index .articles-list-item__title {
        max-width: 303px;
        padding: 14px 21px 8px;
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    .articles-index .nav-pagination {
        margin-top: 12px;
    }
}


/* =============================================================
   12. ВНУТРЕННЯЯ СТРАНИЦА СТАТЬИ
   Собрано по макету «Статья внутреняя» (1440, контент 1240 от x=100).

     H1        (100,179), ширина 610, Manrope Bold 46px/1.3, tracking 0.92
     вступление(100,323), ширина 610, Inter 16px
     мета      y≈480, иконки 30px и 40px, Inter Medium 14px, прозрачность 70%
     баннер    559×324 на (781,179), #f0f4fb, рамка rgba(2,80,232,.1),
               радиус 16, тень 0 0 16px; картинка 476×316
     текст     ширина 731 (100…831), оглавление 310 на x=1030 → зазор 199
     H2        Manrope Bold 22px/1.4, tracking 0.88
     абзац     Inter Regular 16px/1.4, tracking 0.64, между абзацами 16px
     шаги      квадрат 20×20 #0250e8 радиус 6, цифра Inter SemiBold 16px,
               текст в 38px от края
     врезка    731×60, #f5f8fc, рамка rgba(2,80,232,.1), радиус 16,
               текст Inter Medium Italic 16px/1.5 синим, поля 24/18
     список    точка 7px, текст в 21px
     таблица   731, радиус 16, #f5f8fc, рамка rgba(2,80,232,.1),
               чётные строки белые, шапка Manrope Bold 16px,
               ячейки Manrope Medium 14px, поля 25px
     FAQ       панель #f0f4fb с рамкой rgba(2,80,232,.2), радиус 16,
               внутри белые строки с той же рамкой
     оценка    панель 731×214 #f0f4fb, звёзды 209×29, аватар 66px,
               имя Manrope Bold 18px, должность Inter 16px
     оглавление 310×274, #f0f4fb, рамка rgba(2,80,232,.2), радиус 16,
               заголовок Manrope Bold 18px, пункты Inter Medium 16px
               с прозрачностью 70%, активный синий SemiBold, шаг 33px
   ============================================================= */

/* --- Шапка статьи --- */
.article-show__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 71px;
    margin-bottom: 50px;
}

.article-show__hero-text {
    flex: 1 1 610px;
    min-width: 0;
    max-width: 610px;
}

.article-show__hero h1 {
    max-width: 610px;
    margin: 0 0 24px;
    font-family: var(--pk-manrope);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #000;
}

.article-show__intro {
    max-width: 610px;
    font-family: var(--pk-inter);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

.article-show__intro p {
    margin: 0 0 12px;
}

.article-show__intro p:last-child {
    margin-bottom: 0;
}

/* Мета-строка: иконка, текст, прозрачность 70% */
/* Макет: Group 191 шириной 587 — блоки на x=92, 337 и 508,
   между ними 64px. Сама строка начинается на 8px левее текста,
   потому что у иконок прозрачные поля. */
.article-show__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 64px;
    margin-top: 20px;
    margin-left: -8px;
}

/* Иконка 30px, текст в 35px от её левого края → зазор 5px */
.article-show__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.02em;
    color: #000;
    opacity: 0.7;
    white-space: nowrap;
}

.article-show__meta-item img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.article-show__meta-item_wide img {
    width: 40px;
    height: 40px;
}

/* Панель 559×324 из макета. Картинка заполняет её целиком —
   видимой остаётся только рамка rgba(2,80,232,.1) по краю.
   В макете иллюстрация сама на светлом фоне, поэтому поля вокруг
   неё там не читаются; с фотографией они выглядели бы каймой. */
.article-show__hero-media {
    order: 2;
    position: relative;
    flex: 0 0 559px;
    width: 559px;
    height: 324px;
    padding: 0;
    background: #f0f4fb;
    border: 1px solid rgba(2, 80, 232, 0.1);
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Картинка растянута по панели абсолютом: при height:100% в потоке
   она задавала панели свою высоту и ломала пропорцию */
.article-show__hero-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

/* --- Две колонки на сетке Bootstrap ---
   В макете текст 731 и оглавление 310 при контенте 1240, зазор 199.
   Сетка сама разворачивает их в столбец на узких экранах. */
@media (min-width: 992px) {
    .article-show__body > .article-show__main {
        flex: 0 0 58.95%;
        max-width: 58.95%;
    }

    .article-show__body > .article-show__toc {
        flex: 0 0 25%;
        max-width: 25%;
        margin-left: auto;
    }
}

.article-show__main {
    min-width: 0;
}

/* Панель следует за прокруткой: прилипает под шапкой в 72px
   плюс 20px просвета */
@media (min-width: 992px) {
    .article-show__toc {
        position: sticky;
        top: 92px;
        align-self: flex-start;
        max-height: calc(100vh - 112px);
        overflow-y: auto;
    }
}

.article-show__toc {
    padding: 24px;
    background: #f0f4fb;
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
}

/* Заголовок панели — кнопка ради мобильной версии, поэтому здесь
   с неё снимается вид кнопки браузера */
.article-show__toc-title {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: default;
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    margin-bottom: 14px;
}

.article-show__toc-title:focus {
    outline: none;
}

.article-show__toc-body ul,
.article-show__toc-body ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-show__toc-body li {
    margin-bottom: 11px;
}

.article-show__toc-body li:last-child {
    margin-bottom: 0;
}

.article-show__toc-body a {
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    opacity: 0.7;
    text-decoration: none;
}

.article-show__toc-body a:hover,
.article-show__toc-body a:focus,
.article-show__toc-body a.active {
    color: var(--pk-blue);
    font-weight: 600;
    opacity: 1;
    text-decoration: none;
}

/* --- Текст из редактора ---
   Правила общие для всех разделов: редактор один и тот же, поэтому
   оформление привязано к .wysiwyg-content, а не к странице статьи. */
.wysiwyg-content {
    font-family: var(--pk-inter);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Вступление статьи и текст на главной имеют свои размеры — заданы выше */

.wysiwyg-content > *:first-child {
    margin-top: 0;
}

.wysiwyg-content h2 {
    margin: 50px 0 24px;
    font-family: var(--pk-manrope);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #000;
}

.wysiwyg-content h3 {
    margin: 36px 0 20px;
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #000;
}

.wysiwyg-content p {
    margin: 0 0 16px;
}

/* Нумерованный список: квадратный бейдж 20×20, текст в 38px */
.wysiwyg-content ol {
    list-style: none;
    counter-reset: pk-step;
    padding: 0;
    margin: 0 0 16px;
}

.wysiwyg-content ol > li {
    position: relative;
    counter-increment: pk-step;
    padding-left: 38px;
    margin-bottom: 16px;
}

.wysiwyg-content ol > li::before {
    content: counter(pk-step);
    position: absolute;
    left: 0;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--pk-blue);
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    color: var(--pk-white);
}

/* Маркированный список: точка 7px, текст в 21px */
.wysiwyg-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.wysiwyg-content ul > li {
    position: relative;
    padding-left: 21px;
    margin-bottom: 16px;
}

.wysiwyg-content ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pk-blue);
}

/* Врезка: 731×60, фон #f5f8fc, рамка rgba(2,80,232,.1), радиус 16,
   текст Inter Medium Italic 16px/1.5 синим, поля 24 и 18 */
.wysiwyg-content blockquote {
    position: relative;
    padding: 18px 24px;
    margin: 24px 0;
    background: #f5f8fc;
    border: 1px solid rgba(2, 80, 232, 0.1);
    border-radius: var(--pk-radius);
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--pk-blue);
}

/* Жирное внутри врезки тоже синим, как в макете */
.wysiwyg-content blockquote strong,
.wysiwyg-content blockquote b {
    color: var(--pk-blue);
}

.wysiwyg-content blockquote p {
    margin: 0;
}

/* Таблица из редактора. Редактор проставляет ей инлайновую ширину,
   поэтому ширина и слипание рамок задаются с приоритетом. */
.wysiwyg-content table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: #f5f8fc;
    border: 1px solid rgba(2, 80, 232, 0.1);
    border-radius: var(--pk-radius);
    overflow: hidden;
    margin: 24px 0;
}

.wysiwyg-content table th,
.wysiwyg-content table td {
    height: 46px;
    padding: 12px 25px;
    border: 0;
    text-align: left;
    vertical-align: middle;
}

.wysiwyg-content table th {
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.02em;
    color: #000;
}

.wysiwyg-content table td {
    font-family: var(--pk-manrope);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.02em;
    color: #000;
}

/* Строки чередуются: нечётные белые, чётные на фоне панели */
.wysiwyg-content table tbody tr:nth-child(odd) td {
    background: #fff;
}

/* --- Оценка и автор --- */
.article-show__feedback {
    padding: 25px 24px;
    margin-top: 50px;
    background: #f0f4fb;
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
}

.article-show__feedback-title {
    margin: 0 0 16px;
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #000;
}

/* Звёзды 209×29 и счётчик в одной строке: в макете счётчик на 269
   при звёздах 25…234 → зазор 35px. До блока автора 30px. */
.article-show__feedback-rating {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 30px;
}

.article-show__feedback-rating-amount {
    margin-left: 35px;
    padding-top: 0;
    font-family: var(--pk-inter);
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.02em;
    color: #000;
}

.article-show__feedback .rating-stars {
    margin-bottom: 0;
}

.article-show__feedback-author {
    display: flex;
    align-items: center;
    gap: 24px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.article-show__feedback-author-avatar {
    flex: 0 0 66px;
}

.article-show__feedback-author-avatar img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    object-fit: cover;
}

.article-show__feedback-author-name {
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

.article-show__feedback-author-name a {
    color: inherit;
    text-decoration: underline;
    border: 0;
}

.article-show__feedback-author-desc {
    margin-top: 6px;
    white-space: normal;
    font-family: var(--pk-inter);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* --- FAQ ---
   Макет: панель 731 (#f0f4fb, рамка rgba(2,80,232,.2), радиус 16), внутри
     Rectangle 62 — белая полоса 731×53 с заголовком «FAQ» (текст в 24px)
     Rectangle 63 — белая полоса 731×73 со свёрнутым вопросом
     раскрытый вопрос и ответ подложки не имеют — лежат на панели
     стрелка 13px на x=808 → 23px от правого края
   Зазоров между полосами в макете нет. */
.article-show-faq {
    padding: 0;
    margin-top: 50px;
    background: #f0f4fb;
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
    box-shadow: none;
}

.article-show-faq__heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 53px;
    padding: 0 24px;
    margin: 0;
    background: #fff;
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: none;
    color: #000;
}

/* Полосы наложены друг на друга на 23px: «FAQ» кончается на 2616,
   первый вопрос начинается на 2593. Тот же шаг между вопросами.
   Нахлёст задан сдвигом, а не отрицательным отступом: отступ у первого
   элемента схлопывался с контейнером и до остальных не доходил. */
.article-show-faq__accordion {
    position: relative;
    z-index: 1;
    /* В макете под последним вопросом видно 14px панели; по просьбе
       убрано, чтобы снизу осталась только рамка. */
    padding: 0;
    display: flex;
    flex-direction: column;
}

.article-show-faq-item {
    position: relative;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-bottom: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
    /* margin задаётся одной записью: раньше здесь стоял margin: 0,
       который затирал заданный выше нахлёст */
    margin: -23px 0 0;
}

.article-show-faq-item:last-child {
    border-bottom: 1px solid rgba(2, 80, 232, 0.2);
}

.article-show-faq-item:first-child {
    margin-top: -23px;
}

/* Последний элемент не должен тянуть панель вверх */
.article-show-faq-item:last-child {
    margin-bottom: 0;
}

/* Каждый следующий вопрос уходит под предыдущий, поэтому порядок
   наложения убывает сверху вниз. Запас — до десяти вопросов. */
.article-show-faq-item:nth-child(1) { z-index: 9; }
.article-show-faq-item:nth-child(2) { z-index: 8; }
.article-show-faq-item:nth-child(3) { z-index: 7; }
.article-show-faq-item:nth-child(4) { z-index: 6; }
.article-show-faq-item:nth-child(5) { z-index: 5; }
.article-show-faq-item:nth-child(6) { z-index: 4; }
.article-show-faq-item:nth-child(7) { z-index: 3; }
.article-show-faq-item:nth-child(8) { z-index: 2; }
.article-show-faq-item:nth-child(9) { z-index: 1; }
.article-show-faq-item:nth-child(n+10) { z-index: 0; }

.article-show-faq-item:has(.collapse.show):last-child {
    border-bottom-color: rgba(2, 80, 232, 0.2);
}

.article-show-faq-item:last-child .article-show-faq-item__answer {
    padding-bottom: 14px;
}

.article-show-faq-item__question {
    font-size: inherit;
    line-height: inherit;
}

.article-show-faq-item__toggle-text {
    flex-grow: 0;
    flex-basis: auto;
    margin-right: 0;
}

/* Раскрытый вопрос: блок на цвете панели со скруглением 16 и рамкой.
   Лежит ПОВЕРХ следующей полосы — в макете его нижние скруглённые
   углы приходятся на неё, и в вырезах углов видно белое.
   Сверху на него так же заходит предыдущая полоса.
   Просвет от последней строки ответа до низа блока 14px:
   панель в макете кончается на 3049, текст — на 3035. */
.article-show-faq-item:has(.collapse.show) {
    background: #f0f4fb;
    border-color: rgba(2, 80, 232, 0.2);
}

.article-show-faq-item__toggle {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 73px;
    /* сверху 37px: 23 скрыто под соседней полосой плюс 14 до текста.
       справа 48px — место под стрелку */
    padding: 37px 48px 14px 24px;
    cursor: pointer;
    user-select: none;
}

.article-show-faq-item:has(.collapse.show) .article-show-faq-item__toggle {
    min-height: 0;
    padding-bottom: 0;
}

.article-show-faq-item__toggle-text {
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Стрелка 13px: 23px от правого края полосы, 33px от её верха
   (макет «В закрытом состоянии», узел 934:54) */
.article-show-faq-item__toggle::after {
    content: "";
    position: absolute;
    right: 23px;
    top: 33px;
    display: block;
    width: 13px;
    height: 13px;
    margin: 0;
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M2.5 4.8l4 4.4 4-4.4' fill='none' stroke='%230250e8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s;
}

.article-show-faq-item__toggle[aria-expanded="true"]::after {
    transform: scale3d(1, -1, 1);
}

/* Ответ: текст в 24px от края панели, на 11px ниже вопроса,
   снизу 14px — панель в макете кончается на 3049, текст на 3035.
   Прибавлять запас под нахлёст не нужно: блок лежит поверх
   следующей полосы, а не под ней. */
.article-show-faq-item__answer {
    padding: 11px 24px 14px;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* --- Похожие статьи --- */
.article-show__related {
    margin-top: 50px;
}

.article-show__related-title {
    margin: 0 0 24px;
    font-family: var(--pk-manrope);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #000;
}

@media (max-width: 1199.98px) {
    .article-show__hero {
        gap: 40px;
    }

    .article-show__hero-media {
        flex: 0 1 559px;
        width: auto;
    }
}

/* --- Мобильная версия страницы статьи ---
   Макет «Статья внут. моб.» (393, контент 345 от x=24).
   Порядок блоков другой: H1 → вступление → картинка → мета-строка →
   полоса «Quick navigation» → текст.
*/
@media (max-width: 991.98px) {

    /* H1 (24,164) 345×72, Manrope Bold 26px/1.4, tracking 0.52;
       вступление на 260 → 24px; картинка на 526 → 24px;
       мета на 774 → 16px; полоса навигации на 818 → 24px */
    /* Отступы заданы зазором, а не полями: у статьи без вступления
       поле под заголовком и поле над картинкой складывались вдвое */
    .article-show__hero {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 0;
    }

    .article-show__hero-text {
        display: contents;
    }

    .article-show__hero h1 {
        order: 1;
        max-width: none;
        font-size: 26px;
        line-height: 1.4;
        letter-spacing: 0.02em;
        margin-bottom: 0;
    }

    .article-show__intro {
        order: 2;
        max-width: none;
        font-family: var(--pk-inter);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.04em;
    }

    /* Панель 345×232. Картинка заполняет её целиком, остаётся только
       тонкая рамка — как на десктопе. */
    .article-show__hero-media {
        order: 3;
        /* flex сбрасывается: в колонке основа 559px становится высотой,
           а не шириной, и панель вытягивалась на 559px */
        flex: none;
        width: 100%;
        height: 0;
        /* 232 / 345 — пропорция панели из макета */
        padding: 0 0 67.25%;
        margin-top: 0;
        border-radius: var(--pk-radius);
    }

    /* Иконки 20px, текст Inter Medium 11px, прозрачность 70%,
       между блоками 11px */
    /* Между картинкой и мета-строкой 16px, а не 24 как между остальными */
    .article-show__meta {
        order: 4;
        gap: 8px 11px;
        margin-top: -8px;
        margin-left: -5px;
    }

    .article-show__meta-item {
        gap: 0;
        font-size: 11px;
        letter-spacing: 0.02em;
    }

    .article-show__meta-item img,
    .article-show__meta-item_wide img {
        width: 20px;
        height: 20px;
    }

    /* --- Оглавление: полоса «Quick navigation» 345×46 --- */
    .article-show__body {
        flex-direction: column;
    }

    .article-show__toc {
        order: -1;
        padding: 0;
        margin: 24px 0 32px;
        background: transparent;
        border: 0;
    }

    .article-show__toc-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 46px;
        padding: 0 14px;
        margin: 0;
        background: #fff;
        border: 1px solid rgba(2, 80, 232, 0.2);
        border-radius: 8px;
        font-family: var(--pk-inter);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.04em;
        color: var(--pk-blue);
        cursor: pointer;
    }

    .article-show__toc-title::after {
        content: "";
        width: 13px;
        height: 13px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M2.5 4.8l4 4.4 4-4.4' fill='none' stroke='%230250e8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 13px 13px;
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.2s;
    }

    .article-show__toc.is-open .article-show__toc-title::after {
        transform: scale3d(1, -1, 1);
    }

    /* Раскрытое состояние (узел 600:1590): один блок 345×224,
       фон #f5f8fc, рамка rgba(2,80,232,.2), радиус 8.
       Заголовок сверху в 16px, первый пункт на 52 → 14px под ним,
       пункты с шагом 27px, снизу 17px. */
    .article-show__toc.is-open {
        background: #f5f8fc;
        border: 1px solid rgba(2, 80, 232, 0.2);
        border-radius: 8px;
        padding: 16px 0 17px;
    }

    .article-show__toc.is-open .article-show__toc-title {
        height: auto;
        padding: 0 14px;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .article-show__toc-body {
        display: none;
        margin-top: 14px;
        padding: 0 24px;
        background: none;
        border: 0;
    }

    .article-show__toc.is-open .article-show__toc-body {
        display: block;
    }

    /* Пункты: Inter SemiBold 14px/1.4, tracking 0.56, прозрачность 70%,
       шаг 27px при высоте строки 20 → отступ 7px. Активный синий. */
    .article-show__toc-body li {
        margin-bottom: 7px;
    }

    .article-show__toc-body a {
        font-family: var(--pk-inter);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.04em;
        color: #000;
        opacity: 0.7;
    }

    .article-show__toc-body a:hover,
    .article-show__toc-body a:focus,
    .article-show__toc-body a.active {
        color: var(--pk-blue);
        opacity: 1;
    }

    .article-show__main {
        order: 1;
    }

    /* --- Текст --- */
    /* H2 Manrope Bold 18px/1.4 tracking 0.72; до текста 20px */
    .wysiwyg-content h2 {
        margin: 32px 0 20px;
        font-size: 18px;
        letter-spacing: 0.04em;
    }

    .wysiwyg-content h3 {
        margin: 24px 0 16px;
        font-size: 16px;
    }

    .wysiwyg-content {
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    .wysiwyg-content p {
        margin-bottom: 12px;
    }

    /* Шаги: бейдж 15×15, радиус 3, цифра Inter Medium 12px;
       текст в 29px от края, между шагами 12px */
    .wysiwyg-content ol > li {
        padding-left: 29px;
        margin-bottom: 12px;
    }

    .wysiwyg-content ol > li::before {
        top: 3px;
        width: 15px;
        height: 15px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    /* Точка 7px, текст в 21px, между пунктами 12px */
    .wysiwyg-content ul > li {
        padding-left: 21px;
        margin-bottom: 12px;
    }

    .wysiwyg-content ul > li::before {
        top: 6px;
    }

    /* Врезка 345×70, поля 12 и 14, текст 14px */
    .wysiwyg-content blockquote {
        padding: 14px 12px;
        margin: 20px 0;
        font-size: 14px;
    }

    /* Таблица: строки 44px, поля ячеек 6px, шапка 14px, ячейки 12px.
       Широкая таблица прокручивается вбок: своей обёртки у таблиц
       из редактора нет, поэтому прокрутка на самой таблице.
       Редактор проставляет таблице инлайновую ширину (width: 342pt) —
       она сильнее правил, поэтому здесь !important. */
    .wysiwyg-content table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 20px 0;
    }

    /* Ширина по содержимому: при 100% таблица всегда влезала
       и прокручиваться было нечему */
    .wysiwyg-content table > thead,
    .wysiwyg-content table > tbody {
        display: table;
        width: max-content;
        min-width: 100%;
    }

    .wysiwyg-content table th,
    .wysiwyg-content table td {
        white-space: nowrap;
    }

    .wysiwyg-content table th,
    .wysiwyg-content table td {
        height: 44px;
        padding: 11px 6px;
    }

    .wysiwyg-content table th {
        font-size: 14px;
        letter-spacing: 0.02em;
    }

    .wysiwyg-content table td {
        font-size: 12px;
        letter-spacing: 0.02em;
    }

    /* --- FAQ: панель #f5f8fc, радиус 8, рамка .1;
       полоса заголовка 46px, полоса вопроса 72px, нахлёст 8px --- */
    .article-show-faq {
        padding: 0;
        margin-top: 32px;
        background: #f5f8fc;
        border-color: rgba(2, 80, 232, 0.1);
        border-radius: 8px;
    }

    .article-show-faq__heading {
        min-height: 46px;
        padding: 0 14px;
        border-radius: 8px;
        font-size: 18px;
    }

    .article-show-faq-item {
        margin-top: -8px;
        border-radius: 8px;
    }

    .article-show-faq-item:first-child {
        margin-top: -8px;
    }

    .article-show-faq-item__toggle {
        min-height: 72px;
        /* сверху 28px: 8 под соседней полосой плюс 20 до текста */
        padding: 28px 30px 20px 14px;
    }

    .article-show-faq-item__toggle-text {
        font-family: var(--pk-inter);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.04em;
    }

    .article-show-faq-item__toggle::after {
        top: 25px;
        right: 3px;
    }

    .article-show-faq-item__answer {
        padding: 8px 14px 12px;
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    /* --- Оценка: панель #eef4fe, радиус 16, рамка .2 --- */
    .article-show__feedback {
        padding: 14px;
        margin-top: 32px;
        background: #eef4fe;
        border-radius: var(--pk-radius);
    }

    .article-show__feedback-title {
        margin-bottom: 26px;
        font-size: 16px;
        letter-spacing: 0.02em;
    }

    /* Мобильный макет: звёзды 185×25, счётчик на 228 → зазор 31px */
    .article-show__feedback-rating {
        justify-content: flex-start;
        margin-bottom: 29px;
    }

    .article-show__feedback-rating-amount {
        margin-left: 31px;
    }

    .article-show__feedback .rating-stars {
        margin-bottom: 0;
    }

    .article-show__feedback-author {
        gap: 24px;
    }

    .article-show__feedback-author-avatar {
        flex: 0 0 66px;
    }

    .article-show__feedback-author-avatar img {
        width: 66px;
        height: 66px;
    }

    .article-show__feedback-author-name {
        font-size: 18px;
        letter-spacing: 0.04em;
    }

    .article-show__feedback-author-desc {
        margin-top: 8px;
        font-size: 16px;
        letter-spacing: 0.02em;
    }
}


/* =============================================================
   13. СТРАНИЦА «БИРЖИ»
   Собрано по макету «Биржи декстоп» (1440, контент 1240 от x=100).

     баннер    1240×290 на (100,179), градиент #fefefe → #f0f4fb,
               радиус 16, тень 0 0 16px rgba(0,0,0,.1)
     H1        (124,203) ширина 877, Manrope Bold 46px/1.3, tracking 0.92
     подзагол. (124,356) ширина 694, Inter Medium 20px/1.4, tracking 0.8
     картинка  346×249 на (955,199) → 39px от правого края, 20px от верха
     H2 блока  (100,519) Manrope Bold 34px
     карточки  393×164, белые, радиус 16, тень 0 0 16px;
               колонки 101/525/949 → зазор 31, ряды 603/798 → зазор 31
               эйбрау (20,24) Manrope SemiBold 18px, прописные, #0250e8
               подзаголовок (20,55) Manrope Bold 18px
               текст (20,96) ширина 305, Manrope Medium 16px,
               название биржи Manrope SemiBold синим
     подбор    панель 731×348 #f5f8fc, радиус 16, тень;
               H2 (24,24) Manrope Bold 34px, текст (24,88) Inter 16px;
               две карточки 330×168 белые, радиус 16, тень
     таблица   шапка 53px, строки 100px, колонки от края контента:
               24 / 268 / 452 / 563 / 676 / 833 / 1022 / 1127
     аккордеон полосы 731×79 #f5f8fc, рамка rgba(2,80,232,.2), радиус 16,
               заголовок Manrope ExtraBold 18px прописными, стрелка 12px
   ============================================================= */

.pk-page-hero_exchanges {
    min-height: 290px;
    background: linear-gradient(to right, #fefefe, #f0f4fb);
}

.pk-page-hero_exchanges .pk-page-hero__title {
    max-width: 877px;
}

.pk-page-hero_exchanges .pk-page-hero__subtitle {
    max-width: 694px;
    margin-top: 21px;
}

.pk-page-hero_exchanges .pk-page-hero__subtitle p {
    margin: 0;
    font-family: var(--pk-inter);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Картинка 346×249: 39px от правого края, 20px от верха панели */
.pk-page-hero_exchanges .pk-page-hero__image {
    flex: 0 0 346px;
    width: 346px;
    margin-top: 0;
    margin-right: 15px;
}

/* --- Блок «Not sure which fits? Start here» --- */
.brokers-index__short-desc {
    margin-bottom: 50px;
}

.brokers-index__short-desc .wysiwyg-content h2 {
    margin: 50px 0 34px;
    font-size: 34px;
    letter-spacing: 0.04em;
}

.pk-picks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 393px));
    justify-content: space-between;
    gap: 31px;
}

.pk-pick {
    min-height: 164px;
    padding: 24px 20px;
    background: var(--pk-white);
    border: 0;
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.pk-pick__label {
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pk-blue);
}

/* Подзаголовок на 55 при эйбрау на 24 высотой 25 → 6px */
.pk-pick__title {
    margin-top: 6px;
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Текст на 96 при подзаголовке на 55 высотой 25 → 16px */
.pk-pick p {
    max-width: 305px;
    margin: 16px 0 0;
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

.pk-pick p a {
    font-family: var(--pk-manrope);
    font-weight: 600;
    color: var(--pk-blue);
    text-decoration: none;
}

.pk-pick p a:hover,
.pk-pick p a:focus {
    text-decoration: underline;
}

/* --- Заголовок над таблицей --- */
.brokers-index__table-head {
    margin-bottom: 36px;
}

.brokers-index__table-head h2 {
    margin: 0 0 16px;
    font-family: var(--pk-manrope);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #000;
}

.brokers-index__table-head .pk-section-subtitle {
    max-width: 660px;
    margin-bottom: 0;
}

/* --- Таблица: те же правила, что на главной --- */
.brokers-index__list .common-table-list__responsive {
    margin: 0;
    width: 100%;
}

.brokers-index__list .common-table-list__responsive-container {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.brokers-index__list .common-table-list__table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Шапка 53px, заголовки прописными Manrope Bold 16px */
.brokers-index__list .common-table-list__table thead tr {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.brokers-index__list .common-table-list__table thead th {
    height: 53px;
    padding: 0 12px;
    vertical-align: middle;
    text-align: left;
    background: var(--pk-white);
    box-shadow: none;
    border: 0;
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #000;
}

.brokers-index__list .common-table-list__table thead th:first-child {
    padding-left: 24px;
}

.brokers-index__list .common-table-list__table thead th:last-child {
    padding-right: 24px;
}

/* Строки 100px */
.brokers-index__list .common-table-list__item,
.brokers-index__list .common-table-list__table_striped tr.common-table-list__item:nth-child(2n) {
    background: transparent;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);
}

.brokers-index__list .common-table-list__item:last-of-type {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.06);
}

.brokers-index__list .common-table-list__item > td {
    height: 100px;
    padding: 12px;
    vertical-align: middle;
    background: var(--pk-white);
    box-shadow: none;
}

.brokers-index__list .common-table-list__item > td:first-child {
    padding-left: 24px;
}

.brokers-index__list .common-table-list__item > td:last-child {
    padding-right: 24px;
}

.brokers-index__list .common-table-list__item-td.text-center {
    text-align: left;
}

/* Ширины колонок: 24 / 268 / 452 / 563 / 676 / 833 / 1022 / 1127 при 1240 */
.brokers-index__list .pk-exch__cell-name,
.brokers-index__list .common-table-list__th:first-child {
    width: 19.7%;
}

.brokers-index__list .brokers-index-list-item__col_best-for {
    width: 14.8%;
}

.brokers-index__list .brokers-index-list-item__col_turnover {
    width: 9%;
}

.brokers-index__list .brokers-index-list-item__col_clients {
    width: 9.1%;
}

.brokers-index__list .brokers-index-list-item__col_active-clients {
    width: 12.7%;
}

.brokers-index__list .brokers-index-list-item__col_bonus {
    width: 15.2%;
}

.brokers-index__list .brokers-index-list-item__col_link {
    width: 8.5%;
}

.brokers-index__list .brokers-index-list-item__col_website {
    width: 11%;
}

/* Примечание под таблицей и «Last updated» на той же строке справа:
   текст в 635px от x=155, подпись на x=1150 при контенте 1240 */
.brokers-index .pk-table-foot {
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 26px;
    padding: 0;
}

.pk-table-updated {
    flex: 0 0 auto;
    padding-top: 2px;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--pk-blue);
    opacity: 0.7;
    white-space: nowrap;
}

/* --- Аккордеоны внизу страницы ---
   Полоса 731×79: #f5f8fc, рамка rgba(2,80,232,.2), радиус 16.
   Заголовок в (24,28) Manrope ExtraBold 18px прописными, tracking 0.72.
   Стрелка 12px в 24px от правого края и 34px от верха.
   Между полосами 16px, раскрытое содержимое — тот же блок. */
.brokers-index__content {
    margin-top: 80px;
}

.exchange-guide {
    max-width: 731px;
}

.exchange-guide > h2 {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 79px;
    padding: 28px 60px 28px 24px;
    margin: 0 0 16px;
    background: #f5f8fc;
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
    /* Размеры как у FAQ на страницах статей */
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
}

.exchange-guide > h2::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 34px;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.3 4.4l3.7 4 3.7-4' fill='none' stroke='%230250e8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s;
}

.exchange-guide > h2.is-open::after,
.exchange-guide > h2[aria-expanded="true"]::after {
    transform: scale3d(1, -1, 1);
}

/* Раскрытое содержимое: белая панель с той же рамкой и радиусом 16.
   Заходит под полосу заголовка на 47px (панель на 2541 при полосе
   2509…2588), текст в 24px от края и в 16px под полосой, снизу 28px.
   Показом управляет exchange-guide.js через класс is-open. */
.exchange-guide > div.is-open {
    position: relative;
    z-index: -1;
    padding: 63px 24px 28px;
    margin: -47px 0 16px;
    background: #fff;
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
}

/* Текст внутри — как в ответах FAQ: Inter Regular 16px/1.4 */
.exchange-guide > div.is-open,
.exchange-guide > div.is-open p,
.exchange-guide > div.is-open li {
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Маркеры обычные, отступ 27px — как в макете */
.exchange-guide > div.is-open ul {
    list-style: disc;
    padding-left: 0;
    margin: 0 0 16px;
}

.exchange-guide > div.is-open ul > li {
    position: static;
    padding-left: 0;
    margin-left: 27px;
    margin-bottom: 0;
}

.exchange-guide > div.is-open ul > li::before {
    content: none;
}

.exchange-guide > div.is-open > *:first-child {
    margin-top: 0;
}

.exchange-guide > div.is-open > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199.98px) {
    .pk-picks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brokers-index__list .common-table-list__table {
        min-width: 1080px;
        table-layout: auto;
    }
}

/* --- Мобильная версия страницы «Биржи» ---
   Макет «Биржи моб.» (393, контент 345 от x=24):
     баннер     345×440 на (24,169), поля 14; H1 (14,14) ширина 319,
                картинка 246×159 на (50,137), подзаголовок на (14,316)
     заголовок  «Not sure which fits» на y=641, высота 25
     карточки   345×125 с шагом 137 → зазор 12px;
                эйбрау (14,14) Manrope SemiBold 14px прописными #0250e8,
                подзаголовок (14,39) Manrope ExtraBold 16px,
                текст (14,73) Manrope Medium 14px,
                названия бирж Manrope SemiBold 14px #0250e8 с подчёркиванием
     подбор     панель 345×531 на (24,1528), поля 14;
                заголовок (14,32) Manrope ExtraBold 18px/1.4,
                текст (14,71) Manrope SemiBold 14px/1.4,
                карточки 317×168 и 316×168 с зазором 12px
     биржи      карточки 345×292 с шагом 304 → зазор 12px
     аккордеон  полосы 345×42, #f1f4f8, рамка rgba(2,80,232,.1), радиус 8,
                заголовок (15,14) Manrope Bold 12px прописными,
                стрелка 9px в 14px от правого края
*/
@media (max-width: 991.98px) {
    /* Баннер: H1, под ним картинка, ниже подзаголовок */
    .pk-page-hero_exchanges {
        display: flex;
        flex-direction: column;
        /* базовая раскладка растягивает содержимое по краям панели —
           в столбце это давало пустоту между блоками */
        justify-content: flex-start;
        align-items: flex-start;
        min-height: 0;
        padding: 14px;
    }

    .pk-page-hero_exchanges .pk-page-hero__text {
        display: contents;
    }

    .pk-page-hero_exchanges .pk-page-hero__title {
        order: 1;
        max-width: 319px;
        margin-bottom: 0;
    }

    /* H1 14…116, картинка на 137 → 21px.
       flex сбрасывается: с десктопа остаётся основа 400px, в столбце
       она становится высотой и оставляла пустое место под картинкой */
    .pk-page-hero_exchanges .pk-page-hero__image {
        order: 2;
        flex: none;
        align-self: center;
        width: 246px;
        max-width: 100%;
        height: auto;
        margin: 21px 0 0;
    }

    /* Картинка 137…296, подзаголовок на 316 → 20px */
    .pk-page-hero_exchanges .pk-page-hero__subtitle {
        order: 3;
        max-width: 317px;
        margin-top: 20px;
    }

    .pk-page-hero_exchanges .pk-page-hero__subtitle p {
        font-family: var(--pk-manrope);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.04em;
    }

    .brokers-index__short-desc {
        margin-bottom: 32px;
    }

    /* Баннер кончается на 609, заголовок на 641 → 32px */
    .brokers-index__short-desc .wysiwyg-content h2 {
        margin: 32px 0 20px;
        font-size: 20px;
    }

    .pk-picks {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pk-pick {
        min-height: 125px;
        padding: 14px;
    }

    .pk-pick__label {
        font-size: 14px;
        letter-spacing: 0.02em;
    }

    /* Эйбрау 14…33, подзаголовок на 39 → 6px */
    .pk-pick__title {
        margin-top: 6px;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 0.02em;
    }

    /* Подзаголовок 39…61, текст на 73 → 12px */
    .pk-pick p {
        max-width: none;
        margin-top: 12px;
        font-size: 14px;
        letter-spacing: 0.02em;
    }

    .pk-pick p a {
        font-size: 14px;
        text-decoration: underline;
    }

    .brokers-index__table-head {
        margin-bottom: 24px;
    }

    .brokers-index__table-head h2 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .brokers-index__table-head .pk-section-subtitle {
        font-size: 14px;
    }

    .brokers-index .pk-table-foot {
        display: block;
    }

    .pk-table-updated {
        display: block;
        margin-top: 12px;
    }

    /* Аккордеоны: полосы 345×42 */
    .brokers-index__content {
        margin-top: 32px;
    }

    .exchange-guide {
        max-width: none;
    }

    .exchange-guide > h2 {
        min-height: 42px;
        padding: 14px 34px 12px 15px;
        margin-bottom: 3px;
        background: #f1f4f8;
        border-color: rgba(2, 80, 232, 0.1);
        border-radius: 8px;
        font-family: var(--pk-manrope);
        font-size: 12px;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.02em;
    }

    .exchange-guide > h2::after {
        right: 14px;
        top: 18px;
        width: 9px;
        height: 9px;
        background-size: 9px 9px;
    }

    .exchange-guide > div.is-open {
        padding: 14px;
        margin: 3px 0 3px;
        border-radius: 8px;
    }

    .exchange-guide > div.is-open,
    .exchange-guide > div.is-open p,
    .exchange-guide > div.is-open li {
        font-size: 14px;
    }
}


/* =============================================================
   14. ОТЗЫВЫ О БИРЖЕ
   Собрано по макету «Биржа внут. декстоп» и форме (узел 739:1304).

     строка     заголовок слева, кнопка справа на той же высоте
     заголовок  Manrope Bold 22px/1.4, tracking 0.44, прописными
     кнопка     139×45, #0250e8, радиус 10,
                Manrope ExtraBold 14px, значок 13px через 12px
     форма      ширина 731; между блоками 16px
     подпись    Inter Regular 16px
     звёзды     209×29
     поле имени 279×45, фон #f0f4fb, радиус 10, отступ текста 14px
     поле текста 731×74, тот же фон и радиус
     отправить  139×45 по центру
   ============================================================= */

.common-feedback__header,
.common-comments__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 0;
}

.common-feedback__title,
.common-comments__title {
    margin: 0;
    padding: 0;
    font-family: var(--pk-manrope);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #000;
}

.common-feedback__add-button,
.common-comments__add-button {
    flex: 0 0 auto;
}

.common-feedback .btn-blue-small,
.common-feedback .btn-blue-medium,
.common-comments .btn-blue-small,
.common-comments .btn-blue-medium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 139px;
    height: 45px;
    padding: 4px 8px;
    background: var(--pk-blue);
    border: 0;
    border-radius: var(--pk-radius-btn);
    /* В старых стилях у кнопки чёрная тень со сдвигом — в макете её нет */
    box-shadow: none;
    font-family: var(--pk-manrope);
    font-size: 14px;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--pk-white);
}

.common-feedback .btn-blue-small:hover,
.common-feedback .btn-blue-medium:hover,
.common-feedback .btn-blue-small:focus,
.common-feedback .btn-blue-medium:focus,
.common-comments .btn-blue-small:hover,
.common-comments .btn-blue-medium:hover,
.common-comments .btn-blue-small:focus,
.common-comments .btn-blue-medium:focus {
    background: #0142c4;
    color: var(--pk-white);
}

/* Значок самолётика 13px через 12px после текста.
   Старые стили задают ему 15px, свой отступ и filter: invert(1) —
   всё это здесь отменяется. */
.common-feedback__add-button .btn-blue-small::after,
.common-feedback__add-button .btn-blue-small_add-comments::after,
.common-comments__add-button .btn-blue-small::after,
.common-comments__add-button .btn-blue-small_add-comments::after {
    content: "";
    flex: 0 0 13px;
    width: 13px;
    max-width: 13px;
    height: 13px;
    margin: 0;
    filter: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4z'/%3E%3C/svg%3E") center no-repeat;
    background-size: 13px 13px;
}

.common-feedback-add,
.common-comments-add {
    max-width: 731px;
    margin-top: 28px;
}

.common-feedback-add__title,
.common-comments-add__title {
    margin-bottom: 16px;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #000;
}

.common-feedback-add .rating-form,
.common-feedback-add .form-group,
.common-comments-add .form-group {
    margin-bottom: 16px;
}

.common-feedback-add .form-control,
.common-comments-add .form-control {
    height: 45px;
    padding: 0 14px;
    background: #f0f4fb;
    border: 0;
    border-radius: var(--pk-radius-btn);
    box-shadow: none;
    font-family: var(--pk-inter);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #000;
}

.common-feedback-add input.form-control,
.common-comments-add input.form-control {
    max-width: 279px;
}

.common-feedback-add textarea.form-control,
.common-comments-add textarea.form-control {
    height: 74px;
    padding: 12px 14px;
    resize: vertical;
}

.common-feedback-add .form-control::placeholder,
.common-comments-add .form-control::placeholder {
    color: #000;
    opacity: 0.5;
}

.common-feedback-add .form-control:focus,
.common-comments-add .form-control:focus {
    background: #f0f4fb;
    box-shadow: 0 0 0 1px rgba(2, 80, 232, 0.3);
}

.common-feedback-add .form-group_btn,
.common-comments-add .form-group_btn {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .common-feedback__header,
    .common-comments__header {
        gap: 12px;
    }

    .common-feedback__title,
    .common-comments__title {
        font-size: 16px;
    }

    /* Кнопка 96×29, текст 12px, значок 13px через 10px */
    .common-feedback .btn-blue-small,
    .common-feedback .btn-blue-medium,
    .common-comments .btn-blue-small,
    .common-comments .btn-blue-medium {
        width: 96px;
        height: 29px;
        gap: 10px;
        padding: 0 8px;
        font-size: 12px;
    }

    .common-feedback-add,
    .common-comments-add {
        margin-top: 20px;
    }

    .common-feedback-add__title,
    .common-comments-add__title,
    .common-feedback-add .form-control,
    .common-comments-add .form-control {
        font-size: 14px;
    }

    /* Поле имени 185×45, поле текста 345×96 */
    .common-feedback-add input.form-control,
    .common-comments-add input.form-control {
        max-width: 185px;
    }

    .common-feedback-add textarea.form-control,
    .common-comments-add textarea.form-control {
        height: 96px;
    }
}


/* =============================================================
   15. СТРАНИЦА «ПРОМОКОДЫ»
   Собрано по макету «Промокоды» (1440, контент 1240 от x=100).

     H1        (100,179) ширина 877, Manrope Bold 46px/1.3, tracking 0.92
     подзагол. (100,383) ширина 792, Inter Medium 20px/1.4, tracking 0.8
     картинка  376×256 на (964,197); панели вокруг шапки нет
     полоса    1240×149 на (100,489), белая, радиус 16, тень 0 0 16px;
               колонки с шагом 310, иконка 40px в 10px от края колонки,
               заголовок Manrope ExtraBold 18px, текст Manrope Medium 16px
               шириной 237; линии на 410/720/1030 высотой 91
     карточки  391×366 в три колонки, зазоры 34
     аккордеоны полосы 731×79, как на странице бирж
   ============================================================= */

.pk-plain-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

.pk-plain-hero__text {
    flex: 1 1 877px;
    min-width: 0;
    max-width: 877px;
}

.pk-plain-hero__title {
    max-width: 877px;
    margin: 0;
    font-family: var(--pk-manrope);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #000;
}

/* H1 179…359, подзаголовок на 383 → 24px */
.pk-plain-hero__subtitle {
    max-width: 792px;
    margin-top: 24px;
}

.pk-plain-hero__subtitle p {
    margin: 0;
    font-family: var(--pk-inter);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Картинка 376×256 на 197, при H1 на 179 → 18px сверху */
.pk-plain-hero__media {
    position: relative;
    flex: 0 0 376px;
    width: 376px;
    margin-top: 18px;
}

.pk-plain-hero__image {
    display: block;
}

.pk-plain-hero__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Кружки вокруг картинки. Размеры, цвета и места из макета:
   четыре синих #0250e8 и три оранжевых #fd880f и #fe8e16.
   Места заданы долями, чтобы держаться картинки при сжатии. */
.pk-plain-hero__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pk-plain-hero__dots span {
    position: absolute;
    border-radius: 50%;
}

/* Ellipse 8 */
.pk-plain-hero__dots span:nth-child(1) {
    left: 10.37%;
    top: 3.12%;
    width: 8px;
    height: 8px;
    background: #0250e8;
    filter: blur(2.25px);
}

/* Ellipse 13 */
.pk-plain-hero__dots span:nth-child(2) {
    left: 13.83%;
    top: 35.55%;
    width: 6px;
    height: 6px;
    background: #fd880f;
    filter: blur(1.0px);
}

/* Ellipse 11 */
.pk-plain-hero__dots span:nth-child(3) {
    left: 20.21%;
    top: 88.28%;
    width: 8px;
    height: 8px;
    background: #fd880f;
    filter: blur(3.15px);
}

/* Ellipse 10 */
.pk-plain-hero__dots span:nth-child(4) {
    left: 46.01%;
    top: 8.2%;
    width: 8px;
    height: 8px;
    background: #fe8e16;
    filter: blur(1.45px);
}

/* Ellipse 7 */
.pk-plain-hero__dots span:nth-child(5) {
    left: 86.17%;
    top: -0.78%;
    width: 10px;
    height: 10px;
    background: #0250e8;
    filter: blur(4.5px);
}

/* Ellipse 12 */
.pk-plain-hero__dots span:nth-child(6) {
    left: 88.56%;
    top: 46.09%;
    width: 6px;
    height: 6px;
    background: #fd880f;
    filter: blur(3.15px);
}

/* Ellipse 9 */
.pk-plain-hero__dots span:nth-child(7) {
    left: 80.85%;
    top: 79.69%;
    width: 7px;
    height: 7px;
    background: #0250e8;
    filter: blur(1.05px);
}

/* Восьмого кружка на десктопе нет — он только в мобильном макете */
.pk-plain-hero__dots span:nth-child(8) {
    display: none;
}

/* --- Полоса доверия --- */
.pk-trustbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 149px;
    padding: 12px 10px;
    margin-bottom: 50px;
    background: var(--pk-white);
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.pk-trustbar__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0 10px;
}

/* Линии между колонками: 1px высотой 91, по центру по вертикали —
   в макете это отдельные слои на 410, 720 и 1030 */
.pk-trustbar__item + .pk-trustbar__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 91px;
    margin-top: -45.5px;
    background: rgba(0, 0, 0, 0.1);
}

.pk-trustbar__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.pk-trustbar__title {
    display: block;
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Заголовок на 509, текст на 552 → 18px */
.pk-trustbar__text p {
    max-width: 237px;
    margin: 18px 0 0;
    font-family: var(--pk-manrope);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* --- Карточки промокодов: 391×366, три колонки, зазоры 34 --- */
@media (min-width: 992px) {
    .promo_codes-index .promo-codes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 391px));
        justify-content: space-between;
        gap: 34px;
        margin: 0;
    }

    .promo_codes-index .promo-codes > [class*="col-"] {
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
        margin: 0;
    }
}

.promo_codes-index__content {
    margin-top: 50px;
}

@media (max-width: 1199.98px) {
    .pk-plain-hero {
        gap: 24px;
    }

    .pk-trustbar {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 0;
        min-height: 0;
        padding: 20px 10px;
    }

    .pk-trustbar__item:nth-child(3)::before {
        content: none;
    }
}

@media (max-width: 991.98px) {
    .pk-plain-hero {
        display: block;
        margin-bottom: 32px;
    }

    .pk-plain-hero__text,
    .pk-plain-hero__title,
    .pk-plain-hero__subtitle {
        max-width: none;
    }

    .pk-plain-hero__title {
        font-size: 26px;
    }

    .pk-plain-hero__subtitle {
        margin-top: 16px;
    }

    .pk-plain-hero__subtitle p {
        font-size: 16px;
    }

    .pk-plain-hero__media {
        width: 100%;
        max-width: 376px;
        margin: 20px auto 0;
    }

    .pk-trustbar {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
        margin-bottom: 32px;
    }

    .pk-trustbar__item {
        padding: 0;
    }

    .pk-trustbar__item + .pk-trustbar__item::before {
        content: none;
    }

    .pk-trustbar__title {
        font-size: 16px;
    }

    .pk-trustbar__text p {
        max-width: none;
        margin-top: 8px;
        font-size: 14px;
    }

    .promo_codes-index__content {
        margin-top: 32px;
    }
}


/* --- Мобильная версия страницы «Промокоды» ---
   Макет «Промокоды моб.» (393, контент 345 от x=24):
     шапка      панель 345×455 на (21,158), фон #f0f4fb, радиус 10,
                тень 0 0 16px — на десктопе панели нет
     H1         (14,14) ширина 319, Manrope Bold 26px/1.3, синим #0250e8
     картинка   251×171 на (43,176) от края панели
     подзагол.  (14,353) ширина 317
     доверие    четыре отдельные карточки 345, белые, радиус 16,
                тень 0 0 16.1px, зазор 12px;
                иконка 35px в (14,14), заголовок Manrope ExtraBold 16px
                в 63px от края, текст Manrope Medium 14px в (20,56)
     карточки   промокодов 345×338 с шагом 350 → зазор 12px
     аккордеон  полосы 345×42, как в разделе бирж
*/
@media (max-width: 991.98px) {
    /* На мобильном у шапки промокодов есть панель, на десктопе её нет.
       Правило привязано к странице: на других шапка без панели. */
    .promo_codes-index .pk-plain-hero {
        display: flex;
        flex-direction: column;
        padding: 14px;
        background: #f0f4fb;
        border-radius: 10px;
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    }

    .promo_codes-index .pk-plain-hero__text {
        display: contents;
    }

    /* В макете заголовок здесь синий (#0250e8), но по просьбе оставлен
       чёрным — как на десктопе */
    .promo_codes-index .pk-plain-hero__title {
        order: 1;
        max-width: 319px;
        font-size: 26px;
        line-height: 1.3;
        letter-spacing: 0.02em;
    }

    /* H1 14…150, картинка на 176 → 26px */
    .promo_codes-index .pk-plain-hero__media {
        order: 2;
        flex: none;
        align-self: center;
        width: 251px;
        max-width: 100%;
        margin: 26px 0 0;
    }

    /* На мобильном кружков восемь, места и размеры свои */
    .promo_codes-index .pk-plain-hero__dots span:nth-child(8) {
        display: block;
            filter: blur(1.05px);
}

    /* Ellipse 21 */
    .promo_codes-index .pk-plain-hero__dots span:nth-child(1) {
        left: 22.31%;
        top: -4.09%;
        width: 7px;
        height: 7px;
        background: #0250e8;
        filter: blur(4.35px);
    }

    /* Ellipse 15 */
    .promo_codes-index .pk-plain-hero__dots span:nth-child(2) {
        left: -4.78%;
        top: 10.53%;
        width: 8px;
        height: 8px;
        background: #0250e8;
        filter: blur(2.25px);
    }

    /* Ellipse 18 */
    .promo_codes-index .pk-plain-hero__dots span:nth-child(3) {
        left: 10.76%;
        top: 30.41%;
        width: 6px;
        height: 6px;
        background: #fd880f;
        filter: blur(1.0px);
    }

    /* Ellipse 17 */
    .promo_codes-index .pk-plain-hero__dots span:nth-child(4) {
        left: -7.97%;
        top: 74.85%;
        width: 8px;
        height: 8px;
        background: #fd880f;
        filter: blur(3.15px);
    }

    /* Ellipse 16 */
    .promo_codes-index .pk-plain-hero__dots span:nth-child(5) {
        left: 82.07%;
        top: 12.28%;
        width: 8px;
        height: 8px;
        background: #fe8e16;
        filter: blur(1.45px);
    }

    /* Ellipse 14 */
    .promo_codes-index .pk-plain-hero__dots span:nth-child(6) {
        left: 104.38%;
        top: 4.68%;
        width: 10px;
        height: 10px;
        background: #0250e8;
        filter: blur(4.5px);
    }

    /* Ellipse 20 */
    .promo_codes-index .pk-plain-hero__dots span:nth-child(7) {
        left: 101.99%;
        top: 40.35%;
        width: 6px;
        height: 6px;
        background: #fd880f;
        filter: blur(1.0px);
    }

    /* Ellipse 19 */
    .promo_codes-index .pk-plain-hero__dots span:nth-child(8) {
        left: 88.05%;
        top: 82.46%;
        width: 7px;
        height: 7px;
        background: #0250e8;
    }

    /* Картинка 176…347, подзаголовок на 353 → 6px */
    .promo_codes-index .pk-plain-hero__subtitle {
        order: 3;
        max-width: 317px;
        margin-top: 6px;
    }

    /* Полоса доверия распадается на четыре карточки */
    .pk-trustbar {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    /* Иконка 35px в (14,14), заголовок в 63px от края, текст в 20px —
       то есть он идёт под иконкой, а не в одной колонке с заголовком.
       Раскладка сеткой, чтобы не двигать текст отрицательным отступом. */
    .pk-trustbar__item {
        display: grid;
        grid-template-columns: 35px 1fr;
        column-gap: 14px;
        align-items: start;
        padding: 14px;
        background: var(--pk-white);
        border-radius: var(--pk-radius);
        box-shadow: 0 0 16.1px rgba(0, 0, 0, 0.1);
    }

    .pk-trustbar__icon {
        grid-column: 1;
        grid-row: 1;
        flex: none;
        width: 35px;
        height: 35px;
    }

    .pk-trustbar__text {
        display: contents;
    }

    .pk-trustbar__title {
        grid-column: 2;
        grid-row: 1;
        padding-top: 6px;
        font-size: 16px;
        letter-spacing: 0.04em;
    }

    /* Заголовок 20…42, текст на 56 → 14px под ним, в 6px от края иконки */
    .pk-trustbar__text p {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        margin: 14px 0 0 6px;
        font-size: 14px;
    }

    /* Карточки промокодов друг под другом с зазором 12px */
    .promo_codes-index .promo-codes {
        display: block;
        margin: 0;
    }

    .promo_codes-index .promo-codes > [class*="col-"] {
        max-width: none;
        padding: 0;
    }
}


/* =============================================================
   16. СТРАНИЦА ПРОМОКОДА
   Собрано по макету «Промокоды внут.» (1440, контент 1240 от x=100).

     карточка   896×465 на (100,179), логотип 172×172 в (24,24),
                заголовок (220,16) ширина 652, Manrope Bold 34px
     значки     четыре на y=337: иконка 35px, значение Inter 17px,
                подпись под ним; шаги 193, 176, 188
     панель     850×144 на (22,223) от края карточки, #f0f4fb, радиус 16
     поле кода  390×57, белое, пунктирная рамка rgba(2,80,232,.2),
                радиус 16; блок копирования 105×57 синий справа;
                код Inter Bold 20px, межбуквенное 2.4
     кнопка     388×57, синяя, радиус 16, Inter 20px белым
     пометки    строка 850×56 #f0f4fb, Manrope SemiBold 14px синим
                при прозрачности 50%, разделители-точки 3px
     шаги       панель 310×465, белая, рамка rgba(2,80,232,.2), радиус 16;
                заголовок (24,24) Manrope Bold 18px;
                кружки 63px на 85/210/328, номера 15px,
                название Inter SemiBold 16px, текст Inter Medium 14px
                при прозрачности 70%; линии между кружками
   ============================================================= */

/* Обе панели одной высоты — в макете по 465. Выравнивание
   растяжением, чтобы правая тянулась за левой при любом содержимом. */
.promo-show__top {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 34px;
    margin-bottom: 50px;
}

/* --- Карточка --- */
/* Карточка белая с тенью, без рамки */
.pc-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 896px;
    min-width: 0;
    max-width: 896px;
    min-height: 465px;
    padding: 24px;
    background: var(--pk-white);
    border: 0;
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.pc-card__head {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.pc-card__logo {
    flex: 0 0 172px;
    width: 172px;
}

/* Логотип 172×172 с рамкой rgba(2,80,232,.2) и радиусом 16.
   В макете картинка квадратная и заполняет рамку целиком, у нас
   логотипы вытянутые — поэтому вписываем целиком, с полем 16px. */
.pc-card__logo img {
    display: block;
    width: 172px;
    height: 172px;
    padding: 16px;
    object-fit: contain;
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
}

.pc-card__intro {
    min-width: 0;
    flex: 1 1 auto;
}

.pc-card__title {
    max-width: 652px;
    margin: 0;
    font-family: var(--pk-manrope);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #000;
}

/* Заголовок 195…329, значки на 337 → 8px */
.pc-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 38px;
    margin-top: 8px;
}

.pc-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pc-badge__icon {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.pc-badge__text {
    display: flex;
    flex-direction: column;
}

/* Значение Inter SemiBold 12px, подпись Inter Medium 12px
   при прозрачности 70%, между ними 19px по макету */
.pc-badge__value {
    font-family: var(--pk-inter);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

.pc-badge__label {
    font-family: var(--pk-inter);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    opacity: 0.7;
}

/* Две отдельные плашки #f0f4fb с радиусом 16, между ними 18px:
   верхняя 850×144 с полем и кнопкой, нижняя 850×56 с пометками.
   Ширина 850 при карточке 896 → по 22px с краёв. */
.pc-card__action {
    margin: 27px -2px 0;
}

.pc-card__head {
    flex: 1 1 auto;
}

/* Верхняя плашка 850×144: внутри строка с полем и кнопкой,
   под ней подпись — всё на одном фоне */
.pc-card__panel {
    min-height: 144px;
    padding: 24px;
    background: #f0f4fb;
    border-radius: var(--pk-radius);
}

.pc-card__row {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Поле кода 390×57 с пунктирной рамкой и синим блоком копирования */
.pc-code {
    position: relative;
    flex: 1 1 390px;
    min-width: 0;
    height: 57px;
    background: var(--pk-white);
    border: 1px dashed rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
}

/* Код по центру белой части поля, до синего блока */
.pc-code__value {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 105px 0 0;
    font-family: var(--pk-inter);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.12em;
    color: #000;
}

.pc-code__copy {
    position: absolute;
    right: -1px;
    top: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 57px;
    padding: 0;
    background: var(--pk-blue);
    border: 0;
    border-radius: var(--pk-radius);
    cursor: pointer;
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--pk-white);
}

/* Значок 22px по центру блока. После нажатия он пропадает,
   вместо него появляется надпись «Copied», а код становится синим. */
.pc-code__copy::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1'/%3E%3C/svg%3E") center no-repeat;
    background-size: 22px 22px;
}

/* Кнопка 388×57 */
.pc-code__copy.btn-copy_copied::after {
    content: none;
}

.pc-code:has(.btn-copy_copied) .pc-code__value {
    color: var(--pk-blue);
}

/* Кнопка 388×57: Manrope Bold 18px белым, значок 14px через 10px */
.pc-use {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 388px;
    min-width: 0;
    height: 57px;
    padding: 0 16px;
    background: var(--pk-blue);
    border-radius: var(--pk-radius);
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--pk-white);
    text-decoration: none;
}

.pc-use::after {
    content: "";
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center no-repeat;
    background-size: 14px 14px;
}

.pc-use:hover,
.pc-use:focus {
    background: #0142c4;
    color: var(--pk-white);
    text-decoration: none;
}

/* Подпись под полем и кнопкой: Inter Medium 14px, чёрная
   при прозрачности 50%, по центру верхней плашки */
.pc-card__hint {
    margin: 18px 0 0;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    color: #000;
    opacity: 0.5;
}

/* Строка пометок — отдельная плашка 850×56, через 18px под верхней */
.pc-card__notes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    min-height: 56px;
    margin-top: 18px;
    padding: 0 24px;
    background: #f0f4fb;
    border-radius: var(--pk-radius);
}

.pc-card__notes span {
    position: relative;
    font-family: var(--pk-manrope);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--pk-blue);
    opacity: 0.5;
}

/* Точки-разделители 3px между пометками */
.pc-card__notes span + span::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    width: 3px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 50%;
    background: currentColor;
}

/* --- Панель «How to use the code» --- */
.pc-steps {
    flex: 0 0 310px;
    width: 310px;
    min-height: 465px;
    padding: 24px;
    background: var(--pk-white);
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
}

.pc-steps__title {
    margin-bottom: 36px;
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

.pc-steps__list {
    counter-reset: pc-step;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Кружки на 85, 210 и 328 от верха панели → шаг 125 и 118 */
.pc-steps__list li {
    position: relative;
    display: flex;
    gap: 16px;
    padding-bottom: 54px;
}

.pc-steps__list li:last-child {
    padding-bottom: 0;
}

/* Линии между кружками: 66px и 59px */
.pc-steps__list li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 31px;
    top: 63px;
    width: 1px;
    height: calc(100% - 63px);
    background: rgba(2, 80, 232, 0.2);
}

.pc-steps__icon {
    position: relative;
    flex: 0 0 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 63px;
    height: 63px;
    background: var(--pk-chip);
    border-radius: 50%;
}

.pc-steps__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 4px;
}

/* Номер шага 15px перед названием */
.pc-steps__name {
    position: relative;
    padding-left: 22px;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Номер шага — синий кружок 15px с белой цифрой Inter SemiBold 10px */
.pc-steps__name::before {
    counter-increment: pc-step;
    content: counter(pc-step);
    position: absolute;
    left: 0;
    top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background: var(--pk-blue);
    border: 1px solid rgba(2, 80, 232, 0.1);
    border-radius: 40px;
    font-family: var(--pk-inter);
    font-size: 10px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    color: var(--pk-white);
}

/* Название на 264, текст на 292 → 28px */
.pc-steps__desc {
    max-width: 186px;
    margin-top: 6px;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    opacity: 0.7;
}

/* --- Текст и оглавление --- */
.promo-show__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 199px;
}

.promo-show__main {
    flex: 1 1 731px;
    min-width: 0;
    max-width: 731px;
}

/* Плашка-предупреждение 731×60 внутри текста */
.promo-show .wysiwyg-content blockquote {
    min-height: 60px;
    padding: 18px 24px;
}

@media (max-width: 1199.98px) {
    .promo-show__top,
    .promo-show__body {
        gap: 30px;
    }
}

/* --- Мобильная версия страницы промокода ---
   Макет «Промокоды моб. внут.» (393, контент 345 от x=24):
     карточка   345×492, белая, радиус 10, тень 0 0 16px, поля 14
     логотип    80×80, рамка rgba(2,80,232,.2), радиус 12
     заголовок  Manrope Bold 20px/1.3, tracking 0.4, справа от логотипа
     значки     2×2: колонки на 14 и 193, ряды на 121 и 173;
                иконка 35px, значение Inter SemiBold 12px,
                подпись Inter Medium 12px при прозрачности 70%
     плашка     317×174, #f0f4fb, радиус 12; поле 289×45 белое
                с пунктирной рамкой, синий блок 71×45 справа,
                код Inter Bold 18px, tracking 1.08;
                кнопка 289×45 через 8px, Manrope Bold 18px белым;
                подпись через 14px, Manrope Medium 12px при 50%
     пометки    плашка 317×54 через 14px, Manrope SemiBold 12px
                синим при прозрачности 50%, точки 3px
     шаги       345×329 через 20px, белая, рамка rgba(2,80,232,.2),
                радиус 16; заголовок Manrope ExtraBold 18px;
                кружки 57px, шаг 99; название Manrope ExtraBold 14px,
                текст Manrope Medium 12px при 70%
*/
@media (max-width: 991.98px) {
    .promo-show__top {
        display: block;
        margin-bottom: 32px;
    }

    .pc-card {
        display: block;
        max-width: none;
        min-height: 0;
        padding: 14px;
        border-radius: 10px;
    }

    /* Логотип и заголовок в строке, значки под ними во всю ширину:
       в макете логотип 80×80 в (14,14), заголовок справа от него,
       значки начинаются на 121 — то есть ниже обоих. */
    .pc-card__head {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        align-items: center;
        column-gap: 14px;
    }

    .pc-card__intro {
        display: contents;
    }

    .pc-card__logo {
        grid-column: 1;
        grid-row: 1;
        flex: none;
        width: 80px;
    }

    .pc-card__logo img {
        width: 80px;
        height: 80px;
        padding: 8px;
        border-radius: 12px;
    }

    .pc-card__title {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        max-width: none;
        margin-top: 0;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: 0.02em;
    }

    /* Значки в две колонки. В макете они начинаются на 38 и 217
       при контенте 317, то есть колонки 179 и 138. Ширины заданы
       долями, а не числами: на экранах уже 393 фиксированная колонка
       выдавливала второй значок за край.
       Ряды на 121 и 173 → между ними 17px. */
    .pc-card__badges {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: minmax(0, 179fr) minmax(0, 138fr);
        align-items: start;
        gap: 17px 0;
        margin-top: 27px;
    }

    /* Иконка 35px, текст в 47px от её левого края → зазор 12px */
    .pc-badge {
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
        padding-right: 12px;
    }

    .pc-badge__text {
        min-width: 0;
    }

    .pc-badge__value,
    .pc-badge__label {
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    /* Плашка с кодом: поле и кнопка друг под другом */
    .pc-card__action {
        margin: 24px 0 0;
    }

    .pc-card__panel {
        min-height: 0;
        padding: 14px;
        border-radius: 12px;
    }

    .pc-card__row {
        display: block;
    }

    .pc-code {
        height: 45px;
        border-radius: 10px;
    }

    .pc-code__value {
        padding: 0 71px 0 0;
        font-size: 18px;
        letter-spacing: 0.06em;
    }

    .pc-code__copy {
        width: 71px;
        height: 45px;
        border-radius: 10px;
        font-size: 14px;
    }

    .pc-code__copy::after {
        width: 15px;
        height: 15px;
        margin: -7.5px 0 0 -7.5px;
        background-size: 15px 15px;
    }

    /* Поле 408…453, кнопка на 461 → 8px */
    .pc-use {
        height: 45px;
        margin-top: 8px;
        border-radius: 10px;
        font-size: 18px;
    }

    /* Кнопка 461…506, подпись на 520 → 14px */
    .pc-card__hint {
        margin-top: 14px;
        font-family: var(--pk-manrope);
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    /* Плашка пометок 317×54 через 14px */
    .pc-card__notes {
        display: block;
        min-height: 54px;
        margin-top: 14px;
        padding: 8px 14px;
        border-radius: 12px;
        gap: 0;
    }

    /* Точка-разделитель встроена в строку, а не привязана к краю:
       при переносе текста она иначе уезжала к середине блока */
    .pc-card__notes span {
        display: inline;
        margin: 0;
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    .pc-card__notes span + span::before {
        position: static;
        display: inline-block;
        width: 3px;
        height: 3px;
        margin: 0 8px 2px;
        border-radius: 50%;
        background: currentColor;
        vertical-align: middle;
    }

    /* В макете первая строка кончается точкой на 337 — она стоит
       после «New users only», хотя третья пометка уже на новой строке */
    .pc-card__notes span:nth-child(2)::after {
        content: "";
        display: inline-block;
        width: 3px;
        height: 3px;
        margin: 0 0 2px 8px;
        border-radius: 50%;
        background: currentColor;
        vertical-align: middle;
    }

    .pc-card__notes span:nth-child(3) {
        display: block;
        margin-top: 4px;
    }

    .pc-card__notes span:nth-child(3)::before {
        content: none;
    }

    /* Панель шагов через 20px под карточкой */
    .pc-steps {
        width: auto;
        min-height: 0;
        margin-top: 20px;
        padding: 14px;
    }

    .pc-steps__title {
        margin-bottom: 33px;
        font-size: 18px;
        font-weight: 800;
    }

    /* Кружки 57px, шаг 99 → до следующего 42px */
    .pc-steps__list li {
        gap: 20px;
        padding-bottom: 42px;
    }

    .pc-steps__list li:not(:last-child)::before {
        left: 28px;
        top: 57px;
        height: calc(100% - 57px);
    }

    .pc-steps__icon {
        flex: 0 0 57px;
        width: 57px;
        height: 57px;
    }

    .pc-steps__icon img {
        width: 20px;
        height: 20px;
    }

    .pc-steps__text {
        padding-top: 0;
    }

    .pc-steps__name {
        padding-left: 29px;
        font-family: var(--pk-manrope);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    .pc-steps__name::before {
        top: 2px;
    }

    /* Название на 735, текст на 759 → 24px, но с учётом строки 4px */
    .pc-steps__desc {
        max-width: 240px;
        margin-top: 4px;
        margin-left: 29px;
        font-family: var(--pk-manrope);
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    .promo-show__body {
        display: block;
    }

    .promo-show__main {
        max-width: none;
    }
}

/* Блок комментариев на странице промокода — той же ширины,
   что текст и панель автора */
.promo-show .common-comments {
    max-width: 731px;
    margin-top: 50px;
}

@media (max-width: 991.98px) {
    .promo-show .common-comments {
        max-width: none;
        margin-top: 32px;
    }
}



/* =============================================================
   17. ОБЫЧНЫЕ СТРАНИЦЫ И КОНТАКТЫ
   Собрано по макету «Контакты д.» (1440, контент 1240 от x=100).

     H1        (100,179) ширина 777, Manrope Bold 46px
     текст     (100,263) ширина 731, Inter 16px
     картинка  598×359 на (806,189)
     панель    1340×216 на (50,621) — шире контента на 50px с каждой
               стороны; фон #f5f8fc, радиус 16, тень 0 0 16px
     эйбрау    (100,645) Manrope ExtraBold 18px, #0250e8, прописными
     заголовок (100,692) Manrope Bold 34px, tracking 1.36
     текст     (100,756) Inter Regular 16px
     плашки    291×96 на (622,681) и 349×96 на (957,681), белые,
               радиус 16, тень; кружок 68px, значок 30px синим,
               заголовок Manrope Bold 22px, текст Inter SemiBold 16px
     список    точки 7px, текст в 21px, шаг 38
   ============================================================= */

.pk-plain-hero_page .pk-plain-hero__media {
    flex: 0 0 598px;
    width: 598px;
    margin-top: 10px;
}

.pk-plain-hero_page .pk-plain-hero__title {
    max-width: 777px;
}

.pk-plain-hero_page .pk-plain-hero__subtitle {
    max-width: 731px;
}

/* Текст шапки 731×308: два абзаца с пустой строкой между ними.
   При Inter 16px и высоте строки 1.4 это 22px. */
.pk-plain-hero_page .pk-plain-hero__subtitle p {
    font-size: 16px;
    font-weight: 400;
}

.pk-plain-hero_page .pk-plain-hero__subtitle p + p {
    margin-top: 22px;
}

/* --- Панель контактов ---
   На странице контактов картинки в панели нет, только на «О нас» */
.pages-show__content .pk-contact-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 216px;
    padding: 24px 50px;
    margin: 50px -50px;
    background: #f5f8fc;
    overflow: hidden;
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.pk-contact-panel__eyebrow {
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pk-blue);
}

/* Эйбрау 645…670, заголовок на 692 → 22px */
.pk-contact-panel__title {
    margin-top: 22px;
    font-family: var(--pk-manrope);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Заголовок 692…740, текст на 756 → 16px */
/* Заголовка в панели нет, текст идёт под эйбрау через 22px —
   тот же отступ, что был до заголовка в макете */
.pages-show__content .pk-contact-panel__text p {
    margin: 22px 0 0;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Плашки одной высоты 96, но разной длины — в макете 291 и 349:
   вторая длиннее, чтобы «We respond within 48 hours» встало в строку */
.pk-contact-plates {
    display: flex;
    align-items: stretch;
    gap: 44px;
}

/* Картинка справа: 341×294 на десктопе, 217×201 на мобильном.
   В макете она выходит за верхний и правый край панели,
   поэтому обрезки у панели нет. */
.pk-contact-panel__image {
    position: absolute;
    right: 20px;
    bottom: -20px;
    width: 341px;
    pointer-events: none;
}

/* --- Панель контактов на странице «О нас» ---
   Плашки мельче, чем на странице контактов: 263×81 и 233×81
   при кружках 53px и зазоре 24px; панель 1340×233. */
.pages-show__content .pk-contact-panel_about {
    min-height: 233px;
    padding-right: 380px;
}

.pk-contact-panel_about .pk-contact-plates {
    gap: 24px;
}

.pk-contact-panel_about .pk-contact-plate {
    min-height: 81px;
    padding: 12px 14px 12px 81px;
}

.pk-contact-panel_about .pk-contact-plate::before {
    width: 53px;
    height: 53px;
    margin-top: -26.5px;
    background-size: 24px 24px;
}

.pk-contact-panel_about .pk-contact-plate__title {
    font-size: 18px;
}

.pages-show__content .pk-contact-panel_about .pk-contact-plate__text p,
.pages-show__content .pk-contact-panel_about .pk-contact-plate__text a {
    margin-top: 6px;
    font-size: 14px;
}

/* На мобильном подставляется свой файл — в макете там конверт
   с тенью, на десктопе без неё */
.pages-show__content .pk-contact-panel__image picture,
.pages-show__content .pk-contact-panel__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Кружок со значком рисует сама плашка: отдельный пустой тег
   редактор вырезает при сохранении. Порядок плашек задаёт значок. */
.pk-contact-plate {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 96px;
    padding: 14px 14px 14px 104px;
    background: var(--pk-white);
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.pk-contact-plate::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 68px;
    height: 68px;
    margin-top: -34px;
    background-color: var(--pk-white);
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
}

/* Первая плашка — конверт, вторая — часы */
.pk-contact-plate:first-child::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%230250e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
}

.pk-contact-plate:last-child::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%230250e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E");
}

.pk-contact-plate__title {
    font-family: var(--pk-manrope);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #000;
}

/* Заголовок 695…726, текст на 735 → 9px.
   Строка не переносится: длина плашки подстраивается под неё,
   как в макете, где вторая плашка шире первой. */
.pages-show__content .pk-contact-plate__text p,
.pages-show__content .pk-contact-plate__text a {
    display: block;
    margin: 9px 0 0;
    white-space: nowrap;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.pages-show__content .pk-contact-plate__text p {
    color: #000;
    opacity: 0.7;
}

.pages-show__content .pk-contact-plate__text a {
    color: var(--pk-blue);
    text-decoration: none;
}

.pages-show__content .pk-contact-plate__text a:hover {
    text-decoration: underline;
}

/* --- Текст страницы --- */
.pages-show__content .wysiwyg-content > h2,
.pages-show__content .wysiwyg-content > p,
.pages-show__content .wysiwyg-content > ul,
.pages-show__content .wysiwyg-content > ol,
.pages-show__content .wysiwyg-content > blockquote,
.pages-show__content .wysiwyg-content > table {
    max-width: 731px;
}

/* Заголовок «What You Can Contact Us About» на 873, панель
   кончается на 837 → 36px */
.pages-show__content .wysiwyg-content h2 {
    margin: 36px 0 24px;
    font-size: 22px;
}

/* Пункты списка с шагом 38 при высоте строки 22 → 16px */
.pages-show__content .wysiwyg-content ul > li {
    margin-bottom: 16px;
}

@media (max-width: 1199.98px) {
    .pk-plain-hero_page .pk-plain-hero__media {
        flex: 0 1 598px;
        width: auto;
    }

    .pages-show__content .pk-contact-panel {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        margin: 40px 0;
    }
}

@media (max-width: 991.98px) {
    .pk-plain-hero_page .pk-plain-hero__title,
    .pk-plain-hero_page .pk-plain-hero__subtitle {
        max-width: none;
    }

    .pk-plain-hero_page .pk-plain-hero__media {
        width: 100%;
        max-width: 598px;
        margin: 20px auto 0;
    }

    .pk-plain-hero_page .pk-plain-hero__subtitle p {
        font-size: 14px;
    }

    .pages-show__content .pk-contact-panel {
        gap: 20px;
        min-height: 0;
        padding: 16px;
        margin: 32px 0;
        overflow: hidden;
    }

    .pk-contact-panel__title {
        margin-top: 12px;
        font-size: 20px;
    }

    .pk-contact-plates {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    .pk-contact-plate {
        min-height: 0;
        padding-left: 78px;
    }

    .pk-contact-plate::before {
        left: 14px;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        background-size: 24px 24px;
    }

    .pk-contact-plate__title {
        font-size: 16px;
    }

    .pages-show__content .pk-contact-plate__text p,
    .pages-show__content .pk-contact-plate__text a {
        margin-top: 4px;
        font-size: 14px;
    }

    .pages-show__content .wysiwyg-content h2 {
        margin: 32px 0 16px;
        font-size: 20px;
    }
}


/* --- Мобильная версия страницы контактов ---
   Макет «Контакты моб.» (393, контент 345 от x=24):
     H1        (24,141) ширина 319, Manrope Bold 26px
     картинка  396×230 на (-1,187) — во всю ширину экрана, без полей
     текст     (24,429) ширина 317, Inter 16px
     панель    393×364 на (0,571) — тоже во всю ширину, фон #f0f4fb,
               без скругления и тени
     эйбрау    (38,603) Manrope ExtraBold 14px синим прописными
     заголовок (38,630) Manrope ExtraBold 18px
     текст     (38,655) ширина 317
     плашки    белого фона нет: кружок 60px со значком 24px,
               заголовок Manrope Bold 18px в 112px от края,
               текст Inter SemiBold 14px под ним
     список    точки 7px, текст в 21px, шаг 32
*/
@media (max-width: 991.98px) {
    /* Порядок в макете: заголовок 141, картинка 187, текст 429 —
       то есть картинка между ними, а в разметке она после текста */
    .pk-plain-hero_page {
        display: flex;
        flex-direction: column;
    }

    .pk-plain-hero_page .pk-plain-hero__text {
        display: contents;
    }

    .pk-plain-hero_page .pk-plain-hero__title {
        order: 1;
    }

    /* Картинка во всю ширину экрана */
    .pk-plain-hero_page .pk-plain-hero__media {
        order: 2;
        flex: none;
        width: auto;
        max-width: none;
        align-self: stretch;
        margin: 22px -24px 0;
    }

    .pk-plain-hero_page .pk-plain-hero__image img {
        width: 100%;
        height: auto;
    }

    /* Картинка 187…417, текст на 429 → 12px */
    .pk-plain-hero_page .pk-plain-hero__subtitle {
        order: 3;
        margin-top: 12px;
    }

    .pk-plain-hero_page .pk-plain-hero__subtitle p {
        font-size: 16px;
    }

    .pk-plain-hero_page .pk-plain-hero__subtitle p + p {
        margin-top: 16px;
    }

    /* Панель во всю ширину, без скругления и тени */
    .pages-show__content .pk-contact-panel {
        display: block;
        padding: 32px 38px;
        margin: 32px -24px;
        background: #f0f4fb;
        border-radius: 0;
        box-shadow: none;
    }

    .pk-contact-panel__eyebrow {
        font-size: 14px;
        letter-spacing: 0.02em;
    }

    /* Эйбрау 603…622, заголовок на 630 → 8px */
    .pk-contact-panel__title {
        margin-top: 8px;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.02em;
    }

    .pages-show__content .pk-contact-panel__text p {
        max-width: 317px;
        margin-top: 12px;
    }

    /* Текст кончается на 735, первая плашка на 763 → 28px */
    .pk-contact-plates {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        margin-top: 28px;
    }

    /* Белого фона у плашек в мобильном макете нет.
       Кружок 60px, текст в 112px от края → поле слева 77px */
    .pk-contact-plate {
        padding: 0 0 0 77px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .pk-contact-plate::before {
        left: 0;
        width: 60px;
        height: 60px;
        margin-top: -30px;
        background-size: 24px 24px;
    }

    .pk-contact-plate__title {
        font-size: 18px;
        letter-spacing: 0.02em;
    }

    /* Заголовок 765…790, текст на 800 → 10px */
    .pages-show__content .pk-contact-plate__text p,
    .pages-show__content .pk-contact-plate__text a {
        margin-top: 10px;
        white-space: normal;
        font-size: 14px;
        letter-spacing: 0.02em;
    }

    /* Панель кончается на 935, заголовок раздела на 967 → 32px */
    .pages-show__content .wysiwyg-content h2 {
        margin: 32px 0 20px;
        font-size: 18px;
    }

    /* Пункты с шагом 32 при высоте строки 20 → 12px */
    .pages-show__content .wysiwyg-content ul > li {
        margin-bottom: 12px;
    }
}


/* =============================================================
   18. СТРАНИЦА «О НАС»
   Собрано по макету «О нас д.» (1440, контент 1240 от x=100).

     шапка     панель 1340×352 на (50,179), градиент #fefefe → #f0f4fb
               слева направо, радиус 16, тень; H1 (100,229) ширина 737,
               Manrope Bold 46px; текст (100,313) Inter Medium 20px;
               картинка 541×352 справа, вплотную к краю панели
     разделы   панели 1340, фон #f5f8fc, радиус 16;
               эйбрау Manrope ExtraBold 18px синим прописными,
               заголовок Manrope Bold 34px, текст Inter 16px
     карточки  391×409, белые, рамка rgba(2,80,232,.2), радиус 16;
               картинка 343×244 радиус 16; номер 29×28 синим кружком,
               Inter SemiBold 18px белым; название Inter SemiBold 16px,
               текст Inter Medium 14px при прозрачности 70%
     правила   391×139, белые, рамка та же; значок 91px с рамкой
               и радиусом 16; название 16px, текст 14px при 70%
     автор     фото 323×410 радиус 16; имя Manrope Bold 34px,
               должность Inter 16px, метки высотой 42 радиус 10,
               описание Inter 16px шириной 873;
               ниже две строки с иконками 80px, разделённые линиями
   ============================================================= */

/* Панель 1340×352: H1 в 50px от верха, текст до 481, низ на 531.
   Высота задана, иначе панель растёт под пропорции картинки. */
.pages-show .pk-plain-hero_page {
    align-items: center;
    gap: 0;
    height: 352px;
    padding: 0 0 0 50px;
    margin: 0 -50px 50px;
    background: linear-gradient(to right, #fefefe, #f0f4fb);
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Картинка 541×352 вплотную к правому краю панели */
.pages-show .pk-plain-hero_page .pk-plain-hero__media {
    align-self: stretch;
    flex: 0 0 541px;
    width: 541px;
    height: 100%;
    margin: 0;
}

.pages-show .pk-plain-hero_page .pk-plain-hero__image,
.pages-show .pk-plain-hero_page .pk-plain-hero__image img {
    height: 100%;
}

.pages-show .pk-plain-hero_page .pk-plain-hero__image img {
    width: 100%;
    object-fit: cover;
}

/* Текст 737 шириной, до картинки 62px */
.pages-show .pk-plain-hero_page .pk-plain-hero__text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 737px;
    padding-right: 62px;
}

/* --- Разделы --- */
/* Панели разделов: фон #f5f8fc с тенью 0 0 16px.
   У «Meet the authors» фон белый — правило ниже. */
.pages-show__content .pk-about-section {
    padding: 44px 50px;
    margin: 0 -50px 50px;
    background: #f5f8fc;
    border-radius: var(--pk-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.pages-show__content .pk-about-section_light {
    background: var(--pk-white);
}

.pk-about-section__eyebrow {
    font-family: var(--pk-manrope);
    font-size: 18px;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pk-blue);
}

/* Эйбрау 631…655, заголовок на 677 → 22px */
.pk-about-section__title {
    margin-top: 22px;
    font-family: var(--pk-manrope);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Заголовок 677…724, текст на 739 → 15px */
.pages-show__content p.pk-about-section__lead {
    max-width: 731px;
    margin: 15px 0 0;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* --- Карточки «What we cover» --- */
/* Текст 739…761, карточки на 800 → 39px; шаг 424 → зазор 34 */
.pk-about-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 391px));
    justify-content: space-between;
    gap: 34px;
    margin-top: 39px;
}

/* Карточки ведут в свои разделы, поэтому это ссылки:
   подчёркивание снимаем, цвет наследуем от текста */
.pk-about-card {
    display: flex;
    flex-direction: column;
    min-height: 409px;
    padding: 24px;
    background: var(--pk-white);
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.pk-about-card:hover,
.pk-about-card:focus {
    color: inherit;
    text-decoration: none;
    border-color: rgba(2, 80, 232, 0.4);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.pk-about-card__image {
    height: 244px;
    border-radius: var(--pk-radius);
    overflow: hidden;
}

.pages-show__content .pk-about-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Картинка 824…1068, номер и название на 1092 → 24px */
.pk-about-card__body {
    position: relative;
    padding-left: 41px;
    margin-top: 24px;
}

.pk-about-card__title {
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Номер 29×28 синим кружком, Inter SemiBold 18px белым */
.pk-about-card__body::before {
    counter-increment: pk-about-card;
    content: counter(pk-about-card);
    position: absolute;
    left: 0;
    top: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 28px;
    background: var(--pk-blue);
    border: 1px solid rgba(2, 80, 232, 0.1);
    border-radius: 29px;
    font-family: var(--pk-inter);
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    color: var(--pk-white);
}

.pk-about-cards {
    counter-reset: pk-about-card;
}

/* Название 1095…1117, текст на 1125 → 8px */
.pages-show__content .pk-about-card__body p {
    max-width: 302px;
    margin: 8px 0 0;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    opacity: 0.7;
}

/* --- Правила --- */
/* Текст 1468…1512, карточки на 1544 → 32px; шаг 425 и 171 */
.pk-about-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 391px));
    justify-content: space-between;
    gap: 32px 34px;
    margin-top: 32px;
}

.pk-about-rule {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-height: 139px;
    padding: 24px;
    background: var(--pk-white);
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
}

.pk-about-rule__icon {
    flex: 0 0 91px;
    width: 91px;
    height: 91px;
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: var(--pk-radius);
    overflow: hidden;
}

.pages-show__content .pk-about-rule__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pk-about-rule__title {
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* Название 1568…1590, текст на 1598 → 8px */
.pages-show__content .pk-about-rule__body p {
    margin: 8px 0 0;
    font-family: var(--pk-inter);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    opacity: 0.7;
}

/* --- Автор --- */
/* Заголовок 2050…2097, блок на 2129 → 32px */
.pk-author {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    margin-top: 32px;
}

.pk-author__photo {
    flex: 0 0 323px;
    width: 323px;
    height: 410px;
    border-radius: var(--pk-radius);
    overflow: hidden;
}

.pages-show__content .pk-author__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pk-author__info {
    min-width: 0;
}

/* Имя Manrope Bold 28px с подчёркиванием — в макете это ссылка */
.pk-author__name {
    font-family: var(--pk-manrope);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    text-decoration: underline;
}

.pages-show__content .pk-author__name a {
    color: inherit;
    text-decoration: underline;
}

/* Имя 2129…2168, должность на 2176 → 8px.
   Должность синяя, Inter Medium 16px */
.pk-author__role {
    margin-top: 8px;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--pk-blue);
}

/* Должность 2176…2198, метки на 2214 → 16px */
/* Метки на 479, 629, 841 и 1078 при ширинах 122, 184, 209 → зазор 28 */
.pk-author__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px 28px;
    margin-top: 16px;
    text-align: left;
}

/* Метки высотой 42, фон #f3f6fe, рамка rgba(2,80,232,.2), радиус 8;
   значок 20px синим в 12px от края, текст Inter Regular 16px в 44px */
.pk-author__chips span {
    display: inline-flex;
    align-items: center;
    height: 42px;
    /* Текст в 44px от левого края и в 12px до правого:
       так в макете получаются ширины 122, 184, 209 и 224 */
    padding: 0 12px 0 44px;
    background: var(--pk-chip);
    border: 1px solid rgba(2, 80, 232, 0.2);
    border-radius: 8px;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 20px 20px;
}

/* Значки меток: основатель, разработчик, исследователь, опыт */
.pk-author__chips span:nth-child(1) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230250e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 7v5c0 5 3.4 8.6 8 10 4.6-1.4 8-5 8-10V7z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.pk-author__chips span:nth-child(2) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230250e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 8-5 4 5 4M16 8l5 4-5 4M14 4l-4 16'/%3E%3C/svg%3E");
}

.pk-author__chips span:nth-child(3) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230250e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E");
}

.pk-author__chips span:nth-child(4) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230250e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E");
}

/* Метки 2214…2256, описание на 2280 → 24px */
.pages-show__content .pk-author__info p {
    max-width: 873px;
    margin: 24px 0 0;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

/* --- Строки под автором --- */
/* Линии на 2568 и 2684, строки на 2586 и 2702 */
.pk-author-rows {
    margin-top: 24px;
}

.pk-author-row {
    display: flex;
    align-items: center;
    gap: 41px;
    padding: 18px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.pk-author-row__icon {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    background: var(--pk-chip);
    border-radius: 50%;
    overflow: hidden;
}

.pages-show__content .pk-author-row__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
}

.pk-author-row__label {
    flex: 0 0 256px;
    font-family: var(--pk-inter);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
}

.pk-author-row__value {
    min-width: 0;
    font-family: var(--pk-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #000;
    opacity: 0.7;
}

.pages-show__content .pk-author-row__value a {
    color: var(--pk-blue);
    opacity: 1;
    text-decoration: none;
}

.pages-show__content .pk-author-row__value a:hover {
    text-decoration: underline;
}

@media (max-width: 1199.98px) {
    .pages-show .pk-plain-hero_page {
        height: auto;
        padding: 30px;
        margin: 0 0 40px;
    }

    .pages-show .pk-plain-hero_page .pk-plain-hero__media {
        flex: 0 1 400px;
        width: auto;
    }

    .pages-show .pk-plain-hero_page .pk-plain-hero__text {
        padding-right: 30px;
    }

    .pages-show__content .pk-about-section {
        padding: 30px;
        margin: 0 0 40px;
    }

    .pk-about-cards,
    .pk-about-rules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pk-author {
        gap: 30px;
    }
}

@media (max-width: 991.98px) {
    .pages-show .pk-plain-hero_page {
        height: auto;
        padding: 0;
        margin: 0 0 32px;
        background: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .pages-show .pk-plain-hero_page .pk-plain-hero__text {
        max-width: none;
        padding-right: 0;
    }

    .pages-show .pk-plain-hero_page .pk-plain-hero__media {
        align-self: auto;
        height: auto;
    }

    .pages-show .pk-plain-hero_page .pk-plain-hero__image,
    .pages-show .pk-plain-hero_page .pk-plain-hero__image img {
        height: auto;
    }

    .pages-show__content .pk-about-section {
        padding: 20px 14px;
        margin: 0 -14px 32px;
        border-radius: 0;
    }

    .pk-about-section__eyebrow {
        font-size: 14px;
    }

    .pk-about-section__title {
        margin-top: 8px;
        font-size: 20px;
    }

    .pages-show__content p.pk-about-section__lead {
        margin-top: 12px;
        font-size: 14px;
    }

    .pk-about-cards,
    .pk-about-rules {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 20px;
    }

    .pk-about-card {
        min-height: 0;
        padding: 14px;
    }

    .pk-about-card__image {
        height: auto;
        aspect-ratio: 343 / 244;
    }

    .pk-about-rule {
        min-height: 0;
        gap: 14px;
        padding: 14px;
    }

    .pk-about-rule__icon {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
    }

    .pk-author {
        display: block;
        margin-top: 20px;
    }

    .pk-author__photo {
        width: 100%;
        max-width: 323px;
        height: auto;
        aspect-ratio: 323 / 410;
        margin-bottom: 20px;
    }

    .pk-author__name {
        font-size: 22px;
    }

    .pk-author__role,
    .pages-show__content .pk-author__info p {
        font-size: 14px;
    }

    .pk-author__chips {
        gap: 8px;
    }

    .pk-author__chips span {
        height: 34px;
        padding: 0 12px 0 34px;
        font-size: 13px;
        background-position: 10px center;
        background-size: 16px 16px;
    }

    .pk-author-row {
        flex-wrap: wrap;
        gap: 12px 14px;
        padding: 14px 0;
    }

    .pk-author-row__icon {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
    }

    .pages-show__content .pk-author-row__icon img {
        padding: 12px;
    }

    .pk-author-row__label {
        flex: 1 1 auto;
        font-size: 16px;
    }

    .pk-author-row__value {
        flex: 1 1 100%;
        font-size: 14px;
    }
}


/* --- Мобильная версия страницы «О нас» ---
   Макет «О нас моб.» (393, контент 345 от x=24):
     шапка      панель 393×611 во всю ширину; H1 (24,137) 26px,
                картинка 326×242 по центру, текст (24,445) ширина 340
     разделы    «What we cover» и «Meet the authors» без панели,
                «Our editorial standards» и «Contact us» — панели
                во всю ширину экрана
     заголовки  эйбрау 14px, заголовок раздела 20px
     карточки   345×114, картинка 121×86 слева, номер 23px,
                название и текст справа в 140px от края
     правила    345×119, значок 91px слева, текст в 125px
     автор      фото 130×166 слева, имя 20px, метки высотой 26
     строки     значок 69px, подпись 16px, значение 14px
*/
@media (max-width: 991.98px) {
    /* Шапка: картинка между заголовком и текстом, панель во всю ширину */
    .pages-show .pk-plain-hero_page {
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: none;
        height: auto;
        padding: 73px 24px 32px;
        margin: -64px -10px 32px;
        background: linear-gradient(to bottom, #fefefe, #f0f4fb);
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .pages-show .pk-plain-hero_page .pk-plain-hero__text {
        display: contents;
    }

    .pages-show .pk-plain-hero_page .pk-plain-hero__title {
        order: 1;
        font-size: 26px;
    }

    /* H1 137…171, картинка на 184 → 13px */
    .pages-show .pk-plain-hero_page .pk-plain-hero__media {
        order: 2;
        align-self: center;
        flex: none;
        width: 326px;
        max-width: 100%;
        height: auto;
        margin: 13px 0 0;
    }

    .pages-show .pk-plain-hero_page .pk-plain-hero__image,
    .pages-show .pk-plain-hero_page .pk-plain-hero__image img {
        height: auto;
    }

    /* Картинка 184…426, текст на 445 → 19px */
    .pages-show .pk-plain-hero_page .pk-plain-hero__subtitle {
        order: 3;
        margin-top: 19px;
    }

    /* «What we cover» и «Meet the authors» идут без панели */
    .pages-show__content .pk-about-section {
        padding: 0;
        margin: 0 0 32px;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* «Our editorial standards» — панель во всю ширину экрана */
    .pages-show__content .pk-about-section:nth-of-type(2) {
        width: auto;
        max-width: none;
        padding: 32px 24px;
        margin: 0 -10px 32px;
        background: #f5f8fc;
    }

    /* --- Карточки «What we cover»: картинка слева, текст справа --- */
    .pk-about-cards {
        gap: 17px;
    }

    .pk-about-card {
        display: grid;
        grid-template-columns: 137px minmax(0, 1fr);
        align-items: start;
        column-gap: 0;
        min-height: 114px;
        padding: 14px 14px 14px 8px;
    }

    .pk-about-card__image {
        grid-column: 1;
        width: 121px;
        height: 86px;
        aspect-ratio: auto;
    }

    /* Номер 23px, название в 175px от края карточки */
    .pk-about-card__body {
        grid-column: 2;
        padding-left: 35px;
        margin-top: 0;
    }

    .pk-about-card__body::before {
        top: 0;
        width: 23px;
        height: 23px;
        border-radius: 23px;
        font-size: 14px;
    }

    /* Название 878…898, текст на 908 → 10px */
    .pages-show__content .pk-about-card__body p {
        max-width: 196px;
        margin-top: 10px;
        margin-left: -35px;
    }

    /* --- Правила --- */
    .pk-about-rules {
        gap: 12px;
    }

    .pk-about-rule {
        gap: 20px;
        min-height: 119px;
        padding: 14px;
    }

    .pk-about-rule__icon {
        flex: 0 0 91px;
        width: 91px;
        height: 91px;
    }

    /* Название на 1484, текст на 1514 → 10px */
    .pages-show__content .pk-about-rule__body p {
        max-width: 210px;
        margin-top: 10px;
    }

    /* --- Автор: фото слева, сведения справа --- */
    /* Фото слева, сведения справа отдельным блоком. Раскрывать его
       в сетку нельзя: ряды растягивались по высоте фото и между
       именем, должностью и метками появлялось лишнее место. */
    .pk-author {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-top: 24px;
    }

    .pk-author__photo {
        flex: 0 0 131px;
        width: 131px;
        height: 166px;
        aspect-ratio: auto;
        margin: 0;
    }

    .pk-author__info {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }

    .pk-author__name {
        font-size: 20px;
    }

    /* Имя 2285…2311, должность на 2317 → 6px.
       Должность Inter Medium 12px синим, ширина 203 */
    .pk-author__role {
        max-width: 203px;
        margin-top: 6px;
        font-size: 12px;
    }

    /* Должность 2317…2351, метки на 2361 → 10px; метки высотой 26.
       Все ряды начинаются от левого края, как имя выше */
    .pk-author__chips {
        justify-content: flex-start;
        /* Ряды на 2361, 2393 и 2425 → шаг 32 при высоте метки 26,
           значит между рядами 6px */
        gap: 6px 6px;
        margin-top: 10px;
        line-height: 0;
        text-align: left;
    }

    /* Метки 26px: значок 12px в 8px от края, текст Inter Regular 10px
       в 28px — так выходят ширины 78, 116, 130 и 139 */
    .pk-author__chips span {
        height: 26px;
        padding: 0 8px 0 28px;
        font-size: 10px;
        line-height: 1.4;
        letter-spacing: 0.04em;
        background-position: 8px center;
        background-size: 12px 12px;
    }

    /* Описание идёт под фото, во всю ширину: сведения справа короче
       фото, поэтому текст выносится отрицательным отступом слева */
    .pages-show__content .pk-author__info p {
        max-width: none;
        margin: 16px 0 0 -147px;
        font-size: 14px;
    }

    /* --- Строки под автором --- */
    .pk-author-row {
        display: grid;
        grid-template-columns: 69px minmax(0, 1fr);
        column-gap: 12px;
        align-items: center;
        gap: 0 12px;
        padding: 18px 0;
    }

    .pk-author-row__icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        flex: none;
        width: 69px;
        height: 69px;
    }

    .pages-show__content .pk-author-row__icon img {
        padding: 15px;
    }

    .pk-author-row__label {
        grid-column: 2;
        flex: none;
        font-size: 16px;
    }

    /* Подпись 2925…2945, значение на 2951 → 6px */
    .pk-author-row__value {
        grid-column: 2;
        flex: none;
        max-width: 264px;
        margin-top: 6px;
        font-size: 14px;
    }
}


/* --- Мобильная версия панели контактов на странице «О нас» ---
   Макет «О нас моб.» (узел 791:5438): панель 393×360 во всю ширину,
   фон #f4f7fd, без скругления и тени.
     эйбрау    (25,32) Manrope ExtraBold 14px синим прописными
     заголовок (24,60) Manrope Bold 20px, tracking 0.8
     текст     (24,96) ширина 340, Inter Regular 14px
     плашки    без фона: кружок 60px со значком 24px синим,
               заголовок Manrope Bold 18px в 77px от края,
               значение Inter SemiBold 14px под ним через 10px;
               первая на 140, вторая на 220 от верха панели
     картинка  справа внизу, 217×201
*/
@media (max-width: 991.98px) {
    /* Панель во всю ширину экрана и вплотную к футеру */
    .pages-show__content .pk-about-section + .pk-contact-panel,
    .pages-show__content .pk-contact-panel {
        display: block;
        width: auto;
        max-width: none;
        min-height: 360px;
        padding: 32px 24px;
        margin: 0 -10px;
        background: #f4f7fd;
        border-radius: 0;
        box-shadow: none;
    }

    /* Панель — последний блок страницы, поэтому её низ совпадает
       с началом футера */
    .pages-show__content .wysiwyg-content > .pk-contact-panel:last-child {
        margin-bottom: calc(-1 * var(--pk-page-bottom, 50px));
    }

    .pages-show {
        --pk-page-bottom: 50px;
        padding-bottom: 0;
    }

    .pages-show__content .pk-contact-panel .pk-contact-panel__eyebrow {
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    /* Эйбрау 32…52, заголовок на 60 → 8px */
    .pages-show__content .pk-contact-panel .pk-contact-panel__title {
        margin-top: 8px;
        font-family: var(--pk-manrope);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

    /* Заголовок 60…88, текст на 96 → 8px */
    .pages-show__content .pk-contact-panel__text p {
        max-width: 340px;
        margin-top: 8px;
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    /* Текст 96…116, первая плашка на 140 → 24px; между ними 20px */
    .pages-show__content .pk-contact-panel .pk-contact-plates {
        gap: 20px;
        margin-top: 24px;
    }

    /* Кружок 60px, заголовок в 77px от края */
    .pages-show__content .pk-contact-panel .pk-contact-plate {
        min-height: 60px;
        padding: 0 0 0 77px;
    }

    .pages-show__content .pk-contact-panel .pk-contact-plate::before {
        left: 0;
        width: 60px;
        height: 60px;
        margin-top: -30px;
        background-size: 24px 24px;
    }

    .pages-show__content .pk-contact-panel .pk-contact-plate__title {
        font-size: 18px;
        letter-spacing: 0.02em;
    }

    /* Заголовок 142…167, значение на 177 → 10px */
    .pages-show__content .pk-contact-panel .pk-contact-plate__text p,
    .pages-show__content .pk-contact-panel .pk-contact-plate__text a {
        margin-top: 10px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    /* Положение подобрано на живой странице: размеры взяты из макета
       (видимая рамка повёрнутой картинки 207×178), а отступы
       уточнены под реальную ширину экрана. */
    .pages-show__content .pk-contact-panel__image {
        left: auto;
        right: -7px;
        bottom: 74px;
        width: 207px;
        height: 178px;
    }

    .pages-show__content .pk-contact-panel__image picture,
    .pages-show__content .pk-contact-panel__image img {
        height: 100%;
        object-fit: contain;
    }

    /* Тень под конвертом — отдельный слой в макете:
       размытый эллипс с наклоном 17 градусов */
    .pages-show__content .pk-contact-panel__image::before {
        content: "";
        position: absolute;
        left: 44px;
        bottom: -14px;
        width: 96px;
        height: 70px;
        border-radius: 50%;
        background: rgba(2, 80, 232, 0.12);
        transform: rotate(17deg);
        filter: blur(16px);
    }

    .pages-show__content .pk-contact-panel_about {
        min-height: 360px;
        padding-right: 24px;
    }
}